/* ============================================================================
   Advance Basis customer app: "Lattice" design system (ported from design_handoff_ergo,
   Ergo - App.dc.html). Self-contained + token-driven; dark default, light
   parallel. Scoped to .lat-shell so the operator console (control.css) is
   untouched. Values are ported verbatim from the handoff.
   ============================================================================ */

/* ---- Tokens (verbatim from handoff) ---- */
[data-theme="dark"] {
  --bg:#0C0E14;        --bg2:#10131C;
  --panel:rgba(255,255,255,.032);   --panel2:rgba(255,255,255,.06);
  --head:rgba(255,255,255,.07);
  --ink:#E8EAF0;       --soft:#A7ACBD;   --faint:#5B6175;
  --rule:rgba(255,255,255,.09);     --rule2:rgba(255,255,255,.16);
  --sig:#5FE6B8;       --sig2:#7DF5CC;   --sigsoft:rgba(95,230,184,.13);  --glow:rgba(95,230,184,.5);
  --green:#5FE6B8;     --amber:#E8C06A;  --rose:#FF8092;
  --brand:#CC8350;     --btnink:#08120E;
  --accent:#B9ADF0;
}
[data-theme="light"] {
  --bg:#EDF0F3;        --bg2:#FFFFFF;
  --panel:rgba(14,30,40,.022);      --panel2:rgba(14,30,40,.05);
  --head:rgba(14,30,40,.05);
  --ink:#0F1620;       --soft:#48525F;   --faint:#8A94A2;
  --rule:rgba(16,22,30,.12);        --rule2:rgba(16,22,30,.22);
  --sig:#0C8F6A;       --sig2:#0AA178;   --sigsoft:rgba(12,143,106,.09);  --glow:rgba(12,143,106,.3);
  --green:#0C8F6A;     --amber:#9A6A12;  --rose:#C8455A;
  --brand:#B5612A;     --btnink:#FFFFFF;
  --accent:#6D57B8;
}

.lat-shell * { box-sizing:border-box; margin:0; padding:0; }
.lat-shell {
  background:var(--bg);
  color:var(--ink);
  font-family:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
.lat-shell a { text-decoration:none; }
/* reset anchor color to inherit EXCEPT on buttons, whose fill needs their own
   ink (mint-fill primary must keep dark --btnink, not inherit light text). */
.lat-shell a:not(.lat-btn) { color:inherit; }

/* ---- Motion ---- */
@keyframes drwBlink  { 0%,100% { opacity:1; } 50% { opacity:.38; } }
@keyframes drwEmit   { 0% { transform:scale(.55); opacity:.6; } 100% { transform:scale(2.4); opacity:0; } }
@keyframes drwDash   { to { stroke-dashoffset:0; } }
@keyframes drwScreen { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes drwRise   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .lat-shell * { animation:none !important; } }

/* ---- Top title bar ---- */
.lat-topbar {
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:60px; padding:0 22px;
  background:var(--bg);
  border-bottom:1px solid var(--rule);
}
/* Liquid-glass treatment: translucent + blurred only where backdrop-filter is
   real, so unsupported browsers keep the solid bar instead of a see-through one. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lat-topbar {
    background:color-mix(in srgb, var(--bg) 50%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.6);
    backdrop-filter:blur(14px) saturate(1.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
}
/* Fixed bar is out of flow; pad the shell so content clears it (border-box so
   the padding eats into the 100vh min-height rather than adding scroll). */
.lat-shell.customer-shell { box-sizing:border-box; padding-top:60px; }
.lat-brand { display:flex; align-items:center; gap:11px; }
.lat-glyph { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--panel2); border:1px solid var(--rule2); flex:none; }
.lat-mark { width:20px; height:20px; display:block; overflow:visible; flex:none; }
.lat-mark rect { fill:var(--brand); }
/* line-height 1.15 keeps the g's descender inside the box (the wordmark face's
   vertical metrics exceed the em square, so 1.0 leading gets it sheared in
   ink-clipping engines); the lockup gap shrinks to compensate so the slogan
   sits tight under the wordmark. */
.lat-wordmark { font:700 24px/1.15 'Helvetica Neue', Helvetica, Arial, sans-serif; color:var(--ink); letter-spacing:0.005em; }
.lat-lockup { display:flex; flex-direction:column; gap:1px; }
.lat-slogan { font:500 11.5px/1.2 'Hanken Grotesk',sans-serif; letter-spacing:.03em; color:var(--brand); }

.lat-nav {
  display:flex; align-items:center; gap:2px; white-space:nowrap;
  /* Center independently of the asymmetric brand and account clusters. */
  position:absolute; left:50%; top:0; transform:translate(-50%,0);
  height:60px;
}
.lat-nav a {
  position:relative; display:inline-flex; align-items:center; height:60px;
  font:700 10.5px/1 'Hanken Grotesk',sans-serif;
  text-transform:uppercase; letter-spacing:0;
  color:var(--soft);
  padding:0 11px;
  transition:color .2s ease;
}
.lat-nav a::after { content:""; position:absolute; left:11px; right:11px; bottom:0; height:2px; background:var(--sig); transform:scaleX(0); transform-origin:center; transition:transform .2s ease; }
.lat-nav a:hover,
.lat-nav a:focus-visible { color:var(--ink); }
.lat-nav a:focus-visible { outline:1px solid var(--sig); outline-offset:-7px; }
.lat-nav a.is-active { color:var(--sig); }
.lat-nav a.is-active::after { transform:scaleX(1); }

.lat-topbar-right { display:flex; align-items:center; gap:14px; }
.lat-theme-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:1px solid var(--rule2); background:transparent; color:var(--soft); cursor:pointer; transition:border-color .2s, color .2s; }
.lat-theme-btn:hover { border-color:var(--sig); color:var(--sig); }
.lat-theme-btn svg { width:16px; height:16px; display:block; }
html[data-theme="dark"] .lat-moon { display:none; }
html[data-theme="light"] .lat-sun { display:none; }

.lat-workspace { display:flex; align-items:center; gap:14px; white-space:nowrap; }
.lat-workspace-bal { display:flex; align-items:center; gap:8px; font:500 10px/1 'IBM Plex Mono',monospace; color:var(--sig); }
.lat-workspace-bal .dot { width:6px; height:6px; border-radius:50%; background:var(--sig); }
.lat-usermenu { position:relative; }
.lat-usermenu > summary { list-style:none; cursor:pointer; display:inline-flex; }
.lat-usermenu > summary::-webkit-details-marker { display:none; }
.lat-avatar-sm { width:32px; height:32px; border-radius:50%; background:var(--avatar-bg,var(--panel2)); color:#0b0c10; display:flex; align-items:center; justify-content:center; font:600 12px/1 'Hanken Grotesk',sans-serif; border:1px solid var(--rule2); transition:border-color .2s; }
.lat-usermenu > summary:hover .lat-avatar-sm, .lat-usermenu[open] .lat-avatar-sm { border-color:var(--sig); }
/* Solid surface, not the --panel alpha wash: an overlay must occlude the
   content beneath it, and a translucent fill reads as a z-order bug. */
.lat-usermenu-pop { position:absolute; top:calc(100% + 8px); right:0; min-width:184px; border:1px solid var(--rule2); border-radius:10px; background:var(--bg2); box-shadow:0 12px 30px rgba(0,0,0,.4); padding:6px; z-index:40; }
.lat-usermenu-id { padding:8px 10px; font:400 12px/1.3 'Hanken Grotesk',sans-serif; color:var(--faint); border-bottom:1px solid var(--rule); margin-bottom:4px; word-break:break-word; }
.lat-usermenu-item { display:block; box-sizing:border-box; width:100%; text-align:left; padding:9px 10px; border-radius:7px; border:0; background:transparent; font:500 13px/1 'Hanken Grotesk',sans-serif; color:var(--ink); cursor:pointer; text-decoration:none; }
.lat-usermenu-item:hover { background:var(--panel2); color:var(--sig); }

/* Parent-company attribution. This is intentionally a footer line, not a
   product lockup: Advance Basis remains the primary brand throughout the app. */
.lat-shell.customer-shell:not(.operator-shell) { display:flex; flex-direction:column; }
.lat-shell.customer-shell:not(.operator-shell) > main { width:100%; flex:1 0 auto; }
.lat-parent-footer {
  width:min(1180px,calc(100% - 52px));
  margin:12px auto 0;
  padding:18px 0 24px;
  border-top:1px solid var(--rule);
  color:var(--faint);
  flex:none;
}
.lat-parent-footer-inner {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  font:400 9.5px/1.35 'IBM Plex Mono',monospace;
  letter-spacing:0;
}
.lat-parent-footer .gxp-attribution {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--faint);
  transition:color .2s ease;
}
.lat-parent-footer .gxp-attribution img { display:block; width:11px; height:11px; flex:none; }
.lat-parent-footer .gxp-attribution span { font:500 10px/1.2 'Hanken Grotesk',sans-serif; letter-spacing:0; }
.lat-parent-footer .gxp-attribution:hover,
.lat-parent-footer .lat-parent-footer-link:hover { color:var(--soft); }
.lat-parent-footer .gxp-attribution:focus-visible,
.lat-parent-footer .lat-parent-footer-link:focus-visible { outline:1px solid var(--sig); outline-offset:3px; }
.lat-parent-footer-link { color:var(--faint); transition:color .2s ease; }

/* ---- Screen container ---- */
.lat-screen { animation:drwScreen .45s ease both; width:min(1180px,100%); margin:0 auto; padding:34px 26px 44px; }
.lat-screen-narrow { width:min(1100px,100%); }
.lat-eyebrow { font:500 11px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--faint); }
.lat-h1 { font:600 28px/1.1 'Hanken Grotesk',sans-serif; color:var(--ink); letter-spacing:-0.015em; margin-top:10px; }
.lat-section-label { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--brand); }

/* status/notice strip */
.lat-status { display:flex; align-items:center; gap:10px; font:500 10px/1 'IBM Plex Mono',monospace; color:var(--faint); width:min(1180px,100%); margin:0 auto; padding:0 26px; }
.lat-notice, .lat-error {
  width:min(1180px,100%); margin:16px auto 20px; padding:12px 16px;
  border-radius:8px; font:400 13px/1.4 'Hanken Grotesk',sans-serif;
}
.lat-notice { border:1px solid var(--rule2); background:var(--sigsoft); color:var(--ink); }
.lat-error { border:1px solid var(--rose); background:transparent; color:var(--rose); }

