/* Stemma UI: 1-bit. Ink on paper, one highlight color, tone made from ordered (Bayer) dither,
   structure drawn in ASCII. Media is the star; the chrome stays out of its way.

   Colors:   every theme value is a custom property. The highlight (--sig-*) is per user: these
             are the defaults, and /theme.js overrides them on <html> before first paint.
   Dither:   /dither/d{6,12,25,50,75,88}.png are 16px Bayer tiles, black on transparent, used as
             masks over a fill of --ink or --sig, so one tile works in every theme and color.
             Regenerate with tools/gen_dither.py.
   Fonts:    VT323 (pixel display, OFL, bundled) and the system monospace. Nothing is fetched
             from anywhere else: no network calls home. */

@font-face {
  font-family: "VT323";
  src: url(/fonts/vt323.woff2) format("woff2");
  font-display: swap;
}

:root {
  /* the highlight: defaults, overridden per user by /theme.js */
  --sig-l: #ff4a1c; --sig-text-l: #c42d00; --on-sig-l: #000000;
  --sig-d: #ff5a2e; --sig-text-d: #ff7a52; --on-sig-d: #000000;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --display: "VT323", var(--mono);
  --gutter: 24px;
  --radius: 0px;
}

/* Light. `.force-light` pins a subtree to light (the settings preview). */
:root, .force-light {
  --paper: #f3f3ef; --ink: #0d0d0d; --mute: #55554f; --rule: #b9b9b2; --soft: #e3e3dc;
  --danger: #b3261e;
  --sig: var(--sig-l); --sig-text: var(--sig-text-l); --on-sig: var(--on-sig-l);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c0c0b; --ink: #ecebe4; --mute: #a3a29a; --rule: #3a3a36; --soft: #1d1d1b;
    --danger: #ff6b5e;
    --sig: var(--sig-d); --sig-text: var(--sig-text-d); --on-sig: var(--on-sig-d);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .force-dark {
  --paper: #0c0c0b; --ink: #ecebe4; --mute: #a3a29a; --rule: #3a3a36; --soft: #1d1d1b;
  --danger: #ff6b5e;
  --sig: var(--sig-d); --sig-text: var(--sig-text-d); --on-sig: var(--on-sig-d);
  color-scheme: dark;
}
.force-light, .force-dark { background: var(--paper); color: var(--ink); }

/* Older names, still read by scripts (waveform, graph). Custom properties inherit as resolved
   values, so the forced subtrees re-derive them from their own palette. */
:root, .force-light, .force-dark {
  --bg: var(--paper); --panel: var(--paper); --text: var(--ink); --muted: var(--mute);
  --border: var(--ink); --dither: var(--soft); --wave: var(--ink);
  --accent: var(--sig); --accent-text: var(--on-sig);
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 14px/1.55 var(--mono);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sig-text); }
a:focus-visible, button:focus-visible, .button:focus-visible, .card:focus-visible, canvas:focus-visible, summary:focus-visible {
  outline: 2px solid var(--sig); outline-offset: 3px;
}
h1, h2 { line-height: 1.1; margin: 0 0 .5rem; }
h1, .brand { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
h1 { font-size: 3.2rem; }
h1.inline { display: inline; font-size: 3.2rem; }
h2 { font-size: 1rem; font-weight: 700; }
.card-title, .dot-label { font-family: var(--display); font-weight: 400; }
code { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--mute); font-size: .85rem; }
.spacer { flex: 1; }
.error { color: var(--danger); min-height: 1.4em; margin: 0; font-weight: 700; }
.error-box { padding: 1rem; border: 1px solid var(--danger); background: var(--paper); }
.sig-text { color: var(--sig-text); }

/* ---- dither ----
   `.dz` paints ink through a Bayer tile; add a density class. `.dz.sig` paints the highlight. */
.dz { background-color: var(--ink);
  -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; }
.dz.sig { background-color: var(--sig); }
.d6  { -webkit-mask-image: url(/dither/d6.png);  mask-image: url(/dither/d6.png); }
.d12 { -webkit-mask-image: url(/dither/d12.png); mask-image: url(/dither/d12.png); }
.d25 { -webkit-mask-image: url(/dither/d25.png); mask-image: url(/dither/d25.png); }
.d50 { -webkit-mask-image: url(/dither/d50.png); mask-image: url(/dither/d50.png); }
.d75 { -webkit-mask-image: url(/dither/d75.png); mask-image: url(/dither/d75.png); }
.d88 { -webkit-mask-image: url(/dither/d88.png); mask-image: url(/dither/d88.png); }

/* ---- top bar ---- */
.topbar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem;
  padding: .4rem var(--gutter); margin-bottom: 8px; background: var(--paper); border-bottom: 1px solid var(--ink); }
