@font-face { font-family: "RB Digits"; src: url(fonts/digits-400.woff2) format("woff2"); font-weight: 300 500; unicode-range: U+0030-0039; }
@font-face { font-family: "RB Digits"; src: url(fonts/digits-600.woff2) format("woff2"); font-weight: 600 800; unicode-range: U+0030-0039; }

:root {
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-ml: 1.5rem;
  --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem;
  --text-xs: 0.8125rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem;
  --text-2xl: 1.9375rem; --text-3xl: 2.4375rem; --text-4xl: 3.0625rem;

  --chalk: #F1F2EE; --paper: #FBFBF9; --peat: #2B2722; --moss: #5F6660;
  --hunter: #22493C; --brass: #9A7430; --scan: #3F6F7F; --ban: #8E2F2A; --caution: #8A5A12;

  --color-surface: var(--chalk);
  --color-raised: var(--paper);
  --color-text: var(--peat);
  --color-text-2: var(--moss);
  --color-action: var(--hunter);
  --color-on-action: var(--chalk);
  --color-seal: var(--brass);
  --color-data: var(--scan);
  --color-ban: var(--ban);
  --color-caution: var(--caution);
  --color-border: rgba(43, 39, 34, 0.09);
  --color-track: rgba(43, 39, 34, 0.18);
  --ink-far: color-mix(in srgb, currentColor 48%, transparent);
  --thumb-bg: #E7E9E3;

  --shadow-device: 0 1px 2px rgba(0,0,0,0.05), 0 20px 40px rgba(0,0,0,0.07);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-micro: 150ms; --duration-standard: 300ms; --duration-macro: 450ms;

  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --font-text: "RB Digits", "Atkinson Hyperlegible Next", "Helvetica Neue", Arial, sans-serif;
  --font-display-ar: "Amiri", "Bodoni Moda", serif;
  --font-text-ar: "Readex Pro", "Atkinson Hyperlegible Next", sans-serif;
  --font-text-ur: "Noto Nastaliq Urdu", "Readex Pro", sans-serif;

  --radius-photo: 14px; --radius-sheet: 20px; --radius-control: 12px; --radius-secondary: 10px; --radius-device: 44px;
  --target: 48px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-text); font-size: var(--text-base); line-height: 1.6;
  font-feature-settings: "tnum" 1; -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-action); outline-offset: 3px; border-radius: 6px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Type */
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; margin: 0; }
.lede { color: var(--color-text-2); margin: 0; max-width: 46ch; }
.demo-note { font-size: var(--text-xs); color: var(--color-text-2); margin: 0; line-height: 1.5; }
.fine { font-size: var(--text-xs); color: var(--color-text-2); margin: 0; text-align: center; }
.group-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-2); margin: 0; }

/* Thumbs and rows */
.thumb {
  width: 56px; height: 56px; border-radius: var(--radius-photo); background: var(--thumb-bg);
  display: grid; place-items: center; overflow: hidden; color: var(--color-text); flex: none;
}
.thumb svg { width: 54px; height: 54px; --emb: 380; transform: scaleX(-1); }
[dir="rtl"] .thumb svg { transform: none; }
.thumb.sm { width: 40px; height: 40px; border-radius: 10px; }
.thumb.sm svg { width: 38px; height: 38px; }
.animal { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--color-border); }
.animal:first-of-type { border-top: 0; padding-top: 0; }
.animal-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.animal-meta { font-size: var(--text-xs); color: var(--color-text-2); margin: 2px 0 var(--space-sm); line-height: 1.45; }
.due { font-size: var(--text-xs); font-weight: 600; color: var(--color-action); margin: var(--space-xs) 0 0; }
.clock {
  margin-top: var(--space-sm); font-size: var(--text-xs); line-height: 1.45; color: var(--color-caution);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-secondary);
  background: color-mix(in srgb, var(--color-caution) 9%, transparent);
}

