/* Lazyweb report app-shell chrome — a left navigation rail wrapped around every
   hosted report at serve time (see composeReportShell in
   server/modules/reports/index.js) and reused by the /reports hub pages.
   Layout only; brand tokens mirror report-standard.css (white content
   on a dot grid, #FF6B00 accent, hairline borders, mono uppercase kickers).
   Self-contained --lw-* tokens so it composes with report-standard.css and
   report-deep.css. Editing this restyles the chrome on ALL reports next view.

   Selection grammar — the FOLDER metaphor, applied consistently:
   - the rail is a drawer of pages; the current page is a TAB fused with the
     content pane (hairlines on three sides, open on the right, punched through
     the rail border);
   - HOVERING a nav item previews the same tab in light gray ("starting to
     slide out");
   - the Recent flyout is a drawer PANEL attached to its tab (aligned borders,
     open junction), not a floating popover. */
:root{
  --lw-rail-w:236px;
  --lw-ink:#111418; --lw-mut:#5a626c; --lw-faint:#8a93a6;
  --lw-line:#e6e9ee; --lw-ink-line:#111418;
  --lw-panel:#f7f8fa; --lw-hover:#eef1f4; --lw-accent:#FF6B00; --lw-bg:#ffffff;
  --lw-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --lw-gutter:38px;
  --lw-head-h:60px;
}

/* Content column offset by the fixed rail (main-based reports get a wrapper). */
.lw-app .lw-content{ margin-left:var(--lw-rail-w); min-height:100vh; }
.lw-site-shell .lw-content{ padding-top:var(--lw-head-h); }
/* Hub pages breathe wider than the 860px report column. */
.lw-content main{ max-width:980px; }
.lw-content .lw-inspiration-tab{
  width:100%; max-width:none; height:calc(100vh - var(--lw-head-h));
  margin:0; padding:0; overflow:hidden;
}
.lw-inspiration-frame{ display:block; width:100%; height:100%; border:0; background:#fff; }

/* No-<main> self-contained reports: the chrome is a light wrap that keeps the
   report's own document/styles, so there's no wrapper — offset the body itself
   AND add a gutter so the report doesn't butt against the rail. */
.lw-nomain{ margin:0; padding:calc(var(--lw-head-h) + 26px) var(--lw-gutter) 48px calc(var(--lw-rail-w) + var(--lw-gutter)); }
/* The hub bar on a no-<main> report is fixed across the content pane (the
   report's own document has no wrapper for sticky to latch onto). */
.lw-nomain .lw-bar{ position:fixed; top:0; left:var(--lw-rail-w); right:0; }
.lw-site-shell.lw-nomain .lw-bar{ left:0; }
/* The report's own mobile breakpoint keys off the VIEWPORT, but the rail +
   gutters eat ~340px of it — at laptop widths the desktop three-column
   top-row (screenshot | screenshot | hypothesis text) squeezes the text into
   a one-word-per-line sliver. Let the row wrap instead: when the text column
   can't get a readable measure it drops below the screenshots at full width,
   the same text-below shape as the report's own mobile layout. */
.lw-nomain .top-row{ flex-wrap:wrap; }
.lw-nomain .top-row .hypothesis-col{ min-width:340px; }

/* ---------- Left navigation rail ---------- */
.lw-rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--lw-rail-w); z-index:40;
  display:flex; flex-direction:column;
  background:var(--lw-bg); border-right:1.5px solid var(--lw-ink-line);
  font:15px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.lw-site-rail{ top:var(--lw-head-h); z-index:40; border-right:1px solid var(--lw-line); }
/* Same height as the .lw-bar, but NO underline: the rail reads as one
   uninterrupted drawer face — only the content pane carries the top hairline. */
.lw-brand{
  display:flex; align-items:center; gap:10px; height:var(--lw-head-h); padding:0 20px; flex:0 0 auto;
  color:var(--lw-ink); text-decoration:none;
}
.lw-brand:hover{ text-decoration:none; }
/* The official Lazyweb mark (ll.jpg — same asset as the site favicon). */
.lw-brand-mark{ width:24px; height:24px; border-radius:4px; object-fit:cover; display:block; flex:0 0 auto; }
.lw-brand-name{ font-size:18px; font-weight:800; letter-spacing:-.02em; }
.lw-mobile-nav-toggle{ display:none; }

.lw-nav{ flex:1 1 auto; overflow-y:visible; padding:16px 0; }
.lw-site-rail .lw-nav{ overflow-y:auto; padding:10px 10px 18px; }
.lw-kick{
  margin:16px 0 10px; padding:0 20px; font-family:var(--lw-mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lw-faint);
}
/* Nav items are full-bleed and permanently extend 1.5px over the rail border —
   a transparent background lets the border show through; a white background
   punches the tab open. Hover previews the tab in light gray; selected commits
   it in ink. Everything is one border-color/background transition. */
.lw-item{
  display:flex; align-items:center; gap:9px; position:relative; z-index:61;
  margin:4px 0 4px 0; margin-right:-1.5px; padding:16px 22px;
  border:1.5px solid transparent; border-radius:0;
  font-size:17px; font-weight:500; line-height:1.3; color:var(--lw-ink); text-decoration:none;
  transition:border-color .14s ease, background .14s ease;
}
.lw-item .lw-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Hover: neutral wash + the tab previewing in light-gray hairlines. */
a.lw-item:hover{
  text-decoration:none; background:var(--lw-panel);
  border-color:var(--lw-line); border-right-color:transparent;
}
/* Selected: the connected folder tab, committed in ink. */
.lw-item.is-active{
  background:var(--lw-bg); font-weight:700;
  border-color:var(--lw-ink-line); border-right-color:transparent;
}

/* Site workspace rail: a fixed site identity followed by three small,
   task-based navigation groups. This is intentionally independent of the
   folder-tab treatment retained by public report pages. */