.lat-empty { font:400 13px/1.5 'Hanken Grotesk',sans-serif; color:var(--soft); }

/* ---- Buttons / pills / confidence ---- */
.lat-btn {
  display:inline-flex; align-items:center; gap:7px;
  font:500 11px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0;
  padding:11px 15px; border-radius:6px; cursor:pointer; transition:all .25s; border:1px solid var(--rule2);
  background:transparent; color:var(--ink);
}
.lat-btn:hover { border-color:var(--sig); color:var(--sig); }
.lat-btn-primary { background:var(--sig); border-color:var(--sig); color:var(--btnink); }
.lat-btn-primary:hover { box-shadow:0 0 22px var(--glow); color:var(--btnink); }
/* Standard elevated action: green frame, neutral ink text. The solid mint
   fill (-primary) is reserved for research-intake CTAs only. */
.lat-btn-frame { border-color:var(--sig); }
.lat-btn-frame:hover { border-color:var(--sig2); color:var(--sig); }
.lat-btn-danger { border-color:var(--rose); color:var(--rose); }
.lat-btn-danger:hover { border-color:var(--rose); color:var(--rose); box-shadow:0 0 18px rgba(255,128,146,.22); }
.lat-btn-ghost { border:0; color:var(--soft); padding:11px 6px; }
.lat-btn-ghost:hover { color:var(--sig); }

.lat-pill {
  font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0;
  color:var(--sig); border:1px solid var(--rule2); padding:5px 8px; border-radius:4px; white-space:nowrap;
}
.lat-pill[data-state="succeeded"], .lat-pill[data-state="approved"], .lat-pill[data-state="published"], .lat-pill[data-state="delivered"] { color:var(--green); }
.lat-pill[data-state="working"], .lat-pill[data-state="running"], .lat-pill[data-state="queued"] { color:var(--sig); }
.lat-pill[data-state="in_review"], .lat-pill[data-state="review"], .lat-pill[data-state="draft"], .lat-pill[data-state="blocked"] { color:var(--amber); }
.lat-pill[data-state="failed"], .lat-pill[data-state="needs_attention"], .lat-pill[data-state="cancelled"] { color:var(--rose); }
.lat-pill-live { display:inline-flex; align-items:center; gap:6px; }
.lat-pill-live .dot { width:5px; height:5px; border-radius:50%; background:var(--sig); box-shadow:0 0 6px var(--glow); animation:drwBlink 1.3s infinite; }

.lat-conf { display:inline-flex; align-items:flex-end; gap:2px; }
.lat-conf span { width:3px; border-radius:1px; background:var(--rule2); }
.lat-conf .b1 { height:6px; } .lat-conf .b2 { height:9px; } .lat-conf .b3 { height:12px; }
.lat-conf[data-tier="high"] span { background:var(--green); }
.lat-conf[data-tier="medium"] .b1, .lat-conf[data-tier="medium"] .b2 { background:var(--amber); }
.lat-conf[data-tier="low"] .b1 { background:var(--rose); }

/* ---- Dashboard ---- */
.lat-active-card {
  border:1px solid var(--rule); border-radius:12px; background:var(--panel);
  padding:22px 24px; cursor:pointer; transition:all .25s;
  display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:10px;
}
.lat-active-card:hover { border-color:var(--sig); box-shadow:0 0 26px var(--sigsoft); }
.lat-active-main { min-width:0; }
.lat-live-tag { display:inline-flex; align-items:center; gap:8px; font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--sig); margin-bottom:11px; }
.lat-live-tag .dot { width:6px; height:6px; border-radius:50%; background:var(--sig); box-shadow:0 0 8px var(--glow); animation:drwBlink 1.3s infinite; }
.lat-active-title { font:600 18px/1.2 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-active-sub { font:400 12.5px/1.4 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:6px; }
.lat-active-right { display:flex; align-items:center; gap:30px; flex:none; }
.lat-active-view { font:500 11px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--sig); }

.lat-two-col { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px; align-items:start; }
.lat-two-col > div { min-width:0; }

/* Each dashboard section is enclosed in a hairline frame; its items become
   dividered rows inside the frame (no nested per-card borders). */
.lat-section { border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
.lat-section-gap { margin-top:20px; }
/* Structural spacing between stacked sections in a dashboard column: an
   adjacent-sibling margin instead of a baked-in class, so when dismiss.js
   retires the needs-attention section live, the next section snaps flush to
   the column top and stays aligned with the other column. Same value as
   .lat-section-gap, so pages that still set the class explicitly are
   unaffected. */
.lat-two-col > div > .lat-section + .lat-section { margin-top:20px; }
.lat-section .lat-col-head { padding:14px 18px 13px; margin-bottom:0; background:var(--head); }
.lat-section .lat-report-card,
.lat-section .lat-mini-card { border:0; border-radius:0; border-top:1px solid var(--rule); background:transparent; margin:0; padding:15px 18px; }
.lat-section .lat-report-card:hover,
.lat-section .lat-mini-card:hover { background:var(--panel); }
/* Stacked section rows size to their content: the two-line title reservation
   (min-height on clamped titles) exists for equal-height card grids, and in a
   dividered list it just opens a blank line under one-line titles. */
.lat-section .lat-report-card-title,
.lat-section .lat-mini-topic { min-height:0; }
/* Washed metadata tints: dates cool violet, costs warm amber, run/report ids
   soft mint — every tone mixed heavily toward --faint so metadata reads as
   quiet texture rather than signal. */
.lat-meta-date { color:color-mix(in srgb, var(--accent) 32%, var(--faint)); }
.lat-meta-cost { color:color-mix(in srgb, var(--amber) 48%, var(--faint)); }
.lat-meta-id, .lat-report-ids { color:color-mix(in srgb, var(--sig) 30%, var(--faint)); }
.lat-section .lat-docs-list { border:0; border-radius:0; }
.lat-section .lat-doc-row:first-child { border-top:1px solid var(--rule); }
.lat-section .lat-empty { padding:2px 18px 16px; }
.lat-col-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lat-col-all { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); transition:color .2s; }
.lat-col-all:hover { color:var(--sig); }

.lat-report-card {
  display:block; border:1px solid var(--rule); border-radius:10px; background:var(--panel);
  padding:16px 17px; transition:all .25s; margin-bottom:10px;
}
.lat-report-card:hover { border-color:var(--rule2); background:var(--panel2); }
.lat-report-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.lat-report-card-title { flex:1 1 auto; min-width:0; font:600 14px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.lat-report-card-meta { display:flex; align-items:center; gap:10px; margin-top:11px; }
.lat-report-ids { margin-top:6px; font:500 9.5px/1.5 'IBM Plex Mono',monospace; letter-spacing:.02em; color:var(--faint); }
.lat-report-card-meta .m { font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); }

.lat-docs-list { border:1px solid var(--rule); border-radius:10px; background:var(--panel); overflow:hidden; }
.lat-doc-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--rule); }
.lat-doc-row:last-child { border-bottom:0; }
.lat-kind-chip { font:500 9px/1 'IBM Plex Mono',monospace; color:var(--soft); border:1px solid var(--rule2); padding:4px 6px; border-radius:4px; flex:none; min-width:38px; text-align:center; }
.lat-doc-name { flex:1; font:500 13px/1.2 'Hanken Grotesk',sans-serif; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lat-doc-meta { font:400 10px/1 'IBM Plex Mono',monospace; color:var(--faint); flex:none; }

/* ---- Needs-attention + drafts (undesigned in the mockup): compact 2-up card
   grid — no cell wider than a dashboard column, for an economical global view. ---- */
.lat-sub-section { margin-top:26px; }
.lat-mini-card { border:1px solid var(--rule); border-radius:10px; background:var(--panel); padding:16px 17px; margin-bottom:12px; }
.lat-mini-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.lat-mini-topic { flex:1 1 auto; min-width:0; font:600 13.5px/1.35 'Hanken Grotesk',sans-serif; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.lat-mini-head .lat-pill { flex:none; }
.lat-mini-detail { font:400 11px/1.45 'Hanken Grotesk',sans-serif; color:var(--faint); margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lat-mini-actions { display:flex; align-items:center; gap:10px; margin-top:12px; }
.lat-mini-actions form { display:inline; }
.lat-inline-btn { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--soft); background:transparent; border:1px solid var(--rule2); padding:8px 12px; border-radius:6px; cursor:pointer; transition:all .2s; }
.lat-inline-btn:hover { border-color:var(--sig); color:var(--sig); }
.lat-inline-btn.is-danger:hover { border-color:var(--rose); color:var(--rose); }

/* ---- Profile usage history: the same divided section rows as the dashboard,
   with a bounded inner ledger so a long personal run history does not stretch
   the settings page. The only customer-facing usage figure is the settled
   amount deducted from the account; provider/model telemetry is not rendered. ---- */
.lat-usage-list { max-height:440px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--rule2) transparent; }
.lat-usage-list::-webkit-scrollbar { width:9px; }
.lat-usage-list::-webkit-scrollbar-track { background:transparent; }
.lat-usage-list::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:8px; background:var(--rule2); background-clip:padding-box; }
.lat-usage-list:focus-visible { outline:1px solid var(--sig); outline-offset:-1px; }
.lat-usage-row { display:block; }
.lat-usage-meta { display:grid; grid-template-columns:98px minmax(125px,1fr) 64px 84px; gap:8px; align-items:end; margin-top:11px; }
.lat-usage-mode { min-width:0; align-self:end; }
.lat-usage-mode .lat-kind-chip { display:inline-flex; align-items:center; width:auto; min-width:0; }
.lat-usage-mode .lat-kind-chip[data-mode="scan"] { color:color-mix(in srgb, var(--brand) 72%, var(--soft)); }
.lat-usage-mode .lat-kind-chip[data-mode="full"] { color:color-mix(in srgb, var(--sig) 58%, var(--soft)); }
.lat-usage-fact { min-width:0; }
.lat-usage-fact.is-amount { text-align:right; }
.lat-usage-key { display:block; margin-bottom:5px; font:500 8px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); }
.lat-usage-value { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 10px/1.25 'IBM Plex Mono',monospace; color:var(--soft); font-variant-numeric:tabular-nums; }
.lat-usage-fact.is-amount .lat-usage-value { color:color-mix(in srgb, var(--amber) 48%, var(--faint)); }
.lat-pill[data-state="canceled"] { color:var(--rose); }

/* Customer export menu (AI-343): a compact list of formats, each row a
   title + one-line description, plus a list of generated exports with
   their download or preparing state. */
