/* Hallmark · genre: modern-minimal · macrostructure: app shell (side rail + inset panel) · theme: SinergIA 180° brand (locked)
 * tone: technical, quiet · accent: brand blue #2158E8 (light) / #5B8DEF (dark), one per block
 * nav: N3 side-rail (top bar + bottom tabs on phones) · footer: none (application)
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/michroma-latin.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --sg-ink: #0D1424;
  --sg-blue: #2158E8;
  --sg-blue-light: #5B8DEF;
  --sg-green: #22B47E;
  --sg-amber: #E8A521;

  --color-bg: #F4F6F9;
  --color-panel: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-sunken: #F4F6F9;
  --color-hover: #F1F4F9;
  --color-ink: #0D1424;
  --color-ink-soft: #3B4356;
  --color-muted: #6B7280;
  --color-faint: #9AA1AE;
  --color-line: rgba(13, 20, 36, .09);
  --color-line-strong: rgba(13, 20, 36, .15);
  --color-accent: #2158E8;
  --color-accent-hover: #1B4BD0;
  --color-accent-ink: #1A47C2;
  --color-accent-soft: rgba(91, 141, 239, .12);
  --color-accent-line: rgba(33, 88, 232, .28);
  --color-on-accent: #FFFFFF;
  --color-ok: #147A54;
  --color-ok-soft: rgba(34, 180, 126, .14);
  --color-warn: #9A6B06;
  --color-warn-soft: rgba(232, 165, 33, .16);
  --color-danger: #B42318;
  --color-danger-soft: rgba(180, 35, 24, .08);
  --color-focus: #2158E8;
  --color-code-bg: #F7F8FA;
  --color-target: rgba(232, 165, 33, .14);
  --color-aside: #0D1424;
  --color-aside-ink: #FFFFFF;
  --color-aside-muted: rgba(255, 255, 255, .62);
  --color-aside-line: rgba(255, 255, 255, .12);
  --color-qr: #0D1424;
  --color-qr-bg: #FFFFFF;
  --color-backdrop: rgba(13, 20, 36, .32);
  --color-diff-add: rgba(34, 180, 126, .11);
  --color-diff-add-gutter: rgba(34, 180, 126, .2);
  --color-diff-del: rgba(180, 35, 24, .07);
  --color-diff-del-gutter: rgba(180, 35, 24, .14);
  --color-diff-hunk: rgba(91, 141, 239, .08);
  --color-merged: #147A54;
  --color-merged-soft: rgba(34, 180, 126, .14);

  --syntax-keyword: #2158E8;
  --syntax-string: #0F7A50;
  --syntax-number: #9A5B00;
  --syntax-comment: #8A92A1;
  --syntax-title: #7A3EB8;
  --syntax-attr: #B4471C;
  --syntax-meta: #5B6577;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Michroma', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-panel: 0 1px 2px rgba(13, 20, 36, .04), 0 8px 24px rgba(13, 20, 36, .05);
  --shadow-pop: 0 2px 6px rgba(13, 20, 36, .08), 0 24px 60px rgba(13, 20, 36, .18);

  --dur-quick: 200ms;
  --dur-standard: 300ms;
  --dur-slow: 450ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-exit: cubic-bezier(.3, 0, 1, 1);

  --rail-width: 248px;
  --bar-height: 60px;
  --content-max: 1180px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #080C16;
    --color-panel: #0F1522;
    --color-surface: #141B2B;
    --color-sunken: #0B101B;
    --color-hover: #182134;
    --color-ink: #E8EBF2;
    --color-ink-soft: #C2C8D4;
    --color-muted: #8D95A8;
    --color-faint: #636C80;
    --color-line: rgba(255, 255, 255, .07);
    --color-line-strong: rgba(255, 255, 255, .13);
    --color-accent: #5B8DEF;
    --color-accent-hover: #74A0F3;
    --color-accent-ink: #8EB2F6;
    --color-accent-soft: rgba(91, 141, 239, .15);
    --color-accent-line: rgba(91, 141, 239, .38);
    --color-on-accent: #07101F;
    --color-ok: #4CD3A0;
    --color-ok-soft: rgba(34, 180, 126, .16);
    --color-warn: #F0BE55;
    --color-warn-soft: rgba(232, 165, 33, .14);
    --color-danger: #F2877D;
    --color-danger-soft: rgba(242, 135, 125, .1);
    --color-focus: #8EB2F6;
    --color-code-bg: #0B101B;
    --color-target: rgba(240, 190, 85, .12);
    --color-aside: #080C16;
    --color-backdrop: rgba(0, 0, 0, .55);
    --color-diff-add: rgba(76, 211, 160, .09);
    --color-diff-add-gutter: rgba(76, 211, 160, .17);
    --color-diff-del: rgba(242, 135, 125, .09);
    --color-diff-del-gutter: rgba(242, 135, 125, .17);
    --color-diff-hunk: rgba(91, 141, 239, .1);
    --color-merged: #4CD3A0;
    --color-merged-soft: rgba(34, 180, 126, .16);
    --syntax-keyword: #7FA6F5;
    --syntax-string: #6FD3A7;
    --syntax-number: #F0BE55;
    --syntax-comment: #6B7489;
    --syntax-title: #C9A2F5;
    --syntax-attr: #F29C7A;
    --syntax-meta: #9AA3B6;
    --shadow-panel: 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #080C16;
  --color-panel: #0F1522;
  --color-surface: #141B2B;
  --color-sunken: #0B101B;
  --color-hover: #182134;
  --color-ink: #E8EBF2;
  --color-ink-soft: #C2C8D4;
  --color-muted: #8D95A8;
  --color-faint: #636C80;
  --color-line: rgba(255, 255, 255, .07);
  --color-line-strong: rgba(255, 255, 255, .13);
  --color-accent: #5B8DEF;
  --color-accent-hover: #74A0F3;
  --color-accent-ink: #8EB2F6;
  --color-accent-soft: rgba(91, 141, 239, .15);
  --color-accent-line: rgba(91, 141, 239, .38);
  --color-on-accent: #07101F;
  --color-ok: #4CD3A0;
  --color-ok-soft: rgba(34, 180, 126, .16);
  --color-warn: #F0BE55;
  --color-warn-soft: rgba(232, 165, 33, .14);
  --color-danger: #F2877D;
  --color-danger-soft: rgba(242, 135, 125, .1);
  --color-focus: #8EB2F6;
  --color-code-bg: #0B101B;
  --color-target: rgba(240, 190, 85, .12);
  --color-aside: #080C16;
  --color-backdrop: rgba(0, 0, 0, .55);
  --color-diff-add: rgba(76, 211, 160, .09);
  --color-diff-add-gutter: rgba(76, 211, 160, .17);
  --color-diff-del: rgba(242, 135, 125, .09);
  --color-diff-del-gutter: rgba(242, 135, 125, .17);
  --color-diff-hunk: rgba(91, 141, 239, .1);
  --color-merged: #4CD3A0;
  --color-merged-soft: rgba(34, 180, 126, .16);
  --syntax-keyword: #7FA6F5;
  --syntax-string: #6FD3A7;
  --syntax-number: #F0BE55;
  --syntax-comment: #6B7489;
  --syntax-title: #C9A2F5;
  --syntax-attr: #F29C7A;
  --syntax-meta: #9AA3B6;
  --shadow-panel: 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd, pre { font-family: var(--font-mono); }
code { font-size: .9em; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--color-accent-soft); }
.muted { color: var(--color-muted); }
time, .file-size, .commit-sha, .card-meta { font-variant-numeric: tabular-nums; }

.icon { width: 18px; height: 18px; flex: none; }
.icon-spacer { width: 18px; flex: none; }

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 var(--space-1);
  font-size: 11px; font-weight: 500; color: var(--color-muted);
  border: 1px solid var(--color-line-strong); border-bottom-width: 2px; border-radius: 6px;
  background: var(--color-surface); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 50;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-on-accent); transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand-word { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .02em; color: var(--color-ink); }
.brand-by { font-family: var(--font-display); font-size: .56rem; letter-spacing: .08em; color: var(--color-muted); white-space: nowrap; }
.brand-ia { color: var(--sg-blue); }
.brand-deg { color: var(--sg-blue-light); font-size: .8em; vertical-align: top; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.rail {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.rail .brand { padding: 0 var(--space-2); }

.search-trigger {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; height: 38px; padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-panel); color: var(--color-muted); font-size: var(--text-sm);
  transition: border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.search-trigger span { flex: 1; text-align: left; }
.search-trigger:hover { border-color: var(--color-line-strong); color: var(--color-ink-soft); }

.areas { display: flex; flex-direction: column; gap: 2px; }
.area, .rail-link {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  color: var(--color-ink-soft); font-size: var(--text-base); font-weight: 500;
  border: 0; background: none; width: 100%; text-align: left;
  transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.area .icon, .rail-link .icon { color: var(--color-muted); transition: color var(--dur-quick) var(--ease); }
.area:hover, .rail-link:hover { background: var(--color-hover); color: var(--color-ink); }
.area.is-current, .rail-link.is-current { background: var(--color-panel); color: var(--color-ink); box-shadow: var(--shadow-panel); }
.area.is-current .icon, .rail-link.is-current .icon { color: var(--color-accent); }
.area-label { flex: 1; }

.account { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.icon-light { display: none; }
:root[data-theme="dark"] .icon-dark { display: none; }
:root[data-theme="dark"] .icon-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-dark { display: none; }
  :root:not([data-theme="light"]) .icon-light { display: block; }
}
.me {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3); padding: var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--color-line);
}
.avatar {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-pill); background: var(--sg-ink); color: #FFFFFF;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
:root[data-theme="dark"] .avatar { background: var(--color-accent-soft); color: var(--color-accent-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar { background: var(--color-accent-soft); color: var(--color-accent-ink); } }
.me-names { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.me-name { font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-handle { font-size: var(--text-xs); color: var(--color-muted); }
.me form { display: contents; }

.icon-button {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-muted);
  transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.icon-button:hover { background: var(--color-hover); color: var(--color-ink); }
.icon-button:active { transform: translateY(1px); }
.icon-button .icon-done { display: none; }
.icon-button[data-copied] .icon-copy { display: none; }
.icon-button[data-copied] .icon-done { display: block; color: var(--color-ok); }

.main {
  min-width: 0; margin: var(--space-3) var(--space-3) var(--space-3) 0;
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.main:focus { outline: none; }

/* ---------- Page ---------- */
.page {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-10) var(--space-10) var(--space-16);
  animation: page-in var(--dur-standard) var(--ease-enter) both;
}
.page-narrow { max-width: 860px; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.page-title-block { min-width: 0; }
.page-title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl);
  letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere;
}
.page-sub { margin-top: var(--space-2); color: var(--color-muted); max-width: 62ch; }
.section-title { font-size: var(--text-md); font-weight: 650; margin-bottom: var(--space-4); }

