/* ============================================================================
   DocOps design system
   ----------------------------------------------------------------------------
   One file, one definition per component, in dependency order:

     1  tokens          colour, type, space, radius, elevation, motion
     2  base            reset, document typography, focus, utilities
     3  primitives      button, badge/status, card, panel, row, alert, empty
     4  forms           inputs that share one geometry, type-aware
     5  shell           header, navigation, page container, tabs
     6  surfaces        auth, projects, project, brain, chat, settings,
                        diagnostics, wizard, dialogs, errors
     7  responsive      three breakpoints: 1080, 860, 600
     8  motion          entrances and the reduced-motion contract

   Values come from the token scales below. A raw pixel value in this file is a
   deliberate optical correction, not a shortcut.
   ========================================================================= */

/* ---- 1  tokens ----------------------------------------------------------- */
:root{
 /* Brand ramp. 600 is the light-mode brand and clears 4.5:1 on white; 300 is
    the dark-mode brand and clears 7:1 on the dark surface. */
 --p-50:#f6f3fe;--p-100:#ece4fd;--p-200:#d8caf9;--p-300:#bda6f3;--p-400:#9b78e9;
 --p-500:#8058d9;--p-600:#6a45c4;--p-700:#57369f;--p-800:#44297b;--p-900:#2d1b52;

 --bg:#f8f7fb;--bg-elevated:#fbfafd;--surface:#fff;--surface-raised:#fff;
 --surface-sunken:#f1eff7;--overlay:rgba(24,19,36,.46);
 --ink:#1b1825;--ink-soft:#3d3849;--muted:#5f5a6c;--faint:#6f6a7c;
 --line:#e6e2ee;--line-strong:#d2ccdf;--track:#e9e5f1;

 --brand:var(--p-600);--brand-hover:var(--p-700);--brand-pressed:var(--p-800);
 --brand-tint:var(--p-50);--brand-tint-strong:var(--p-100);--selected:var(--p-100);
 --on-brand:#fff;--on-danger:#fff;
 --focus:#4f2f9b;--focus-glow:rgba(106,69,196,.22);

 --success:#1c7a51;--success-bg:#e7f6ee;--warning:#8a5a0b;--warning-bg:#fcf2e1;
 --danger:#b03340;--danger-bg:#fdeef0;--info:#1c6cb0;--info-bg:#e9f3fd;

 --code-bg:#211d2b;--code-ink:#ece7f6;--code-line:#3a3348;

 /* Type. Eight steps; nothing in the product may invent a ninth. */
 --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
 --t-display:2rem;--t-title:1.5rem;--t-subtitle:1.1875rem;--t-lead:1.0625rem;
 --t-body:.9375rem;--t-sm:.875rem;--t-xs:.8125rem;--t-2xs:.75rem;
 --lh-tight:1.14;--lh-snug:1.32;--lh-normal:1.5;--lh-relaxed:1.62;
 /* One conversation row, and every conversation row. Stated once so a
  * hover or a selection cannot change it and move the list under the
  * pointer. */
 --conversation-row:36px;
 --track-tight:-.022em;--track-wide:.055em;

 /* Space. 4px base; only these values appear below. */
 --sp-05:2px;--sp-1:4px;--sp-15:6px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
 --sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;

 --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;

 --shadow-1:0 1px 2px rgba(28,20,45,.06);
 --shadow-2:0 6px 20px rgba(31,22,52,.09),0 1px 2px rgba(31,22,52,.05);
 --shadow-3:0 22px 60px rgba(26,18,44,.2),0 2px 8px rgba(26,18,44,.08);

 --control:38px;--tap:44px;--header:60px;
 --page-max:1120px;--reading:68ch;--form-max:640px;

 --ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
 --fast:120ms;--normal:200ms;

 font-family:var(--font);font-size:15px;line-height:var(--lh-normal);
 color:var(--ink);background:var(--bg);color-scheme:light;
 -webkit-text-size-adjust:100%
}
:root[data-resolved-theme="dark"]{
 --bg:#121017;--bg-elevated:#171420;--surface:#1a1722;--surface-raised:#211d2b;
 --surface-sunken:#15121c;--overlay:rgba(0,0,0,.66);
 --ink:#f2eff7;--ink-soft:#cdc6d8;--muted:#a49dae;--faint:#948d9f;
 --line:#2e2938;--line-strong:#453d54;--track:#2b2635;
 --brand:var(--p-300);--brand-hover:#cdbcf7;--brand-pressed:var(--p-400);
 --brand-tint:#241d34;--brand-tint-strong:#2e2543;--selected:#2e2543;
 --on-brand:#1a1226;--on-danger:#2a1015;
 --focus:#cbb6f8;--focus-glow:rgba(189,166,243,.26);
 --success:#6fd0a0;--success-bg:#15291f;--warning:#e9bd6a;--warning-bg:#2c2417;
 --danger:#f08a92;--danger-bg:#31181c;--info:#79b9ef;--info-bg:#14242f;
 --code-bg:#221d2d;--code-ink:#ece7f6;--code-line:#3a3348;
 --shadow-1:0 1px 2px rgba(0,0,0,.3);
 --shadow-2:0 8px 26px rgba(0,0,0,.34);
 --shadow-3:0 26px 66px rgba(0,0,0,.5);
 color-scheme:dark
}

/* ---- 2  base ------------------------------------------------------------- */
*,*:before,*:after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
 font-synthesis-weight:none;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0 0 auto;height:420px;z-index:-1;pointer-events:none;
 background:radial-gradient(1100px 380px at 78% -140px,color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3,h4{font-weight:600;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:var(--track-tight)}
h2{font-size:var(--t-title);line-height:var(--lh-snug);letter-spacing:-.014em}
h3{font-size:var(--t-subtitle);line-height:var(--lh-snug);letter-spacing:-.008em}
h4{font-size:var(--t-body);line-height:var(--lh-snug)}
p{overflow-wrap:break-word}
code,pre,kbd{font-family:var(--mono)}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse}
::selection{background:color-mix(in srgb,var(--brand) 26%,transparent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
:root[data-resolved-theme="dark"] :focus-visible{outline-width:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--sp-4);top:-6rem;z-index:60;display:flex;align-items:center;
 min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-sm);
 background:var(--surface);box-shadow:var(--shadow-2);font-weight:600}
.skip:focus{top:var(--sp-4)}
.hidden{display:none!important}
.mono{font-family:var(--mono)}

/* Text roles. Everything quiet in the product uses one of these three. */
.lead{font-size:var(--t-lead);line-height:var(--lh-relaxed);color:var(--muted);max-width:62ch}
.meta,.muted,.fine{color:var(--muted);font-size:var(--t-xs);line-height:var(--lh-normal)}
.eyebrow{display:block;font-size:var(--t-2xs);font-weight:600;letter-spacing:var(--track-wide);
 text-transform:uppercase;color:var(--muted)}
.meta-tag{display:inline-flex;align-items:center;color:var(--muted);font-size:var(--t-xs)}
.meta-tag.mono{font-family:var(--mono);font-size:var(--t-2xs)}
.meta-tag+.meta-tag:before{content:"·";margin:0 var(--sp-15);color:var(--line-strong)}
.warn{color:var(--warning)}

/* ---- 3  primitives ------------------------------------------------------- */
/* Buttons: three weights plus a destructive variant. One primary per group.
   The variants are scoped to real controls, because `success`/`warning`/`danger`
   are also the status vocabulary: an unscoped `.danger` was stretching status
   dots to the control height. */
button.primary,button.secondary,button.ghost,button.danger,.button{
 --btn-bg:transparent;--btn-ink:var(--ink);--btn-line:transparent;
 appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
 min-height:var(--control);padding:0 var(--sp-4);border:1px solid var(--btn-line);
 border-radius:var(--r-sm);background:var(--btn-bg);color:var(--btn-ink);
 font-size:var(--t-sm);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
 transition:background-color var(--fast),border-color var(--fast),color var(--fast),
  box-shadow var(--fast),transform var(--fast)}
button.primary,.button.primary{--btn-bg:var(--brand);--btn-ink:var(--on-brand);box-shadow:var(--shadow-1)}
button.primary:hover,.button.primary:hover{--btn-bg:var(--brand-hover)}
button.secondary,.button.secondary{--btn-bg:var(--surface);--btn-ink:var(--ink);--btn-line:var(--line-strong)}
button.secondary:hover,.button.secondary:hover{--btn-bg:var(--surface-sunken);
 --btn-line:color-mix(in srgb,var(--brand) 40%,var(--line-strong))}
button.ghost,.button.ghost{--btn-ink:var(--muted);padding-inline:var(--sp-3)}
button.ghost:hover,.button.ghost:hover{--btn-bg:var(--surface-sunken);--btn-ink:var(--ink)}
button.danger,.button.danger{--btn-bg:var(--danger);--btn-ink:var(--on-danger)}
button.danger:hover,.button.danger:hover{filter:brightness(1.06)}
button.danger.ghost,.button.danger.ghost{--btn-bg:transparent;--btn-ink:var(--danger)}
button.danger.ghost:hover,.button.danger.ghost:hover{--btn-bg:var(--danger-bg)}
button.primary:active,button.secondary:active,button.danger:active,button.ghost:active,
.button:active{transform:translateY(1px)}
button:disabled,.button[aria-disabled="true"]{cursor:not-allowed;
 --btn-bg:var(--surface-sunken);--btn-ink:var(--faint);--btn-line:var(--line);box-shadow:none}
