/* The Vitals — base: page, layout, chrome and the Desk contract roles.
   Mounted in the Desk (body.desk-connected), shell/public/shell/editorial.css owns the shared primitives — the
   sidebar, tab bar, .view-head/.view-title/.section-title, .btn, .input, .login-card, .desk-status — and nothing
   here competes with it: the bare-origin fallbacks below are scoped to body:not(.desk-connected). Vitals adds
   only what the contract leaves to apps (the kicker, icon buttons, badges, the trouble bar, the layer). */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; height: 100%;
  font: 400 14px/1.55 var(--desk-font);
  background-color: var(--desk-ground); color: var(--desk-ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: var(--desk-ink); }
a { color: var(--desk-blue); }
svg.v-icon { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
::selection { background: var(--desk-selection); }
:is(a, button, summary, select, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--desk-blue); outline-offset: 3px; }
/* Programmatic focus targets (the route heading, a dialog box) are never Tab stops: no ring. */
:is(h1, h2, h3, .view-title, .v-sheet, [role="dialog"], #view)[tabindex="-1"]:focus { outline: none; }
.v-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--desk-mono); }
.muted { color: var(--desk-muted); }
.num { font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

/* Skip link: the first Tab stop, visible only while focused. */
.v-skip { position: fixed; left: 8px; top: -64px; z-index: 200; padding: 10px 14px; background: var(--desk-paper); color: var(--desk-ink); border: 2px solid var(--desk-ink); border-radius: 2px; font: 700 13px/1.2 var(--desk-font); text-decoration: none; box-shadow: var(--shadow); }
.v-skip:focus, .v-skip:focus-visible { top: 8px; }

/* ---- Layout: sidebar + main (status bar, then the scrolling #view) + phone tab bar ------------------------- */
#app { height: 100%; min-height: 0; display: grid; grid-template-columns: var(--desk-sidebar-width) minmax(0, 1fr); }
#main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
#view {
  flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 24px var(--desk-gutter) 48px; container-type: inline-size; container-name: view;
}
#tabbar { display: none; }
@media (max-width: 900px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #sidebar { display: none; }
  /* Focused controls never land under the tab bar (WCAG 2.4.11). */
  #view { scroll-padding-bottom: calc(var(--desk-tabbar-height) + 16px); }
}
/* Mounted: editorial.css sets #view's padding; keep the container query name and the scroller. */
body.desk-connected #view { container-name: view; }

/* ---- Bare origin (no Desk shell): the same chrome, from the same tokens ------------------------------------- */
body:not(.desk-connected) #sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; padding: 24px 12px 18px; background: var(--desk-paper); border-right: 1px solid var(--desk-rule); }
body:not(.desk-connected) #sidebar .masthead { display: block; flex-shrink: 0; min-height: 90px; margin: 0 0 18px; padding: 0 8px 18px; border-bottom: 1px solid var(--desk-rule); color: var(--desk-ink); font: 800 26px/1.1 var(--desk-display); letter-spacing: -.8px; }
body:not(.desk-connected) #sidebar .masthead small { display: block; min-height: 32px; margin: 8px 0 0; color: var(--desk-muted); font: 400 10px/16px var(--desk-mono); }
body:not(.desk-connected) #sidebar .nav-item { display: flex; align-items: center; gap: 10px; flex-shrink: 0; width: 100%; height: 44px; min-height: 44px; margin: 2px 0; padding: 10px; border: 0; border-radius: 2px; background: transparent; color: var(--desk-ink); font: 600 14px/20px var(--desk-font); text-decoration: none; }
body:not(.desk-connected) #sidebar .nav-item:hover { background: var(--hover); }
body:not(.desk-connected) #sidebar .nav-item.active { background: var(--desk-soft); color: var(--desk-blue); box-shadow: inset 3px 0 var(--desk-blue); }
body:not(.desk-connected) #sidebar .nav-item .badge { margin-left: auto; }
body:not(.desk-connected) #sidebar .nav-item.active .badge { background: var(--desk-blue); color: var(--desk-paper); }
body:not(.desk-connected) #sidebar .nav-foot { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid var(--desk-rule); display: flex; flex-direction: column; gap: 10px; }
body:not(.desk-connected) #topbar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 8px var(--desk-gutter); border-bottom: 1px solid var(--desk-rule); background: var(--desk-paper); }
body:not(.desk-connected) #topbar .topbar-title { font: 400 11px/1.5 var(--desk-mono); color: var(--desk-muted); }
body:not(.desk-connected) #topbar .topbar-user { font: 400 11px/1.5 var(--desk-mono); color: var(--desk-muted); }
@media (max-width: 900px) {
  body:not(.desk-connected) #view { padding: 22px var(--desk-gutter) calc(var(--desk-tabbar-height) + 33px + env(safe-area-inset-bottom, 0px)); }
  body:not(.desk-connected) #sidebar { display: none; }
  body:not(.desk-connected) #tabbar { display: flex; position: fixed; inset: auto 0 0; z-index: 40; width: 100%; padding: 0 0 env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--desk-ink); background: var(--desk-paper); }
  body:not(.desk-connected) #tabbar:empty { display: none; }
  body:not(.desk-connected) #tabbar .tab { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--desk-tabbar-height); min-width: 0; padding: 6px 3px; border: 0; background: transparent; color: var(--desk-muted); font: 600 11px/16px var(--desk-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
  body:not(.desk-connected) #tabbar .tab.active { color: var(--desk-blue); box-shadow: inset 0 3px var(--desk-blue); }
}
/* Tab bar badges sit beside the icon in both modes (editorial sizes them). */
#tabbar .tab { position: relative; }
#tabbar .tab .badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; font: 500 9px/16px var(--desk-mono); background: var(--desk-blue); color: var(--desk-paper); }

