/* Tokens lifted directly from archdev.in/styles.css so git.archdev.in reads
   as the same site, not a bolted-on tool. --good/--good-soft are the one
   addition: their palette has no green, and thread type needs a third,
   calmer hue distinct from --accent (alert coral) and --gold (attention). */
:root {
  --ink: #f4f2ff;
  --text: #d4cfec;
  --muted: #a39ab8;
  --line: rgba(196, 190, 230, 0.14);
  --surface: #1a1728;
  --canvas: #121019;
  --accent: #fa625f;
  --accent-2: #ff8a87;
  --accent-soft: rgba(250, 98, 95, 0.16);
  --accent-hover: #e84e4b;
  --gold: #e8b84a;
  --gold-soft: rgba(232, 184, 74, 0.18);
  --good: #57c19a;
  --good-soft: rgba(87, 193, 154, 0.16);
  --radius: 18px;
  --radius-sm: 11px;
  /* archdev.in references "Plus Jakarta Sans"/"JetBrains Mono" in its CSS but
     never actually loads either as a webfont (no <link>, no @font-face) — so
     every browser there silently renders the fallback stack. Matching that
     fallback stack exactly (and not loading the named fonts ourselves) is
     what makes this page look identical to the real site, not loading the
     "correct" font would make it look different. */
  --font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow-tile: 0 12px 40px rgba(250, 98, 95, 0.14);
  --shadow-code: 0 14px 34px rgba(0, 0, 0, 0.38);
  --ease-emph: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-hover: 0.55s;
  --focus-ring: 0 0 0 3px rgba(250, 98, 95, 0.35);
}
html[data-theme="light"] {
  --ink: #1a1824;
  --text: #3a3848;
  --muted: #6e6a7c;
  --line: rgba(72, 64, 96, 0.16);
  --surface: #e4e1ec;
  --canvas: #d8d4e4;
  --accent: #e85552;
  --accent-2: #ff9a96;
  --accent-soft: rgba(232, 85, 82, 0.12);
  --accent-hover: #d44441;
  --good: #2f9873;
  --good-soft: rgba(47, 152, 115, 0.14);
  --shadow-tile: 0 10px 36px rgba(22, 18, 40, 0.09);
  --shadow-code: 0 10px 28px rgba(22, 18, 40, 0.14);
  --focus-ring: 0 0 0 3px rgba(232, 85, 82, 0.22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--canvas);
  min-height: 100dvh;
  position: relative;
  scrollbar-color: var(--line) transparent;
}
/* Default OS scrollbars (fat, light-grey) read as unfinished against this
   palette — thin themed ones everywhere, since dock bodies scroll constantly. */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* ————— Ambient background, lifted directly from archdev.in ————— */
.bg-stack { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-color: var(--canvas); }
.bg-grid {
  position: absolute; inset: -20%;
  background-size: 56px 56px;
  background-image: linear-gradient(rgba(250, 98, 95, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 98, 95, 0.055) 1px, transparent 1px);
  animation: grid-drift 72s linear infinite;
}
@keyframes grid-drift { to { transform: translate3d(28px, 28px, 0); } }
/* Small bright cursor highlight, follows the pointer (see chrome.js initPointerGlow). */
.bg-grid-accent {
  position: absolute; inset: -20%; background-size: 56px 56px;
  --grid-accent-line: rgba(255, 148, 145, 0.42);
  background-image: linear-gradient(var(--grid-accent-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-accent-line) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse min(200px, 26vw) min(150px, 22vw) at var(--grid-ptr-x, 50%) var(--grid-ptr-y, 36%),
    #000 0%, rgba(0,0,0,.88) 10%, rgba(0,0,0,.62) 24%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.12) 68%, rgba(0,0,0,.05) 80%, rgba(0,0,0,.02) 90%, transparent 100%);
  mask-image: radial-gradient(ellipse min(200px, 26vw) min(150px, 22vw) at var(--grid-ptr-x, 50%) var(--grid-ptr-y, 36%),
    #000 0%, rgba(0,0,0,.88) 10%, rgba(0,0,0,.62) 24%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.12) 68%, rgba(0,0,0,.05) 80%, rgba(0,0,0,.02) 90%, transparent 100%);
  mix-blend-mode: plus-lighter;
  animation: grid-drift 72s linear infinite;
}
@supports not (mix-blend-mode: plus-lighter) { .bg-grid-accent { mix-blend-mode: screen; } }
html[data-theme="light"] .bg-grid-accent { --grid-accent-line: rgba(88, 68, 200, 0.28); mix-blend-mode: normal; }
.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 55% at 15% -10%, rgba(250, 98, 95, 0.09) 0%, transparent 52%),
    radial-gradient(120% 80% at 50% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 55%);
  opacity: 0.85;
}
html[data-theme="light"] .bg-vignette { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .bg-grid, .bg-grid-accent { animation: none; } }
@media not (pointer: fine) { .bg-grid-accent { display: none; } }

