/* Olifant web app — design v2 (Nov 1, 2026; dz-design's design/v2/design.md, mocks ui.css + app.css + set-a/b/c.css).
   Every colour is a token: tokens.css (neutrals, status, syntax, both modes) and accent.css (the one file a colour choice
   changes). No colour literal in this file. Light = white chrome and paper split by hairlines (the Ledger); dark mirrors
   it with values only. Widths: phone < 600 · rail 600–1099 (64-px icon rail) · desktop 1100–1679 · wide ≥ 1680. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("Inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("JetBrainsMono.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("jbmono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The names the older rules (content, previews, the feed pages) use, mapped onto the tokens. */
:root {
  --bg: var(--ol-paper); --surface: var(--ol-paper); --ink: var(--ol-ink); --ink2: var(--ol-ink-2); --muted: var(--ol-muted); --faint: var(--ol-muted);
  --line: var(--ol-line); --line2: var(--ol-line); --hover: var(--ol-box); --sel: var(--ol-box-2); --code: var(--ol-box); --code-bg: var(--ol-box);
  --accent: var(--ol-accent); --accent-ink: var(--ol-accent); --accent-soft: var(--ol-accent-soft); --focus: var(--ol-accent);
  --brand: var(--ol-accent); --brand-ink: var(--ol-accent); --brand-soft: var(--ol-accent-soft); --platinum: var(--ol-box);
  --plus: var(--ol-ok); --minus: var(--ol-danger); --warn: var(--ol-warn);
  --mark: color-mix(in srgb, var(--ol-warn) 22%, var(--ol-paper));
  --add: color-mix(in srgb, var(--ol-ok) 13%, var(--ol-paper)); --add2: color-mix(in srgb, var(--ol-ok) 30%, var(--ol-paper));
  --del: var(--ol-danger-soft); --del2: color-mix(in srgb, var(--ol-danger) 30%, var(--ol-paper));
  --side-bg: var(--ol-box); --side-line: var(--ol-line); --side-head: var(--ol-muted); --strip-bg: var(--ol-box);
  --notice: var(--ol-box); --notice-line: var(--ol-line); --text: var(--ol-ink); --text2: var(--ol-ink-2);
  --ui: var(--ol-sans); --mono: var(--ol-mono); --read-size: 16px; --read-lh: 1.6; --r: 10px;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ol-chrome); }
body { margin: 0; min-height: 100vh; background: var(--ol-chrome); color: var(--ol-ink); font: var(--ol-w-regular) var(--ol-t-base)/var(--ol-lh-body) var(--ol-sans);
       -webkit-font-smoothing: antialiased; font-feature-settings: "cv11"; }
a { color: inherit; text-decoration: none; }
p a:not(.btn), .md a, .meta a:not(.btn), .hint a, .more a, .lede a, .band a, .empty a:not(.btn), li > a:not([class]) { color: var(--ol-accent); }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn:hover, .row:hover, .nav a:hover, .tabbar a:hover, .menu a:hover, .seg a:hover, .card:hover, .brand:hover, .tree a:hover, .trashlink:hover, .tt a:hover { text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ol-focus); border-radius: 6px; }
code, pre, kbd, .mono { font-family: var(--ol-mono); }
code { font-size: .9em; }
time, .num { font-variant-numeric: tabular-nums; }
kbd { font: 500 11.5px var(--ol-mono); border: 1px solid var(--ol-line); border-radius: 5px; padding: 1px 5px; color: var(--ol-muted); background: var(--ol-paper); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i, .i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mark { width: 24px; height: 24px; flex: none; color: var(--ol-ink); }
.meta { color: var(--ol-muted); font-size: var(--ol-t-sm); margin: 0 0 16px; }
.meta.small { font-size: 12.5px; }
.hint { color: var(--ol-muted); font-size: 13px; }
.lede { color: var(--ol-ink-2); max-width: 72ch; }
.plus { color: var(--ol-ok); } .minus { color: var(--ol-danger); }
.pending { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ol-warn); font-weight: 500; }
.more { font-size: var(--ol-t-sm); margin: 10px 0 0; }
.sep { color: var(--ol-muted); margin: 0 4px; }

/* ---- buttons: .btn (secondary) .p/.primary .d/.danger (destructive: ink-filled) .q/.quiet .i (icon) .sm/.small .big ---- */
.btn, .tool { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ol-control); padding: 0 14px; border-radius: 8px;
              border: 1px solid var(--ol-line); background: var(--ol-paper); color: var(--ol-ink); font: var(--ol-w-medium) 14px var(--ol-sans);
              white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--ol-motion), border-color var(--ol-motion), box-shadow var(--ol-motion); }
.btn:hover, .tool:hover { background: var(--ol-box); }
.btn:active, .tool:active { transform: translateY(.5px); }
.btn:focus-visible, .tool:focus-visible { box-shadow: var(--ol-focus); border-radius: 8px; }
.btn .i, .tool .i { width: 17px; height: 17px; }
.btn.p, .btn.primary, .tool.primary { background: var(--ol-accent); color: var(--ol-accent-ink); border-color: transparent; }
.btn.p:hover, .btn.primary:hover, .tool.primary:hover { background: var(--ol-accent-hover); }
.btn.d, .btn.danger:not(.quiet), .tool.danger { background: var(--ol-destructive); color: var(--ol-destructive-ink); border-color: transparent; }
.btn.d:hover, .btn.danger:not(.quiet):hover, .tool.danger:hover { background: var(--ol-destructive); opacity: .9; }
.btn.q, .btn.quiet { border-color: transparent; background: transparent; }
.btn.q:hover, .btn.quiet:hover { background: var(--ol-box); }
.btn.danger.quiet { color: var(--ol-danger); }
.btn.i { width: var(--ol-control); padding: 0; }
.btn.sm, .btn.small { height: 32px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
.btn.sm.i, .btn.small.i { width: 32px; padding: 0; }
.btn.big { height: 44px; padding: 0 18px; font-size: 15px; }
.btn.off, .btn:disabled, .btn[aria-disabled="true"], .tool:disabled { opacity: .45; pointer-events: none; cursor: default; }
.btn .caret { width: 14px; height: 14px; margin: 0 -2px 0 -2px; }
/* key badges inside buttons (design v2.4): ⌘K, U, R, Esc; hidden on the phone and on touch screens, where the button
   shows its icon alone */
.btn kbd { margin-left: 2px; font-size: 11px; padding: 0 5px; line-height: 18px; border-radius: 4px; color: var(--ol-muted); background: var(--ol-paper); border: 1px solid var(--ol-line); }
.btn.up { height: 28px; padding: 0 8px 0 6px; font-size: 13px; gap: 5px; flex: none; }
.btn.up .i { width: 15px; height: 15px; }
.crumbrow { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; min-width: 0; }
.crumbrow .crumb { margin: 0; min-width: 0; }
.crumb b { color: var(--ol-ink); font-weight: var(--ol-w-medium); }
.back .bver { margin-left: auto; color: var(--ol-muted); font-size: var(--ol-t-sm); white-space: nowrap; }
.cmd .foot .keys { display: block; margin-bottom: 4px; }
.cmd .foot kbd { font-size: 11px; padding: 0 4px; }
@media (max-width: 599px), (hover: none) and (pointer: coarse) {
  .btn kbd, .top .search kbd { display: none; }
  .btn .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn.read { padding: 0 10px; } .btn.up { padding: 0 8px; }
}
@media (max-width: 599px) { .btn.up { height: 36px; } .back .bver { display: none; } .title .actions > .btn.read { flex: 0 0 var(--ol-control); } }
.linkbtn { border: 0; background: none; padding: 0; color: var(--ol-accent); cursor: pointer; font: inherit; font-weight: var(--ol-w-medium); }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- inputs: .in (v2) and .field (the JS's dialogs) ---- */
.in, .field, input.filter { display: block; width: 100%; height: var(--ol-control); padding: 0 12px; border: var(--ol-border-strong); border-radius: 8px;
                            background: var(--ol-paper); color: var(--ol-ink); font: 14.5px var(--ol-sans); transition: border-color var(--ol-motion), box-shadow var(--ol-motion); }
.in::placeholder, .field::placeholder, input.filter::placeholder { color: var(--ol-muted); opacity: 1; }
.in:hover, .field:hover, input.filter:hover { border-color: var(--ol-muted); }
.in:focus, .field:focus, input.filter:focus { outline: none; border-color: var(--ol-accent); box-shadow: var(--ol-focus); }
textarea.in, textarea.field { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.in.sm, .field.small, input.filter.sm { height: 32px; padding: 0 10px; font-size: 13.5px; border-radius: 7px; }
.field.small { display: inline-block; width: auto; }
.field.mono, .in.mono { font: 13px var(--ol-mono); }
select.in, select.field { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ol-ink-2) 50%), linear-gradient(135deg, var(--ol-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select.in.sm, select.field.small { padding-right: 30px; background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ol-accent); width: 16px; height: 16px; margin: 0; }
label.l { display: block; font-size: var(--ol-t-sm); font-weight: var(--ol-w-medium); color: var(--ol-ink-2); margin: 0 0 6px; }

/* ---- small components ---- */
.seg { display: inline-flex; background: var(--ol-box); border-radius: 8px; padding: 3px; gap: 2px; flex: none; }
.seg a, .seg button { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent;
                      font-size: var(--ol-t-sm); font-weight: var(--ol-w-medium); color: var(--ol-ink-2); cursor: pointer; text-decoration: none; }
.seg a.on, .seg button.on { background: var(--ol-paper); color: var(--ol-ink); box-shadow: var(--ol-shadow-seg); }
.seg a:hover:not(.on), .seg button:hover:not(.on) { color: var(--ol-ink); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ol-line); margin: 0 0 16px; }
.tabs a { padding: 8px 12px; font-size: 14px; font-weight: var(--ol-w-medium); color: var(--ol-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--ol-ink); border-color: var(--ol-accent); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--ol-r-full); font-size: 12px; font-weight: var(--ol-w-medium);
         background: var(--ol-box-2); color: var(--ol-ink-2); white-space: nowrap; vertical-align: 1px; }
.badge.ok { background: color-mix(in srgb, var(--ol-ok) 14%, transparent); color: var(--ol-ok); }
.badge.warn { background: var(--ol-warn-soft); color: var(--ol-warn); }
.badge.danger { background: var(--ol-danger-soft); color: var(--ol-danger); }
.badge.ai { background: var(--ol-second-soft); color: var(--ol-second); }
.badge.acc { background: var(--ol-accent-soft); color: var(--ol-accent); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ol-muted); margin-right: 6px; vertical-align: 1px; }
.dot.ok { background: var(--ol-ok); } .dot.warn { background: var(--ol-warn); } .dot.danger { background: var(--ol-danger); }
/* the AI: an empty .ai is the 8-px dot before its name; a .ai with text (or .ainame) is its name, in the second colour */
.ai:empty { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ol-second); vertical-align: 1px; margin-right: 5px; }
.ai:not(:empty), .ainame { color: var(--ol-second); font-weight: var(--ol-w-medium); }
.who { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: 11px; font-weight: var(--ol-w-semibold);
       background: var(--ol-box-2); color: var(--ol-ink-2); }