/* ---- Contract roles at the bare origin (editorial.css owns them when mounted) ------------------------------- */
body:not(.desk-connected) .view-head { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 8px 0 24px; }
body:not(.desk-connected) .view-heading { flex: 1; min-width: 0; }
body:not(.desk-connected) .view-title { font: 800 var(--desk-title-size)/1.05 var(--desk-display); letter-spacing: -1.8px; margin: 8px 0 24px; overflow-wrap: anywhere; }
body:not(.desk-connected) .view-head .view-title { margin: 0; }
body:not(.desk-connected) .view-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
body:not(.desk-connected) .view-date { font: 400 11px/1.6 var(--desk-mono); color: var(--desk-muted); margin: 9px 0 0; }
body:not(.desk-connected) .section-title { font: 700 24px/1.2 var(--desk-display); letter-spacing: -.5px; margin: 24px 0 14px; }
body:not(.desk-connected) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 10px; border: 1px solid var(--desk-rule); border-radius: 2px; background: var(--desk-paper); color: var(--desk-ink); font: 600 12px/20px var(--desk-font); text-decoration: none; box-shadow: 0 2px 0 var(--desk-shadow); cursor: pointer; }
body:not(.desk-connected) .btn:hover { background: var(--hover); }
body:not(.desk-connected) .btn.small { min-height: 32px; padding: 5px 8px; font-size: 11px; }
body:not(.desk-connected) :is(.btn.primary, .btn.accent) { background: var(--desk-blue); color: var(--desk-paper); border-color: var(--desk-blue); }
body:not(.desk-connected) :is(.btn.primary, .btn.accent):hover { background: var(--desk-ink); }
body:not(.desk-connected) .btn.danger { color: var(--desk-clay); border-color: var(--desk-clay); }
body:not(.desk-connected) .btn.ghost { background: transparent; box-shadow: none; }
body:not(.desk-connected) .btn:disabled { opacity: .5; cursor: not-allowed; }
body:not(.desk-connected) :is(.input, .login-field input, #view select, #view textarea) { min-height: 36px; max-width: 100%; border: 1px solid var(--desk-rule); border-radius: 2px; padding: 8px 10px; background: var(--desk-raised); color: var(--desk-ink); font: 400 13px/1.5 var(--desk-font); }
body:not(.desk-connected) .field-label { font: 600 11px/1.5 var(--desk-font); color: var(--desk-muted); }
body:not(.desk-connected) .desk-status { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px var(--desk-gutter); border-bottom: 1px solid var(--desk-rule); background: var(--desk-soft); color: var(--desk-ink); font: 500 12px/1.5 var(--desk-font); flex-wrap: wrap; }
body:not(.desk-connected) .desk-status button { font: 600 12px/1.5 var(--desk-font); min-height: 36px; padding: 6px 10px; border: 1px solid var(--desk-rule); border-radius: 2px; background: var(--desk-paper); color: var(--desk-ink); cursor: pointer; }
body:not(.desk-connected) .login-wrap { display: flex; justify-content: center; padding: 24px 0; }
body:not(.desk-connected) .login-card { width: min(420px, 100%); padding: 28px; background: var(--desk-paper); border: 1px solid var(--desk-rule); border-top: 4px solid var(--desk-blue); border-radius: 2px; box-shadow: var(--shadow); }
body:not(.desk-connected) .login-card .masthead { margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--desk-rule); font: 800 32px/1.1 var(--desk-display); letter-spacing: -1px; }
body:not(.desk-connected) .login-card .masthead small { display: block; margin: 8px 0 0; font: 400 11px/1.5 var(--desk-mono); color: var(--desk-muted); }
body:not(.desk-connected) .login-card button[type="submit"] { width: 100%; }
body:not(.desk-connected) .desk-message { width: 100%; max-width: 520px; margin: auto; padding: 24px 16px; }
body:not(.desk-connected) .desk-message-card { padding: 28px; background: var(--desk-paper); border: 1px solid var(--desk-rule); border-top: 4px solid var(--desk-blue); border-radius: 2px; box-shadow: var(--shadow); }
body:not(.desk-connected) .desk-message p { font: 400 14px/1.6 var(--desk-font); margin: 0 0 16px; }
body:not(.desk-connected) .desk-message-label { font: 400 11px/1.6 var(--desk-mono); color: var(--desk-muted); margin: 0 0 16px; }
body:not(.desk-connected) .desk-date { position: relative; isolation: isolate; background: var(--desk-yellow); color: var(--desk-ink); border: 1px solid var(--desk-ink); padding: 9px 16px; min-width: 76px; text-align: center; transform: rotate(3deg); box-shadow: 3px 4px 0 var(--desk-shadow); margin-left: 65px; font: 500 11px/1.3 var(--desk-mono); }
body:not(.desk-connected) .desk-date strong { display: block; font: 800 38px/1.1 var(--desk-display); }
@media (max-width: 900px) {
  body:not(.desk-connected) .view-head { flex-direction: column; align-items: stretch; gap: 18px; }
  body:not(.desk-connected) :is(.input, .login-field input, #view select, #view textarea) { font-size: 16px; }
}
/* 44px targets on the phone and on any touch screen (a tablet, a phone in landscape wider than 900px) */
@media (max-width: 900px), (pointer: coarse) {
  body:not(.desk-connected) :is(.btn, .btn.small, .iconbtn, .desk-status button) { min-height: 44px; }
  body:not(.desk-connected) :is(.input, .login-field input, #view select, #view textarea) { min-height: 44px; }
}

/* ---- Additions the contract leaves to apps (both modes) ------------------------------------------------------ */
.view-kicker { margin: 0 0 4px; font: 400 11px/1.5 var(--desk-mono); color: var(--desk-muted); }
.view-kicker a { color: inherit; }
/* beats editorial.css body.desk-connected .view-actions{margin-top:14px} (0,2,1) so the Desk matches the prototype */
#view .view-head .view-actions { margin-top: 0; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0; border: 1px solid var(--desk-rule); border-radius: 2px; background: var(--desk-paper); color: var(--desk-ink); box-shadow: 0 2px 0 var(--desk-shadow); cursor: pointer; }
.iconbtn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
/* The icon button's hover hint (its name), for a mouse only; never a title, which screen readers would read twice. */
.iconbtn[data-tip], .v-seg button[data-tip] { position: relative; }
@media (hover: hover) and (pointer: fine) {
  :is(.iconbtn, .v-seg button)[data-tip]:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 60; padding: 3px 7px; border-radius: 2px; background: var(--desk-ink); color: var(--desk-paper); font: 400 11px/1.4 var(--desk-mono); white-space: nowrap; pointer-events: none; }
}
.iconbtn:hover { background: var(--hover); }
.iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.iconbtn[aria-pressed="true"] { background: var(--desk-ink); color: var(--desk-paper); }
.btn svg, .iconbtn svg { width: 16px; height: 16px; flex: none; }
.badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 4px; border: 0; border-radius: 2px; background: var(--desk-ink); color: var(--desk-paper); font: 500 10px/18px var(--desk-mono); }
.desk-status a { color: var(--desk-ink); font-weight: 700; }
@media (max-width: 900px), (pointer: coarse) {
  .desk-status a { position: relative; display: inline-block; }
  .desk-status a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
}
.desk-status .ds-glyph { font: 500 12px/1 var(--desk-mono); }
.desk-status .ds-text { flex: 1 1 240px; min-width: 0; }
/* The trouble bar (D38): clay means data trouble only. #vitals-status outranks editorial's shared .desk-status. */
#vitals-status.trouble { background: color-mix(in srgb, var(--desk-clay) 14%, var(--desk-paper)); border-bottom-color: var(--desk-clay); box-shadow: inset 4px 0 var(--desk-clay); }
#vitals-status.trouble .ds-glyph { color: var(--desk-clay); }
@media (max-width: 900px), (pointer: coarse) {
  .iconbtn { min-width: 44px; min-height: 44px; }
  .desk-status button { min-height: 44px; }
}
.v-loading { margin: 24px 0; font: 400 11px/1.6 var(--desk-mono); color: var(--desk-muted); }

/* ---- Container-query scaffolding on #view (§3.3: 580 / 760 / 1180) ------------------------------------------ */
.cq-from-580, .cq-from-760, .cq-from-1180 { display: none; }
@container view (min-width: 580px) { .cq-from-580 { display: revert; } .cq-below-580 { display: none !important; } }
@container view (min-width: 760px) { .cq-from-760 { display: revert; } .cq-below-760 { display: none !important; } }
@container view (min-width: 1180px) { .cq-from-1180 { display: revert; } .cq-below-1180 { display: none !important; } }
@container view (max-width: 579px) { .view-head { flex-direction: column; align-items: stretch; gap: 18px; } }
.v-grid-2, .v-grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@container view (min-width: 760px) { .v-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container view (min-width: 1180px) { .v-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Motion: none in charts; the 1.2s refresh underline is the only movement (§8.5) --------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .desk-date { transform: none; }
}