/* The rail */
.rail { --m: 14px; --pole: 10px; position: relative; padding-top: calc(var(--m) / 2 - 1px); }
.rail.big { --m: 24px; --pole: 18px; }
.rail-track { position: relative; height: 2px; background: var(--color-track); border-radius: 2px; margin: 0 calc(var(--m) / 2); }
.rail.big .rail-track { height: 3px; }
.rail-fill {
  position: absolute; inset: 0; background: var(--color-action); border-radius: 2px;
  transform-origin: left center; transform: scaleX(calc(var(--p, 0) / 3));
  transition: transform var(--duration-macro) var(--ease-out);
}
[dir="rtl"] .rail-fill { transform-origin: right center; }
.rail-poles { position: absolute; left: calc(var(--m) / 2 - 1px); right: calc(var(--m) / 2 - 1px); top: calc(var(--m) / 2 - var(--pole) / 2); display: flex; justify-content: space-between; }
.pole { width: 2px; height: var(--pole); background: var(--color-track); border-radius: 1px; }
.pole.done { background: var(--color-action); }
.pole.goal { background: var(--color-seal); width: 3px; }
.rail-mover {
  position: absolute; top: 0; left: 0; width: calc(100% - var(--m));
  transform: translateX(calc(var(--p, 0) * 33.333%));
  transition: transform var(--duration-macro) var(--ease-out); pointer-events: none;
}
[dir="rtl"] .rail-mover { left: auto; right: 0; transform: translateX(calc(var(--p, 0) * -33.333%)); }
.marker { width: var(--m); height: var(--m); border-radius: 50%; background: var(--color-action); box-shadow: 0 0 0 3px var(--color-raised); }
.rail-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); font-weight: 600; margin-top: calc(var(--m) / 2 + 8px); }
.rail-labels span { min-width: 34px; text-align: center; }
.rail-labels span:first-child { text-align: start; } .rail-labels span:last-child { text-align: end; }
.rail-labels .goal-l { color: var(--color-seal); }
.rail-dates { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-2); margin-top: 2px; }
.rail-dates span { min-width: 44px; text-align: center; }
.rail-dates span:first-child { text-align: start; } .rail-dates span:last-child { text-align: end; }

/* Controls */
.btn {
  min-height: var(--target); border-radius: 999px; border: 0; cursor: pointer;
  background: var(--color-action); color: var(--color-on-action); font-weight: 700; padding: 0 var(--space-lg);
  transition: transform var(--duration-micro) var(--ease-snap), opacity var(--duration-micro);
}
.btn:active { transform: scale(0.98); }
.btn-wide { width: 100%; }
.btn-secondary {
  min-height: var(--target); border-radius: var(--radius-secondary); cursor: pointer;
  background: transparent; color: var(--color-action); border: 1px solid var(--color-border); font-weight: 700; padding: 0 var(--space-ml);
}
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; background: var(--color-surface);
}
.seg button {
  min-height: var(--target); border: 0; background: transparent; cursor: pointer; font-weight: 700; font-size: var(--text-base); padding: 0 4px;
  transition: background-color var(--duration-micro) var(--ease-snap), color var(--duration-micro) var(--ease-snap);
}
.seg.tight button { font-size: var(--text-xs); }
.seg.small button { min-height: 38px; font-size: var(--text-xs); }
.seg button + button { border-inline-start: 1px solid var(--color-border); }
.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--color-action) 13%, var(--color-raised)); color: var(--color-action); box-shadow: inset 0 0 0 1.5px var(--color-action); border-radius: calc(var(--radius-control) - 1px); }
.chips { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.chips button {
  min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-secondary); border: 1px solid var(--color-border);
  background: var(--color-raised); cursor: pointer; font-size: var(--text-xs); font-weight: 700;
}
.chips button[aria-pressed="true"] { background: color-mix(in srgb, var(--color-action) 13%, var(--color-raised)); color: var(--color-action); border-color: var(--color-action); box-shadow: inset 0 0 0 0.5px var(--color-action); }
.q { display: flex; flex-direction: column; gap: var(--space-sm); }
.q-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-2); margin: 0; }

