/* Self-hosted Cormorant (SIL OFL 1.1, see fonts/OFL.txt) — cyrillic + latin subsets */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 700; font-display: swap; src: url(fonts/cg-italic-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 700; font-display: swap; src: url(fonts/cg-italic-lat.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: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/cg-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/cg-lat.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: 'Cormorant SC'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/csc-600-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant SC'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/csc-600-lat.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: 'Cormorant SC'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/csc-700-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant SC'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/csc-700-lat.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; }

/* ВСЁ ТУТ — «Аметист · Собор». Tokens mirror design/tokens.css (tests/tokens.test.mjs keeps them equal). */

:root {
  /* surfaces */
  --bg: #0B0A0C;
  --bg-tab: #080709;
  --panel: rgba(20, 19, 22, 0.92);
  --panel-solid: #131215; /* the panel over --bg, for things that slide over other things */
  --highlight-bg: #22141A;
  --highlight-border: #7A2236;

  /* text */
  --text: #E9E6E1;
  --text-muted: #B7B2BA;
  --text-meta: #8F8A92;

  /* lines */
  --line: #2A272D;
  --line-strong: #3A363E;
  --outline-dim: #68626F;

  /* accent (wine red) */
  --accent: #C93A4E;
  --accent-text: #D75465;
  --accent-fill: #9E2236;
  --bone: #CFCAC4;

  /* category marks — small diamonds only */
  --tag-urgent: #C93A4E;
  --tag-dance: #8B6BB8;
  --tag-health: #4F8A6E;
  --tag-other: #68626F;
  --tag-ochre: #B8873A;
  --tag-steel: #5B87B0;
  --tag-mauve: #B0679A;
  --tag-teal: #4E9A9A;

  /* type */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-caps: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;

  /* layout */
  --gutter: 20px;
  --gutter-header: 24px;
  --tabbar-h: 64px;
  --tap: 44px;
  --fs: 1.12; /* text size; the phone's choice in Настройки → «Размер текста» overrides it */
}

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --tab-pad: max(12px, env(safe-area-inset-bottom, 0px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* No zoom: pinch and double tap are off everywhere (rows that swipe narrow it further to pan-y). */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; touch-action: pan-x pan-y; }
body { overflow-x: clip; }
button, .tabbar a, .next-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body {
  margin: 0; min-height: 100dvh; color: var(--text); font-family: var(--font-serif); font-size: calc(18px * var(--fs));
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  padding-bottom: calc(var(--tabbar-h) + var(--tab-pad) + 32px);
}
a { color: inherit; }
button { font: inherit; color: inherit; }
button, a, input, textarea { touch-action: manipulation; }
:focus-visible { outline: 1px solid var(--accent-text); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* lace background */
.lace {
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(233, 230, 225, 0.07) 1.5px, transparent 2px),
    linear-gradient(45deg, rgba(233, 230, 225, 0.025) 25%, transparent 25%, transparent 75%, rgba(233, 230, 225, 0.025) 75%),
    linear-gradient(-45deg, rgba(233, 230, 225, 0.025) 25%, transparent 25%, transparent 75%, rgba(233, 230, 225, 0.025) 75%);
  background-size: 20px 20px;
  background-attachment: fixed;
}

/* header */
.hdr { position: relative; padding: calc(30px + var(--safe-top)) var(--gutter-header) 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.hdr .overline { padding: 0 34px; font-family: var(--font-caps); font-weight: 600; font-size: calc(14px * var(--fs)); line-height: 1.45; letter-spacing: 0.26em; color: var(--text-meta); } /* clear of the 44px corner buttons */
.hdr .title { margin: 0; font-style: italic; font-weight: 700; font-size: min(calc(56px * var(--fs)), 70px); line-height: 1.05; }
.hdr .flourish { margin-top: 6px; display: block; color: var(--accent); }
.hdr .add { position: absolute; top: calc(24px + var(--safe-top)); right: 14px; }
.hdr .gear { position: absolute; top: calc(24px + var(--safe-top)); left: 14px; color: var(--text-meta); }

/* generic */
.icon-btn { width: var(--tap); height: var(--tap); border: 0; background: none; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.caps { font-family: var(--font-caps); font-weight: 600; letter-spacing: 0.2em; }
.label { font-family: var(--font-caps); font-weight: 600; font-size: calc(12px * var(--fs)); letter-spacing: 0.2em; color: var(--text-meta); }
.label.accent { color: var(--accent-text); }
.meta { font-style: italic; font-size: calc(14px * var(--fs)); color: var(--text-meta); }
.muted { color: var(--text-muted); }
.section-title { margin: 0; font-family: var(--font-caps); font-weight: 600; font-size: calc(17px * var(--fs)); letter-spacing: 0.22em; color: var(--accent-text); }
.section-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); }
.section-head .icon-btn { margin-right: -12px; }

/* containers */
.frame { margin: 18px var(--gutter) 0; background: var(--panel); border: 1px solid var(--line-strong); outline: 1px solid var(--line-strong); outline-offset: 3px; padding: 6px 14px 4px; }
.highlight { background: var(--highlight-bg); border: 1px solid var(--highlight-border); }
.card { margin: 18px var(--gutter) 0; padding: 14px 16px; }

/* list rows */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 12px; min-height: 54px; border-top: 1px solid var(--line); }
.rows > .row:first-child { border-top: 0; }
.section-head + .rows > .row:first-child { border-top: 1px solid var(--line); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.row-title { font-weight: 700; font-size: calc(18px * var(--fs)); line-height: 1.15; }
.row-tap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; align-self: stretch; padding: 6px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.row.is-done .row-title { color: var(--text-meta); text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 600; }
.row.is-past { color: var(--text-meta); }
.row.is-next { margin: 4px -6px; padding: 0 6px; min-height: 58px; border: 1px solid var(--highlight-border); background: var(--highlight-bg); }
.row.is-next + .row { border-top: 0; }

/* diamonds */
.gem { display: inline-block; flex: none; width: 7px; height: 7px; transform: rotate(45deg); }
.gem.sm { width: 6px; height: 6px; }
.gem.lg { width: 11px; height: 11px; }
.gem.xs { width: 4px; height: 4px; }
.gem.on { background: var(--accent); }
.gem.bone { background: var(--bone); }
.gem.off { border: 1px solid var(--outline-dim); }
.gems { display: inline-flex; gap: 6px; align-items: center; }

/* checkbox */
.check { width: var(--tap); height: var(--tap); flex: none; margin-left: -12px; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.check i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--text-meta); display: flex; align-items: center; justify-content: center; }
.check[aria-pressed="true"] i { border: 0; background: var(--accent-fill); color: var(--text); }

/* progress line */
.progress { height: 2px; background: var(--line-strong); }
.progress > i { display: block; height: 100%; background: var(--accent); }

/* filter */
.filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 12px var(--gutter) 0; }
.filter button { height: var(--tap); padding: 0 9px; border: 0; background: none; color: var(--text-meta); font-family: var(--font-caps); font-weight: 600; font-size: calc(16px * var(--fs)); letter-spacing: 0.06em; cursor: pointer; }
.filter button { position: relative; }
.filter button[aria-pressed="true"] { color: var(--text); font-weight: 700; }
.filter button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); }