/* a dithered horizon under the bar */
.topbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; background-color: var(--ink);
  -webkit-mask: url(/dither/d25.png) repeat 0 0 / 16px 16px; mask: url(/dither/d25.png) repeat 0 0 / 16px 16px; pointer-events: none; }
.brand { font-size: 2.2rem; line-height: 1; text-decoration: none; color: var(--ink); padding: .2rem 0; }
.brand::after { content: "_"; color: var(--sig-text); }
.brand:hover { color: var(--ink); }
.topbar nav { display: flex; flex-wrap: wrap; gap: 0 .25rem; }
.toplink { text-decoration: none; padding: .7rem .4rem; }
.toplink[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.toplink.user-link { color: var(--mute); }
.toplink.user-link:hover { color: var(--sig-text); }
.content { max-width: 1240px; margin: 0 auto; padding: 32px var(--gutter) 64px; }
.banner { background: var(--sig); color: var(--on-sig); padding: .6rem 1rem; text-align: center; font-weight: 700; border-bottom: 1px solid var(--ink); }

/* ---- windows: a ruled box with its title set into the top border, like  ┤ title ├
   and a dithered drop shadow. */
.win { position: relative; background: var(--paper); border: 1px solid var(--ink); min-width: 0; margin-top: 11px; }
.win::before { content: ""; position: absolute; z-index: -1; inset: 8px -8px -8px 8px; background-color: var(--ink);
  -webkit-mask: url(/dither/d50.png) repeat 0 0 / 16px 16px; mask: url(/dither/d50.png) repeat 0 0 / 16px 16px; pointer-events: none; }
.titlebar { position: absolute; top: -11px; left: 12px; right: 12px; display: flex; pointer-events: none; }
.titlebar .box { display: none; }
.titlebar .title { max-width: 100%; padding: 0 6px; background: var(--paper); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 13px; font-weight: 700; line-height: 20px; pointer-events: auto; }
.titlebar .tick { color: var(--ink); }
.win-body { padding: 26px 20px 20px; }
.content > .win, .content .win + .win, .content > .banner + .win { margin-bottom: 36px; }
.head-win .win-body { padding: 26px 22px 22px; }

/* ---- buttons: [ bracketed ] ink outlines; the primary one is the highlight ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .4rem 14px; border-radius: 0; border: 1px solid var(--ink);
  background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.button:not(.small):not(.round):not(.skip):not(.swatch-btn):not(.fav)::before { content: "[\00a0"; content: "[\00a0" / ""; }
.button:not(.small):not(.round):not(.skip):not(.swatch-btn):not(.fav)::after { content: "\00a0]"; content: "\00a0]" / ""; }
.button:hover { color: var(--paper); background: var(--ink); }
.button:active { transform: translate(1px, 1px); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button:disabled:hover { color: var(--ink); background: var(--paper); }
.button.primary { background: var(--sig); color: var(--on-sig); border-color: var(--sig); }
.button.primary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.button.small { min-height: 36px; padding: .2rem .7rem; font-size: .85rem; }
.button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
input[type=text], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: .4rem .7rem; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
select { width: auto; max-width: 100%; }
label { display: block; font-size: .8rem; color: var(--mute); }
label input { margin-top: .25rem; }
.stack { display: flex; flex-direction: column; gap: .9rem; }
.row { display: flex; gap: .6rem; } .row.end { justify-content: flex-end; }

/* ---- login ---- */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: 1.5rem var(--gutter); }
.login-card { width: min(420px, 100%); }
.login-card .win-body { padding: 2rem 1.75rem 1.75rem; }
.login-card h1 { margin-bottom: .2rem; font-size: 4.4rem; line-height: .9; }
.login-card h1::after { content: "_"; color: var(--sig-text); }
.tagline { margin: 0 0 1.5rem; color: var(--mute); }
.login-card form { text-align: left; }
.login-card .button.primary { min-height: 48px; font-size: 1rem; width: 100%; }
.login-foot { margin: 0; text-align: center; }
.passkey-row { display: flex; flex-direction: column; gap: .9rem; }
.passkey-row .button { min-height: 48px; font-size: 1rem; width: 100%; }
.passkey-row .or-line { display: flex; align-items: center; gap: .6rem; color: var(--mute); font-size: .85rem; }
.passkey-row .or-line::before, .passkey-row .or-line::after { content: ''; flex: 1; height: 1px; background: var(--ink); }
.dither-band { height: 14px; }
.login .dither-band { width: min(420px, 100%); }