/* Check-in */
.who { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-md); align-items: center; }
.who-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.05em; line-height: 0.95; margin: 0; }
.who-sub { font-size: var(--text-xs); color: var(--color-text-2); margin: var(--space-xs) 0 0; }
.question { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
.logged { font-size: var(--text-xs); color: var(--color-action); font-weight: 700; text-align: center; margin: 0; min-height: 1.5em; opacity: 0; transition: opacity var(--duration-standard) var(--ease-snap); }
.logged.show { opacity: 1; }

/* Arabic */
[lang="ar"] { font-family: var(--font-text-ar); }
[lang="ar"] .animal-name, [lang="ar"] .who-name, [lang="ar"] .screen-title { font-family: var(--font-text-ar); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
[lang="ar"] p, [lang="ur"] p { text-wrap: balance; }
[lang="ur"] { font-family: var(--font-text-ur); }
[lang="en"] { font-family: var(--font-text); }
[lang="ar"] [lang="ar"], [lang="ur"] [lang="ar"] { font-family: var(--font-text-ar); }
[lang="ur"] .question, [lang="ur"] .q-label, [lang="ur"] .who-sub, [lang="ur"] .fine, [lang="ur"] .logged { line-height: 2.1; letter-spacing: 0; }
[lang="ur"] .seg button, [lang="ur"] .btn { line-height: 1.9; }
[data-i18n] .who-name { font-family: var(--font-display); }
[lang="ar"] .animal-meta, [lang="ar"] .question { line-height: 1.7; letter-spacing: 0; }

/* Device frames */
.phone {
  width: 340px; background: var(--color-raised); border-radius: var(--radius-device);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-device); overflow: hidden;
  display: flex; flex-direction: column; flex: none;
}
.statusbar { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-ml); font-size: 12px; font-weight: 600; flex: none; }
.screen { padding: var(--space-xs) var(--space-ml) var(--space-ml); display: flex; flex-direction: column; gap: var(--space-md); flex: 1; }
.screen-title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); letter-spacing: -0.04em; line-height: 1.05; margin: 0; }
.screen-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.screen-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-sm); }

.browser {
  background: var(--color-raised); border: 1px solid var(--color-border); border-radius: 16px;
  box-shadow: var(--shadow-device); overflow: hidden; text-align: start; width: 100%;
}
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.browser-url { flex: 1; text-align: center; font-size: 11px; color: var(--color-text-2); }

/* App shell (desktop mock) */
.app { display: grid; grid-template-columns: 168px 1fr; min-height: 420px; }
.side { border-inline-end: 1px solid var(--color-border); padding: var(--space-md); display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.03em; margin: 0 0 var(--space-md); }
.side a { color: var(--color-text-2); text-decoration: none; padding: 7px 10px; border-radius: 8px; font-weight: 600; }
.side a.on { background: color-mix(in srgb, var(--color-action) 10%, transparent); color: var(--color-action); }
.side .side-foot { margin-top: auto; color: var(--color-text-2); font-size: 11px; line-height: 1.4; padding: 0 10px; }
.main { padding: var(--space-ml); display: flex; flex-direction: column; gap: var(--space-ml); min-width: 0; }
.main-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.main-title { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.04em; line-height: 1.05; margin: 0; }

/* Needs tiles */
.needs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); }
.need {
  border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: 10px 12px; background: var(--color-raised);
  display: flex; flex-direction: column; gap: 2px; text-align: start; cursor: pointer;
}
.need b { font-size: var(--text-xs); line-height: 1.3; }
.need .n { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--color-data); }
.need span { font-size: 11px; color: var(--color-text-2); line-height: 1.35; }
.need[aria-pressed="true"] { border-color: var(--color-action); box-shadow: inset 0 0 0 1px var(--color-action); }

/* Lists */
.list { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-sm) var(--space-md); align-items: center; padding: 10px 0; border-top: 1px solid var(--color-border); font-size: var(--text-xs); }
.row:first-child { border-top: 0; }
.row b { display: block; font-size: 0.9rem; }
.row .meta { color: var(--color-text-2); }
.tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-border); white-space: nowrap; }
.tag.data { color: var(--color-data); border-color: color-mix(in srgb, var(--color-data) 40%, transparent); }
.tag.caution { color: var(--color-caution); border-color: color-mix(in srgb, var(--color-caution) 40%, transparent); }
.tag.ban { color: var(--color-ban); border-color: color-mix(in srgb, var(--color-ban) 40%, transparent); }
.tag.ok { color: var(--color-action); border-color: color-mix(in srgb, var(--color-action) 35%, transparent); }

