/* Kinlore — the whole design system, in one file.
   ---------------------------------------------------------------------------
   The subject is a family's spoken record, so the surface is deliberately
   archival rather than app-like: warm dark ground, paper-coloured ink, and one
   brass accent that means "this is the thing to press". Nothing is decorated for
   its own sake. Two rules held throughout:

   1. The recording state is the most legible thing on any screen it appears on.
      Everything else in this file is quiet so that a running recorder is not.
   2. Every control that can be pressed has a real focus ring and a real pressed
      state. This app is used by people who are older than the median app user,
      and "did my tap land?" is the question the whole interface has to answer.

   Colours are declared once as custom properties on :root and never hard-coded
   below, so the eleven places that need a hairline or a muted label cannot drift
   apart from each other. */

:root {
  --bg: #16110d;
  --bg-2: #1d1610;
  --bg-3: #251c15;
  --paper: #f7efe2;
  --ink: #f4e9d9;
  --ink-2: #c9b9a3;
  --ink-3: #8d7f6e;
  --line: rgba(247, 239, 226, 0.10);
  --line-2: rgba(247, 239, 226, 0.18);
  --card: rgba(247, 239, 226, 0.042);
  --card-2: rgba(247, 239, 226, 0.075);
  --brass: #d8a94e;
  --brass-2: #f2cd83;
  --brass-dim: rgba(216, 169, 78, 0.16);
  --clay: #c07a52;
  --sage: #8fa07a;
  --danger: #dc7660;
  --ok: #7fae7a;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --pad: 18px;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85);
  --shadow-up: 0 -10px 30px -18px rgba(0, 0, 0, 0.8);
  --tap: 48px;
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

/* A warm off-centre wash, so the flat ground has somewhere the eye can rest
   without any of it being an image the shell would have to cache. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 18% -10%, rgba(216, 169, 78, 0.10), transparent 62%),
    radial-gradient(90% 60% at 100% 108%, rgba(192, 122, 82, 0.075), transparent 60%);
  z-index: 0;
}

[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.22; margin: 0; }
h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brass-2); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--brass-2);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── skip link ─────────────────────────────────────────────────────────────
   Off-screen until focused. Not `display:none` — a link that cannot be reached
   by tabbing is a link that does not exist. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  padding: 12px 16px;
  background: var(--bg-3);
  color: var(--ink);
  border-radius: 0 0 var(--r) 0;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ── the no-script notice ──────────────────────────────────────────────────
   Styled so that if it ever renders it looks deliberate. This block exists only
   when no script can run, and it must never be a styled paragraph sitting on the
   page the rest of the time — that is the defect that shipped once on a sibling
   app, where a `.nojs` class was used instead of a real <noscript>. */
.nojs {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 22px var(--pad) calc(22px + env(safe-area-inset-top));
  background: var(--bg-3);
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 0.94rem;
}
.nojs strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 1.15rem; margin-bottom: 6px; }

/* ── boot ──────────────────────────────────────────────────────────────────
   Visible from the first paint until the first screen is ready. It holds no
   words, so a language that has not loaded yet cannot make it read wrong. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: var(--bg);
}
.boot svg { width: 54px; height: 54px; color: var(--brass); opacity: 0.85; animation: breathe 2.4s var(--ease) infinite; }
@keyframes breathe {
  0%, 100% { opacity: 0.4; transform: scale(0.97); }
  50% { opacity: 0.95; transform: scale(1); }
}

/* ── shell ─────────────────────────────────────────────────────────────────
   One grid for the three fixed regions. `min-height: 0` on main is what lets a
   long list scroll inside the grid instead of pushing the tab bar off screen. */
.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
}

.top {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
  background: linear-gradient(to bottom, rgba(22, 17, 13, 0.96) 62%, rgba(22, 17, 13, 0.72));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand { min-width: 0; flex: 1; }
.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--paper);
}
.brand-sub {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iconbtn {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), transform 0.12s var(--ease);
}
.iconbtn svg { width: 21px; height: 21px; }
.iconbtn:hover { background: var(--card-2); color: var(--ink); }
.iconbtn:active { transform: scale(0.94); }
.iconbtn.is-on { color: var(--brass); border-color: var(--brass-dim); background: var(--brass-dim); }

main {
  min-height: 0;
  padding: var(--pad) var(--pad) 30px;
  overflow-x: hidden;
}
main:focus { outline: none; }

