/* gitflare — "The Maker's Desk" world, shared with Makerfirst.
   Tokens are the same names and values as Makerfirst's app.css so both products read as
   siblings. Colors are OKLCH only; both themes resolve through light-dark(). */
@import url("/fonts/fonts.css");

:root {
  color-scheme: light dark;

  /* four surfaces, one ordered ramp: well → bg → surface → surface-2 */
  --bg: light-dark(oklch(0.944 0.016 88), oklch(0.22 0.018 160));
  --surface: light-dark(oklch(0.982 0.007 88), oklch(0.27 0.02 160));
  --surface-2: light-dark(oklch(1 0 0), oklch(0.32 0.022 160));
  --well: light-dark(oklch(0.918 0.015 88), oklch(0.185 0.016 160));
  --border: light-dark(oklch(0.878 0.018 88), oklch(0.34 0.02 160));
  --border-strong: light-dark(oklch(0.6 0.025 90), oklch(0.59 0.025 155));
  --ink: light-dark(oklch(0.26 0.035 162), oklch(0.95 0.012 130));
  --muted: light-dark(oklch(0.48 0.028 155), oklch(0.73 0.02 145));

  --primary: light-dark(oklch(0.45 0.09 168), oklch(0.6 0.1 165));
  --primary-deep: light-dark(oklch(0.39 0.09 168), oklch(0.66 0.1 165));
  --on-primary: light-dark(oklch(0.985 0.005 120), oklch(0.2 0.03 165));
  --primary-text: light-dark(oklch(0.42 0.09 168), oklch(0.8 0.09 165));
  --primary-tint: light-dark(oklch(0.92 0.04 168), oklch(0.34 0.05 168));

  --attention: light-dark(oklch(0.75 0.14 80), oklch(0.84 0.15 86));
  --attention-ink: light-dark(oklch(0.47 0.11 72), oklch(0.88 0.12 88));
  --attention-tint: light-dark(oklch(0.93 0.06 88), oklch(0.33 0.06 92));
  --on-attention: light-dark(oklch(0.28 0.06 70), oklch(0.25 0.06 70));

  --success: light-dark(oklch(0.47 0.12 155), oklch(0.76 0.12 155));
  --success-tint: light-dark(oklch(0.93 0.05 155), oklch(0.32 0.05 155));
  --danger: light-dark(oklch(0.51 0.17 27), oklch(0.74 0.14 27));
  --danger-tint: light-dark(oklch(0.93 0.03 27), oklch(0.33 0.055 27));
  --progress: light-dark(oklch(0.49 0.1 240), oklch(0.76 0.09 240));
  --progress-tint: light-dark(oklch(0.93 0.03 240), oklch(0.32 0.05 240));
  /* gitflare's two object hues: branches ride the knowledge teal, tags the capture terracotta */
  --branch: light-dark(oklch(0.47 0.08 200), oklch(0.8 0.09 200));
  --branch-tint: light-dark(oklch(0.93 0.035 200), oklch(0.32 0.045 200));
  --tag: light-dark(oklch(0.47 0.11 55), oklch(0.8 0.11 58));
  --tag-tint: light-dark(oklch(0.93 0.045 58), oklch(0.33 0.05 58));

  --hover: color-mix(in oklab, var(--ink) 5%, transparent);

  --shadow-rest:
    0 1px 2px light-dark(oklch(0.3 0.04 160 / 0.1), oklch(0 0 0 / 0.45)),
    0 3px 6px -2px light-dark(oklch(0.3 0.04 160 / 0.08), oklch(0 0 0 / 0.5)),
    0 14px 28px -14px light-dark(oklch(0.3 0.04 160 / 0.2), oklch(0 0 0 / 0.55));
  --shadow-raised:
    inset 0 1px 0 light-dark(oklch(1 0 0 / 0.75), oklch(1 0 0 / 0.07)),
    0 1px 2px light-dark(oklch(0.3 0.04 160 / 0.16), oklch(0 0 0 / 0.5)),
    0 3px 6px -3px light-dark(oklch(0.3 0.04 160 / 0.24), oklch(0 0 0 / 0.5));
  --shadow-overlay:
    0 6px 16px -4px light-dark(oklch(0.3 0.04 160 / 0.16), oklch(0 0 0 / 0.55)),
    0 32px 64px -24px light-dark(oklch(0.3 0.04 160 / 0.35), oklch(0 0 0 / 0.7));
  --shadow-press:
    inset 0 1.5px 3px light-dark(oklch(0.3 0.04 160 / 0.16), oklch(0 0 0 / 0.55)),
    inset 0 0 0 1px light-dark(oklch(0.3 0.04 160 / 0.07), oklch(0 0 0 / 0.3));

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;

  --font-sans: "Hanken Grotesk Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: "Spline Sans Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.125rem;

  --z-nav: 20;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ------------------------------------------------------------------ base */
*, ::before, ::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55rem var(--font-sans);
  font-variant-numeric: tabular-nums;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--primary-text); text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-inline-size: 100%; }