/* Protocol page */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; }
.phase { padding: 12px 14px; font-size: var(--text-xs); line-height: 1.45; }
.phase + .phase { border-inline-start: 1px solid var(--color-border); }
.phase b { display: block; font-size: 0.9rem; }
.phase .when { color: var(--color-data); font-weight: 700; display: block; margin-bottom: 4px; }
.phase .slot { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 8px; border: 1px dashed var(--color-track); color: var(--color-text-2); }
.totals { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-ml); }
.proto-main .totals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); }
.proto-main .totals .total-l { display: block; line-height: 1.35; margin-top: 4px; }
.app-phone .totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.total-n { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.04em; line-height: 1; display: block; color: var(--color-data); }
.total-l { font-size: var(--text-xs); color: var(--color-text-2); }
.bar { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--color-data) 14%, transparent); overflow: hidden; }
.bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 5px; }
.bar .followed { background: color-mix(in srgb, var(--color-data) 42%, transparent); }
.bar .outcome { background: var(--color-data); }
.block-title { font-size: var(--text-base); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--space-xs); line-height: 1.3; }
.rules { list-style: none; margin: 0; padding: 0; }
.rules li { padding: 9px 0; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-md); }
.rules li:first-child { border-top: 0; }
.body-name { font-weight: 700; font-size: var(--text-xs); line-height: 1.45; }
.rule-text { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-2); margin: 0; }
.rule-text b { color: var(--color-caution); }
.rule-text b.ban { color: var(--color-ban); }
.rule-text b.none { color: var(--color-text-2); }
.seal { width: 20px; height: 20px; flex: none; }
.seal circle { fill: none; stroke: var(--color-seal); stroke-width: 1.5; }
.seal path { fill: none; stroke: var(--color-seal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.seal-line { display: flex; gap: var(--space-sm); align-items: center; font-size: var(--text-xs); }

/* Gate result */
.gate-card { border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-md); background: var(--color-raised); border-inline-start: 4px solid var(--g, var(--color-text-2)); }
.gate-card h4 { margin: 0 0 6px; font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em; }
.gate-card p { margin: 0; font-size: var(--text-xs); line-height: 1.55; }
.gate-card q { font-weight: 700; }
.gate-card cite { display: block; font-style: normal; font-size: 11px; color: var(--color-text-2); margin-top: 6px; }
.gate-card[data-s="ban"] { --g: var(--color-ban); }
.gate-card[data-s="ban"] h4 { color: var(--color-ban); }
.gate-card[data-s="caution"] { --g: var(--color-caution); }
.gate-card[data-s="caution"] h4 { color: var(--color-caution); }
.gate-card[data-s="none"] { --g: var(--color-text-2); }
.gate-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }
.gate-actions button { min-height: 40px; font-size: var(--text-xs); }
.gate-actions .btn { padding: 0 var(--space-ml); }

/* Limb map */
.horse-map { width: 100%; height: auto; color: var(--color-text); display: block; }
.hl { fill: transparent; pointer-events: none; transition: fill var(--duration-micro) var(--ease-snap); }
.hl.on { fill: color-mix(in srgb, var(--color-action) 16%, transparent); }
.hit { fill: transparent; stroke: transparent; cursor: pointer; }
.hit:focus-visible { outline: none; stroke: var(--color-action); stroke-width: 6; stroke-dasharray: 16 16; }
.camel-art { width: 100%; height: auto; color: var(--color-text); display: block; }

/* Attachments */
.attach { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.attach button {
  min-height: 64px; border: 1px dashed var(--color-track); border-radius: var(--radius-control); background: transparent; cursor: pointer;
  font-size: var(--text-xs); font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.attach button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.attach button.added { border-style: solid; border-color: var(--color-action); color: var(--color-action); background: color-mix(in srgb, var(--color-action) 6%, transparent); }
.sync { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--color-text-2); }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-caution); }
.sync.on i { background: var(--color-action); }

/* Chart */
.hist { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 18px; position: relative; }
.hist .b { flex: 1; background: color-mix(in srgb, var(--color-data) 70%, transparent); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; transition: height var(--duration-macro) var(--ease-out); }
.hist .b.hot { background: var(--color-data); }
.hist-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-2); margin-top: 6px; }
.median-line { position: absolute; top: 0; bottom: 0; width: 0; border-inline-start: 2px dashed var(--color-seal); }
.median-line span { position: absolute; top: -4px; inset-inline-start: 6px; font-size: 11px; font-weight: 700; color: var(--color-seal); white-space: nowrap; }

/* Structure diagram */
.struct { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.struct-box { border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-md); background: var(--color-raised); font-size: var(--text-xs); line-height: 1.5; }
.struct-box h4 { margin: 0 0 4px; font-size: 1rem; }
.struct-box ul { margin: 6px 0 0; padding-inline-start: 1.1em; color: var(--color-text-2); }
.struct-box.us { border-color: var(--color-action); box-shadow: inset 0 0 0 1px var(--color-action); }
.wall { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); font-weight: 700; color: var(--color-text-2); }
.wall::before, .wall::after { content: ""; flex: 1; border-top: 2px dashed var(--color-track); }