button:disabled:active{transform:none}
button[aria-busy="true"]{cursor:progress}
.btn-group{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.control-spinner{width:14px;height:14px;border:2px solid color-mix(in srgb,currentColor 35%,transparent);
 border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite}

/* Status. One vocabulary: neutral, info, running, success, warning, danger. */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);width:max-content;
 padding:var(--sp-05) var(--sp-15);border:1px solid transparent;border-radius:var(--r-xs);
 background:var(--surface-sunken);color:var(--muted);
 font-size:var(--t-2xs);font-weight:600;line-height:1.35;letter-spacing:.01em;white-space:nowrap}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.running,.badge.accent{background:var(--brand-tint);color:var(--brand);
 border-color:color-mix(in srgb,var(--brand) 26%,transparent)}
.badge.success{background:var(--success-bg);color:var(--success)}
.badge.warning{background:var(--warning-bg);color:var(--warning)}
.badge.danger{background:var(--danger-bg);color:var(--danger)}
.badge.critical{background:var(--danger);color:var(--on-danger)}
.badge.strong{border-color:currentColor}
.status-dot{display:inline-block;flex:none;width:7px;height:7px;margin-right:var(--sp-2);
 border-radius:50%;background:var(--faint);vertical-align:baseline}
.status-dot.success{background:var(--success)}
.status-dot.warning{background:var(--warning)}
.status-dot.danger,.status-dot.critical{background:var(--danger)}
.status-dot.running{background:var(--brand);animation:pulse 1.7s var(--ease-out) infinite}

/* Containment. `.card` groups; `.row` separates inside a card; nothing nests. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
 padding:var(--sp-6);box-shadow:var(--shadow-1)}
.cards{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1fr)}
.card-heading{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
 gap:var(--sp-4);margin-bottom:var(--sp-5)}
.card-heading h3{margin-bottom:var(--sp-1)}
.card-heading p{color:var(--muted);font-size:var(--t-sm)}
.rows{display:grid;grid-template-columns:minmax(0,1fr)}
.row,.repo-row,.provenance-row,.file-list>div{display:flex;align-items:center;gap:var(--sp-4);
 justify-content:space-between;padding:var(--sp-3) 0;border-top:1px solid var(--line)}
.rows>:first-child,.row:first-child,.repo-row:first-child,.provenance-row:first-child,
.file-list>div:first-child{border-top:0}
.divider{height:1px;background:var(--line);border:0;margin:var(--sp-6) 0}

.alert{display:grid;gap:var(--sp-1);position:relative;padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-10);
 margin:var(--sp-4) 0;border:1px solid color-mix(in srgb,var(--danger) 26%,transparent);
 border-radius:var(--r-md);background:var(--danger-bg);color:var(--danger);font-size:var(--t-sm)}
.alert:before{content:"!";position:absolute;left:var(--sp-4);top:var(--sp-3);display:grid;
 place-items:center;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;
 font-size:11px;font-weight:700;line-height:1}
.alert b{font-weight:600}
.alert span,.alert a{color:color-mix(in srgb,currentColor 78%,var(--ink))}
.alert a{text-decoration:underline}
.alert.success{background:var(--success-bg);border-color:color-mix(in srgb,var(--success) 26%,transparent);color:var(--success)}
.alert.success:before{content:"✓";border-color:currentColor}
.alert.warning{background:var(--warning-bg);border-color:color-mix(in srgb,var(--warning) 32%,transparent);color:var(--warning)}
.alert.info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 26%,transparent);color:var(--info)}
.alert.info:before{content:"i"}

.empty{display:grid;justify-items:center;gap:var(--sp-2);padding:var(--sp-12) var(--sp-6);
 text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-lg);
 background:color-mix(in srgb,var(--surface) 55%,transparent)}
.empty h2,.empty h3{margin-top:var(--sp-2)}
.empty p{color:var(--muted);max-width:46ch}
.empty .btn-group{margin-top:var(--sp-3)}
.empty.inline{padding:var(--sp-8) var(--sp-5)}

/* Mascots. Inlined so `currentColor` resolves against the page's brand token.
   The body is an *opaque* tint of the brand colour rather than a translucent
   layer: opaque parts can carry their own outline and never show through each
   other, so the thigh sits in front of the belly and the head in front of the
   neck. `--trex-fill` is the strength of that tint. */
.trex{display:block;width:100%;height:auto;color:var(--brand)}
.trex .trex-body{fill:color-mix(in srgb,currentColor calc(var(--trex-fill,.18) * 100%),var(--surface));fill-opacity:1}
.trex .trex-far{fill:color-mix(in srgb,currentColor calc(var(--trex-fill,.18) * 170%),var(--surface))}
.mascot{display:grid;place-items:center;color:var(--brand)}
.mascot .trex{width:100%}
.brand-mark{display:block;height:1em;width:auto;color:var(--brand)}

/* ---- 4  forms ------------------------------------------------------------ */
/* Geometry is applied by input type, so checkbox and radio keep their own size. */
input:not([type]),input[type="text"],input[type="email"],input[type="password"],
input[type="search"],input[type="url"],input[type="number"],select,textarea{
 width:100%;min-height:var(--control);padding:0 var(--sp-3);
 border:1px solid var(--line-strong);border-radius:var(--r-sm);
 background:var(--surface-raised);color:var(--ink);font-size:var(--t-sm);font-weight:400;
 transition:border-color var(--fast),box-shadow var(--fast),background-color var(--fast)}
textarea{padding:var(--sp-3);min-height:96px;line-height:var(--lh-normal);resize:vertical}
select{appearance:none;padding-right:var(--sp-8);
 background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
  linear-gradient(135deg,currentColor 50%,transparent 50%);
 background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
 background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line-strong))}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);
 box-shadow:0 0 0 3px var(--focus-glow)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-sunken);color:var(--muted);cursor:not-allowed}
input[aria-invalid="true"],input.is-invalid{border-color:var(--danger)}
::placeholder{color:var(--faint)}

label{display:block}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);max-width:var(--form-max)}
.stack label,.field{display:grid;gap:var(--sp-15);font-size:var(--t-xs);font-weight:600;color:var(--ink-soft)}
label span,.field span,.field small{font-weight:400;color:var(--muted);font-size:var(--t-xs)}
.field-help{font-size:var(--t-xs);color:var(--muted)}

/* Checkbox and radio are drawn, never stretched by the text-input rule. */
input[type="checkbox"],input[type="radio"]{width:18px;height:18px;min-height:0;margin:0;
 accent-color:var(--brand);flex:none;cursor:pointer}
label.check,.check{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);
 font-size:var(--t-sm);font-weight:500;color:var(--ink-soft);cursor:pointer}
label.check span{font-weight:400}

/* ---- 5  shell ------------------------------------------------------------ */
.top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto 1fr auto;
 align-items:center;gap:var(--sp-5);height:var(--header);
 padding-inline:clamp(var(--sp-4),3.5vw,var(--sp-10));
 border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg-elevated) 88%,transparent);
 backdrop-filter:blur(14px) saturate(1.3)}
.brand{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);
 font-size:var(--t-lead);font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.brand .brand-mark{height:26px;color:var(--brand);transition:transform var(--normal) var(--ease-out)}
.brand:hover .brand-mark{transform:translateX(2px)}
.brand small{display:none}
.top nav{display:flex;gap:var(--sp-05);justify-self:start}
.top nav a{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--sp-3);
 border-radius:var(--r-sm);color:var(--muted);font-size:var(--t-sm);font-weight:500;
 transition:background-color var(--fast),color var(--fast)}
.top nav a:hover{color:var(--ink);background:var(--surface-sunken)}
.top nav a.active{color:var(--ink);background:var(--surface-sunken);font-weight:600}
.utilities{justify-self:end;display:flex;align-items:center;gap:var(--sp-2)}

.account-menu{position:relative}
.account-menu summary{list-style:none;cursor:pointer}
.account-menu summary::-webkit-details-marker{display:none}
.user-control{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);
 padding:0 var(--sp-2);border-radius:var(--r-sm);transition:background-color var(--fast)}
.user-control:hover{background:var(--surface-sunken)}
.avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
 background:var(--brand);color:var(--on-brand);font-size:var(--t-2xs);font-weight:700}
.user-name{font-size:var(--t-sm);font-weight:500;max-width:15ch;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.chevron{color:var(--faint);font-size:var(--t-2xs);transition:transform var(--fast)}
.account-menu[open] .chevron{transform:rotate(180deg)}
.account-popover{position:absolute;right:0;top:calc(100% + var(--sp-2));z-index:40;width:248px;
 padding:var(--sp-1);border:1px solid var(--line);border-radius:var(--r-md);
 background:var(--surface-raised);box-shadow:var(--shadow-3)}
.account-identity{display:grid;gap:var(--sp-05);padding:var(--sp-3);margin-bottom:var(--sp-1);
 border-bottom:1px solid var(--line)}
.account-identity strong{font-size:var(--t-sm)}
.account-identity span{font-size:var(--t-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.account-popover a,.account-popover button{display:flex;align-items:center;justify-content:space-between;
 width:100%;min-height:var(--tap);padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);
 background:transparent;color:var(--ink-soft);font-size:var(--t-sm);font-weight:500;
 text-align:left;cursor:pointer}
.account-popover a:hover,.account-popover button:hover{background:var(--surface-sunken);color:var(--ink)}
.account-popover form{margin-top:var(--sp-1);padding-top:var(--sp-1);border-top:1px solid var(--line)}
.account-popover input{display:none}
.menu-version{color:var(--faint);font-size:var(--t-2xs);font-family:var(--mono)}

.page{max-width:var(--page-max);margin-inline:auto;
 padding:var(--sp-10) clamp(var(--sp-4),3.5vw,var(--sp-10)) var(--sp-20)}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
 gap:var(--sp-4);margin-bottom:var(--sp-8)}
.pagehead>div{min-width:0}
.pagehead h1{margin-bottom:var(--sp-2)}
.pagehead p{color:var(--muted);font-size:var(--t-lead);max-width:56ch}
.sectionhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:var(--sp-4);margin-bottom:var(--sp-5)}
.sectionhead h2{font-size:var(--t-subtitle)}
.sectionhead p{color:var(--muted);font-size:var(--t-sm);margin-top:var(--sp-05)}
.section-intro{margin-bottom:var(--sp-6)}
.section-intro h2{margin-bottom:var(--sp-1)}
.section-intro p{color:var(--muted);font-size:var(--t-sm);max-width:60ch}
.back{display:inline-flex;align-items:center;min-height:var(--tap);margin-bottom:var(--sp-2);
 color:var(--muted);font-size:var(--t-sm)}