.who .i { width: 13px; height: 13px; }
.who.ai { background: var(--ol-second-soft); color: var(--ol-second); }
.aim { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ol-second-soft); color: var(--ol-second); vertical-align: -4px; margin-right: 4px; }
.aim .i { width: 11px; height: 11px; stroke-width: 2.2; }
.band, .notice { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 0 0 16px;
                 border: 1px solid var(--ol-line); background: var(--ol-box); color: var(--ol-ink); max-width: 760px; }
.band.warn, .notice.warn { background: var(--ol-warn-soft); border-color: transparent; color: var(--ol-ink); font-weight: var(--ol-w-regular); }
.band.danger { background: var(--ol-danger-soft); border-color: transparent; }
.band.ok { background: color-mix(in srgb, var(--ol-ok) 12%, transparent); border-color: transparent; }
.notice::before, .band.warn::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
                                     font-size: 12px; font-weight: 700; background: var(--ol-muted); color: var(--ol-paper); }
.notice.warn::before, .band.warn::before { background: var(--ol-warn); }
.banner { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 16px; background: var(--ol-warn-soft); color: var(--ol-ink);
          font-size: 14px; border-bottom: 1px solid var(--ol-line-chrome); }
.banner a { text-decoration: underline; text-underline-offset: 2px; font-weight: var(--ol-w-medium); }
.empty { text-align: center; padding: 48px 20px; color: var(--ol-muted); font-size: 14.5px; }
.empty .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ol-box); margin: 0 auto 12px; display: grid; place-items: center; color: var(--ol-ink-2); }
.empty .ic .i { width: 22px; height: 22px; }
.empty b { display: block; color: var(--ol-ink); font-weight: var(--ol-w-semibold); font-size: 16px; margin-bottom: 4px; }
.empty .btn { margin-top: 14px; }
p.empty { padding: 32px 16px; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; font-size: 14px; margin: 0; }
.kv dt { color: var(--ol-muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.disc, .connect details { border: 1px solid var(--ol-line); border-radius: 10px; margin: 0 0 8px; }
.disc > summary, .connect details > summary { display: block; position: relative; padding: 12px 14px 12px 36px; font-weight: var(--ol-w-regular); font-size: 14.5px; color: var(--ol-ink-2); cursor: pointer; list-style: none; }
.disc > summary b, .connect details > summary b { color: var(--ol-ink); font-weight: var(--ol-w-semibold); }
.disc > summary::-webkit-details-marker, .connect details > summary::-webkit-details-marker { display: none; }
.disc > summary::before, .connect details > summary::before { content: ""; position: absolute; left: 15px; top: 19px; width: 7px; height: 7px; border-right: 1.75px solid var(--ol-muted);
                                     border-bottom: 1.75px solid var(--ol-muted); transform: rotate(-45deg); transition: transform var(--ol-motion); }
.disc[open] > summary::before, .connect details[open] > summary::before { transform: rotate(45deg); }
.disc > :not(summary), .connect details > :not(summary) { margin-left: 14px; margin-right: 14px; }
.disc > :last-child, .connect details > :last-child { margin-bottom: 14px; }
pre.code, pre.cmd { font: 13px/1.55 var(--ol-mono); background: var(--ol-box); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy, .linkrow { display: flex; gap: 8px; align-items: center; }
.copy .in, .linkrow .field { flex: 1; min-width: 0; font: 13px var(--ol-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-box, .tbl.box { border: 1px solid var(--ol-line); border-radius: 10px; overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ol-muted); font-weight: var(--ol-w-medium); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ol-line); white-space: nowrap; }
table.t td { padding: 10px; border-bottom: 1px solid var(--ol-line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t .n { text-align: right; font-variant-numeric: tabular-nums; }
.pcard { border: 1px solid var(--ol-line); border-radius: 12px; padding: 16px; margin: 0 0 12px; }
.sec { margin: 0 0 28px; }
.sec h2 { font-size: 16px; font-weight: var(--ol-w-semibold); margin: 0 0 10px; letter-spacing: -.01em; }

/* ---- the chrome: top bar ---- */
.top { position: sticky; top: 0; z-index: 30; height: var(--ol-bar); display: flex; align-items: center; gap: 14px; padding: 0 16px;
       background: var(--ol-chrome); border-bottom: 1px solid var(--ol-line-chrome); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: var(--ol-w-semibold); font-size: 16px; color: var(--ol-ink); flex: none; border-radius: 8px; }
.top .search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 12px; border: 1px solid transparent; border-radius: 8px;
               background: var(--ol-chrome-2); color: var(--ol-muted); margin-left: 26px; }
.top .search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ol-ink); font: 14px var(--ol-sans); outline: none; }
.top .search input::placeholder { color: var(--ol-muted); opacity: 1; }
.top .search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.top .search:focus-within { border-color: var(--ol-accent); box-shadow: var(--ol-focus); }
.top .search kbd { border-color: var(--ol-line-chrome); background: transparent; font-size: 11.5px; }
.top .sp { flex: 1; }
.ibtn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--ol-ink-2); border: 0; background: transparent; cursor: pointer; flex: none; }
.ibtn:hover { background: var(--ol-chrome-2); color: var(--ol-ink); }
.top .searchbtn { display: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ol-box-2); color: var(--ol-ink); display: grid; place-items: center;
          font-weight: var(--ol-w-semibold); font-size: 13px; flex: none; cursor: pointer; padding: 0; }
.avatar:hover { box-shadow: 0 0 0 3px var(--ol-chrome-2); }
.avatar.big { width: 40px; height: 40px; font-size: 16px; cursor: default; }
.back { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; padding: 6px 16px; background: var(--ol-chrome); border-bottom: 1px solid var(--ol-line-chrome); font-size: var(--ol-t-sm); }
.back .crumbs { color: var(--ol-muted); min-width: 0; overflow-wrap: anywhere; }
.back .crumbs a { color: var(--ol-ink-2); }
.back .crumbs .here { color: var(--ol-ink); font-weight: var(--ol-w-medium); }

/* ---- layout ---- */
body > .main { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - var(--ol-bar)); }
.content { min-width: 0; }
.sheet { background: var(--ol-paper); min-height: 100%; padding: 20px 24px 48px; }
.main.std { grid-template-columns: var(--ol-sidebar) minmax(0, 1fr); }
.main.std.three { grid-template-columns: var(--ol-sidebar) minmax(0, 1fr) var(--ol-rail); }

/* the sidebar: sections, Folders (the tree), Trash, the storage meter */
.rail { position: sticky; top: var(--ol-bar); height: calc(100vh - var(--ol-bar)); overflow: auto; display: flex; flex-direction: column; gap: 2px;
        padding: 14px 12px 12px; font-size: 14px; background: var(--ol-chrome); border-right: 1px solid var(--ol-line-chrome); overscroll-behavior: contain; }
