/* Panel-only rules on top of theme/dna-me-theme.css. Tokens only: the
   theme owns every colour, radius and size; this file names the few things
   an order panel has that a CRM does not (a key-value record, a gate name,
   an offer-lines table). Colour still means one thing here - whether
   something needs a person - and the words always say it too. */

.page-sub { color: var(--text-muted); margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); }
.note { color: var(--text-muted); font-size: var(--fs-sm); }
p.note + p.note, .card .note { margin-top: var(--sp-2); }
.card h3 { font-size: 16px; font-weight: 600; margin: 0 0 var(--sp-2); }
.card-header + .note { margin-top: calc(-1 * var(--sp-2)); margin-bottom: var(--sp-3); }

/* Text for screen readers only - the gate track's state words. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gate-label { line-height: 1; }
.data-grid td .gate-track { vertical-align: middle; }
.page-header h1 .badge { vertical-align: middle; margin-left: var(--sp-2); font-weight: 500; }

/* The sidebar's brand is a link to the overview, styled like the CRM's text logo. */
.logo-link { text-decoration: none; }

/* An env banner is the filter banner with its sentence; strong is the env. */
.env-banner strong { text-transform: uppercase; letter-spacing: 0.05em; }

/* Key-value record. Two columns on desktop; on mobile the same visual
   language as the data grid's stacked rows: uppercase muted labels above. */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-6); margin: 0; }
.kv dt { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--sp-3); }
}

/* The overview's attention count, in the red the theme uses for badge-danger text. */
.stat-card-attention .stat-card-value { color: #f87171; }
.blockers { margin: 0; padding-left: var(--sp-4); color: #f87171; font-size: var(--fs-sm); }

/* "Nothing here." inside a table; .empty-state is for a whole section. */
.empty-inline { color: var(--text-muted); font-style: italic; padding: var(--sp-2) 0; }

/* The gate name column on the order page. */
.gate-name { width: 9em; font-weight: 500; color: var(--text-muted); }

/* Form widths that used to be inline styles. */
.input-wide { min-width: 22em; }
.input-narrow { width: 6em; }
.offer-lines .col-package { width: 16em; }
/* In pixels, and sized from what goes IN the box. These were 5, 7 and 8em,
   and an em on a table header is the header's 12px: the quantity column came
   out 60px wide, its input 36px, and after 24px of padding the number had
   10px - so a quantity of 1 was in the field and could not be seen. Each
   width is the cell's 24px of padding, the input's 24px, the longest thing
   an offer puts there (a four-digit quantity, "Gsample", 9900.00) and, for
   the two number fields, the spinner that appears under the pointer. */
.offer-lines .col-qty { width: 104px; }
.offer-lines .col-unit { width: 112px; }
.offer-lines .col-price { width: 128px; }
.radio-list label { display: flex; gap: var(--sp-2); align-items: baseline; padding: var(--sp-2) 0; min-height: var(--touch); }
.radio-list input { width: auto; }
.toolbar input, .toolbar select { width: auto; flex: 1 1 12em; }
.toolbar input[type=number] { flex: 0 1 8em; }
@media (max-width: 768px) {
  .input-wide, .input-narrow, .offer-lines .col-package, .offer-lines .col-qty,
  .offer-lines .col-unit, .offer-lines .col-price { width: auto; min-width: 0; }
}

/* The sentence about who writes, on the order page's Actions card only. */
.footer-note { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-xs); }

/* A QR code needs a white quiet zone on a dark surface, or it does not scan. */
.qr { text-align: center; }
.qr img { display: inline-block; border-radius: var(--radius-sm); background: #fff; padding: var(--sp-2); }

/* Login card: the env banner sits above the title. */
.login-card .env-banner { margin-bottom: var(--sp-4); }
.login-card .note { margin-top: var(--sp-2); }

/* The manual. Prose in cards: the theme zeroes every margin, so a chapter
   has to say where its paragraphs and lists breathe, and a line of help is
   kept to a width somebody reads rather than scans. */
.help-link { font-size: var(--fs-sm); white-space: nowrap; margin-left: auto; }
.help-body p, .help-body li, .help-body dd { max-width: 76ch; line-height: 1.6; }
.help-body p { margin: 0 0 var(--sp-3); }
.help-body ul, .help-body ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-6); }
.help-body li { margin-bottom: var(--sp-1); }
.help-body h3 { margin-top: var(--sp-5); }
.help-body .card > :last-child { margin-bottom: 0; }
.help-body .data-grid { margin-bottom: var(--sp-3); }
/* The track is a list too; it keeps its own shape inside a chapter. */
.help-body .gate-track { margin: 0 0 var(--sp-3); padding-left: 0; }
.help-body .gate-track li { margin-bottom: 0; max-width: none; line-height: 1; }
.help-body td .gate-track { margin: 0; }

/* What the screen calls a thing, and what the panel says to you. Marked
   apart because help.test.ts looks each one up where it is said. */
.ui { font-weight: 600; white-space: nowrap; padding: 0 var(--sp-1); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-subtle); }
.msg { font-style: italic; }

.help-toc { margin: 0; padding-left: var(--sp-6); }
.help-toc li { padding: var(--sp-2) 0; }
.help-toc a { font-weight: 600; margin-right: var(--sp-2); }

.help-pager { display: flex; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-5) 0; font-size: var(--fs-sm); }

/* A screenshot. The frame says "picture of the panel", so nobody clicks it. */
.help-shot { margin: 0 0 var(--sp-4); }
.help-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.help-shot figcaption { margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); max-width: 76ch; }
@media (max-width: 768px) {
  .ui { white-space: normal; }
}

/* The glossary is the key-value list with room between its entries. */
.help-glossary { row-gap: var(--sp-3); }
.help-glossary dt { color: var(--text); font-size: var(--fs-base); font-weight: 600; }