.lat-export-menu { display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:10px; overflow:hidden; }
.lat-export-form { margin:0; }
.lat-export-form + .lat-export-form .lat-export-item { border-top:1px solid var(--rule); }
.lat-export-item { display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; background:transparent; border:0; padding:12px 14px; cursor:pointer; transition:background .15s; }
.lat-export-item:hover { background:var(--panel); }
.lat-export-title { font:500 13.5px/1.2 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-export-desc { font:400 11.5px/1.35 'Hanken Grotesk',sans-serif; color:var(--faint); }
.lat-export-list { list-style:none; margin:0; padding:0; }
.lat-export-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--rule); }
.lat-export-row:last-child { border-bottom:0; }
.lat-export-row-label { font:400 12.5px/1.3 'Hanken Grotesk',sans-serif; color:var(--soft); }
.lat-export-status { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--faint); }
.lat-export-status.is-failed { color:var(--rose); }
.lat-inline-btn:disabled { opacity:.5; cursor:default; pointer-events:none; }
/* dismiss.js adds .row-dismissing after a background dismiss succeeds; the
   fade's transitionend is what removes the card from the DOM. */
.lat-mini-card.row-dismissing,
.lat-doc-card.row-dismissing { opacity:0; transition:opacity .35s ease; }
/* Needs attention leads the dashboard: rose label + a rose edge on each failed
   run so broken work reads as needing a decision, not just another list. */
.lat-section-label.is-alert { color:var(--rose); }
.lat-section .lat-mini-card.lat-mini-card-alert { border-left:2px solid var(--rose); }

/* ---- Reports library table ---- */
.lat-reports-frame { margin-top:22px; border:1px solid var(--rule); border-radius:12px; background:var(--panel); overflow:hidden; }
.lat-reports-headrow, .lat-reports-row {
  display:grid; grid-template-columns:1fr 104px 96px 80px 100px; gap:16px; align-items:center;
  padding:17px 22px; border-bottom:1px solid var(--rule);
}
.lat-reports-headrow { padding:13px 22px; font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); }
.lat-reports-headrow .end, .lat-reports-row .end { justify-self:end; }
.lat-reports-row:last-child { border-bottom:0; }
.lat-reports-row:hover { background:var(--panel2); }
.lat-report-name { font:600 14.5px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); min-width:0; }
.lat-report-topic { font:400 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); margin-top:5px; }
.lat-report-conf { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); }
.lat-report-date { font:400 11px/1 'IBM Plex Mono',monospace; color:var(--faint); }
.lat-report-status { justify-self:start; }
/* single Link-column control per the mockup: Copy link (shared) or Private */
.lat-copy-chip { display:inline-flex; align-items:center; gap:5px; font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--sig); border:1px solid var(--rule2); padding:5px 8px; border-radius:4px; background:transparent; cursor:pointer; transition:border-color .2s; }
.lat-copy-chip:hover { border-color:var(--sig); }
.lat-copy-hidden { display:none; }
.lat-link-private { font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); }
/* shared by the report-detail share panel + modal (not the library table) */
.lat-link-op {
  font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--soft);
  border:1px solid var(--rule2); padding:5px 8px; border-radius:4px; background:transparent; cursor:pointer; transition:border-color .2s,color .2s;
}
.lat-link-op:hover { border-color:var(--sig); color:var(--sig); }
.lat-link-op.is-danger:hover { border-color:var(--rose); color:var(--rose); }
.lat-share-url { font:400 10px/1.3 'IBM Plex Mono',monospace; color:var(--soft); max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Documents grid ---- */
.lat-docs-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.lat-doc-card {
  display:flex; align-items:center; gap:14px; border:1px solid var(--rule); border-radius:10px;
  background:var(--panel); padding:16px 18px; transition:all .25s;
}
.lat-doc-card:hover { border-color:var(--rule2); background:var(--panel2); }
.lat-doc-card .lat-kind-chip { padding:7px 8px; border-radius:5px; }
.lat-doc-card-body { flex:1; min-width:0; }
.lat-doc-card-name { font:500 13.5px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lat-doc-card-meta { font:400 10px/1 'IBM Plex Mono',monospace; color:var(--faint); margin-top:4px; }
.lat-doc-dl { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); flex:none; transition:color .2s; display:inline-flex; align-items:center; }
.lat-doc-dl:hover { color:var(--sig); }

/* ---- Header row (screen title + primary action) ---- */
.lat-screen-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }

/* ---- Share modal (report share link) ---- */
.lat-modal {
  position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(4,6,12,0.66);
}
.lat-modal[data-app-modal].is-open, .lat-modal.is-open { display:flex; }
.lat-modal-panel { width:min(460px,100%); background:var(--bg2); border:1px solid var(--rule2); border-radius:14px; padding:22px 24px; }
.lat-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.lat-modal-title { font:600 14px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-modal-close { font:400 18px/1 'Hanken Grotesk',sans-serif; color:var(--faint); background:transparent; border:0; cursor:pointer; }
.lat-modal-row { display:flex; align-items:center; gap:8px; border:1px solid var(--rule2); border-radius:7px; background:var(--panel); padding:7px 8px 7px 11px; }
.lat-modal-row a { flex:1; min-width:0; font:400 11px/1.3 'IBM Plex Mono',monospace; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Report detail ---- */
.lat-report-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.lat-report-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.lat-report-head .lat-h1 { flex:1 1 auto; min-width:0; margin-top:0; }

/* Progress page: the topic is often a long brief, not a short title. Render it
   small and soft so it reads as context and does not dominate the live view. */
.lat-report-head:has(.lat-progress-eyebrow) .lat-h1 { font:500 16px/1.5 'Hanken Grotesk',sans-serif; color:var(--soft); letter-spacing:0; }
/* The run's brief as a quiet pull quote (mirrors the landing subhero
   card): long objectives read as a soft signal-washed card instead of a
   sprawling heading. Same slot and flex behavior as lat-h1; the modifier
   overrides only the voice and the wash. Sits after (and outweighs) the
   progress-page h1 rule above, which otherwise wins the font. */
.lat-report-head .lat-h1.lat-brief-quote {
  font:500 13.5px/1.6 'Hanken Grotesk',sans-serif;
  color:var(--soft);
  letter-spacing:0;
  max-width:76ch;
  padding:14px 20px 15px;
  border-radius:12px;
  background:linear-gradient(to right, var(--sigsoft), transparent 88%);
}
.lat-report-eyebrow { display:inline-flex; align-items:center; gap:8px; font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--sig); }
.lat-report-head-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:none; flex-wrap:wrap; }
.lat-report-head-actions form { display:inline-flex; }
.lat-report-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; margin-top:26px; align-items:start; }
.lat-report-frame { border:1px solid var(--rule); border-radius:12px; background:var(--bg2); overflow:hidden; }
.lat-report-iframe { width:100%; height:70vh; min-height:520px; border:0; display:block; background:var(--bg2); }
.lat-report-side { display:flex; flex-direction:column; gap:18px; }
.lat-panel { border:1px solid var(--rule); border-radius:10px; background:var(--panel); padding:18px; }
.lat-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.lat-share-on { display:inline-flex; align-items:center; gap:6px; font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--sig); }
.lat-share-on .dot { width:5px; height:5px; border-radius:50%; background:var(--sig); box-shadow:0 0 6px var(--glow); }
.lat-share-off { font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); }
.lat-share-box { display:flex; align-items:center; gap:8px; border:1px solid var(--rule2); border-radius:7px; background:var(--bg2); padding:7px 8px 7px 11px; }
.lat-share-box .lat-share-url { flex:1; min-width:0; max-width:none; }
.lat-share-ops { display:flex; align-items:center; gap:18px; margin-top:12px; }
.lat-share-ops form { display:inline; }
.lat-share-op { font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--soft); background:transparent; border:0; cursor:pointer; transition:color .2s; }
.lat-share-op:hover { color:var(--sig); }
.lat-share-op.is-danger:hover { color:var(--rose); }
.lat-share-note { font:400 10.5px/1.45 'Hanken Grotesk',sans-serif; color:var(--faint); margin-top:12px; }
.lat-report-management .lat-panel-head { margin-bottom:0; }
.lat-request-title { font:600 13px/1.35 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-request-materials { border-top:1px solid var(--rule); }
.lat-request-material { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--rule); }
.lat-request-material:last-child { border-bottom:0; padding-bottom:0; }
.lat-request-material-main { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.lat-request-material-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 10.5px/1.25 'Hanken Grotesk',sans-serif; color:var(--soft); }
.lat-request-material-actions { display:flex; align-items:center; gap:9px; flex:none; }
.lat-request-material-actions form { display:inline; }
.lat-panel-rows > div { display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.lat-panel-rows > div + div { border-top:1px solid var(--rule); }
.lat-panel-rows .k { font:400 13px/1 'Hanken Grotesk',sans-serif; color:var(--soft); }
.lat-panel-rows .v { font:500 14px/1 'Hanken Grotesk',sans-serif; color:var(--ink); }

/* ---- Progress / live pipeline (the heart) ---- */
.lat-progress-bar { height:2px; background:var(--rule); margin-top:10px; }
.lat-progress-fill { position:relative; height:2px; min-width:16px; max-width:100%; background:var(--sig); opacity:.6; box-shadow:0 0 5px var(--glow); transition:width .9s cubic-bezier(.4,0,.2,1); }
.lat-progress-runner { position:absolute; right:-11px; bottom:-8px; width:24px; height:18px; display:block; color:var(--sig); }
.lat-progress-runner svg { width:24px; height:18px; display:block; overflow:visible; filter:drop-shadow(0 0 4px var(--glow)); }
.lat-progress-orbit { fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; transform-box:view-box; transform-origin:12px 9px; }
.lat-progress-orbit-outer { opacity:.72; }
.lat-progress-orbit-inner { opacity:.48; }
.lat-progress-core { fill:currentColor; transform-box:view-box; transform-origin:12px 9px; }
.lat-progress-bar:not(.is-live) .lat-progress-orbit { opacity:.3; }
.lat-progress-bar.is-live .lat-progress-orbit-outer { animation:latSignalOrbit 2.4s linear infinite; }
.lat-progress-bar.is-live .lat-progress-orbit-inner { animation:latSignalOrbitReverse 1.8s linear infinite; }
.lat-progress-bar.is-live .lat-progress-core { animation:latSignalPulse 2s ease-in-out infinite; }
@keyframes latSignalOrbit { to { transform:rotate(360deg); } }
@keyframes latSignalOrbitReverse { to { transform:rotate(-360deg); } }
@keyframes latSignalPulse { 0%,100% { transform:scale(.9); opacity:.82; } 50% { transform:scale(1.12); opacity:1; } }
.lat-progress-bar.is-live .lat-progress-fill { animation:latBarPulse 2.8s ease-in-out infinite; }
@keyframes latBarPulse { 0%,100% { opacity:.48; } 50% { opacity:.78; } }
.lat-progress-bar.is-failed .lat-progress-fill { background:var(--rose); box-shadow:none; }
.lat-progress-bar.is-failed .lat-progress-runner { color:var(--rose); }
.lat-progress-bar.is-failed .lat-progress-runner svg { filter:none; }
.lat-progress-eyebrow { display:inline-flex; align-items:center; gap:8px; font:500 11px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--sig); }
.lat-progress-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--sig); box-shadow:0 0 8px var(--glow); animation:drwBlink 1.3s infinite; flex:none; }
.lat-progress-sub { font:400 13px/1.4 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:9px; }