/* ── tab bar ───────────────────────────────────────────────────────────────
   The centre tab is raised and brass, because "tell me one" is the action the
   whole app is for — a person who opens Kinlore with nothing in mind should not
   have to find the add button. */
.tabbar {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 2px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(22, 17, 13, 0.98) 66%, rgba(22, 17, 13, 0.74));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-up);
}
.tab {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: var(--tap);
  padding: 6px 2px;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.015em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.tab svg { width: 22px; height: 22px; }
.tab:active { background: var(--card); }
.tab[aria-current="page"] { color: var(--brass-2); }
.tab-add { color: var(--ink-2); }
.tab-add svg circle, .tab-add svg path { stroke-width: 1.9; }
.tab-add svg {
  width: 30px; height: 30px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--brass-dim);
  border: 1px solid rgba(216, 169, 78, 0.34);
  color: var(--brass-2);
}
.tab-add[aria-current="page"] svg { background: var(--brass); color: #241a0c; border-color: var(--brass-2); }

/* ── typography of a screen ────────────────────────────────────────────────*/
.eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.lede { color: var(--ink-2); font-size: 0.95rem; }
.muted { color: var(--ink-3); }
.small { font-size: 0.84rem; }
.serif { font-family: var(--serif); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 14px; }
.section { margin-top: 26px; }
.section:first-child { margin-top: 0; }

/* ── cards ─────────────────────────────────────────────────────────────────*/
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card-flat { box-shadow: none; }
.card-brass { border-color: rgba(216, 169, 78, 0.28); background: linear-gradient(180deg, rgba(216, 169, 78, 0.10), rgba(216, 169, 78, 0.03)); }

/* ── buttons ───────────────────────────────────────────────────────────────*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.12s var(--ease), opacity 0.16s var(--ease);
}
.btn svg { width: 19px; height: 19px; }
.btn:hover { background: rgba(247, 239, 226, 0.12); }
.btn:active { transform: scale(0.975); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; transform: none; }
.btn-primary {
  background: linear-gradient(180deg, var(--brass-2), var(--brass));
  border-color: rgba(255, 255, 255, 0.18);
  color: #241a0c;
  font-weight: 600;
}
.btn-primary:hover { background: linear-gradient(180deg, #ffdc9a, var(--brass-2)); }
.btn-quiet { background: none; border-color: var(--line); color: var(--ink-2); }
.btn-danger { color: var(--danger); border-color: rgba(220, 118, 96, 0.36); background: rgba(220, 118, 96, 0.09); }
.btn-wide { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 0.86rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row > .btn { flex: 1 1 auto; }

/* ── lists and rows ────────────────────────────────────────────────────────*/
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.12s var(--ease);
}
.row:hover { background: var(--card-2); border-color: var(--line-2); }
.row:active { transform: scale(0.99); }
.row-body { min-width: 0; }
.row-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-sub { display: block; font-size: 0.82rem; color: var(--ink-3); margin-top: 2px; }
.row-2line .row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* A date block: the day large, the month small under it. Cheaper to scan than a
   formatted sentence and it survives every locale's word order. */