.back:hover{color:var(--brand)}

.tabs{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-6);border-bottom:1px solid var(--line);
 overflow-x:auto;scroll-padding-inline:var(--sp-4);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative;display:inline-flex;align-items:center;gap:var(--sp-15);
 min-height:40px;padding:0 var(--sp-3);color:var(--muted);font-size:var(--t-sm);
 font-weight:500;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.active{color:var(--ink);font-weight:600}
.tabs a.active:after{content:"";position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:-1px;
 height:2px;border-radius:2px 2px 0 0;background:var(--brand)}
.tab-pulse{width:6px;height:6px;border-radius:50%;background:var(--brand);
 animation:pulse 1.7s var(--ease-out) infinite}

/* ---- 6  surfaces --------------------------------------------------------- */
/* Authentication ---------------------------------------------------------- */
.auth-shell{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-6)}
.auth-card{overflow:hidden;width:min(100%,880px);display:grid;
 grid-template-columns:minmax(0,.85fr) minmax(0,1fr);border:1px solid var(--line);
 border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-2)}
.auth-card.wide{grid-template-columns:minmax(0,1fr);width:min(100%,600px)}
.auth-aside{--trex-fill:.24;display:grid;align-content:center;justify-items:center;gap:var(--sp-4);
 padding:var(--sp-10) var(--sp-8);text-align:center;border-right:1px solid var(--line);
 background:linear-gradient(165deg,var(--brand-tint-strong),var(--brand-tint) 55%,var(--surface))}
.auth-aside .mascot{width:min(100%,230px)}
.auth-aside p{max-width:30ch;color:var(--muted);font-size:var(--t-sm)}
.auth-form{padding:var(--sp-10) var(--sp-8)}
.auth-card .brand-mark{height:30px;margin-bottom:var(--sp-6)}
.auth-card h1{font-size:var(--t-title);margin-bottom:var(--sp-2)}
.auth-card .lead{font-size:var(--t-sm);margin-bottom:var(--sp-6)}
.auth-card .stack{max-width:none}
.auth-card .primary{width:100%;min-height:var(--tap)}
.auth-card.wide .auth-form{padding:var(--sp-10)}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);
 margin:var(--sp-6) 0}
.choice-grid a{display:grid;gap:var(--sp-1);padding:var(--sp-4);border:1px solid var(--line);
 border-radius:var(--r-md);transition:background-color var(--fast),border-color var(--fast)}
.choice-grid a:hover{background:var(--brand-tint);border-color:var(--p-300)}
.choice-grid b{font-size:var(--t-sm)}
.choice-grid span{font-size:var(--t-xs);color:var(--muted)}

/* Projects ---------------------------------------------------------------- */
/* Projects are an index, not a gallery: one card, one row per project. */
.project-list{display:grid;padding:var(--sp-2);grid-template-columns:minmax(0,1fr)}
.project-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
 gap:var(--sp-4);padding:var(--sp-4);border-radius:var(--r-md);
 transition:background-color var(--fast)}
.project-row+.project-row{box-shadow:0 -1px 0 var(--line)}
.project-row:hover{background:var(--surface-sunken);box-shadow:none}
.project-row:hover+.project-row{box-shadow:none}
.project-row-main{min-width:0;display:grid;gap:var(--sp-05)}
.project-row-main b{font-size:var(--t-body);font-weight:600}
.project-row-desc{color:var(--muted);font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;
 display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.project-row-meta{color:var(--faint);font-size:var(--t-xs);white-space:nowrap}
.project-row .arrow{color:var(--faint);font-size:var(--t-lead);
 transition:transform var(--normal) var(--ease-out),color var(--fast)}
.project-row:hover .arrow{color:var(--brand);transform:translateX(3px)}
.project-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;
 border-radius:var(--r-md);background:var(--brand-tint-strong);color:var(--brand);
 font-size:var(--t-lead);font-weight:700}

/* Project shell ----------------------------------------------------------- */
.project-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.project-identity{min-width:0;flex:1 1 340px}
.project-head h1{font-size:var(--t-title);margin-bottom:var(--sp-1)}
.project-head p{color:var(--muted);font-size:var(--t-sm)}
.project-facts{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-2);
 font-size:var(--t-xs);color:var(--faint)}
.project-facts span+span:before{content:"·";margin-right:var(--sp-3);color:var(--line-strong)}
.project-icon.large-icon{width:44px;height:44px;border-radius:var(--r-md);font-size:var(--t-title)}
.project-primary-action{flex:none;margin-left:auto}
.head-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 gap:var(--sp-2);margin-bottom:var(--sp-5)}
.metric{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);
 background:var(--surface)}
/* Only the metric's own label is a block. A `<span>` nested inside the caption
   (the live-patched file count) inherited this and broke "of 31 indexed" onto
   three lines. */
.metric>span{display:block;font-size:var(--t-xs);color:var(--muted)}
.metric strong{display:block;margin-top:var(--sp-1);font-size:1.375rem;font-weight:650;
 letter-spacing:var(--track-tight);font-variant-numeric:tabular-nums}
.metric small{display:block;margin-top:var(--sp-1);font-size:var(--t-2xs);color:var(--faint)}
/* Six Brain metrics, in rows that divide evenly at every width: 6, 3, 2. The
   auto-fit grid left one card orphaned on its own row at every breakpoint. */
.brain-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}

.inline-activity{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
 margin-bottom:var(--sp-4);border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
 border-radius:var(--r-md);background:var(--brand-tint);font-size:var(--t-sm)}
.inline-activity b{font-weight:600}
.inline-activity span:not(.track-loader):not(.arrow){color:var(--muted)}
.inline-activity .arrow{margin-left:auto;color:var(--brand)}
.track-loader{display:inline-flex;gap:var(--sp-15)}
.track-loader span{width:7px;height:11px;border:2px solid var(--brand);border-radius:60% 40% 55% 45%;
 opacity:.25;transform:rotate(-22deg);animation:tracks 1.4s infinite}
.track-loader span:nth-child(2){animation-delay:.18s;transform:translateY(3px) rotate(20deg)}
.track-loader span:nth-child(3){animation-delay:.36s}

.analysis-notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5);
 border:1px solid color-mix(in srgb,var(--warning) 38%,transparent);border-radius:var(--r-md);
 background:var(--warning-bg)}
.analysis-notice b{font-size:var(--t-sm);color:var(--warning)}
.analysis-notice p{margin-top:var(--sp-1);font-size:var(--t-xs);color:var(--warning)}

/* Project Brain ----------------------------------------------------------- */
.brain-live:empty{display:none}
.brain-live.is-disconnected .analysis-panel{opacity:.75}
.brain-live.is-disconnected .analysis-panel:after{content:"Reconnecting to DocOps…";
 position:absolute;inset-inline:0;bottom:0;padding:var(--sp-15) var(--sp-5);
 background:var(--warning-bg);color:var(--warning);font-size:var(--t-xs)}
.analysis-panel{position:relative;overflow:hidden;display:grid;gap:var(--sp-5);
 padding:var(--sp-5);margin-bottom:var(--sp-5);
 border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));border-radius:var(--r-lg);
 background:var(--surface-raised);box-shadow:var(--shadow-2)}
.analysis-panel:before{content:"";position:absolute;inset-inline:0;top:0;height:2px;
 background:linear-gradient(90deg,transparent,var(--brand),transparent);background-size:220% 100%;
 animation:track-sweep 2.4s linear infinite}
.analysis-panel.queued:before{opacity:.4}
.analysis-head{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--sp-4);
 align-items:center}
.analysis-mascot{display:grid;place-items:center;color:var(--brand)}
.analysis-mascot .trex{width:64px;animation:mascot-breathe 3.6s var(--ease-out) infinite}
.analysis-title h3{font-size:var(--t-subtitle);margin-bottom:var(--sp-05)}
.analysis-context{color:var(--muted);font-size:var(--t-xs)}
.analysis-state{display:grid;gap:var(--sp-1);justify-items:end;text-align:right}
.analysis-timing{display:grid;gap:var(--sp-05);font-size:var(--t-xs);color:var(--ink-soft);
 font-variant-numeric:tabular-nums}
.analysis-timing small{color:var(--faint);font-size:var(--t-2xs)}
.phase-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-05)}
.phase{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;
 gap:var(--sp-3);align-items:start;padding:var(--sp-2) 0}
.phase+.phase:before{content:"";position:absolute;left:10px;top:-6px;width:2px;height:12px;
 background:var(--line)}