/* ---- library ---- */
.library-win .win-body { padding: 26px 22px 22px; }
.page-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.project-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 32px 26px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); height: 100%; }
.card:hover { color: var(--ink); }
.card:hover .card-art { outline: 1px solid var(--ink); outline-offset: 4px; }
.card:hover .card-title { color: var(--sig-text); }
.card-art { position: relative; display: block; aspect-ratio: 4 / 3; border: 1px solid var(--ink); overflow: hidden; background: var(--paper); }
/* 1-bit plates: an ink (or highlight) fill shown through a dithered picture */
.card-art::before { content: ""; position: absolute; inset: 0; background-color: var(--ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-position: center; mask-position: center; }
.card-art[data-art="0"]::before { -webkit-mask-image: url(/dither/art0.png); mask-image: url(/dither/art0.png); }
.card-art[data-art="1"]::before { -webkit-mask-image: url(/dither/art1.png); mask-image: url(/dither/art1.png); }
.card-art[data-art="2"]::before { -webkit-mask-image: url(/dither/art2.png); mask-image: url(/dither/art2.png); }
.card-art[data-art="3"]::before { -webkit-mask-image: url(/dither/art3.png); mask-image: url(/dither/art3.png); }
/* four plates x mirrored x highlight-tinted: sixteen looks, so neighbours rarely match */
.card-art[data-flip="1"]::before { transform: scaleX(-1); }
.card-art[data-tint="1"]::before { background-color: var(--sig); }
/* a project's own photo, dithered server-side to the same kind of 1-bit mask; never flipped or tinted */
.card-art[data-cover]::before { -webkit-mask-image: var(--cover); mask-image: var(--cover); transform: none; background-color: var(--ink); }
.art-mark { display: none; }
.card-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-title { font-size: 1.9rem; line-height: 1; overflow-wrap: anywhere; }
.badge { display: inline-block; padding: 0 .4rem; border: 1px solid var(--ink); font-size: .75rem; line-height: 1.5; font-weight: 400;
  color: var(--ink); margin-left: .4rem; background: var(--paper); white-space: nowrap; }
.badge.fork { background: var(--sig); color: var(--on-sig); border-color: var(--sig); margin: 0; }
.badge.fork::before { content: "\2442\00a0"; content: "\2442\00a0" / ""; }
.badge.line { background: var(--sig); color: var(--on-sig); border-color: var(--sig); margin: 0 .3rem 0 0; }
.badge.note { margin: 0 0 .6rem; white-space: normal; }
.badge.warn { border-color: var(--danger); color: var(--danger); }
.project-card .badges { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 0; }
.project-card .badge { margin-left: 0; }
.hero-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.2rem 1.4rem; margin-bottom: 2rem; border: 1px dashed var(--ink); background: var(--paper); }
.hero-drop:hover { border-style: solid; }
.hero-icon { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; border: 1px solid var(--sig); background: var(--sig); color: var(--on-sig); }
.hero-text { flex: 1 1 280px; }
.hero-text h2 { margin: 0 0 .15rem; }
.hero-text p { margin: 0; }
.row.wrap { flex-wrap: wrap; gap: .5rem .75rem; }

/* ---- project page ---- */
.project-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.project-head > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.crumb { text-decoration: none; font-size: .85rem; }
.menu { position: relative; }
.menu > summary { list-style: none; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--ink); color: var(--paper); }
.menu-list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: 90vw;
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--soft); }
.menu-item { display: flex; align-items: center; min-height: 44px; padding: .4rem 1rem; background: none; border: 0; color: var(--ink);
  font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--ink); color: var(--paper); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { color: var(--paper); background: var(--danger); }