.rail .drawer-x { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .trashlink { display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 36px; border-radius: 8px; color: var(--ol-ink-2); }
.nav a:hover, .trashlink:hover { background: var(--ol-chrome-2); color: var(--ol-ink); }
.nav a.on, .trashlink.on { background: var(--ol-chrome-2); color: var(--ol-ink); font-weight: var(--ol-w-medium); }
.trashlink { margin-top: 10px; color: var(--ol-muted); }
.trashlink .i { width: 16px; height: 16px; }
.railbody { display: flex; flex-direction: column; flex: none; }
.rail .rh { display: flex; align-items: center; gap: 8px; margin: 20px 10px 6px; }
.rail .rh h4 { margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ol-muted); font-weight: var(--ol-w-medium); }
.rail .rh h4 a:hover { color: var(--ol-ink); text-decoration: none; }
.rail .rh .n { display: none; color: var(--ol-muted); font-size: 12px; margin-left: auto; }
.rail.open .rh .n { display: inline; }   /* the drawer names the count (F23); the sidebar leaves it to the title row */
.rail .rh .tbl-link { color: var(--ol-muted); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; }
.rail .rh .tbl-link:hover { background: var(--ol-chrome-2); color: var(--ol-ink); }
.rail .rh .tbl-link .i { width: 15px; height: 15px; }
.rail .filter { margin: 2px 0 6px; background: var(--ol-chrome); }
.rail .railbody.few .filter { display: none; }          /* the filter appears when the tree has more than 12 top items (F24) */
.rail.open .railbody.few .filter { display: block; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 14px; }
.tree li > details > summary { list-style: none; }
.tree li > details > summary::-webkit-details-marker { display: none; }
.tree summary, .tree .row { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 4px; border-radius: 6px; color: var(--ol-ink-2); cursor: pointer; }
.tree .row { padding-left: 24px; }
.tree summary:hover, .tree a.row:hover { background: var(--ol-chrome-2); }
.tree .chev { width: 14px; height: 14px; color: var(--ol-muted); transition: transform var(--ol-motion); }
.tree details[open] > summary .chev { transform: rotate(90deg); }
.tree .ic { width: 15px; height: 15px; color: var(--ol-muted); }
.tree summary .ic { display: none; }
.tree .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree .n { color: var(--ol-muted); font-size: 12px; flex: none; }
.tree li.on > details > summary, .tree li.f.on > .row { color: var(--ol-ink); font-weight: var(--ol-w-medium); background: var(--ol-chrome-2); }
.tree li.on > details > summary .ic, .tree li.f.on > .row .ic { color: var(--ol-accent); }
.tree li.off .row { color: var(--ol-muted); cursor: default; }
.tree li.hit > details > summary .nm, .tree li.hit > .row .nm { color: var(--ol-accent); }
.tree li.more a { display: block; padding: 6px 8px 6px 24px; font-size: 13px; color: var(--ol-accent); }
.rail .nomatch { font-size: 13px; color: var(--ol-muted); margin: 6px 10px; }
.rail .foot { margin-top: auto; padding: 18px 10px 4px; font-size: 12.5px; color: var(--ol-muted); }
.rail .foot .meter-l { margin: 0; }
.meter { height: 6px; border-radius: 3px; background: var(--ol-chrome-2); margin: 6px 0 0; overflow: hidden; }
.meter i { display: block; height: 100%; width: 1%; background: var(--ol-accent); border-radius: 3px; }
.rail .who-foot { display: none; margin-top: 14px; line-height: 1.6; }
.rail .who-foot form { display: inline; }

/* the file's facts beside the sheet (rail 260 px; ⓘ sheet on narrow screens) */
.side { position: sticky; top: var(--ol-bar); height: calc(100vh - var(--ol-bar)); overflow: auto; padding: 18px 16px 24px; font-size: var(--ol-t-sm); color: var(--ol-ink-2);
        background: var(--ol-chrome); border-left: 1px solid var(--ol-line-chrome); overscroll-behavior: contain; }
.side .sheet-head { display: none; }
.side h3 { margin: 22px 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ol-muted); font-weight: var(--ol-w-medium); display: flex; gap: 8px; align-items: baseline; }
.side h3:first-of-type { margin-top: 0; }
.side h3 .n { margin-left: auto; font-weight: var(--ol-w-regular); letter-spacing: 0; }
.side .kv { grid-template-columns: 72px minmax(0, 1fr); font-size: var(--ol-t-sm); gap: 5px 10px; }
.side .kv dd.path code, .side .kv code { font-size: 12px; overflow-wrap: anywhere; }
.side .kv .subj { color: var(--ol-ink-2); }
.side .pending { font-weight: var(--ol-w-regular); color: var(--ol-warn); }
.side ul.links, .side ul.recent, .main.full > .right ul.links, .main.full > .right ul.recent { list-style: none; margin: 0; padding: 0; }
.side ul.links a, .side ul.recent a, .main.full > .right ul a { display: flex; flex-direction: column; padding: 5px 0; color: var(--ol-ink); }
.side ul.links a:hover .nm, .side ul.recent a:hover .nm { color: var(--ol-accent); }
.side ul.links .dir, .side ul.recent .dir, .main.full > .right .dir { color: var(--ol-muted); font-size: 12px; overflow-wrap: anywhere; }
.side ul.links .nm, .side ul.recent .nm { overflow-wrap: anywhere; }
.side ul.recent li, .main.full > .right ul.recent li { display: flex; gap: 10px; align-items: baseline; }
.side ul.recent time, .main.full > .right ul.recent time { color: var(--ol-muted); font-size: 12px; flex: none; min-width: 38px; }
.side .morelinks summary { cursor: pointer; color: var(--ol-accent); font-size: 13px; padding: 4px 0; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li a { display: block; padding: 3px 0 3px 10px; margin-left: -10px; border-left: 2px solid transparent; color: var(--ol-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc li.l3 a { padding-left: 22px; } .toc li.l4 a { padding-left: 34px; }
.toc li.on a { color: var(--ol-ink); font-weight: var(--ol-w-medium); border-left-color: var(--ol-accent); }

/* the phone's tab bar, the scrim behind sheets and drawers */
.tabbar { display: none; }
.scrim { position: fixed; inset: 0; z-index: 35; background: var(--ol-overlay); }

/* the Document (reading) and Tree views: no sidebar */
.main.full { grid-template-columns: minmax(0, 1fr); }
.main.full > .left, .main.full > .right { display: none !important; }      /* v2.4: the reading view has no sidebar, no rail */
.main.full .crumbrow, .main.full .title.file, .main.full .title.file + .meta, .main.full .vband, .main.full .vsubj { display: none; }
.main.full .md { font-size: 17px; }
.main.full > .left, .main.full > .right { position: sticky; top: var(--ol-bar); height: calc(100vh - var(--ol-bar)); overflow: auto; padding: 22px 16px; font-size: var(--ol-t-sm); }
.main.full > .left h3, .main.full > .right h3 { margin: 18px 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ol-muted); font-weight: var(--ol-w-medium); }
.main.full .sheet { padding: 28px 32px 64px; }
.main.full .sheet > * { max-width: var(--ol-measure); margin-left: auto; margin-right: auto; }
.main.full .title .tv, .main.full .title .info { display: none !important; }
.main.full > .right .kv { grid-template-columns: 72px minmax(0, 1fr); font-size: var(--ol-t-sm); }
.main.full .crumb { display: none; }
.main.full > .right .more a, .main.full > .right .morelinks summary { color: var(--ol-accent); }
.main.solo .sheet { padding: 20px 24px 48px; }

/* ---- the sheet: breadcrumb, title row, actions ---- */
.crumb { color: var(--ol-muted); font-size: var(--ol-t-sm); margin: 0 0 4px; overflow-wrap: anywhere; }
.crumb a:hover { color: var(--ol-ink); }
.crumb .sep { margin: 0 5px; }
.title { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 14px; min-height: var(--ol-control); }
.title h1 { display: flex; align-items: center; gap: 4px; font-size: var(--ol-t-xl); margin: 0; font-weight: var(--ol-w-semibold); letter-spacing: -.01em; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.title h1 .f { min-width: 0; overflow-wrap: anywhere; }
.title small { color: var(--ol-muted); font-size: var(--ol-t-sm); }
.title .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.title .tv { display: none; width: 30px; height: 30px; place-items: center; border: 0; background: transparent; color: var(--ol-muted); border-radius: 6px; cursor: pointer; padding: 0; }
.title .tv:hover { background: var(--ol-box); color: var(--ol-ink); }
.title .btn.info { display: none; }
.title .histlink { font-size: var(--ol-t-sm); font-weight: var(--ol-w-medium); color: var(--ol-accent); }
.title.file + .meta { margin-top: -6px; }
.dd { position: relative; display: inline-flex; }
.pop { position: absolute; z-index: 40; }
.pop .menu { min-width: 200px; }

/* ---- menus: the ⋯ menu (actions.js), New ▾, the account menu ---- */
.menu { min-width: 200px; background: var(--ol-paper); border: 1px solid var(--ol-line); border-radius: 10px; padding: 6px; box-shadow: var(--ol-shadow-pop); font-size: 14px; color: var(--ol-ink); }
.menu.float { position: absolute; z-index: 60; }
.menu > button, .menu > a, .menu form > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-radius: 6px;
               background: none; color: var(--ol-ink); text-align: left; cursor: pointer; font: inherit; text-decoration: none; }
.menu > button:hover, .menu > a:hover, .menu form > button:hover, .menu > button:focus-visible, .menu > a:focus-visible, .menu form > button:focus-visible { background: var(--ol-box); box-shadow: none; }
.menu > button .i, .menu > a .i, .menu form > button .i { width: 16px; height: 16px; color: var(--ol-ink-2); }
.menu > .danger { color: var(--ol-danger); }
.menu > .msep { margin-top: 7px; position: relative; }
.menu > .msep::before { content: ""; position: absolute; left: 4px; right: 4px; top: -4px; border-top: 1px solid var(--ol-line); }
.menu hr { border: 0; border-top: 1px solid var(--ol-line); margin: 6px 4px; }
.menu .head { display: none; }
.menu .k { margin-left: auto; color: var(--ol-muted); font-size: 12.5px; }
.menu > .who { display: flex; align-items: center; gap: 12px; width: auto; height: auto; border-radius: 0; background: none; padding: 8px 10px 10px; font-size: 13px; color: var(--ol-muted); font-weight: var(--ol-w-regular); place-items: initial; }
.menu > .who > div { min-width: 0; display: flex; flex-direction: column; }
.menu > .who b { color: var(--ol-ink); font-weight: var(--ol-w-semibold); font-size: 14.5px; overflow-wrap: anywhere; }
.menu > .who span { overflow-wrap: anywhere; }
.menu > .who code { font-size: 12px; }
.pop.acct .menu { width: 300px; }
.menu .appear { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 13.5px; color: var(--ol-ink-2); }
.menu .appear .seg button { height: 28px; padding: 0 10px; font-size: 13px; }
.menu form { margin: 0; }

/* ---- dialogs (native <dialog>; a bottom sheet on the phone), toasts, the upload tray, the drop zone ---- */
dialog.dlg { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: var(--ol-r-lg);
             background: var(--ol-paper); color: var(--ol-ink); box-shadow: var(--ol-shadow-pop); overflow: auto; }
dialog.dlg.wide { width: min(560px, calc(100vw - 32px)); }
dialog.dlg::backdrop { background: var(--ol-overlay); }
dialog.dlg form { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
dialog.dlg h2 { margin: 0; font-size: 17px; font-weight: var(--ol-w-semibold); letter-spacing: -.01em; overflow-wrap: anywhere; }
dialog.dlg p { margin: 0; color: var(--ol-ink-2); font-size: 14.5px; line-height: 1.5; }
dialog.dlg .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
dialog.dlg .row .btn:first-child:not(:last-child) { border-color: transparent; background: transparent; }
dialog.dlg .row .btn:first-child:not(:last-child):hover { background: var(--ol-box); }
dialog.dlg .sel { user-select: all; overflow-wrap: anywhere; }
dialog.dlg .hint { margin: 0; }
dialog.dlg .chk { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.picker { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; border: 1px solid var(--ol-line); border-radius: 10px; }
.picker li label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--ol-line); }
.picker li:last-child label { border-bottom: 0; }
.picker li label:hover { background: var(--ol-box); }
.picker li label:has(input:checked) { background: var(--ol-accent-soft); }
.picker li.empty { padding: 14px; color: var(--ol-muted); text-align: left; font-size: 14px; }
.toasts { position: fixed; z-index: 80; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column;
          gap: 8px; align-items: center; width: min(520px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--ol-ink); color: var(--ol-paper);
         font-size: 14px; box-shadow: var(--ol-shadow-pop); max-width: 100%; }
.toast a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: var(--ol-w-medium); white-space: nowrap; margin-left: auto; }
.toast.err { background: var(--ol-danger); color: var(--ol-paper); }
.tray { position: fixed; z-index: 70; right: 16px; bottom: 16px; width: 360px; max-height: 50vh; overflow: auto; background: var(--ol-paper);
        border: 1px solid var(--ol-line); border-radius: 12px; box-shadow: var(--ol-shadow-pop); }
.tray h3 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--ol-line); font-size: 14px; font-weight: var(--ol-w-medium); }
.tray ul { list-style: none; margin: 0; padding: 0; }
.tray li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm st" "bar bar"; gap: 6px 10px; padding: 10px 14px; border-top: 1px solid var(--ol-line); font-size: var(--ol-t-sm); align-items: center; }
.tray li:first-child { border-top: 0; }
.tray li .nm { grid-area: nm; font-weight: var(--ol-w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray li .st { grid-area: st; display: block; width: auto; height: auto; background: none; font: 12.5px var(--ol-sans); color: var(--ol-muted); text-align: right; }
.tray li progress { grid-area: bar; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--ol-box-2); overflow: hidden; -webkit-appearance: none; appearance: none; }
.tray li progress::-webkit-progress-bar { background: var(--ol-box-2); border-radius: 2px; }
.tray li progress::-webkit-progress-value { background: var(--ol-accent); border-radius: 2px; }
.tray li progress::-moz-progress-bar { background: var(--ol-accent); }
.tray li.ok .st { color: var(--ol-ok); } .tray li.bad { grid-template-areas: "nm nm" "bar bar" "st st"; } .tray li.bad .st { color: var(--ol-danger); text-align: left; } .tray li.skip .st { color: var(--ol-muted); }
.tray li.ok progress::-webkit-progress-value { background: var(--ol-ok); }
.dropzone { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; pointer-events: none;
            background: color-mix(in srgb, var(--ol-accent) 8%, var(--ol-overlay)); }
.dropzone.on { display: flex; }
.dropzone div { padding: 28px 36px; border-radius: var(--ol-r-lg); background: var(--ol-paper); color: var(--ol-ink); font-size: 16px; font-weight: var(--ol-w-medium);
                border: 2px dashed var(--ol-accent); }

/* ---- the ⌘K search overlay ---- */
.cmd { position: fixed; inset: 0; z-index: 50; background: var(--ol-overlay); display: grid; justify-items: center; align-content: start; padding: 80px 16px; }
.cmd .box { width: 100%; max-width: 640px; background: var(--ol-paper); border-radius: var(--ol-r-lg); box-shadow: var(--ol-shadow-pop); overflow: hidden; margin: 0; }
.cmd .q { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ol-line); color: var(--ol-muted); }
.cmd .q input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ol-ink); font: 16px var(--ol-sans); outline: none; }
.cmd .q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cmd .q input:focus-visible { box-shadow: none; }
.cmd .q:focus-within { box-shadow: inset 0 -2px 0 var(--ol-accent); }
.cmd .scope { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: var(--ol-t-sm); color: var(--ol-muted); }
.cmd .scope select { width: auto; max-width: 60%; }
.cmd .scope .btn { margin-left: auto; }
.cmd .r { max-height: min(56vh, 460px); overflow: auto; padding: 6px; border-top: 1px solid var(--ol-line); }
.cmd .r .h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ol-muted); padding: 10px 10px 4px; font-weight: var(--ol-w-medium); }
.cmd .r a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--ol-ink); font-size: 14px; }
.cmd .r a:hover, .cmd .r a.hov { background: var(--ol-box); text-decoration: none; }
.cmd .r a.hov { box-shadow: inset 2px 0 0 var(--ol-accent); }
.cmd .r .ic { width: 26px; height: 26px; border-radius: 7px; background: var(--ol-box); display: grid; place-items: center; color: var(--ol-ink-2); font-size: 13px; }
.cmd .r b { font-weight: var(--ol-w-medium); overflow-wrap: anywhere; }
.cmd .r em { font-style: normal; color: var(--ol-muted); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd .r mark { background: var(--ol-accent-soft); color: inherit; border-radius: 2px; }
.cmd .r .none { margin: 0; padding: 12px 10px; color: var(--ol-ink-2); font-size: 14px; }
.cmd .r .none.err { color: var(--ol-ink); }
.cmd .r[aria-busy="true"] { opacity: .7; }
.cmd .foot { margin: 0; padding: 8px 16px; border-top: 1px solid var(--ol-line); font-size: 12.5px; color: var(--ol-muted); }

/* ---- Files: the list (48-px rows), the strip line, the README box, recent changes ---- */
.listing { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--ol-line); border-radius: 10px; overflow: hidden; }
.listing > li { display: flex; align-items: center; border-top: 1px solid var(--ol-line); }
.listing > li:first-child { border-top: 0; }
.listing > li:hover { background: var(--ol-box); }
.listing .row { flex: 1; min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: var(--ol-row);
                padding: 8px 6px 8px 14px; color: var(--ol-ink); }