.when {
  flex: none;
  width: 46px;
  padding: 4px 0;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  border: 1px solid var(--line);
  text-align: center;
  line-height: 1.1;
}
.when b { display: block; font-family: var(--serif); font-size: 1.16rem; color: var(--paper); font-weight: 600; }
.when i { display: block; font-style: normal; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); }

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a120a;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.playbtn {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid rgba(216, 169, 78, 0.34);
  background: var(--brass-dim);
  color: var(--brass-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s var(--ease), transform 0.12s var(--ease);
}
.playbtn svg { width: 18px; height: 18px; }
.playbtn:active { transform: scale(0.93); }
.playbtn.is-playing { background: var(--brass); color: #241a0c; border-color: var(--brass-2); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 0.72rem;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.pill-brass { border-color: rgba(216, 169, 78, 0.34); background: var(--brass-dim); color: var(--brass-2); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── empty states ──────────────────────────────────────────────────────────*/
.empty {
  padding: 34px 22px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--ink-2);
}
.empty svg { width: 38px; height: 38px; color: var(--ink-3); margin-bottom: 10px; }
.empty h3 { margin-bottom: 6px; }

/* ── the recorder ──────────────────────────────────────────────────────────
   The most important surface in the app. A running recording has to be obvious
   from across a room: a brass disc, a live meter, an elapsed clock that does not
   jump, and a stop button that is larger than anything else on the screen. */
.rec { display: grid; justify-items: center; gap: 18px; padding: 8px 0 4px; }

.recbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid rgba(216, 169, 78, 0.4);
  background: radial-gradient(circle at 34% 28%, #f6d493, var(--brass) 58%, #a97c28);
  color: #2b1e0b;
  cursor: pointer;
  box-shadow: 0 20px 40px -20px rgba(216, 169, 78, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s var(--ease), box-shadow 0.2s var(--ease);
}
.recbtn svg { width: 44px; height: 44px; }
.recbtn:active { transform: scale(0.965); }
.recbtn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* Armed: a slow halo, so `is it listening?` is answered before the first word. */
.recbtn.is-armed { animation: arm 2.2s var(--ease) infinite; }
@keyframes arm {
  0%, 100% { box-shadow: 0 20px 40px -20px rgba(216, 169, 78, 0.5), 0 0 0 0 rgba(216, 169, 78, 0.34); }
  60% { box-shadow: 0 20px 40px -20px rgba(216, 169, 78, 0.5), 0 0 0 20px rgba(216, 169, 78, 0); }
}
/* Recording: the disc goes deep red and the halo is faster and tighter. */
.recbtn.is-recording {
  border-color: rgba(220, 118, 96, 0.6);
  background: radial-gradient(circle at 34% 28%, #ef9a86, #cf6a52 60%, #8d3a29);
  box-shadow: 0 20px 40px -20px rgba(220, 118, 96, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  animation: rec 1.5s var(--ease) infinite;
}
@keyframes rec {
  0%, 100% { box-shadow: 0 20px 40px -20px rgba(220, 118, 96, 0.6), 0 0 0 0 rgba(220, 118, 96, 0.4); }
  60% { box-shadow: 0 20px 40px -20px rgba(220, 118, 96, 0.6), 0 0 0 26px rgba(220, 118, 96, 0); }
}

.clock {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--paper);
  line-height: 1;
}
.clock.is-live { color: #ffd7cb; }

/* The level meter is CSSOM-driven: the bars are elements and nothing writes a
   style attribute as markup, which is what keeps `style-src 'self'` affordable. */
.meter {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 46px;
  width: 100%;
  max-width: 300px;
}
.meter i {
  display: block;
  flex: 1 1 0;
  height: 4px;
  min-width: 3px;
  border-radius: 3px;
  background: var(--line-2);
  transform-origin: bottom;
  transition: height 0.09s linear, background 0.2s var(--ease);
}

/* ── fields ────────────────────────────────────────────────────────────────*/
.field { display: block; margin-top: 16px; }
.field:first-child { margin-top: 0; }
.field-label { display: block; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 7px; letter-spacing: 0.01em; }
.field-hint { display: block; font-size: 0.76rem; color: var(--ink-3); margin-top: 6px; }

input[type="text"], input[type="search"], input[type="number"], input[type="file"], textarea, select {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
textarea { min-height: 130px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-dim); }
select { appearance: none; background-image: none; }
/* A file input is a button wearing an input's clothes, so its own button is dressed to
   match the surface it sits on rather than left as the browser's default chrome. */
input[type="file"] { padding: 8px 12px; line-height: 1.6; }
input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  border-radius: calc(var(--r) - 4px);
  padding: 7px 12px;
  margin-right: 12px;
}

.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.switch:last-child { border-bottom: 0; }
.switch-text { min-width: 0; }
.switch-text b { display: block; font-weight: 500; font-size: 0.96rem; }
.switch-text span { display: block; font-size: 0.79rem; color: var(--ink-3); margin-top: 2px; }
.switch input { flex: none; width: 24px; height: 24px; accent-color: var(--brass); }

/* ── prompt card ───────────────────────────────────────────────────────────
   The weekly question is the one piece of long prose in the app, so it gets the
   serif and the most generous line height available. */
.prompt {
  font-family: var(--serif);
  font-size: 1.44rem;
  line-height: 1.4;
  color: var(--paper);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.prompt-theme { margin-bottom: 10px; }

/* ── the poster preview ────────────────────────────────────────────────────*/
.poster {
  position: relative;
  aspect-ratio: 1080 / 1350;
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: linear-gradient(168deg, var(--bg-3), var(--bg-2) 55%, #120d09);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
}
.poster::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(216, 169, 78, 0.22);
  border-radius: calc(var(--r) - 5px);
  pointer-events: none;
}
.poster-title { position: relative; font-family: var(--serif); font-size: 1.5rem; color: var(--paper); line-height: 1.2; }
.poster-quote { position: relative; font-family: var(--serif); font-size: 1.1rem; font-style: italic; color: var(--ink-2); line-height: 1.45; }
.poster-foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.poster-locked { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 9, 6, 0.62); backdrop-filter: blur(2px); }

/* The drawn PNG, once there is one. It is shown *under* the live preview rather than
   instead of it, so the words on screen and the words in the file can be compared before
   anybody sends the file to their sister. The box is the preview's own box: without a
   rule here the image renders at its natural width - 1080 pixels, on a screen 390 of them
   wide - which is the one thing this app would do that looks like a photograph of a
   poster rather than a poster. `[hidden]` (line 80) is what keeps it out of the flow
   until a poster has been drawn. */
.poster-image {
  display: block;
  width: 100%;
  aspect-ratio: 1080 / 1350;
  object-fit: contain;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}

/* ── stats ─────────────────────────────────────────────────────────────────*/
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.tile b { display: block; font-family: var(--serif); font-size: 1.7rem; color: var(--paper); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span { display: block; font-size: 0.74rem; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.02em; }

.bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; margin-top: 6px; }
/* Again CSSOM: the height of each bar is assigned from script. */
.bars i { display: block; flex: 1 1 0; min-height: 3px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--brass), rgba(216, 169, 78, 0.34)); }
.bars i.is-zero { background: var(--line); }
.bars-x { display: flex; gap: 5px; margin-top: 6px; }
.bars-x span { flex: 1 1 0; text-align: center; font-size: 0.6rem; color: var(--ink-3); }

.themebar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.themebar:last-child { border-bottom: 0; }
.themebar-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px; }
.themebar-track i { display: block; height: 100%; border-radius: 3px; background: var(--brass); }