/* hashtag filter */
.tagbar { display: flex; gap: 4px; overflow-x: auto; margin: 4px 0 0; padding: 0 var(--gutter); scrollbar-width: none; }
.tagbar::-webkit-scrollbar { display: none; }
.tagbar button { flex: none; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); background: none; color: var(--text-muted); font-style: italic; font-size: calc(16px * var(--fs)); cursor: pointer; }
.tagbar button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--highlight-bg); }
.tags { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; }
.tag { font-style: italic; font-size: calc(15px * var(--fs)); color: var(--text-muted); }

/* chips (dance parts) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { height: var(--tap); padding: 0 12px; border: 1px solid var(--highlight-border); background: none; color: var(--text-muted); font-family: var(--font-caps); font-weight: 600; font-size: calc(15px * var(--fs)); letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent); color: var(--text); font-weight: 700; }
.chip[aria-pressed="true"]::before { content: ""; width: 5px; height: 5px; background: var(--text); transform: rotate(45deg); }

/* accent button (+1, +10) */
.btn-accent { width: 46px; height: 46px; flex: none; border: 1px solid var(--highlight-border); background: var(--highlight-bg); color: var(--accent-text); font-family: var(--font-caps); font-weight: 700; font-size: calc(17px * var(--fs)); cursor: pointer; }
.btn-accent.outline { width: 50px; height: 50px; border-color: var(--accent); background: none; font-size: calc(16px * var(--fs)); }