.phase-marker{width:14px;height:14px;margin-top:3px;border:2px solid var(--line-strong);
 border-radius:50%;background:var(--surface)}
.phase.complete .phase-marker{border-color:var(--success);background:var(--success)}
.phase.warning .phase-marker{border-color:var(--warning);background:var(--warning)}
.phase.failed .phase-marker{border-color:var(--danger);background:var(--danger)}
.phase.cancelled .phase-marker,.phase.skipped .phase-marker{border-color:var(--faint);background:var(--faint)}
.phase.active .phase-marker{border-color:var(--brand);background:var(--brand);
 animation:pulse 1.6s var(--ease-out) infinite}
.phase-body{min-width:0;display:grid;gap:var(--sp-1)}
.phase-body b{font-size:var(--t-sm);font-weight:600}
.phase.pending .phase-body b{color:var(--muted);font-weight:500}
.phase-detail{font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.phase-state{padding-top:var(--sp-05);font-size:var(--t-2xs);font-weight:600;
 letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--faint);white-space:nowrap}
.phase.active .phase-state{color:var(--brand)}
.phase.complete .phase-state{color:var(--success)}
.phase.warning .phase-state,.phase.cancelled .phase-state,.phase.skipped .phase-state{color:var(--warning)}
.phase.failed .phase-state{color:var(--danger)}
progress{appearance:none;display:block;width:100%;height:6px;border:0;border-radius:var(--r-pill);
 background:var(--track);overflow:hidden}
progress::-webkit-progress-bar{background:var(--track);border-radius:var(--r-pill)}
progress::-webkit-progress-value{background:var(--brand);border-radius:var(--r-pill);
 transition:width var(--normal) var(--ease)}
progress::-moz-progress-bar{background:var(--brand);border-radius:var(--r-pill)}
.phase-progress{max-width:320px}
.analysis-stalled{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
 background:var(--warning-bg);color:var(--warning);font-size:var(--t-xs)}
.analysis-stalled b{display:block;font-weight:600}
.analysis-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.analysis-reassure{max-width:56ch;font-size:var(--t-xs);color:var(--muted)}
.analysis-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
#brain-transition{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
#brain-transition button{margin-left:auto}

.analysis-outcome{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--sp-5);
 align-items:start;margin-bottom:var(--sp-5);border-left:3px solid var(--warning)}
.analysis-outcome.failed{border-left-color:var(--danger)}
/* The coverage card borrows the outcome card's left rule and nothing else: it is
   a statement about the store rather than about a run, so it carries no mascot
   and no attempt reference. `partial` means product source is missing and reads
   as a warning; `notice` means something is missing that is not product source,
   which is worth saying and is not worth alarming anyone about. */
.coverage-state{margin-bottom:var(--sp-5);border-left:3px solid var(--warning)}
.coverage-state.notice{border-left-color:var(--muted)}
.coverage-state code{word-break:break-all}
.outcome-mascot{color:var(--brand)}
.outcome-mascot .trex{width:64px}
.outcome-copy h3{margin:var(--sp-1) 0 var(--sp-3);font-size:var(--t-body);font-weight:600;
 line-height:var(--lh-normal)}
.outcome-facts{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);
 gap:var(--sp-1);margin-bottom:var(--sp-4);
 font-size:var(--t-xs);color:var(--muted)}
.outcome-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.outcome-detail{margin-top:var(--sp-3)}
.diagnostic-mini{list-style:none;display:grid;gap:var(--sp-2);margin-top:var(--sp-3);
 font-size:var(--t-xs);color:var(--ink-soft)}
.diagnostic-mini li{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:baseline}

.brain-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
 gap:var(--sp-3);margin-top:var(--sp-4)}
.provenance-list{display:grid;grid-template-columns:minmax(0,1fr)}
.provenance-row b{display:block;font-size:var(--t-sm);overflow-wrap:anywhere}
.provenance-row p{display:flex;flex-wrap:wrap;gap:var(--sp-15);align-items:center;
 margin-top:var(--sp-1);font-size:var(--t-xs);color:var(--muted)}
.coverage-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
.coverage-list li{display:grid;grid-template-columns:104px minmax(0,1fr) 52px;gap:var(--sp-3);
 align-items:center;font-size:var(--t-xs)}
.coverage-label{color:var(--ink-soft);text-transform:capitalize}
.coverage-label .badge{text-transform:none;margin-left:var(--sp-1)}
.coverage-bar{height:6px}
.coverage-bar::-webkit-progress-value{background:color-mix(in srgb,var(--brand) 78%,transparent)}
.coverage-bar::-moz-progress-bar{background:color-mix(in srgb,var(--brand) 78%,transparent)}
.coverage-value{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.coverage-languages{display:flex;flex-wrap:wrap;gap:var(--sp-15);margin-top:var(--sp-4)}
.coverage-languages .meta-tag{padding:var(--sp-05) var(--sp-2);border-radius:var(--r-xs);
 background:var(--surface-sunken)}
.coverage-languages .meta-tag+.meta-tag:before{content:none}

.brain-empty{--trex-fill:.22;display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--sp-8);
 align-items:center;justify-items:start;text-align:left}
.brain-empty .trex{width:150px}
.brain-empty h3{margin:var(--sp-1) 0}
.brain-empty p{margin-bottom:var(--sp-3);max-width:52ch}

.history-panel,.knowledge-browser{margin-top:var(--sp-5);padding:0}
.history-panel>summary,.knowledge-browser>summary{display:flex;flex-wrap:wrap;gap:var(--sp-3);
 align-items:baseline;justify-content:space-between;padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-5);
 cursor:pointer;list-style:none;font-size:var(--t-sm)}
.history-panel>summary small,.knowledge-browser>summary small{color:var(--faint);font-size:var(--t-xs)}
.history-panel[open]>summary,.knowledge-browser[open]>summary{border-bottom:1px solid var(--line)}
.history-scroll{overflow-x:auto;padding:0 var(--sp-5) var(--sp-5)}
.history-table{width:100%;min-width:520px;font-size:var(--t-xs)}
.history-table th{padding:var(--sp-3) var(--sp-3) var(--sp-2) 0;text-align:left;
 font-size:var(--t-2xs);font-weight:600;letter-spacing:var(--track-wide);
 text-transform:uppercase;color:var(--faint)}
.history-table td{padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;border-top:1px solid var(--line);
 vertical-align:top}
.attempt-note{display:block;font-size:var(--t-2xs);color:var(--faint)}
.count{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 var(--sp-15);
 border-radius:var(--r-pill);background:var(--surface-sunken);color:var(--muted);
 font-size:var(--t-2xs);font-weight:600;font-variant-numeric:tabular-nums}
.knowledge-filter{padding:var(--sp-4) var(--sp-5) 0;font-size:var(--t-xs);color:var(--muted)}
.knowledge-browser .file-list{max-height:460px;overflow:auto;padding:var(--sp-2) var(--sp-5) var(--sp-5)}
.knowledge-browser .fine{padding:0 var(--sp-5) var(--sp-4)}
.file-list>div{font-size:var(--t-xs)}
.file-list code{color:var(--ink-soft);overflow-wrap:anywhere}
.file-list span{color:var(--faint);white-space:nowrap}

/* Documentation ----------------------------------------------------------- */
.document{max-width:none}
/* Rendered through the same allow-listed Markdown path as an answer, so the
   overview reads as a document rather than as a wall of raw `#` and `-`. */
.document .doc-content{margin-top:var(--sp-4);padding:var(--sp-5) var(--sp-6);border-radius:var(--r-md);
 background:var(--surface-sunken);color:var(--ink-soft);font-size:var(--t-sm)}
.document .doc-content h1{font-size:var(--t-subtitle);margin-top:0}
.document .doc-content h2{font-size:var(--t-lead);margin-top:1.6em}

/* Chat -------------------------------------------------------------------- */
/* The single row must be `minmax(0,1fr)`. With an auto row, `.chat-main`'s
   height resolves against its own content, the row grows past the container,
   and the composer is pushed below the fold. */
.chat-page{display:grid;grid-template-columns:264px minmax(0,1fr);grid-template-rows:minmax(0,1fr);
 height:calc(100dvh - var(--header));overflow:hidden}
/* The list scrolls, not the sidebar. With the whole column scrolling, a long
 * enough list pushed "New conversation" and the grounding note below the fold,
 * so the control for starting a conversation was only reachable by scrolling
 * past every existing one. */
.chat-side{display:flex;flex-direction:column;gap:var(--sp-2);min-height:0;
 padding:var(--sp-5) var(--sp-4);border-right:1px solid var(--line);
 background:var(--bg-elevated);overflow:hidden}
/* The sidebar's own heading only. The delete-chat dialog lives inside the
   sidebar and its title was inheriting this eyebrow treatment. */
.chat-side>h2{font-size:var(--t-2xs);font-weight:600;letter-spacing:var(--track-wide);
 text-transform:uppercase;color:var(--faint);margin:var(--sp-3) var(--sp-2) var(--sp-1)}