/* ---------- Controls ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: var(--text-base); font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button .icon { width: 17px; height: 17px; }
.button-primary { background: var(--color-accent); color: var(--color-on-accent); }
.button-primary:hover { background: var(--color-accent-hover); }
.button-quiet { background: var(--color-surface); border-color: var(--color-line-strong); color: var(--color-ink); }
.button-quiet:hover { background: var(--color-hover); }
.button-danger { background: none; border-color: var(--color-line-strong); color: var(--color-danger); }
.button-danger:hover { background: var(--color-danger-soft); border-color: var(--color-danger); }
.button-small { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); font-weight: 500; }
.button-block { width: 100%; }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field-grow { flex: 1 1 260px; }
.field-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); padding: 0; }
.field-hint { font-size: var(--text-xs); color: var(--color-muted); }
.input {
  height: 42px; padding: 0 var(--space-3); width: 100%;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-ink); font-size: var(--text-base);
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.input::placeholder { color: var(--color-faint); }
.input:hover { border-color: var(--color-faint); }
.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.input:user-invalid { border-color: var(--color-danger); }
select.input { padding-right: var(--space-8); }
.input-code { font-family: var(--font-mono); font-size: 1.375rem; letter-spacing: .35em; text-align: center; height: 52px; }

.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.notice-error { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid var(--color-danger-soft); }
.notice-ok { background: var(--color-ok-soft); color: var(--color-ok); margin-bottom: var(--space-5); }
.notice-warn { background: var(--color-warn-soft); color: var(--color-warn); }
.notice-warn a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.notice[hidden] { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.chip .icon { width: 13px; height: 13px; }
.chip-neutral { background: var(--color-sunken); color: var(--color-muted); border: 1px solid var(--color-line); }
.chip-role { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.chip-ok { background: var(--color-ok-soft); color: var(--color-ok); }
.chip-muted { background: var(--color-sunken); color: var(--color-muted); }

.meta-item { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.meta-item .icon { width: 15px; height: 15px; }

.filter {
  display: flex; align-items: center; gap: var(--space-2); height: 38px; width: min(280px, 100%);
  padding: 0 var(--space-2) 0 var(--space-3); color: var(--color-muted);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface);
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.filter:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
input[type="search"]::-webkit-search-cancel-button { appearance: none; }
.filter input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 100%; font-size: var(--text-sm); }
.filter .icon { width: 16px; height: 16px; }

/* ---------- Cards ---------- */
.card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.card + .card { margin-top: var(--space-5); }
.card-pad { padding: var(--space-6); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 52px; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-line);
}
.card-title { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-base); }
.card-title .icon { width: 16px; height: 16px; color: var(--color-muted); }
.card-meta { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.card-link { font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-empty { padding: var(--space-8) var(--space-5); color: var(--color-muted); text-align: center; }

/* ---------- Repositories list ---------- */
.repo-list { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
.repo-row + .repo-row { border-top: 1px solid var(--color-line); }
.repo-link {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  transition: background-color var(--dur-quick) var(--ease);
}
.repo-link:hover { background: var(--color-hover); }
.repo-link:hover .repo-name { color: var(--color-accent-ink); }
.repo-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 10px; background: var(--color-accent-soft); color: var(--color-accent);
}
.repo-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.repo-name { font-weight: 650; font-size: var(--text-md); letter-spacing: -.005em; transition: color var(--dur-quick) var(--ease); }
.repo-desc { color: var(--color-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-meta { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.filter-empty { padding: var(--space-6) 0; color: var(--color-muted); text-align: center; }

.empty, .empty-repo {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
}
.empty { border: 1px dashed var(--color-line-strong); border-radius: var(--radius); }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--color-accent-soft); color: var(--color-accent); }
.empty-icon .icon { width: 22px; height: 22px; }
.empty-title { font-weight: 650; font-size: var(--text-lg); }
.empty-text { color: var(--color-muted); max-width: 46ch; }
.empty-repo .clone, .empty-repo .snippet { flex: none; width: min(560px, 100%); text-align: left; }

/* ---------- Repository ---------- */
.repo-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8);
  margin-bottom: var(--space-8); flex-wrap: wrap;
}
.repo-head-main { min-width: 0; flex: 1 1 360px; }
.repo-title a:hover { color: var(--color-accent-ink); }
.repo-head-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-muted); min-width: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.crumbs li + li::before { content: '/'; color: var(--color-faint); margin-right: var(--space-1); }
.crumbs a { color: var(--color-ink-soft); font-weight: 500; }
.crumbs a:hover { color: var(--color-accent); }
.crumbs [aria-current] { color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; }
.crumbs-top { margin-bottom: var(--space-2); }

