/* Breach Clock, Object Atlas row 8. The name, the lede and the search sit on the graphite field beside the
 * notice dial, which is artwork: one machined tick per filed notice, never a second chart of the counts.
 * The matching notices and the square strip, which is the data figure, stay on the reading sheet.
 * Tokens only; layout overrides for components.css "Breach Clock". */
article.breach-clock { padding-top: 0; }
article.breach-clock .bc-head {
  align-items: center;
  background: var(--oa-ground);
  box-shadow: 0 0 0 100vmax var(--oa-ground);
  clip-path: inset(0 -100vmax);
  color: var(--oa-paper);
  padding: var(--wp-12) 0 var(--wp-16);
}
article.breach-clock .bc-head .eyebrow { color: var(--oa-muted); }
article.breach-clock .bc-head h1, article.breach-clock .bc-head .lede { color: var(--oa-paper); }
article.breach-clock .bc-head .search-panel { background: var(--oa-ground-2); border: var(--wp-rule) solid var(--oa-line); }
article.breach-clock .bc-head .search-panel label { color: var(--oa-paper); }
article.breach-clock .bc-head .search-panel input { background: var(--oa-ground); border: var(--wp-rule-strong) solid var(--oa-control); color: var(--oa-paper); color-scheme: dark; }
article.breach-clock .bc-head .search-panel input::placeholder { color: var(--oa-muted); opacity: 1; }
article.breach-clock .bc-head .search-panel input:focus-visible { outline: 3px solid var(--wp-focus-field); outline-offset: 3px; }
article.breach-clock .bc-head .privacy-line { color: var(--oa-muted); }
article.breach-clock .bc-dial { margin: 0; }
article.breach-clock .bc-dial img { aspect-ratio: 1200 / 760; display: block; height: auto; width: 100%; }
article.breach-clock .bc-dial figcaption { color: var(--oa-muted); margin-top: var(--wp-3); }

/* The sheet: matching notices on the left, the strip and its four keys beside them. */
article.breach-clock .bc-body { align-items: start; display: grid; gap: var(--wp-12); grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); margin-top: var(--wp-12); }
article.breach-clock .bc-results > .offer-results, article.breach-clock .bc-results > .empty-result { margin-top: 0; }
article.breach-clock .bc-body .tally { position: sticky; top: var(--wp-6); }
article.breach-clock .bc-body .tally .strip { grid-template-columns: repeat(14, minmax(0, 1fr)); }
/* In the 8/4 sheet the notice column is too narrow for the components.css 5/7 row, so each notice stacks. */
@container page (min-width: 56.3125rem) {
  article.breach-clock .bc-body .offer { grid-template-columns: minmax(0, 1fr); }
  article.breach-clock .bc-body .offer h2 { grid-row: auto; margin-bottom: var(--wp-2); }
}

@container page (max-width: 56.25rem) {
  article.breach-clock .bc-head { display: block; order: 1; padding: var(--wp-8) 0 var(--wp-8); }
  article.breach-clock .bc-dial { margin: var(--wp-8) auto 0; max-width: 22rem; }
  /* Once a visitor types, the art steps aside so the first match sits under the field. */
  article.breach-clock:has(#company-search:not(:placeholder-shown)) .bc-dial { display: none; }
  article.breach-clock .bc-body { display: flex; flex-direction: column; gap: 0; margin-top: var(--wp-8); order: 2; }
  article.breach-clock .bc-body .tally { position: static; }
}
@container page (max-width: 37.5rem) {
  article.breach-clock { padding-top: 0; }
  article.breach-clock .bc-head { padding: var(--wp-6) 0 var(--wp-8); }
}