.lat-stage-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.lat-stage-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--rule); border-radius:20px; }
.lat-stage-txt { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--faint); }
.lat-stage-ic { width:6px; height:6px; border-radius:50%; border:1px solid var(--faint); flex:none; display:inline-flex; align-items:center; justify-content:center; }
.lat-stage-chip[data-state="complete"] .lat-stage-ic { width:auto; height:auto; border:0; font:600 9px/1 'IBM Plex Mono',monospace; color:var(--soft); }
.lat-stage-chip[data-state="complete"] .lat-stage-ic::before { content:"\2713"; }
.lat-stage-chip[data-state="complete"] .lat-stage-txt { color:var(--soft); }
.lat-stage-chip[data-state="current"] .lat-stage-ic { border:0; background:var(--sig); box-shadow:0 0 8px var(--glow); animation:drwBlink 1.3s infinite; }
.lat-stage-chip[data-state="current"] .lat-stage-txt { color:var(--sig); }
.lat-stage-chip[data-state="attention"] .lat-stage-ic { border:0; background:var(--rose); }
.lat-stage-chip[data-state="attention"] .lat-stage-txt { color:var(--rose); }

.lat-progress-counts { display:grid; grid-template-columns:repeat(4,1fr); margin-top:28px; }
.lat-progress-counts > div { display:flex; flex-direction:column; align-items:center; gap:5px; }
.lat-progress-counts > div span { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--soft); }
.lat-progress-counts > div span.hl { color:var(--sig); }
.lat-progress-counts > div strong { font:500 30px/1 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-progress-counts > div strong.lat-count-soft { font:500 14px/1 'IBM Plex Mono',monospace; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; align-self:center; margin-top:9px; }

.lat-graph { position:relative; margin-top:8px; }

.lat-focal { margin-top:16px; border:1px solid var(--rule); border-radius:10px; background:var(--panel); padding:20px 22px; }
.lat-focal-tag { display:inline-flex; align-items:center; gap:8px; font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--sig); margin-bottom:16px; }
.lat-focal-tag .dot { width:6px; height:6px; border-radius:50%; background:var(--sig); box-shadow:0 0 8px var(--glow); animation:drwBlink 1.3s infinite; }
.lat-focal-label { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--sig); margin-bottom:14px; }
.lat-skeleton { display:flex; flex-direction:column; gap:9px; }
.lat-skeleton span { height:7px; border-radius:3px; background:var(--panel2); display:block; }
.lat-skeleton span:first-child { height:8px; }
.lat-check-row { display:flex; align-items:center; gap:10px; font:400 13.5px/1.4 'Hanken Grotesk',sans-serif; color:var(--ink); margin-top:12px; }
.lat-check-row:first-of-type { margin-top:0; }
.lat-check-row .ic { width:16px; height:16px; border-radius:50%; border:1px solid var(--sig); display:flex; align-items:center; justify-content:center; font:600 8px/1 'IBM Plex Mono',monospace; color:var(--sig); flex:none; }
.lat-check-row .ic.live { border-color:var(--faint); }
.lat-check-row .ic.live .dot { width:5px; height:5px; border-radius:50%; background:var(--sig); animation:drwBlink 1.3s infinite; }

.lat-ready-card { margin-top:16px; border:1px solid var(--sig); border-radius:10px; background:var(--sigsoft); padding:18px 22px; display:flex; align-items:center; gap:14px; }
.lat-ready-cta { margin-left:auto; flex:none; }
/* Three gentle glow pulses on arrival, then the static glow rests. The
   resting style equals the final state, so reduced motion loses nothing. */
.lat-ready-ic { width:34px; height:34px; border-radius:50%; border:1.5px solid var(--sig); box-shadow:0 0 18px var(--glow); display:flex; align-items:center; justify-content:center; color:var(--sig); font:600 14px/1 'IBM Plex Mono',monospace; flex:none; animation:drwReadyGlow 2.2s ease-in-out 3; }
@keyframes drwReadyGlow { 0%,100% { box-shadow:0 0 18px var(--glow); } 50% { box-shadow:0 0 32px var(--glow), 0 0 10px var(--glow); } }
@media (prefers-reduced-motion: reduce) { .lat-ready-ic { animation:none; } }
.lat-ready-title { font:600 16px/1.2 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-ready-sub { font:400 12px/1.3 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:4px; }

.lat-readout { display:flex; align-items:center; gap:12px; margin-top:14px; padding:13px 16px; border:1px solid var(--rule); border-radius:8px; background:var(--panel); }
.lat-readout .dot { width:6px; height:6px; border-radius:50%; background:var(--sig); box-shadow:0 0 8px var(--glow); animation:drwBlink 1.3s infinite; flex:none; }
.lat-readout span:last-child { font:400 13px/1.4 'Hanken Grotesk',sans-serif; color:var(--soft); }

/* failure / stopped pipeline state */
.lat-progress-eyebrow.is-failed { color:var(--rose); }
/* stalled: an active run with no recent observed activity (AI-308) — amber,
   dot stops pulsing so the page no longer implies live progress */
.lat-progress-eyebrow.is-stalled { color:var(--amber); }
.lat-progress-eyebrow.is-stalled .dot { background:var(--amber); box-shadow:none; animation:none; }
.lat-readout.is-failed { border-color:var(--rose); }
.lat-readout.is-failed .dot { background:var(--rose); box-shadow:none; animation:none; }

/* ---- Live pipeline: animated stage-chip connectors + breathing active chip ---- */
.lat-stage-chips { align-items:center; }
.lat-stage-link { flex:0 0 auto; width:20px; height:1.5px; border-radius:2px; background:var(--rule); align-self:center; position:relative; overflow:hidden; }
.lat-stage-chip[data-state="complete"] + .lat-stage-link { background:color-mix(in srgb, var(--sig) 55%, var(--rule)); }
.lat-stage-link:has(+ .lat-stage-chip[data-state="current"]) { background:var(--rule2); }
.lat-stage-link:has(+ .lat-stage-chip[data-state="current"])::after { content:""; position:absolute; top:0; left:0; height:100%; width:45%; border-radius:2px; background:linear-gradient(90deg, transparent, var(--sig), transparent); animation:drwRail 1.5s linear infinite; }
@keyframes drwRail { 0% { transform:translateX(-120%); } 100% { transform:translateX(320%); } }
.lat-stage-chip[data-state="current"] { border-color:var(--sig); animation:drwChipBreath 2.4s ease-in-out infinite; }
@keyframes drwChipBreath { 0%,100% { box-shadow:0 0 0 0 rgba(95,230,184,0); } 50% { box-shadow:0 0 14px 0 rgba(95,230,184,.3); } }

/* ---- Live activity feed ---- */
.lat-activity { margin-top:22px; border:1px solid var(--rule); border-radius:12px; background:var(--panel); overflow:hidden; }
.lat-activity-live { display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--rule); font:500 13.5px/1.45 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-activity-live .dot { width:7px; height:7px; border-radius:50%; background:var(--sig); box-shadow:0 0 10px var(--glow); animation:drwBlink 1.3s infinite; flex:none; }
.lat-activity-live.is-failed { color:var(--rose); }
.lat-activity-live.is-failed .dot { background:var(--rose); box-shadow:none; animation:none; }
.lat-activity-head { display:flex; align-items:center; justify-content:space-between; padding:12px 18px 2px; }
.lat-activity-head .lat-section-label { margin:0; }
.lat-activity-count { font:500 10px/1 'IBM Plex Mono',monospace; color:var(--faint); }
.lat-activity-feed { list-style:none; margin:0; padding:0; max-height:360px; overflow-y:auto; }
.lat-activity-item { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--rule); }
.lat-activity-item:last-child { border-bottom:0; }
.lat-activity-item .lat-kind-chip { flex:none; }
/* Event-derived activity beat: a kind-colored dot + label. progress=mint,
   adapt=amber (the system recovering), attention=rose (a beat that did not
   complete), done=mint. */