code, kbd, pre, samp, .mono { font-family: var(--font-mono); font-weight: 500; }
code, kbd { font-size: 0.875rem; }
::selection { background: var(--primary-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; border-radius: var(--radius-sm); }
input, select, textarea, button { font: inherit; color: inherit; caret-color: var(--primary-text); }
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
[hidden] { display: none !important; }
.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: absolute; inset-inline-start: 1rem; top: -3rem; background: var(--surface-2); color: var(--ink); padding: 0.5rem 1rem; border-radius: 9999px; box-shadow: var(--shadow-overlay); z-index: 100; }
.skip:focus { top: 0.75rem; }

/* type roles */
.t-document { font-size: 2.375rem; font-weight: 550; line-height: 2.8rem; letter-spacing: -0.012em; text-wrap: balance; max-inline-size: 26ch; overflow-wrap: anywhere; }
.t-display { font-size: 2.125rem; font-weight: 600; line-height: 2.5rem; letter-spacing: -0.01em; text-wrap: balance; }
.t-headline { font-size: 1.875rem; font-weight: 600; line-height: 2.25rem; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.t-statement { font-size: 1.3125rem; font-weight: 550; line-height: 1.5; text-wrap: pretty; overflow-wrap: anywhere; }
.t-title { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; }
.t-brand { font-size: 1.1875rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.t-label { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; }
.t-mono { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.break { overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ shell */
.shell { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface); box-shadow: var(--shadow-rest); }
.shell-row { display: flex; align-items: center; gap: 0.75rem; padding-inline: 1.5rem; min-block-size: 3.5rem; }
.shell-row + .shell-row { min-block-size: 3.375rem; border-top: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { inline-size: 1.5rem; block-size: 1.5rem; color: var(--primary); }
.brand-sep { color: var(--border-strong); }
.crumb { display: inline-flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
.crumb a { color: var(--ink); font-weight: 550; }
.crumb .truncate { max-inline-size: 28ch; }
.shell-spacer { flex: 1; }
.identity { display: flex; align-items: center; gap: 0.5rem; }
.avatar { inline-size: 2rem; block-size: 2rem; border-radius: 9999px; background: var(--primary-tint); color: var(--primary-text); display: grid; place-items: center; font-size: 0.875rem; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; box-shadow: var(--shadow-press); flex: none; }
.nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.nav-row .search { margin-inline-start: auto; }
.nav-pill { display: inline-flex; align-items: center; gap: 0.4rem; block-size: 2rem; padding-inline: 0.875rem; border-radius: 9999px; color: var(--muted); font-weight: 500; transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart); }
.nav-pill:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.nav-pill[aria-current="page"] { background: linear-gradient(180deg, var(--primary-deep), var(--primary)); color: var(--on-primary); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 2px 6px -1px light-dark(oklch(0.39 0.09 168 / 0.55), oklch(0 0 0 / 0.55)); }
.nav-pill svg { inline-size: 1rem; block-size: 1rem; }
.nav-dot { inline-size: 3px; block-size: 3px; border-radius: 9999px; background: var(--border-strong); margin-inline: 0.5rem; }
.nav-disclosure { display: none; }
.nav-disclosure summary { list-style: none; cursor: pointer; }
.nav-disclosure summary::-webkit-details-marker { display: none; }

/* search field in the shell */
.search { display: flex; align-items: center; gap: 0.5rem; background: var(--well); box-shadow: var(--shadow-press); border-radius: 9999px; block-size: 2.25rem; padding-inline: 0.875rem; inline-size: min(24rem, 100%); }
.search svg { inline-size: 1rem; block-size: 1rem; color: var(--muted); flex: none; }
.search input { flex: 1; min-inline-size: 0; background: none; border: 0; outline: 0; padding: 0; }
.search input::placeholder { color: var(--muted); }
.search:focus-within { box-shadow: var(--shadow-press), 0 0 0 2px var(--border-strong); }

/* theme switch: a segmented well with a raised knob per option */
.seg { display: inline-flex; gap: 0; background: var(--well); box-shadow: var(--shadow-press); border-radius: 9999px; padding: 0.1875rem; block-size: 2.25rem; }
.seg > * { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding-inline: 0.7rem; border-radius: 9999px; color: var(--muted); font-weight: 500; font-size: 0.875rem; border: 0; background: none; cursor: pointer; min-inline-size: 2rem; }
.seg > *[aria-pressed="true"], .seg > *[aria-current="true"] { background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-raised); }
.seg svg { inline-size: 1rem; block-size: 1rem; }

/* ------------------------------------------------------------------ page */
main { flex: 1; inline-size: 100%; padding: 2.25rem 2.5rem 3rem; overflow-x: clip; }
.page { min-inline-size: 0; }
.page { inline-size: 100%; max-inline-size: 80rem; margin-inline: auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-block-end: 1.5rem; }
.page-head .t-headline { min-inline-size: 0; }
.page-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.section { margin-block-start: 2.25rem; }
.section > h2 { margin-block-end: 0.75rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-inline-size: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.5rem; align-items: start; }
.measure { max-inline-size: 66ch; }

/* ------------------------------------------------------------ objects */
.panel { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); }
.panel-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border-block-end: 1px solid var(--border); color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.panel-head .spacer { flex: 1; }
.panel-body { padding: 1rem 1.25rem; }
.paper { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-rest); padding: 2.25rem 2.75rem; }
.well { background: var(--well); box-shadow: var(--shadow-press); border-radius: var(--radius-lg); }

/* buttons: pills for anything you touch */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; block-size: 2.375rem; padding-inline: 1rem; border-radius: 9999px; border: 1px solid transparent; font-weight: 600; font-size: 0.875rem; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart); }
.btn:hover { text-decoration: none; }
.btn svg { inline-size: 1rem; block-size: 1rem; }
.btn-sm { block-size: 2rem; padding-inline: 0.75rem; }
.btn-primary { background: linear-gradient(180deg, var(--primary-deep), var(--primary)); color: var(--on-primary); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 2px 6px -1px light-dark(oklch(0.39 0.09 168 / 0.55), oklch(0 0 0 / 0.55)); }
.btn-primary:hover { filter: brightness(1.04); }
.btn-secondary { background: var(--surface-2); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-raised); }
.btn-secondary:hover { border-color: var(--border-strong); }
.btn-ghost { background: none; color: var(--ink); }
.btn-ghost:hover { background: var(--hover); }
.btn-danger { background: var(--surface-2); color: var(--danger); border-color: var(--border); box-shadow: var(--shadow-raised); }
.btn-danger:hover { border-color: var(--danger); }
.btn:active:not(:disabled) { background: var(--well); box-shadow: var(--shadow-press); color: var(--ink); filter: none; }
.btn-primary:active:not(:disabled) { color: var(--primary-text); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1875rem 0.625rem; border-radius: 9999px; background: var(--well); color: var(--muted); box-shadow: var(--shadow-press); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; white-space: nowrap; max-inline-size: 100%; }
.chip svg { inline-size: 0.875rem; block-size: 0.875rem; flex: none; }
.chip > .truncate { max-inline-size: 22ch; }
.chip-branch { background: var(--branch-tint); color: var(--branch); box-shadow: none; }
.chip-tag { background: var(--tag-tint); color: var(--tag); box-shadow: none; }
.chip-success { background: var(--success-tint); color: var(--success); box-shadow: none; }
.chip-danger { background: var(--danger-tint); color: var(--danger); box-shadow: none; }
.chip-progress { background: var(--progress-tint); color: var(--progress); box-shadow: none; }
.chip-primary { background: var(--primary-tint); color: var(--primary-text); box-shadow: none; }
.chip-attention { background: linear-gradient(180deg, var(--attention), color-mix(in oklab, var(--attention) 85%, var(--attention-ink))); color: var(--on-attention); box-shadow: var(--shadow-raised); }
.dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 9999px; background: var(--border-strong); box-shadow: 0 0 0 3px var(--well); flex: none; }
.dot-success { background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
.dot-progress { background: var(--progress); box-shadow: 0 0 0 3px var(--progress-tint); }
.dot-danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }

/* fields: carved wells, pill-shaped */
.field { display: flex; flex-direction: column; gap: 0.35rem; min-inline-size: 0; }
.field > span, label.t-label { color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.field .hint { color: var(--muted); font-size: 0.875rem; }
.input, .select, .textarea { background: var(--well); color: var(--ink); box-shadow: var(--shadow-press); border: 0; border-radius: 9999px; block-size: 2.25rem; padding-inline: 0.875rem; inline-size: 100%; min-inline-size: 0; }
.input::placeholder { color: var(--muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 0; box-shadow: var(--shadow-press), 0 0 0 2px var(--border-strong); }
.textarea { border-radius: var(--radius-lg); block-size: auto; min-block-size: 5.5rem; padding: 0.625rem 0.875rem; resize: vertical; line-height: 1.5rem; }
.select { appearance: none; padding-inline-end: 2.25rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23777' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; }
.input.mono { font-family: var(--font-mono); font-size: 0.875rem; }
.input:disabled, .select:disabled { opacity: 0.55; cursor: not-allowed; }
.check { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.check input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--primary); margin: 0; }
.form-row { display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; }
.form-row > .field { flex: 1 1 12rem; }
.form-error { color: var(--danger); font-size: 0.875rem; font-weight: 500; }
.notice { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-rest); }
.notice svg { inline-size: 1.125rem; block-size: 1.125rem; flex: none; margin-block-start: 0.15rem; }
.notice-success { background: var(--success-tint); color: var(--success); box-shadow: none; }
.notice-danger { background: var(--danger-tint); color: var(--danger); box-shadow: none; }
.notice-attention { background: var(--attention-tint); color: var(--attention-ink); box-shadow: none; }
.notice-info { background: var(--progress-tint); color: var(--progress); box-shadow: none; }
.secret { font-family: var(--font-mono); font-size: 0.875rem; padding: 0.75rem 1rem; background: var(--well); box-shadow: var(--shadow-press); border-radius: var(--radius-md); overflow-wrap: anywhere; user-select: all; }
.clone { display: flex; align-items: center; gap: 0.5rem; background: var(--well); box-shadow: var(--shadow-press); border-radius: 9999px; block-size: 2.375rem; padding-inline: 0.25rem 0.25rem; max-inline-size: 100%; }
.clone .prefix { padding-inline-start: 0.75rem; color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.clone input { flex: 1; min-inline-size: 0; background: none; border: 0; outline: 0; font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink); padding: 0; }
.clone button { flex: none; }
.clone:focus-within { box-shadow: var(--shadow-press), 0 0 0 2px var(--border-strong); }

/* browse rows: recessed when hovered/current */
.rows { display: flex; flex-direction: column; }
.rows > * + * { border-block-start: 1px solid var(--border); }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem 1rem; padding: 0.625rem 1.25rem; color: var(--ink); min-block-size: 2.75rem; transition: background var(--dur-fast) var(--ease-out-quart); }
.brow:hover, .brow:focus-within, .brow[aria-current="true"] { background: var(--well); box-shadow: var(--shadow-press); text-decoration: none; }
.brow .name { display: flex; align-items: center; gap: 0.625rem; min-inline-size: 0; font-weight: 550; }
.brow .name svg { inline-size: 1.125rem; block-size: 1.125rem; color: var(--muted); flex: none; }
.brow .name a { color: var(--ink); }
.brow .meta { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.875rem; min-inline-size: 0; }
.brow .meta .truncate { max-inline-size: 40ch; }
.brow .actions { display: flex; gap: 0.35rem; }
.brow-3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; }
.brow .primary-link { color: var(--ink); font-weight: 550; }
.brow .primary-link:hover { color: var(--primary-text); }