.listing .row:focus-visible { box-shadow: inset var(--ol-focus); border-radius: 0; }
.listing .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--ol-ink-2); background: var(--ol-box); }
.listing .ic.f { background: var(--ol-box-2); }
.listing .ic .i { width: 16px; height: 16px; }
.listing .nmw { min-width: 0; display: flex; flex-direction: column; }
.listing .nm { font-weight: var(--ol-w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing .sz { font-style: normal; color: var(--ol-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing .sz b { font-weight: var(--ol-w-medium); }
.listing .tm { color: var(--ol-muted); font-size: 13px; text-align: right; white-space: nowrap; }
.listing .lnk { color: var(--ol-muted); font-weight: var(--ol-w-regular); }
.listing li.off .row { color: var(--ol-muted); }
.listing li.off .nm { font-weight: var(--ol-w-regular); }
.listing li.off:hover { background: none; }
.kb { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 10px; border: 0; border-radius: 6px; background: none; color: var(--ol-muted);
      cursor: pointer; flex: none; padding: 0; }
.vkb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; color: var(--ol-muted); cursor: pointer; }
.vmore[open] > .vkb, .vkb:hover { background: var(--ol-box-2); color: var(--ol-ink); }
.kb:hover, .kb:focus-visible, .kb[aria-expanded="true"] { background: var(--ol-box-2); color: var(--ol-ink); }
.listing li .kb { opacity: 0; }
.listing li:hover .kb, .listing li .kb:focus-visible, .listing li .kb[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .listing li .kb { opacity: 1; } .listing > li:hover { background: none; } }
.btn.kb { margin: 0; color: var(--ol-ink); border: 1px solid var(--ol-line); background: var(--ol-paper); width: var(--ol-control); height: var(--ol-control); border-radius: 8px; }
.btn.kb:hover, .btn.kb[aria-expanded="true"] { background: var(--ol-box); }
.strip { margin: -4px 0 14px; font-size: var(--ol-t-sm); color: var(--ol-ink-2); display: flex; flex-direction: column; gap: 2px; }
.strip p { margin: 0; }
.strip a { color: var(--ol-accent); }
.strip .purpose a, .strip .since a { margin-left: 2px; }
.strip .imp { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: baseline; }
.strip .imp .lab { color: var(--ol-muted); font-size: 12.5px; }
.strip .imp a { font-weight: var(--ol-w-medium); }
.readme { margin-top: 24px; border: 1px solid var(--ol-line); border-radius: 10px; padding: 14px 18px 18px; max-width: 920px; }
.readme-head { display: flex; align-items: center; gap: 8px; font-size: var(--ol-t-sm); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ol-line); color: var(--ol-muted); }
.readme-head .i { width: 16px; height: 16px; }
.readme-head a { color: var(--ol-ink-2); font-weight: var(--ol-w-medium); }
.readme .md { font-size: 15px; }
.recent { margin-top: 24px; }
.recent .imp { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 10px; font-size: var(--ol-t-sm); color: var(--ol-muted); }
.recent .imp a { color: var(--ol-ink); font-weight: var(--ol-w-medium); overflow-wrap: anywhere; min-width: 0; }
.recent .imp .lab { margin-right: 2px; }
.recent .more a { color: var(--ol-accent); }
.recent h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ol-muted); font-weight: var(--ol-w-medium); margin: 0 0 8px; }
.card { display: flex; gap: 10px; align-items: flex-start; background: var(--ol-box); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; font-size: 14px; color: var(--ol-ink); }
.card b { font-weight: var(--ol-w-medium); }
.card > div > span, .card .sub { color: var(--ol-muted); }
a.card:hover b.nm { color: var(--ol-accent); }
.card .who { margin-top: -1px; }
.path { font-size: 12px; color: var(--ol-ink-2); overflow-wrap: anywhere; }
.body { min-width: 0; }

