/* DataLookout dashboard -- shell (stage-4 plan C2, 2026-10-24): skip link, guest top bar, signed-in
   sidebar + main grid, phone bar + drawer, page head. Needs tokens.css. Ported from the Stage 2
   gallery (docs/redesign-v2/stage2/gallery/components-v2.css) onto the live token names.
   Decisions (Paul, 2026-10-24): sidebar fixed at --dl-sidebar-w, no collapse; text-only items. */

/* === Skip link: first focusable, visible on focus === */
.dl-skip {
  position: absolute; top: -100px; left: var(--dl-space-3); z-index: 2000;
  padding: var(--dl-space-2) var(--dl-space-3);
  background: var(--dl-panel); color: var(--dl-ink-1);
  border: 1px solid var(--dl-rule-strong); border-radius: var(--dl-radius-sm);
  font-weight: 600; text-decoration: none;
}
.dl-skip:focus { top: var(--dl-space-2); }

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

/* === Top bar (guest bar and the signed-in phone bar share it) === */
.dl-topline { height: 3px; background: var(--dl-brand-mark); }
.dl-bar {
  background: var(--dl-panel);
  border-bottom: 1px solid var(--dl-rule);
  position: relative; z-index: 1050;
}
.dl-bar__inner { display: flex; align-items: center; gap: var(--dl-space-3); min-height: var(--dl-bar-h); }
.dl-wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--dl-ink-1); font-weight: 600; font-size: var(--dl-fs-md); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.dl-wordmark:hover { color: var(--dl-ink-1); text-decoration: none; }
.dl-wordmark img { width: 22px; height: 22px; }
.dl-bar__nav { display: none; }
.dl-bar__nav ul { display: flex; list-style: none; gap: var(--dl-space-1); margin: 0; padding: 0; }
.dl-bar__nav a { display: inline-flex; align-items: center; min-height: var(--dl-target-min); padding: 0 var(--dl-space-3); color: var(--dl-ink-2); text-decoration: none; white-space: nowrap; }
.dl-bar__nav a:hover { color: var(--dl-ink-1); text-decoration: underline; text-decoration-color: var(--dl-action); }
.dl-bar__nav a[aria-current="page"] { color: var(--dl-ink-1); box-shadow: inset 0 -2px 0 var(--dl-action); }
/* State rules carry two classes so they beat the generic .dl-search / .dl-btn display rules below
   (the Stage 2 gallery lost this cascade once: two search icons, a crushed field). */