.menu-item.sep { border-top: 1px solid var(--ink); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.picker { display: flex; align-items: center; gap: .5rem; font-weight: 400; color: var(--mute); font-size: .8rem; }
.project-layout { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.main-col { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.main-col > .win, .project-layout .win { margin-bottom: 0; }
.history .win-body { padding: 22px 0 12px; }
.empty { padding: 2rem 0; text-align: center; }
.crumbs { margin-bottom: .75rem; overflow-wrap: anywhere; }

/* ---- file rows ---- */
.file-list { list-style: none; margin: 0 -20px; padding: 0; border-top: 1px solid var(--ink); }
.file-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: .8rem; align-items: center; min-height: 52px;
  padding: .35rem 20px; border-bottom: 1px dashed var(--rule); text-decoration: none; color: var(--ink); }
.file-list li:last-child .file-item { border-bottom: 0; }
.file-item:hover { background: var(--soft); color: var(--ink); }
.file-item.selected, .file-item.selected:hover { background: var(--ink); color: var(--paper); }
.file-item.selected .muted { color: var(--paper); }
.file-item .thumb { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); overflow: hidden; }
.thumb.pending::before { content: ""; position: absolute; inset: 0; background-color: var(--ink);
  -webkit-mask: url(/dither/d12.png) repeat 0 0 / 16px 16px; mask: url(/dither/d12.png) repeat 0 0 / 16px 16px;
  animation: pulse 1.4s steps(2, end) infinite; }
.thumb.failed { opacity: .5; }
.thumb-img { width: 100%; height: 100%; object-fit: cover; }
@keyframes pulse { 50% { opacity: .35; } }
.fname { overflow-wrap: anywhere; font-weight: 700; }
.file-item .muted { white-space: nowrap; }

/* ---- viewer ---- */
.viewer-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; }
.viewer-head h2 { margin: 0; overflow-wrap: anywhere; flex: 1 1 200px; min-width: 0; }
.viewer-head .button { margin-left: auto; }
.media { max-width: 100%; }
.media.image { display: block; max-height: 75vh; border: 1px solid var(--ink); background: var(--soft); }
audio.media { width: 100%; margin-top: .5rem; }
video.media { width: 100%; max-height: 75vh; border: 1px solid var(--ink); }
iframe.media.pdf { display: block; width: 100%; height: 75vh; border: 1px solid var(--ink); background: var(--soft); }
.player { display: flex; flex-direction: column; gap: 14px; }
.player audio { display: none; }
.waveform { display: block; width: 100%; height: 180px; cursor: pointer; background: var(--paper);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-left: 0; border-right: 0; touch-action: pan-y; user-select: none; }
.player-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 56px; }
.player-controls .zoom { display: flex; gap: 8px; }
.player-controls .time { margin-left: auto; font-family: var(--display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.player-controls[inert] { opacity: .45; }
.button.skip { min-width: 56px; padding: 0; }
.button.round { width: 56px; min-width: 56px; height: 56px; padding: 0; font-size: 1.2rem; background: var(--sig); color: var(--on-sig); border-color: var(--sig); }
.button.round:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.text-preview { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper); border: 1px solid var(--ink); padding: 1rem; max-height: 70vh; overflow: auto; margin: 0; font-size: .9rem; }
.placeholder.big { text-align: center; padding: 2rem; font-size: 3rem; }
.placeholder.big p { font-size: 1rem; color: var(--mute); }
.status-note { margin: .25rem 0; }
.audio-details { margin-top: .5rem; min-height: 3.6rem; } /* two lines reserved, so the details arriving moves nothing */
.audio-details p { margin: .1rem 0; }
.markdown { background: var(--paper); border: 1px solid var(--ink); padding: 1rem 1.25rem; overflow-wrap: anywhere; }
.markdown pre { background: var(--soft); border: 1px solid var(--ink); padding: .7rem; overflow: auto; }
.markdown blockquote { margin: .5rem 0; padding-left: 1rem; border-left: 3px solid var(--sig); color: var(--mute); }

/* ---- history: each version a row, the current one marked in the highlight ---- */
.history-list { list-style: none; margin: 0; padding: 0; }
.snap { padding: 12px 14px; margin-top: 2px; border-left: 3px solid var(--rule); }
.snap:first-child { margin-top: 0; }
.snap.current { border-left-color: var(--sig); background: var(--soft); }
.snap-fold { padding: 0 14px; }
.snap-fold summary { cursor: pointer; color: var(--mute); padding: .6rem 0; font-weight: 700; min-height: 44px; }
.history-list.folded { padding-top: .25rem; margin: 0 -14px; }
.snap-msg { font-weight: 700; overflow-wrap: anywhere; }
.badges { margin: .35rem 0; }
.snap-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* history view toggle and the version graph */
.view-toggle { display: flex; gap: .4rem; padding: 0 14px 8px; }
.view-toggle .button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.graph { padding: 0 14px; }
.graph-wrap { position: relative; }
.graph-canvas { position: absolute; left: 0; top: 0; overflow: visible; }
.graph-list { list-style: none; margin: 0; }
.graph-list li { display: flex; align-items: stretch; }
.graph-row { all: unset; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: .15rem; width: 100%; min-width: 0; padding: 0 .5rem; cursor: pointer; border-left: 3px solid transparent; }
.graph-row:hover { background: var(--soft); }
.graph-row.current { border-left-color: var(--sig); background: var(--soft); }
.graph-row:focus-visible { outline: 2px solid var(--sig); outline-offset: -2px; }
.graph-msg { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-meta .badge { margin: 0 .3rem 0 0; }
.g-edge { stroke-width: 1.5; }
.g-dot { stroke-width: 1.5; fill: var(--paper); }
.g-dot.merge { fill: var(--ink); }
.g-dot.current { fill: var(--sig); }
.g-lane-0 { stroke: var(--ink); }
.g-lane-1 { stroke: var(--sig); }
.g-lane-2 { stroke: var(--mute); }
.g-lane-3 { stroke: var(--ink); stroke-dasharray: 4 3; }
.g-lane-4 { stroke: var(--sig); stroke-dasharray: 4 3; }
.g-lane-5 { stroke: var(--mute); stroke-dasharray: 4 3; }
.g-dot[class*="g-lane"] { stroke-dasharray: none; }

dialog { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 1.25rem; width: min(440px, 92vw); box-shadow: 8px 8px 0 var(--ink); }
/* a 50% dither veil (the tile is black on transparent, so it darkens either theme) */
dialog::backdrop { background: url(/dither/d50.png) repeat 0 0 / 16px 16px, rgba(0, 0, 0, .25); }
.radio { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink); font-size: 1rem; min-height: 44px; }
.radio input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--sig); }