/* ── sheets ────────────────────────────────────────────────────────────────
   A bottom sheet rather than a dialog: it is one-handed reachable on a phone,
   and dismissing it is a swipe that a person already knows. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(8, 6, 4, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade 0.2s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 10px var(--pad) calc(24px + env(safe-area-inset-bottom));
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -24px 60px -28px rgba(0, 0, 0, 0.9);
  animation: rise 0.26s var(--ease);
  overscroll-behavior: contain;
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-grip { width: 38px; height: 4px; margin: 2px auto 14px; border-radius: 2px; background: var(--line-2); }
.sheet h2 { margin-bottom: 4px; }
.sheet-head { margin-bottom: 16px; }

/* ── toast ─────────────────────────────────────────────────────────────────
   One line, above the tab bar, never covering the record button. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 26;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 0.88rem;
  box-shadow: var(--shadow);
  animation: toast-in 0.22s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── misc ──────────────────────────────────────────────────────────────────*/
.hr { height: 1px; background: var(--line); border: 0; margin: 24px 0; }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
/* A legal page is a plain document in the same stylesheet, so it carries one thing of its
   own: the lift over `body::before`. That wash is fixed and positioned, and in-flow text
   paints underneath a positioned sibling - which is why `.app` is lifted too. Without this
   a long document reads through a layer of warm haze. */
.legal {
  position: relative;
  z-index: 1;
  color: var(--ink-2);
  font-size: 0.92rem;
}
.legal h2 { margin: 26px 0 8px; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 20px; }
.legal li { margin: 5px 0; }

/* ── responsive and accessibility preferences ──────────────────────────────*/
@media (min-width: 620px) {
  :root { --pad: 26px; }
  main { max-width: 660px; margin: 0 auto; width: 100%; padding-bottom: 44px; }
  .tabbar { padding-left: max(8px, calc(50vw - 330px)); padding-right: max(8px, calc(50vw - 330px)); }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .poster { max-width: 420px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .boot svg { opacity: 0.8; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(247, 239, 226, 0.28); --line-2: rgba(247, 239, 226, 0.44); --ink-3: #b3a493; }
}

/* The recording disc is the one thing that must not animate for someone who has
   asked not to be animated, and it must still read as live — so it keeps a solid
   colour change and loses only the pulse. */
@media (prefers-reduced-motion: reduce) {
  .recbtn.is-armed, .recbtn.is-recording { animation: none; }
  .recbtn.is-recording { box-shadow: 0 0 0 4px rgba(220, 118, 96, 0.3); }
}