.chat-side .full{width:100%}
/* `min-content` rows, and a row that states its own height.
 *
 * A row is `overflow:hidden` so a long title can end in an ellipsis, and that
 * makes its automatic minimum size *zero* rather than its content -- so as a
 * grid item in a height-constrained sidebar it was shrunk to its own padding.
 * Measured with a hundred conversations: tracks of 16px for content needing
 * 35.7px, a content box of 0 under `border-box`, and every title painted over
 * the row beneath it. Three conversations were fine, which is why this appeared
 * only once the list filled up, and `max-height:none` did not help, because the
 * constraint comes from the page grid rather than from the cap.
 *
 * Both halves are deliberate: `min-content` rows stop the track collapsing, and
 * the row height token keeps every row the same height whatever its state, so
 * hover and selection cannot move the list under the pointer.
 *
 * `flex:1 1 auto` with `min-height:0` replaces `max-height:38vh`: the list takes
 * the space the sidebar has left after the actions below it, at any viewport
 * height, rather than a fraction of the viewport that has nothing to do with
 * what else is in the column. */
.conversation-list{display:grid;grid-auto-rows:min-content;gap:var(--sp-05);
 flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.conversation-list .conversation{display:block;min-height:var(--conversation-row);
 padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
 color:var(--ink-soft);font-size:var(--t-sm);line-height:var(--lh-relaxed);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The row is the grid item; the anchor fills it and the menu overlays its right
 * edge. Nothing here may change the row's height: `--conversation-row` and the
 * anchor's own `min-height` are what stop a row being shrunk below its text, and
 * a second box in the flow would have re-opened exactly that. */
.conversation-list .conversation-row{position:relative;display:block;
 min-height:var(--conversation-row);
 /* A grid item's automatic minimum width is its min-content width, and a row of
  * `nowrap` text has no smaller min-content than the whole title -- so the track
  * grew to fit every title and nothing was ever truncated. The same reason
  * `min-height:0` is on the list above. */
 min-width:0}
.conversation-list .conversation-row .conversation{padding-right:var(--sp-8)}
.row-menu{position:absolute;top:0;right:0;height:100%;display:flex;
 align-items:center;padding-right:var(--sp-1)}
/* Out of sight until wanted, and never out of reach: hover, keyboard focus and
 * the open state all show it, so the menu is discoverable without adding a
 * permanent control to every row. */
.row-menu-button{list-style:none;cursor:pointer;display:grid;place-items:center;
 width:26px;height:26px;border-radius:var(--r-sm);color:var(--muted);
 line-height:1;opacity:0;transition:opacity var(--fast) var(--ease-out)}
.row-menu-button::-webkit-details-marker{display:none}
.conversation-row:hover .row-menu-button,.row-menu-button:focus-visible,
.row-menu[open] .row-menu-button{opacity:1}
.row-menu-button:hover{background:var(--surface-sunken);color:var(--ink)}
.row-popover{position:absolute;top:calc(100% + var(--sp-1));right:0;z-index:20;
 min-width:9.5rem;padding:var(--sp-1);border:1px solid var(--line);
 border-radius:var(--r-md);background:var(--surface-raised);box-shadow:var(--shadow-3)}
.row-popover button{width:100%;justify-content:flex-start;text-align:left}
.conversation-list .conversation:hover{background:var(--surface-sunken)}
.conversation-list .conversation.active{background:var(--selected);color:var(--brand);font-weight:600}
.chat-grounding{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line);
 font-size:var(--t-xs);color:var(--muted)}
.chat-grounding p{margin-top:var(--sp-1)}
.warn-note{color:var(--warning)}
.warn-note a{text-decoration:underline}

.chat-main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;
 overflow-x:clip}
.chat-back{display:none;place-items:center;width:var(--tap);height:var(--tap);flex:none;
 margin-left:calc(var(--sp-3) * -1);border-radius:var(--r-sm);color:var(--muted);font-size:var(--t-lead)}
.chat-back:hover{background:var(--surface-sunken);color:var(--ink)}
.chat-header{display:flex;align-items:center;gap:var(--sp-2);
 padding:var(--sp-3) clamp(var(--sp-4),3vw,var(--sp-8));border-bottom:1px solid var(--line);
 background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.chat-header h1{font-size:var(--t-body);font-weight:600;letter-spacing:0;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.chat-header .eyebrow{margin-bottom:var(--sp-05)}
.messages{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8);align-content:start;
 overflow:auto;scroll-behavior:smooth;
 padding:var(--sp-8) max(var(--sp-4),calc((100% - var(--reading)) / 2)) var(--sp-6)}
.message{display:grid;min-width:0;gap:var(--sp-2);animation:message-in 200ms var(--ease-out) both}
.message-gutter{display:none}
.message-content{min-width:0}
.message-author{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--t-xs);
 font-weight:600;color:var(--muted)}
.message.assistant .message-author{color:var(--brand)}
.message-author .badge{font-weight:600}
.message-body{font-size:var(--t-body);line-height:var(--lh-relaxed);color:var(--ink)}
.message-body>*:first-child{margin-top:0}
.message-body>*:last-child{margin-bottom:0}
.message-body p{margin:0 0 .85em}
.message-body h1,.message-body h2,.message-body h3,.message-body h4{
 margin:1.5em 0 .5em;font-size:var(--t-body);font-weight:650;line-height:var(--lh-snug);
 letter-spacing:0}
.message-body h1,.message-body h2{font-size:var(--t-lead)}
.message-body ul,.message-body ol{margin:0 0 .9em;padding-left:1.3em}
.message-body li{margin-bottom:.3em}
.message-body li::marker{color:var(--faint)}
.message-body code{padding:.1em .28em;border:1px solid var(--line);border-radius:var(--r-xs);
 background:var(--surface-sunken);font-size:.86em;word-break:break-word}
.message-body pre{margin:0 0 1em;padding:var(--sp-4);border-radius:var(--r-md);
 background:var(--code-bg);color:var(--code-ink);overflow-x:auto}
.message-body pre code{padding:0;border:0;background:none;color:inherit;font-size:var(--t-xs);
 line-height:1.6}
.message-body blockquote{margin:0 0 1em;padding-left:var(--sp-4);
 border-left:2px solid var(--line-strong);color:var(--muted)}
.table-scroll{margin:0 0 1em;overflow-x:auto;overscroll-behavior-x:contain}
.message-body table{display:table;width:100%;font-size:var(--t-xs)}
.message-body th,.message-body td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);
 text-align:left;vertical-align:top}
.message-body thead th{border-bottom:1px solid var(--line-strong);color:var(--muted);
 font-size:var(--t-2xs);font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase}
.message-body tbody tr:last-child td{border-bottom:0}
.message.user .message-body{width:max-content;max-width:100%;padding:var(--sp-3) var(--sp-4);
 border-radius:var(--r-md) var(--r-md) var(--r-md) var(--r-xs);background:var(--surface-sunken)}
.message.is-error .message-body{padding:var(--sp-4);border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
 border-radius:var(--r-md);background:var(--danger-bg)}
.message.is-thin .message-body{color:var(--muted)}
.message-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.message.pending .message-body{display:flex;align-items:center;gap:var(--sp-3);color:var(--muted)}
/* The thinking mascot is an inline companion to the stage text, not a hero. */
.pending-mascot{display:block;flex:none;width:48px;color:var(--brand)}
.pending-mascot .trex{width:48px;animation:mascot-breathe 3.6s var(--ease-out) infinite}
.pending-dots{display:inline-flex;gap:var(--sp-1)}
.pending-dots i{width:5px;height:5px;border-radius:50%;background:var(--brand);
 animation:pending-bounce 1.05s var(--ease) infinite}
.pending-dots i:nth-child(2){animation-delay:.14s}
.pending-dots i:nth-child(3){animation-delay:.28s}
/* The legacy standalone thinking card is superseded by the pending message. */
.thinking-state{display:none}

.evidence-panel{margin-top:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);
 background:var(--surface)}
.evidence-panel>summary{display:flex;gap:var(--sp-3);align-items:baseline;justify-content:space-between;
 padding:var(--sp-3) var(--sp-4);cursor:pointer;list-style:none;font-size:var(--t-xs)}
.evidence-count{font-weight:600;color:var(--ink-soft)}
.evidence-mix{color:var(--faint)}
.evidence-list{display:grid;padding:0 var(--sp-4) var(--sp-4);grid-template-columns:minmax(0,1fr)}
.evidence{min-width:0;padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.evidence:first-child{border-top:0;padding-top:var(--sp-1)}
.evidence header{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-2)}
.evidence-path{font-family:var(--mono);font-size:var(--t-xs);color:var(--brand);overflow-wrap:anywhere}
.evidence-facts{list-style:none;display:grid;gap:var(--sp-15);margin-bottom:var(--sp-3);
 font-size:var(--t-xs)}
.evidence-facts li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-2);
 align-items:baseline}
.fact-confidence{padding:0 var(--sp-15);border-radius:var(--r-xs);background:var(--surface-sunken);
 color:var(--muted);font-size:var(--t-2xs);font-weight:700;font-variant-numeric:tabular-nums}
.fact-confidence.high{background:var(--success-bg);color:var(--success)}
.fact-confidence.medium{background:var(--warning-bg);color:var(--warning)}
.fact-confidence.low{background:var(--danger-bg);color:var(--danger)}
.fact-statement{color:var(--ink-soft)}
.fact-lines{color:var(--faint);font-size:var(--t-2xs);white-space:nowrap}
.evidence-excerpt{margin:0;padding:var(--sp-3);border-radius:var(--r-sm);background:var(--code-bg);
 color:var(--code-ink);max-height:180px;overflow:auto}
.evidence-excerpt code{font-size:var(--t-2xs);line-height:1.55;white-space:pre}

.chat-empty{display:grid;justify-items:center;gap:var(--sp-2);max-width:var(--reading);
 margin:auto;padding:var(--sp-8) 0;text-align:center}
