/* CoreFiles. Tokens from the approved mockups; dark mode follows the system until the header switch picks one. */
:root {
  --bg: #ffffff; --card: #ffffff; --fg: #111827; --head: #0e1116; --muted: #4b5563; --faint: #6b7280;
  --line: #e5e7eb; --line2: #d1d5db; --soft: #f9fafb; --ink: #0e1116; --inkfg: #ffffff; --inkmuted: #9ca3af;
  --link: #2563eb; --sel: #fef9c3;
  --g: #166534; --gbg: #dcfce7; --r: #991b1b; --rbg: #fee2e2; --y: #854d0e; --ybg: #fef9c3;
  --b: #1e40af; --bbg: #dbeafe; --n: #374151; --nbg: #f3f4f6;
  --primary: #0e1116;
  color-scheme: light dark;
}
/* Dark tokens: the system setting, unless the switch in the header chose (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111827; --card: #1f2937; --fg: #cbd5e1; --head: #f3f4f6; --muted: #94a3b8; --faint: #94a3b8;
    --line: #374151; --line2: #4b5563; --soft: #1f2937; --ink: #0e1116; --inkfg: #f3f4f6; --inkmuted: #9ca3af;
    --link: #60a5fa; --sel: #3f3a12;
    --g: #86efac; --gbg: #14532d; --r: #fca5a5; --rbg: #7f1d1d; --y: #fde047; --ybg: #713f12;
    --b: #93c5fd; --bbg: #1e3a8a; --n: #d1d5db; --nbg: #374151;
    --primary: #4b5563;
  }
}
:root[data-theme="dark"] {
  --bg: #111827; --card: #1f2937; --fg: #cbd5e1; --head: #f3f4f6; --muted: #94a3b8; --faint: #94a3b8;
  --line: #374151; --line2: #4b5563; --soft: #1f2937; --ink: #0e1116; --inkfg: #f3f4f6; --inkmuted: #9ca3af;
  --link: #60a5fa; --sel: #3f3a12;
  --g: #86efac; --gbg: #14532d; --r: #fca5a5; --rbg: #7f1d1d; --y: #fde047; --ybg: #713f12;
  --b: #93c5fd; --bbg: #1e3a8a; --n: #d1d5db; --nbg: #374151;
  --primary: #4b5563;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); min-height: 100vh; display: flex; flex-direction: column;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; }
main { flex: 1; width: 100%; min-width: 0; box-sizing: border-box; }
.page > * { min-width: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--head); outline-offset: 2px; }
::selection { background: var(--sel); }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-ligatures: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .head { color: var(--head); }
.right { text-align: right; } .brk { word-break: break-all; }

.top { background: var(--ink); color: var(--inkfg); }
.top a { color: var(--inkfg); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.brand span { font-weight: 400; color: #9ca3af; }
.top nav { display: flex; gap: 20px; flex-wrap: wrap; }
.top nav a { color: #d1d5db; font-size: 13px; }
.top nav a:hover { color: #fff; text-decoration: none; }

.page { padding-top: 32px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 24px; }
.page.tall { padding-top: 40px; gap: 32px; }
.stack { display: flex; flex-direction: column; gap: 6px; }
h1 { margin: 0; color: var(--head); font-weight: 600; }
h1.t1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }
h1.t2 { font-size: 22px; }
h1.t3 { font-size: 24px; }
.lead { margin: 0; color: var(--muted); }
.lead.big { font-size: 15px; }
.head-intro { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 24px; }

.tc { border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; background: var(--card); }
.tbar { background: var(--ink); color: var(--inkfg); display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px; font-size: 13px; flex-wrap: wrap; }
.tbar .sub, .sub { color: var(--inkmuted); }
.tbar a { color: #d1d5db; font-size: 12px; }
.tbar .ttl { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.note { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.note.fg { font-size: 13px; color: var(--fg); padding: 12px 16px; }
.pad { padding: 12px; }

.tbl { overflow-x: auto; }
.tbl-in { min-width: max(100%, var(--minw, 0px)); }
.th, .row { display: grid; grid-template-columns: var(--cols); gap: 12px; align-items: center; padding: 0 12px; }
.th { font-size: 12px; color: var(--muted); min-height: 30px; border-bottom: 1px solid var(--line2); background: var(--card); }
.row { min-height: 32px; font-size: 13px; border-top: 1px solid var(--line); }
.th + .row { border-top: 0; }
.row .cut, .named .cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .acts { display: flex; gap: 10px; justify-content: flex-end; font-size: 12px; align-items: center; }
.row a.plain { color: var(--fg); }
.bar { height: 8px; background: var(--head); border-radius: 2px; min-width: 2px; }

.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 1px 6px;
  border-radius: 4px; line-height: 18px; white-space: nowrap; justify-self: start; }
.pz-g { color: var(--g); background: var(--gbg); } .pz-r { color: var(--r); background: var(--rbg); }
.pz-y { color: var(--y); background: var(--ybg); } .pz-b { color: var(--b); background: var(--bbg); }
.pz-n { color: var(--n); background: var(--nbg); }

.tbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 10px;
  border-radius: 4px; border: 1px solid var(--line2); background: var(--soft); color: var(--fg); cursor: pointer; font-family: inherit; }
a.tbtn { text-decoration: none; }
.tbtn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.tbtn.big { padding: 7px 14px; font-size: 13px; }
/* Buttons on the ink bar look the same in both modes (the bar is ink in both). Without this,
   ".tbar a" gave them pale link text on the light-mode button face. */