.lat-activity-dot { width:7px; height:7px; border-radius:50%; background:var(--sig); box-shadow:0 0 8px var(--glow); flex:none; }
.lat-activity-item[data-kind="adapt"] .lat-activity-dot { background:var(--amber); box-shadow:0 0 8px rgba(232,192,106,.45); }
.lat-activity-item[data-kind="attention"] .lat-activity-dot { background:var(--rose); box-shadow:none; }
.lat-activity-item[data-kind="done"] .lat-activity-dot { background:var(--sig2); }
.lat-activity-item[data-kind="attention"] .lat-activity-title { color:var(--soft); }
.lat-activity-n { font:500 10px/1 'IBM Plex Mono',monospace; color:var(--faint); flex:none; }
.lat-activity-title { flex:1; min-width:0; font:500 13px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lat-activity-title a { color:inherit; }
.lat-activity-empty { padding:15px 18px; font:400 13px/1.4 'Hanken Grotesk',sans-serif; color:var(--faint); }
.lat-activity-item.is-new { animation:drwFeedIn .6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes drwFeedIn { 0% { opacity:0; transform:translateY(-10px); box-shadow:inset 3px 0 0 0 var(--sig); } 55% { box-shadow:inset 3px 0 0 0 var(--sig); } 100% { opacity:1; transform:none; box-shadow:inset 0 0 0 0 transparent; } }
.lat-fail-card { margin-top:16px; border:1px solid var(--rose); border-radius:10px; background:var(--panel); padding:18px 22px; display:flex; align-items:center; gap:14px; }
.lat-fail-ic { width:34px; height:34px; border-radius:50%; border:1.5px solid var(--rose); display:flex; align-items:center; justify-content:center; color:var(--rose); font:600 17px/1 'IBM Plex Mono',monospace; flex:none; }
.lat-fail-title { font:600 16px/1.2 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-fail-sub { font:400 12.5px/1.4 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:4px; }
.lat-progress-note { font:400 12px/1.4 'Hanken Grotesk',sans-serif; color:var(--faint); margin-top:12px; }

@media (max-width: 900px) {
  .lat-report-head { flex-direction:column; }
  .lat-report-head > div:first-child { width:100%; }
  .lat-report-head-actions { width:100%; justify-content:flex-start; }
  .lat-report-grid { grid-template-columns:1fr; }
  .lat-progress-counts { grid-template-columns:repeat(2,1fr); }
  .lat-two-col { grid-template-columns:1fr; }
  .lat-docs-grid { grid-template-columns:1fr; }
  .lat-card-grid { grid-template-columns:1fr; }
  .lat-reports-headrow, .lat-reports-row { grid-template-columns:1fr auto; gap:8px; }
  .lat-reports-headrow span:not(:first-child):not(.end), .lat-reports-row > *:nth-child(2), .lat-reports-row > *:nth-child(3), .lat-reports-row > *:nth-child(4) { display:none; }
  .lat-nav { display:none; }
}

@media (max-width: 600px) {
  .lat-report-toolbar { flex-direction:column; align-items:stretch; gap:14px; margin-bottom:20px; }
  .lat-report-toolbar > .lat-btn-ghost { align-self:flex-start; }
  .lat-report-head-actions { display:grid; grid-template-columns:1fr; gap:8px; }
  .lat-report-head-actions form { display:block; }
  .lat-report-head-actions .lat-btn { width:100%; justify-content:center; }
  .lat-report-head .lat-h1 { overflow-wrap:anywhere; }
  .lat-report-grid { display:flex; flex-direction:column; gap:16px; margin-top:20px; }
  .lat-report-side { display:contents; }
  .lat-report-export-panel { order:1; }
  .lat-report-frame { order:2; }
  .lat-report-side > .lat-panel:not(.lat-report-export-panel) { order:3; }
  .lat-report-iframe { height:52vh; min-height:360px; }
}

/* ============================ intake flow ============================ */
.lat-stepper { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:22px 0 32px; }
.lat-stepper span { display:inline-flex; align-items:center; gap:7px; font:500 10px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); }
.lat-stepper span::before { content:""; width:6px; height:6px; border-radius:50%; border:1px solid var(--faint); }
.lat-stepper span[data-current="true"] { color:var(--sig); }
.lat-stepper span[data-current="true"]::before { background:var(--sig); border-color:var(--sig); box-shadow:0 0 8px var(--glow); }

.lat-mode-intro { font:400 14.5px/1.6 'Hanken Grotesk'; color:var(--soft); max-width:60ch; margin:12px 0 0; }
.lat-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
.lat-mode-card { display:block; border:1px solid var(--rule); border-radius:12px; background:var(--panel); padding:24px; text-decoration:none; transition:border-color .25s, box-shadow .25s; }
.lat-mode-card:hover { border-color:var(--sig); box-shadow:0 0 26px var(--sigsoft); }
.lat-mode-ic { width:22px; height:22px; display:block; overflow:visible; margin-bottom:16px; }
.lat-mode-ic .bar { fill:var(--brand); }
.lat-mode-title { font:600 17px/1.2 'Hanken Grotesk'; color:var(--ink); }
.lat-mode-desc { font:400 13px/1.5 'Hanken Grotesk'; color:var(--soft); margin:8px 0 0; }
.lat-mode-go { font:500 10px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; color:var(--sig); margin-top:18px; }

.lat-advanced-strip { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:22px; border:1px solid var(--rule); border-radius:12px; background:var(--panel); padding:18px 22px; }
.lat-advanced-strip p { font:400 13px/1.5 'Hanken Grotesk'; color:var(--soft); margin:0; max-width:64ch; }

.lat-form { margin-top:6px; }
.lat-form-intro { font:400 14px/1.6 'Hanken Grotesk'; color:var(--soft); margin:10px 0 22px; max-width:64ch; }
.lat-label { display:block; font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.1em; color:var(--soft); margin:22px 0 9px; }
.lat-input, .lat-textarea, .lat-select { display:block; width:100%; box-sizing:border-box; border:1px solid var(--rule); border-radius:10px; background:var(--panel); padding:12px 14px; font:400 14px/1.6 'Hanken Grotesk'; color:var(--ink); transition:border-color .2s; }
.lat-input:focus, .lat-textarea:focus, .lat-select:focus { outline:none; border-color:var(--sig); }
.lat-textarea { resize:vertical; min-height:128px; }
.lat-help { font:400 12px/1.5 'Hanken Grotesk'; color:var(--faint); margin:8px 0 0; }
.lat-field-error { font:500 12px/1.5 'Hanken Grotesk'; color:var(--rose); margin:8px 0 0; }
.lat-file { position:relative; display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px dashed var(--rule2); border-radius:10px; background:var(--panel); padding:15px 18px; transition:border-color .25s, background .25s; }
.lat-file:hover { border-color:var(--sig); background:var(--sigsoft); }
.lat-file input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.lat-file-btn { font:500 10px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; color:var(--btnink); background:var(--sig); padding:10px 14px; border-radius:6px; }
.lat-file-name { font:400 12px/1.4 'IBM Plex Mono'; color:var(--soft); }
.lat-form-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px; }
.lat-form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

@media (max-width:720px) {
  .lat-mode-grid { grid-template-columns:1fr; }
  .lat-advanced-strip { flex-direction:column; align-items:flex-start; }
  .lat-form-row { grid-template-columns:1fr; }
}

/* intake: clarify + preview cards */
.lat-intake-card { border:1px solid var(--rule); border-radius:12px; background:var(--panel); padding:20px 22px; margin-top:18px; }
.lat-intake-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.lat-mono-label { display:block; font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.1em; color:var(--soft); margin-bottom:6px; }
.lat-chat { display:flex; flex-direction:column; gap:12px; }
.lat-chat-you, .lat-chat-ergo { max-width:82%; border:1px solid var(--rule); padding:12px 15px; }
.lat-chat-you { align-self:flex-end; border-radius:12px 12px 4px 12px; background:var(--sigsoft); border-color:var(--rule2); }
.lat-chat-ergo { align-self:flex-start; border-radius:12px 12px 12px 4px; background:var(--panel2); }
.lat-chat-who { display:block; font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:5px; }
.lat-chat p { margin:0; font:400 13.5px/1.5 'Hanken Grotesk'; color:var(--ink); }
.lat-diag-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lat-diag-title strong { font:600 15px/1.3 'Hanken Grotesk'; color:var(--ink); }
.lat-diag-summary { font:400 13.5px/1.6 'Hanken Grotesk'; color:var(--soft); margin:10px 0 0; }
.lat-diag-sec { margin-top:14px; }
.lat-diag-sec p { margin:0 0 4px; font:400 13px/1.5 'Hanken Grotesk'; color:var(--soft); }

/* intake: preview / confirm — legacy preview classes restyled under the Lattice shell */
.lat-shell .list-heading { margin:22px 0 10px; }
.lat-shell .list-heading > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lat-shell .list-heading span { font:500 10px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; color:var(--brand); }
.lat-shell .list-heading strong { font:600 15px/1.3 'Hanken Grotesk'; color:var(--ink); }
.lat-shell .request-launch-rationale { font:400 13.5px/1.55 'Hanken Grotesk'; color:var(--soft); margin:8px 0 0; }
.lat-shell .request-launch-summary { font:400 13.5px/1.55 'Hanken Grotesk'; color:var(--ink); margin:6px 0 0; max-width:76ch; }
.lat-shell .request-builder-notes { margin-top:12px; border-top:1px solid var(--rule); padding-top:10px; }
.lat-shell .request-builder-notes > summary { font:500 11px/1.4 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--soft); cursor:pointer; }
.lat-shell .request-builder-notes > summary:hover { color:var(--sig); }
.lat-shell .request-builder-notes .request-launch-rationale { max-width:86ch; }
.lat-shell .request-launch-note { font:400 12.5px/1.5 'Hanken Grotesk'; color:var(--faint); margin:8px 0 0; }
.lat-shell .pill { font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.06em; color:var(--sig); border:1px solid var(--rule2); padding:5px 9px; border-radius:5px; }