/* data tables (used only for genuinely tabular data) */
.table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th { text-align: start; color: var(--muted); font-size: 0.875rem; font-weight: 500; padding: 0.625rem 1rem; border-block-end: 1px solid var(--border); }
.table td { padding: 0.625rem 1rem; border-block-end: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-block-end: 0; }
.table .n { text-align: end; color: var(--muted); white-space: nowrap; }
.table-wrap { overflow-x: auto; }

/* commit id: machine text */
.oid { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; color: var(--muted); }
a.oid:hover { color: var(--primary-text); }
.kbd, kbd { display: inline-block; padding: 0 0.4rem; border-radius: var(--radius-sm); background: var(--well); box-shadow: var(--shadow-press); font-size: 0.875rem; line-height: 1.4rem; }

/* ------------------------------------------------------------- repo pulse */
.repo-title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-inline-size: 0; }
.repo-title .t-headline { display: inline-flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.repo-title .owner { color: var(--muted); font-weight: 500; }
.repo-title .slash { color: var(--border-strong); font-weight: 400; }
.repo-desc { color: var(--muted); max-inline-size: 66ch; margin-block-start: 0.25rem; overflow-wrap: anywhere; }
.pulse { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 0; margin-block: 1.5rem; }
.pulse > * { padding: 1rem 1.25rem; min-inline-size: 0; }
.pulse > * + * { border-inline-start: 1px solid var(--border); }
.pulse .k { color: var(--muted); font-size: 0.875rem; font-weight: 500; margin-block-end: 0.25rem; }
.pulse .v { font-weight: 550; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-inline-size: 0; }
.pulse .head-msg { font-size: 1.0625rem; font-weight: 550; overflow-wrap: anywhere; }
.pulse .head-by { color: var(--muted); font-size: 0.875rem; margin-block-start: 0.25rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ref-switch { display: inline-flex; align-items: center; gap: 0.5rem; }
.ref-switch .select { inline-size: auto; min-inline-size: 11rem; max-inline-size: 22rem; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; }
.crumbs { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-weight: 500; }
.crumbs a { color: var(--ink); }
.crumbs .sep { color: var(--border-strong); }
.crumbs .current { color: var(--muted); }
.tree .brow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; }
.tree .brow .name { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; }
.tree .brow .name a { color: var(--ink); }
.tree .brow .mode { color: var(--muted); font-size: 0.875rem; }

/* ------------------------------------------------------------ paper / prose */
.doc-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-block-end: 1.25rem; color: var(--muted); font-size: 0.875rem; }
.doc-head .t-title { color: var(--ink); }
.prose { max-inline-size: 66ch; line-height: 1.6; }
.prose > * + * { margin-block-start: 1rem; }
.prose h1 { font-size: 2.125rem; font-weight: 600; line-height: 2.5rem; letter-spacing: -0.01em; margin-block-start: 0; }
.prose h2 { font-size: 1.5rem; font-weight: 600; line-height: 2rem; margin-block-start: 2rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; margin-block-start: 1.5rem; }
.prose h4 { font-size: 1.0625rem; font-weight: 600; margin-block-start: 1.25rem; }
.prose p, .prose li { overflow-wrap: anywhere; }
.prose ul { list-style: disc; padding-inline-start: 1.25rem; }
.prose ol { list-style: decimal; padding-inline-start: 1.25rem; }
.prose li + li { margin-block-start: 0.25rem; }
.prose code { background: var(--well); padding: 0.05rem 0.35rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-press); }
.prose pre { background: var(--well); box-shadow: var(--shadow-press); border-radius: var(--radius-lg); padding: 1rem 1.25rem; overflow-x: auto; font-size: 0.875rem; line-height: 1.5; }
.prose pre code { background: none; padding: 0; box-shadow: none; }
.prose blockquote { border-inline-start: 1px solid var(--border-strong); padding-inline-start: 1rem; color: var(--muted); }
.prose table { border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--border); padding: 0.4rem 0.75rem; text-align: start; }
.prose img { border-radius: var(--radius-md); }
.prose hr { border: 0; border-block-start: 1px solid var(--border); }
.prose a { text-decoration: underline; }