.tbar .tbtn { background: #1f2937; border-color: #4b5563; color: #f3f4f6; }
.tbar .tbtn:hover { background: #374151; border-color: #6b7280; color: #fff; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; }
.seg button, .seg label span { font: inherit; font-size: 12px; padding: 4px 10px; border: 0; background: var(--card); color: var(--fg); cursor: pointer; display: block; }
.seg button + button, .seg label + label span, .seg a + a { border-left: 1px solid var(--line2); }
.seg a { font-size: 12px; padding: 4px 10px; background: var(--card); color: var(--fg); }
.seg a:hover { text-decoration: none; }
.seg button[aria-pressed="true"], .seg input:checked + span, .seg a[aria-current="true"] { background: var(--ink); color: #fff; }
.seg label { position: relative; display: block; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--head); outline-offset: 2px; }
.seg.wrapit { flex-wrap: wrap; }
.seg .n { opacity: .7; }

input.f { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 4px; background: var(--card); color: var(--fg); min-width: 0; }
label.l { font-size: 12px; color: var(--muted); }
form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.field { display: flex; flex-direction: column; gap: 4px; }
.fgrow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

.code { background: var(--soft); border-top: 1px solid var(--line); font-size: 12.5px; line-height: 20px; overflow-x: auto; margin: 0; padding: 12px 16px; white-space: pre; color: var(--fg); }
.urlbuild { font-size: 19px; line-height: 1.5; color: var(--head); word-break: break-all; }
a.urlbuild:hover { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; }

/* Try it (home.php, try.js): the numbered steps on the left build the link on the right. The card
   lets the suggestion lists hang outside it, so it rounds its own ink bar and preview corners. */
.try { overflow: visible; }
.try > .tbar { border-radius: 7px 7px 0 0; }
.try-in { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.steps { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--line); }
.steps li, .ahead { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.sn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: var(--head); font-variant-numeric: tabular-nums; line-height: 1; }
.try .field { gap: 6px; min-width: 0; }
.try label.l, .try span.l { font-size: 12px; font-weight: 600; color: var(--head); line-height: 20px; }
.try .hint { font-size: 12px; color: var(--muted); }
.try .seg { align-self: flex-start; }
.try input.f { width: 100%; font-size: 12.5px; }
.try input.f:focus-visible { outline: 2px solid var(--head); outline-offset: -1px; }
.combo { position: relative; }
.opts { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; margin: 0; padding: 4px; list-style: none;
  max-height: 264px; overflow-y: auto; background: var(--card); border: 1px solid var(--line2); border-radius: 6px;
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / .35); overscroll-behavior: contain; }
.opts[hidden] { display: none; }
.opts li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; min-height: 32px;
  border-radius: 2px; font-size: 12.5px; color: var(--fg); cursor: pointer; }
