/* CaOps-specific styling.
 *
 * Deliberately almost empty: awp-admin.css is the source of truth, and a rule added
 * here is a rule that will not follow the design system when it moves. If something
 * looks wrong, the fix is nearly always to use the component the stylesheet already
 * ships rather than to add a rule below.
 */

/* Numeric column headings.
 *
 * The design system sets `.num { text-align: right }` and, further down,
 * `.tbl th { text-align: left }` — which is both later and more specific, so a
 * `<th class="num">` stays left-aligned over a right-aligned column. This is the
 * one rule that has to out-specify it.
 */
.tbl th.num { text-align: right; }

/* The design system pads a table's first cell to the card edge with
   `.card > :is(.scroll, form > .scroll) .tbl :is(th, td):first-child` (0,4,2) and
   undoes it for stacked rows with `.card > .scroll .tbl-stack :is(th, td):first-child`
   (0,4,1) — one type selector weaker, so the undo never applies and the first field
   of every stacked card sits 12px right of the rest. Matched here at higher weight;
   remove once awp-admin.css fixes its own reset. */
.card > :is(.scroll, form > .scroll) .tbl-stack :is(th, td):first-child { padding-left: var(--sp-4); }

/* A page that should be exactly as tall as the space left over rather than as tall
   as its content. The board is the one that needs it — its columns scroll, the page
   does not. */
.main-fill { display: flex; flex-direction: column; min-height: 0; }
.main-fill > :last-child { flex: 1; min-height: 0; }

/* The board's columns scroll on their own so the headers stay put. */
.board { align-items: start; }
.board-col { max-height: 100%; }

/* A running timer in the topbar should read as live, not as decoration. */
.chip-warn .ri-timer-flash-line { animation: caops-pulse 2s ease-in-out infinite; }
@keyframes caops-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .chip-warn .ri-timer-flash-line { animation: none; } }

/* Period chips on a task card: the month or quarter the return covers, which is the
   first thing anyone looks for and is not the title. */
.period { font-variant-numeric: tabular-nums; }

/* A label that exists for a screen reader and not for the eye — the permission
   matrix is a grid of checkboxes whose meaning is its row and column. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The task dialog carries the whole task — checklist, thread, assignees, time — in
   two columns. The design system's default dialog is sized for a confirmation, which
   squeezes that into two thin ones. This is a width, not a restyle. */
#task-dialog { width: min(980px, 94vw); max-width: none; }
#task-dialog .dlg-body { max-height: min(76vh, 780px); }

/* The shared dialog holds a record's whole form, which the design system's default
   dialog width — sized for a confirmation — squeezes into something unusable. */
#app-dialog { width: min(760px, 94vw); max-width: none; }
#app-dialog .dlg-body { max-height: min(76vh, 760px); }
/* A form inside it supplies its own footer, so it should not float above the fold. */
#app-dialog .savebar { position: static; margin-top: var(--sp-4); }

/* The guides' prose. The design system styles the components a guide renders into
   — callouts, tables, code — but not the rhythm of a page of writing, because no
   other screen in the app is one. */
.guide-body h3 { margin: var(--sp-5) 0 var(--sp-2); }
.guide-body h4 { margin: var(--sp-4) 0 var(--sp-2); }
.guide-body p, .guide-body li { line-height: 1.6; }
.guide-body ul, .guide-body ol { padding-left: 20px; margin: 0 0 var(--sp-3); }
.guide-body .callout, .guide-body .scroll { margin: var(--sp-3) 0; }