.clone { flex: 0 1 400px; min-width: 0; }
.clone-label { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2); }
.clone-field {
  display: flex; align-items: center; gap: var(--space-1); height: 40px; padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-sunken);
}
.clone-url { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: var(--text-sm); scrollbar-width: none; }
.clone-url::-webkit-scrollbar { display: none; }
.clone-hint { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
.clone-hint a { color: var(--color-accent); font-weight: 500; }

.repo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.repo-grid-single { grid-template-columns: minmax(0, 1fr); }
.repo-aside { position: sticky; top: var(--space-6); }

.files { display: flex; flex-direction: column; }
.file-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 42px; padding: 0 var(--space-5); font-size: var(--text-base);
  transition: background-color var(--dur-quick) var(--ease);
}
.file-row + .file-row { border-top: 1px solid var(--color-line); }
a.file-row:hover { background: var(--color-hover); }
a.file-row:hover .file-name span { color: var(--color-accent-ink); }
.file-name { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.file-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-name .icon { width: 17px; height: 17px; color: var(--color-faint); }
.file-dir .icon, .file-up .icon { color: var(--color-accent); }
.file-dir span { font-weight: 550; }
.file-size { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }

.commits { display: flex; flex-direction: column; padding: var(--space-2) 0; }
.commit { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5); }
.commit-dot { width: 9px; height: 9px; margin-top: 7px; flex: none; border-radius: 50%; border: 2px solid var(--color-accent); background: var(--color-surface); position: relative; z-index: 1; }
.commit:not(:last-child)::before { content: ''; position: absolute; left: calc(var(--space-5) + 4px); top: 22px; bottom: -10px; width: 1px; background: var(--color-line-strong); }
.commit-body { flex: 1; min-width: 0; }
.commit-subject { font-weight: 500; overflow-wrap: anywhere; }
.commit-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-sm); color: var(--color-muted); }
.commit-sha { font-size: var(--text-xs); color: var(--color-muted); padding: 2px 6px; border-radius: 6px; background: var(--color-sunken); border: 1px solid var(--color-line); }
.commits-compact .commit-subject { font-size: var(--text-sm); }
.commits-compact .commit-meta { font-size: var(--text-xs); flex-wrap: nowrap; white-space: nowrap; }
.commits-compact .commit-meta span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Branch menu */
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-current { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: var(--text-xs); }
.menu-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; max-height: 320px; overflow: auto;
  padding: var(--space-2); border-radius: var(--radius); background: var(--color-surface);
  border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-pop);
  animation: pop-in var(--dur-quick) var(--ease-enter) both;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-title { padding: var(--space-1) var(--space-2) var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.menu-item { display: flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-2); border-radius: 6px; font-family: var(--font-mono); font-size: var(--text-sm); }