.opts .lbl { display: flex; flex-direction: column; min-width: 0; padding: 4px 0; line-height: 18px; }
.opts .cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opts .sub2 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; color: var(--muted); white-space: normal; }
.opts [aria-selected="true"] .sub2 { color: var(--fg); }
/* Format: a read-only combobox, so it opens on click and takes arrows like the other two. */
.try input.pick { cursor: pointer; padding-right: 28px; caret-color: transparent;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; }
/* Path suggestions spread right over the preview so a whole path fits on one line. */
.opts.wide { right: auto; width: max-content; min-width: 100%; max-width: min(860px, calc(100vw - 48px)); }
.opts li[aria-selected="true"] { background: var(--nbg); color: var(--head); }
.opts mark { background: none; color: var(--head); font-weight: 700; }
.answer { display: flex; flex-direction: column; min-width: 0; }
.ahead { padding: 16px; }
.try .urlbuild { font-size: 17px; }
.try .urlbuild b { font-weight: 700; }
.try .actions { margin-top: 6px; }
.try .tbtn { transition: scale .12s cubic-bezier(.2,0,0,1); }
.try .tbtn:active { scale: .96; }
@media (prefers-reduced-motion: reduce) { .try .tbtn { transition: none; } }
.try .tbtn.primary:hover { background: #1f2937; border-color: #1f2937; }
.try .tbtn:not(.primary):hover { border-color: var(--faint); color: var(--head); }
.out { flex: 1; background: var(--soft); border-top: 1px solid var(--line); border-radius: 0 0 7px 0; min-height: 200px; }
.out .code { border-top: 0; background: none; }
.out .code.msg { white-space: pre-wrap; color: var(--muted); font-family: inherit; font-size: 13px; }
.out[aria-busy="true"] > * { opacity: .55; transition: opacity .15s ease-out .15s; }
.kv { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 16px; padding: 10px 12px; font-size: 12px; border-bottom: 1px solid var(--line); }
.kv.top-line { border-bottom: 0; border-top: 1px solid var(--line); }
.kv dt { color: var(--muted); margin: 0; } .kv dd { margin: 0; word-break: break-all; }
.crumbs { font-size: 14px; display: flex; flex-wrap: wrap; gap: 2px; color: var(--faint); }
.crumbs b { color: var(--head); font-weight: 600; }

/* file viewer: gutter of line links beside the code */
.src { display: flex; position: relative; overflow-x: auto; padding: 10px 0; background: var(--soft); font-size: 12.5px; line-height: 20px; }
.gut { flex: none; position: sticky; left: 0; width: 52px; text-align: right; background: var(--soft); z-index: 1; }
.gut a { display: block; height: 20px; padding-right: 14px; color: var(--faint); user-select: none; }
.gut a:hover { color: var(--head); text-decoration: none; }
.gut a:target { color: var(--head); font-weight: 700; }
.gut a:focus { outline: none; } /* tabindex -1, so only an #L link focuses it; the bold number and the band mark the line */
.src pre { margin: 0; flex: 1; line-height: 20px; tab-size: 4; white-space: pre; position: relative; z-index: 1; } /* above the .hl band, so the band tints and never dims the code */
.src code { font: inherit; background: none; text-shadow: none; color: var(--fg); }
.src .hl { position: absolute; left: 0; right: 0; height: 20px; background: var(--sel); pointer-events: none; z-index: 0; }
.src .hl[hidden] { display: none; }
.plain-pre { margin: 0; padding: 10px 16px; overflow-x: auto; background: var(--soft); font-size: 12.5px; line-height: 20px; tab-size: 4; white-space: pre; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--faint); font-style: italic; }
.token.keyword, .token.function, .token.builtin, .token.important { color: var(--b); }
.token.string, .token.attr-value, .token.char { color: var(--g); }
.token.variable, .token.constant, .token.property, .token.tag, .token.symbol, .token.number, .token.boolean { color: var(--r); }
.token.attr-name, .token.class-name { color: var(--y); }

