/* Design System display components (Chip, DataTag, Tab, NavItem, SideNav, TopBar, Banner, Cell, Stat, StageStep,
   SourceBar, RowCard, KeyValue, ProgressBar, MenuItem, overlays). Values from docs/implementation/ui-fidelity/design-system/SPEC.md.
   Loaded after design-fidelity.css. */

/* ---------------------------------------------------------------------------------------------
   Menu drawer (Figma NAV-01 `90:31948` tablet, `90:31867` mobile). Desktop keeps the SideNav.
   Tablet: a left drawer 340 wide, full height, over a 40% black scrim that also covers the top bar.
   Mobile: the same list as a full-screen page. Header 69 high (padding 12/16, bottom border), content
   padding 16 / gap 16, group name 12/500 #55544F, bordered list (radius 6) of 67-high rows.
   --------------------------------------------------------------------------------------------- */
.sidenav > .menu-panel, .sidenav > .menu-scrim-link { display: none; }
@media (max-width: 1024px) {
  body .sidenav {
    display: none; position: fixed; z-index: 5; inset: 0; width: auto; height: auto; padding: 0;
    border: 0; background: transparent; overflow: visible;
  }
  body .sidenav.open { display: block; }
  html:not(.menu-js) body .sidenav:target { display: block; }
  html.menu-js body .sidenav:target:not(.open) { display: none; }
  body .sidenav.open::after, body .sidenav:target::after { content: none; display: none; }
  body .sidenav > .nav-label, body .sidenav > a { display: none; }
  body .sidenav > .menu-scrim-link { display: block; position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, 0.4); }
  body .sidenav > .menu-panel {
    position: relative; z-index: 1; display: flex; flex-direction: column; width: 340px; max-width: 100%; height: 100%;
    background: var(--bg-surface); border: 1px solid var(--border-default); box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }
  .menu-head {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border-default); background: var(--bg-surface);
  }
  .menu-title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text-primary); }
  .menu-head .menu-close {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; height: 44px; padding: 8px 16px;
    border: 0; border-radius: var(--radius-md); background: transparent; color: var(--accent);
    font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: none;
  }
  .menu-content { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px; }
  .menu-group { display: flex; flex-direction: column; gap: 8px; }
  .menu-group-name { margin: 0; color: var(--text-secondary); font-size: 12px; font-weight: 500; line-height: 16px; }
  .menu-rows { display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; flex: none; }
  .menu-row {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--border-default);
    background: var(--bg-surface); color: var(--text-primary); text-decoration: none;
  }
  .menu-row strong { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text-primary); }
  .menu-row span { font-size: 13px; font-weight: 400; line-height: 18px; color: var(--text-secondary); }
  .menu-row.here { background: var(--accent-subtle); }
  .menu-row.here strong { color: var(--accent); }
}
@media (max-width: 767px) {
  body .sidenav > .menu-panel { width: 100%; border: 0; box-shadow: none; background: var(--bg-canvas); }
}

/* ---------------------------------------------------------------------------------------------
   Shared component corrections found by the conformance harness (see COMPONENTS_CONFORMANCE.md).
   Rules use `html body` so they win over the body.<family> stylesheets that load before this file.
   --------------------------------------------------------------------------------------------- */

/* Links: Figma draws no underline anywhere. Links inside running text are accent and medium so they stay findable. */
a { text-decoration: none; }
.banner a, .subhead a, .hint a, .fine a, .legend a, .footnote a, p > a:not([class]), td > a:not([class]), span > a:not([class]) {
  color: var(--accent); font-weight: 500; text-decoration: none;
}

/* Banner (3:102): body 13/18 #1B1B1A, title 13/500 in the tone colour, also inside dialogs and drawers
   (a `.dialog > p` or `.stop-dialog p` rule must not restyle a banner paragraph). */