.lat-shell .request-plan { border:1px solid var(--rule); border-radius:12px; background:var(--panel); padding:20px 22px; margin-top:18px; }
.lat-shell .request-plan-head span { display:block; font:500 11px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.06em; color:var(--sig); }
.lat-shell .request-plan-head p { font:400 13px/1.55 'Hanken Grotesk'; color:var(--soft); margin:8px 0 0; max-width:64ch; }
.lat-shell .request-plan-block { margin-top:20px; }
.lat-shell .request-plan-label { display:block; font:500 10px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); margin-bottom:11px; }
.lat-shell .request-plan-lenses { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lat-shell .request-plan-lenses > li { position:relative; border:1px solid var(--rule); border-radius:10px; background:var(--panel2); padding:14px 34px 14px 16px; }
.lat-shell .request-plan-lenses strong { display:block; font:600 14px/1.25 'Hanken Grotesk'; color:var(--ink); }
.lat-shell .request-plan-lenses span { display:block; font:400 12px/1.45 'Hanken Grotesk'; color:var(--soft); margin-top:5px; }
.lat-shell .request-plan-skip { position:absolute; top:12px; right:12px; margin:0; }
.lat-shell .request-plan-skip input { accent-color:var(--sig); width:15px; height:15px; cursor:pointer; }
.lat-shell .request-plan-details { margin-top:14px; border-top:1px solid var(--rule); padding-top:12px; }
.lat-shell .request-plan-details summary { font:500 11px/1.4 'IBM Plex Mono'; color:var(--soft); cursor:pointer; }
.lat-shell .request-plan-details summary:hover { color:var(--sig); }
.lat-shell .request-plan-questions, .lat-shell .request-plan-sources, .lat-shell .request-plan-gaps { list-style:none; margin:11px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.lat-shell .request-plan-questions li, .lat-shell .request-plan-gaps li { position:relative; padding-left:14px; font:400 12.5px/1.45 'Hanken Grotesk'; color:var(--soft); }
.lat-shell .request-plan-questions li::before, .lat-shell .request-plan-gaps li::before { content:"·"; position:absolute; left:0; color:var(--sig); }
.lat-shell .request-plan-sources li { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font:400 12.5px/1.45 'Hanken Grotesk'; color:var(--soft); }
.lat-shell .request-plan-sources strong { font:500 13px/1.3 'Hanken Grotesk'; color:var(--ink); }
.lat-shell .request-plan-priority { font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; color:var(--sig); border:1px solid var(--rule2); padding:3px 6px; border-radius:4px; }
.lat-shell .request-plan-outline { list-style:none; margin:11px 0 0; padding:0; counter-reset:sec; display:flex; flex-direction:column; gap:10px; }
.lat-shell .request-plan-outline > li { counter-increment:sec; position:relative; padding-left:30px; }
.lat-shell .request-plan-outline > li::before { content:counter(sec,decimal-leading-zero); position:absolute; left:0; top:2px; font:500 11px/1.5 'IBM Plex Mono'; color:var(--sig); }
.lat-shell .request-plan-outline strong { font:600 13.5px/1.3 'Hanken Grotesk'; color:var(--ink); }
.lat-shell .request-plan-outline > li > span { display:block; font:400 12px/1.4 'Hanken Grotesk'; color:var(--soft); margin-top:3px; }
.lat-shell .request-plan-outline ul { list-style:none; margin:6px 0 0; padding:0; }
.lat-shell .request-plan-outline ul li { font:400 11.5px/1.4 'Hanken Grotesk'; color:var(--faint); }
.lat-shell .request-plan-heading-input { display:block; width:100%; box-sizing:border-box; border:1px solid transparent; border-radius:6px; background:transparent; padding:4px 6px; margin-left:-6px; font:600 13.5px/1.3 'Hanken Grotesk'; color:var(--ink); }
.lat-shell .request-plan-heading-input:hover { border-color:var(--rule); }
.lat-shell .request-plan-heading-input:focus { outline:none; border-color:var(--sig); background:var(--panel2); }

.lat-shell .request-details-disclosure { margin-top:20px; border:1px solid var(--rule); border-radius:12px; background:var(--panel); padding:16px 20px; }
.lat-shell .request-details-disclosure > summary { font:500 11px/1.4 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.06em; color:var(--soft); cursor:pointer; }
.lat-shell .request-details-disclosure > summary:hover { color:var(--sig); }
.lat-shell .request-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.lat-shell .request-preview-field { display:flex; flex-direction:column; gap:7px; }
.lat-shell .request-preview-field[data-wide="true"] { grid-column:1 / -1; }
.lat-shell .request-preview-field > span { font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); }
.lat-shell .request-preview-field input, .lat-shell .request-preview-field textarea, .lat-shell .request-preview-field select { width:100%; box-sizing:border-box; border:1px solid var(--rule); border-radius:8px; background:var(--panel2); padding:10px 12px; font:400 13.5px/1.5 'Hanken Grotesk'; color:var(--ink); }
.lat-shell .request-preview-field textarea { resize:vertical; }
.lat-shell .request-preview-field input:focus, .lat-shell .request-preview-field textarea:focus, .lat-shell .request-preview-field select:focus { outline:none; border-color:var(--sig); }
.lat-shell .field-error, .lat-shell .form-error { font:500 12px/1.5 'Hanken Grotesk'; color:var(--rose); margin:6px 0 0; display:block; font-style:normal; }
.lat-shell .form-notice { font:400 12.5px/1.5 'Hanken Grotesk'; color:var(--sig); margin:6px 0 0; }
.lat-shell .request-preview-meta { display:flex; flex-wrap:wrap; gap:26px; margin-top:18px; }
.lat-shell .request-preview-meta span { display:block; font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); }
.lat-shell .request-preview-meta p { font:500 13px/1.3 'Hanken Grotesk'; color:var(--ink); margin:5px 0 0; }

.lat-shell .request-diagnosis { margin-top:18px; }
.lat-shell .request-diagnosis-section { margin-top:14px; }
.lat-shell .request-diagnosis-section > span { display:block; font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:6px; }
.lat-shell .request-diagnosis-section p { font:400 13px/1.5 'Hanken Grotesk'; color:var(--soft); margin:0 0 4px; }
.lat-shell .request-diagnosis-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lat-shell .request-diagnosis-title strong { font:600 15px/1.3 'Hanken Grotesk'; color:var(--ink); }
.lat-shell .request-diagnosis-summary { font:400 13.5px/1.6 'Hanken Grotesk'; color:var(--soft); margin:10px 0 0; }
.lat-shell .normalized-brief { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.lat-shell .normalized-brief > div > span { display:block; font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:5px; }
.lat-shell .normalized-brief p { font:400 13.5px/1.5 'Hanken Grotesk'; color:var(--soft); margin:0 0 4px; }

.lat-shell .form-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px; }
.lat-shell .form-actions button, .lat-shell .form-actions .secondary-action, .lat-shell .form-actions .action-secondary { font:500 11px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.06em; border-radius:7px; padding:11px 16px; cursor:pointer; border:1px solid var(--rule2); background:transparent; color:var(--soft); text-decoration:none; }
.lat-shell .form-actions button[value="confirm"] { background:var(--sig); border-color:var(--sig); color:var(--btnink); }
.lat-shell .form-actions button[value="confirm"]:hover { box-shadow:0 0 22px var(--glow); }
.lat-shell .form-actions button:hover, .lat-shell .form-actions .secondary-action:hover, .lat-shell .form-actions .action-secondary:hover { border-color:var(--sig); color:var(--sig); }
.lat-shell .form-actions .request-discard { color:var(--rose); }
.lat-shell .form-actions .request-discard:hover { border-color:var(--rose); color:var(--rose); }

@media (max-width:720px) {
  .lat-shell .request-plan-lenses { grid-template-columns:1fr; }
  .lat-shell .request-preview-grid { grid-template-columns:1fr; }
}

/* intake: building interstitial */
.lat-building { border:1px solid var(--rule); border-radius:14px; background:var(--panel); padding:26px 26px 24px; margin-top:22px; }
.lat-building-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lat-building-topic { font:600 16px/1.3 'Hanken Grotesk'; color:var(--ink); }
.lat-building-dots { display:flex; gap:7px; margin:22px 0; }
.lat-building-dots b { width:7px; height:7px; border-radius:50%; background:var(--sig); opacity:.32; animation:drwBlink 1.3s infinite; }
.lat-building-dots b:nth-child(2) { animation-delay:.16s; }
.lat-building-dots b:nth-child(3) { animation-delay:.32s; }
.lat-building-dots b:nth-child(4) { animation-delay:.48s; }
.lat-building-dots b:nth-child(5) { animation-delay:.64s; }
.lat-building-status { font:500 14px/1.5 'Hanken Grotesk'; color:var(--ink); margin:0; }
.lat-building-note { font:400 12.5px/1.55 'Hanken Grotesk'; color:var(--faint); margin:10px 0 0; max-width:62ch; }
.lat-discard { color:var(--rose); border-color:transparent; }
.lat-discard:hover { border-color:var(--rose); color:var(--rose); }

/* settings / profile */
.lat-profile-top { margin-top:24px; }
.lat-balance-card { border:1px solid var(--rule); border-radius:12px; background:var(--panel); padding:18px 22px; margin-top:22px; }
.lat-balance-amt { display:block; font:600 26px/1.1 'Hanken Grotesk'; color:var(--sig); margin-top:6px; }
.lat-balance-reserved { color:var(--amber); }
.lat-balance-card p { font:400 12.5px/1.4 'Hanken Grotesk'; color:var(--soft); margin:6px 0 0; }
.lat-profile-id { display:flex; align-items:center; gap:14px; }
.lat-avatar { width:44px; height:44px; border-radius:50%; background:var(--avatar-bg,var(--panel2)); color:#0b0c10; display:flex; align-items:center; justify-content:center; font:600 15px/1 'Hanken Grotesk'; flex:none; }
.lat-profile-name { font:600 17px/1.2 'Hanken Grotesk'; color:var(--ink); }
.lat-profile-email { font:400 12.5px/1.3 'Hanken Grotesk'; color:var(--faint); margin-top:3px; }
.lat-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:18px 0 0; }
.lat-account-facts { grid-template-columns:1fr; }
.lat-facts dt { font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.1em; color:var(--soft); }
.lat-facts dd { font:400 13.5px/1.4 'Hanken Grotesk'; color:var(--ink); margin:6px 0 0; }
/* The user-agreement fact spans the full row so the acknowledgement date
   sits on one line, with the version on its own line directly below. */
.lat-facts .lat-fact-agreement { grid-column:1 / -1; }
.lat-agreement-ver { display:block; margin-top:5px; }
/* Generic padded content row inside a .lat-section frame (settings surfaces). */
.lat-section-row { border-top:1px solid var(--rule); padding:15px 18px 18px; }
.lat-section-row[data-allowed="false"] .lat-access-state { color:var(--rose); }
.lat-balance-note { font:400 12.5px/1.4 'Hanken Grotesk',sans-serif; color:var(--soft); margin:6px 0 0; }
/* Funding card (profile): the account's money controls sit inside the
   signal-washed treatment — balance, Stripe top-up, and promo-code
   redemption as one quiet surface. It fills the section body edge to
   edge under the header (the section's overflow:hidden clips it to the
   rounded corners), and the wash emanates from the top-left corner so
   the balance reads over the densest green. */
.lat-funding-card {
  padding:16px 18px 18px;
  border-top:1px solid var(--rule);
  background:linear-gradient(to bottom right, var(--sigsoft), transparent 82%);
}
.lat-funding-row { margin-top:14px; }
.lat-funding-label { margin-top:0; }
.lat-funding-controls { display:flex; gap:8px; align-items:center; }
.lat-funding-controls .lat-input,
.lat-funding-controls .lat-select { flex:1 1 auto; min-width:0; }
/* Uniform button column so both rows leave the input the same width —
   the labels differ ("Add credit" vs "Redeem") but the column does not. */