/* cameo cover */
.cameo { width: 44px; height: 56px; flex: none; border: 1px solid var(--outline-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: italic; font-weight: 700; font-size: calc(24px * var(--fs)); overflow: hidden; }
.cameo img { width: 100%; height: 100%; object-fit: cover; }
.cameo.filled { width: 48px; height: 64px; background: var(--accent-fill); border-color: var(--accent); font-size: calc(26px * var(--fs)); }
.cameo.accent { color: var(--accent-text); }
.cameo.dim { color: var(--text-meta); }

/* step tracker (orders) — every step is a button */
.steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.steps li { min-width: 0; }
.step { width: 100%; min-height: var(--tap); padding: 6px 0 0; border: 0; background: none; display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer; }
.step .track { display: flex; align-items: center; height: 10px; width: 100%; }
.step .line { flex: 1; height: 1px; margin-left: 4px; background: var(--line); }
.steps li.past .gem { background: var(--bone); }
.steps li.past .line { background: var(--text-meta); }
.steps li.cur .gem { background: var(--accent); }
.steps li.next .gem { border: 1px solid var(--outline-dim); }
.step-label { font-style: italic; font-size: min(calc(13px * var(--fs)), 15px); color: var(--text-meta); }
.steps li.cur .step-label { color: var(--text); }

/* status tags */
.status { flex: none; font-family: var(--font-caps); font-weight: 600; font-size: calc(13px * var(--fs)); letter-spacing: 0.14em; color: var(--text-muted); padding: 3px 0; }
.status.pickup { color: var(--accent-text); font-weight: 700; border: 1px solid var(--accent); padding: 2px 8px; }
.status.received, .status.unpaid { color: var(--text-meta); }

/* tab bar — the active item also has a diamond over it (one element that travels between tabs), so it never relies on colour alone */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tabbar-h) + var(--tab-pad)); background: var(--bg-tab); border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 8px var(--tab-pad); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-meta); text-decoration: none; font-family: var(--font-caps); font-weight: 600; font-size: min(calc(12px * var(--fs)), 13.5px); letter-spacing: 0.08em; }
.tabbar a[aria-current="page"] { color: var(--accent-text); font-weight: 700; }
.tab-ind { position: absolute; top: 6px; left: calc(8px + (100% - 16px) * (var(--i) + 0.5) / 6); width: 6px; height: 6px; background: var(--accent); transform: translateX(-50%) rotate(45deg); pointer-events: none; }
.tabbar svg { width: 22px; height: 22px; }

/* ---------- screen pieces ---------- */