html body .banner, html body .dialog p.banner, html body .drawer p.banner, html body .dialog .banner, html body .drawer .banner {
  font-size: 13px; font-weight: 400; line-height: 18px; color: var(--text-primary);
}
html body .banner strong { font-size: 13px; font-weight: 500; line-height: 18px; }

/* DataTag and SourceBar dot colours (spec): Measured #17653F, Provider est. #6B3FA0, SERP sample #2447D6,
   Crawl #8A4B00, Operator #55544F, Derived #0F6E78. One rule for every markup variant in the app. */
html body[class] .dot.measured, html body[class] .origin.measured .dot, html body[class] .sourcebar.measured .dot { background: var(--data-measured); }
html body[class] .dot.provider, html body[class] .origin.provider .dot, html body[class] .sourcebar.provider .dot { background: var(--data-provider); }
html body[class] .dot.serp, html body[class] .origin.serp .dot, html body[class] .sourcebar.serp .dot { background: var(--data-serp); }
html body[class] .dot.crawl, html body[class] .origin.crawl .dot, html body[class] .sourcebar.crawl .dot { background: var(--data-crawl); }
html body[class] .dot.operator, html body[class] .origin.operator .dot, html body[class] .sourcebar.operator .dot { background: var(--data-operator); }
html body[class] .dot.derived, html body[class] .origin.derived .dot, html body[class] .sourcebar.derived .dot { background: var(--data-derived); }
html body .who-pill, html body .who-pill strong { font-weight: 500; }

/* SourceBar (3:245), desktop: the "·" separators and the Extra part are text/muted; label, source and when keep their colours.
   On tablet and mobile Figma draws one #55544F text node next to the DataTag, so nothing changes there. */
@media (min-width: 1025px) {
  html body .sourcebar .sep, html body .sourcebar .sep-after-who, html body .sourcebar .extra { color: var(--text-muted); }
}

/* Table (Cell 3:89): header row 32 high with no line under it; body rows end in a 1px #D9D8D3 line, the last row too. */
html body th { padding-bottom: 8px; border-bottom: 0; }
@media (min-width: 1025px) {
  html body .table-wrap tbody tr:last-child td { border-bottom: 1px solid var(--border-default); }
}

/* Chips inside row cards: `.card span` must not restyle a Chip (12/500/16, tone colours stay). */
html body .card .chip, html body .cards .chip { font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; }

/* Drawer Close is a Ghost button: 13/500 on 18, accent. */
html body .close { font-size: 13px; font-weight: 500; line-height: 18px; }

/* Table summary under a list (tablet and mobile): Caption 12/400 #55544F (Figma T · BL-06, T · KW-09). */
@media (max-width: 1024px) {
  html body[class] .pager p, html body[class] .table-footer p, html body[class] .table-foot p { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-secondary); }
}

/* Letter-spacing is 0 everywhere in the file. */
html body .state-card h2, html body .state-card .kicker, html body .kicker, html body .card span, html body .card strong { letter-spacing: 0; }

/* TopBar family (TopBar 3:246, TabletTopBar 36:239, MobileTopBar 36:160): one rule set for every page.
   Desktop and tablet: the selector hugs its content. Mobile: the selector fills the space between Menu and the
   status text (flex 1), the status text is plain 12/400 #55544F. A long name shortens with an ellipsis (full name in the title). */