.dl-bar .dl-bar__search { flex: 1 1 auto; min-width: 0; display: none; }
.dl-bar__end { margin-left: auto; display: flex; align-items: center; gap: var(--dl-space-2); }
.dl-bar__end .dl-btn, .dl-bar__end a { white-space: nowrap; flex-shrink: 0; }
.dl-bar .dl-bar__signin { display: none; }
@media (min-width: 768px) {
  .dl-bar .dl-bar__search { display: flex; max-width: 440px; }
  .dl-bar .dl-bar__signin { display: inline-flex; }
  .dl-bar .dl-bar__search-toggle { display: none; }
  /* /search: the bar's box is the query box here, so the page's own box steps aside (search_results.html). */
  body:has(header.dl-bar .dl-bar__search) .dl-search-page__box { display: none; }
}
@media (min-width: 1024px) { .dl-bar__nav { display: block; } .dl-bar .dl-bar__menu { display: none; } }
@media (max-width: 359.98px) { .dl-bar .dl-wordmark__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.dl-bar__search-row { padding: 0 0 var(--dl-space-3); }
.dl-bar__search-row[hidden] { display: none; }

/* Search form inside a bar */
.dl-search { display: flex; gap: var(--dl-space-2); align-items: center; width: 100%; margin: 0; }
.dl-search .dl-input {
  flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 var(--dl-space-3);
  background: var(--dl-panel); color: var(--dl-ink-1);
  border: 1px solid var(--dl-rule-strong); border-radius: var(--dl-radius-sm);
  font: inherit; font-size: var(--dl-fs-base);
}
.dl-search .dl-input::placeholder { color: var(--dl-ink-3); }
.dl-search .dl-input:focus { outline: none; box-shadow: var(--dl-focus-ring); border-color: var(--dl-action); }

/* Shell buttons (the Bootstrap .btn stays for page internals until C2b) */
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dl-space-2);
  min-height: 36px; padding: 0 var(--dl-space-3); border-radius: var(--dl-radius-sm);
  border: 1px solid transparent; font: inherit; font-size: var(--dl-fs-base); font-weight: 500; line-height: 1.25;
  text-decoration: none; cursor: pointer; text-align: center; background: none;
  transition: background-color var(--dl-transition), border-color var(--dl-transition), color var(--dl-transition);
}
.dl-btn:hover { text-decoration: none; }
.dl-btn--primary { background: var(--dl-action); color: var(--dl-on-action); }
.dl-btn--primary:hover { background: var(--dl-action-hover); color: var(--dl-on-action); }
.dl-btn--quiet { background: var(--dl-panel); color: var(--dl-ink-1); border-color: var(--dl-rule-strong); }
.dl-btn--quiet:hover { background: var(--dl-panel-2); color: var(--dl-ink-1); }
.dl-btn--icon { width: 36px; padding: 0; }
.dl-btn--icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* === Signed-in app shell: sidebar + main. Below 1024px the sidebar lives in the drawer. === */
.dl-app { display: block; }
.dl-app__side { display: none; }
.dl-app__main { min-width: 0; }
@media (min-width: 1024px) {
  .dl-app { display: grid; grid-template-columns: var(--dl-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
  .dl-app__side {
    /* --dl-consent-h: the open cookie bar's height (consent.js), so the foot stays above it. */
    display: block; position: sticky; top: 0; align-self: start; height: calc(100vh - var(--dl-consent-h, 0px)); overflow-y: auto;
    /* No visible inner scrollbar (Paul, 2026-10-28, item 9): it narrowed the items on a short viewport. Still scrolls. */
    scrollbar-width: none;
    background: var(--dl-panel); border-right: 1px solid var(--dl-rule); border-top: 3px solid var(--dl-brand-mark);
  }
  .dl-app__phonebar { display: none; }
  /* /search: the sidebar's box is the query box here, so the page's own box steps aside. */
  .dl-app .dl-search-page__box { display: none; }
}
.dl-app__side { scrollbar-width: thin; }

/* Sidebar (inside .dl-app__side and inside the drawer) */
.dl-sidebar { display: flex; flex-direction: column; gap: var(--dl-space-4); padding: var(--dl-space-4) var(--dl-space-3); min-height: 100%; }
/* Groups: 24px apart (items stay 44px tall, 0 apart), and a hairline rule above each group label
   so the boundary is explicit (Paul, 2026-10-24; the GitHub and Stripe sidebars in the reference
   captures both do this). */
.dl-sidebar nav { display: flex; flex-direction: column; gap: var(--dl-space-5); flex: 1 1 auto; }
.dl-sidebar ul { list-style: none; margin: 0; padding: 0; }
/* Group labels (Paul, 2026-10-24: "Explore is too similar to everything else"): small, tracked,
   uppercase, muted, the pattern Stripe, Polaris and Tailwind use for sidebar groups in the 10-24
   reference captures. A nav group label is not a page eyebrow (the 10-13 tell); the tells lint
   allow-lists this one selector. One declaration (it was layered four times; /code-review 2026-10-25). */
.dl-sidebar__label { display: block; padding: var(--dl-space-3) var(--dl-space-3) var(--dl-space-2); margin: 0; border-top: 1px solid var(--dl-rule-strong); color: var(--dl-ink-3); font-size: var(--dl-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.dl-sidebar a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-2);
  min-height: var(--dl-target-min); padding: 0 var(--dl-space-3); border-radius: var(--dl-radius-sm);
  color: var(--dl-ink-1); text-decoration: none;
}
.dl-sidebar a:hover { background: var(--dl-panel-2); color: var(--dl-ink-1); text-decoration: none; }
.dl-sidebar a.dl-wordmark { justify-content: flex-start; margin-bottom: var(--dl-space-2); }
.dl-sidebar a.dl-wordmark:hover { background: none; }
/* Selected row: raised paper plus the 3px green bar and 600 weight, no tinted box (one treatment,
   used once; the sidebar surface note below). */
.dl-sidebar a[aria-current="page"] { background: var(--dl-panel); box-shadow: inset 3px 0 0 var(--dl-action); font-weight: 600; }
.dl-sidebar__plan { color: var(--dl-ink-3); font-size: var(--dl-fs-sm); font-weight: 400; }
.dl-sidebar__foot { margin: auto 0 0; border-top: 1px solid var(--dl-rule); padding-top: var(--dl-space-3); }
.dl-sidebar__foot form { margin: 0; }
.dl-sidebar__foot button {
  display: flex; align-items: center; width: 100%; min-height: var(--dl-target-min); padding: 0 var(--dl-space-3);
  background: none; border: 0; border-radius: var(--dl-radius-sm); color: var(--dl-ink-2); font: inherit; text-align: left; cursor: pointer;
}
.dl-sidebar__foot button:hover { background: var(--dl-panel-2); color: var(--dl-ink-1); }

/* Mobile drawer: a modal <dialog>; showModal() makes the page behind inert and moves focus in. */
.dl-drawer {
  margin: 0; padding: 0; border: 0; height: 100%; max-height: 100%; width: min(320px, 88vw);
  background: var(--dl-panel); color: var(--dl-ink-1); box-shadow: var(--dl-shadow-lg);
}
/* The head takes its own height; the sidebar fills the rest and scrolls, so the foot (Account,
   Sign out / Sign in) stays reachable on an 844px phone instead of sitting below the dialog. */
.dl-drawer[open] { display: flex; flex-direction: column; }
.dl-drawer .dl-sidebar { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dl-drawer::backdrop { background: rgba(30, 29, 25, .45); }
.dl-drawer[open] { animation: dl-drawer-in var(--dl-transition); }
@keyframes dl-drawer-in { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.dl-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--dl-space-2) var(--dl-space-3); border-bottom: 1px solid var(--dl-rule); color: var(--dl-ink-3); font-size: var(--dl-fs-sm); }

/* === Page head (addendum row 2): breadcrumb, h1, at most one primary action === */
/* Every page's top offset, once (Paul, 2026-10-28, item 4): the home page's 20px, on the first container. */
#main > .container:first-child { padding-top: 20px; }
#main > .container.mt-4:first-child { margin-top: 0 !important; }
/* A floor on the main column's side gutter beside the sidebar (Paul, 2026-10-29: "the red squares are too
   close to the edge"). The severity square hangs 16px into the margin (deb6981e); Bootstrap's .container
   pads only 12px once it runs full width, which it does whenever the main column (viewport minus 240px)
   is narrower than the breakpoint's cap: 1296px against 1320px on a 1536px screen. The square then sat
   on the sidebar's border. 32px keeps it 16px clear at every width; wider viewports still centre. */
@media (min-width: 1024px) { .dl-app__main .container { padding-left: 32px; padding-right: 32px; } }
.dl-app aside::-webkit-scrollbar { display: none; }
/* ONE page head (reviewer, 2026-10-28): the H1, its subline and their spacing are the same on every page. */
.dl-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 16px; }
.dl-page-head .dl-page-title { margin: 0 0 4px; }
.dl-page-head__sub { margin: 0; font-size: var(--dl-fs-base); }
.dl-page-head__crumb { font-size: var(--dl-fs-sm); color: var(--dl-ink-3); margin: 0 0 var(--dl-space-1); }
.dl-page-head__crumb a { color: var(--dl-ink-2); }
.dl-page-head h1 { margin: 0; font-size: var(--dl-fs-xxl); line-height: 1.2; }
.dl-page-head__action { flex-shrink: 0; }

/* === Hierarchy pass (Paul, 2026-10-24: "everything is in the same font and color"). Two steps, no
   decoration: primary items 500 weight ink-1; Explore items 400 ink-2 on 40px rows; a free user's
   gated items read in ink-3 with the "Pro" mark in the action colour; the selected item is the 3px
   bar plus 600 weight, no tinted box (one treatment, used once). === */
.dl-sidebar .dl-sidebar__primary a { font-weight: 500; }
.dl-sidebar .dl-sidebar__secondary a { min-height: 40px; color: var(--dl-ink-2); }
.dl-sidebar a.is-gated { color: var(--dl-ink-3); }
.dl-sidebar a.is-gated:hover { color: var(--dl-ink-1); }
.dl-sidebar__pro { color: var(--dl-action); font-size: var(--dl-fs-xs); font-weight: 600; letter-spacing: 0.04em; }
.dl-sidebar .dl-wordmark { font-size: var(--dl-fs-md); }
.dl-sidebar__foot a.dl-sidebar__upgrade { min-height: 36px; color: var(--dl-action); font-weight: 500; }
.dl-sidebar__foot a.dl-sidebar__upgrade:hover { color: var(--dl-action-hover); background: none; text-decoration: underline; }

/* Progressive enhancements (Baseline checked 2026-10-24 against web-features + caniuse; both
   degrade silently where unsupported): balanced headline wrapping, and a stable scrollbar gutter
   so the layout does not shift between pages that scroll and pages that do not. */
h1 { text-wrap: balance; }
html { scrollbar-gutter: stable; }

/* === Sidebar surface (Paul, 2026-10-24: "super plain with just a white background"). The reference
   tally (docs/redesign-v2/stage4/sidebar-references-2026-10-24.md) shows 0 of 11 professional
   sidebars use a gradient; the two with presence (Polaris, Carbon) make one column a visible
   PANEL. So: the sidebar is a sunken warm panel one step below the canvas, the selected row is
   raised paper with the green bar, the search field stays paper. Contrast on #ece9e0, measured:
   ink-1 13.9:1, ink-2 8.3:1, ink-3 4.7:1, action 5.2:1 (all >= 4.5:1). === */
:root { --dl-surface-sidebar: #ece9e0; --dl-surface-sidebar-hover: #f3f1ea; }
@media (min-width: 1024px) {
  .dl-app__side { background: var(--dl-surface-sidebar); border-right: 1px solid var(--dl-rule-strong); }
}
.dl-drawer { background: var(--dl-surface-sidebar); }
.dl-drawer__head { background: var(--dl-panel); }
.dl-sidebar a:hover { background: var(--dl-surface-sidebar-hover); }
.dl-sidebar__foot { border-top-color: var(--dl-rule-strong); }
.dl-sidebar__foot button:hover { background: var(--dl-surface-sidebar-hover); }
.dl-sidebar .dl-search .dl-input { background: var(--dl-panel); }

/* Sidebar search: the "/" hint sits INSIDE the field so the placeholder gets the full 216px
   ("Search trials, sponsors, diseases" was clipped beside the old "/" badge at 240px). */
.dl-sidebar__search { position: relative; }
.dl-sidebar__search .dl-input { width: 100%; font-size: var(--dl-fs-sm); }
/* The "/" shortcut still focuses the box (shell.js); its badge was dropped 2026-10-25 (Paul). */
.dl-app__side .dl-sidebar__search .dl-input { padding: 0 10px; font-size: var(--dl-fs-xs); }