.lat-funding-controls .lat-btn { flex:none; min-width:116px; justify-content:center; }
.lat-funding-hint { font:400 11.5px/1.4 'Hanken Grotesk',sans-serif; color:var(--soft); margin:6px 0 0; }
.lat-ident { display:flex; align-items:center; gap:10px; margin-top:14px; font:400 12.5px/1.4 'Hanken Grotesk',sans-serif; color:var(--faint); }
.lat-ident-name { color:var(--ink); font-weight:500; }
.lat-access-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.lat-access-card { border:1px solid var(--rule); border-radius:10px; background:var(--panel); padding:15px 16px; }
.lat-access-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lat-access-state { font:500 9px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.06em; color:var(--sig); }
.lat-access-card[data-allowed="false"] .lat-access-state { color:var(--rose); }
.lat-access-msg { font:400 12px/1.45 'Hanken Grotesk'; color:var(--soft); margin:9px 0 0; }
.lat-access-stack { display:flex; flex-direction:column; gap:12px; }
@media (max-width:720px) { .lat-facts, .lat-access-grid { grid-template-columns:1fr; } }

/* saved-library tables restyled under the Lattice shell */
.lat-shell .artifacts-panel, .lat-shell .run-overview-panel { border:1px solid var(--rule); border-radius:12px; background:var(--panel); padding:18px 20px; margin-top:18px; }
.lat-shell table { width:100%; border-collapse:collapse; margin-top:6px; }
.lat-shell thead th { text-align:left; font:500 9px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); padding:0 12px 10px; border-bottom:1px solid var(--rule); }
.lat-shell tbody td { padding:12px; border-bottom:1px solid var(--rule); font:400 13px/1.4 'Hanken Grotesk',sans-serif; color:var(--ink); vertical-align:top; }
.lat-shell tbody tr:last-child td { border-bottom:0; }
.lat-shell .source-meta { font:400 11.5px/1.4 'Hanken Grotesk',sans-serif; color:var(--faint); margin:4px 0 0; }
.lat-shell .empty-state { font:400 13px/1.5 'Hanken Grotesk',sans-serif; color:var(--soft); padding:14px 0; }
.lat-shell .control-action { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--sig); border:1px solid var(--rule2); padding:8px 12px; border-radius:6px; }
.lat-shell .control-action:hover { border-color:var(--sig); }
.lat-shell .inline-action-form { display:inline; }
.lat-shell .inline-action-form button { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--soft); background:transparent; border:1px solid var(--rule2); padding:7px 11px; border-radius:6px; cursor:pointer; }
.lat-shell .inline-action-form button:hover { border-color:var(--sig); color:var(--sig); }
/* The legacy inline-action-form hover above outranks .lat-inline-btn.is-danger:hover
   (0,3,1 vs 0,3,0), which silently turned the dashboard's Dismiss hover mint.
   Re-assert the danger tone at higher specificity. */
.lat-shell .inline-action-form button.is-danger:hover { border-color:var(--rose); color:var(--rose); }

/* login / auth */
.lat-auth { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:40px 20px; }
.lat-auth .lat-parent-footer { width:min(520px,100%); margin:0; padding-bottom:0; }
.lat-auth-card { width:min(400px,100%); border:1px solid var(--rule); border-radius:16px; background:var(--panel); padding:34px 32px; }
.lat-auth-brand { display:flex; align-items:center; gap:11px; margin-bottom:24px; }
.lat-auth-brand .lat-wordmark { font:700 20px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color:var(--ink); letter-spacing:0.005em; }
.lat-auth-h1 { font:600 22px/1.2 'Hanken Grotesk',sans-serif; color:var(--ink); letter-spacing:-.015em; margin:0; }
.lat-auth-lead { font:400 13.5px/1.55 'Hanken Grotesk',sans-serif; color:var(--soft); margin:10px 0 0; }
.lat-auth-form { margin-top:22px; }
.lat-auth-form .lat-label:first-child { margin-top:0; }
.lat-auth-divider { display:flex; align-items:center; gap:12px; margin:22px 0; font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); }
.lat-auth-divider::before, .lat-auth-divider::after { content:""; flex:1; height:1px; background:var(--rule); }
.lat-oauth { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.lat-oauth-btn { display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--rule2); border-radius:9px; background:var(--panel2); padding:12px 16px; font:500 13px/1 'Hanken Grotesk',sans-serif; color:var(--ink); transition:border-color .2s; }
.lat-oauth-btn:hover { border-color:var(--sig); }
.lat-oauth-btn svg { width:18px; height:18px; flex:none; }

/* ---- Notebooks (ADR-0029 staging surface) ----
   Layout only: all controls reuse the canonical .lat-input/.lat-textarea/
   .lat-select/.lat-label/.lat-btn/.lat-inline-btn language. */