/* ---- the file page: body and previews ---- */
.body > .md, .body > article.md, .body > .pager, .body > dl.fm, .body > pre.raw-fm, .body > h1.title { max-width: var(--ol-measure); }
.body h1.title { display: block; font-size: 28px; letter-spacing: var(--ol-track-display); margin: 4px 0 18px; }
.preview .meta { margin-top: 10px; }
.preview figure.image { margin: 0 0 14px; padding: 16px; background: var(--ol-well); border-radius: var(--ol-r-sheet); }
.preview figure.image img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 6px;
                            background: repeating-conic-gradient(var(--ol-box-2) 0 25%, var(--ol-paper) 0 50%) 50% / 16px 16px; }
.pdfwrap, .htmlwrap { border: 1px solid var(--ol-line); border-radius: var(--ol-r-sheet); overflow: hidden; background: var(--ol-well); padding: 10px; }
iframe.pdf, iframe.htmlframe { display: block; width: 100%; height: calc(100vh - 240px); min-height: 480px; border: 0; border-radius: 6px; background: var(--ol-frame); }
video.video { display: block; width: 100%; max-height: 72vh; border-radius: var(--ol-r-sheet); background: var(--ol-media); }
.preview > .card, .body.wide > .card, .pubmain .card.file { max-width: 620px; gap: 16px; padding: 18px 20px; border: 1px solid var(--ol-line); background: var(--ol-paper); }
.body .card .i.big, .card .i.big { width: 44px; height: 44px; stroke-width: 1.3; color: var(--ol-ink-2); padding: 10px; background: var(--ol-box); border-radius: 12px; box-sizing: border-box; }
.card.lock .i.big { color: var(--ol-warn); }
.card .nm { margin: 2px 0; font-weight: var(--ol-w-semibold); font-size: 15px; overflow-wrap: anywhere; }
.card .meta { margin: 0 0 8px; }
.card audio { width: 100%; min-width: 220px; margin-top: 4px; }
.tree li.cred > .row .ic-lock, .listing li.cred .ic-lock { color: var(--ol-warn); }
.table-wrap.csv { margin: 0; max-height: calc(100vh - 220px); overflow: auto; }
.table-wrap.csv table { font-size: 13px; }
.table-wrap.csv th { position: sticky; top: 0; z-index: 1; }
.table-wrap.csv td, .table-wrap.csv th { white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.table-wrap.csv .rn { color: var(--ol-muted); font-family: var(--ol-mono); font-size: 11.5px; text-align: right; background: var(--ol-box); }
.table-wrap.csv td:not(.rn) { font-variant-numeric: tabular-nums; }

/* ---- rendered markdown (kept from the app before v2, on the tokens) ---- */
dl.fm, pre.raw-fm { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 22px; padding: 10px 12px;
                    border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; line-height: 1.5; }
pre.raw-fm { display: block; white-space: pre-wrap; font-size: 12px; }
dl.fm dt { color: var(--muted); font-size: 12.5px; text-transform: capitalize; }
dl.fm dd { margin: 0; color: var(--ink2); overflow-wrap: anywhere; }
.md { font-size: var(--read-size); line-height: var(--read-lh); color: var(--ink); overflow-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4 { line-height: 1.25; letter-spacing: -.01em; margin: 1.7em 0 .5em; font-weight: 600; scroll-margin-top: 110px; }
.md h1 { font-size: 1.65em; letter-spacing: -.02em; margin: .2em 0 .7em; }
.md h2 { font-size: 1.22em; } .md h3 { font-size: 1.06em; } .md h4 { font-size: 1em; }
.md p { margin: 0 0 .8em; }
.md ul, .md ol { margin: 0 0 .8em; padding-left: 1.3em; }
.md li { margin: 0 0 .35em; }
.md li > p { margin: .3em 0; }
.md ul.contains-task-list { list-style: none; padding-left: .3em; }
.md .task-list-item-checkbox { margin: 0 .45em 0 0; vertical-align: -.1em; }
.md blockquote { margin: 1em 0; padding: .1em 0 .1em 1em; border-left: 3px solid var(--line2); color: var(--ink2); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.md code { font-family: var(--mono); background: var(--code); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: .84em; overflow-wrap: anywhere; }
.md pre { background: var(--code); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; overflow-x: auto; line-height: 1.5; font-size: 13px; margin: 1em 0; }
.md pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
.md a { color: var(--accent-ink); }
.md a.codelink { text-decoration: none; }
.md a.codelink code { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.md a.wikilink::before { content: "[["; color: var(--faint); } .md a.wikilink::after { content: "]]"; color: var(--faint); }
.md .wikilink.missing, .md .missing { color: var(--muted); text-decoration: underline dashed; }
.md a.ext::after { content: "↗"; font-size: .75em; margin-left: .1em; vertical-align: .15em; color: var(--faint); }
.md img { max-width: 100%; height: auto; border-radius: 6px; }
.md strong { font-weight: 600; }
.md .table-wrap, .table-wrap { overflow-x: auto; margin: 1em 0; border: 1px solid var(--line); border-radius: var(--r); }
.md table, .table-wrap table { border-collapse: collapse; font-size: .9em; min-width: 100%; }
.md th, .md td, .table-wrap th, .table-wrap td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.md th, .table-wrap th { background: var(--code); font-weight: 600; white-space: nowrap; }
.md tr:last-child td, .table-wrap tr:last-child td { border-bottom: 0; }
.md td + td, .md th + th, .table-wrap td + td, .table-wrap th + th { border-left: 1px solid var(--line); }
.md .footnotes { font-size: .9em; color: var(--ink2); }
.md mark, mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 1px; }
details.inline-img { display: inline-block; vertical-align: middle; margin: 2px 0; max-width: 100%; }
details.inline-img summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed var(--line2); border-radius: 8px;
                             color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; }
details.inline-img summary::-webkit-details-marker { display: none; }
details.inline-img summary::before { content: "▸ image"; font-weight: 600; }
details.inline-img[open] summary::before { content: "▾ image"; }
details.inline-img img { display: block; margin-top: 8px; max-width: 100%; border-radius: 8px; }
a.imglink { font-size: .9em; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0; }
.pager .pg { color: var(--muted); font-size: 12.5px; }


/* ---- transcripts ---- */
.chat { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.turn { display: flex; flex-direction: column; min-width: 0; }
.turn .who { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 6px 4px; }
.turn .who time { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.turn .bubble { padding: 10px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); min-width: 0; font-size: 15px; }
.turn.c .bubble { border-top-left-radius: 4px; }
.turn.j { align-items: flex-end; }
.turn.j .bubble { background: var(--accent-soft); border-color: transparent; border-top-right-radius: 4px; max-width: 92%; }
.turn .bubble > :first-child { margin-top: 0; } .turn .bubble > :last-child { margin-bottom: 0; }
.turn .bubble pre { font-size: 12px; }
.turn .tools { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin: 5px 8px 0; overflow-wrap: anywhere; }
.turn .tools::before { content: "⚙ "; }
.sid { font-size: 11.5px; color: var(--faint); }


/* ---- raw text ---- */
.rawwrap { border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
.hl.raw pre { margin: 0; padding: 10px 14px 10px 0; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.hl.raw a[href^="#L-"] { text-decoration: none; }
.hl.raw code > span[id^="S-"] { display: block; padding-left: 6ch; text-indent: -6ch; }
.hl.raw .linenos { display: inline-block; width: 5ch; padding-right: 1.4ch; margin-right: 1ch; text-align: right; color: var(--faint);
                   user-select: none; -webkit-user-select: none; border-right: 1px solid var(--line); }
.hl.raw a:target + a .linenos, .hl.raw :target { background: var(--mark); }


/* ---- search ---- */
.bigsearch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; max-width: 760px; }
.bigsearch input, .bigsearch select { height: 38px; font: 15px var(--ui); color: var(--ink); background: var(--bg); border: 1px solid var(--line2);
                                      border-radius: 8px; padding: 0 12px; outline: none; -webkit-appearance: none; appearance: none; }
.bigsearch input { flex: 1 1 220px; min-width: 0; }
.bigsearch select { flex: 0 1 auto; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
.bigsearch input:focus, .bigsearch select:focus { border-color: var(--accent); }
.bigsearch .btn { height: 38px; }
.hits { list-style: none; margin: 10px 0 0; padding: 0; }
.hit { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.hit .path { color: var(--ink); display: block; text-decoration: none; }
.hit .path .nm { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.hit .path .dir { display: block; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.hit .path:hover .nm { color: var(--accent-ink); }
.hit .meta { font-size: 12px; margin: 2px 0 0; }
.snip { display: block; margin-top: 7px; padding: 7px 10px; background: var(--code); border-radius: 6px; color: var(--ink2); font-size: 13.5px;
        line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; white-space: pre-wrap; }
.snip:hover { box-shadow: inset 0 0 0 1px var(--line2); text-decoration: none; }


/* ---- changes, history ---- */
.day h2 { position: sticky; top: var(--ol-bar); z-index: 2; background: var(--bg); font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
          color: var(--side-head); margin: 20px 0 8px; padding: 8px 0 6px; font-weight: 600; }
.commit { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 6px; margin-bottom: 10px; }
.commit header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.commit > .files > li:first-child { border-top: 0; }
.commit header time { font-weight: 600; font-family: var(--mono); font-size: 12px; }
.commit header .subj { flex: 1; color: var(--ink2); min-width: 0; overflow-wrap: anywhere; }
.commit header code { font-size: 11px; color: var(--faint); }
.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 13px; border-top: 1px solid var(--line); padding: 4px 0; }
.files .p { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; line-height: 1.3; padding: 3px 0; }
.files .p .nm { display: block; overflow-wrap: anywhere; font-weight: 500; }
.files .p .dir { display: block; font-size: 12px; color: var(--muted); }
.files .p:hover .nm { color: var(--accent-ink); }
.files .p.gone .nm { color: var(--muted); text-decoration: line-through; }
.files time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.st { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 10.5px; font-weight: 700; flex: none;
      font-family: var(--mono); background: var(--code); color: var(--muted); }
.st.A { background: var(--add); color: var(--plus); } .st.D { background: var(--del); color: var(--minus); }
.st.M { background: var(--accent-soft); color: var(--accent-ink); } .st.R, .st.C { background: var(--ol-second-soft); color: var(--ol-second); }
.num { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.dl { font-size: 12px; color: var(--muted); text-decoration: none; padding: 2px 8px; border: 1px solid var(--line2); border-radius: 999px; flex: none; }
.dl:hover { color: var(--accent-ink); border-color: var(--accent); text-decoration: none; }
.morefiles summary { cursor: pointer; font-size: 12.5px; color: var(--accent-ink); padding: 6px 0; border-top: 1px solid var(--line); }
.versions { list-style: none; margin: 0; padding: 0; }
.versions li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.vhead { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; }
.vsub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--ink2); margin: 4px 0 8px; }
.vsub code { font-size: 11px; color: var(--faint); }
.vsub .then { color: var(--muted); font-size: 12px; }


/* ---- diff ---- */
.diffhead { margin: 0 0 14px; font-size: 13.5px; }
.diffhead .arrow { color: var(--faint); margin: 0 4px; }
.diff { overflow-x: auto; }
table.hunk { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--mono); font-size: 12px; line-height: 1.6;
             margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
table.hunk th { text-align: left; font-weight: 400; color: var(--muted); background: var(--side-bg); padding: 4px 10px; }
table.hunk td { padding: 0 8px; vertical-align: top; }
table.hunk td.n { width: 1%; min-width: 3.5ch; text-align: right; color: var(--faint); user-select: none; -webkit-user-select: none; white-space: nowrap; }
table.hunk td.t { white-space: pre-wrap; overflow-wrap: anywhere; width: 98%; }
table.hunk td.t::before { display: inline-block; width: 1.4ch; color: var(--faint); content: " "; user-select: none; -webkit-user-select: none; }
tr.add td { background: var(--add); } tr.add td.t::before { content: "+"; color: var(--plus); }
tr.del td { background: var(--del); } tr.del td.t::before { content: "−"; color: var(--minus); }
table.hunk ins { background: var(--add2); text-decoration: none; border-radius: 3px; }
table.hunk del { background: var(--del2); text-decoration: none; border-radius: 3px; }
.errorpage h1 { font-size: 1.4em; margin: 0 0 10px; }


/* ---- the Tree view: a table ---- */
main.tbl { padding: 20px 24px 60px; }
.tbl .th { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; }
.tbl .th h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.tbl .th .n { color: var(--muted); }
.tbl .th .tools { margin-left: auto; display: flex; gap: 8px; }
.tbl .filter { width: 240px; height: 30px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg); color: var(--ink); font: 12.5px var(--ui); outline: none; }
.tbl .filter:focus { border-color: var(--accent); }
table.tt { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tt th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--side-head); padding: 9px 14px; border-bottom: 1px solid var(--side-line); background: var(--side-bg); }
.tt th.r, .tt td.r { text-align: right; font-variant-numeric: tabular-nums; }
.tt td { padding: 0 14px; height: 34px; border-bottom: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.tt tr:last-child td { border-bottom: 0; }
.tt tbody tr:hover td { background: var(--hover); }
.tt tr.on td { background: var(--accent-soft); }
.tt tr.on td .nm a { font-weight: 600; }
.tt td.name { padding-left: 8px; }
.tt tr[data-depth="1"] td.name { padding-left: 30px; }
.tt tr[data-depth="2"] td.name { padding-left: 52px; }
.tt tr[data-depth="3"] td.name { padding-left: 74px; }
.tt tr[data-depth="4"] td.name { padding-left: 96px; }
.tt tr[data-depth="5"] td.name { padding-left: 118px; }
.tt tr[data-depth="6"] td.name { padding-left: 140px; }
.tt tr[data-depth="7"] td.name { padding-left: 162px; }
.tt tr[data-depth="8"] td.name { padding-left: 184px; }
.tt tr[data-depth="9"] td.name { padding-left: 206px; }
.tt tr[data-depth="10"] td.name { padding-left: 228px; }
.tt tr[data-depth="11"] td.name { padding-left: 250px; }
.tt tr[data-depth="12"] td.name { padding-left: 272px; }
.tt tr[data-depth="13"] td.name { padding-left: 294px; }
.tt tr[data-depth="14"] td.name { padding-left: 316px; }
.tt td .nm { display: inline-flex; align-items: center; gap: 6px; max-width: 46vw; }
.tt td .nm a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.tt tr.dir td .nm a { font-weight: 500; }
.tt td .nm .ic { color: var(--muted); }
.tt .tg { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--faint); cursor: pointer; flex: none; border-radius: 4px; }
.tt .tg:hover { color: var(--ink); background: var(--sel); }
.tt .tg .chev { width: 12px; height: 12px; transition: transform .12s ease; }
.tt tr[data-open="1"] .tg .chev { transform: rotate(90deg); }
.tt td.r { color: var(--muted); font-size: 12.5px; }
.tt td.c { color: var(--muted); font-size: 12.5px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
.tt td .sha { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-right: 8px; }
.tt tr.off td { color: var(--faint); }
.tbl .nomatch { color: var(--muted); }
/* ---- the editor: source and live preview side by side; Write / Preview tabs on the phone ---- */
.edbar { position: sticky; top: var(--ol-bar); z-index: 5; background: var(--ol-paper); margin: -20px -24px 16px; padding: 12px 24px; border-bottom: 1px solid var(--ol-line); }
.edbar.title { margin-bottom: 16px; }
.edbar h1 { font-size: 19px; }
.edbar #state { font-size: var(--ol-t-sm); color: var(--ol-muted); }
.edbar #state.dirty { color: var(--ol-warn); font-weight: var(--ol-w-medium); }
.editor .panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.editor.md .panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.editor .src { display: block; width: 100%; min-height: 62vh; padding: 14px 16px; border: 1px solid var(--ol-line); border-radius: 10px; background: var(--ol-box); color: var(--ol-ink);
               font: 14px/1.6 var(--ol-mono); resize: vertical; tab-size: 2; }
.editor .src:focus { outline: none; border-color: var(--ol-accent); box-shadow: var(--ol-focus); }
.editor .pv { min-height: 62vh; max-height: 80vh; overflow: auto; padding: 4px 16px; border: 1px solid var(--ol-line); border-radius: 10px; }
.editor .why-l { margin: 16px 0 6px; }
.editor .why { max-width: 720px; }
.editor .hint { margin: 8px 0 0; }
.edtabs { display: none; }
.conflict { margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--ol-warn-soft); }
.conflict h3 { margin: 0 0 6px; font-size: 15px; }
.conflict p { margin: 0 0 8px; font-size: 14px; color: var(--ol-ink-2); }
.conflict .cdiff { max-height: 40vh; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--ol-paper); font: 12.5px/1.55 var(--ol-mono); white-space: pre-wrap; }
.conflict .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.conflict .row [data-c="mine"] { background: var(--ol-destructive); color: var(--ol-destructive-ink); }

/* ---- History: intro, the undo band, the versions in a box, compare A → B ---- */
.history .lede { color: var(--ol-ink-2); margin: 0 0 14px; max-width: 72ch; font-size: 14.5px; }
.history .undo { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 14px; margin: 0 0 16px; border-radius: 10px;
                 background: var(--ol-box); font-size: 14px; max-width: 760px; }
.history .undo b { font-weight: var(--ol-w-semibold); }
.versions { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ol-line); border-radius: 12px; max-width: 760px; }
.versions .ver { display: flex; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--ol-line); }
.versions .ver:first-child { border-top: 0; }
.versions .pick { display: flex; flex-direction: column; gap: 6px; flex: none; padding-top: 1px; }
.versions .pick label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ol-muted); cursor: pointer; }
.versions .vmain { flex: 1; min-width: 0; }
.versions .vwho { font-size: 14.5px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.versions .vwho .ai:not(:empty) { font-weight: var(--ol-w-medium); }
.versions .vwho .person { font-weight: var(--ol-w-semibold); }
.versions .vwho .obo { color: var(--ol-second); }
.versions .vwho .verb { color: var(--ol-ink-2); }
.versions .vwhy { margin: 3px 0 0; color: var(--ol-ink); overflow-wrap: anywhere; }
.versions .vmeta { margin-top: 3px; color: var(--ol-muted); font-size: 13px; }
.versions .vmeta code { font-family: var(--ol-sans); font-size: inherit; }
.versions .vact { display: flex; gap: 14px; margin-top: 8px; font-size: 13.5px; flex-wrap: wrap; }
.versions .vact a, .versions .vact .linkbtn { color: var(--ol-accent); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--ol-w-regular); }
.vmore { display: none; }
.cmpbar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; background: var(--ol-paper);
          color: var(--ol-muted); font-size: 13px; max-width: 760px; }