/* ------------------------------------------------------------- code well */
.code { background: var(--well); box-shadow: var(--shadow-press); border-radius: var(--radius-lg); overflow-x: auto; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 450; line-height: 1.5rem; padding-block: 0.75rem; counter-reset: l; tab-size: 4; }
.code .l { display: block; padding-inline: 1rem 1.25rem; white-space: pre; min-inline-size: max-content; }
.code .l::before { counter-increment: l; content: counter(l); display: inline-block; inline-size: 3.5em; margin-inline-end: 1.25em; text-align: end; color: var(--muted); user-select: none; }
.code .l:target { background: var(--attention-tint); }
.code .l:target::before { color: var(--attention-ink); }
.hljs-comment, .hljs-quote { color: var(--muted); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-meta, .hljs-doctag { color: var(--tag); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--success); }
.hljs-number, .hljs-literal, .hljs-symbol { color: var(--progress); }
.hljs-title, .hljs-section, .hljs-name { color: var(--primary-text); font-weight: 600; }
.hljs-built_in, .hljs-type, .hljs-variable, .hljs-template-variable, .hljs-attr, .hljs-attribute { color: var(--branch); }
.hljs-deletion { color: var(--danger); }
.hljs-strong { font-weight: 650; }
.hljs-emphasis { font-style: italic; }