.lat-nb-section-form { border-top:1px solid var(--rule); padding:15px 18px 18px; display:flex; flex-direction:column; gap:10px; }
.lat-nb-add-block { border-top:1px solid var(--rule); padding:15px 18px; }
.lat-nb-cells { display:flex; flex-direction:column; }
.lat-nb-cell { border-top:1px solid var(--rule); padding:15px 18px; }
.lat-nb-cell-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.lat-nb-cell-actions { display:flex; gap:6px; }
.lat-nb-cell-body { font:400 13px/1.6 'Hanken Grotesk',sans-serif; color:var(--ink); white-space:pre-wrap; overflow-wrap:break-word; }
.lat-nb-cell-source-title { font:500 13.5px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-nb-cell-url { display:inline-block; font:400 11px/1.4 'IBM Plex Mono',monospace; color:var(--sig); margin:4px 0; overflow-wrap:anywhere; }
.lat-nb-cell-edit { margin-top:8px; }
.lat-nb-cell-edit summary, .lat-nb-add-block summary { cursor:pointer; font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.lat-nb-cell-edit summary:hover, .lat-nb-add-block summary:hover { color:var(--sig); }
.lat-nb-cell-form { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.lat-nb-cell-form .lat-form-actions { margin-top:2px; }
.lat-nb-head-actions { display:flex; gap:10px; align-items:center; flex:none; }
/* New-notebook wizard: two panels on a sliding track inside the section form. */
.lat-nb-steps { overflow:hidden; }
.lat-nb-step-track { display:flex; width:200%; transition:transform .38s cubic-bezier(.4,0,.2,1); }
.lat-nb-step-track[data-step="2"] { transform:translateX(-50%); }
.lat-nb-step { width:50%; flex:none; display:flex; flex-direction:column; gap:10px; padding-right:2px; }

/* ---- Launch mode (AI-361): the one user-facing depth control, and it
   lives in exactly one place — the preview step, beside the launch
   actions, because it modifies what launching means. Brief preparation
   is identical in both modes; Scan only changes run execution. ---- */
.lat-launch-mode {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px;
  border:1px solid var(--rule); border-radius:10px; padding:13px 16px;
}
.lat-launch-mode-label { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); flex:none; }
.lat-launch-mode-opt { display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.lat-launch-mode-opt input { accent-color:var(--sig); width:14px; height:14px; cursor:pointer; }
.lat-launch-mode-opt span { font:400 13px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); }
.lat-launch-mode .lat-tip { margin-left:auto; flex:none; }

/* ---- Tooltip (first-class device; use .lat-tip with data-tip anywhere) ---- */
.lat-tip {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  border:1px solid var(--rule2); color:var(--faint);
  font:500 9px/1 'IBM Plex Mono',monospace;
  vertical-align:1px; margin-left:6px; cursor:help; position:relative;
  text-transform:none; letter-spacing:0;
}
.lat-tip:hover, .lat-tip:focus-visible { color:var(--sig); border-color:var(--sig); outline:none; }
.lat-tip::after {
  content:attr(data-tip);
  position:absolute; left:-4px; top:calc(100% + 9px);
  width:max-content; max-width:280px;
  background:var(--bg2); color:var(--ink);
  border:1px solid var(--rule2); border-radius:8px;
  padding:9px 12px;
  font:400 11.5px/1.5 'Hanken Grotesk',sans-serif;
  text-transform:none; letter-spacing:0; text-align:left; white-space:normal;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transition:opacity .16s ease;
  pointer-events:none; z-index:50;
}
.lat-tip:hover::after, .lat-tip:focus-visible::after { opacity:1; visibility:visible; }

/* The delivered-report card is the run page's payoff moment: a mild signal
   fill on its title band and signal borders on its actions lift it above
   neighboring sections without shouting. */
.lat-section.is-report-ready .lat-col-head { background:var(--sigsoft); }
.lat-section.is-report-ready .lat-inline-btn { border-color:var(--sig); }
.lat-section.is-report-ready .lat-inline-btn:hover { border-color:var(--sig2); color:var(--sig); }

/* ---- Live pipeline visualization (AI-321) ---- */
/* The stage-keyed ledger above the activity feed on the live progress page:
   the SEE reel's vocabulary (mono tags, verdict glyphs, eased counters)
   rebuilt from Lattice tokens and driven by real run rows. Row identity is
   data-key (poll diff streams new rows in with the shared feed-in rise);
   the big counters animate via data-count in progress-poll.js. */
.lat-viz { margin-top:22px; border:1px solid var(--rule); border-radius:12px; background:var(--panel); overflow:hidden; }
.lat-viz-head { display:flex; align-items:center; gap:10px; padding:13px 18px 11px; border-bottom:1px solid var(--rule); }
.lat-viz-head .dot { width:7px; height:7px; border-radius:50%; background:var(--sig); box-shadow:0 0 10px var(--glow); animation:drwBlink 1.3s infinite; flex:none; }
.lat-viz-head .lat-section-label { margin:0; }
.lat-viz-feed { list-style:none; margin:0; padding:0; }
.lat-viz-row { display:flex; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid var(--rule); }
.lat-viz-row:last-child { border-bottom:0; }
.lat-viz-tag { flex:none; min-width:58px; font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.08em; color:var(--sig); }
.lat-viz-label { flex:1; min-width:0; font:400 12.5px/1.45 'Hanken Grotesk',sans-serif; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lat-viz-note { flex:none; font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.08em; }
/* Verdict states: ok=check mint, partial=amber, refuted=copper flag,
   muted=faint context, pending/active=blinking working dot. */
.lat-viz-row[data-state="ok"] .lat-viz-note:empty::before { content:"\2713"; color:var(--sig); font-size:11px; }
.lat-viz-row[data-state="partial"] .lat-viz-note { color:var(--amber); }
.lat-viz-row[data-state="partial"] .lat-viz-note:empty::before { content:"\25D1"; color:var(--amber); }
.lat-viz-row[data-state="refuted"] .lat-viz-note { color:var(--brand); }
.lat-viz-row[data-state="refuted"] .lat-viz-tag { color:var(--brand); }
.lat-viz-row[data-state="muted"] .lat-viz-note { color:var(--faint); }
.lat-viz-row[data-state="muted"] .lat-viz-label { color:var(--faint); }
.lat-viz-row[data-state="pending"] .lat-viz-note:empty::before,
.lat-viz-row[data-state="active"] .lat-viz-note:empty::before { content:"\00B7\00B7\00B7"; color:var(--faint); letter-spacing:2px; }
.lat-viz-row[data-state="active"] .lat-viz-tag { animation:drwBlink 1.3s infinite; }
.lat-viz-row.is-new { animation:drwFeedIn .6s cubic-bezier(.2,.7,.3,1) both; }
.lat-viz-counts { display:flex; gap:34px; padding:13px 18px 15px; border-top:1px solid var(--rule); }
.lat-viz-counts > div { display:flex; align-items:baseline; gap:9px; }
.lat-viz-counts strong { font:600 22px/1 'Hanken Grotesk',sans-serif; color:var(--ink); font-variant-numeric:tabular-nums; }
.lat-viz-counts span { font:500 10px/1.3 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }

/* ---- Collapsible section (native details/summary) ---- */
/* First use: Selected sources on the run progress page, collapsed by
   default to conserve space; the count keeps the section informative
   without expansion. */
.lat-fold > summary { cursor:pointer; user-select:none; }
.lat-fold > summary::-webkit-details-marker { display:none; }
.lat-fold > summary { list-style:none; }
.lat-fold-head { display:flex; align-items:center; gap:10px; }
.lat-fold-n { font:500 10px/1 'IBM Plex Mono',monospace; color:var(--faint); margin-left:auto; }
.lat-fold-caret { width:7px; height:7px; border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint); transform:rotate(-45deg); transition:transform 160ms ease; flex:none; }
.lat-fold[open] .lat-fold-caret { transform:rotate(45deg); }
.lat-fold > summary:hover .lat-fold-caret, .lat-fold > summary:focus-visible .lat-fold-caret { border-color:var(--ink); }

/* ---- Discovery bowtie diagram (AI-321, sources stage) ---- */
/* Queries fan out to candidates; candidates distill to sources captured
   in full. One static shape connects the stage's three units (review
   2026-07-05: arcs read as decoration; three counters read as unrelated
   numbers). Counts ease via progress-poll countTo. */
.lat-viz-fan { padding:12px 18px 8px; border-bottom:1px solid var(--rule); }
.lat-viz-fan svg { display:block; width:min(560px, 100%); margin:0 auto; }
.lat-viz-fan .fan-flow { fill:url(#fan-flow-wash); stroke:color-mix(in srgb, var(--sig) 22%, var(--rule2)); stroke-width:0.8; }
.lat-viz-fan[data-active] .fan-flow { stroke:color-mix(in srgb, var(--sig) 50%, var(--rule2)); }
.lat-viz-fan .fan-bar { fill:color-mix(in srgb, var(--sig) 45%, var(--soft)); transition:y .5s ease, height .5s ease; }
.lat-viz-fan .fan-bar.is-pool { fill:color-mix(in srgb, var(--sig) 75%, var(--soft)); }
.lat-viz-fan .fan-bar.is-kept { fill:var(--sig); }
.lat-viz-fan .fan-count { font:600 17px 'Hanken Grotesk',sans-serif; fill:var(--ink); font-variant-numeric:tabular-nums; }
.lat-viz-fan .fan-label { font:500 7.5px 'IBM Plex Mono',monospace; letter-spacing:.14em; fill:var(--faint); }
/* Stage verbs sit at the vertical center of their flow ribbons (midY=76
   is constant in the server geometry), each in its own voice: expansion
   in signal mint, distillation in brand copper. */
.lat-viz-fan .fan-verb { font:500 8px 'IBM Plex Mono',monospace; letter-spacing:.1em; }
.lat-viz-fan .fan-verb-out { fill:color-mix(in srgb, var(--sig) 82%, var(--faint)); }
.lat-viz-fan .fan-verb-in { fill:color-mix(in srgb, var(--brand) 85%, var(--faint)); }

/* ---- User agreement (AI-323) ---- */
.lat-agreement-points { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
.lat-agreement-points li { font:400 13.5px/1.55 'Hanken Grotesk',sans-serif; color:var(--soft); padding-left:18px; position:relative; }
.lat-agreement-points li::before { content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:2px; background:var(--sig); opacity:.7; }
.lat-agreement-fine { font:500 10px/1.5 'IBM Plex Mono',monospace; letter-spacing:.06em; color:var(--faint); margin:12px 0 0; }

/* ---- Collapsible section (operator console): native <details> whose <summary>
   is the section header band. Additive — only <details class="lat-section">
   opts in, so customer surfaces are unaffected. ---- */
details.lat-section > summary { list-style:none; cursor:pointer; }
details.lat-section > summary::-webkit-details-marker { display:none; }
details.lat-section > summary:hover { background:var(--panel2); }
.lat-section-count { display:inline-flex; align-items:center; gap:9px; font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; color:var(--faint); }
.lat-caret { display:inline-block; font:500 13px/1 'IBM Plex Mono',monospace; color:var(--faint); transition:transform .2s ease; }
details.lat-section[open] > summary .lat-caret { transform:rotate(90deg); }
/* compact inline number input for row-level actions (e.g. member grant amount) */
.lat-inline-input { width:78px; box-sizing:border-box; border:1px solid var(--rule2); border-radius:6px; background:transparent; color:var(--ink); padding:7px 9px; font:500 11px/1 'IBM Plex Mono',monospace; }
.lat-inline-input:focus { outline:none; border-color:var(--sig); }

/* ---- Pragmatic containment: run-detail operator panels not yet migrated to
   Lattice (source-acquisition toolkit + artifacts-export) get the Lattice
   section frame + a mono section label, and their control.css submit buttons
   are neutralized to outline actions. Their dense internals stay as functional
   operator machinery. Additive + scoped to .lat-shell; only the remaining
   .control-list.review-panel operator panels opt in. ---- */
.lat-shell .control-list.review-panel {
  margin:20px 0 0;
  background:transparent;
  border:1px solid var(--rule);
  border-left:1px solid var(--rule);
  border-radius:12px;
}
.lat-shell .control-list.review-panel > .list-heading span:first-child,
.lat-shell .control-list.review-panel > h2,
.lat-shell .control-list.review-panel > h3 {
  font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0; color:var(--brand);
}
.lat-shell .control-list.review-panel > .list-heading strong {
  font:500 12px/1 'IBM Plex Mono',monospace; color:var(--faint); margin:0;
}
.lat-shell .control-list.review-panel button {
  font:500 10px/1 'IBM Plex Mono',monospace !important; text-transform:uppercase; letter-spacing:0;
  color:var(--soft); background:transparent; border:1px solid var(--rule2);
  padding:8px 12px; border-radius:6px; cursor:pointer; box-shadow:none;
}
.lat-shell .control-list.review-panel button:hover { border-color:var(--sig); color:var(--sig); }

/* ---- Preview Request (customer /request preview step) refinements
   (2026-07-10): the candidate draft carries the same green wash as the
   run page's brief banner (.lat-brief-quote) so the proposed brief and
   the running brief read as one object across steps; both preview
   panels get interior padding (headings were flush against the frame);
   and the intake CTA colors the button neutralizer above outranked by
   source order are re-asserted — Launch as is keeps the reserved mint
   fill (research-intake CTA policy), Discard keeps rose. ---- */
.lat-shell .control-list.review-panel.request-assistant-panel {
  background:linear-gradient(to right, var(--sigsoft), transparent 88%);
  padding:18px 20px 20px;
}
.lat-shell .control-list.review-panel.claims-panel { padding:18px 20px 20px; }
.lat-shell .control-list.review-panel.request-assistant-panel > .list-heading,
.lat-shell .control-list.review-panel.claims-panel > .list-heading { margin:0 0 10px; }
.lat-shell .control-list.review-panel .form-actions button[value="confirm"] {
  background:var(--sig); border-color:var(--sig); color:var(--btnink);
}
.lat-shell .control-list.review-panel .form-actions button[value="confirm"]:hover {
  box-shadow:0 0 22px var(--glow); border-color:var(--sig); color:var(--btnink);
}
.lat-shell .control-list.review-panel .form-actions .request-discard { color:var(--rose); }
.lat-shell .control-list.review-panel .form-actions .request-discard:hover { border-color:var(--rose); color:var(--rose); }

/* ---- Users page (/control/users) status badges: a UNIQUE color per status so
   the list is fast to scan and filter by eye. accepted stays green; every other
   status gets its own distinct hue (legible on both themes). Scoped to the Users
   screen so customer pills are unaffected. (operator feedback 2026-07-07) ---- */
.users-screen .lat-pill { color:var(--soft); }
.users-screen .lat-pill[data-state="accepted"] { color:#1FA971; }  /* green  */
.users-screen .lat-pill[data-state="active"]   { color:#12A594; }  /* teal   */
.users-screen .lat-pill[data-state="pending"]  { color:#C99A2E; }  /* amber  */
.users-screen .lat-pill[data-state="invited"]  { color:#3D8BD4; }  /* blue   */
.users-screen .lat-pill[data-state="new"]      { color:#8A73E6; }  /* violet */
.users-screen .lat-pill[data-state="declined"] { color:#D6556E; }  /* rose   */
.users-screen .lat-pill[data-state="revoked"]  { color:#DE3C42; }  /* red    */
.users-screen .lat-pill[data-state="expired"]  { color:#7C8698; }  /* slate  */
.users-screen .lat-pill[data-state="disabled"] { color:#A67C52; }  /* taupe  */

/* ---- Operator console: roomier section/row padding than the customer app so
   the denser operator lists and cards breathe instead of crowding their
   borders (operator feedback 2026-07-07). Scoped to .operator-shell; customer
   and requester surfaces keep the tighter spacing. ---- */
.operator-shell .lat-section .lat-mini-card,
.operator-shell .lat-section .lat-report-card { padding:18px 24px; }
.operator-shell .lat-col-head { padding:16px 24px 15px; }
.operator-shell .lat-nb-section-form { padding:16px 24px 20px; }
.operator-shell .lat-section .lat-empty { padding-left:24px; padding-right:24px; }

/* ---- Collapsible section header: place the count next to the title (not on the
   far right) with a white number; the caret stays muted. (operator feedback
   2026-07-07) ---- */
.operator-shell details.lat-section > summary { justify-content:flex-start; gap:11px; }
.operator-shell details.lat-section > summary .lat-section-count { color:var(--ink); }
.operator-shell details.lat-section > summary .lat-caret { color:var(--faint); }