/* ---- uploads ---- */
dialog.wide { width: min(640px, 94vw); max-height: 92vh; overflow: auto; }
.dropzone { position: relative; border: 1px dashed var(--ink); padding: 1.25rem; text-align: center; background: var(--paper); }
.dropzone:hover { border-style: solid; }
.dropzone.disabled { opacity: .5; pointer-events: none; }
.dropzone p { margin: 0 0 .75rem; }
.dropzone .row { justify-content: center; flex-wrap: wrap; }
.drop-overlay { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: url(/dither/d50.png) repeat 0 0 / 16px 16px, rgba(0, 0, 0, .35); pointer-events: none; }
.drop-overlay.visible { display: flex; }
.drop-overlay > div { padding: 2rem 2.5rem; border: 1px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--sig);
  font-family: var(--display); font-size: 2.2rem; line-height: 1; text-align: center; }
fieldset.modes { border: 1px solid var(--ink); padding: .5rem .9rem .75rem; margin: 0; }
fieldset.modes legend { padding: 0 .4rem; color: var(--mute); font-size: .9rem; }
progress { width: 100%; height: 12px; accent-color: var(--sig); }
textarea { min-height: 64px; resize: vertical; }
.summary-line { font-weight: 700; margin: 0 0 .25rem; }
.upload-summary details { margin: .25rem 0; }
.mini-list { margin: .3rem 0 0; padding-left: 1.2rem; max-height: 180px; overflow: auto; overflow-wrap: anywhere; font-size: .9rem; }
.error-box { margin-top: .5rem; }
dialog.wide .row.end { position: sticky; bottom: -1.25rem; margin: 0 -1.25rem -1.25rem; padding: .75rem 1.25rem; background: var(--paper); border-top: 1px solid var(--ink); }

/* ---- accounts ---- */
.linklike { background: none; border: 0; padding: .25rem .4rem; font: inherit; color: var(--mute); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linklike:hover { color: var(--sig-text); }
.user-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.user-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .8rem 1rem; background: var(--paper); border: 1px solid var(--ink); }
.user-row .row { flex-wrap: wrap; }
.button.danger { color: var(--danger); border-color: var(--danger); }
.button.danger:hover { color: var(--paper); background: var(--danger); }
.link-box { display: flex; gap: .5rem; }
.link-box input { flex: 1; font-family: var(--mono); font-size: .85rem; }

/* ---- sharing ---- */
.add-member { padding-top: .75rem; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: .5rem; }
.add-member .row { flex-wrap: wrap; align-items: center; }