/* -------------------------------------------------------------------- diff */
.diff { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); overflow: hidden; }
.diff + .diff { margin-block-start: 1rem; }
.diff-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-block-end: 1px solid var(--border); flex-wrap: wrap; min-inline-size: 0; }
.diff-head .path { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.diff-head .counts { margin-inline-start: auto; display: flex; gap: 0.5rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.diff-body { overflow-x: auto; }
.diff table { border-collapse: collapse; inline-size: 100%; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.5rem; }
.diff td { padding: 0 0.75rem; white-space: pre; vertical-align: top; }
.diff td.n { color: var(--muted); text-align: end; inline-size: 1%; user-select: none; padding-inline: 0.5rem; border-inline-end: 1px solid var(--border); }
.diff tr.add td { background: var(--success-tint); }
.diff tr.add td.n { color: var(--success); }
.diff tr.del td { background: var(--danger-tint); }
.diff tr.del td.n { color: var(--danger); }
.diff tr.hunk td { background: var(--progress-tint); color: var(--progress); font-weight: 500; padding-block: 0.2rem; }
.diff .empty { padding: 0.75rem 1rem; color: var(--muted); font-size: 0.875rem; }
.plus { color: var(--success); } .minus { color: var(--danger); }

/* blame */
.blame { border-collapse: collapse; inline-size: 100%; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.5rem; }
.blame td { padding: 0 0.75rem; white-space: pre; vertical-align: top; }
.blame td.c { inline-size: 1%; white-space: nowrap; color: var(--muted); border-inline-end: 1px solid var(--border); font-family: var(--font-sans); font-size: 0.8125rem; }
.blame td.c.first { border-block-start: 1px solid var(--border); padding-block-start: 0.25rem; }
.blame td.n { color: var(--muted); text-align: end; inline-size: 1%; user-select: none; }
.blame tr.first td { border-block-start: 1px solid var(--border); }

/* --------------------------------------------------------- empty & errors */
.empty { display: grid; justify-items: center; text-align: center; gap: 0.75rem; padding: 3rem 1.5rem; color: var(--muted); }
.empty svg { inline-size: 2.5rem; block-size: 2.5rem; color: var(--border-strong); }
.empty .t-title { color: var(--ink); }
.empty p { max-inline-size: 44ch; text-wrap: pretty; }
.error-page { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: 4rem 1rem; }
.error-page .code { display: none; }
.error-page .t-display { color: var(--ink); }
.error-page p { color: var(--muted); max-inline-size: 48ch; text-wrap: pretty; }

/* settings layout */
.settings { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.settings > * { min-inline-size: 0; }
.settings .stack { gap: 1.5rem; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1rem; font-size: 0.9375rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
details.panel > summary { cursor: pointer; padding: 0.75rem 1.25rem; color: var(--muted); font-size: 0.875rem; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel[open] > summary { border-block-end: 1px solid var(--border); }
.pager { display: flex; justify-content: space-between; gap: 0.5rem; margin-block-start: 1rem; }

/* qr / device code */
.code-display { font-family: var(--font-mono); font-size: 2rem; font-weight: 600; letter-spacing: 0.09em; text-align: center; padding: 1rem; background: var(--well); box-shadow: var(--shadow-press); border-radius: var(--radius-lg); }

/* --------------------------------------------------------------- responsive */
@media (max-width: 64rem) {
  main { padding: 1.5rem 1.25rem 2.5rem; }
  .pulse { grid-template-columns: 1fr 1fr; }
  .pulse > *:first-child { grid-column: 1 / -1; }
  .pulse > * + * { border-inline-start: 0; border-block-start: 1px solid var(--border); }
  .pulse > *:nth-child(3) { border-inline-start: 1px solid var(--border); }
  .settings { grid-template-columns: 1fr; }
  .paper { padding: 1.5rem 1.25rem; }
}
@media (max-width: 44rem) {
  .shell-row { padding-inline: 1rem; gap: 0.5rem; }
  .shell-row:has(.crumb) .t-brand { display: none; }
  .shell-row .brand-sep { display: none; }
  .crumb .chip { display: none; }
  .identity .login { display: none; }
  .identity .nav-pill { padding-inline: 0.125rem; }
  .identity .btn { padding-inline: 0.6rem; }
  .seg > * { padding-inline: 0.5rem; min-inline-size: 1.75rem; }
  .nav-row { gap: 0.5rem; }
  .nav-row .search { flex: 1; inline-size: auto; min-inline-size: 0; }
  .nav-disclosure { display: block; }
  .nav-disclosure > summary { display: inline-flex; align-items: center; gap: 0.4rem; block-size: 2rem; padding-inline: 0.75rem; border-radius: 9999px; background: var(--surface-2); box-shadow: var(--shadow-raised); border: 1px solid var(--border); font-weight: 600; font-size: 0.875rem; }
  .nav-disclosure > summary svg { inline-size: 1rem; block-size: 1rem; }
  .nav-disclosure .nav { flex-direction: column; align-items: stretch; padding-block: 0.5rem; }
  .nav-disclosure .nav .nav-dot { display: none; }
  .nav:not(.nav-disclosure .nav) { display: none; }
  .brow, .brow-3, .tree .brow { grid-template-columns: minmax(0, 1fr); }
  .brow .meta .truncate { max-inline-size: 100%; }
  .pulse { grid-template-columns: 1fr; }
  .pulse > * + * { border-inline-start: 0 !important; border-block-start: 1px solid var(--border); }
  .crumb .truncate { max-inline-size: 14ch; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .t-headline { font-size: 1.5rem; line-height: 2rem; }
  .t-document { font-size: 1.875rem; line-height: 2.25rem; }
  .prose h1 { font-size: 1.75rem; line-height: 2.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  .shell, .skip { display: none; }
  main { padding: 0; }
  .panel, .paper, .diff { box-shadow: none; border: 1px solid var(--border); }
}