.wrap { max-width: min(72rem, 96vw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); position: relative; z-index: 1; }
main { position: relative; z-index: 1; }

/* ————— Header ————— */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 20;
}
.site-logo {
  font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.15rem;
}
.site-logo .dot { color: var(--accent); animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
.header-right { display: flex; align-items: center; gap: 1rem; }
.site-nav { display: flex; gap: 0.5rem 1.25rem; flex-wrap: wrap; }
.site-nav a {
  position: relative; color: var(--muted); text-decoration: none;
  font-weight: 600; font-size: 0.88rem; transition: color var(--dur-fast) var(--ease-emph);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--accent); border-radius: 2px; transition: width 0.28s var(--ease-emph);
}
.site-nav a:hover { color: var(--accent); }
.site-nav a:hover::after { width: 100%; }
.site-theme {
  width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; font-size: 1.05rem; line-height: 1;
  transition: background var(--dur-fast) var(--ease-emph), border-color var(--dur-fast) var(--ease-emph),
    color var(--dur-fast) var(--ease-emph), transform 0.2s var(--ease-emph);
}
.site-theme:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); transform: rotate(-12deg); }
.site-theme:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-ic-moon { display: none; }
html[data-theme="light"] .theme-ic-sun { display: none; }
html[data-theme="light"] .theme-ic-moon { display: inline; }

.who { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.who img { width: 22px; height: 22px; border-radius: 50%; }
.who .admin-badge {
  font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gold); background: var(--gold-soft); padding: 2px 7px; border-radius: 20px;
}

/* ————— Buttons ————— */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.6rem 1.15rem; border-radius: var(--radius-sm);
  font-family: var(--font); font-weight: 600; font-size: 0.88rem;
  text-decoration: none; border: 1px solid var(--line); cursor: pointer; overflow: hidden;
  background: var(--surface); color: var(--ink);
  transition: background var(--dur-fast) var(--ease-emph), border-color var(--dur-fast) var(--ease-emph),
    color var(--dur-fast) var(--ease-emph), transform var(--dur-fast) var(--ease-emph);
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 4px 20px rgba(250, 98, 95, 0.28);
}
.btn--primary:hover { filter: brightness(1.06); color: #fff; box-shadow: 0 8px 28px rgba(250, 98, 95, 0.4); }
.btn--primary::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); transition: left 0.6s var(--ease-emph);
}
.btn--primary:hover::before { left: 130%; }
.btn--danger:hover { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }

/* ————— Section / page-head pattern ————— */
.section { max-width: min(72rem, 96vw); margin: 0 auto; padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) 4rem; position: relative; z-index: 1; }
.section-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; }
.section h1, .section h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 0.5rem; }
.section-intro { color: var(--muted); max-width: 42rem; margin: 0 0 1.75rem; }
.back-link {
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); text-decoration: none;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; margin-bottom: 1.25rem;
  transition: color var(--dur-fast) var(--ease-emph), gap var(--dur-fast) var(--ease-emph);
}
.back-link:hover { color: var(--accent); gap: 0.65rem; }

/* ————— Repo cards ————— */
.article-list { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .article-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .article-list { grid-template-columns: repeat(3, 1fr); } }
.article-card {
  display: flex; flex-direction: column; padding: 1.4rem 1.5rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 88%, transparent);
  transition: border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover),
    transform var(--dur-hover) var(--ease-hover);
}
.article-card:hover { border-color: rgba(250, 98, 95, 0.42); box-shadow: var(--shadow-tile); transform: translateY(-4px); }
.article-card .a-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; color: var(--muted); margin-bottom: 0.6rem; }
.article-card .a-meta .tag { color: var(--gold); font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.article-card h3 { font-family: var(--mono); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.5rem; word-break: break-word; }
.article-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0 0 1rem; flex: 1; }
.article-card .a-actions { display: flex; gap: 0.6rem; margin-top: auto; flex-wrap: wrap; }