/* ---- merging ---- */
.conflicts { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.conflict { padding: .6rem .75rem; border: 1px solid var(--ink); background: var(--paper); }
.row.wrap { flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .25rem; }
.radio.compact { min-height: 36px; align-items: center; font-size: .95rem; }
.radio.compact input { margin-top: 0; }

.button.danger.solid { background: var(--danger); color: var(--paper); border-color: var(--danger); font-weight: 700; }
.button.danger.solid:disabled { opacity: .45; cursor: not-allowed; }

.peer-note { margin: .75rem 0; padding: .75rem 1rem; border: 1px solid var(--ink); }
.peer-note p { margin: 0 0 .5rem; }

/* ---- settings ---- */
.settings-layout { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.settings-layout > div { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.settings-layout .win { margin-bottom: 0; }
.accent-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); margin: 1rem 0; }
.accent-pick { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 44px; font: inherit; color: var(--ink); text-align: left;
  background: var(--paper); border: 1px solid transparent; cursor: pointer; }
.accent-pick:hover { border-color: var(--mute); }
.accent-pick[aria-pressed="true"] { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; }
.accent-pick[aria-pressed="true"] .accent-name::before { content: "\25b8\00a0"; content: "\25b8\00a0" / ""; }
.accent-name { font-weight: 700; }
.accent-chip { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 60px; border: 1px solid var(--ink); }
.accent-chip > span { position: relative; }
.accent-chip .dark-half { background: #0c0c0b; }
.accent-chip .dark-half > span { position: absolute; inset: 0;
  -webkit-mask: url(/dither/d50.png) repeat 0 0 / 16px 16px; mask: url(/dither/d50.png) repeat 0 0 / 16px 16px; }
.settings-msg { margin: -18px 0 0; color: var(--mute); }
.settings-msg:empty { display: none; }
.settings-msg.error { color: var(--danger); }
.custom-accent { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.custom-accent label { flex: 1 1 200px; }
.custom-accent input[type=color] { width: 44px; height: 44px; padding: 2px; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; }
.theme-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-pane { position: relative; border: 1px solid var(--ink); padding: 26px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.preview-pane .pane-title { position: absolute; top: -11px; left: 12px; padding: 0 6px; background: var(--paper); font-size: 13px; font-weight: 700; line-height: 20px; }
.mini-wave { display: flex; align-items: center; gap: 1px; height: 56px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.mini-wave > span { flex: 1 1 0; min-width: 1px; background-color: var(--ink);
  -webkit-mask: url(/dither/d50.png) repeat 0 0 / 16px 16px; mask: url(/dither/d50.png) repeat 0 0 / 16px 16px; }
.mini-wave > span.played { background-color: var(--sig); -webkit-mask: none; mask: none; }
.ascii-bar { font-family: var(--mono); white-space: pre; margin: 0; }

/* ---- phones ---- */
@media (max-width: 900px) {
  .project-layout, .settings-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .content { padding-top: 24px; }
  .win-body { padding: 24px 14px 14px; }
  .head-win .win-body { padding: 24px 14px 14px; }
  .library-win .win-body { padding: 24px 14px 14px; }
  .win::before { inset: 5px -5px -5px 5px; }
  h1, h1.inline, .page-head h1 { font-size: 2.4rem; }
  .project-head { align-items: stretch; }
  .toolbar { flex-direction: column; align-items: stretch; width: 100%; }
  .toolbar .button, .toolbar .picker, .toolbar .menu { width: 100%; }
  .menu-list { width: 100%; max-width: none; }
  .picker select { flex: 1; }
  .project-list { grid-template-columns: minmax(0, 1fr); }
  .hero-drop .row.wrap { width: 100%; }
  .hero-drop .row.wrap .button { flex: 1 1 100%; }
  .file-list { margin: 0 -14px; }
  .file-item { padding-left: 14px; padding-right: 14px; grid-template-columns: 44px minmax(0, 1fr); }
  .file-item .muted { grid-column: 2; white-space: normal; }
  .viewer-head .button { width: 100%; margin-left: 0; }
  .waveform { height: 110px; }
  .player-controls { justify-content: center; gap: 20px; }
  .player-controls .time { width: 100%; margin: 0; text-align: center; order: -1; }
  .player-controls .zoom { order: 1; }
  .button.round { width: 64px; min-width: 64px; height: 64px; font-size: 1.4rem; }
  .button.skip { min-width: 60px; }
  .snap-actions .button { flex: 1 1 auto; }
  .topbar .button.small { min-height: 44px; }
  .linklike { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:active { transform: none; } .thumb.pending::before { animation: none; } }

/* Docked player: shown when a track is loaded and the current page isn't showing it. */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; padding: .5rem var(--gutter); background: var(--paper); border-top: 1px solid var(--ink); }
.dock[hidden] { display: none; }
.dock-main { flex: 1; min-width: 0; }
.dock-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.dock-bar { height: 14px; margin-top: .3rem; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; }
.dock-bar { position: relative; }
.dock-wave { display: block; width: 100%; height: 40px; }
.dock-bar.has-wave { height: 42px; border-color: var(--rule); }
.dock-fill { height: 100%; width: 0; background: var(--sig); }
.dock-bar.has-wave .dock-fill { display: none; } /* progress is drawn into the waveform */
body.has-dock { padding-bottom: 76px; }

.archived { margin-top: 28px; }
.archived > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.archived-list { list-style: none; margin: 0; padding: 0; }
.archived-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0; border-top: 1px dashed var(--rule); }
.archived-row .fname { flex: 1 1 12rem; font-weight: 700; }

/* Per-file labels, favorites and notes. Label colours are the one place colour carries meaning
   beyond the highlight; each sits in a bordered square so it reads in both themes. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--ink); vertical-align: -1px; }
.label-red { background: #e5383b; } .label-orange { background: #f48c06; } .label-yellow { background: #ffd60a; }
.label-green { background: #2dc653; } .label-blue { background: #3a86ff; } .label-purple { background: #9d4edd; }
.label-grey { background: #8d99ae; }
.file-marks { display: inline-flex; gap: .4rem; align-items: center; margin-left: .5rem; font-weight: 400; }
.file-marks:empty { display: none; }
.fav-mark { font-size: .95rem; }
.note-mark { font-size: .8rem; }
.file-meta { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ink); }
.file-meta h3 { font-size: .85rem; margin: 1rem 0 .4rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.swatch-btn { min-width: 40px; justify-content: center; }
.swatch-btn[aria-pressed="true"], .fav[aria-pressed="true"] { background: var(--sig); color: var(--on-sig); }
.notes { list-style: none; margin: 0 0 .6rem; padding: 0; }
.notes li { padding: .45rem 0; border-bottom: 1px dashed var(--rule); }
.note-text { margin: 0 0 .15rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-form { display: flex; flex-direction: column; gap: .4rem; }
.note-form textarea { width: 100%; }
.file-meta .hint { margin: .6rem 0 0; }

/* ---- the desktop: files as icons or a list, a right-click menu, pending changes ---- */
.desktop { display: block; }
.desk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 .75rem; }
.desk-toolbar .view-toggle { padding: 0; }
.desk-toolbar select { min-height: 36px; padding: 0 .4rem; }
.desk-toolbar .count { white-space: nowrap; }
.crumbs a.drop-target, .item.drop-target { outline: 2px dashed var(--sig); outline-offset: 1px; background: var(--soft); }
.surface { position: relative; min-height: 220px; padding: 10px; border: 1px dashed var(--rule); outline: none; user-select: none; -webkit-user-select: none; }
.surface:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; }
.surface.drop-target { border-color: var(--sig); background: var(--soft); }
.surface.as-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 6px; align-content: start; }
.surface.as-list { display: block; padding: 0; }
.empty-folder { grid-column: 1 / -1; margin: 1.5rem 0; text-align: center; }
.surface.as-list .empty-folder { padding: 0 10px; }

.item { position: relative; cursor: default; border: 1px solid transparent; color: var(--ink); outline: none; }
.item:hover { background: var(--soft); }
.item:focus-visible { outline: 2px solid var(--sig); outline-offset: -2px; }
.item.selected, .item.selected:hover { background: var(--ink); color: var(--paper); }
.item.selected .muted { color: var(--paper); }
.item.viewing { border-color: var(--sig); }
.item.cut { opacity: .45; }
.item.dragging { opacity: .5; }
.item .thumb { position: relative; display: flex; align-items: center; justify-content: center; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); overflow: hidden; }
.item.is-new .thumb { border-style: dashed; }
.item .fname { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.item .fname-text { overflow-wrap: anywhere; }
.pmark { display: inline-block; margin-left: .4rem; padding: 0 .35rem; border: 1px solid currentColor; font-size: .75rem; line-height: 1.3; font-weight: 700; vertical-align: 1px; }
.pmark.new { color: var(--sig-text); }
.item.selected .pmark.new { color: var(--paper); }
.item .more { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; padding: 0; display: none; align-items: center; justify-content: center;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; line-height: 1; }
.item:hover .more, .item:focus-within .more, .item.selected .more { display: inline-flex; }
.item .more:hover { background: var(--ink); color: var(--paper); }
.rename-input { width: 100%; min-width: 4rem; font: inherit; font-weight: 700; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); padding: 0 .25rem; border-radius: 0; user-select: text; -webkit-user-select: text; }
.rename-input:focus { outline: 2px solid var(--sig); outline-offset: 1px; }