.chat-empty{--trex-fill:.22}
.chat-empty .mascot{width:168px;margin-bottom:var(--sp-2)}
.chat-empty h2{font-size:var(--t-title)}
.chat-empty p{color:var(--muted);max-width:52ch}
.suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5)}
.suggestions button{min-height:var(--control);padding:0 var(--sp-4);border:1px solid var(--line-strong);
 border-radius:var(--r-pill);background:var(--surface);color:var(--ink-soft);font-size:var(--t-sm);
 cursor:pointer;transition:background-color var(--fast),border-color var(--fast),color var(--fast)}
.suggestions button:hover{background:var(--brand-tint);border-color:var(--p-300);color:var(--brand)}

.composer{position:relative;width:min(var(--reading),100% - var(--sp-8));
 margin:0 auto calc(var(--sp-5) + 18px);padding-top:var(--sp-2)}
.composer textarea{min-height:52px;max-height:200px;padding:var(--sp-4) 56px var(--sp-4) var(--sp-4);
 border-radius:var(--r-lg);background:var(--surface-raised);box-shadow:var(--shadow-2)}
.send{position:absolute;right:var(--sp-2);bottom:var(--sp-2);display:grid;place-items:center;
 width:36px;height:36px;border:0;border-radius:var(--r-sm);background:var(--brand);
 color:var(--on-brand);cursor:pointer;transition:background-color var(--fast),transform var(--fast)}
.send:hover{background:var(--brand-hover)}
.send:active{transform:scale(.94)}
.send:disabled{background:var(--surface-sunken);color:var(--faint);cursor:not-allowed}
.send .control-spinner{display:none}
.composer.is-pending textarea{opacity:.7}
.composer.is-pending .send .send-glyph{display:none}
.composer.is-pending .send .control-spinner{display:block}
.composer-hint{position:absolute;inset-inline:0;top:100%;margin-top:var(--sp-2);text-align:center;
 color:var(--faint);font-size:var(--t-2xs)}
.chat-list-empty{--trex-fill:.22}
.chat-list-empty .mascot{width:200px}
.conversation-card{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
 padding:var(--sp-4) var(--sp-5)}
.conversation-card b{display:block;font-size:var(--t-sm)}
.conversation-card p{margin-top:var(--sp-1);color:var(--muted);font-size:var(--t-xs)}
.conversation-card .arrow{color:var(--faint);transition:transform var(--normal) var(--ease-out)}
.conversation-card:hover .arrow{color:var(--brand);transform:translateX(3px)}

/* Settings ---------------------------------------------------------------- */
.settings-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:var(--sp-10);
 align-items:start}
.settings-nav{position:sticky;top:calc(var(--header) + var(--sp-5));display:grid;
 align-content:start;gap:var(--sp-05)}
.settings-nav p{margin:var(--sp-5) var(--sp-3) var(--sp-1);font-size:var(--t-2xs);font-weight:600;
 letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--faint)}
.settings-nav p:first-child{margin-top:0}
.settings-nav a{position:relative;display:flex;align-items:center;min-height:34px;
 padding:0 var(--sp-3);border-radius:var(--r-sm);color:var(--ink-soft);font-size:var(--t-sm);
 transition:background-color var(--fast),color var(--fast)}
.settings-nav a:hover{background:var(--surface-sunken);color:var(--ink)}
.settings-nav a.active{background:var(--selected);color:var(--brand);font-weight:600}
.settings-content{min-width:0}
.setting-card{margin-bottom:var(--sp-3)}
.connection-list{display:grid;padding:0;grid-template-columns:minmax(0,1fr)}
.connection-item{padding:var(--sp-5);border-top:1px solid var(--line)}
.connection-item:first-child{border-top:0}
.connection{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
 gap:var(--sp-4)}
.connection-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;
 border-radius:var(--r-md);background:var(--brand-tint-strong);color:var(--brand);
 font-size:var(--t-sm);font-weight:700}
.connection-main{min-width:0}
.connection-main>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.connection h3{font-size:var(--t-body);font-weight:600}
.connection p{margin-top:var(--sp-05);color:var(--muted);font-size:var(--t-xs);overflow-wrap:anywhere}
.connection-facts{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-1);
 color:var(--faint);font-size:var(--t-2xs)}
.row-actions{display:flex;gap:var(--sp-2);align-items:center}
.add-panel{margin-top:var(--sp-4);padding:var(--sp-5);border:1px dashed var(--line-strong);
 border-radius:var(--r-lg);background:color-mix(in srgb,var(--surface) 55%,transparent)}
.add-panel summary{position:relative;display:grid;gap:var(--sp-05);min-height:var(--tap);
 padding-right:var(--sp-8);list-style:none;cursor:pointer;align-content:center}
.add-panel summary span{font-size:var(--t-sm);font-weight:600}
.add-panel summary small{color:var(--muted);font-size:var(--t-xs)}
.add-panel summary:after{content:"＋";position:absolute;right:0;top:50%;transform:translateY(-50%);
 color:var(--brand);font-size:var(--t-lead);transition:transform var(--normal)}
.add-panel[open] summary{margin-bottom:var(--sp-5);padding-bottom:var(--sp-4);
 border-bottom:1px solid var(--line)}
.add-panel[open] summary:after{transform:translateY(-50%) rotate(45deg)}
.theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.theme-picker button{display:grid;gap:var(--sp-1);padding:var(--sp-2);border:1px solid var(--line);
 border-radius:var(--r-md);background:transparent;color:var(--ink);text-align:left;cursor:pointer;
 transition:border-color var(--fast),background-color var(--fast)}
.theme-picker button:hover{border-color:var(--p-300)}
.theme-picker button[aria-checked="true"]{border-color:var(--brand);background:var(--brand-tint)}
.theme-picker b{font-size:var(--t-sm);font-weight:600}
.theme-picker small{color:var(--muted);font-size:var(--t-2xs)}
.theme-preview{display:block;height:52px;border:1px solid var(--line);border-radius:var(--r-sm);
 background:#fff;box-shadow:inset 0 0 0 7px #f4f2f8}
.dark-preview{border-color:#3a3346;background:#282331;box-shadow:inset 0 0 0 7px #17141d}
.system-preview{background:linear-gradient(90deg,#fff 50%,#282331 50%);
 box-shadow:inset 0 0 0 7px rgba(124,112,138,.18)}
.about-hero{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.about-hero .brand-mark{height:38px}
.about-hero h2{font-size:var(--t-subtitle)}
.about-hero p{color:var(--muted);font-size:var(--t-sm)}
.health-pill{display:flex;align-items:center;gap:var(--sp-15);margin-left:auto;
 padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--success-bg);
 color:var(--success);font-size:var(--t-xs);font-weight:600}
.health-pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.metadata-card dl{display:grid;grid-template-columns:minmax(0,1fr)}
.metadata-card dl>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--sp-4);
 padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.metadata-card dl>div:last-child{border-bottom:0}
.metadata-card dt{color:var(--muted);font-size:var(--t-xs)}
.metadata-card dd{font-size:var(--t-xs);font-weight:500;overflow-wrap:anywhere}
.metadata-card code{padding:var(--sp-05) var(--sp-15);border-radius:var(--r-xs);
 background:var(--surface-sunken);font-size:var(--t-2xs)}
.privacy-note{margin-top:var(--sp-4)}

/* Diagnostics ------------------------------------------------------------- */
.diagnostic-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
 gap:var(--sp-2);margin-bottom:var(--sp-5)}
.diagnostic-status article{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);
 border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.diagnostic-status article b{font-size:var(--t-sm)}
.diagnostic-status small{display:block;margin-top:var(--sp-05);color:var(--muted);font-size:var(--t-xs)}
.diagnostic-status article.is-danger{border-color:color-mix(in srgb,var(--danger) 42%,transparent);
 background:var(--danger-bg)}
.diagnostic-status article.is-danger small{color:var(--danger)}
.diagnostic-toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:end;margin-bottom:var(--sp-4)}
.diagnostic-search{flex:1 1 280px}
.diagnostic-only{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--control);
 font-size:var(--t-sm);color:var(--ink-soft)}
.diagnostic-groups{display:grid;gap:var(--sp-2);grid-template-columns:minmax(0,1fr)}
.diagnostic-groups+.sectionhead{margin-top:var(--sp-8)}
.diagnostic-groups+.fine{margin-top:var(--sp-3)}
.diagnostic-group,.retrieval-group{padding:var(--sp-4);border:1px solid var(--line);border-left:3px solid var(--line-strong);
 border-radius:var(--r-md);background:var(--surface)}
.diagnostic-group[data-severity="warning"]{border-left-color:var(--warning)}
.diagnostic-group[data-severity="error"]{border-left-color:var(--danger)}
.diagnostic-group[data-severity="critical"]{border-left-color:var(--danger);background:var(--danger-bg)}
.diagnostic-group-head{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:flex-start;
 justify-content:space-between}
.diagnostic-reference{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-1)}
.diagnostic-reference code{font-family:var(--mono);font-size:var(--t-2xs);color:var(--brand)}
.diagnostic-group h4,.retrieval-group h4{margin-bottom:var(--sp-1);font-weight:600}
.diagnostic-context{color:var(--muted);font-size:var(--t-xs)}
.diagnostic-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.diagnostic-actions button,.diagnostic-actions a{min-height:34px;padding-inline:var(--sp-3);
 font-size:var(--t-xs)}
.diagnostic-timeline{margin-top:var(--sp-3)}
.diagnostic-timeline>summary{display:flex;align-items:center;min-height:34px;
 cursor:pointer;list-style:none;font-size:var(--t-xs);color:var(--muted)}