/* ————— Forms ————— */
input, textarea, select {
  font: inherit; font-size: 0.92rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.add-repo { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; }
.add-repo input { flex: 1; }
.field-note { color: var(--muted); font-size: 0.85rem; margin: 0; }
.admin-panel { border: 1px dashed var(--gold); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 2rem; background: var(--gold-soft); }
.admin-panel > p:first-child { margin-top: 0; }

/* ————— Tabs ————— */
.tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin: 1.5rem 0 1.25rem; }
.tabs button {
  font: inherit; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 0.55rem 0.1rem; color: var(--muted); font-weight: 700; font-size: 0.88rem;
  transition: color var(--dur-fast) var(--ease-emph), border-color var(--dur-fast) var(--ease-emph);
}
.tabs button.active { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--accent); }

/* ————— Repo header: ref switcher + language bar ————— */
.repo-head-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.ref-select {
  width: auto; font-family: var(--mono); font-size: 0.85rem; padding: 0.45rem 0.7rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink);
}
/* flex-shrink:0 is load-bearing here: as a flex-column child with its own
   overflow:hidden, this loses its automatic min-size protection and a
   squeezed parent (dock-body in a fixed-height dock) will collapse it to
   literal 0px height otherwise — same failure mode as the earlier
   code-block bug, just on a decorative element instead of code. */
.lang-bar { display: flex; flex-shrink: 0; height: 8px; border-radius: 20px; overflow: hidden; margin: 0.6rem 0 0.5rem; background: var(--surface); }
.lang-bar span { height: 100%; }
.lang-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.78rem; color: var(--muted); margin-bottom: 1.25rem; }
.lang-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; }

/* ————— File tree + code viewer ————— */
.repo-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 760px) { .repo-layout { grid-template-columns: 1fr; } }
.tree-search { margin-bottom: 0.6rem; }
.tree-search input { font-family: var(--mono); font-size: 0.82rem; padding: 0.45rem 0.65rem; }
.file-tree {
  font-family: var(--mono); font-size: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 0.9rem; max-height: 70vh; overflow-y: auto;
}
.file-tree details { margin-left: 0.9rem; }
.file-tree summary {
  cursor: pointer; padding: 0.2rem 0; color: var(--text); list-style: none;
  display: flex; align-items: center; gap: 0.4rem;
}
.file-tree summary::-webkit-details-marker { display: none; }
.file-tree summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-style: solid; border-width: 3.5px 0 3.5px 5px;
  border-color: transparent transparent transparent var(--muted);
  transition: transform var(--dur-fast) var(--ease-emph);
}
.file-tree details[open] > summary::before { transform: rotate(90deg); }
.file-tree summary:hover { color: var(--accent); }
.file-tree summary:hover::before { border-left-color: var(--accent); }
.file-tree .file { display: block; padding: 0.2rem 0 0.2rem 0.9rem; cursor: pointer; color: var(--muted); }
.file-tree .file:hover, .file-tree .file.active { color: var(--accent); }
.file-tree .file[hidden], .file-tree details[hidden] { display: none; }

/* ————— Breadcrumbs + file meta bar ————— */
.breadcrumb { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); margin-bottom: 0.6rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { margin: 0 0.35rem; opacity: 0.5; }
.file-meta-bar { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); }
.file-meta-bar .btn { padding: 0.3rem 0.6rem; font-size: 0.74rem; }
.file-history { margin-top: 1rem; }

