/* Hero "Today" panel, trust strip, platform stage line and the sr-only helper. */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Today panel: a picture of the app, so it uses the device font and the office type scale (title 18/24, body 14/20, label 13/18, caption 12/16).
   Flat card, corner 12, a 3px gradient stripe on the leading edge (clipped by the rounded corner), status as one chip with icon and word. */
.today { --device: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Arial, sans-serif; position: relative; overflow: hidden; margin: 0; font-family: var(--device); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 24px 8px 28px; }
.today::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gradient); }
.today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0 12px; border-bottom: 1px solid var(--line-row); }
.today-farm { font: 400 .8125rem/1.3846 var(--device); color: var(--text-2); }
.today-title { font: 500 1.125rem/1.3333 var(--device); letter-spacing: -.01em; color: var(--text); }
.today-rows { list-style: none; margin: 0; padding: 0; }
.today-rows li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-row); }
.today-rows li:first-child { border-top: 0; }
.today-rows li > div { min-width: 0; }
.today-rows .t { display: block; font: 400 .875rem/1.4286 var(--device); color: var(--text); }
.today-rows .d { display: block; margin-top: 4px; font: 400 .75rem/1.3333 var(--device); color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Status chip: pill, 26 tall, state background and text, inset 1px edge, icon then word; the label never wraps. */
.today-rows .s { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); font: 400 .8125rem/1.3846 var(--device); white-space: nowrap; font-variant-numeric: tabular-nums; }
.today-rows .s svg { flex: none; width: 16px; height: 16px; }
.today-rows .s-due { color: var(--wait); background: var(--wait-bg); box-shadow: inset 0 0 0 1px var(--wait-line); }
.today-rows .s-ready { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.today-rows .s-late { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.today-rows .s-late svg path:first-child { fill: var(--warn-mark); fill-opacity: .3; }

/* Trust strip: one hairline line of four plain facts. */
.trust { border-top: 1px solid var(--line-row); border-bottom: 1px solid var(--line-row); }
.trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0 auto; padding-top: 16px; padding-bottom: 16px; font-size: .84375rem; line-height: 1.5; color: var(--text-3); }
.trust-row li:not(:last-child)::after { content: "·"; margin: 0 16px; color: var(--line); }

/* Stage line: the lifecycle as a single hairline row above the Platform rows. */
.stages { list-style: none; margin: 0 0 8px; padding: 0 0 16px; display: block; text-wrap: balance; border-bottom: 1px solid var(--line-row); font: 400 .875rem/1.5 var(--display); color: var(--text-2); }
.stages li { display: inline; }
.stages li:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--line); }

/* Narrow screens: the trust strip becomes a tidy grid with no dots, so none can lead a wrapped line. */
@media (max-width: 960px) {
  .trust-row li { flex: 0 0 50%; }
  .trust-row li::after { display: none; }
}
@media (max-width: 720px) {
  .today { padding: 4px 16px 4px 20px; }
  .trust-row { padding-top: 12px; padding-bottom: 12px; }
  .trust-row li { flex: 0 0 100%; }
}
.nowrap { white-space: nowrap; }