/* ---- diff and old version ---- */
.diffhead { color: var(--ol-ink-2); }
.diffhead .from, .diffhead .to { font-weight: var(--ol-w-medium); }
.diff { max-width: 100%; }
.vsubj { margin: -6px 0 16px; color: var(--ol-ink-2); font-size: 14px; }
.vband { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border-radius: 10px; background: var(--ol-warn-soft); font-size: 14px; }
.vband b { font-weight: var(--ol-w-semibold); }
.vband nav { display: flex; gap: 12px; flex-wrap: wrap; }
.vband a { color: var(--ol-ink); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--ol-w-medium); }

/* ---- search ---- */
.bigsearch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; max-width: 760px; }
.bigsearch input { flex: 1 1 220px; min-width: 0; }
.bigsearch select { flex: 0 1 auto; width: auto; }
.bigsearch .in, .bigsearch .btn { height: var(--ol-control); }
.searchpage .hint { max-width: 72ch; font-size: 14px; }
.hits { list-style: none; margin: 10px 0 0; padding: 0; max-width: 860px; }
.hit { padding: 14px 0 16px; border-bottom: 1px solid var(--ol-line); }
.hit .path { color: var(--ol-ink); display: block; }
.hit .path .nm { font-weight: var(--ol-w-semibold); font-size: 15px; }
.hit .path:hover .nm { color: var(--ol-accent); }
.hit .path .dir { font-size: 13px; }
.snip { background: var(--ol-box); border-radius: 8px; }
mark { background: var(--ol-accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---- Trash, Export, the error page ---- */
.trash .rows, .rowlist { list-style: none; margin: 0; padding: 0; }
.trash .rows { border: 1px solid var(--ol-line); border-radius: 12px; max-width: 920px; }
.trash .rows li, .rowlist > li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--ol-line); }
.trash .rows li:first-child { border-top: 0; }
.rowlist > li { padding: 10px 4px; border-top: 0; border-bottom: 1px solid var(--ol-line); }
.trash .rows .ic { width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: var(--ol-box); color: var(--ol-ink-2); box-sizing: border-box; }
.trash .main, .rowlist .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trash .nm, .rowlist .nm { font-weight: var(--ol-w-medium); overflow-wrap: anywhere; }
.trash .sub, .rowlist .sub { color: var(--ol-muted); font-size: 13px; }
.trash .acts, .rowlist .acts { display: flex; gap: 6px; flex: none; align-items: center; }
.trash .acts .btn.danger.quiet { color: var(--ol-danger); }
.team section, .exportpage section { margin: 0 0 30px; max-width: 760px; }
.team h2, .exportpage h2 { font-size: 16px; margin: 0 0 8px; font-weight: var(--ol-w-semibold); }
.exportpage .rowlist { border: 1px solid var(--ol-line); border-radius: 12px; margin: 14px 0 18px; }
.exportpage .rowlist > li { padding: 10px 14px; }
.exportpage .rowlist > li:last-child { border-bottom: 0; }
.errorpage { max-width: 560px; padding-top: 24px; }
.errorpage h1 { font-size: 28px; letter-spacing: var(--ol-track-display); margin: 0 0 10px; }
.errorpage p { color: var(--ol-ink-2); }
.errorpage .acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }

/* ---- Connect ---- */
.connect section { margin: 0 0 26px; max-width: 760px; }
.connect h2 { font-size: 16px; margin: 0 0 8px; font-weight: var(--ol-w-semibold); }
.connect ol { margin: 0 0 4px; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--ol-ink-2); }
.connect details p { font-size: 14px; color: var(--ol-ink-2); }
.connect .keyrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.connect .keyrow .field { width: 240px; }
.connect .keyrow label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.connect .keyout { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.live { padding: 14px 16px; border-radius: 12px; background: var(--ol-box); }
.live.on { background: color-mix(in srgb, var(--ol-ok) 12%, transparent); }
.live p { margin: 0; font-size: 14.5px; }
.live .dot { background: var(--ol-second); box-shadow: 0 0 0 4px var(--ol-second-soft); animation: olpulse 1.4s infinite; }
.live .ok { color: var(--ol-ok); font-weight: 700; }
@keyframes olpulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .live .dot { animation: none; } }
img.qr { width: 164px; height: 164px; border-radius: 8px; border: 1px solid var(--ol-line); background: var(--ol-frame); align-self: flex-start; }

/* ---- the Share dialog ---- */
dialog.share section { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ol-line); }
dialog.share section:first-of-type { border-top: 0; padding-top: 0; }
dialog.share .who { list-style: none; margin: 0; padding: 0; width: auto; height: auto; display: block; background: none; border-radius: 0; font-size: 14px; color: var(--ol-ink); font-weight: var(--ol-w-regular); }
dialog.share .who li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--ol-line); }
dialog.share .who li:last-child { border-bottom: 0; }
dialog.share .who li .linkbtn { margin-left: auto; }
dialog.share .who .sub, dialog.share .sub { color: var(--ol-muted); font-size: 13px; }
dialog.share fieldset.mode { border: 1px solid var(--ol-line); border-radius: 10px; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
dialog.share fieldset.mode legend { font-size: 13px; color: var(--ol-muted); padding: 0 4px; }
dialog.share fieldset.mode label, dialog.share .people label { display: flex; gap: 10px; align-items: center; font-size: 14px; min-height: 28px; }
dialog.share fieldset.mode .btn { align-self: flex-start; }
dialog.share .people { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-left: 26px; }
dialog.share .addrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
dialog.share .ga { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; font-weight: var(--ol-w-medium); }
dialog.share .ga select { max-width: 100%; }

/* ---- pages outside the chrome: the public share page, invites ---- */
body.public { background: var(--ol-chrome); }
.pubtop { display: flex; align-items: center; gap: 12px; min-height: var(--ol-bar); padding: 0 16px; background: var(--ol-chrome); border-bottom: 1px solid var(--ol-line-chrome); flex-wrap: wrap; }
.pubtop .note { color: var(--ol-muted); font-size: var(--ol-t-sm); margin-left: auto; }
.pubmain { max-width: 860px; margin: 0 auto; padding: 22px 16px 60px; }
.pubbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 12px; margin: 0 0 18px; border-bottom: 1px solid var(--ol-line); color: var(--ol-muted); font-size: var(--ol-t-sm); }
.pubbar .f { color: var(--ol-ink); font-weight: var(--ol-w-semibold); font-size: 19px; overflow-wrap: anywhere; flex-basis: 100%; order: -1; }
.pubbar .m { flex: 1; }
.pubcrumbs { margin: 0 0 12px; font-size: 14px; color: var(--ol-muted); }
.pubcrumbs a { color: var(--ol-accent); }
.pubfoot { padding: 18px 16px 30px; text-align: center; color: var(--ol-muted); font-size: 13px; border-top: 1px solid var(--ol-line-chrome); }
.pubfoot a { color: var(--ol-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.pubmain > .card, .card.invite { display: block; max-width: 440px; margin: 40px auto; padding: 28px; border: 1px solid var(--ol-line-chrome); border-radius: var(--ol-r-lg); background: var(--ol-paper); }
.pubmain > .card h1, .card.invite h1 { font-size: var(--ol-t-xl); margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.25; }
.pubmain > .card p, .card.invite p { color: var(--ol-ink-2); font-size: 14.5px; margin: 0 0 16px; }
.pubmain > .card .btn, .card.invite .btn { width: 100%; }
.pubmain > .card .hint, .card.invite .hint { font-size: 13px; color: var(--ol-muted); text-align: center; }
form.row2 { display: flex; gap: 10px; flex-direction: column; }
pre.raw { white-space: pre-wrap; font-size: 13px; background: var(--ol-box); border-radius: 10px; padding: 14px; overflow-x: auto; }

/* ---- very wide (≥ 1680): the sheet stops at 1440 px on a grey well, so rows never run across the whole screen ---- */
@media (min-width: 1680px) {
  .main.std:not(.three) .content, .main.solo .content { background: var(--ol-well); padding: 16px; }
  .main.std:not(.three) .sheet, .main.solo .sheet { max-width: var(--ol-sheet-max); margin: 0 auto; border: 1px solid var(--ol-line); border-radius: var(--ol-r-sheet);
                                                    min-height: calc(100vh - var(--ol-bar) - 32px); }
}

/* ---- 600–1099 (a folded phone's inner screen, a tablet, a half-width window): a 64-px icon rail; the folder tree from the
   title chevron as a drawer; the file's facts behind ⓘ as a drawer from the right ---- */
@media (max-width: 1099px) {
  .main.std, .main.std.three { grid-template-columns: 64px minmax(0, 1fr); }
  .rail { padding: 14px 8px; }
  .rail .nav a, .rail .trashlink { justify-content: center; padding: 9px 0; }
  .rail .railbody, .rail .foot { display: none; }
  .rail .nav a span, .rail .trashlink span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .title .tv { display: inline-grid; }
  .title .btn.info { display: inline-flex; }
  .rail.open, .side { position: fixed; top: 0; bottom: 0; height: auto; z-index: 40; box-shadow: var(--ol-shadow-pop); overflow: auto; }
  .rail.open { left: 0; width: min(300px, 86vw); padding: 12px; border-right: 1px solid var(--ol-line-chrome); }
  .rail.open .nav a, .rail.open .trashlink { justify-content: flex-start; padding: 7px 10px; }
  .rail.open .nav a span, .rail.open .trashlink span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .rail.open .railbody, .rail.open .foot { display: flex; }
  .rail.open .foot { display: block; }
  .rail.open .drawer-x { display: grid; align-self: flex-end; margin: -4px -4px 4px 0; }
  .side { right: 0; width: min(340px, 90vw); transform: translateX(105%); visibility: hidden; transition: transform var(--ol-motion-slow), visibility var(--ol-motion-slow); }
  .side.open { transform: none; visibility: visible; }
  .side .sheet-head { display: flex; align-items: center; gap: 8px; margin: -6px -4px 14px 0; font-size: 15px; color: var(--ol-ink); }
  .side .sheet-head b { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: var(--ol-w-semibold); }
  .main.full { grid-template-columns: minmax(0, 1fr); }
  .main.full > .left { display: none; }
  .main.full > .right { position: static; height: auto; border-top: 1px solid var(--ol-line-chrome); padding: 16px 24px 40px; }
  .main.full .sheet { padding: 20px 24px 40px; }
  .editor.md .panes { grid-template-columns: minmax(0, 1fr); }
  .edbar .edtabs { display: inline-flex; }
  .editor[data-tab="write"] .pv { display: none; }
  .editor[data-tab="preview"] .src { display: none; }
}

/* ---- the phone (< 600): no sidebar; the tab bar; menus and dialogs are sheets from the bottom ---- */
@media (max-width: 599px) {
  .btn.sm, .btn.small { height: var(--ol-control); } .btn.sm.i, .btn.small.i { width: var(--ol-control); }   /* 44 on the phone (design §2) */
  .seg a, .seg button, .in.sm, .field.small, select.in.sm { min-height: var(--ol-control); }
  .connect code, .keyrow + p code, details code { overflow-wrap: anywhere; }
  .ibtn, .title .tv { width: 44px; height: 44px; }
  .avatar { width: 44px; height: 44px; box-shadow: inset 0 0 0 4px var(--ol-chrome); }
  .avatar.big { box-shadow: none; }
  .top { padding: 0 8px 0 16px; gap: 2px; }
  .top .search { display: none; }
  .top .searchbtn { display: grid; }
  .main.std, .main.std.three { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .rail.open { display: flex; }
  .rail.open .nav { display: none; }
  .rail.open .who-foot { display: block; }
  .sheet, .main.solo .sheet { padding: 16px 16px calc(var(--ol-tabbar) + 40px + env(safe-area-inset-bottom)); }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--ol-tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
            align-items: center; justify-content: space-around; background: var(--ol-chrome); border-top: 1px solid var(--ol-line-chrome); font-size: 11.5px; color: var(--ol-muted); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; min-width: 64px; min-height: 48px; align-content: center; border-radius: 8px; }
  .tabbar a.on { color: var(--ol-accent); font-weight: var(--ol-w-semibold); }
  .tabbar .i { width: 22px; height: 22px; }
  .title h1 { font-size: 24px; }
  .title .actions { margin-left: 0; width: 100%; }
  .title .actions > .btn, .title .actions > .dd { flex: 1 1 0; min-width: 0; }
  .title .actions > .btn.i { flex: 0 0 var(--ol-control); }
  .title .actions > .dd > .btn { width: 100%; }
  .title .actions > .btn span { overflow: hidden; text-overflow: ellipsis; }
  .title.file .seg { order: 5; }
  .title:not(.file) .actions > .btn.share { display: none; }     /* folders: Share is in ⋯ on the phone (design §5.1) */
  .side { left: 0; right: 0; top: auto; width: auto; max-height: 82vh; border-radius: 16px 16px 0 0; border-left: 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
          transform: translateY(105%); }
  .side::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--ol-box-2); margin: 0 auto 12px; }
  .menu.float, .pop { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; z-index: 60; }
  .menu.float, .pop .menu { width: 100% !important; min-width: 0; border: 0; border-radius: 16px 16px 0 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
                            box-shadow: 0 0 0 100vmax var(--ol-overlay), var(--ol-shadow-sheet-up); }
  .menu.float > button, .pop .menu > button, .pop .menu > a, .pop .menu form > button { min-height: 44px; font-size: 15px; }
  .menu .head { display: block; font-size: 13px; color: var(--ol-muted); padding: 8px 10px 6px; overflow-wrap: anywhere; }
  .menu .head b { display: block; color: var(--ol-ink); font-size: 15px; font-weight: var(--ol-w-semibold); }
  .pop.acct .menu { width: 100%; }
  .menu .appear .seg button { height: 34px; padding: 0 14px; }
  dialog.dlg, dialog.dlg.wide { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92vh; }
  dialog.dlg form { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  dialog.dlg .row .btn { flex: 1 1 auto; }
  .toasts { bottom: calc(var(--ol-tabbar) + 12px + env(safe-area-inset-bottom)); }
  .tray { left: 16px; right: 16px; width: auto; bottom: calc(var(--ol-tabbar) + 12px + env(safe-area-inset-bottom)); }
  .cmd { display: none !important; }
  .back kbd { display: none; }
  .listing .row { padding-left: 12px; gap: 10px; }
  .kb { margin-right: 4px; width: 44px; height: 44px; }
  .history .undo { flex-direction: column; align-items: stretch; }
  .versions .ver { padding: 12px; gap: 10px; position: relative; }
  .versions .vact { display: none; }
  .vmore { display: block; position: absolute; top: 6px; right: 4px; }
  .vmore > summary { list-style: none; }
  .vmore > summary::-webkit-details-marker { display: none; }
  .vmore .menu { position: absolute; right: 0; top: 46px; z-index: 20; min-width: 220px; }
  .vmore .menu > a, .vmore .menu > button { min-height: 44px; color: var(--ol-ink); text-decoration: none; }
  .trash .rows li, .rowlist > li { flex-wrap: wrap; }
  .trash .acts, .rowlist .acts { width: 100%; justify-content: flex-end; }
  table.hunk td.n + td.n { display: none; }
  .tbl .tt .hide, .tt .hide { display: none; }
  .tbl .th .tools { margin-left: 0; width: 100%; }
  .tbl .filter { flex: 1; width: auto; }
  .tt td .nm { max-width: 52vw; }
  .tbl .tt { display: block; overflow-x: auto; }
  .connect .keyrow .field { width: 100%; }
  .pubmain > .card, .card.invite { margin: 16px auto; padding: 22px 18px; }
  .main.full .sheet { padding: 16px 16px 32px; }
  .main.full > .right { padding: 16px 16px calc(var(--ol-tabbar) + 32px); }
  .edbar { margin: -16px -16px 14px; padding: 10px 16px; }
  .editor .src { min-height: 55vh; font-size: 15px; }
}
@media (max-width: 359px) { .brand .word { display: none; } }
@media (prefers-reduced-motion: reduce) { .side, .tree .chev { transition: none; } }

/* the pages that still use the bar of the app before v2 (dz-feed's Activity, Changes, Agents, Team, until its templates land):
   the same title row as the rest */
.sheet > .bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 14px; min-height: var(--ol-control); }
.sheet > .bar .f { font-size: var(--ol-t-xl); font-weight: var(--ol-w-semibold); letter-spacing: -.01em; line-height: 1.2; }
.sheet > .bar .m { color: var(--ol-muted); font-size: var(--ol-t-sm); flex: 1 1 260px; }
.sheet > .bar .tool { margin-left: auto; }
.sheet > .bar .seg + .tool { margin-left: 0; }