.code-block { position: relative; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-code); font-family: var(--mono); font-size: 0.85rem; line-height: 1.6; overflow: hidden; }
.code-block-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.code-dots { display: inline-flex; gap: 0.32rem; }
.code-dots span { width: 0.6rem; height: 0.6rem; border-radius: 50%; opacity: 0.55; }
.code-dots span:nth-child(1) { background: #ff5f56; }
.code-dots span:nth-child(2) { background: #ffbd2e; }
.code-dots span:nth-child(3) { background: #27c93f; }
.code-lang { font-size: 0.75rem; color: var(--muted); }
.code-block pre { margin: 0; padding: 1rem 1.15rem; overflow-x: auto; }
.code-block pre code { padding: 0; background: none !important; color: var(--text); white-space: pre; }
.code-block pre code.plain { white-space: pre-wrap; word-break: break-word; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--accent-soft); color: var(--accent); padding: 0.12em 0.4em; border-radius: 6px; }

/* highlight.js: let our own surface show through, theme swapped via <link id="hljs-theme"> */
.hljs { background: transparent !important; }
.hljs-ln-numbers {
  text-align: right; padding-right: 0.9rem !important; user-select: none;
  color: var(--muted); opacity: 0.6; border-right: 1px solid var(--line);
}
.hljs-ln-code { padding-left: 0.9rem !important; }
.hljs-ln-line { padding-top: 0; padding-bottom: 0; }

/* ————— Diffs ————— */
.diff-file { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; background: var(--surface); }
.diff-file-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.82rem; flex-wrap: wrap; }
.diff-file-head .status { font-size: 0.7rem; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 20px; }
.diff-file-head .status.added { background: var(--good-soft); color: var(--good); }
.diff-file-head .status.removed { background: var(--accent-soft); color: var(--accent); }
.diff-file-head .status.modified { background: var(--gold-soft); color: var(--gold); }
.diff-file-head .stat-add { color: var(--good); }
.diff-file-head .stat-del { color: var(--accent); }
.diff-file pre { margin: 0; padding: 0.6rem 0; overflow-x: auto; font-family: var(--mono); font-size: 0.8rem; line-height: 1.55; }
.diff-line { display: block; padding: 0 1rem; white-space: pre; }
.diff-line.add { background: var(--good-soft); color: var(--text); }
.diff-line.del { background: var(--accent-soft); color: var(--text); }
.diff-line.hunk { color: var(--muted); background: color-mix(in srgb, var(--surface) 60%, transparent); }

/* ————— Readme ————— */
.readme { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.75rem; }
.readme img { max-width: 100%; border-radius: var(--radius-sm); }
.readme pre code { background: none; color: inherit; padding: 0; }

/* ————— Pills ————— */
.pill { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
.pill.discussion { background: var(--good-soft); color: var(--good); }
.pill.issue { background: var(--gold-soft); color: var(--gold); }
.pill.bug { background: var(--accent-soft); color: var(--accent); }
.pill.open { background: var(--good-soft); color: var(--good); }
.pill.closed { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }

/* ————— Threads ————— */
.thread { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1rem; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.thread.is-closed { opacity: 0.7; }
.thread .t-title { font-family: var(--font); font-weight: 700; font-size: 1rem; color: var(--ink); margin: 0.5rem 0 0.2rem; }
.thread .meta { font-size: 0.78rem; color: var(--muted); }
.thread .meta .btn { padding: 0.15rem 0.55rem; font-size: 0.72rem; margin-left: 0.5rem; }
.thread .body { margin-top: 0.6rem; white-space: pre-wrap; color: var(--text); font-size: 0.92rem; }
.comment { margin: 0.7rem 0 0 1.1rem; padding: 0.55rem 0 0.55rem 0.9rem; border-left: 2px solid var(--line); font-size: 0.86rem; color: var(--text); }
.comment strong { color: var(--ink); }
.new-post { display: grid; gap: 0.7rem; margin-top: 1rem; }
.new-post details > summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 0.3rem 0; }

/* ————— Discuss page: posts, composer, avatars, markdown ————— */
/* Separate from .thread/.comment above (those are also reused for repo.html's
   commit rows, which need to stay a plain compact list, not a social card). */
.avatar {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 0.82rem; color: #fff;
  background: var(--accent);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 1.5rem; height: 1.5rem; font-size: 0.68rem; }

.composer { border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 88%, transparent); overflow: hidden; margin-bottom: 1.5rem; }
.composer > summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 0.9rem 1.1rem; list-style: none; }
.composer > summary::-webkit-details-marker { display: none; }
.composer-body { padding: 0 1.1rem 1.1rem; display: grid; gap: 0.7rem; }
.composer-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.composer textarea { min-height: 7rem; resize: vertical; font-family: var(--font); }
.composer-hint { color: var(--muted); font-size: 0.78rem; margin: 0; }
.composer-preview { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.composer-preview img { height: 64px; border-radius: 6px; border: 1px solid var(--line); }

.post-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem;
  margin-bottom: 1rem; background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-tile); opacity: 1; transition: opacity var(--dur-hover) var(--ease-hover);
}
.post-card.is-closed { opacity: 0.65; }
.post-head { display: flex; align-items: center; gap: 0.65rem; }
.post-head .who { display: flex; flex-direction: column; line-height: 1.3; }
.post-head .name { font-weight: 700; font-size: 0.86rem; color: var(--ink); }
.post-head .time { font-size: 0.76rem; color: var(--muted); }
.post-head .spacer { flex: 1; }
.post-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0.7rem 0 0.3rem; text-wrap: balance; }
.post-body { color: var(--text); font-size: 0.92rem; }
.post-foot { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; flex-wrap: wrap; }
.upvote-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.8rem; font-weight: 600;
  padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer;
}
.upvote-btn:hover { border-color: var(--accent); color: var(--accent); }
.upvote-btn.voted { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); cursor: default; }
.comment-count { font-size: 0.8rem; color: var(--muted); }