/* icons: a tile per item, name underneath */
.as-icons .item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 10px; text-align: center; }
.as-icons .item .thumb { width: 76px; height: 76px; font-size: 2.1rem; }
.as-icons .item .fname { font-size: .85rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.as-icons .item.selected .fname, .as-icons .item .fname:has(.rename-input) { -webkit-line-clamp: unset; }
.as-icons .item .kind { display: none; }
.as-icons .item .size { font-size: .75rem; }

/* list: one row each, columns for kind and size */
.as-list .item-head, .as-list .item { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px 150px 36px; column-gap: .8rem; align-items: center; padding: .3rem 12px; }
.as-list .item { min-height: 52px; border-width: 0 0 1px; border-bottom: 1px dashed var(--rule); }
/* Long folders: skip layout/paint for rows that are off screen. */
.as-list .item { content-visibility: auto; contain-intrinsic-size: auto 52px; }
.as-list .item .thumb { width: 40px; height: 40px; font-size: 1.2rem; }
.as-list .item .size { text-align: right; white-space: nowrap; }
.as-list .item .more { position: static; width: 30px; height: 30px; }
.as-list .item:not(:hover):not(:focus-within):not(.selected) .more { display: none; }
.as-list .item-head { border-bottom: 1px solid var(--ink); font-size: .8rem; }
.colhead { background: none; border: 0; padding: .35rem 0; font: inherit; font-weight: 700; color: var(--mute); text-align: left; cursor: pointer; }
.colhead:hover, .colhead[aria-pressed="true"] { color: var(--ink); }
.item-head .colhead:nth-child(4) { text-align: right; }

.band { position: absolute; z-index: 2; pointer-events: none; border: 1px solid var(--sig); background: color-mix(in srgb, var(--sig) 18%, transparent); }

/* what is waiting to be saved */
.pending-bar-box:empty { display: none; }
.pending-bar { margin: 0 0 .85rem; padding: .7rem .9rem; border: 1px solid var(--sig); background: var(--soft); box-shadow: 4px 4px 0 var(--sig); }
.bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.bar-row + .bar-row { margin-top: .5rem; }
.bar-message { flex: 1 1 14rem; min-width: 0; min-height: 36px; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); padding: 0 .6rem; border-radius: 0; }
.bar-message:focus { outline: 2px solid var(--sig); outline-offset: 1px; }
.bar-list { margin-top: .35rem; }
.bar-list summary { cursor: pointer; color: var(--mute); font-size: .85rem; }
.bar-list ol { margin: .4rem 0 0; padding-left: 1.4rem; max-height: 180px; overflow: auto; font-size: .9rem; overflow-wrap: anywhere; }
.flash { margin: 0 0 .75rem; padding: .4rem .7rem; border: 1px solid var(--ink); background: var(--paper); }
.flash.bad { border-color: var(--danger); color: var(--danger); font-weight: 700; }
.ro-note { margin: .75rem 0 0; }