.menu-item:hover { background: var(--color-hover); }
.menu-item .icon { width: 16px; height: 16px; color: var(--color-accent); }

/* ---------- Prose (README / Markdown) ---------- */
.prose { padding: var(--space-6) var(--space-8) var(--space-8); max-width: 80ch; color: var(--color-ink-soft); line-height: 1.7; overflow-wrap: break-word; }
.prose > * + * { margin-top: var(--space-4); }
.prose > :first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--color-ink); font-family: var(--font-body); font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.prose h1 { font-size: var(--text-2xl); font-weight: 700; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-8); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-line); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-6); }
.prose a { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { color: var(--color-ink); font-weight: 650; }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-1); }
.prose li::marker { color: var(--color-faint); }
.prose :not(pre) > code { padding: .15em .4em; border-radius: 6px; background: var(--color-sunken); border: 1px solid var(--color-line); color: var(--color-ink); font-size: .86em; }
.prose pre { padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); background: var(--color-code-bg); border: 1px solid var(--color-line); overflow-x: auto; font-size: var(--text-sm); line-height: 1.6; }
.prose blockquote { margin: var(--space-4) 0 0; padding: var(--space-1) var(--space-4); border-left: 3px solid var(--color-accent-line); color: var(--color-muted); }
.prose hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-8) 0; }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; font-size: var(--text-sm); }
.prose th, .prose td { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); text-align: left; }
.prose th { background: var(--color-sunken); color: var(--color-ink); font-weight: 600; }
.prose img { border-radius: var(--radius-sm); }
.md-image-omitted { color: var(--color-muted); font-size: var(--text-sm); }
.plain-text { padding: var(--space-6); white-space: pre-wrap; font-size: var(--text-sm); }
.readme { margin-top: var(--space-6); }

/* ---------- Code view ---------- */
.blob-head { flex-wrap: wrap; }
.blob-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.blob-note { padding: var(--space-10) var(--space-5); text-align: center; color: var(--color-muted); }
.blob-note a { color: var(--color-accent); font-weight: 500; }
.prose-blob { max-width: none; }
.code { overflow-x: auto; background: var(--color-code-bg); }
.code-table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; }
.code-table tr:first-child td { padding-top: var(--space-3); }
.code-table tr:last-child td { padding-bottom: var(--space-3); }
.line-number { width: 1%; min-width: 52px; padding: 0 var(--space-3) 0 var(--space-4); text-align: right; vertical-align: top; user-select: none; position: sticky; left: 0; background: var(--color-code-bg); }
.line-number a { color: var(--color-faint); }
.line-number a:hover { color: var(--color-accent); }
.line-code { padding: 0 var(--space-6) 0 var(--space-3); white-space: pre; color: var(--color-ink); }
.code-table tr:target td { background: var(--color-target); }
.code-table tr:target .line-number a { color: var(--color-warn); }

.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-built_in, .hljs-type { color: var(--syntax-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-tag { color: var(--syntax-string); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--syntax-number); }
.hljs-comment, .hljs-quote, .hljs-deletion { color: var(--syntax-comment); }
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--syntax-title); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-property, .hljs-params { color: var(--syntax-attr); }
.hljs-meta, .hljs-doctag, .hljs-tag { color: var(--syntax-meta); }
.hljs-strong { font-weight: 700; }
.hljs-emphasis { font-style: italic; }

/* ---------- Tokens ---------- */
.created { border-color: var(--color-accent-line); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); background: linear-gradient(var(--color-accent-soft), var(--color-accent-soft)), var(--color-surface); }
.created + .card { margin-top: 0; }
.created-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 650; margin-bottom: var(--space-4); }
.created-title .icon { color: var(--color-accent); }
.clone-field-strong { background: var(--color-surface); height: 46px; }
.clone-field-strong .clone-url { font-size: var(--text-base); color: var(--color-ink); }
.created-hint { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.snippet { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-code-bg); border: 1px solid var(--color-line); font-size: var(--text-sm); overflow-x: auto; }