/* lookup and history */
.vers { display: flex; gap: 6px; flex-wrap: wrap; }
.where { padding: 14px 12px; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 16px; align-items: start; }
.where .plat { color: var(--muted); font-size: 12px; padding-top: 4px; }
.where .group { display: flex; flex-direction: column; gap: 8px; }
.where .group + .group { margin-top: 6px; }
.hg { display: grid; grid-template-columns: 120px minmax(0, 1fr); border-top: 1px solid var(--line2); }
.hg:first-of-type { border-top: 0; }
.hk { padding: 10px 12px; font-weight: 600; color: var(--head); display: flex; flex-direction: column; gap: 2px; }
.hk span { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 400; font-size: 12px; color: var(--muted); }
.hl-col { border-left: 1px solid var(--line); }
.hr { display: grid; grid-template-columns: minmax(0, 1fr) 110px 200px; gap: 12px; align-items: center; min-height: 32px; padding: 0 12px; font-size: 13px; border-top: 1px solid var(--line); }
.hr:first-child { border-top: 0; }

/* stats storage bars */
.store { padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 22px; }
.store-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; }
.store-bar { position: relative; height: 26px; background: var(--nbg); border: 1px solid var(--line2); border-radius: 4px; }
.store-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--head); border-radius: 3px 0 0 3px; min-width: 2px; }
.store-fig { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 4px 24px; margin-top: 6px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 24px; align-items: start; }

/* not found */
.nf { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; align-items: start; }
.nf section { display: flex; flex-direction: column; gap: 14px; }
.nf .pill { align-self: flex-start; }

footer.up { border-top: 1px solid var(--line); background: var(--soft); }
footer.up .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding-top: 22px; padding-bottom: 26px; }
footer.up .copy { display: flex; flex-direction: column; gap: 4px; max-width: 680px; }
footer.up b { color: var(--head); font-size: 15px; }
footer.up .copy span { color: var(--muted); font-size: 13px; }
footer.up .small { grid-column: 1 / -1; font-size: 12px; color: var(--faint); }

@media (max-width: 700px) {
  .wrap { padding: 0 16px; }
  h1.t1 { font-size: 24px; }
  .urlbuild { font-size: 15px; }
  .try-in { grid-template-columns: minmax(0, 1fr); }
  .steps { border-right: 0; border-bottom: 1px solid var(--line); }
  .out { border-radius: 0 0 7px 7px; }
  .try .urlbuild { font-size: 15px; }
  footer.up .wrap { grid-template-columns: minmax(0, 1fr); }
  .hg, .where { grid-template-columns: minmax(0, 1fr); }
  .hl-col { border-left: 0; }
  .hr { grid-template-columns: minmax(0, 1fr); padding: 6px 12px; }
  .store-row { grid-template-columns: minmax(0, 1fr); }
  .two, .grid2, .nf { grid-template-columns: minmax(0, 1fr); }
}

/* The theme switch: the app's <dark-mode-toggle>, on the ink bar. Moon shows in light (the mode a
   click switches to), sun in dark; both stay mounted and cross-fade. */
