/* base.css — babd.pub/v2: opencode's TUI, drawn as a web page.
   What is taken from opencode (packages/tui in its repo, theme rosepine.json): the colours by role
   (background, backgroundPanel, backgroundElement, border, text, textMuted), flat panels instead of
   boxes, a ┃ bar in the accent on the left of the prompt that ends in ╹ half a row under it, the
   panel ending in a row of ▀, key hints as "key label" with the label muted, dialogs centred a
   quarter down on a darkened screen with the selected row filled in the accent. The accent is the
   owner's pine and the second colour gold: nothing else. Everything is one monospace font on a grid
   of cells one advance (--cw) wide; unlike a terminal, it is real text: it selects, copies, zooms,
   wraps and scrolls like any page. */
/* the font's @font-face rules are in fonts.css, which build.mjs writes: the font files are served under
   names that carry their content's hash, so a new subset (a new icon) is a new address, and no
   browser can draw the page with a copy of the old one it kept (one did: the cashu nut stayed blank) */

:root {
  color-scheme: dark;
  --bg: #191724; --panel: #1f1d2e; --element: #26233a;
  --border: #403d52; --border-subtle: #21202e;
  --text: #e0def4; --subtle: #908caa; --muted: #6e6a86;
  --pine: #31748f; --gold: #f6c177;
  --hl-low: #21202e; --hl-med: #403d52; --hl-high: #524f67;
  --pine-dim: #293f55; --pine-deep: #1f2d3d; --gold-dim: #7a6448;
  --backdrop: rgb(10 9 16 / .62);
  --fs: 15px; --lh: 1.4;
  --cw: calc(var(--fs) * .5859375);    /* a cell: the font's advance */
  --row: calc(var(--fs) * var(--lh));  /* a text row */
  --bar: max(2px, calc(var(--fs) * .16)); /* the thickness of ┃ in this font */
  --mono: CaskaydiaCove, 'Cascadia Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
@media (max-width: 699px) { :root { --fs: 14px; } }
@media (min-width: 1800px) { :root { --fs: 17px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--fs) / var(--lh) var(--mono);
  font-synthesis: none; font-variant-ligatures: none; font-feature-settings: 'calt' 0, 'liga' 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, pre, figure, blockquote { margin: 0; font: inherit; }
ul, ol { padding: 0; list-style: none; }
pre { white-space: pre; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
::selection { background: var(--hl-high); color: var(--text); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
::-webkit-scrollbar { width: calc(var(--cw) * .5); height: calc(var(--cw) * .5); }
::-webkit-scrollbar-thumb { background: var(--hl-med); }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: var(--hl-med) transparent; scrollbar-width: thin; }

/* colour words */
.t-text { color: var(--text); } .t-subtle { color: var(--subtle); } .t-muted { color: var(--muted); }
.t-pine { color: var(--pine); } .t-gold { color: var(--gold); } .b { font-weight: 700; }

/* a link inside text: pine, underlined on hover like a terminal's hyperlink */
.link { color: var(--pine); text-decoration: underline; text-decoration-color: var(--pine-dim); text-underline-offset: .2em; }
.link:hover { text-decoration-color: currentColor; }

/* key hints: "ctrl+k commands" */
.hints { display: flex; flex-wrap: wrap; gap: 0 calc(var(--cw) * 3); color: var(--muted); }
.hint kbd, kbd.k { font: inherit; color: var(--text); }
.hint kbd { margin-right: var(--cw); }
.hint .way { color: var(--gold); }

/* a badge: a word on a filled cell run, like opencode's agent tag or a tmux status block */
.badge { display: inline-block; padding: 0 var(--cw); background: var(--pine); color: var(--bg); font-weight: 700; }
.badge.gold { background: var(--gold); }
.badge.dim { background: var(--element); color: var(--subtle); font-weight: 400; }

/* panels: opencode draws no boxes, only fills */
.panel { background: var(--panel); }
.element { background: var(--element); }

/* the prompt: a ┃ in the accent, a filled element, and the fill ending half a row lower in ▀,
   where the bar ends in ╹ */
.prompt {
  position: relative; margin-left: var(--cw);
  background: var(--element);
  padding: var(--row) calc(var(--cw) * 2) calc(var(--row) * .5);
}
.prompt::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(var(--cw) * -.5 - var(--bar) / 2); width: var(--bar);
  background: var(--prompt-accent, var(--pine));
}

/* a session header: "# title" on the panel colour, bar on the left in the border colour */
.header {
  position: relative; margin-left: var(--cw); background: var(--panel);
  padding: var(--row) calc(var(--cw) * 2);
  display: flex; gap: calc(var(--cw) * 2); justify-content: space-between; align-items: baseline; flex-wrap: wrap;
}
.header::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(var(--cw) * -.5 - var(--bar) / 2); width: var(--bar); background: var(--border);
}

/* a copyable value: selectable text that wraps anywhere (addresses have no spaces) */
.value { overflow-wrap: anywhere; word-break: break-all; user-select: all; -webkit-user-select: all; }
.value.plain { user-select: text; -webkit-user-select: text; }

/* action buttons, drawn as text: "[c] copy" */
.act { color: var(--subtle); white-space: nowrap; }
.act:hover { color: var(--text); }
.act .k { color: var(--gold); }
.act.done, .act.done .k { color: var(--pine); }

/* QR codes (ui.mjs qrSvg): light modules in the text colour, a quiet zone of two */
.qr { width: 100%; height: auto; image-rendering: pixelated; shape-rendering: crispEdges; }

/* ascii art canvases (art.mjs): decoration, never selected or read out */
.art { position: relative; user-select: none; -webkit-user-select: none; }
.art canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.art.fill canvas { inset: 0; }

/* the dialog (ui.mjs palette) */
.dialog-back { position: fixed; inset: 0; z-index: 50; background: var(--backdrop); display: flex; justify-content: center; align-items: flex-start; padding: 25vh var(--cw) 0; }
.dialog { width: min(calc(var(--cw) * 60), 100%); background: var(--panel); padding: var(--row) 0 calc(var(--row) * .5); max-height: 70vh; display: flex; flex-direction: column; }
.dialog .head { display: flex; justify-content: space-between; padding: 0 calc(var(--cw) * 4); }
.dialog .head b { font-weight: 700; }
.dialog .head button { color: var(--muted); }
/* the field's height set, its line the font's own: iOS draws the caret out of line with the text
   when the line is taller (the padding above and below stay as they were) */
.dialog input { display: block; width: 100%; border: 0; outline: 0; background: transparent; color: var(--muted); padding: var(--row) calc(var(--cw) * 4) calc(var(--row) * .5); caret-color: var(--pine); line-height: normal; height: calc(var(--row) * 2.5); flex: none; }
.dialog input:focus { color: var(--text); }
.dialog input::placeholder { color: var(--muted); }
.dialog ul { overflow: auto; padding: 0 var(--cw); }
.dialog .cat { padding: calc(var(--row) * .5) calc(var(--cw) * 3) 0; color: var(--gold); font-weight: 700; }
.dialog li button { display: flex; width: 100%; justify-content: space-between; gap: calc(var(--cw) * 2); padding: 0 calc(var(--cw) * 3); text-align: left; color: var(--text); }
.dialog li button .d { color: var(--muted); }
/* one line a row: a title never wraps, a long description is cut */
.dialog li button > span:first-child { white-space: nowrap; flex: none; }
.dialog li button .d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog li button[aria-selected=true] { background: var(--pine); color: var(--bg); }
.dialog li button[aria-selected=true] .d { color: var(--bg); }
.dialog .empty { padding: 0 calc(var(--cw) * 4); color: var(--muted); }

/* toasts (ui.mjs toast): top right, panel, bar on the left in the accent */
.toasts { position: fixed; top: var(--row); right: calc(var(--cw) * 2); z-index: 60; display: grid; gap: calc(var(--row) * .5); pointer-events: none; }
.toast { position: relative; background: var(--panel); padding: calc(var(--row) * .5) calc(var(--cw) * 2); min-width: calc(var(--cw) * 24); max-width: calc(var(--cw) * 44); margin-left: var(--cw); animation: toast-in .16s ease-out; }
.toast::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--cw) * -.5 - var(--bar) / 2); width: var(--bar); background: var(--pine); }
.toast b { display: block; }
.toast span { color: var(--subtle); overflow-wrap: anywhere; }
.toast.out { opacity: 0; transition: opacity .2s; }
@keyframes toast-in { from { transform: translateX(calc(var(--cw) * 2)); opacity: 0; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* a block-art logo (logo.mjs): cells --lcw wide and twice as high, the glyph a hair larger than
   its cell so the blocks join (the homepage's grid trick); art.mjs playLogo hides it while an
   effect draws it on a canvas */
.logo {
  --lcw: var(--cw);
  display: block; width: max-content; white-space: pre; user-select: none; -webkit-user-select: none;
  font-size: calc(var(--lcw) * 1.75); line-height: calc(var(--lcw) * 2);
  letter-spacing: calc(var(--lcw) - var(--lcw) * 1.75 * .5859375);
}
.logo.fx-on { visibility: hidden; }