.scope-picker { border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.scope-pick { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); flex-wrap: wrap; }
.scope-pick + .scope-pick { border-top: 1px solid var(--color-line); }
.scope-pick-name { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 550; }
.scope-pick-name .icon { width: 16px; height: 16px; color: var(--color-accent); }
.segmented { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--color-sunken); border: 1px solid var(--color-line); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 5px var(--space-3); border-radius: 7px; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease); }
.segmented label:hover span { color: var(--color-ink); }
.segmented input:checked + span { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 2px rgba(13, 20, 36, .1), 0 0 0 1px var(--color-line); }
.segmented input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.segmented .is-disabled { cursor: not-allowed; }
.segmented .is-disabled span { color: var(--color-faint); text-decoration: line-through; }

.token-list { display: flex; flex-direction: column; }
.token-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.token-node + .token-node { border-top: 1px solid var(--color-line); }
.token-children { margin: 0 var(--space-5) var(--space-4) calc(var(--space-5) + var(--space-3)); border-left: 2px solid var(--color-line); }
.token-children .token-row { padding-top: var(--space-3); padding-bottom: var(--space-3); }
/* Security keys (R-17) */
.key-status:has(.notice:not([hidden])) { padding: var(--space-3) var(--space-5) 0; }
.key-list { display: flex; flex-direction: column; }
.key-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.key-row + .key-row { border-top: 1px solid var(--color-line); }
.key-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-accent); }
.key-icon .icon { width: 18px; height: 18px; }
.key-main { flex: 1; min-width: 0; }
.key-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-weight: 600; overflow-wrap: anywhere; }
.key-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-muted); }
.step-up { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.step-up .page-sub { margin-top: 0; }
.step-up-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.auth-card .disclosure { margin-top: var(--space-5); }
.check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-soft); }
.check input { margin-top: 3px; inline-size: 16px; block-size: 16px; accent-color: var(--color-accent); flex: none; }
.token-row.is-dead { opacity: .62; }
.token-main { min-width: 0; }
.token-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-weight: 600; }
.token-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-muted); }
.token-meta code { color: var(--color-ink-soft); }
.scopes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.scope { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--space-2); border-radius: 6px; border: 1px solid var(--color-line); font-size: var(--text-xs); font-weight: 600; }
.scope span { font-weight: 500; color: var(--color-muted); }
.scope-write span { color: var(--color-warn); }

/* ---------- Errors ---------- */
.flow-index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-sunken); color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }

.error-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-16) 0; }
.error-bare { max-width: 560px; margin: 0 auto; padding: var(--space-16) var(--space-6); }
.error-code { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-accent); }
.error-state .button { margin-top: var(--space-4); }

/* ---------- Auth ---------- */
.auth-body { background: var(--color-panel); }
.auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; min-height: 100dvh; }
.auth-aside {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-12);
  padding: var(--space-10) var(--space-12); background: var(--color-aside); border-right: 1px solid var(--color-line); color: var(--color-aside-ink); overflow: hidden;
}
.auth-aside::after {
  content: ''; position: absolute; inset: auto -20% -35% auto; width: 520px; height: 520px; border-radius: 50%;
  border: 1px solid var(--color-aside-line); box-shadow: 0 0 0 64px rgba(255, 255, 255, .02), 0 0 0 128px rgba(255, 255, 255, .015);
  pointer-events: none;
}
.auth-aside .brand-word { color: var(--color-aside-ink); }
.auth-aside .brand-by { color: var(--color-aside-muted); }
.auth-aside .brand-ia { color: var(--sg-blue-light); }
.auth-pitch { position: relative; z-index: 1; max-width: 26rem; }
.auth-claim { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.45; letter-spacing: -.005em; }
.auth-claim .accent { color: var(--sg-blue-light); }
.auth-flow { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); }
.auth-flow li { position: relative; display: flex; align-items: center; gap: var(--space-4); color: var(--color-aside-muted); font-size: var(--text-base); }
.auth-flow li:not(:last-child)::after { content: ''; position: absolute; left: 4px; top: 18px; height: calc(var(--space-4) + 4px); width: 1px; background: var(--color-aside-line); }
.flow-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sg-blue-light); flex: none; }
.auth-flow li:last-child { color: var(--color-aside-ink); font-weight: 600; }
.auth-flow li:last-child .flow-dot { background: var(--sg-blue-light); }
.auth-foot { position: relative; z-index: 1; font-size: var(--text-xs); letter-spacing: .06em; color: var(--color-aside-muted); }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); }
.auth-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--space-5); animation: page-in var(--dur-slow) var(--ease-enter) both; }
.auth-card-wide { width: min(520px, 100%); }
.auth-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.2; }
.auth-lede { color: var(--color-muted); }
.auth-lede b { color: var(--color-ink); font-weight: 600; }
.auth-note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.auth-note .icon { width: 16px; height: 16px; color: var(--color-faint); }
.auth-note a { color: var(--color-accent); font-weight: 500; }

.enrol-steps { display: flex; flex-direction: column; gap: var(--space-6); }
.enrol-step { display: flex; gap: var(--space-4); }
.step-number { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-ink); font-weight: 650; font-size: var(--text-sm); }
.enrol-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.step-title { font-weight: 600; padding-top: 3px; }
.qr-frame { width: 200px; padding: var(--space-3); border-radius: var(--radius); background: var(--color-qr-bg); border: 1px solid var(--color-line-strong); }
.qr { display: block; width: 100%; height: auto; color: var(--color-qr); }
.qr path { fill: currentColor; }
.qr-bg { fill: var(--color-qr-bg); }
.disclosure summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-accent); font-weight: 500; width: fit-content; }
.disclosure[open] summary { margin-bottom: var(--space-3); }
.copy-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.secret { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-sunken); border: 1px solid var(--color-line); font-size: var(--text-sm); letter-spacing: .06em; overflow-wrap: anywhere; }