.diagnostic-timeline ol{list-style:none;display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
.diagnostic-timeline li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--sp-3);
 padding-left:var(--sp-3);border-left:2px solid var(--line);font-size:var(--t-xs)}
.diagnostic-timeline li.severity-error,.diagnostic-timeline li.severity-critical{border-left-color:var(--danger)}
.diagnostic-timeline li.severity-warning{border-left-color:var(--warning)}
.diagnostic-timeline time{color:var(--faint);font-variant-numeric:tabular-nums}
.diagnostic-timeline small{grid-column:2;color:var(--faint);font-size:var(--t-2xs);overflow-wrap:anywhere}

/* Project configuration --------------------------------------------------- */
.config-card{margin-bottom:var(--sp-4)}
.managed-repositories{display:grid;gap:var(--sp-2);grid-template-columns:minmax(0,1fr)}
.managed-repository{display:grid;grid-template-columns:minmax(200px,1fr) 190px auto auto;
 align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);
 border-radius:var(--r-md);background:var(--surface-raised)}
.repo-identity{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.repo-identity>div{min-width:0}
.repo-identity h3{font-size:var(--t-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap}
.repo-identity p{margin-top:var(--sp-05);color:var(--muted);font-size:var(--t-2xs);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.repo-glyph{display:grid;place-items:center;width:30px;height:30px;flex:none;
 border-radius:var(--r-sm);background:var(--brand-tint-strong);color:var(--brand);font-size:var(--t-sm)}
.branch-control label{margin-bottom:var(--sp-1);color:var(--muted);font-size:var(--t-2xs);font-weight:600}
.branch-control select{font-family:var(--mono);font-size:var(--t-xs)}
.access-state.accessible{color:var(--success)}
.access-state.inaccessible{color:var(--danger)}
.danger-zone{margin-top:var(--sp-8);border-color:color-mix(in srgb,var(--danger) 34%,transparent)}
.danger-zone h3{color:var(--danger)}
.danger-zone p{margin-top:var(--sp-1);color:var(--muted);font-size:var(--t-sm)}
.danger-zone form{max-width:var(--form-max);margin-top:var(--sp-4)}
.danger-zone label{display:grid;gap:var(--sp-15);font-size:var(--t-xs);font-weight:600}
.danger-zone .danger{margin-top:var(--sp-4)}
.label-sentence{font-weight:500;color:var(--ink-soft)}

/* Wizard ------------------------------------------------------------------ */
.wizard{max-width:760px;margin-inline:auto;padding:var(--sp-8);border:1px solid var(--line);
 border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-1)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);list-style:none;
 margin-bottom:var(--sp-8);counter-reset:step}
.steps li{counter-increment:step;display:flex;align-items:center;gap:var(--sp-2);
 padding-top:var(--sp-3);border-top:2px solid var(--line);color:var(--muted);font-size:var(--t-xs)}
.steps li:before{content:counter(step);display:grid;place-items:center;width:19px;height:19px;
 border-radius:50%;background:var(--surface-sunken);color:var(--muted);font-size:var(--t-2xs);
 font-weight:700;flex:none}
.steps li.active{border-color:var(--brand);color:var(--ink);font-weight:600}
.steps li.active:before{background:var(--brand);color:var(--on-brand)}
.steps li.done{border-color:var(--success);color:var(--ink-soft)}
.steps li.done:before{content:"✓";background:var(--success-bg);color:var(--success)}
.wizard-panel{min-height:340px}
.wizard-panel>.eyebrow{margin-bottom:var(--sp-2)}
.wizard-panel h1{font-size:var(--t-title);margin-bottom:var(--sp-2)}
.wizard-panel>p{color:var(--muted);font-size:var(--t-sm)}
.wizard-panel>label{display:grid;gap:var(--sp-15);margin:var(--sp-5) 0;max-width:var(--form-max);
 font-size:var(--t-xs);font-weight:600}
.wizard-actions{position:sticky;bottom:calc(var(--sp-8) * -1);z-index:2;display:flex;
 justify-content:flex-end;gap:var(--sp-2);
 margin:var(--sp-6) calc(var(--sp-8) * -1) calc(var(--sp-8) * -1);
 padding:var(--sp-4) var(--sp-8);border-top:1px solid var(--line);
 border-radius:0 0 var(--r-xl) var(--r-xl);background:var(--surface)}
#repo-results,#branch-results{max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain}
#branch-results label{display:grid;gap:var(--sp-15);margin-bottom:var(--sp-4);
 font-size:var(--t-xs);font-weight:600;color:var(--ink-soft)}
#branch-results select{font-family:var(--mono);font-size:var(--t-xs)}
.review{padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-md);
 background:var(--surface)}
.review h3{font-size:var(--t-body);margin-bottom:var(--sp-2)}
.review p{padding:var(--sp-2) 0;border-top:1px solid var(--line);font-size:var(--t-sm);
 color:var(--ink-soft);font-variant-numeric:tabular-nums}
.review p:first-of-type{border-top:0}
.select-list{display:grid;gap:var(--sp-1);overscroll-behavior:contain;grid-template-columns:minmax(0,1fr)}
.repo-option{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;
 align-items:center;gap:var(--sp-3);min-height:52px;padding:var(--sp-2) var(--sp-3);
 border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
 transition:background-color var(--fast),border-color var(--fast)}
.repo-option:hover{background:var(--surface-sunken);
 border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.repo-option.selected{border-color:var(--brand);background:var(--brand-tint)}
.repo-option:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
.repo-option:has(input:disabled){cursor:not-allowed;background:var(--surface-sunken);color:var(--muted)}
/* The hit target is the whole row; the visible control stays 18px. */
.repo-option input[type="checkbox"]{appearance:none;position:absolute;left:0;top:0;
 width:44px;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:inherit}
.checkbox-visual{width:18px;height:18px;display:grid;place-items:center;border:1.5px solid var(--line-strong);
 border-radius:var(--r-xs);background:var(--surface-raised);pointer-events:none;
 transition:background-color var(--fast),border-color var(--fast)}
.repo-option input:checked+.checkbox-visual{border-color:var(--brand);background:var(--brand)}
.repo-option input:checked+.checkbox-visual:after{content:"";width:8px;height:4px;
 border-left:2px solid var(--on-brand);border-bottom:2px solid var(--on-brand);
 transform:translateY(-1px) rotate(-45deg)}
.repo-option input:disabled+.checkbox-visual{background:var(--surface-sunken);border-color:var(--line)}
.repo-option input:disabled+.checkbox-visual:after{content:"−";color:var(--muted);font-weight:700;line-height:1}
.repo-option-copy{min-width:0}
.repo-option-copy b{display:block;font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap}
.repo-meta{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-05);color:var(--muted);
 font-size:var(--t-2xs)}
.repo-meta .meta-tag+.meta-tag:before{content:"·";margin:0 var(--sp-1)}
.repo-description{margin-top:var(--sp-05);color:var(--muted);font-size:var(--t-xs);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}

/* Dialogs ----------------------------------------------------------------- */
dialog{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
 color:var(--ink);box-shadow:var(--shadow-3);padding:0}
dialog::backdrop{background:var(--overlay);backdrop-filter:blur(3px)}
.repository-dialog{position:relative;width:min(680px,calc(100vw - var(--sp-8)));
 max-height:min(760px,calc(100dvh - var(--sp-10)));padding:var(--sp-6);overflow:auto}
.dialog-close{position:absolute;right:var(--sp-4);top:var(--sp-4);display:grid;place-items:center;
 width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--surface-sunken);
 color:var(--ink-soft);font-size:var(--t-lead);line-height:1;cursor:pointer}
.dialog-close:hover{background:var(--line)}
.dialog-head{margin-bottom:var(--sp-5);padding-right:var(--sp-10)}
.dialog-head h2{font-size:var(--t-subtitle);margin-bottom:var(--sp-1)}
.dialog-head p{color:var(--muted);font-size:var(--t-sm)}
.repository-dialog label{display:grid;gap:var(--sp-15);margin-bottom:var(--sp-3);
 font-size:var(--t-xs);font-weight:600}
.repository-dialog .select-list{max-height:min(42vh,360px);overflow:auto;padding:1px}
.picker-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--sp-3)}
.dialog-actions{position:sticky;bottom:calc(var(--sp-6) * -1);z-index:2;display:flex;
 align-items:center;gap:var(--sp-2);margin:var(--sp-5) calc(var(--sp-6) * -1) calc(var(--sp-6) * -1);
 padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line);
 background:var(--surface)}
.selection-count{margin-right:auto;color:var(--muted);font-size:var(--t-xs)}
.confirm-dialog{width:min(460px,calc(100vw - var(--sp-8)))}
.confirm-dialog>p{color:var(--muted);font-size:var(--t-sm);line-height:var(--lh-relaxed)}
.confirm-dialog .dialog-actions{position:static;margin:var(--sp-5) 0 0;padding:var(--sp-4) 0 0;
 background:none;justify-content:flex-end}
.warning-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:var(--sp-3);
 border-radius:var(--r-md);background:var(--danger-bg);color:var(--danger);font-size:var(--t-subtitle);
 font-weight:700}
.branch-picker{padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.branch-picker:last-child{border-bottom:0}
.branch-picker-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
 margin-bottom:var(--sp-2)}
