/* The compliance board's own few rules. Everything else is the shared dispatch style sheet (style.css);
   the sizes and gaps here are ones it already uses. */

/* Sign in, first-run setup and your password: one narrow card in the middle (the shared drawer's width, and the
   page's own side gap above and below). */
.auth-card { width: min(440px, 100%); margin: 34px auto; }

/* Dashboard: five count tiles in the shared .stats row (it has four columns). */
.stats.stats-five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .stats.stats-five { grid-template-columns: 1fr; } }
/* A tile with a count above zero is filled with its status color (the shared theme colors), like the earlier board;
   white text, or dark text on the dark themes' pale colors. #workspace matches the shared workspace tile rule it replaces; print stays plain. */
@media screen {
  #workspace .stats.stats-five .stat:is(.purple, .red, .orange, .yellow, .green) { --tile: var(--green); background: var(--tile); border-color: var(--tile); color: #fff; }
  #workspace .stats.stats-five .stat.purple { --tile: var(--purple); }
  #workspace .stats.stats-five .stat.red { --tile: var(--red); }
  #workspace .stats.stats-five .stat.orange { --tile: var(--orange); }
  #workspace .stats.stats-five .stat.yellow { --tile: var(--yellow); }
  /* The dark themes' status colors are pale, so the text on them is the dark page color instead. */
  html[data-theme="dark"] #workspace .stats.stats-five .stat:is(.purple, .red, .orange, .yellow, .green) { color: var(--steel); }
  #workspace .stats.stats-five .stat:is(.purple, .red, .orange, .yellow, .green) span { color: inherit; }
  #workspace .stats.stats-five .stat:is(.purple, .red, .orange, .yellow, .green) .pill { background: none; padding: 0; }
  /* The tiles are links: a border on hover, as the shared a.stat:hover (which the workspace tile rule outranks), and a
     ring on the tile whose list is showing. */
  #workspace .stats.stats-five a.stat:hover { border-color: var(--ink); }
  #workspace .stats.stats-five a.stat[aria-current="page"] { box-shadow: 0 0 0 2px var(--ink); }
}

/* Sign-off equipment: a dropdown of checkboxes. The closed box is the shared select (style.css input/select rule, and
   its dark-theme field colors); the open panel is the shared .checklist on the search-results surface (.gresults). */