/* ---------- Quick switcher ---------- */
.switcher {
  width: min(560px, calc(100vw - 32px)); max-height: min(480px, 70vh); margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink);
  box-shadow: var(--shadow-pop); overflow: hidden;
}
.switcher[open] { display: flex; flex-direction: column; animation: pop-in var(--dur-quick) var(--ease-enter) both; }
.switcher::backdrop { background: var(--color-backdrop); backdrop-filter: blur(2px); }
.switcher-field { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); height: 56px; border-bottom: 1px solid var(--color-line); color: var(--color-muted); }
.switcher-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-size: var(--text-md); color: var(--color-ink); }
.switcher-list { overflow-y: auto; padding: var(--space-2); }
.switcher-list a { display: flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); }
.switcher-list a .icon { color: var(--color-accent); }
.switcher-list [aria-selected="true"] a, .switcher-list a:hover { background: var(--color-hover); }
.switcher-name { font-weight: 600; flex: none; }
.switcher-desc { color: var(--color-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-empty { padding: var(--space-6); text-align: center; color: var(--color-muted); }

/* ---------- Tabs (repo sections, change states) ---------- */
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  color: var(--color-muted); font-size: var(--text-sm); font-weight: 550; white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.tab .icon { width: 16px; height: 16px; }
.tab:hover { background: var(--color-hover); color: var(--color-ink); }
.tab.is-current { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.count { min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-sunken); border: 1px solid var(--color-line); font-size: var(--text-xs); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.tab.is-current .count { background: var(--color-surface); border-color: var(--color-accent-line); }
.repo-tabs { margin: calc(-1 * var(--space-3)) 0 var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.page > .state-tabs { margin-bottom: var(--space-4); }

/* ---------- Change lists ---------- */
.change-list { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
.change-row + .change-row { border-top: 1px solid var(--color-line); }
.change-link { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); transition: background-color var(--dur-quick) var(--ease); }
.change-link:hover { background: var(--color-hover); }
.change-link:hover .change-row-title { color: var(--color-accent-ink); }
.change-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; }
.change-icon .icon { width: 17px; height: 17px; }
.change-icon-open { background: var(--color-accent-soft); color: var(--color-accent); }
.change-icon-merged { background: var(--color-merged-soft); color: var(--color-merged); }
.change-icon-closed { background: var(--color-sunken); color: var(--color-muted); }
.change-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.change-row-title { font-weight: 600; overflow-wrap: anywhere; transition: color var(--dur-quick) var(--ease); }
.change-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.change-row-meta b { font-weight: 550; color: var(--color-ink-soft); }
.change-ref { font-variant-numeric: tabular-nums; color: var(--color-ink-soft); font-weight: 550; }
.change-side { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.branch-pair { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.branch-pair code { padding: 1px 6px; border-radius: 6px; background: var(--color-sunken); border: 1px solid var(--color-line); color: var(--color-ink-soft); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.branch-pair .icon { width: 14px; height: 14px; color: var(--color-faint); flex: none; }
.sha { font-size: var(--text-xs); color: var(--color-ink-soft); }
.chip-open { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.chip-merged { background: var(--color-merged-soft); color: var(--color-merged); }
.chip-closed { background: var(--color-sunken); color: var(--color-muted); border: 1px solid var(--color-line); }
.chip-warn { background: var(--color-warn-soft); color: var(--color-warn); }
.pager { display: flex; justify-content: center; gap: var(--space-1); margin-top: var(--space-5); }
.pager-page, .pager-step { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 550; font-variant-numeric: tabular-nums; }
.pager a:hover { background: var(--color-hover); }
.pager-page.is-current { background: var(--color-accent-soft); color: var(--color-accent-ink); }

/* ---------- Change page ---------- */
.change-head { margin-bottom: var(--space-8); }
.change-title { max-width: 32ch; }
.change-number { color: var(--color-faint); font-family: var(--font-body); font-weight: 400; }
.change-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.change-head-meta b { font-weight: 600; color: var(--color-ink-soft); }
.change-head-meta .branch-pair code { max-width: 48ch; }
.change-flow { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.change-flow .card + .card { margin-top: 0; }
.change-flow .commits-compact .commit-meta { flex-wrap: wrap; white-space: normal; }
.flow-card .card-title .flow-index { width: 22px; height: 22px; background: var(--color-accent-soft); color: var(--color-accent-ink); }
.pending { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }
.pending > .icon { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--color-faint); }
.pending-title { font-weight: 600; color: var(--color-ink-soft); }
.pending-text { margin-top: 2px; font-size: var(--text-sm); color: var(--color-muted); max-width: 62ch; }
.card-note { padding: 0 var(--space-5) var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.change-flow .prose { padding: var(--space-5) var(--space-6) var(--space-6); }

/* Steps 2 and 3: a heading over the evidence and advice cards Actions draws */
.change-evidence { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.flow-step { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.flow-step-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; min-height: 28px; }
.flow-step-title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: 600; }
.flow-step-title .flow-index { width: 22px; height: 22px; background: var(--color-accent-soft); color: var(--color-accent-ink); }
.flow-step-head .card-link code { font-size: .9em; }
.flow-step .verdict-bar { margin-bottom: 0; }
.flow-step .card + .card, .flow-step .card + .model-directed, .flow-step .model-directed + .ai-card { margin-top: 0; }
.flow-step .model-directed { margin-top: 0; }
.ai-status { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }
.ai-status .state-mark { margin-top: 1px; }

/* Decision card */
.decision-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.decision-empty, .decision-note, .decision-detail { font-size: var(--text-sm); color: var(--color-muted); }
.decision-outcome { display: flex; align-items: flex-start; gap: var(--space-2); }
.decision-outcome .icon { color: var(--color-merged); margin-top: 3px; }
.decision-outcome b { font-weight: 600; }
.approvals { display: flex; flex-direction: column; gap: var(--space-2); }
.approval { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-soft); }
.approval .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--color-ok); flex: none; }
.approval b { font-weight: 600; color: var(--color-ink); }
.approval.is-stale { color: var(--color-muted); }
.approval.is-stale .icon { color: var(--color-faint); }
.blockers { border-radius: var(--radius-sm); background: var(--color-sunken); border: 1px solid var(--color-line); padding: var(--space-3) var(--space-4); }
.blockers-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2); }
.blockers li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-soft); }
.blockers li + li { margin-top: var(--space-2); }
.blockers .icon { width: 15px; height: 15px; margin-top: 3px; color: var(--color-warn); flex: none; }
.decision-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.decision-actions code { font-size: .85em; }
.decision-footer { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.notice-warn { background: var(--color-warn-soft); color: var(--color-warn); border: 1px solid var(--color-warn-soft); display: flex; align-items: flex-start; gap: var(--space-2); }
.notice-warn .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.conflict { flex-direction: column; }
.notice-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.conflict-files { display: flex; flex-direction: column; gap: 2px; padding-left: var(--space-6); }
.conflict-files code { color: var(--color-ink-soft); }
.conflict .snippet { width: 100%; margin-top: 0; color: var(--color-ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Diff */
.diff-fold { border-top: 1px solid var(--color-line); }
.diff-summary {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-5);
  cursor: pointer; list-style: none; font-weight: 600; color: var(--color-accent);
  transition: background-color var(--dur-quick) var(--ease);
}
.diff-summary::-webkit-details-marker { display: none; }
.diff-summary::after { content: '▸'; margin-left: auto; color: var(--color-faint); transition: transform var(--dur-quick) var(--ease); }
.diff-fold[open] > .diff-summary::after { transform: rotate(90deg); }
.diff-summary:hover { background: var(--color-hover); }
.diff-summary .icon { width: 17px; height: 17px; }
.diff-summary-meta { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.diff-body { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); }
.diff-files { border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; }
.diff-files li + li { border-top: 1px solid var(--color-line); }
.diff-files a { display: flex; align-items: center; gap: var(--space-3); min-height: 38px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.diff-files a:hover { background: var(--color-hover); }
.diff-files .diff-path { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-xs); }
.file-status { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 5px; font-size: 11px; font-weight: 700; font-family: var(--font-mono); background: var(--color-sunken); color: var(--color-muted); }
.file-status-added { background: var(--color-ok-soft); color: var(--color-ok); }
.file-status-deleted { background: var(--color-danger-soft); color: var(--color-danger); }
.file-status-renamed, .file-status-modified { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.diff-stat { white-space: nowrap; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.stat-add { color: var(--color-ok); font-weight: 600; }
.stat-del { color: var(--color-danger); font-weight: 600; }
.diff-file { border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; scroll-margin-top: var(--space-6); }
.diff-file-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-sunken); border-bottom: 1px solid var(--color-line); }
.diff-file-head .diff-path { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; }
.diff-old-path { color: var(--color-muted); font-weight: 400; }
.diff-empty { padding: var(--space-5); text-align: center; font-size: var(--text-sm); color: var(--color-muted); }
.diff-empty a { color: var(--color-accent); font-weight: 500; }
.diff-table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.diff-num { width: 1%; min-width: 44px; padding: 0 var(--space-2); text-align: right; vertical-align: top; color: var(--color-faint); user-select: none; font-variant-numeric: tabular-nums; }
.diff-text { padding: 0 var(--space-4) 0 0; white-space: pre; color: var(--color-ink); }
.diff-sign { display: inline-block; width: 2ch; text-align: center; color: var(--color-faint); user-select: none; }
.diff-add .diff-text { background: var(--color-diff-add); }
.diff-add .diff-num { background: var(--color-diff-add-gutter); }
.diff-add .diff-sign { color: var(--color-ok); }
.diff-del .diff-text { background: var(--color-diff-del); }
.diff-del .diff-num { background: var(--color-diff-del-gutter); }
.diff-del .diff-sign { color: var(--color-danger); }
.diff-hunk td { background: var(--color-diff-hunk); color: var(--color-muted); padding-top: 2px; padding-bottom: 2px; }
.diff-hunk .diff-text { padding-left: var(--space-3); }
.diff-note .diff-text { color: var(--color-muted); font-style: italic; padding-left: var(--space-3); }

/* Commit signatures */
.sig { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; white-space: nowrap; }
.sig .icon { width: 12px; height: 12px; }
.sig-ok { background: var(--color-ok-soft); color: var(--color-ok); }
.sig-none { border: 1px solid var(--color-line-strong); color: var(--color-muted); }

/* ---------- Forms for changes, keys and rules ---------- */
.textarea { height: auto; min-height: 120px; padding: var(--space-3); line-height: 1.5; resize: vertical; }
.input-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.input-number { width: 100%; min-width: 120px; }
.branch-row { align-items: flex-end; }
.branch-arrow { display: grid; place-items: center; height: 42px; color: var(--color-faint); }
.page-foot { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-muted); }
.row-actions { display: flex; gap: var(--space-2); flex: none; }
.inline-form { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.rules-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.rules-grid .card + .card { margin-top: 0; }
.rules-side { display: flex; flex-direction: column; gap: var(--space-5); }
.rule-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.rule-list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-ink-soft); }
.rule-list .icon { width: 17px; height: 17px; margin-top: 3px; color: var(--color-accent); flex: none; }
.rule-list code, .pattern-list code { font-size: .86em; }
.rules-grid .snippet { white-space: pre-wrap; overflow-wrap: anywhere; }
.pattern-list { display: flex; flex-direction: column; margin-bottom: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.pattern-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); }
.pattern-list li + li { border-top: 1px solid var(--color-line); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .repo-grid { grid-template-columns: minmax(0, 1fr); }
  .repo-aside { position: static; }
  .page { padding: var(--space-8) var(--space-6) var(--space-12); }
}