.top .end { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.theme { appearance: none; margin: 0 -8px 0 0; border: 0; background: none; cursor: pointer; display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border-radius: 8px; color: #9ca3af; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms cubic-bezier(.2,0,0,1), color 150ms cubic-bezier(.2,0,0,1), scale 150ms cubic-bezier(.2,0,0,1); }
.theme:hover { background: #1f2937; color: #fff; }
.theme:active { scale: .96; }
.theme:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.theme svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 260ms cubic-bezier(.2,0,0,1), scale 260ms cubic-bezier(.2,0,0,1), filter 260ms cubic-bezier(.2,0,0,1); }
.theme .sun, .theme[aria-checked="true"] .moon { opacity: 0; scale: .25; filter: blur(4px); }
.theme[aria-checked="true"] .sun { opacity: 1; scale: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .theme, .theme svg { transition: none; } }

/* One file between two releases (/diff/{platform}/{from}/{to}/{path}, src/View/filediff.php): the
   app's Investigate diff pane (assets/css/table.css .xdiff) with the same GitHub-derived tokens. */
:root { --xd-code: #fff; --xd-gut: #f6f8fa; --xd-gut-fg: #6e7781; --xd-del: #ffebe9; --xd-del-gut: #ffd7d5; --xd-del-hl: #ff818266;
  --xd-del-fg: #82071e; --xd-add: #dafbe1; --xd-add-gut: #ccffd8; --xd-add-hl: #4ac26b66; --xd-add-fg: #116329; --xd-hunk: #ddf4ff; --xd-hunk-fg: #0a3069; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --xd-code: #0d1117; --xd-gut: #161b22; --xd-gut-fg: #8b949e; --xd-del: #3c1618; --xd-del-gut: #4c1d20; --xd-del-hl: #f8514966;
    --xd-del-fg: #ffa198; --xd-add: #12261e; --xd-add-gut: #173a28; --xd-add-hl: #2ea04366; --xd-add-fg: #7ee787; --xd-hunk: #121d2f; --xd-hunk-fg: #a5d6ff; }
}
:root[data-theme="dark"] { --xd-code: #0d1117; --xd-gut: #161b22; --xd-gut-fg: #8b949e; --xd-del: #3c1618; --xd-del-gut: #4c1d20; --xd-del-hl: #f8514966;
  --xd-del-fg: #ffa198; --xd-add: #12261e; --xd-add-gut: #173a28; --xd-add-hl: #2ea04366; --xd-add-fg: #7ee787; --xd-hunk: #121d2f; --xd-hunk-fg: #a5d6ff; }
.dstat { font-size: 12px; font-variant-numeric: tabular-nums; }
.dstat .a { color: #7ee787; } .dstat .d { color: #ffa198; } /* on the ink bar in both themes */
.dnote { padding: 8px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.dacts { display: flex; gap: 8px; flex-wrap: wrap; }
.diff { overflow-x: auto; background: var(--xd-code); font-size: 12.5px; line-height: 20px; color: var(--fg); }
.diff .in { min-width: 100%; width: max-content; }
.diff.split .in { width: 100%; }
.dl { display: grid; grid-template-columns: var(--lnw) var(--lnw) 20px minmax(0, 1fr); }
.diff.split .dl { grid-template-columns: var(--lnw) minmax(0, 1fr) var(--lnw) minmax(0, 1fr); }
.dl .ln { padding: 0 8px; text-align: right; color: var(--xd-gut-fg); background: var(--xd-gut); user-select: none; font-variant-numeric: tabular-nums; }
.dl a.ln:hover { color: var(--head); text-decoration: none; }
.diff:not(.split) .dl > .ln:first-child { position: sticky; left: 0; z-index: 1; }
.diff:not(.split) .dl > .ln:nth-child(2) { position: sticky; left: var(--lnw); z-index: 1; }
.dl .sg { text-align: center; color: var(--xd-gut-fg); user-select: none; }
.dl .cx { padding: 0 12px 0 4px; white-space: pre; tab-size: 4; }
.diff.split .cx { white-space: pre-wrap; overflow-wrap: anywhere; }
.diff.split .mid { border-left: 1px solid var(--line2); }
.dl.del { background: var(--xd-del); } .dl.del .ln { background: var(--xd-del-gut); } .dl.del .sg { color: var(--xd-del-fg); }
.dl.add { background: var(--xd-add); } .dl.add .ln { background: var(--xd-add-gut); } .dl.add .sg { color: var(--xd-add-fg); }
.dl .cdel { background: var(--xd-del); } .dl .cadd { background: var(--xd-add); }
.dl .ldel { background: var(--xd-del-gut); } .dl .ladd { background: var(--xd-add-gut); }
.dl .empty { background: var(--xd-gut); }
.dl mark { color: inherit; border-radius: 2px; } .dl mark.d { background: var(--xd-del-hl); } .dl mark.a { background: var(--xd-add-hl); }
.gap > summary { list-style: none; cursor: pointer; padding: 2px 12px; background: var(--xd-hunk); color: var(--xd-hunk-fg); font-size: 12px;
  position: sticky; left: 0; width: max-content; min-width: 100%; box-sizing: border-box; }
.gap > summary::-webkit-details-marker { display: none; }
.gap > summary:hover { text-decoration: underline; }
.gap > summary:focus-visible { outline: 2px solid var(--head); outline-offset: -2px; }
.gap[open] > summary { display: none; }

/* file drop (drop.js): a full-window target on every page; the card says what happens and, after the drop, what is happening */
.drop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 85%, transparent); pointer-events: none; }
.drop[hidden] { display: none; }
.drop[data-error] { pointer-events: auto; cursor: pointer; }
.drop-card { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 28px 36px; border: 2px dashed var(--line2); border-radius: 8px; background: var(--card); max-width: 480px; }
.drop[data-error] .drop-card { border-style: solid; border-color: var(--r); }
.drop-t { font-size: 16px; color: var(--head); text-wrap: balance; }
.drop-s { font-size: 13px; color: var(--muted); word-break: break-all; }
@media (prefers-reduced-motion: no-preference) { .drop:not([hidden]) { animation: drop-in .12s ease-out; } }
@keyframes drop-in { from { opacity: 0; } }

/* lookup no match: core files with the dropped file's name */
.named { border-top: 1px solid var(--line); }
.named .hr { grid-template-columns: 90px minmax(0, 1fr) auto; }
.named .hr > .muted { font-size: 12px; }
.named .acts { display: flex; justify-content: flex-end; }
@media (max-width: 700px) {
  .named .hr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "plat acts" "path path"; row-gap: 2px; }
  .named .hr > .muted { grid-area: plat; } .named .hr > .cut { grid-area: path; } .named .acts { grid-area: acts; }
}

/* home: the drop-zone card. Dashed, unlike every solid card on the site, so it reads as the place to put a file; the whole card opens the file picker (drop.js unhides it) */
.dropzone { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 24px; border: 2px dashed var(--line2); border-radius: 8px; background: var(--soft); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease-out; }
.dropzone[hidden] { display: none; }
.dropzone:hover { border-color: var(--head); }
.dropzone svg { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--head); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dz-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dz-text b { font-size: 16px; color: var(--head); text-wrap: balance; }
.dz-text span { font-size: 13px; color: var(--muted); }
.dz-btn { flex: none; }
@media (max-width: 700px) { .dropzone { flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding: 18px; } .dz-text { flex: 1 1 calc(100% - 48px); } .dz-btn { margin-left: 48px; } }

/* AI agents (layout.php, agent.js): a header button opens the prompt panel; data-agent-copy buttons copy it. */
.top nav .navbtn { appearance: none; border: 0; background: none; padding: 10px 0; margin: -10px 0; font: inherit; font-size: 13px; color: #d1d5db; cursor: pointer; }
.top nav .navbtn:hover { color: #fff; }
.top nav .navbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.35); border-radius: 2px; }
.agent-panel { position: fixed; inset: var(--ap-top, 60px) max(16px, calc((100vw - 1200px) / 2 + 24px)) auto auto; margin: 0; padding: 0;
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 80px); color: var(--fg); background: var(--card);
  border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 8px 24px -12px rgb(0 0 0 / .35); }
.agent-panel:popover-open { display: flex; flex-direction: column; }
.agent-panel::backdrop { background: transparent; }
.ap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; flex-wrap: wrap; }
.ap-head b { color: var(--head); font-size: 13px; }
.ap-text { margin: 0; padding: 12px 14px; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--soft); border-block: 1px solid var(--line); overflow-y: auto; min-height: 0; max-height: min(50vh, 420px); color: var(--fg); }
.ap-text:focus-visible { outline: 2px solid var(--head); outline-offset: -2px; }
.ap-foot { margin: 0; padding: 10px 12px; font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
  .agent-panel { inset: var(--ap-top, 60px) 16px auto 16px; width: auto; max-height: calc(100vh - var(--ap-top, 60px) - 16px); }
  /* Five nav items and the theme switch do not fit one row: the switch moves up beside the brand. */
  .top .end { display: contents; }
  .top .theme { order: 1; margin-left: auto; }
  .top nav { order: 2; width: 100%; gap: 16px; padding-bottom: 10px; }
}

/* Copy a plain-text hash on click (copy.js). Links are never [data-copy]. */
[data-copy] { cursor: copy; border-radius: 3px; transition: background-color .2s ease-out, color .2s ease-out; }
[data-copy]:hover { background: var(--nbg); color: var(--head); }
[data-copy]:focus-visible { outline: 2px solid var(--head); outline-offset: 1px; }
[data-copy].is-copied { background: var(--gbg); color: var(--g); }
.copied-tip { position: fixed; z-index: 60; transform: translate(-50%, -100%) translateY(4px); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500;
  background: var(--ink); color: #fff; pointer-events: none; opacity: 0; transition: opacity .15s ease-out, transform .15s cubic-bezier(.2,0,0,1); }
.copied-tip.on { opacity: 1; transform: translate(-50%, -100%); }
@media (prefers-reduced-motion: reduce) { [data-copy], .copied-tip { transition: none; } }