/* the right-click menu */
.ctx-menu { position: fixed; z-index: 70; min-width: 230px; max-width: min(340px, 94vw); overflow: auto; padding: 4px 0; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); outline: none; user-select: none; -webkit-user-select: none; }
.ctx-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: .4rem; width: 100%; min-height: 32px; padding: .15rem .8rem .15rem .5rem;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ctx-item:hover:not(:disabled), .ctx-item:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.ctx-item:disabled { opacity: .4; cursor: default; }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover:not(:disabled), .ctx-item.danger:focus-visible { background: var(--danger); color: var(--paper); }
.ctx-check { font-size: .6rem; text-align: center; }
.ctx-hint { color: var(--mute); font-size: .8rem; padding-left: 1.2rem; }
.ctx-item:hover:not(:disabled) .ctx-hint, .ctx-item:focus-visible .ctx-hint { color: inherit; }
.ctx-sep { border-top: 1px solid var(--ink); margin: 4px 0; }
.ctx-heading { padding: .3rem .8rem .1rem 1.5rem; color: var(--mute); font-size: .75rem; font-weight: 700; text-transform: lowercase; }

/* dialogs: info, move to, text editor */
.info-grid { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .35rem .8rem; margin: 0; }
.info-grid dt { color: var(--mute); }
.info-grid dd { margin: 0; overflow-wrap: anywhere; }
.info-grid .hash { word-break: break-all; font-size: .8rem; }
.folder-pick { max-height: 50vh; overflow: auto; border: 1px solid var(--ink); }
.radio.pick { min-height: 40px; padding-right: .6rem; margin: 0; align-items: center; }
.radio.pick:hover { background: var(--soft); }
.radio.pick input { margin-top: 0; }
dialog.editor-dialog { width: min(920px, 96vw); }
.text-edit { width: 100%; min-height: 52vh; resize: vertical; font: .92rem/1.5 var(--mono); tab-size: 4; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); padding: .7rem; border-radius: 0; }
.text-edit:focus { outline: 2px solid var(--sig); outline-offset: 1px; }
.md-preview { min-height: 52vh; max-height: 70vh; overflow: auto; border: 1px solid var(--ink); padding: .7rem 1rem; }

@media (pointer: coarse) {
  .item .more { display: inline-flex; }
  .as-list .item .more { width: 36px; height: 36px; }
  .ctx-item { min-height: 44px; }
}
@media (max-width: 640px) {
  .surface.as-icons { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .as-list .item-head, .as-list .item { grid-template-columns: 44px minmax(0, 1fr) 36px; }
  .as-list .item .kind, .as-list .item-head .colhead:nth-child(3), .as-list .item-head .colhead:nth-child(4) { display: none; }
  .as-list .item .size { grid-column: 2; text-align: left; white-space: normal; }
  .as-list .item .more { grid-row: 1 / span 2; grid-column: 3; }
}