@media (max-width: 760px) {
  .shell { display: block; }
  .rail {
    position: sticky; top: 0; z-index: 30; height: var(--bar-height); flex-direction: row; align-items: center; gap: var(--space-1);
    padding: 0 var(--space-3) 0 var(--space-4); background: var(--color-bg); border-bottom: 1px solid var(--color-line);
  }
  .rail .brand { padding: 0; margin-right: auto; }
  .search-trigger { width: 38px; padding: 0; justify-content: center; border: 0; background: none; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .areas {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0;
    padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom));
    background: var(--color-panel); border-top: 1px solid var(--color-line);
  }
  .area { flex: 1; flex-direction: column; justify-content: center; gap: 2px; height: 54px; padding: 0; font-size: 11px; }
  .area-label { flex: none; }
  .area.is-current { background: none; box-shadow: none; color: var(--color-accent-ink); }
  .account { margin: 0; flex-direction: row; align-items: center; gap: 0; }
  .rail-link { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .rail-link span { display: none; }
  .rail-link.is-current { box-shadow: none; background: var(--color-hover); }
  .me { margin: 0; padding: 0; border: 0; gap: 0; }
  .avatar, .me-names { display: none; }
  .main { margin: 0; border: 0; border-radius: 0; box-shadow: none; min-height: calc(100dvh - var(--bar-height)); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .page { padding: var(--space-6) var(--space-4) var(--space-10); }
  .page-head { flex-direction: column; align-items: stretch; gap: var(--space-4); margin-bottom: var(--space-6); }
  .page-head .button { align-self: flex-start; }
  .filter { width: 100%; }
  .filter kbd { display: none; }
  .page-title { font-size: var(--text-xl); }
  .repo-link { align-items: flex-start; flex-wrap: wrap; padding: var(--space-4); gap: var(--space-3); }
  .repo-icon { width: 36px; height: 36px; }
  .repo-main { flex: 1 1 calc(100% - 52px); }
  .repo-desc { white-space: normal; }
  .repo-meta { flex: 1 1 100%; flex-wrap: wrap; padding-left: 48px; gap: var(--space-2); }
  .repo-head { gap: var(--space-5); margin-bottom: var(--space-6); }
  .clone { flex-basis: 100%; }
  .card-head { padding: var(--space-3) var(--space-4); }
  .file-row { padding: 0 var(--space-4); }
  .prose { padding: var(--space-5) var(--space-4) var(--space-6); }
  .prose h1 { font-size: var(--text-xl); }
  .prose h2 { font-size: var(--text-lg); }
  .commit { padding: var(--space-3) var(--space-4); }
  .commit:not(:last-child)::before { left: calc(var(--space-4) + 4px); }
  .token-row { flex-direction: column; padding: var(--space-4); }
  .key-row { flex-wrap: wrap; align-items: flex-start; padding: var(--space-4); }
  .key-main { flex: 1 1 calc(100% - 52px); }
  .key-row form { margin-left: 52px; }
  .card-pad { padding: var(--space-5) var(--space-4); }
  .scope-pick { padding: var(--space-3); }
  .segmented { width: 100%; }
  .segmented label { flex: 1; text-align: center; }
  .change-link { padding: var(--space-4); gap: var(--space-3); flex-wrap: wrap; }
  .change-main { flex: 1 1 calc(100% - 44px); }
  .change-side { padding-left: 44px; }
  .change-side:empty { display: none; }
  .change-head { margin-bottom: var(--space-6); }
  .change-head-meta .meta-item { white-space: normal; }
  .list-toolbar .button { width: 100%; }
  .pending, .ai-status { padding: var(--space-4); }
  .change-flow .prose { padding: var(--space-4); }
  .decision-body { padding: var(--space-4); }
  .diff-summary { padding: var(--space-3) var(--space-4); }
  .diff-body { padding: 0 var(--space-3) var(--space-4); }
  .branch-row { flex-direction: column; align-items: stretch; }
  .branch-row .field-grow { flex: none; }
  .branch-arrow { height: auto; transform: rotate(90deg); }
  .rules-grid { grid-template-columns: minmax(0, 1fr); }
  .inline-form .button { width: 100%; }
  .row-actions { width: 100%; }

  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-aside { padding: var(--space-5) var(--space-4) var(--space-6); gap: var(--space-5); }
  .auth-aside::after { width: 260px; height: 260px; inset: -40% -25% auto auto; }
  .auth-claim { font-size: 1.05rem; }
  .auth-flow, .auth-foot { display: none; }
  .auth-panel { align-items: flex-start; padding: var(--space-8) var(--space-4) var(--space-10); }
  .auth-title { font-size: var(--text-xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}