/* today: progress */
.day-progress { margin: 16px var(--gutter-header) 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.day-progress .gems { gap: 12px; flex-wrap: wrap; justify-content: center; }
.day-progress .meta { font-size: calc(16px * var(--fs)); }

/* «далее» card */
.next-card { margin: 20px var(--gutter) 0; display: flex; align-items: center; gap: 16px; text-decoration: none; padding: 14px 16px; }
.next-card .when { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-right: 14px; border-right: 1px solid var(--highlight-border); }
.next-card .time { font-family: var(--font-caps); font-weight: 700; font-size: calc(30px * var(--fs)); line-height: 1; color: var(--accent-text); }
.next-card .row-title { font-size: calc(20px * var(--fs)); }
.next-card .meta { font-size: calc(15px * var(--fs)); }
.next-card .go { color: var(--accent-text); display: flex; }

/* plan: week strip */
.week { margin: 14px 12px 0; display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)) 30px; gap: 3px; align-items: center; }
.week .icon-btn { width: 30px; color: var(--text-meta); }
.day { height: 62px; padding: 0; border: 1px solid transparent; background: none; color: var(--text-meta); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.day .wd { font-family: var(--font-caps); font-weight: 600; font-size: min(calc(13px * var(--fs)), 15px); letter-spacing: 0.08em; }
.day .n { font-family: var(--font-caps); font-weight: 600; font-size: calc(21px * var(--fs)); line-height: 1; }
.day .dot { height: 4px; }
.day.today .wd, .day.today .n { color: var(--accent-text); }
.day[aria-pressed="true"] { background: var(--highlight-bg); border-color: var(--highlight-border); color: var(--text); }
.day[aria-pressed="true"] .n { font-weight: 700; font-size: calc(23px * var(--fs)); }

/* plan: schedule rows */
.ev-time { width: 50px; flex: none; display: flex; flex-direction: column; }
.ev-time .t { font-family: var(--font-caps); font-weight: 700; font-size: calc(17px * var(--fs)); line-height: 1; }
.ev-time .meta { font-size: calc(13px * var(--fs)); }
.row.is-next .ev-time .t { color: var(--accent-text); }
.row.is-past .row-title { font-weight: 600; font-size: calc(17px * var(--fs)); }
.past-mark { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--line-strong); color: var(--text-muted); display: flex; align-items: center; justify-content: center; }

/* watch */
.row.watch { min-height: 84px; }
.watch .progress { background: var(--line); margin-top: 3px; }
.watch .gems { gap: 7px; padding: 4px 0 0 2px; }

/* dance */
.dance-now .head { display: flex; align-items: baseline; justify-content: space-between; }
.dance-now .pct { font-family: var(--font-caps); font-weight: 700; font-size: calc(20px * var(--fs)); color: var(--accent-text); }
.dance-now .name { display: block; margin: 4px 0 0; font-style: italic; font-weight: 700; font-size: calc(28px * var(--fs)); line-height: 1.1; }
.dance-now .open { width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; display: block; }
.dance-now .meta { display: block; }
.dance-now .meta { font-size: calc(15px * var(--fs)); }

/* books */
.goal { margin: 14px var(--gutter-header) 0; display: block; width: calc(100% - 2 * var(--gutter-header)); padding: 0; border: 0; background: none; cursor: pointer; }
.goal .goal-title { display: block; margin: 0; text-align: center; font-style: italic; font-weight: 500; font-size: calc(17px * var(--fs)); color: var(--text-muted); }
.goal .goal-title b { font-family: var(--font-caps); font-style: normal; font-weight: 700; font-size: calc(20px * var(--fs)); color: var(--text); }
.spines { margin-top: 10px; display: grid; width: 100%; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; }
.spines i { height: 26px; border: 1px solid var(--outline-dim); }
.spines i.read { border: 0; background: var(--bone); }
.spines i.read.alt { background: var(--text-meta); }
.spines i.read.last { background: var(--accent-fill); }
.book-now { display: flex; align-items: center; gap: 14px; padding: 14px; }
.book-now .name { display: block; margin: 0; font-style: italic; font-weight: 700; font-size: calc(21px * var(--fs)); line-height: 1.1; }
.book-now .progress { display: block; margin-top: 2px; }
.book-now .open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }

/* orders */
.order { padding: 10px 8px; margin: 2px -8px; border-top: 1px solid var(--line); }
.rows > .order:first-child { border-top: 0; }
.order.pickup { background: var(--highlight-bg); border: 1px solid var(--highlight-border); }
.order.pickup + .order { border-top: 0; }
.order .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.order .carrier { display: block; margin-top: 6px; letter-spacing: 0.1em; }
.order .meta { display: block; margin-top: 2px; }
.order .got { margin-top: 10px; }

/* empty state */
.empty { text-align: center; padding: 18px 8px 16px; }
.empty p { margin: 0 0 12px; font-style: italic; font-size: calc(17px * var(--fs)); color: var(--text-muted); }

/* notice (install hint, key hint) */
.notice { margin: 18px var(--gutter) 0; padding: 12px 14px; }
.notice p { margin: 4px 0 0; font-size: calc(16px * var(--fs)); color: var(--text-muted); line-height: 1.3; }
.notice .actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- buttons ---------- */
.btn { min-height: 48px; padding: 0 18px; border: 1px solid var(--highlight-border); background: none; color: var(--text); font-family: var(--font-caps); font-weight: 700; font-size: calc(16px * var(--fs)); letter-spacing: 0.12em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn.primary { background: var(--accent-fill); border-color: var(--accent); }
.btn.quiet { border-color: var(--line-strong); color: var(--text-muted); }
.btn.danger { border-color: transparent; color: var(--accent-text); }
.btn.small { min-height: var(--tap); padding: 0 12px; font-size: calc(14px * var(--fs)); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- sheet (forms) ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(5, 4, 5, 0.72); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; max-height: calc(100dvh - var(--safe-top) - 16px); overflow-y: auto; overscroll-behavior: contain; background-color: var(--bg); border-top: 1px solid var(--line-strong); outline: 1px solid var(--line-strong); outline-offset: -5px; padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)); }
.sheet-head { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.sheet-head h2 { margin: 0; font-style: italic; font-weight: 700; font-size: calc(34px * var(--fs)); line-height: 1.1; text-align: center; padding: 0 40px; }
.sheet-head .overline { font-family: var(--font-caps); font-weight: 600; font-size: calc(13px * var(--fs)); letter-spacing: 0.22em; color: var(--text-meta); }
.sheet-head .close { position: absolute; top: 6px; right: -10px; color: var(--text-meta); }
.sheet-head .flourish { margin-top: 6px; color: var(--accent); }
.sheet-body { margin-top: 8px; }
.sheet-text { margin: 14px 0 0; font-size: calc(18px * var(--fs)); color: var(--text-muted); text-align: center; line-height: 1.3; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

/* fields */
.field { display: block; margin-top: 18px; }
.field > .label, .field-label { display: block; margin-bottom: 4px; font-size: calc(13px * var(--fs)); }
.field input, .field textarea {
  display: block; width: 100%; min-height: var(--tap); padding: 8px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: none; color: var(--text); font-family: var(--font-serif); font-size: calc(19px * var(--fs)); font-weight: 600; -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 72px; resize: vertical; font-weight: 500; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-meta); font-style: italic; font-weight: 500; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field input[type="date"], .field input[type="time"] { font-family: var(--font-caps); font-weight: 700; letter-spacing: 0.04em; }
.field .hint { display: block; margin-top: 6px; font-style: italic; font-size: calc(15px * var(--fs)); color: var(--text-meta); line-height: 1.3; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row .field { min-width: 0; }

/* option buttons (single choice) */
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { min-height: var(--tap); padding: 0 12px; border: 1px solid var(--line-strong); background: none; color: var(--text-muted); font-family: var(--font-caps); font-weight: 600; font-size: calc(15px * var(--fs)); letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.opt[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent); color: var(--text); font-weight: 700; }
.opt[aria-pressed="true"]::before { content: ""; width: 5px; height: 5px; background: var(--text); transform: rotate(45deg); }
.opt .gem { margin-right: 2px; }
.opt:has(.gem)[aria-pressed="true"]::before { display: none; } /* category options keep their colour mark */

/* rating / level input */
.rate { display: flex; gap: 0; margin-left: -12px; }
.rate button { width: var(--tap); height: var(--tap); border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rate .gem { width: 12px; height: 12px; }

/* editable list (dance parts, hashtags) */
.edit-list { list-style: none; margin: 0; padding: 0; }
.edit-list li { display: flex; align-items: center; gap: 8px; min-height: var(--tap); border-bottom: 1px solid var(--line); }
.edit-list li .name, .edit-list li > span:not(.gem) { flex: 1; font-size: calc(18px * var(--fs)); font-weight: 600; }
.add-line { display: flex; gap: 8px; align-items: flex-end; }
.add-line input { flex: 1; }

/* search results */
.results { list-style: none; margin: 8px 0 0; padding: 0; }
.results button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.results .meta { font-size: calc(15px * var(--fs)); }

/* settings */
.set-group { margin-top: 26px; }
.set-group > .section-title { margin-bottom: 4px; }
.set-line { margin: 8px 0 0; font-size: calc(17px * var(--fs)); color: var(--text-muted); line-height: 1.3; }
.set-line b { color: var(--text); font-weight: 700; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* toast with undo */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--tab-pad) + 12px); z-index: 60; width: calc(100% - 2 * var(--gutter)); max-width: 440px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; background: var(--highlight-bg); border: 1px solid var(--highlight-border); }
.toast span { flex: 1; font-size: calc(16px * var(--fs)); }
.toast button { min-height: var(--tap); padding: 0 12px; border: 0; background: none; color: var(--accent-text); font-family: var(--font-caps); font-weight: 700; font-size: calc(14px * var(--fs)); letter-spacing: 0.14em; cursor: pointer; }

/* wide screens: keep the phone column */
@media (min-width: 600px) {
  body { max-width: 430px; margin: 0 auto; }
  .tabbar { max-width: 430px; margin: 0 auto; }
}

/* ---------- v1.2: update banner, calendar rows, groups, repeats, how-to lists ---------- */
.toast.update { top: calc(var(--safe-top) + 10px); bottom: auto; z-index: 70; }
.toast.update button { display: inline-flex; align-items: center; gap: 6px; }
.row.ext .ev-time .t { color: var(--text-muted); }
.ev-time .t.allday { font-size: calc(13px * var(--fs)); line-height: 1.15; letter-spacing: 0.06em; }
.from-cal { color: var(--text-meta); }
.meta svg { vertical-align: -1px; }
.weekdays { margin-top: 8px; }
.add-opt { border-style: dashed; color: var(--text-meta); }
.group-form { margin-top: 6px; }
.swatches { display: flex; flex-wrap: wrap; margin-left: -12px; }
.swatches button { width: var(--tap); height: var(--tap); border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.swatches .gem { width: 12px; height: 12px; }
.swatches button[aria-pressed="true"] .gem { outline: 1px solid var(--text); outline-offset: 4px; }
.edit-list li .gem { margin-right: 2px; }
.howto { margin: 8px 0 0; padding-left: 22px; font-size: calc(16px * var(--fs)); line-height: 1.35; color: var(--text-muted); }
.howto li { margin-top: 5px; }
.howto b, .set-line b { color: var(--text); }
.cal-row { display: flex; align-items: center; gap: 10px; min-height: var(--tap); border-bottom: 1px solid var(--line); }
.cal-row .name { flex: 1; font-weight: 600; }
a.btn { text-decoration: none; }
.set-label { display: block; margin: 14px 0 6px; font-family: var(--font-caps); font-weight: 600; font-size: calc(13px * var(--fs)); letter-spacing: 0.2em; color: var(--text-meta); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.set-row .set-val { flex: 1; font-size: calc(17px * var(--fs)); color: var(--text-muted); line-height: 1.3; }
.set-row .btn { flex: none; }
.set-line.note { font-style: italic; color: var(--text-meta); }
.version { margin: 26px 0 0; text-align: center; }

/* ---------- tab change: cross-fade ---------- */
.ghost { position: fixed; z-index: 1; pointer-events: none; }
#screen.xfade { position: relative; z-index: 2; min-height: 100dvh; background-color: var(--bg); background-image: radial-gradient(rgba(233, 230, 225, 0.07) 1.5px, transparent 2px), linear-gradient(45deg, rgba(233, 230, 225, 0.025) 25%, transparent 25%, transparent 75%, rgba(233, 230, 225, 0.025) 75%), linear-gradient(-45deg, rgba(233, 230, 225, 0.025) 25%, transparent 25%, transparent 75%, rgba(233, 230, 225, 0.025) 75%); background-size: 20px 20px; }

/* ---------- haptic labels (see fx.js): invisible, over the whole control ---------- */
.has-hap { position: relative; }
label.hap { position: absolute; inset: 0; z-index: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hap-sw { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
button:disabled > label.hap { display: none; }

/* ---------- swipes ---------- */
.rows { position: relative; }
[data-swipe] { touch-action: pan-y; }
.swiping { position: relative; z-index: 1; background: var(--panel-solid); }
.row.is-next.swiping, .order.pickup.swiping { background: var(--highlight-bg); }
.swipe-snap { transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.swipe-under { position: absolute; z-index: 0; display: flex; justify-content: space-between; overflow: hidden; }
.swipe-under .side { display: flex; }
/* the main action's layer lies over the whole row and takes no room, so the buttons always get their full width */
.swipe-under .side.l { position: absolute; inset: 0; }
.swipe-under .side.r { margin-left: auto; flex-shrink: 0; }
.swipe-under[data-dir="right"] .side.r, .swipe-under[data-dir="left"] .side.l { visibility: hidden; }
.act { min-width: 64px; padding: 0 10px; border: 0; color: var(--text); font-family: var(--font-caps); font-weight: 700; font-size: min(calc(13px * var(--fs)), 15px); letter-spacing: 0.04em; white-space: nowrap; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.side.l .act { flex: 1; justify-content: flex-start; padding-left: 20px; }
.side.r .act { flex-shrink: 0; }
.act.do { background: var(--accent-fill); }
.act.alt { background: var(--line-strong); }
.act.del { background: var(--highlight-border); }
.swipe-under.armed .side.l .act { background: var(--accent); }
.swipe-under.armed .side.r .act.del { background: var(--accent-fill); }

/* ---------- login ---------- */
.login { min-height: calc(100dvh - 40px); padding: calc(64px + var(--safe-top)) var(--gutter-header) 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.login .overline { font-family: var(--font-caps); font-weight: 600; font-size: calc(14px * var(--fs)); letter-spacing: 0.26em; color: var(--text-meta); }
.login .title { margin: 2px 0 0; font-style: italic; font-weight: 700; font-size: min(calc(56px * var(--fs)), 70px); line-height: 1.05; }
.login .flourish { margin-top: 6px; color: var(--accent); }
.login-form { width: 100%; max-width: 320px; margin-top: 34px; text-align: left; }
.login-form .field input { font-family: var(--font-caps); letter-spacing: 0.08em; }
.show-pass { min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--text-meta); font-style: italic; font-size: calc(16px * var(--fs)); cursor: pointer; }
.login-error { min-height: 22px; margin: 4px 0 14px; color: var(--accent-text); font-size: calc(17px * var(--fs)); }
.login-hint { max-width: 320px; margin: 30px 0 0; font-style: italic; font-size: calc(16px * var(--fs)); line-height: 1.35; color: var(--text-muted); }
body:has(.login) { padding-bottom: 0; }

/* ---------- press: every tappable thing answers the finger ---------- */
.row-tap:active, .order .top:active, .results button:active, .dance-now .open:active, .book-now .open:active, .goal:active { opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .btn-accent, .chip, .opt, .icon-btn, .day, .filter button, .tagbar button, .check i, .rate .gem, .step .gem, .tabbar svg, .next-card, .goal, .row-tap, .order .top {
    transition: transform 0.14s ease, opacity 0.18s ease, background-color 0.18s ease;
  }
  .btn:active, .btn-accent:active, .chip:active, .opt:active, .icon-btn:active, .day:active, .filter button:active, .tagbar button:active, .swatches button:active { transform: scale(0.92); }
  .check:active i { transform: scale(0.8); }
  .rate button:active .gem { transform: rotate(45deg) scale(0.75); }
  .step:active .gem { transform: rotate(45deg) scale(1.5); }
  .tabbar a:active svg { transform: scale(0.84); }
  .next-card:active, .goal:active { transform: scale(0.985); }
}

/* ---------- motion: screens, sheets, and whatever just changed ---------- */
@media (prefers-reduced-motion: no-preference) {
  #screen.in-right, .in-right { animation: in-right 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
  #screen.in-left, .in-left { animation: in-left 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
  #screen.in-fade { animation: fade-up 0.4s ease-out; }
  .swap { animation: fade-up 0.24s ease-out; }
  .appear { animation: appear 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }

  /* state changes */
  .pop { animation: pop 0.34s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .gem.pop, .gems.ripple .gem { animation: gem-pop 0.38s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .gems.ripple .gem { animation-duration: 0.5s; animation-fill-mode: both; animation-delay: calc(var(--i, 0) * 70ms); }
  .check.pop { animation: none; }
  .check.pop i { animation: pop 0.34s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .check.pop[aria-pressed="true"] path { stroke-dasharray: 22; animation: draw 0.3s ease-out 0.05s both; }
  .row.pop { animation: none; }
  .row.pop.is-done .row-title { animation: dim 0.4s ease-out; }
  .steps li.pop { animation: none; }
  .steps li.pop .gem { animation: gem-pop 0.38s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .steps li.pop.past .line { transform-origin: left; animation: grow-x 0.4s ease-out; }
  .tabbar a.pop { animation: none; }
  .tabbar a.pop svg { animation: pop 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .filter button.pop { animation: none; }
  .filter button.pop[aria-pressed="true"]::after { animation: grow-x 0.28s ease-out; }
  .flash { animation: flash 0.7s ease-out; }
  .shake { animation: shake 0.36s ease-in-out; }

  /* sheets and toast */
  .sheet-wrap.enter { animation: fade 0.2s ease-out; }
  .sheet.enter { animation: rise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sheet-wrap.leaving { animation: fade-out 0.2s ease-in forwards; pointer-events: none; }
  .sheet-wrap.leaving .sheet { animation: sink 0.2s ease-in forwards; }
  .toast.toast-in { animation: toast-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }

  @keyframes in-right { from { opacity: 0; transform: translateX(44px); } }
  @keyframes in-left { from { opacity: 0; transform: translateX(-44px); } }
  @keyframes drop-in { from { opacity: 0; transform: translate(-50%, -16px); } }
  .toast.update.drop-in { animation: drop-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
  @keyframes appear { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
  @keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
  @keyframes gem-pop { 0% { transform: rotate(45deg) scale(0.4); } 60% { transform: rotate(45deg) scale(1.5); } 100% { transform: rotate(45deg) scale(1); } }
  @keyframes grow-x { from { transform: scaleX(0); } }
  @keyframes draw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
  @keyframes dim { from { color: var(--text); } }
  @keyframes flash { from { color: var(--text); text-shadow: 0 0 12px rgba(215, 84, 101, 0.9); } }
  @keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes rise { from { transform: translateY(28px); opacity: 0; } }
  @keyframes sink { to { transform: translateY(28px); opacity: 0; } }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
}

/* reminders */
.link { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-style: italic; text-decoration: underline; cursor: pointer; }
.timer-opts { margin-top: 14px; flex-direction: column; }
.timer-opts .opt { width: 100%; justify-content: center; min-height: 52px; font-size: calc(16px * var(--fs)); }