.branch-picker-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-size:var(--t-sm)}
.branch-picker-head span{white-space:nowrap;color:var(--muted);font-size:var(--t-xs)}
.branch-search{margin-bottom:var(--sp-2)}
.branch-picker select{font-family:var(--mono);font-size:var(--t-xs)}
.branch-empty{margin:var(--sp-1) 0;color:var(--danger);font-size:var(--t-xs)}

/* Errors ------------------------------------------------------------------ */
.branded-empty{display:grid;justify-items:center;gap:var(--sp-3);min-height:52vh;align-content:center;
 padding:var(--sp-12) var(--sp-6);border:0;background:none;text-align:center}
.branded-empty{--trex-fill:.24}
.branded-empty .mascot{width:220px;margin-bottom:var(--sp-2)}
.branded-empty h1,.branded-empty h2{font-size:var(--t-title)}
.branded-empty p{color:var(--muted);max-width:48ch}
.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-4)}
.not-found{margin-top:var(--sp-4)}

/* Disclosure marker: one chevron rule for every summary in the product. */
.history-panel>summary,.knowledge-browser>summary,.evidence-panel>summary,
.outcome-detail>summary,.diagnostic-timeline>summary,.add-panel summary{
 position:relative;padding-right:var(--sp-8)}
.history-panel>summary:after,.knowledge-browser>summary:after,.evidence-panel>summary:after,
.outcome-detail>summary:after,.diagnostic-timeline>summary:after{
 content:"";position:absolute;right:var(--sp-4);top:50%;width:7px;height:7px;margin-top:-5px;
 border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);
 transition:transform var(--fast) var(--ease)}
.diagnostic-timeline>summary:after,.outcome-detail>summary:after{right:var(--sp-1)}
.history-panel[open]>summary:after,.knowledge-browser[open]>summary:after,
.evidence-panel[open]>summary:after,.outcome-detail[open]>summary:after,
.diagnostic-timeline[open]>summary:after{transform:rotate(-135deg);margin-top:-2px}
.outcome-detail>summary,.evidence-panel>summary,.diagnostic-timeline>summary{list-style:none}
.outcome-detail>summary::-webkit-details-marker,

/* The connection editor is a disclosure inside its row, not a second card. */
.edit-panel{margin-top:var(--sp-3);padding:0;border:0;background:none}
.edit-panel summary{min-height:34px}
.edit-panel summary span{font-size:var(--t-xs);font-weight:600}
.edit-panel summary small{display:none}
.edit-panel[open] summary{margin-bottom:var(--sp-4);padding-bottom:var(--sp-3)}

/* ---- 7  responsive ------------------------------------------------------- */
@media(max-width:1080px){
 .settings-layout{grid-template-columns:180px minmax(0,1fr);gap:var(--sp-6)}
 .chat-page{grid-template-columns:224px minmax(0,1fr)}
 .brain-panels{grid-template-columns:minmax(0,1fr)}
 .brain-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
 .page{padding:var(--sp-6) var(--sp-4) var(--sp-16)}
 .pagehead{align-items:flex-start;flex-direction:column;gap:var(--sp-3)}
 .settings-layout{display:block}
 .settings-nav{position:static;display:flex;gap:var(--sp-2);margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-1);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
 .settings-nav::-webkit-scrollbar{display:none}
 .settings-nav p{display:none}
 .settings-nav a{min-height:var(--control);padding-inline:var(--sp-4);border-radius:var(--r-pill);
  background:var(--surface-sunken);white-space:nowrap;scroll-snap-align:start}
 .settings-nav a.active{background:var(--selected)}
 .tabs a{scroll-snap-align:center}
 .chat-page{grid-template-columns:minmax(0,1fr)}
 .chat-side{display:none}
 .chat-back{display:grid}
 .analysis-head{grid-template-columns:52px minmax(0,1fr);row-gap:var(--sp-3)}
 .analysis-mascot .trex{width:52px}
 .analysis-state{grid-column:1/-1;justify-items:start;text-align:left}
 .analysis-outcome{grid-template-columns:52px minmax(0,1fr);gap:var(--sp-4)}
 .outcome-mascot .trex{width:52px}
 .managed-repository{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--sp-3)}
 .repo-identity,.branch-control{grid-column:1/-1}
 .metadata-card dl>div{grid-template-columns:130px minmax(0,1fr)}
 .auth-card{grid-template-columns:minmax(0,1fr)}
 .auth-aside{border-right:0;border-bottom:1px solid var(--line);padding:var(--sp-6)}
 .auth-aside .mascot{width:min(70%,190px)}
 .auth-aside p{display:none}
 .coverage-list li{grid-template-columns:88px minmax(0,1fr) 44px}
 .phase{grid-template-columns:22px minmax(0,1fr);row-gap:var(--sp-05)}
 .phase-state{grid-column:2;padding-top:0}
 .analysis-foot{align-items:flex-start;flex-direction:column}
 .evidence-facts li{grid-template-columns:auto minmax(0,1fr)}
 .fact-lines{grid-column:2}
}
@media(max-width:600px){
 :root{--control:42px}
 .top{gap:var(--sp-2);padding-inline:var(--sp-3)}
 .brand span{display:none}
 .brand .brand-mark{height:24px}
 .user-name,.chevron{display:none}
 .top nav a{padding-inline:var(--sp-2)}
 .page{padding:var(--sp-5) var(--sp-4) var(--sp-12)}
 .pagehead .btn-group,.pagehead .button,.sectionhead .primary,.sectionhead form{width:100%}
 .sectionhead{align-items:stretch;flex-direction:column}
 .project-row{grid-template-columns:auto minmax(0,1fr);row-gap:var(--sp-2)}
 .project-row-meta{grid-column:2}
 .project-row .arrow{display:none}
 .project-head{align-items:flex-start}
 .project-primary-action{margin-left:0;width:100%}
 .project-primary-action .primary{width:100%}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* Five tabs never fit a phone; the fade says the strip keeps going. */
 .tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
 .brain-empty{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
 .brain-empty .trex{width:96px}
 .chat-list-empty .mascot{width:140px}
 .choice-grid,.theme-picker{grid-template-columns:minmax(0,1fr)}
 .connection{grid-template-columns:auto minmax(0,1fr);row-gap:var(--sp-3)}
 .row-actions{grid-column:1/-1}
 .row-actions>*{flex:1}
 .about-hero{align-items:flex-start}
 .health-pill{margin-left:0}
 .messages{gap:var(--sp-6);padding:var(--sp-5) var(--sp-4) var(--sp-4)}
 .composer{width:calc(100% - var(--sp-6));margin-bottom:max(var(--sp-3),env(safe-area-inset-bottom))}
 .composer-hint{display:none}
 .send{width:40px;height:40px}
 .chat-empty .mascot{width:120px}
 .suggestions{display:grid}
 .repository-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0;
  padding:var(--sp-5)}
 /* Full-screen on a phone, so the action bar belongs at the bottom edge rather
    than wherever a short list happened to end. */
 .repository-dialog:not(.confirm-dialog)[open]{display:flex;flex-direction:column}
 .repository-dialog:not(.confirm-dialog)>#picker-discovery,
 .repository-dialog:not(.confirm-dialog)>#picker-branches:not(.hidden){flex:1 1 auto;min-height:0}
 .repository-dialog:not(.confirm-dialog) .dialog-actions{margin-top:auto}
 .dialog-actions{margin-inline:calc(var(--sp-5) * -1);padding-inline:var(--sp-5);flex-wrap:wrap}
 .dialog-actions .primary{flex:1}
 .picker-toolbar{grid-template-columns:minmax(0,1fr)}
 .diagnostic-actions>*{flex:1}
 .diagnostic-timeline li{grid-template-columns:minmax(0,1fr)}
 .diagnostic-timeline small{grid-column:1}
 .history-table{font-size:var(--t-2xs)}
 .wizard{padding:var(--sp-5)}
 .steps li{font-size:0;gap:0;justify-content:center}
 .wizard-actions{margin-inline:calc(var(--sp-5) * -1);padding-inline:var(--sp-5);
  bottom:calc(var(--sp-5) * -1)}
 .wizard-actions .primary{flex:1}
 .branded-empty .mascot{width:150px}
 .auth-form{padding:var(--sp-6) var(--sp-5)}
 .auth-aside{padding:var(--sp-6) var(--sp-5)}
 .auth-aside .mascot{width:min(60%,180px)}
 .auth-card.wide .auth-form{padding:var(--sp-6) var(--sp-5)}
}
@media(pointer:coarse){
 :root{--control:44px}
 .tabs a,.settings-nav a,.top nav a,.account-popover a,.account-popover button{min-height:var(--tap)}
}

/* ---- 8  motion ----------------------------------------------------------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--focus-glow)}50%{box-shadow:0 0 0 5px transparent}}
@keyframes tracks{0%,25%{opacity:.2}45%,70%{opacity:1}100%{opacity:.2}}
@keyframes track-sweep{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes mascot-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes message-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes surface-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes pending-bounce{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes popover-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.card,.project-card,.connection,.diagnostic-group,.retrieval-group{animation:surface-in 180ms var(--ease-out) both}
dialog[open]{animation:dialog-in 180ms var(--ease-out) both}
dialog[open]::backdrop{animation:fade-in 160ms ease-out both}
.account-menu[open] .account-popover{transform-origin:top right;animation:popover-in 140ms var(--ease-out) both}

@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;
  animation-delay:0ms!important;transition-duration:.001ms!important;transition-delay:0ms!important;
  scroll-behavior:auto!important}
 dialog[open]::backdrop{animation:none!important}
 .analysis-panel:before{animation:none;background:var(--brand);opacity:.5}
 .messages{scroll-behavior:auto}
}