fieldset.f { min-width: 0; }
.pick { position: relative; }
.pick > summary { list-style: none; cursor: pointer; padding: 8px 32px 8px 11px; border: 1px solid var(--field-border, #CBD3DE); border-radius: 7px;
  background: var(--field, #fff); color: var(--ink); position: relative; }
.pick > summary::-webkit-details-marker { display: none; }
.pick > summary::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
.pick[open] > summary { border-color: var(--navy); }
.pick-panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px rgba(21, 35, 59, .18); }
.pick-panel .checklist { border: 0; border-radius: 0; }
.pick-panel .empty { padding: 12px; }
.pick-all { font-weight: 600; }
.pick-group { padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); background: var(--surface-subtle, #FBFCFD);
  border-bottom: 1px solid var(--line-2); }
.pick .check .muted { font-size: 13px; }

/* Dialogs (Renew, Who needs it): the dispatch app's dialog frame (storage-asset-tags-preview.css: border, radius, shadow, backdrop
   per theme, a × close), sized for a short form. A row a document is dragged over is outlined, as the dispatch board's
   drop cells are. */
dialog.cb-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line, #b9c7d8); border-radius: 10px;
  color: var(--ink); background: var(--panel, #fff); box-shadow: 0 28px 100px #0005; }
dialog.cb-dialog::backdrop { background: rgb(4 13 26 / .65); }
@media screen {
  html[data-theme="dark"]:not([data-theme-palette="blue"]) dialog.cb-dialog::backdrop { background: rgb(0 0 0 / .65); }
  html[data-theme="dark"]:not([data-theme-palette="blue"]) .cb-dialog-close:hover { background: rgb(160 160 160 / .12); }
}
.cb-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.cb-dialog-head h2 { margin: 0; }
.cb-dialog-head p { margin: 4px 0 0; }
.cb-dialog-close { border: 0; border-radius: 4px; background: transparent; color: var(--ink-2); width: 32px; height: 32px; flex: 0 0 32px; font: 27px/1 system-ui, sans-serif; cursor: pointer; }
.cb-dialog-close:hover { background: rgb(110 135 170 / .12); }
.cb-dialog-body { padding: 18px 24px 4px; }
.renew-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px; border: 1px dashed var(--field-border, #CBD3DE); border-radius: 7px; }
.cb-dialog-foot { padding: 0 24px 20px; }
.renew-target { outline: 3px dashed var(--brand); outline-offset: -3px; }

/* Manage lists, categories: required docs as grey pills with a × (as dispatch's .fin-crew, style.css:1057-1060),
   an add box, and suggestions as small ghost buttons. */
.req-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.req-tags .pill .x { all: unset; box-sizing: border-box; cursor: pointer; margin-left: 4px; min-width: 28px; min-height: 28px; display: inline-grid;
  place-items: center; font: 700 20px/1 var(--font); color: var(--ink-2); border-radius: var(--radius, 4px); }
.req-tags .pill .x:hover { color: var(--red); }
.req-tags .pill .x:focus-visible { outline: 3px solid var(--brand); }
.contact[id^="cat"] { scroll-margin-top: 130px; }
/* The doc's name in its tag opens "Who needs it?"; the list there is the shared .checklist, scrolling when long. */
.req-tags .pill .req-who { all: unset; cursor: pointer; }
.req-tags .pill .req-who:hover { text-decoration: underline; }
.req-tags .pill .req-who:focus-visible { outline: 3px solid var(--brand); }
.who-list { max-height: 360px; overflow-y: auto; }
.req-add { display: flex; gap: 8px; align-items: center; max-width: 420px; }
.req-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }

/* Reports: a month's card in the 12-month forecast is linked from the year table (room for the sticky top bar, as
   the sections have); a message from the last action isn't printed with a report. */
.card[id^="m2"] { scroll-margin-top: 130px; }
@media print { .flash { display: none !important; } }
/* The sign-off grid: centred ✓ columns (as the shared .t .num right-aligns), a scroll when it's wider than the page, the
   count row under a line, and printed landscape. */
.t .center { text-align: center; }
.grid-scroll { overflow-x: auto; }
.signoff-grid tfoot :is(th, td) { border-top: 1px solid var(--line); border-bottom: 0; }
/* Row headers read like the other cells, and stay in view when the grid scrolls sideways. */
.signoff-grid tbody th { font: inherit; color: inherit; background: var(--panel); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.signoff-grid :is(thead th:first-child, tbody th, tfoot th) { position: sticky; left: 0; z-index: 1; }
/* The whole report prints landscape (the page property on the content, so the title stays with the grid). */
#workspace:has(.signoff-grid) { page: wide; }
@page wide { size: landscape; }
/* Text for screen readers only (the ✓'s "signed off"). */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The category and item under a name in a table row (the size of the shared field hint). */
.cell-sub { font-size: 13px; }

/* "All items": one folding section per record, spaced like the Today page's sections. */
.groups { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.groups .sec .sec-link + .sec-link { margin-left: 0; }
/* A link to one of them (#g<id>, #so<id>), or to the sign-off form, leaves room for the sticky top bar, as the shared section.sec does. */
details.sec.group, #add-signoff { scroll-margin-top: 130px; }
/* Inside the sign-offs card the sections sit under "+ Add sign-off", the card's padding below them. */
#signoffs .groups { margin: 12px 0 0; }
/* Their names are one level under the card's title: h3, at the size the shared nested sections use (.sec-row). */
#signoffs .sec > summary h3 { margin: 0; font-size: 20px; color: var(--ink); }

/* TV view: the dispatch TV masthead (tv-board.css), three count tiles, and a list that fills the screen.
   Text is larger so it reads across the crew room. */
.tv-filters { margin: 0; }
.stats.tv-stats { grid-template-columns: repeat(3, 1fr); margin: 0; }
.tv-stats .stat b { font-size: 40px; }
.tv-list { flex: 1; min-height: 0; overflow: hidden; margin: 0; }
.tv-list .t td { font-size: 22px; padding-top: 14px; padding-bottom: 14px; }
.tv-list .t td .cell-sub { font-size: 16px; }
.tv-list .pill { font-size: 20px; }