@media (max-width: 767px) {
  html body[class] .topbar { gap: 12px; padding: 12px 16px; }
  html body[class] .topbar .spacer { display: none; }
  html body[class] .topbar .selector-wrap { flex: 1 1 0; min-width: 0; }
  html body[class] .topbar .selector-wrap .selector { width: 100%; }
  html body[class] .topbar > .selector { flex: 1 1 0; min-width: 0; width: auto; }
  html body[class] .topbar .selector { height: 44px; padding: 8px 12px; gap: 8px; font-size: 13px; font-weight: 400; line-height: 18px; }
  html body[class] .topbar .demo-chip { margin-left: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 400; line-height: 16px; flex: none; white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  html body[class] .topbar { gap: 16px; }
}

/* RowCard (36:229): every row keeps its 1px #D9D8D3 bottom border, the last one too (the list frame adds its own 1px stroke,
   so a list ends in a 2px line, as in Figma CT-01). Family rules removed it from the last row. */
html body[class][class] .cards > :last-child, html body[class][class] [class$="-cards"] > :last-child, html body[class][class] [class*="-cards "] > :last-child {
  border-bottom: 1px solid var(--border-default);
}
@media (max-width: 1024px) {
  html body[class] .table-wrap:not(.keep-table) tbody tr:has(.metric-line):last-child { border-bottom: 1px solid var(--border-default); }
}

/* Notes and hints. Field hint (3:64) is Caption 12/400 #6A6963; fine print is Caption 12/16. A `.dialog label span` or
   `.dialog > p` rule must not restyle them. */
html body[class] .dialog label span.hint, html body[class] .dialog label .hint, html body[class] .dialog p.hint, html body[class] .dialog .hint {
  font-size: 12px; font-weight: 400; line-height: 16px; color: var(--text-muted);
}
html body[class] .fine, html body[class] .drawer .fine { font-size: 12px; font-weight: 400; line-height: 16px; }
@media (max-width: 1024px) {
  html body[class] #run-detail .pager p, html body[class] #stopped-run .pager p { font-size: 12px; line-height: 16px; }
}

/* Tabs and checkbox labels do not wrap inside their 36-high row (Tab 3:73); the filter row wraps instead on a narrow desktop. */
.tabs button span, .filters .check { white-space: nowrap; }
@media (min-width: 1025px) { .filters { flex-wrap: wrap; row-gap: 12px; } }

/* SideNav (3:368): padding 16/12, 4 between every label and item. The Menu drawer markup sits before the first label,
   so the "first label" rule counts the first paragraph, not the first child. */
html body[class] .sidenav .nav-label { margin-top: 4px; }
html body[class] .sidenav .nav-label:first-of-type { margin-top: 0; }

/* Row lists on tablet and mobile (KeyValue 36:244, RowCard 36:229): the last row keeps its bottom border too. */
@media (max-width: 1024px) {
  html body[class][class] .table-wrap tbody tr:last-child { border-bottom: 1px solid var(--border-default); }
}

/* Focus ring (SPEC section 1) inside containers that clip or sit on the viewport edge: the Menu drawer rows and the
   bottom tabs draw the same two layers inside the element so nothing is cut off. Same id boost as design-controls.css. */
body:not(#ds) .menu-row:focus-visible:focus-visible,
body:not(#ds) .bottom-tabs a:focus-visible:focus-visible { box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px #2447d6; }

/* SourceBar on tablet and mobile (Figma T/M BL-01): a DataTag pill (26 high, padding 4/8, gap 4 between dot and class label)
   followed by plain 12/400 #55544F text. One rule for the `.origin`, `.source-kind` and `.who-pill` markup variants. */
@media (max-width: 1024px) {
  html body[class][class] .sourcebar > .origin, html body[class][class] .sourcebar > .source-kind { gap: 4px; padding: 4px 8px; }
}
@media (max-width: 1024px) {
  html body[class][class] .sourcebar > .origin strong, html body[class][class] .sourcebar > .source-kind strong, html body[class][class] .main > .sourcebar > strong, html body[class][class] .drawer .sourcebar > strong { color: var(--text-secondary); }
}

/* Lead pass after the family review: menu drawer scrim has no stray top margin; menu row titles never exceed the loaded weights. */
body .sidenav > .menu-scrim-link { margin: 0; }
.menu-row strong { font-weight: 500; }

/* The select/summary caret is drawn by ::before (a 5x4 triangle). The glyph text inside it must never render. */
html body .caret { font-size: 0; }
/* Chips with long wrapped text keep the pill radius. */
html body.campaigns .chip, html body.overview .item .chip { border-radius: 999px; }