.lw-site-rail .lw-kick{ margin:18px 0 7px; padding:0 8px; font-size:10px; letter-spacing:.13em; }
.lw-site-context{ flex:0 0 auto; padding:0 10px 14px; border-top:1px solid var(--lw-line); background:var(--lw-bg); }
.lw-site-rail .lw-site-context .lw-site-kick{ margin:12px 0 7px; }
.lw-site-card{
  display:flex; align-items:center; gap:10px; min-width:0;
  margin:0; padding:10px; border:1px solid var(--lw-line); background:var(--lw-panel);
}
.lw-site-switcher{ position:relative; }
button.lw-site-card{
  width:100%; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
button.lw-site-card:hover{ border-color:var(--lw-ink-line); background:var(--lw-hover); }
button.lw-site-card:focus-visible,
.lw-product-option:focus-visible,
.lw-product-menu-head button:focus-visible{ outline:2px solid var(--lw-accent); outline-offset:2px; }
.lw-site-avatar{
  position:relative; display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto;
  border:1px solid var(--lw-ink-line); background:var(--lw-bg);
  font-size:13px; font-weight:800; color:var(--lw-ink);
}
.lw-site-avatar img{
  position:absolute; inset:5px; width:20px; height:20px; object-fit:contain;
  background:transparent; filter:drop-shadow(0 0 1px rgba(17,20,24,.78));
}
.lw-site-avatar-fallback{ line-height:1; }
.lw-site-avatar:has(img) .lw-site-avatar-fallback{ visibility:hidden; }
.lw-site-copy{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.lw-site-copy strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; color:var(--lw-ink); }
.lw-site-copy small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; font-size:11.5px; color:var(--lw-faint); }
.lw-product-chevron{ width:16px; height:16px; margin-left:auto; flex:0 0 auto; color:var(--lw-mut); transition:transform .15s ease; }
.lw-site-card[aria-expanded="true"] .lw-product-chevron{ transform:rotate(180deg); }
.lw-product-menu{
  position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:80;
  max-height:min(320px, 55vh); overflow-y:auto;
  border:1px solid var(--lw-ink-line); background:var(--lw-bg);
}
.lw-product-menu[hidden]{ display:none; }
.lw-product-menu-head{
  position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between;
  padding:9px 10px; border-bottom:1px solid var(--lw-line); background:var(--lw-bg);
  font-family:var(--lw-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
}
.lw-product-menu-head button{
  display:grid; place-items:center; width:24px; height:24px; padding:0;
  border:1px solid transparent; background:transparent; color:var(--lw-mut);
  font:20px/1 Arial,sans-serif; cursor:pointer;
}
.lw-product-menu-head button:hover{ border-color:var(--lw-line); background:var(--lw-hover); color:var(--lw-ink); }
.lw-product-option{
  display:flex; align-items:center; gap:9px; min-width:0; padding:9px 10px;
  border-bottom:1px solid var(--lw-line); color:var(--lw-ink); text-decoration:none;
}
.lw-product-option:last-child{ border-bottom:0; }
.lw-product-option:hover{ background:var(--lw-hover); text-decoration:none; }
.lw-product-option.is-current{ background:var(--lw-panel); }
.lw-product-option .lw-site-avatar{ width:28px; height:28px; font-size:12px; }
.lw-product-option .lw-site-avatar img{ inset:4px; width:18px; height:18px; }
.lw-product-check{ margin-left:auto; color:var(--lw-accent); font-weight:800; }
.lw-mode-head{
  padding:9px 10px 4px; border-top:1px solid var(--lw-line);
  font-family:var(--lw-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--lw-faint);
}
.lw-mode-form{ margin:0; }
button.lw-mode-toggle{
  display:flex; align-items:center; gap:9px; width:100%; min-width:0; padding:9px 10px;
  border:0; border-bottom:1px solid var(--lw-line); color:var(--lw-ink); background:var(--lw-bg);
  font:inherit; text-align:left; cursor:pointer;
}
.lw-mode-form:last-child button.lw-mode-toggle{ border-bottom:0; }
button.lw-mode-toggle:hover{ background:var(--lw-hover); }
button.lw-mode-toggle:focus-visible{ outline:2px solid var(--lw-accent); outline-offset:2px; }
.lw-mode-switch{
  position:relative; flex:0 0 auto; width:30px; height:17px; margin-left:auto;
  border:1px solid var(--lw-ink-line); border-radius:999px; background:var(--lw-panel);
  transition:background .15s ease, border-color .15s ease;
}
.lw-mode-knob{
  position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%;
  background:var(--lw-mut); transition:transform .15s ease, background .15s ease;
}
button.lw-mode-toggle.is-on .lw-mode-switch{ border-color:var(--lw-accent); background:var(--lw-accent); }
button.lw-mode-toggle.is-on .lw-mode-knob{ transform:translateX(13px); background:#fff; }
.lw-new-user-badge{
  display:inline-flex; align-items:center; padding:5px 8px; border:1px solid var(--lw-accent);
  color:var(--lw-accent); background:var(--lw-bg); font:700 10px/1 var(--lw-mono);
  letter-spacing:.06em; text-transform:uppercase;
}
.lw-site-rail .lw-item{
  gap:10px; margin:2px 0; padding:9px 10px; border:0; border-radius:3px;
  font-size:13.5px; font-weight:550; color:var(--lw-mut);
}
.lw-site-rail a.lw-item:hover{ border:0; background:var(--lw-hover); color:var(--lw-ink); }
.lw-site-rail .lw-item.is-active{ border:0; background:var(--lw-ink); color:#fff; font-weight:700; }
.lw-item-icon{ width:17px; height:17px; flex:0 0 auto; }
.lw-item-badge{
  min-width:20px; margin-left:auto; padding:1px 6px; border-radius:999px;
  background:#fff1e8; color:#b94d00; font-family:var(--lw-mono); font-size:10.5px; font-weight:800; text-align:center;
}
.lw-site-rail .lw-item.is-active .lw-item-badge{ background:#fff; color:var(--lw-ink); }

/* ---------- Recent flyout: a drawer panel attached to its tab ---------- */
.lw-hasmenu{ position:relative; }
/* Opening the drawer forms the ink tab on its parent item; the exit delay
   matches the panel's grace period so tab and panel detach together. */
.lw-hasmenu > .lw-item{ transition:border-color .14s ease .2s, background .14s ease .2s; }
.lw-hasmenu:hover > .lw-item, .lw-hasmenu:focus-within > .lw-item{
  background:var(--lw-bg);
  border-color:var(--lw-ink-line); border-right-color:transparent;
  transition-delay:0s;
}
.lw-menu{
  position:absolute; left:100%; top:0; z-index:60; min-width:340px;
  background:var(--lw-bg); border:1.5px solid var(--lw-ink-line); border-radius:0;
  box-shadow:8px 8px 0 rgba(17,20,24,.10); padding:8px;
  opacity:0; visibility:hidden; transform:translateX(-4px);
  /* Grace period: keep the panel up ~.2s after hover-out so a diagonal path
     toward its lower items (which briefly crosses the next rail item) doesn't
     dismiss it — hovering the panel itself re-latches it open. */
  transition:opacity .12s ease .2s, transform .12s ease .2s, visibility 0s linear .32s;
}
/* Invisible bridge widening the hover corridor between the rail and the panel. */
.lw-menu::before{ content:""; position:absolute; left:-16px; top:-8px; bottom:-8px; width:16px; }
.lw-hasmenu:hover .lw-menu, .lw-hasmenu:focus-within .lw-menu, .lw-menu:hover{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
.lw-menu-kick{ margin:8px 12px 7px; font-family:var(--lw-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lw-faint); }
.lw-menu-item{ display:block; padding:12px 14px; border-radius:0; font-size:16px; color:var(--lw-ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-menu-item:hover{ background:var(--lw-panel); text-decoration:none; }
.lw-menu-all{ display:block; margin-top:6px; padding:13px 14px; border-top:1px solid var(--lw-line); font-size:15px; font-weight:700; color:var(--lw-ink); text-decoration:none; }
.lw-menu-all:hover{ text-decoration:none; color:var(--lw-accent); }

.lw-rail-foot{ padding:15px 20px; }
.lw-foot-link{ font-size:13.5px; color:var(--lw-faint); text-decoration:none; }
.lw-foot-link:hover{ color:var(--lw-ink); }

/* ---------- "My reports" — filter bar ---------- */
/* Sticky under the hub bar so search + company filtering stay reachable while
   scrolling a long list. Server renders it [hidden]; JS reveals it, so no-JS
   visitors never see dead controls. */
.lw-filterbar{
  position:sticky; top:var(--lw-head-h); z-index:25;
  display:flex; align-items:center; gap:10px;
  padding:12px 0; background:var(--lw-bg);
  border-bottom:1px solid var(--lw-line);
}
.lw-filter-q{
  flex:1 1 220px; min-width:0; max-width:340px;
  font:inherit; font-size:14px; color:var(--lw-ink);
  background:var(--lw-bg); border:1px solid var(--lw-ink-line); border-radius:3px;
  padding:8px 12px;
}
.lw-filter-co{
  flex:0 1 auto; max-width:260px;
  font:inherit; font-size:14px; color:var(--lw-ink);
  background:var(--lw-bg); border:1px solid var(--lw-ink-line); border-radius:3px;
  padding:8px 10px;
}
.lw-filter-q:focus, .lw-filter-co:focus{ outline:2px solid var(--lw-accent); outline-offset:-1px; }
.lw-filter-clear{
  font-family:var(--lw-mono); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--lw-mut); background:none; border:0; padding:8px 6px; cursor:pointer;
}
.lw-filter-clear:hover{ color:var(--lw-accent); }
.lw-filter-count{
  margin-left:auto; font-family:var(--lw-mono); font-size:12.5px; color:var(--lw-faint); white-space:nowrap;
}

/* ---------- "My reports" — Iteration Stacks ---------- */
/* Reports sharing a title are iterations of one ask: one stack row (fanned
   mockup-thumbnail deck + "N iterations · last run") expanding — via native
   <details>, no JS — into the individual runs. */
.lw-stacks{ margin:10px 0 0; border-top:1px solid var(--lw-line); }
.lw-stack{ border-bottom:1px solid var(--lw-line); }
/* Filtered-out stacks: [hidden] must beat a.lw-stack's display:flex. */
.lw-stack[hidden]{ display:none; }
a.lw-stack{ display:flex; align-items:center; gap:20px; padding:18px 12px; color:var(--lw-ink); text-decoration:none; }
.lw-stack-sum{
  display:flex; align-items:center; gap:20px; padding:18px 12px;
  cursor:pointer; list-style:none; color:var(--lw-ink);
}
.lw-stack-sum::-webkit-details-marker{ display:none; }
/* Hover: a visible gray wash (one step past the panel tint — with no per-row
   Open label, this IS the click affordance) + accent notch, and the deck fans
   out; selected/open states stay neutral ink. */
a.lw-stack, .lw-stack-sum{ transition:background .15s ease, box-shadow .15s ease; }
a.lw-stack:hover, .lw-stack-sum:hover{
  background:var(--lw-hover); text-decoration:none;
  box-shadow:inset 3px 0 0 var(--lw-accent);
}

/* Thumbnail deck: one DOMINANT front card (straight, so no transform blur)
   with the other mockups peeking behind — a whole phone screen squeezed into a
   tiny fanned card reads as mush, so give the front card the pixels. Served as
   properly resized storage renders, never the raw ~1024px source. Placeholder
   cards render until background extraction has cached this report's paths. */
.lw-deck{ position:relative; width:134px; height:96px; flex:0 0 auto; }
.lw-thumb{
  position:absolute; object-fit:cover; object-position:top;
  background:var(--lw-panel); border:1px solid var(--lw-ink-line); border-radius:3px;
  box-shadow:0 1px 2px rgba(17,20,24,.10);
  transition:transform .18s ease, box-shadow .18s ease;
}
.lw-thumb-0{ left:0; top:0; width:68px; height:94px; z-index:3; }
.lw-thumb-1{ left:44px; top:4px; width:62px; height:86px; z-index:2; transform:rotate(2deg); }
.lw-thumb-2{ left:75px; top:8px; width:57px; height:78px; z-index:1; transform:rotate(4.5deg); }
a.lw-stack:hover .lw-thumb-0, .lw-stack-sum:hover .lw-thumb-0{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(17,20,24,.18); }
a.lw-stack:hover .lw-thumb-1, .lw-stack-sum:hover .lw-thumb-1{ transform:rotate(3.5deg) translateX(4px); }
a.lw-stack:hover .lw-thumb-2, .lw-stack-sum:hover .lw-thumb-2{ transform:rotate(7deg) translateX(8px); }
.lw-thumb-ph{ border:1px dashed var(--lw-line); background:var(--lw-bg); box-shadow:none; }

.lw-stack-main{ min-width:0; display:flex; flex-direction:column; gap:5px; }
/* Prominent per-report product chip. */
.lw-stack-prod{
  align-self:flex-start; font-family:var(--lw-mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--lw-ink);
  border:1px solid var(--lw-ink-line); border-radius:3px; padding:2px 9px; margin:0 0 2px;
}
.lw-stack-title{ font-size:18px; font-weight:600; color:var(--lw-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-stack-meta{ font-family:var(--lw-mono); font-size:12.5px; letter-spacing:.03em; color:var(--lw-faint); }
.lw-stack-side{ margin-left:auto; flex:0 0 auto; display:flex; align-items:center; gap:14px; }
.lw-chev{ color:inherit; font-size:13px; transition:transform .18s ease; }
.lw-stack[open] .lw-chev-toggle{ transform:rotate(180deg); }
.lw-stack[open] > .lw-stack-sum{ background:var(--lw-panel); }

/* Affordance: only expanding rows carry a right-side label ("N runs ▾");
   navigating rows are bare — the hover wash says clickable, the pill's absence
   says "this one navigates". */
.lw-runs-pill{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--lw-mono); font-size:14.5px; font-weight:700; letter-spacing:.02em;
  color:var(--lw-mut); transition:color .12s ease;
}
.lw-stack-sum:hover .lw-runs-pill, .lw-stack[open] .lw-runs-pill{ color:var(--lw-ink); }

/* Open/close animation (progressive enhancement — browsers without
   ::details-content interpolation just snap). */
@supports (interpolate-size: allow-keywords){ :root{ interpolate-size: allow-keywords; } }
.lw-stack::details-content{
  height:0; overflow:clip;
  transition:height .28s ease, content-visibility .28s allow-discrete;
}
.lw-stack[open]::details-content{ height:auto; }

/* Expanded iterations (newest first; #1 = the first run of the ask). */
.lw-iters{ list-style:none; margin:0; padding:2px 8px 16px 166px; }
.lw-iter{
  display:flex; align-items:center; gap:16px; padding:12px 8px;
  border-top:1px solid var(--lw-line); color:var(--lw-mut); text-decoration:none; font-size:14.5px;
}
.lw-iter:hover{ background:var(--lw-panel); text-decoration:none; color:var(--lw-ink); }
/* Neutral "Latest" tag, sitting AFTER the timestamp so dates stay aligned. */
.lw-iter-latest{
  font-family:var(--lw-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lw-mut); border:1px solid var(--lw-line); border-radius:3px; padding:2px 7px;
}
.lw-iter-n{ font-family:var(--lw-mono); font-size:12.5px; color:var(--lw-faint); min-width:30px; }
.lw-iter-date{ font-family:var(--lw-mono); font-size:13.5px; color:var(--lw-ink); }
/* A run's own title, shown only when it differs from the stack's. */
.lw-iter-title{ color:var(--lw-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lw-iter-open{ margin-left:auto; font-size:13.5px; font-weight:600; color:var(--lw-faint); }
.lw-iter:hover .lw-iter-open{ color:var(--lw-accent); }

.lw-empty{
  margin:26px 0; padding:30px; border:1px dashed var(--lw-line); border-radius:0;
  color:var(--lw-mut); font-size:15.5px; text-align:center;
}

/* ---------- Shared hub page-header bar ---------- */
/* One header treatment for every hub page (My reports, beta tabs, empty
   states): slim white bar, bold page title, mono meta, bold black hairline. */
.lw-bar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:18px; flex:0 0 auto;
  height:var(--lw-head-h); padding:0 28px; background:var(--lw-bg); border-bottom:1.5px solid var(--lw-ink-line);
}
.lw-bar-title{ display:flex; align-items:baseline; gap:14px; min-width:0; }
.lw-bar-h{ font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--lw-ink); white-space:nowrap; }
.lw-bar-meta{ font-family:var(--lw-mono); font-size:13px; color:var(--lw-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-global-bar{
  position:fixed; top:0; left:0; right:0; z-index:70;
  padding:0 18px; gap:16px; border-bottom:1px solid var(--lw-line);
}
.lw-global-bar .lw-brand{
  width:calc(var(--lw-rail-w) - 18px); height:100%; box-sizing:border-box;
  padding:0 18px 0 0; border-right:1px solid var(--lw-line);
}
.lw-global-bar .lw-brand-mark{ width:22px; height:22px; border-radius:2px; }
.lw-global-bar .lw-brand-name{ font-size:17px; }
.lw-global-bar .lw-bar-title{ min-width:0; }
.lw-global-bar .lw-bar-h{ font-size:14px; font-weight:700; }
.lw-global-bar .lw-bar-meta{ font-size:11.5px; }
.lw-bar-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
/* Brand primary CTA: black block, orange on hover (DESIGN.md), square. */
.lw-global-bar a.lw-bar-pro{
  display:inline-flex; align-items:center; justify-content:center; min-height:34px; box-sizing:border-box;
  padding:6px 14px; border:1.5px solid var(--lw-ink-line); border-radius:0;
  background:var(--lw-ink); color:#fff;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px; font-weight:700; line-height:1.3; text-decoration:none; white-space:nowrap;
  transition:background .14s ease, border-color .14s ease, transform .12s cubic-bezier(.23,1,.32,1);
}
.lw-global-bar a.lw-bar-pro:hover{
  border-color:var(--lw-accent); background:var(--lw-accent); color:#fff; text-decoration:none;
}
.lw-global-bar a.lw-bar-pro:active{ transform:scale(.97); }

/* ---------- Locked / gated states ----------
   One grammar for "the real thing is here, behind glass" (signed-out hub):
   the page's ACTUAL UI renders as a dimmed, unreadable
   backdrop — redacted bars or a generic diagram, never anything that could
   read as someone else's data — a white veil washes it back, and a single
   pop-over card holds one line and one copy CTA. */
.lw-locked{ position:relative; overflow:hidden; }
.lw-locked-fill{ height:calc(100vh - var(--lw-head-h) - 56px); min-height:420px; }
.lw-locked-bg{ pointer-events:none; user-select:none; filter:blur(1.4px) grayscale(30%); opacity:.9; }
.lw-locked-veil{ position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.45) 55%, rgba(255,255,255,.72) 100%); }

/* The pop-over: a sharp white card on the ink hairline, lifted by a hard
   offset shadow (crisp, not floaty — same folder-world physics as the rail). */
.lw-pop{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); z-index:5;
  width:min(460px, calc(100% - 48px)); box-sizing:border-box;
  background:var(--lw-bg); border:1.5px solid var(--lw-ink-line);
  box-shadow:8px 8px 0 rgba(17,20,24,.08);
  padding:26px 30px 24px;
}
.lw-pop-kick{
  margin:0 0 12px; font-family:var(--lw-mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lw-accent);
}
/* Explicit family/case/border: report-standard.css styles bare h2 as a mono
   uppercase report heading — the pop-over headline must stay Inter, sentence
   case, unruled. */
.lw-pop-line{
  margin:0 0 20px; padding:0; border:0;
  font:600 19px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:-.01em; text-transform:none; color:var(--lw-ink);
}
/* Supporting line between headline and CTA: the headline stays a short hook,
   this carries the value prop. Inter, quieter than the headline. */
.lw-pop-body{
  margin:-8px 0 20px; font:400 14.5px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--lw-mut);
}
.lw-pop-cta{
  appearance:none; display:block; width:100%; cursor:pointer;
  border:1.5px solid var(--lw-ink-line); background:var(--lw-ink); color:#fff;
  font:700 15px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:13px 18px; transition:background .12s ease, border-color .12s ease;
}
.lw-pop-cta:hover, .lw-pop-cta.is-copied{ background:var(--lw-accent); border-color:var(--lw-accent); }
.lw-pop-sub{ margin:12px 0 0; font-family:var(--lw-mono); font-size:12.5px; line-height:1.6; color:var(--lw-faint); }
.lw-report-empty-upsell{
  display:grid; place-items:center; min-height:calc(100vh - var(--lw-head-h) - 76px); padding:38px 0;
}
.lw-report-empty-upsell .lw-pop{ position:static; transform:none; }
.lw-mcp-connect-cta{ box-sizing:border-box; text-align:center; text-decoration:none; }
.lw-mcp-connect-cta:hover{ color:#fff; text-decoration:none; }
/* Copy sources stay rendered (the selection fallback can't copy from
   display:none) but never on screen. */
.lw-clip-src{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; white-space:pre; margin:0; }

/* Signed-out /reports: the real stack-row anatomy, every datum redacted.
   Higher-contrast than the generic locked treatment (scoped override below) so
   it reads as a FULL hub behind glass, not a blank loading page — the shapes
   are bars, never text, so the extra contrast can't leak anything readable. */
.lw-skel-row{ display:flex; align-items:center; gap:20px; padding:18px 12px; border-bottom:1px solid var(--lw-line); }
/* Real rows size .lw-stack-main by its text; redaction bars use % widths, so
   the skeleton's main must claim the row's free space for % to mean anything. */
.lw-skel-row .lw-stack-main{ flex:1 1 auto; }
/* Deck cards carry the real deck's weight: mid-gray edges + the same soft
   shadow the signed-in thumbnails cast. */
.lw-skel-card{ border:1px solid #aab3bf; background:var(--lw-hover); box-shadow:0 1px 2px rgba(17,20,24,.08); }
.lw-skel-bar{ display:block; background:#d3dae3; }
.lw-skel-title{ height:16px; margin:0 0 9px; }
.lw-skel-meta{ height:11px; width:120px; }
/* The product chip: bordered and hollow, exactly like .lw-stack-prod. */
.lw-skel-chip{ display:block; width:64px; height:15px; margin:0 0 8px; border:1px solid #c3cad4; background:transparent; }
/* Right-side affordance shapes: "Open ↗" vs the wider "N runs ▾" pill. */
.lw-skel-side{ height:13px; }
.lw-skel-side-open{ width:58px; }
.lw-skel-side-pill{ width:78px; }
/* Reports backdrop only: lighter blur + full opacity than the shared
   .lw-locked-bg default — density does the selling, the veil still does the
   locking. */
.lw-stacks.lw-locked-bg{ filter:blur(.6px) grayscale(10%); opacity:1; }
.lw-locked-fill .lw-locked-veil{
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.38) 55%, rgba(255,255,255,.62) 100%);
}

/* ---------- Responsive: collapse the workspace rail into a menu drawer ---------- */
@media (max-width:880px){
  .lw-app .lw-content{ margin-left:0; }
  .lw-site-shell .lw-content{ padding-top:var(--lw-head-h); }
  .lw-content .lw-inspiration-tab{ height:calc(100vh - var(--lw-head-h)); }
  .lw-nomain{ padding:20px 16px 40px; }
  .lw-nomain .lw-bar{ position:static; left:auto; right:auto; }
  .lw-rail{
    position:static; width:auto; flex-direction:row; align-items:center;
    border-right:0; border-bottom:1px solid var(--lw-line);
  }
  .lw-brand{ border-bottom:0; border-right:1px solid var(--lw-line); height:auto; padding:12px 16px; }
  .lw-nav{ display:flex; flex-direction:row; align-items:center; gap:4px; padding:6px 8px; overflow-x:auto; }
  .lw-nav .lw-kick{ display:none; }
  .lw-item{ margin:0; white-space:nowrap; border-color:transparent !important; background:transparent; }
  .lw-item.is-active{ background:var(--lw-panel); }
  .lw-item .lw-label{ max-width:34vw; }
  .lw-menu{ display:none; }          /* no hover flyout on touch; tap goes to the list */
  .lw-rail-foot{ display:none; }
  .lw-iters{ padding-left:14px; }
  .lw-bar{ flex-wrap:wrap; height:auto; padding:12px 16px; gap:10px; }
  .lw-site-shell .lw-site-rail{
    position:fixed; top:var(--lw-head-h); left:0; right:auto; bottom:0; z-index:50;
    width:min(320px, 88vw); height:auto; flex-direction:column;
    border-right:1px solid var(--lw-ink-line); border-bottom:0;
    visibility:hidden; transform:translateX(-100%); pointer-events:none;
    transition:transform .15s ease, visibility 0s linear .15s;
  }
  .lw-site-shell .lw-site-rail.is-open{
    visibility:visible; transform:none; pointer-events:auto; transition-delay:0s;
  }
  .lw-site-rail .lw-nav{
    display:block; width:auto; padding:10px; overflow-x:hidden; overflow-y:auto;
  }
  .lw-site-rail .lw-site-context{ display:block; }
  .lw-site-rail .lw-kick{ display:block; }
  .lw-site-rail .lw-item{ width:auto; margin:2px 0; padding:10px; white-space:normal; }
  .lw-site-rail .lw-item .lw-label{ max-width:none; }
  .lw-site-shell .lw-global-bar{ flex-wrap:nowrap; height:var(--lw-head-h); padding:0 12px; gap:10px; }
  .lw-site-shell .lw-global-bar .lw-brand{ width:auto; padding:0; }
  .lw-mobile-nav-toggle{
    display:grid; place-content:center; gap:4px; width:38px; height:38px; flex:0 0 auto; padding:0;
    border:1px solid transparent; background:var(--lw-bg); color:var(--lw-ink); cursor:pointer;
  }
  .lw-mobile-nav-toggle:hover{ border-color:var(--lw-line); background:var(--lw-hover); }
  .lw-mobile-nav-toggle:focus-visible{ outline:2px solid var(--lw-accent); outline-offset:2px; }
  .lw-mobile-nav-toggle span{
    display:block; width:18px; height:1.5px; background:currentColor;
    transition:transform .15s ease, opacity .15s ease;
  }
  .lw-mobile-nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .lw-mobile-nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .lw-mobile-nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
  .lw-site-shell .lw-global-bar .lw-bar-meta{ display:none; }
  .lw-site-shell.lw-nomain{ padding:calc(var(--lw-head-h) + 22px) 16px 40px; }
  .lw-site-shell.lw-nomain .lw-bar{ position:fixed; left:0; right:0; }
  /* The bar above goes auto-height, so a fixed sticky offset would misalign —
     let the filter row scroll with the page and wrap on narrow screens. */
  .lw-filterbar{ position:static; flex-wrap:wrap; }
  .lw-filter-count{ margin-left:0; flex-basis:100%; }
  /* Locked states: keep the pop-over centered in a shorter, viewport-fitted
     backdrop so the card never scrolls out of reach on small screens. */
  .lw-locked-fill{ height:auto; min-height:0; max-height:72vh; }
  .lw-pop{ top:50%; }
}

@media (max-width:620px){
  .lw-site-shell .lw-global-bar .lw-bar-title{ display:none; }
  .lw-site-shell .lw-global-bar .lw-brand-name{ display:none; }
  .lw-site-shell .lw-global-bar .lw-brand{ border-right:0; }
  .lw-bar-pro{ padding:0 10px; }
}

@media (prefers-reduced-motion:reduce){
  .lw-site-shell .lw-site-rail,
  .lw-mobile-nav-toggle span{ transition:none; }
}

/* ===== Fullscreen lightbox (Two-Up Minimap) + Ambient Scrim — the ONE live
   lightbox shared by every report; ported from the report renderer. ===== */
.lightbox-img { cursor: zoom-in; transition: filter 0.15s; }
.lightbox-img:hover { filter: brightness(1.08); }
.lightbox {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  /* A near-black blurred scrim so the focused image reads cleanly. */
  background: radial-gradient(140% 140% at 50% 40%, rgba(11,12,14,0.88), rgba(4,5,6,0.97) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  display: flex; align-items: center; justify-content: center; padding: 2.5em 4em; cursor: zoom-out;
}
.lightbox.hidden { display: none; }
.lightbox-image {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 10px; background: #0a0a0a; cursor: default;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.4);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; z-index: 3; color: #ffffff;
  background: rgba(24,27,32,0.7); border: 1px solid rgba(255,255,255,0.28);
  border-radius: 18px; width: 62px; height: 62px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.55);
  line-height: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg { width: 28px; height: 28px; display: block; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: rgba(52,58,66,0.82); border-color: rgba(255,255,255,0.44);
}
.lightbox-close { top: 1.25em; right: 1.25em; }
.lightbox-prev { left: 1em; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1em; top: 50%; transform: translateY(-50%); }
/* Fullscreen caption — tells the reader where they are in the sequence
   (Control / Hypothesis N / Evidence N / Inspiration N). */
.lightbox-label {
  position: absolute; z-index: 3; left: 50%; bottom: 1.35em; transform: translateX(-50%);
  max-width: calc(100% - 8em); padding: .6em 1.2em;
  background: rgba(22,26,31,0.58); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.32);
  color: #f4f5f7; font-size: .96em; font-weight: 600; letter-spacing: .01em;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.lightbox-label:empty { display: none; }

/* Two-Up Minimap: a persistent Before/After tray pinned bottom-left so the
   labels stay visible while paging hypotheses — guards against before/after
   misreads. Shown only in the control/hypothesis comparison mode. */
.lightbox-minimap {
  position: absolute; left: 1.1em; bottom: 1.1em; z-index: 2;
  display: none; flex-direction: column; gap: .5em; max-width: 46vw;
}
.lb-mm-thumbs { display: flex; gap: .6em; }
.lb-mm-thumb {
  padding: 0; margin: 0; width: 152px; border: 2px solid rgba(255,255,255,0.16); border-radius: 12px;
  background: rgba(17,19,23,0.92); overflow: hidden; cursor: pointer; text-align: left;
  box-shadow: 0 8px 26px rgba(0,0,0,0.42);
  display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease;
}
.lb-mm-thumb:hover { transform: translateY(-2px); }
.lb-mm-thumb img {
  width: 100%; height: 84px; object-fit: cover; object-position: top center; display: block;
}
.lb-mm-cap {
  padding: .45em .6em; font-size: .72em; font-weight: 600; color: #e8e8e8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-mm-thumb.active { border-color: #FF6B00; }
.lb-mm-thumb.active .lb-mm-cap { color: #ffffff; }

@media (max-width: 760px) {
  .lightbox { padding: 3.25em .55em; }
  .lightbox-close { top: .55em; right: .55em; }
  .lightbox-prev { left: .35em; }
  .lightbox-next { right: .35em; }
  .lightbox-label { bottom: .55em; max-width: calc(100% - 5.5em); font-size: .82em; white-space: normal; }
  .lightbox-minimap { left: .55em; bottom: .55em; max-width: calc(100% - 1.1em); gap: .35em; }
  .lb-mm-thumb { width: 104px; }
  .lb-mm-thumb img { height: 58px; }
  .lb-mm-cap { font-size: .68em; padding: .3em .45em; }
}


/* ===== Other inspiration — "Masonry Lead" (live for ALL reports via the shell).
   Restyles the baked .divergent-grid / .divergent-card markup into a featured-
   first mosaic of full-bleed image tiles with a hover-revealed caption + source
   pill. Pure CSS on the existing markup, so old + new reports both get it. ===== */
.divergent-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 44px; grid-auto-flow: dense; gap: 10px; margin-top: .75em;
}
.divergent-card {
  position: relative; overflow: hidden; border-radius: 7px; background: #eceff2;
  border: 0; padding: 0; cursor: zoom-in; display: block;
  grid-column: span 6; grid-row: span 4;
}
.divergent-imgwrap {
  position: absolute; inset: 0; height: auto; width: auto; background: transparent;
  display: block; overflow: hidden;
}
.divergent-imgwrap img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; object-position: top center; border-radius: 0; margin: 0;
  transition: transform .4s ease;
}
.divergent-card:hover .divergent-imgwrap img { transform: scale(1.035); }
.divergent-meta {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: 2.6em .95em .8em;
  background: linear-gradient(to top, rgba(10,12,15,.88) 0%, rgba(10,12,15,.5) 44%, rgba(10,12,15,0) 100%);
  opacity: 0; transition: opacity .22s ease; pointer-events: none;
}
.divergent-card:hover .divergent-meta,
.divergent-card:focus-within .divergent-meta { opacity: 1; }
@media (hover: none) { .divergent-meta { opacity: 1; } }
.divergent-card .pattern,
.divergent-card .pattern-list {
  color: #fff; font-size: .85em; line-height: 1.35; margin: 0 0 .55em; padding: 0; list-style: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.divergent-card .pattern-list li { margin: 0; }
.divergent-card .companies {
  display: inline-block; font-size: .68em; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #16181c; background: rgba(255,255,255,.86);
  padding: .3em .62em; border-radius: 4px;
}
/* Featured-first spans (canonical up to 8 references). */
.divergent-grid > .divergent-card:nth-child(1) { grid-column: span 7; grid-row: span 9; }
.divergent-grid > .divergent-card:nth-child(2) { grid-column: span 5; grid-row: span 4; }
.divergent-grid > .divergent-card:nth-child(3) { grid-column: span 5; grid-row: span 5; }
.divergent-grid > .divergent-card:nth-child(4) { grid-column: span 5; grid-row: span 5; }
.divergent-grid > .divergent-card:nth-child(5) { grid-column: span 3; grid-row: span 5; }
.divergent-grid > .divergent-card:nth-child(6) { grid-column: span 4; grid-row: span 5; }
.divergent-grid > .divergent-card:nth-child(7) { grid-column: span 6; grid-row: span 6; }
.divergent-grid > .divergent-card:nth-child(8) { grid-column: span 6; grid-row: span 6; }
@media (max-width: 760px) {
  .divergent-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 108px; }
  .divergent-grid > .divergent-card { grid-column: span 1 !important; grid-row: span 1 !important; }
  .divergent-grid > .divergent-card:nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
}

/* ===== ... and the same 'Masonry Lead' for reports baked with the newer
   .divergent-mosaic / .divergent-tile markup (post #366), so shell mode renders
   both old and new inspiration markup identically. Mirrors the report renderer. ===== */
/* Other inspiration - "Masonry Lead": a featured-first mosaic of full-bleed
   reference tiles. The first reference leads as a large tile; the rest form a
   mosaic on a 12-col grid, placed by position via :nth-child so the proportions
   match the design (wide featured + narrower right stack + a full-width base
   row). Each tile IS the screenshot, with the description + source overlaid. */
.divergent-mosaic {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 44px; grid-auto-flow: dense; gap: 10px; margin-top: .75em;
}
.divergent-tile {
  position: relative; overflow: hidden; border-radius: 7px;
  background: #eceff2; cursor: zoom-in;
  grid-column: span 6; grid-row: span 4;  /* default; per-position size below */
}
.divergent-tile img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; border: 0; margin: 0; transition: transform .4s ease;
}
.divergent-tile:hover img { transform: scale(1.035); }
.divergent-overlay {
  position: absolute; inset: auto 0 0 0; padding: 2.6em .95em .8em;
  background: linear-gradient(to top,
      rgba(10,12,15,.88) 0%, rgba(10,12,15,.5) 44%, rgba(10,12,15,0) 100%);
  pointer-events: none;
  opacity: 0; transition: opacity .22s ease;  /* clean by default; reveal on hover */
}
.divergent-tile:hover .divergent-overlay,
.divergent-tile:focus-within .divergent-overlay { opacity: 1; }
/* Touch devices have no hover - keep the caption + source visible there. */
@media (hover: none) { .divergent-overlay { opacity: 1; } }
.divergent-desc {
  color: #ffffff; font-size: .85em; line-height: 1.35; margin: 0 0 .55em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.divergent-src {
  display: inline-block; font-size: .68em; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: #16181c;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: .3em .62em; border-radius: 4px;
}
/* Featured-first mosaic (canonical up to 8 references). Widths AND heights vary
   per position, and the column seams are deliberately offset band-to-band
   (hero seam at col 7, mid band at cols 5/8, base band at col 6) so the tiles
   interlock like an editorial collage instead of snapping to a rigid grid.
   Heights are in 44px row units; the hero + its right stack still balance. */
.divergent-mosaic > :nth-child(1) { grid-column: span 7; grid-row: span 9; }  /* hero              */
.divergent-mosaic > :nth-child(2) { grid-column: span 5; grid-row: span 4; }  /* short, right top  */
.divergent-mosaic > :nth-child(3) { grid-column: span 5; grid-row: span 5; }  /* tall,  right below*/
.divergent-mosaic > :nth-child(4) { grid-column: span 5; grid-row: span 5; }  /* mid band, wide L  */
.divergent-mosaic > :nth-child(5) { grid-column: span 3; grid-row: span 5; }  /* mid band, narrow  */
.divergent-mosaic > :nth-child(6) { grid-column: span 4; grid-row: span 5; }  /* mid band, right   */
.divergent-mosaic > :nth-child(7) { grid-column: span 6; grid-row: span 6; }  /* base row, left    */
.divergent-mosaic > :nth-child(8) { grid-column: span 6; grid-row: span 6; }  /* base row, right   */
/* Featured tile gets a larger description block. */
.divergent-mosaic > :nth-child(1) .divergent-overlay { padding: 3.2em 1.3em 1.15em; }
.divergent-mosaic > :nth-child(1) .divergent-desc { font-size: 1.08em; -webkit-line-clamp: 3; margin-bottom: .7em; }
.divergent-mosaic > :nth-child(1) .divergent-src { font-size: .74em; padding: .34em .7em; }

@media (max-width: 760px) {
  .divergent-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 108px; gap: 8px; }
  .divergent-mosaic > :nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .divergent-mosaic > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .divergent-overlay { padding: 2em .8em .7em; }
}


/* ---- Inspiration tiles: sharper + better separated ----
   The reference screenshots are full-resolution (~2880px) but each is a whole
   page downscaled into a small tile, so light ones bleed together and detail
   softens. Frame every tile (hairline ring + soft shadow), add air, and lift
   contrast so they read as distinct and crisp. Click any tile to see it at full
   resolution in the lightbox. Applies to both baked markups. */
.divergent-grid, .divergent-mosaic { gap: 13px; }
.divergent-card, .divergent-tile {
  background: #f4f6f8;
  box-shadow: 0 0 0 1px rgba(17, 20, 24, .09), 0 2px 8px rgba(17, 20, 24, .10);
  transition: box-shadow .2s ease;
}
.divergent-card:hover, .divergent-tile:hover {
  box-shadow: 0 0 0 1px rgba(17, 20, 24, .14), 0 10px 26px rgba(17, 20, 24, .18);
}
.divergent-imgwrap img, .divergent-tile img {
  filter: saturate(1.05) contrast(1.035);
}

/* ---------- Instant workspace route state ----------
   Server-rendered tabs sometimes need a few seconds to assemble their next
   data set. workspace-transitions.js paints this destination-shaped state
   synchronously, then waits two animation frames before navigation so the
   click always receives visible feedback. It deliberately lives in the
   shared chrome asset: new pages rendered by the workspace shell inherit it. */
body.lw-route-pending{ overflow:hidden; cursor:progress; }
.lw-route-loading{
  position:fixed; top:var(--lw-head-h); right:0; bottom:0; left:var(--lw-rail-w); z-index:68;
  overflow:hidden; box-sizing:border-box; padding:34px clamp(24px,4vw,58px) 48px;
  background:
    radial-gradient(circle at 1px 1px, rgba(17,20,24,.042) 1px, transparent 1.2px) 0 0 / 24px 24px,
    var(--lw-bg);
  color:var(--lw-ink); cursor:progress;
}
.lw-route-loading-inner{
  width:min(1080px,100%); margin:0 auto;
  animation:lw-route-content-in .14s cubic-bezier(.23,1,.32,1) both;
}
.lw-route-loading-head{ margin:0 0 28px; padding:0; border:0; }
.lw-route-loading-head p{
  margin:0 0 8px; color:var(--lw-accent); font:700 10px/1.3 var(--lw-mono);
  letter-spacing:.15em; text-transform:uppercase;
}
.lw-route-loading-head h1{
  margin:0; padding:0; border:0; color:var(--lw-ink);
  font:800 clamp(25px,3.1vw,38px)/1.08 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:-.035em; text-transform:none;
}
.lw-route-loading-head > span{
  display:block; margin-top:8px; color:var(--lw-mut);
  font:400 14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.lw-route-metrics,
.lw-route-dashboard,
.lw-route-gallery,
.lw-route-card-grid,
.lw-route-settings{ display:grid; gap:14px; }
.lw-route-metrics{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:14px; }
.lw-route-dashboard{ grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); }
.lw-route-gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.lw-route-card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.lw-route-settings{ grid-template-columns:1fr 1fr; }
.lw-route-metrics > span,
.lw-route-dashboard > section,
.lw-route-card-grid > section,
.lw-route-settings > section,
.lw-route-page > section{
  display:block; min-width:0; box-sizing:border-box; border:1px solid var(--lw-line); background:rgba(255,255,255,.96);
}
.lw-route-metrics > span{ height:76px; }
.lw-route-dashboard > section{ min-height:310px; padding:24px; }
.lw-route-card-grid > section{ min-height:300px; padding:22px; }
.lw-route-settings > section{ min-height:260px; padding:24px; }
.lw-route-page > section{ width:100%; min-height:390px; padding:26px; }
.lw-route-dashboard i,
.lw-route-card-grid i,
.lw-route-settings i,
.lw-route-page i{
  display:block; width:86px; height:11px; margin-bottom:24px;
}
.lw-route-dashboard b,
.lw-route-card-grid b,
.lw-route-settings b,
.lw-route-page b{
  display:block; width:72%; height:16px; margin:0 0 12px;
}
.lw-route-dashboard b:nth-of-type(2),
.lw-route-card-grid b:nth-of-type(2),
.lw-route-settings b:nth-of-type(2),
.lw-route-page b:nth-of-type(2){ width:92%; }
.lw-route-dashboard b:nth-of-type(3),
.lw-route-page b:nth-of-type(3){ width:56%; }
.lw-route-dashboard em,
.lw-route-card-grid em,
.lw-route-settings em,
.lw-route-page em{
  display:block; width:100%; height:132px; margin-top:26px; border:1px solid var(--lw-line);
}
.lw-route-card-grid span{
  display:block; width:100px; height:32px; margin-top:18px; border:1px solid var(--lw-ink-line);
}
.lw-route-filters{ display:flex; gap:8px; margin:0 0 16px; }
.lw-route-filters span{ display:block; width:118px; height:34px; border:1px solid var(--lw-line); }
.lw-route-gallery i{
  display:block; height:210px; border:1px solid var(--lw-line);
}
.lw-route-list{ border-top:1px solid var(--lw-line); }
.lw-route-list > div{
  display:flex; align-items:center; gap:18px; min-height:92px; box-sizing:border-box;
  padding:14px 12px; border-bottom:1px solid var(--lw-line);
}
.lw-route-list i{ display:block; width:86px; height:58px; flex:0 0 auto; border:1px solid var(--lw-line); }
.lw-route-list span{ display:block; flex:1 1 auto; min-width:0; }
.lw-route-list b,
.lw-route-list em{ display:block; height:13px; }
.lw-route-list b{ width:min(420px,68%); margin-bottom:11px; }
.lw-route-list em{ width:min(270px,45%); }
.lw-route-list u{ display:block; width:66px; height:30px; flex:0 0 auto; border:1px solid var(--lw-line); text-decoration:none; }

/* One low-contrast material treatment keeps the state recognizably loading
   without looking empty or introducing a spinner that implies no progress. */
.lw-route-metrics > span,
.lw-route-dashboard i,.lw-route-dashboard b,.lw-route-dashboard em,
.lw-route-list i,.lw-route-list b,.lw-route-list em,.lw-route-list u,
.lw-route-filters span,.lw-route-gallery i,
.lw-route-card-grid i,.lw-route-card-grid b,.lw-route-card-grid em,.lw-route-card-grid span,
.lw-route-settings i,.lw-route-settings b,.lw-route-settings em,
.lw-route-page i,.lw-route-page b,.lw-route-page em{
  background:linear-gradient(100deg,#eef1f4 8%,#f8f9fa 18%,#eef1f4 33%);
  background-size:220% 100%;
  animation:lw-route-shimmer 1.25s linear infinite;
}
@keyframes lw-route-content-in{
  from{ opacity:.72; transform:translateY(5px); }
  to{ opacity:1; transform:none; }
}
@keyframes lw-route-shimmer{
  to{ background-position-x:-220%; }
}

@media (max-width:880px){
  .lw-route-loading{ left:0; padding:26px 18px 36px; }
  .lw-route-dashboard,.lw-route-settings{ grid-template-columns:1fr; }
  .lw-route-dashboard > section:nth-child(2),
  .lw-route-settings > section:nth-child(2){ display:none; }
  .lw-route-gallery,.lw-route-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lw-route-card-grid > section:nth-child(3){ display:none; }
}
@media (max-width:620px){
  .lw-route-loading-head{ margin-bottom:20px; }
  .lw-route-metrics{ gap:8px; }
  .lw-route-metrics > span{ height:60px; }
  .lw-route-gallery{ gap:8px; }
  .lw-route-gallery i{ height:150px; }
  .lw-route-card-grid{ grid-template-columns:1fr; }
  .lw-route-card-grid > section:nth-child(2){ display:none; }
  .lw-route-list > div{ min-height:78px; padding:10px 0; }
  .lw-route-list i{ width:68px; height:48px; }
  .lw-route-list u{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .lw-route-loading-inner,
  .lw-route-metrics > span,
  .lw-route-dashboard i,.lw-route-dashboard b,.lw-route-dashboard em,
  .lw-route-list i,.lw-route-list b,.lw-route-list em,.lw-route-list u,
  .lw-route-filters span,.lw-route-gallery i,
  .lw-route-card-grid i,.lw-route-card-grid b,.lw-route-card-grid em,.lw-route-card-grid span,
  .lw-route-settings i,.lw-route-settings b,.lw-route-settings em,
  .lw-route-page i,.lw-route-page b,.lw-route-page em{ animation:none; }
}