.post-comments { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); display: grid; gap: 0.7rem; }
.post-comment { display: flex; gap: 0.55rem; }
.post-comment .bubble { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; }
.post-comment .name { font-weight: 700; font-size: 0.82rem; color: var(--ink); }
.post-comment .time { font-size: 0.72rem; color: var(--muted); margin-left: 0.4rem; }
.post-comment .md-body { font-size: 0.85rem; margin-top: 0.15rem; }
.reply-row { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.reply-row input { flex: 1; }

.sort-control { display: flex; gap: 0.3rem; }
.sort-control button {
  font: inherit; background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  padding: 0.3rem 0.7rem; color: var(--muted); font-size: 0.78rem; font-weight: 600;
}
.sort-control button.active { color: var(--accent); background: var(--accent-soft); }

/* Rendered post/comment markdown */
.md-body { line-height: 1.6; word-wrap: break-word; }
.md-body p { margin: 0 0 0.6em; }
.md-body p:last-child { margin-bottom: 0; }
.md-body img { max-width: 100%; border-radius: var(--radius-sm); margin: 0.4em 0; }
.md-body a { color: var(--accent); }
.md-body code { font-size: 0.85em; }
.md-body pre { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7em 0.9em; overflow-x: auto; margin: 0.6em 0; }
.md-body pre code { background: none; color: var(--text); padding: 0; }
.md-body ul, .md-body ol { margin: 0.4em 0; padding-left: 1.4em; }
.md-body blockquote { margin: 0.5em 0; padding-left: 0.9em; border-left: 3px solid var(--line); color: var(--muted); }
.md-body h1, .md-body h2, .md-body h3 { font-size: 1.05em; font-weight: 700; color: var(--ink); margin: 0.7em 0 0.3em; }

/* ————— App mode: dockable panel shell (see memory "ux-app-mode") ————— */
/* No visible toolbar at all — back is a floating control, everything else
   (branch, discuss/github, add dock, reset) lives in the right-click menu. */
.app-shell { height: 100dvh; position: relative; z-index: 1; }
.dock-grid-wrap { height: 100%; overflow: auto; padding: 0.5rem; }

.floating-back {
  position: fixed; top: 0.85rem; left: 0.85rem; z-index: 30;
  display: flex; align-items: center; gap: 0.6rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem 0.3rem 0.3rem;
  backdrop-filter: blur(8px); box-shadow: var(--shadow-code);
}
.floating-back .back-link { margin: 0; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; font-size: 1rem; }
.floating-back .repo-name { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; color: var(--ink); }

.ctx-menu {
  position: fixed; z-index: 50; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-code); padding: 0.35rem; font-size: 0.85rem;
}
.ctx-menu select { margin: 0 0 0.35rem; }
.ctx-item {
  display: flex; width: 100%; align-items: center; gap: 0.5rem; background: none; border: none;
  color: var(--text); text-decoration: none; text-align: left; padding: 0.5rem 0.6rem;
  border-radius: 6px; cursor: pointer; font: inherit; box-sizing: border-box;
}
.ctx-item:hover { background: var(--accent-soft); color: var(--accent); }
.ctx-menu hr { border: none; border-top: 1px solid var(--line); margin: 0.3rem 0; }
.ctx-menu .ctx-label { padding: 0.3rem 0.6rem 0.15rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.hint-toast {
  position: fixed; bottom: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1.1rem; font-size: 0.82rem; color: var(--text); box-shadow: var(--shadow-code);
  display: flex; align-items: center; gap: 0.7rem; max-width: 90vw;
  animation: hint-in 0.3s var(--ease-emph), hint-out 0.3s var(--ease-emph) 4.6s forwards;
}
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hint-out { to { opacity: 0; visibility: hidden; } }
.hint-toast strong { color: var(--accent); }
.hint-toast button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; flex: none; }
@media (prefers-reduced-motion: reduce) { .hint-toast { animation: hint-out 0.01s linear 4.6s forwards; } }