/* ---- sign-in, the code page, closed (auth.py PAGE): one 420-px card on the chrome; the forms' markup is the server's
   own (inputs and buttons without classes), styled here ---- */
body.bare { min-height: 100vh; }
.bare-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.card.signin { display: block; width: 100%; max-width: 420px; margin: 0; padding: 28px; background: var(--ol-paper); border: 1px solid var(--ol-line-chrome);
               border-radius: var(--ol-r-lg); font-size: 14.5px; color: var(--ol-ink-2); }
.signin .brand { margin: 0 0 20px; }
.signin h1 { font-size: var(--ol-t-xl); margin: 0 0 8px; color: var(--ol-ink); letter-spacing: -.01em; line-height: 1.2; }
.signin p { margin: 0 0 14px; line-height: 1.5; }
.signin p b { color: var(--ol-ink); font-weight: var(--ol-w-medium); }
.signin small { font-size: 13px; color: var(--ol-muted); }
.signin form { margin: 0 0 4px; }
.signin form > p:first-child { margin-bottom: 12px; }
.signin input:not([type="hidden"]) { display: block; width: 100%; height: 44px; padding: 0 12px; margin: 0 0 12px; border: var(--ol-border-strong); border-radius: 8px;
                                     background: var(--ol-paper); color: var(--ol-ink); font: 15px var(--ol-sans); }
.signin input:not([type="hidden"])::placeholder { color: var(--ol-muted); opacity: 1; }
.signin input:not([type="hidden"]):focus { outline: none; border-color: var(--ol-accent); box-shadow: var(--ol-focus); }
.signin input[name="code"] { font: 500 20px var(--ol-mono); letter-spacing: .3em; text-align: center; }
.signin button { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border: 0; border-radius: 8px; background: var(--ol-accent);
                 color: var(--ol-accent-ink); font: var(--ol-w-medium) 15px var(--ol-sans); cursor: pointer; }
.signin button:hover { background: var(--ol-accent-hover); }
.signin button:focus-visible { box-shadow: var(--ol-focus); }
.signin a { color: var(--ol-accent); }
/* "or Sign in with Google" after the code form: a divider, then the second way in as a secondary button */
.signin form + p:has(> a[href^="/auth/google"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ol-muted); font-size: 13px; margin: 16px 0 0; }
.signin form + p:has(> a[href^="/auth/google"])::before, .signin form + p:has(> a[href^="/auth/google"])::after { content: ""; flex: 1; border-top: 1px solid var(--ol-line); }
.signin form + p:has(> a[href^="/auth/google"])::after { order: 1; }
.signin p > a[href^="/auth/google"] { order: 2; flex: 1 0 100%; display: flex; align-items: center; justify-content: center; height: 44px; margin-top: 6px; border: 1px solid var(--ol-line);
                                     border-radius: 8px; background: var(--ol-paper); color: var(--ol-ink); font-size: 15px; font-weight: var(--ol-w-medium); text-decoration: none; }
.signin p > a[href^="/auth/google"]:hover { background: var(--ol-box); }
.signin form[action="/auth/dev"] { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--ol-line); }
.signin .foot { margin: 20px 0 0; text-align: center; font-size: 13px; color: var(--ol-muted); }
.signin .foot a { color: var(--ol-ink-2); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 599px) { .card.signin { padding: 24px 20px; } }
.signin p.band { color: var(--ol-ink); font-size: 14px; }
.signin p.band::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
                         background: var(--ol-danger); color: var(--ol-paper); }
.signin form + p:not(.foot) { margin-top: 14px; font-size: 13.5px; }