/* Roadmap */
.road { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.road-col { border-top: 3px solid var(--color-track); padding-top: var(--space-sm); font-size: var(--text-xs); line-height: 1.5; }
.road-col.now { border-top-color: var(--color-action); }
.road-col h4 { margin: 0 0 4px; font-size: 1rem; }
.road-col ul { margin: 0; padding-inline-start: 1.1em; color: var(--color-text-2); }
.asks { counter-reset: a; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.asks li { counter-increment: a; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 0.95rem; line-height: 1.45; }
.asks li::before { content: counter(a); width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-action); color: var(--color-action); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.asks li span { color: var(--color-text-2); display: block; font-size: var(--text-xs); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Shared layout pieces */
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; margin: 0; }
.wordmark span { font-family: var(--font-text); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; color: var(--color-text-2); margin-inline-start: 6px; }
.title-art { display: flex; align-items: flex-end; gap: 4%; color: var(--color-text); }
.title-art svg { height: auto; --emb: 120; }
.title-art svg:first-child { width: 46%; }
.title-art svg:last-child { width: 48%; }
.horse-flip { transform: scaleX(-1); }
.problems { display: grid; gap: var(--space-md); }
.problem { border-inline-start: 3px solid var(--color-action); padding: 2px 0 2px var(--space-md); }
.problem b { display: block; font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 4px; }
.problem p { margin: 0; color: var(--color-text-2); }
.need-out { border-top: 1px solid var(--color-border); padding-top: 10px; }
.need-out .block-title { margin-bottom: 2px; }
.sheet { background: var(--color-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sheet); }
.sheet-pad { padding: var(--space-ml); }
.gate-tool { display: flex; flex-direction: column; gap: var(--space-md); }
.site-line { font-weight: 700; font-size: 0.95rem; margin: 4px 0 0; }
.proto-grid { display: grid; grid-template-columns: 1.35fr 1fr; }
.proto-main { padding: var(--space-ml); display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.proto-side { padding: var(--space-ml); border-inline-start: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-sm); }
.proto-head { display: flex; flex-direction: column; gap: 4px; }
.proto-title { font-size: 2rem; }
.proof { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-xl); }
.contrib-list .row { grid-template-columns: 0 1fr auto; }
.phones { display: flex; gap: var(--space-lg); justify-content: center; align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: var(--space-ml); }
.app-phone .needs { grid-template-columns: repeat(3, 1fr); }
.app-phone .need:nth-child(n+4) { grid-column: span 1; }
.app-phone .phases { grid-template-columns: 1fr; }
.app-phone .phase + .phase { border-inline-start: 0; border-top: 1px solid var(--color-border); }
.app-phone .rules li { grid-template-columns: 1fr; gap: 2px; }

/* Case form */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.fields.one { grid-template-columns: 1fr; }
.field { border: 1px solid var(--color-border); border-radius: var(--radius-secondary); padding: 8px 12px; background: var(--color-raised); display: flex; flex-direction: column; line-height: 1.3; }
.field span { font-size: 11px; font-weight: 600; color: var(--color-text-2); }
.field b { font-size: 0.95rem; }
.field small { font-size: 11px; color: var(--color-text-2); }
.seg.legs { margin-top: var(--space-sm); }
.seg.legs button { font-size: var(--text-xs); }
.case-head { border-top: 0; padding-top: 0; }
.gate-wrap { padding: var(--space-ml); display: flex; flex-direction: column; gap: var(--space-md); }

/* Scan series */
.us-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.app-phone .us-strip, .visual .us-strip { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.us { margin: 0; }
.us svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.us figcaption { font-size: 11px; color: var(--color-text-2); margin-top: 3px; line-height: 1.3; }
.us figcaption b { color: var(--color-text); display: block; }
.rule-line { border-top: 1px solid var(--color-border); padding-top: var(--space-sm); margin-top: auto; }
.bar-key { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--color-text-2); margin: 6px 0 0; }
.bar-key span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bar-key span + * { margin-inline-end: 8px; }
.bar-key .k-out { background: var(--color-data); }
.bar-key .k-fol { background: color-mix(in srgb, var(--color-data) 42%, transparent); margin-inline-start: 10px; }
.hist .b i { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; font-style: normal; color: var(--color-text-2); }
.hist-cap { font-size: 11px; color: var(--color-text-2); margin: 4px 0 0; }
.membership { border-top: 1px solid var(--color-border); padding-top: var(--space-md); font-size: var(--text-xs); line-height: 1.55; }
.membership b { font-size: 1rem; display: block; }
.membership p { margin: 2px 0 0; color: var(--color-text-2); max-width: 60ch; }
.title-ar { text-align: left; font-family: var(--font-display-ar); font-size: 1.6rem; line-height: 1.5; margin: calc(var(--space-sm) * -1) 0 0; color: var(--color-text-2); }

/* Panel round 2: trainer, rider, groom, owner */
.seg button:disabled { color: var(--color-text-2); opacity: 0.4; cursor: not-allowed; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cleared, .round { font-size: 11px; color: var(--color-text-2); margin: 0; }
.round { text-align: center; font-weight: 700; color: var(--color-action); }
.target { font-size: var(--text-xs); font-weight: 700; color: var(--color-action); margin: 0; }
.alert-box { border: 1px solid color-mix(in srgb, var(--color-ban) 40%, transparent); background: color-mix(in srgb, var(--color-ban) 7%, var(--color-raised)); border-radius: var(--radius-secondary); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.alert-box p { margin: 0; font-size: var(--text-xs); font-weight: 700; color: var(--color-ban); line-height: 1.45; }
.alert-box .btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; }
.alert-box svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.limit { border-radius: var(--radius-secondary); background: color-mix(in srgb, var(--color-action) 9%, var(--color-raised)); border: 1px solid color-mix(in srgb, var(--color-action) 30%, transparent); padding: 10px 12px; display: flex; flex-direction: column; line-height: 1.3; }
.limit span { font-size: 11px; font-weight: 700; color: var(--color-action); }
.limit b { font-size: 1.05rem; }
.limit small { font-size: 11px; color: var(--color-text-2); }
.btn-alarm { min-height: var(--target); border-radius: var(--radius-control); border: 1.5px solid var(--color-ban); color: var(--color-ban); background: var(--color-raised); font-weight: 700; cursor: pointer; }
.btn-alarm[aria-pressed="true"] { background: var(--color-ban); color: var(--color-on-action); }
.pair { display: flex; gap: var(--space-lg); align-items: flex-start; width: 100%; max-width: 960px; }
.pair > .browser { flex: 1; min-width: 0; }
.pair > .phone { width: 300px; }
.yard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); padding: var(--space-ml) var(--space-ml) var(--space-sm); }
.yard-top .btn-secondary { white-space: nowrap; }
.yard { padding: 0 var(--space-ml) var(--space-ml); }
.yrow { display: grid; grid-template-columns: 1.25fr 92px 1fr 1.1fr; gap: var(--space-md); align-items: start; padding: 10px 0; border-top: 1px solid var(--color-border); font-size: var(--text-xs); line-height: 1.4; }
.yrow.head { font-size: 11px; font-weight: 700; color: var(--color-text-2); padding-bottom: 2px; }
.yrow b { display: block; font-size: 0.9rem; }
.yrow .meta { color: var(--color-text-2); }
.ladder { display: flex; gap: 3px; margin-top: 6px; }
.ladder i { flex: 1; height: 6px; border-radius: 3px; background: var(--color-track); }
.ladder i.done { background: color-mix(in srgb, var(--color-action) 45%, transparent); }
.ladder i.on { background: var(--color-action); }
.ladder-l { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--color-action); }
.y-last.alert { color: var(--color-ban); font-weight: 700; }
.y-last.miss { color: var(--color-caution); font-weight: 700; }
.y-plan small { display: block; margin-top: 4px; font-size: 11px; color: var(--color-text-2); }
.us-strip.two { grid-template-columns: 1fr 1fr !important; }
.access { display: flex; flex-direction: column; }
.arow { display: grid; grid-template-columns: 100px 1.4fr 1fr; gap: var(--space-md); padding: 11px 0; border-top: 1px solid var(--color-border); font-size: 0.95rem; line-height: 1.45; }
.arow.head { border-top: 0; font-size: 11px; font-weight: 700; color: var(--color-text-2); padding-top: 0; }
.arow .never { color: var(--color-text-2); }
.access-note { margin-top: var(--space-md); max-width: 70ch; }