.grid-stack-item-content { overflow: hidden !important; inset: 0.25rem !important; }
.dock {
  height: 100%; display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow-code);
}
.dock-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); cursor: grab;
  font-weight: 700; font-size: 0.8rem; letter-spacing: -0.005em;
  color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, var(--canvas));
}
.dock-head:active { cursor: grabbing; }
.dock-head .dock-head-extra { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; margin-right: 0.4rem; cursor: default; }
.dock-remove {
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.95rem; line-height: 1;
  width: 1.2rem; height: 1.2rem; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
}
.dock-remove:hover { background: var(--accent-soft); color: var(--accent); }
.dock-body {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.6rem 0.7rem; font-size: 0.83rem;
  display: flex; flex-direction: column;
}
.dock-body.no-pad { padding: 0; }
.dock-placeholder {
  color: var(--muted); font-size: 0.85rem; flex: 1; min-height: 4rem;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem;
}
/* No flex:1/min-height:0 squeeze on any of these: they need to lay out at
   their true natural height for refit()'s scrollHeight measurement to see
   it. dock-body's own overflow:auto is the only scroll boundary, and it only
   engages once refit() has actually capped the dock at SIZE_TO_CONTENT_ROWS. */
/* File Tree still uses refit() (fit-to-content) — it needs its true,
   unclipped height for that measurement to work, so no flex-squeeze here. */
.dock-body .file-tree { max-height: none; border: none; padding: 0; background: none; font-size: 0.8rem; }
/* Code Viewer is a FIXED-height dock (no refit) — it should squeeze to fill
   that fixed box and let the code itself scroll internally, never resize
   the dock. */
.dock-body .code-block { box-shadow: none; border-radius: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dock-body .code-block-head { padding: 0.4rem 0.6rem; flex: none; }
.dock-body .code-block pre { flex: 1; min-height: 0; overflow: auto; }
.dock-body .readme { border: none; margin: 0; padding: 0; }
.dock-body .lang-legend { margin-bottom: 0; }
.dock-body .thread { padding: 0.6rem 0.75rem; margin-bottom: 0.4rem; }


/* GridStack chrome, recolored to the palette instead of its default grey/blue */
.grid-stack-placeholder > .placeholder-content {
  background: var(--accent-soft) !important; border: 1px dashed var(--accent);
  border-radius: var(--radius-sm); box-sizing: border-box;
}
.grid-stack-item > .ui-resizable-se, .grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-sw, .grid-stack-item > .ui-resizable-nw {
  background-image: none !important;
}
.grid-stack-item > .ui-resizable-se::after {
  content: ""; position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); border-radius: 0 0 2px 0;
}
.grid-stack-item:hover > .ui-resizable-se::after { border-color: var(--accent); }
.ui-draggable-dragging > .grid-stack-item-content, .ui-resizable-resizing > .grid-stack-item-content {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* ————— Footer ————— */
.site-footer { padding: 2.5rem clamp(1.25rem, 4vw, 2.5rem) 3rem; border-top: 1px solid var(--line); text-align: center; position: relative; z-index: 1; }
.site-footer p { color: var(--muted); font-size: 0.88rem; margin: 0.3rem 0; }
.site-footer strong { color: var(--ink); }
.footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.88rem; transition: color var(--dur-fast) var(--ease-emph); }
.footer-links a:hover { color: var(--accent); }