/* Shanyrak v8 — tokens + components. Plain CSS, no build step. Light theme only.
   Load: css/fonts.css → css/shanyrak.css. Mobile-first; desktop at ≥960px. */

:root{
  /* v10 «Ақ үй» (design_handoff_shanyrak_v10, tokens-akui.css). Old token NAMES are kept so every page keeps
     working; their VALUES are the v10 palette. forest = the neutral dark cloth now (nav, save, links); the only
     colour action is --clay = v10 accent, reserved for record / the human voice. */
  /* surfaces */
  --paper:#F7F3EC;      /* app background */
  --page:#FFFDF9;       /* cards, sheets, inputs, reading page */
  --sand:#F1EBE0;       /* felt: soft fills, active nav, segmented track */
  --sand-2:#F1EBE0;     /* card header strips */
  --linen:#ECE6DB;      /* reading desk, print preview stage */
  --cover:#2B2823;      /* cloth: dark covers, person hero, splash */
  --cover-2:#3A3532;    /* raised surface on cloth */
  --cover-3:#1E1B17;
  /* ink */
  --ink:#23201C;        /* 14.7:1 on paper */
  --ink-2:#3A342D;      /* body */
  --ink-3:#5F574D;      /* muted 6.4:1 */
  --ink-4:#6E655A;      /* numerals, chevrons */
  --on-dark:#F6EBD3; --on-dark-2:#E6D9C0; --on-dark-3:#D9BD80;
  /* roles */
  --clay:#A6322A;       /* ONLY record / the human voice. on-accent #FFF8F3 6.8:1 */
  --clay-deep:#8E2E26;  /* accent text on light, pressed */
  --clay-soft:#F8ECE8;
  --clay-light:#A6322A; /* v10: record stays the same red on cloth too */
  --forest:#2B2823;     /* v10: neutral cloth — navigation, save/confirm, links */
  --forest-2:#3A3532; --forest-soft:#F1EBE0;
  --ochre:#8A6424;      /* heritage: roman numerals, kickers, tab underline */
  --ochre-ink:#7A5418;  /* small gold-brown text */
  --ochre-soft:#F4EBDA;
  --gold:#C9A45C;       /* thin lines, ring 40/40 */
  --gold-2:#E3C27A;     /* gold text on cloth */
  --error:#8E2E26; --error-soft:#F8ECE8;
  /* chapter colours — ring segments, numerals, TOC bars */
  --ch1:#B8923A; --ch2:#B9634A; --ch3:#6B8460; --ch4:#5C7A94; --ch5:#8D6E4A;
  /* review r1: text-safe chapter inks (numerals, chapter heads: ≥ 4.5:1 on --page and --sand); the bright --chN
     stay for ring segments and bars */
  --ch1-t:#7F6019; --ch2-t:#9A4B34; --ch3-t:#55704B; --ch4-t:#4A6680; --ch5-t:#735636;
  --ch1-d:#E3C27A; --ch2-d:#DA946A; --ch3-d:#A9BE92; --ch4-d:#9AB3CC; --ch5-d:#CDB07A;
  /* cover cloths (library + print) */
  --cv-night:#2B2823; --cv-madder:#5A2E2A; --cv-steppe:#3E4A3D; --cv-sky:#2F3645; --cv-ochre:#6B5A3E; --cv-plum:#4A3A45;
  --cloth-tex:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px);
  --photo-grade:grayscale(1) contrast(1.06) sepia(.12);
  /* lines */
  --line:#E2DBD0; --line-2:#D8D0C4; --line-btn:#CFC6B8;
  /* type */
  --serif:'Literata',Georgia,serif;
  --sans:'PT Sans',-apple-system,'Segoe UI',sans-serif;
  --fs-display:40px; --fs-h1:34px; --fs-h2:26px; --fs-h3:22px; --fs-q:28px;
  --fs-lead:19px; --fs-body:17px; --fs-ui:16px; --fs-cap:15px; --fs-micro:13px;
  /* space (4-based) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --gutter:20px;
  /* review r1: ONE page frame for every app page — side padding (content starts at sidebar + this), column max */
  --page-x:clamp(20px,4vw,56px); --page-max:1240px;
  /* radii */
  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-cover:3px 8px 8px 3px; --r-pill:999px;
  /* shadows */
  --sh-card:0 1px 2px rgba(60,40,20,.06),0 16px 34px -22px rgba(60,40,20,.35);
  --sh-lift:0 1px 2px rgba(60,40,20,.2);
  --sh-book:0 16px 24px -16px rgba(30,20,10,.75);
  --sh-sheet:0 24px 64px rgba(35,32,28,.35);
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-in:cubic-bezier(.5,0,.75,0);
  --t-fast:.15s; --t-base:.25s; --t-slow:.55s; --t-fill:.7s;
  /* sizes */
  --tap:48px; --btn:56px; --btn-lg:64px; --appbar:64px; --tabbar:80px; --side:264px;
}
@media (min-width:960px){
  :root{ --fs-display:60px; --fs-h1:48px; --fs-h2:30px; --fs-h3:24px; --fs-q:38px; --gutter:40px; --appbar:76px }
}

/* ── Base ── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-ui)/1.5 var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100vh;min-height:100dvh}
img,svg{display:block;max-width:100%}
a{color:var(--forest);text-underline-offset:3px} a:hover{color:var(--forest-2)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:24px;height:24px;flex:none}
.ico-sm{width:20px;height:20px;flex:none}
[hidden]{display:none!important}
/* state variants for the prototype: [data-state="new"] shows only with ?state=new */
[data-state]:not(.is-state){display:none!important}

/* ── Type ── */
.display{font:500 var(--fs-display)/1.06 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.h1{font:500 var(--fs-h1)/1.1 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.h2{font:500 var(--fs-h2)/1.2 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.h3{font:500 var(--fs-h3)/1.25 var(--serif);text-wrap:balance}
.question{font:500 var(--fs-q)/1.22 var(--serif);letter-spacing:-.01em;text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.body{font-size:var(--fs-body);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.cap{font-size:var(--fs-cap);color:var(--ink-3)}
.micro{font-size:var(--fs-micro);color:var(--ink-3);letter-spacing:.02em}
.said{font-family:var(--serif);font-style:italic}           /* anything spoken aloud */
.kicker{font:italic 17px/1.3 var(--serif);color:var(--ochre-ink)}
.numeral{font-family:var(--serif);font-feature-settings:"onum" 0,"lnum" 1}
.roman{font:400 20px/1 var(--serif);color:var(--ochre);white-space:nowrap}
.tabnum{font-variant-numeric:tabular-nums}

/* ── Layout ── */
.wrap{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-x)}
.wrap-narrow{width:100%;max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,12px)}
.spread{display:flex;align-items:center;justify-content:space-between;gap:16px}
.page-head{padding:28px 0 20px;display:flex;flex-direction:column;gap:8px}
.section{margin-top:40px}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:14px}
.sec-h .link{font-weight:700;font-size:var(--fs-ui);text-decoration:none;min-height:var(--tap);display:inline-flex;align-items:center}
.cols{display:grid;gap:28px}
@media (min-width:960px){
  .page-head{padding:48px 0 28px}
  .cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
  .cols--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cols--toc{grid-template-columns:320px minmax(0,1fr)}
  .sticky{position:sticky;top:calc(var(--appbar) + 24px)}
}

/* ── Buttons — exactly ONE .btn--record per screen ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn);padding:0 22px;border-radius:var(--r-md);border:1.5px solid var(--line-btn);background:var(--page);color:var(--ink);font-weight:700;font-size:17px;line-height:1.2;text-decoration:none;text-align:center;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn:hover{border-color:rgba(36,27,18,.4);color:var(--ink)}
.btn:active{transform:scale(.98)}
.btn--block{display:flex;width:100%}
.btn--lg{min-height:var(--btn-lg);font-size:19px;border-radius:18px;padding:0 26px}
.btn--record{border:0;background:var(--clay);color:var(--page);box-shadow:0 10px 24px -12px rgba(168,68,46,.85)}
.btn--record::before{content:"";width:14px;height:14px;border-radius:50%;background:currentColor;flex:none}
.btn--record:hover{background:var(--clay-deep);color:var(--page)}
.on-dark .btn--record{background:var(--clay-light);color:var(--cover-3)}
.btn--voice{border-color:rgba(168,68,46,.55);color:var(--clay-deep)}       /* secondary voice action, e.g. «Ответить» */
.btn--voice::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--clay);flex:none}
.btn--nav{border:0;background:var(--forest);color:var(--page)}
.btn--nav:hover{background:var(--forest-2);color:var(--page)}
.btn--dark{border:0;background:var(--ink);color:var(--page)}
.btn--dark:hover{background:#3A2E22;color:var(--page)}
.btn--ghost-dark{background:transparent;border-color:rgba(244,236,223,.35);color:var(--on-dark)}
.btn--ghost-dark:hover{border-color:rgba(244,236,223,.7);color:var(--on-dark)}
.btn--quiet{border:0;background:none;color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(62,51,39,.35);text-underline-offset:5px;padding:0 12px;min-height:var(--tap);font-weight:700}
.btn--quiet:hover{color:var(--ink)}
.on-dark .btn--quiet{color:var(--on-dark-2);text-decoration-color:rgba(232,220,198,.4)}
.btn--icon{width:var(--tap);height:var(--tap);min-height:0;padding:0;border:0;background:none;border-radius:14px;color:var(--ink-2)}
.btn--icon:hover{background:rgba(36,27,18,.06)}
.btn--round{width:var(--tap);height:var(--tap);min-height:0;padding:0;border-radius:50%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ── App chrome ── */
.appbar{position:sticky;top:0;z-index:10;background:rgba(248,242,230,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.appbar-in{height:var(--appbar);display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:500 22px/1 var(--serif);min-height:var(--tap)}
.brand img{width:34px;height:34px}
.nav{display:none}
.appbar-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.avatar-btn{width:var(--tap);height:var(--tap);border-radius:50%;border:0;background:none;padding:0;display:grid;place-items:center}
.nav-create{display:none}
@media (min-width:960px){
  .nav{display:flex;gap:4px;margin-left:28px}
  .nav a{height:48px;padding:0 18px;border-radius:12px;font-size:17px;font-weight:700;color:var(--ink-3);display:inline-flex;align-items:center;text-decoration:none}
  .nav a:hover{color:var(--ink);background:rgba(36,27,18,.05)}
  .nav a[aria-current="page"]{background:var(--sand);color:var(--ink)}
  .nav-create{display:inline-flex}
  .brand{font-size:24px}
}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:6px 4px calc(8px + env(safe-area-inset-bottom));background:var(--page);border-top:1px solid rgba(36,27,18,.12);box-shadow:0 -10px 28px -18px rgba(36,27,18,.35)}
.tab{height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:700;color:var(--ink-3);text-decoration:none;border-radius:14px}
.tab[aria-current="page"]{color:var(--forest)}
.tab[aria-current="page"] .ico{stroke-width:2.4}
.tab-create{width:56px;height:56px;border-radius:18px;background:var(--ink);color:var(--page);justify-self:center;border:0;display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(36,27,18,.6)}
body.has-tabbar{padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px)}
/* v10: the tab bar hides only where the sidebar takes over (≥1000 px, see the v10 block) */
.backbar{display:flex;align-items:center;gap:4px;min-height:var(--appbar)}
.backbar a,.backbar button{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 10px 0 4px;border:0;background:none;font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;border-radius:12px}

/* installed (standalone) look: no browser chrome, so the app draws its own safe areas */
.is-standalone .appbar{background:var(--paper)}
.splash{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;color:var(--ink);transition:opacity .45s var(--ease),visibility .45s}
.splash.is-out{opacity:0;visibility:hidden}
.splash-word{font:500 30px/1 var(--serif);letter-spacing:.01em}
.splash-sub{font:italic 17px var(--serif);color:var(--ink-3)}

/* ── Crown ring (js/ring.js draws the SVG) ── */
.ring{position:relative;display:inline-block;line-height:0;flex:none}
.ring-svg{display:block;overflow:visible}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:2px}
.ring-num{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;color:var(--forest)}
.ring-of{color:var(--ink-3)}
.ring--dark .ring-num{color:var(--on-dark)} .ring--dark .ring-of{color:var(--on-dark-3)}
.ring-face{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sand) center/cover;font-family:var(--serif);color:#6B4A1E}
.ring--dark .ring-face{background-color:var(--cover-2);color:var(--ch5-d)}
.ring-seg{transition:stroke var(--t-fill) var(--ease)}
.ring-seg.is-new{animation:segIn 1.1s var(--ease) .3s both}
.ring-tumar{animation:tumarIn .7s var(--ease) both}
@keyframes segIn{0%{opacity:0;stroke-width:0}60%{opacity:1}100%{opacity:1}}
.uyk{position:relative;isolation:isolate}
.uyk::before{content:"";position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);background:url(../svg/uyk-rays.svg) center/contain no-repeat;opacity:.2;z-index:-1;pointer-events:none}
.on-dark .uyk::before{filter:brightness(2.2);opacity:.09}

/* ── Surfaces ── */
.card{background:var(--page);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-pad{padding:20px}
.sheet-card{background:var(--page);border-radius:var(--r-xl);box-shadow:var(--sh-card);overflow:hidden}
.on-dark{background:var(--cover);color:var(--on-dark)}
.on-dark .cap,.on-dark .body,.on-dark .lead{color:var(--on-dark-2)}
.on-dark a{color:var(--on-dark);text-decoration-color:rgba(244,236,223,.4)}
.tint-clay{background:var(--clay-soft);border:1.5px solid rgba(168,68,46,.28)}
.tint-forest{background:var(--forest-soft);border:1px solid rgba(44,85,69,.18)}
.tint-ochre{background:var(--ochre-soft);border:1px solid rgba(156,107,31,.22)}
.row{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 16px;border-bottom:1px solid rgba(36,27,18,.08);text-decoration:none;color:inherit}
.row:last-child{border-bottom:0}
a.row:hover{background:rgba(36,27,18,.025)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-title{font:500 19px/1.3 var(--serif);color:var(--ink);text-wrap:pretty}
.row .chev{color:var(--ink-4);flex:none}
.kerege{height:16px;background:url(../svg/kerege-band.svg) left center/32px 16px repeat-x;opacity:.55;border:0;margin:0}
.divider{width:200px;height:34px;margin:0 auto;background:url(../svg/divider.svg) center/contain no-repeat}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 12px;border-radius:var(--r-pill);font-size:14px;font-weight:700;background:var(--sand);color:var(--ink-2)}
.pill--forest{background:var(--forest-soft);color:var(--forest)}
.pill--clay{background:var(--clay-soft);color:var(--clay-deep)}
.pill--ochre{background:var(--ochre-soft);color:var(--ochre-ink)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font:500 17px/1 var(--serif);color:#6B4A1E;flex:none}
.avatar--forest{background:var(--forest-soft);color:var(--forest)}

/* ── Today: whose book strip ── */
.who-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 10px;margin:0 calc(var(--gutter) * -1);scrollbar-width:none}
.who-strip::-webkit-scrollbar{display:none}
.who{flex:none;width:104px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:18px;border:1.5px solid transparent;background:none;text-decoration:none;color:var(--ink)}
.who[aria-pressed="true"]{background:var(--page);border-color:var(--ink);box-shadow:var(--sh-lift)}
.who-name{font-weight:700;font-size:16px;line-height:1.2;text-align:center}
.who-count{font-size:15px;color:var(--ink-3)}
.who-flag{font-size:13px;font-weight:700;color:var(--clay-deep)}
.who--add .ring-add{width:64px;height:64px;border-radius:50%;border:1.5px dashed var(--line-btn);display:grid;place-items:center;color:var(--forest)}

/* ── Today: next-step hero ── */
.next{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--page);box-shadow:var(--sh-card)}
.next-top{display:flex;gap:18px;align-items:center;padding:20px;background:var(--sand-2);border-bottom:1px solid var(--line)}
.next-body{padding:22px 20px 24px;display:flex;flex-direction:column;gap:14px}
.next-ask{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-3)}
.next-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
@media (min-width:600px){.next-actions{flex-direction:row;flex-wrap:wrap}.next-actions>.btn{flex:1 1 240px}}
@media (min-width:960px){.next-top{padding:24px 28px}.next-body{padding:28px}}

/* ── «Новое в семье» ── */
.news{display:flex;flex-direction:column}
.news-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.news-item:last-child{border-bottom:0}
.news-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--ink-2)}
.news-ico--voice{background:var(--clay-soft);color:var(--clay)}
.news-ico--done{background:var(--ochre-soft);color:var(--ochre)}
.news-ico--heart{background:var(--forest-soft);color:var(--forest)}
.news-item>span:last-child{display:flex;flex-direction:column;min-width:0}
.news-text{display:block;font-size:17px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.news-text b{color:var(--ink)}
.news-quote{display:block;font:italic 17px/1.45 var(--serif);color:var(--ink);margin-top:4px}
.news-when{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}

/* ── Milestone / birthday ── */
.milestone{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--r-lg)}
.milestone-ico{width:52px;height:52px;border-radius:50%;background:var(--page);display:grid;place-items:center;color:var(--ochre);flex:none;border:1px solid rgba(156,107,31,.25)}

/* ── Questions from relatives ── */
.ask-card{padding:20px;display:flex;flex-direction:column;gap:12px}
.ask-from{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--ink-2)}
.ask-q{font:500 22px/1.3 var(--serif);text-wrap:pretty}

/* ── Install prompt ── */
.install{display:flex;gap:14px;align-items:center;padding:14px 14px 14px 16px;border-radius:var(--r-lg);background:var(--page);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-card)}
.install img{width:52px;height:52px;border-radius:13px;flex:none}
.install-t{font-weight:700;font-size:17px}
.install-s{font-size:15px;color:var(--ink-3)}
.install .btn:not(.btn--icon){min-height:48px;padding:0 16px;background:var(--forest);color:var(--page);border:0;font-size:16px}
.ios-steps{display:flex;flex-direction:column;gap:14px;margin:18px 0 22px;padding:0;list-style:none;counter-reset:s}
.ios-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;font-size:18px;counter-increment:s}
.ios-steps li::before{content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font:500 18px var(--serif)}
.ios-glyph{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--page);border:1px solid var(--line-2);vertical-align:middle;margin:0 2px;color:#2F6BD8}

/* ── Book cover ── */
.book{position:relative;width:var(--w,168px);aspect-ratio:1/1.36;display:block;text-decoration:none;flex:none;container-type:inline-size}
.book::before{content:"";position:absolute;left:6px;right:-3px;top:4px;bottom:-3px;border-radius:3px 8px 8px 3px;background:#EDE3CF;box-shadow:inset -1px 0 0 #D8CBB2,var(--sh-book)}
.book-cover{position:absolute;inset:0;border-radius:var(--r-cover);overflow:hidden;background:var(--cv,var(--cv-night));box-shadow:inset 0 1px 0 rgba(255,236,200,.22),inset 0 -1px 0 rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10% 8% 10% 15%;text-align:center;color:var(--on-dark)}
.book-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7%;background:rgba(0,0,0,.28);box-shadow:inset -1px 0 0 rgba(255,236,200,.1)}
.book-cover::after{content:"";position:absolute;left:11%;right:4%;top:4%;bottom:4%;border:1px solid rgba(227,176,75,.55);border-radius:2px;pointer-events:none}
.book-kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#D8C29A;position:relative}
.book-name{font:500 max(11px,10.5cqw)/1.15 var(--serif);text-wrap:balance;position:relative}
.book--empty::before{display:none}
.book--empty .book-cover{background:rgba(255,252,245,.7);border:1.5px dashed rgba(36,27,18,.26);color:var(--ink-2);justify-content:flex-start;align-items:flex-start;text-align:left;padding:12%}
.book--empty .book-cover::before,.book--empty .book-cover::after{display:none}
.book:hover .book-cover{transform:translateY(-2px)}
.book-cover{transition:transform var(--t-base) var(--ease)}
.shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
.shelf-item{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.shelf-item .book{--w:100%;width:100%}
.shelf-meta{display:flex;justify-content:space-between;font-size:16px;color:var(--ink-3)}
.shelf-meta b{color:var(--ink)}
@media (min-width:700px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.shelf{grid-template-columns:repeat(5,minmax(0,1fr));gap:44px 32px}}

/* ── Person hero ── */
.hero{background:var(--sand-2);color:var(--ink);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 30% 0%,rgba(156,107,31,.10),transparent 60%);pointer-events:none}
.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:32px 0 28px}
.hero-name{font:500 var(--fs-h1)/1.08 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.hero-meta{font-size:17px;color:var(--ink-2);text-wrap:balance}
.hero-rel{font-size:16px;color:var(--ink-2)}
.hero-count{display:flex;align-items:baseline;gap:10px;justify-content:center}
.hero-count b{font:500 56px/1 var(--serif)}
.hero-count span{font:400 26px var(--serif);color:var(--ink-3)}
.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:440px}
.hero-actions .btn--record{grid-column:1/-1}
@media (min-width:960px){
  .hero-in{display:grid;grid-template-columns:auto minmax(0,1fr) 340px;align-items:center;text-align:left;gap:48px;padding:48px 0}
  .hero-count{justify-content:flex-start}
}

/* ── Tabs (underline) ── */
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line)}
.tabs button,.tabs a{min-height:var(--tap);padding:0 14px;border:0;background:none;font-weight:700;font-size:17px;color:var(--ink-3);border-bottom:3px solid transparent;margin-bottom:-1px;text-decoration:none;display:inline-flex;align-items:center}
.tabs [aria-selected="true"]{color:var(--ink);border-bottom-color:var(--forest)}

/* ── TOC + chapters ── */
.toc{padding:14px}
.toc-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:62px;padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.toc-row[aria-current="true"]{background:var(--sand)}
.toc-title{font:500 18px/1.25 var(--serif)}
.toc-bar{display:flex;gap:3px;margin-top:6px}.toc-bar i{flex:1;max-width:22px;height:5px;border-radius:2px;background:rgba(36,27,18,.1)}
.toc-bar i.on{background:var(--c)}
.chapter{background:var(--page);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.chapter-head{display:flex;align-items:center;gap:16px;min-height:84px;padding:18px 20px;border-bottom:1px solid var(--line)}
.chapter-num{font:400 40px/1 var(--serif);min-width:44px}
.q{display:grid;grid-template-columns:30px minmax(0,1fr) var(--tap);gap:12px;padding:18px 12px 18px 20px;border-bottom:1px solid rgba(36,27,18,.08);text-decoration:none;color:inherit}
.q:last-child{border-bottom:0}
.q-num{font:16px var(--serif);color:var(--ink-4);padding-top:4px}
.q-text{font:500 19px/1.3 var(--serif);text-wrap:pretty;color:var(--ink)}
.q-excerpt{font:italic 16px/1.5 var(--serif);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px}
.q-media{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--forest);margin-top:8px}
.q--empty .q-text{color:var(--ink-3);font-weight:400}
.q-next{margin:14px;padding:20px;border-radius:18px;display:flex;flex-direction:column;gap:14px}
.q-next .q-text{font-size:23px}

/* ── Player ── */
.player{display:flex;align-items:center;gap:14px;padding:8px 18px 8px 8px;border-radius:var(--r-pill);border:1.5px solid rgba(44,85,69,.3);background:var(--page);min-height:64px;width:100%;max-width:440px}
.player-btn{width:48px;height:48px;border-radius:50%;border:0;background:var(--forest);color:var(--page);display:grid;place-items:center;flex:none}
.player-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.player-label{font-weight:700;color:var(--forest);font-size:16px;display:flex;justify-content:space-between;gap:8px}
.player-track{height:6px;border-radius:3px;background:var(--forest-soft);overflow:hidden}
.player-fill{height:100%;width:0;background:var(--forest);border-radius:3px}
.player--dark{background:rgba(255,252,245,.06);border-color:rgba(244,236,223,.25)}
.player--dark .player-btn{background:var(--on-dark);color:var(--cover)}
.player--dark .player-label{color:var(--on-dark)} .player--dark .player-track{background:rgba(244,236,223,.15)} .player--dark .player-fill{background:var(--gold)}
.player--xl{min-height:88px;border-radius:26px;padding:10px 22px 10px 10px}
.player--xl .player-btn{width:68px;height:68px}
.player--xl .player-label{font-size:20px}

/* ── Recorder ── */
.stage{min-height:100dvh;display:flex;flex-direction:column}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--appbar);padding-top:env(safe-area-inset-top)}
.stage-body{flex:1;display:flex;flex-direction:column;gap:22px;padding:8px 0 28px}
.stage-foot{padding:0 0 calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:14px}
.rec-btn{width:96px;height:96px;border-radius:50%;border:6px solid rgba(168,68,46,.18);background:var(--clay);color:var(--page);display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(168,68,46,.7)}
.rec-btn::before{content:"";width:34px;height:34px;border-radius:50%;background:var(--page)}
.rec-btn.is-live{animation:recPulse 1.6s ease-out infinite}
.rec-btn.is-live::before{width:30px;height:30px;border-radius:7px}
.rec-label{font-weight:700;font-size:18px;color:var(--ink)}
.rec-timer{font:500 44px/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--ink)}
.cam{position:relative;border-radius:22px;overflow:hidden;background:var(--sand);aspect-ratio:3/4;width:100%;max-height:44vh;display:grid;place-items:center;color:var(--ink-3)}
.cam-live{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(30,23,15,.72);color:var(--on-dark);font-weight:700;font-size:14px}
.cam-live .dot{color:var(--clay-light);animation:blink 1.2s steps(2) infinite}
.wave{display:flex;align-items:center;justify-content:center;gap:5px;height:72px}
.wave i{width:6px;height:100%;border-radius:3px;background:var(--clay);transform:scaleY(.2);transform-origin:center}
.is-live .wave i,.wave.is-live i{animation:wave 1s ease-in-out infinite}
.wave i:nth-child(3n){animation-delay:-.3s}.wave i:nth-child(3n+1){animation-delay:-.6s}.wave i:nth-child(4n){animation-delay:-.15s}
.local-save{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-3)}
.local-save .ico-sm{color:var(--forest)}
.q-voice{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 16px 0 6px;border-radius:999px;border:1.5px solid rgba(44,85,69,.3);background:var(--page);color:var(--forest);font-weight:700}
.q-voice .b{width:36px;height:36px;border-radius:50%;background:var(--forest);color:var(--page);display:grid;place-items:center}

/* ── Reading ── */
.desk{background:var(--linen);min-height:100dvh}
.readbar{position:sticky;top:0;z-index:5;background:rgba(237,227,207,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.readbar-in{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--appbar)}
.leaf{background:var(--page);max-width:1180px;margin:0 auto;min-height:calc(100dvh - var(--appbar))}
.leaf-in{padding:32px 24px 40px;max-width:640px;margin:0 auto}
.prose{font:var(--prose-size,19px)/1.72 var(--serif);color:var(--ink);text-wrap:pretty}
.prose p{margin:0 0 .9em}.prose p+p{text-indent:1.4em}
.prose p:first-child::first-letter{float:left;font-size:4.1em;line-height:.82;padding:.06em .1em 0 0;color:var(--clay);font-weight:500}
.listened{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faces{display:flex}.faces .avatar{width:36px;height:36px;font-size:14px;border:2px solid var(--page);margin-left:-8px}.faces .avatar:first-child{margin-left:0}
@media (min-width:960px){
  .leaf{display:grid;grid-template-columns:1fr 1fr;margin:40px auto;border-radius:6px;box-shadow:0 30px 60px -30px rgba(36,27,18,.45);min-height:0}
  .leaf-left{border-right:1px solid var(--line);background:linear-gradient(to left,rgba(36,27,18,.05),transparent 40px),var(--page);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:56px;text-align:center}
  .leaf-in{padding:64px 64px 48px}
}

/* ── Sheet / dialog / toast ── */
.sheet-backdrop{position:fixed;inset:0;z-index:40;background:rgba(36,27,18,.5);display:flex;align-items:flex-end;justify-content:center;animation:fade var(--t-fast) ease-out}
.sheet{width:100%;max-height:92dvh;overflow:auto;background:var(--page);border-radius:24px 24px 0 0;padding:8px 24px calc(28px + env(safe-area-inset-bottom));box-shadow:var(--sh-sheet);animation:up var(--t-base) var(--ease)}
.sheet-grab{width:44px;height:5px;border-radius:3px;background:rgba(36,27,18,.18);margin:6px auto 16px}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px;position:sticky;top:-8px;z-index:2;background:var(--page);padding-top:8px}
@media (min-width:960px){.sheet-backdrop{align-items:center}.sheet{max-width:540px;border-radius:24px;padding:28px 32px 32px}.sheet-grab{display:none}}
.sheet-item{display:flex;align-items:center;gap:16px;width:100%;min-height:68px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font-size:18px;color:var(--ink);text-decoration:none;padding:6px 0}
.sheet-item:last-child{border-bottom:0}
.sheet-item small{display:block;font-size:15px;color:var(--ink-3)}
.sheet-ico{width:48px;height:48px;border-radius:14px;background:var(--sand);display:grid;place-items:center;flex:none}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar) + 20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;width:calc(100% - 32px);max-width:440px;display:flex;align-items:center;gap:14px;padding:14px 14px 14px 18px;border-radius:16px;background:var(--ink);color:var(--page);box-shadow:0 16px 40px rgba(36,27,18,.35);animation:up var(--t-base) var(--ease);font-size:17px}
@media (min-width:960px){.toast{bottom:28px}}

/* ── Celebration ── */
.celebrate{position:fixed;inset:0;z-index:60;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;padding:32px var(--gutter);animation:fade .4s ease-out}

/* ── Forms ── */
.field{display:flex;flex-direction:column;gap:8px}
.label{font-weight:700;font-size:16px}
.hint{font-size:15px;color:var(--ink-3)}
.input,.select,.textarea{width:100%;min-height:56px;border-radius:var(--r-md);border:1.5px solid var(--line-2);background:var(--page);padding:0 16px;font-size:17px;color:var(--ink)}
.select{appearance:none;background:var(--page) url(../svg/icons/chevron-down.svg) right 14px center/22px no-repeat;padding-right:48px}
.textarea{padding:14px 16px;font:18px/1.6 var(--serif);min-height:120px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--forest);outline:none;box-shadow:0 0 0 3px rgba(44,85,69,.2)}
.input::placeholder,.textarea::placeholder{color:#8A7B68}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--sand);border-radius:16px;padding:4px;gap:4px}
.segmented button{min-height:48px;border:0;border-radius:12px;background:none;font-weight:700;color:var(--ink-2);padding:0 12px}
.segmented [aria-pressed="true"],.segmented [aria-selected="true"]{background:var(--page);color:var(--ink);box-shadow:0 1px 3px rgba(36,27,18,.15)}
.on-dark .segmented{background:rgba(255,252,245,.1)} .on-dark .segmented button{color:var(--on-dark-2)} .on-dark .segmented [aria-pressed="true"]{background:var(--on-dark);color:var(--cover)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--page);font-weight:700;font-size:16px;color:var(--ink-2)}
.chip[aria-pressed="true"]{border-color:var(--forest);background:var(--forest-soft);color:var(--forest)}
.switch-row{display:flex;align-items:center;gap:16px;min-height:72px;padding:12px 0;border-bottom:1px solid var(--line)}
.switch-row:last-child{border-bottom:0}
.switch{position:relative;width:56px;height:34px;flex:none;appearance:none;-webkit-appearance:none;margin:0;border-radius:999px;cursor:pointer;background:#B9AB93 radial-gradient(circle at 17px 50%,#fff 0 13px,transparent 13.5px) no-repeat 0 0;transition:background-color var(--t-fast),background-position var(--t-base) var(--ease)}
.switch:checked{background-color:var(--forest);background-position:22px 0}
.check{width:26px;height:26px;accent-color:var(--forest);flex:none;margin:0}
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:var(--error-soft);color:var(--error);font-size:16px}
.note{display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:var(--forest-soft);color:var(--forest);font-size:16px}

/* ── Promise (empty / early states) ── */
.promise{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding:36px 22px 30px;border-radius:var(--r-xl);background:var(--page);box-shadow:var(--sh-card);overflow:hidden}
.promise .h2{max-width:22ch}
.promise .body{max-width:44ch}
.promise-steps{display:grid;gap:10px;width:100%;max-width:440px;text-align:left;margin:6px 0}
.promise-step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;font-size:17px;color:var(--ink-2)}
.promise-step i{width:36px;height:36px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font:500 17px var(--serif);font-style:normal;color:var(--ink)}
.promise-step.done i{background:var(--forest);color:var(--page)}

/* ── Tree ── */
.tree-canvas{position:relative;border-radius:var(--r-xl);background:var(--page) radial-gradient(rgba(36,27,18,.09) 1px,transparent 1.2px) 0 0/22px 22px;border:1px solid var(--line);overflow:auto;height:62vh;min-height:420px;touch-action:pan-x pan-y}
.tree-inner{position:relative;transform-origin:0 0;transition:transform var(--t-base) var(--ease)}
.tree-lines{position:absolute;inset:0;overflow:visible;pointer-events:none}
.tnode{position:absolute;width:196px;min-height:76px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--page);border:1px solid var(--line-2);box-shadow:0 6px 14px -10px rgba(36,27,18,.4);text-decoration:none;color:var(--ink)}
.tnode--f{border-left:4px solid var(--ochre)} .tnode--m{border-left:4px solid var(--ink-4)}
.tnode-name{font:500 17px/1.2 var(--serif)}
.tnode-sub{font-size:14px;color:var(--ink-3);line-height:1.3}
.tnode.is-me{outline:3px solid var(--forest);outline-offset:3px}
.tnode.is-hit{box-shadow:0 0 0 4px rgba(227,176,75,.6)}
.tnode-link{position:absolute;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(156,107,31,.4);background:var(--ochre-soft);color:var(--ochre-ink);font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px;text-decoration:none}
.gen{margin-bottom:28px}
.gen-label{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.gen-label .roman{font-size:17px}

/* ── Print ── */
.stage-linen{background:var(--linen);border-radius:var(--r-xl);padding:36px 20px;display:grid;place-items:center;min-height:420px}
.print-spread{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:560px;aspect-ratio:1.45/1;background:var(--page);border-radius:4px;box-shadow:0 24px 40px -24px rgba(36,27,18,.55);overflow:hidden}
.print-spread>div{padding:9% 8%;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.print-spread>div:first-child{border-right:1px solid var(--line);background:linear-gradient(to left,rgba(36,27,18,.06),transparent 26px),var(--page)}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border-radius:14px;border:1.5px solid var(--line);background:var(--page);font-weight:700;font-size:15px;min-height:var(--tap)}
.swatch i{width:40px;height:52px;border-radius:3px 7px 7px 3px;box-shadow:inset 5px 0 0 rgba(0,0,0,.25)}
.swatch[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* ── Elder mode — bigger everything, one action per screen ── */
.elder{--fs-ui:20px;--fs-body:21px;--fs-lead:22px;--fs-cap:18px;--fs-h1:36px;--fs-q:32px;--btn:72px;--btn-lg:84px;--tap:60px;font-size:20px}
.elder .btn{font-size:21px;border-radius:20px}
.elder .btn--lg{font-size:23px}
.elder-top{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.e-screen{display:flex;flex-direction:column;gap:24px;padding:8px 0 32px;min-height:calc(100dvh - 76px)}
.e-asker{display:flex;align-items:center;gap:16px}
.e-asker .avatar{width:64px;height:64px;font-size:24px}
.e-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.e-thanks{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:20px;font-size:20px}

/* ── Landing ── */
.land-hero{padding:40px 0 48px}
.land-grid{display:grid;gap:36px;align-items:center}
@media (min-width:960px){.land-hero{padding:72px 0 88px}.land-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}}
.steps3{display:grid;gap:16px}
@media (min-width:960px){.steps3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.step3{padding:24px;display:flex;flex-direction:column;gap:12px}
.step3 .roman{font-size:28px}
.price{padding:28px;display:flex;flex-direction:column;gap:16px}
.price-num{font:500 48px/1 var(--serif);letter-spacing:-.02em}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:17px;color:var(--ink-2)}
.ticks li::before{content:"";width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--forest-soft) url(../svg/icons/check.svg) center/16px no-repeat}

/* ── Share card (public) ── */
.share-card{background:var(--page);border-radius:var(--r-xl);box-shadow:var(--sh-card);overflow:hidden;max-width:560px;margin:0 auto}
.share-photo{aspect-ratio:4/3;background:linear-gradient(160deg,#6E5A42,#3A2E22);position:relative;display:grid;place-items:center;color:var(--on-dark-2)}
.share-photo .play-big{width:76px;height:76px;border-radius:50%;background:rgba(255,252,245,.92);color:var(--cover);display:grid;place-items:center;border:0;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.share-body{padding:26px 24px 28px;display:flex;flex-direction:column;gap:16px}
.share-quote{font:italic 24px/1.45 var(--serif);color:var(--ink);text-wrap:pretty}
.og{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);max-width:340px}
.og-img{aspect-ratio:1.91/1;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between}
.og-txt{padding:10px 12px;font-size:14px;color:#3B4A54}
.wa{background:#E7DED3;border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wa-bubble{background:#D9FDD3;border-radius:12px 12px 2px 12px;padding:8px;max-width:340px;box-shadow:0 1px 1px rgba(0,0,0,.12);font-size:15px;color:#111B21;line-height:1.4}
.notif{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.85);box-shadow:0 8px 24px -10px rgba(36,27,18,.35);border:1px solid var(--line);font-size:15px;line-height:1.35}
.notif img{width:38px;height:38px;border-radius:9px}
.notif b{display:block;font-size:15px}


/* ── Two voices on one page ── */
.addendum{margin-top:24px;padding:18px 20px;border-radius:18px;background:var(--sand-2);border-left:4px solid var(--ochre);display:flex;flex-direction:column;gap:12px}
.addendum-head{display:flex;align-items:center;gap:12px}
.addendum .player{max-width:none;min-height:56px;background:var(--page)}
.addendum .player-btn{width:40px;height:40px}
.addendum .said{font-size:18px;line-height:1.6;color:var(--ink)}

/* ── Transcript editing (voice never changes) ── */
mark.unsure{background:none;color:inherit}
.is-editing .prose{outline:2px solid var(--forest);outline-offset:10px;border-radius:4px;background:var(--page);caret-color:var(--forest)}
.is-editing .prose:focus{outline-width:3px}
.is-editing mark.unsure{background:var(--ochre-soft);box-shadow:inset 0 -2px 0 var(--ochre);border-radius:2px}
.edit-bar{display:none;position:sticky;bottom:0;z-index:4;margin:24px -24px 0;padding:14px 24px calc(14px + env(safe-area-inset-bottom));background:rgba(255,252,245,.96);border-top:1px solid var(--line);flex-direction:column;gap:10px}
.is-editing .edit-bar{display:flex}
.is-editing [data-hide-editing]{display:none!important}
.history{list-style:none;margin:8px 0 0;padding:0}
.history li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.history del{color:var(--clay-deep);text-decoration-thickness:1.5px}
.history ins{color:var(--forest);text-decoration:none;font-weight:700}

/* ── Photo as a question ── */
.photo-frame{position:relative;align-self:center;width:min(100%,360px);padding:14px 14px 18px;background:#fff;border-radius:4px;box-shadow:0 1px 2px rgba(36,27,18,.1),0 22px 40px -22px rgba(36,27,18,.55);transform:rotate(-1.5deg)}
.photo-img{aspect-ratio:4/3;border-radius:2px;background:linear-gradient(160deg,#B9A78A,#7D6A52 70%,#5E4E3B);display:grid;place-items:center;color:rgba(255,252,245,.85);font-size:15px;font-weight:700;gap:6px;text-align:center}
.photo-cap{font:italic 16px/1.4 var(--serif);color:var(--ink-2);margin-top:12px;text-align:center}

/* ── Memorial (Естелік) ── */
.memorial-day{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.memorial-day:last-child{border-bottom:0}
.memorial-day .day-name{font:500 20px/1.2 var(--serif)}
.memorial-day.is-past .day-name{color:var(--ink-3)}
.memorial-day.is-next{background:var(--ochre-soft);margin:0 -20px;padding:14px 20px;border-radius:14px;border-bottom:0}

/* ── Motion ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s var(--ease-in) both}
::view-transition-new(root){animation:vtIn .34s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
.enter{animation:up var(--t-slow) var(--ease) both}
.enter-2{animation:up var(--t-slow) var(--ease) .08s both}
.enter-3{animation:up var(--t-slow) var(--ease) .16s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes recPulse{0%{box-shadow:0 0 0 0 rgba(168,68,46,.4)}100%{box-shadow:0 0 0 26px rgba(168,68,46,0)}}
@keyframes wave{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
@keyframes blink{50%{opacity:0}}
@keyframes tumarIn{0%{opacity:0;transform:scale(.4) rotate(-20deg)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════
   v10 «Ақ үй» — shared chrome and components (design_handoff_shanyrak_v10). Overrides the v8 rules above.
   Desktop = sidebar at ≥1000 px (content column starts at 264 px); mobile = brand bar + 4-tab bar (Bengü Iz).
   Page layouts that need the full content width use @media (min-width:1000px); the wide book/reader ≥1280 px.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════ */
a{color:var(--cover)}
a:hover{color:var(--cover-2)}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.btn{border-radius:12px}
.btn--record{background:var(--clay);color:#FFF8F3;box-shadow:0 14px 26px -14px rgba(166,50,42,.8)}
.btn--record:hover{background:var(--clay-deep);color:#FFF8F3}
.btn--record::before{width:14px;height:14px;background:#FFF8EE}
.on-dark .btn--record{background:var(--clay);color:#FFF8F3}
.btn--nav,.btn--dark{background:var(--cover);color:var(--on-dark)}
.btn--nav:hover,.btn--dark:hover{background:var(--cover-2);color:var(--on-dark)}
.btn--quiet{color:var(--ink);text-decoration-color:var(--line-btn)}
.kicker{color:var(--ochre-ink)}
.roman{color:var(--ochre)}
.tabs [aria-selected="true"]{border-bottom-color:var(--ochre)}
.segmented{background:var(--sand);border-radius:14px}
.segmented [aria-pressed="true"],.segmented [aria-selected="true"]{box-shadow:var(--sh-lift)}
.chip[aria-pressed="true"]{border-color:var(--cover);background:var(--cover);color:var(--on-dark)}
.switch:checked{background-color:var(--cover)}
.check{accent-color:var(--cover)}
.card{border-color:var(--line);border-radius:16px}
.note{background:var(--sand);color:var(--ink-2)}

/* ── mobile top bar: brand · RU|ҚАЗ · avatar «Я» (app.css, Bengü Iz block) ── */
.appbar{background:rgba(247,243,236,.94);border-bottom:1px solid var(--line)}
.brand{gap:12px;color:var(--ink)}
.brand img{width:34px;height:34px}
.brand-words{display:flex;flex-direction:column;gap:5px}
.brand-name{font:500 22px/1 var(--serif)}
.brand-fam{font:italic 400 16px/1 var(--serif);color:var(--ochre-ink)}

/* ── desktop sidebar ── */
.side{display:none}
.rec-glyph{flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;display:grid;place-items:center}
.rec-glyph i{width:9px;height:9px;border-radius:50%;background:currentColor}
@media (min-width:1000px){
  body.has-side{padding-left:var(--side)}
  /* review r1: chrome pages carry has-side from the first paint (static class) — the empty column is drawn until
     mountChrome() fills aside.side over it, so nothing slides sideways when /api/auth/me answers */
  body.has-side::before{content:"";position:fixed;left:0;top:0;bottom:0;z-index:14;width:var(--side);background:var(--page);border-right:1px solid var(--line);pointer-events:none}
  body.has-side .appbar,body.has-side .tabbar{display:none}
  body.has-tabbar{padding-bottom:64px}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:15;width:var(--side);display:flex;flex-direction:column;gap:6px;padding:24px 18px;overflow-y:auto;background:var(--page);border-right:1px solid var(--line)}
  .side .brand{padding:4px 8px 0;min-height:0}
  .side .brand img{width:46px;height:46px}
  .side .brand-name{font-size:24px}
  .side-rule{height:1px;margin:18px 8px 20px;background:linear-gradient(90deg,rgba(168,125,46,.45),rgba(168,125,46,0))}
  .side-nav{display:flex;flex-direction:column;gap:6px}
  .side-item{height:54px;border-radius:12px;display:flex;align-items:center;gap:14px;padding:0 14px;font:700 18px/1 var(--sans);color:var(--ink-3);text-decoration:none}
  .side-item>span:not(.rec-glyph):not(.side-badge){flex:1}
  .side-item:hover{background:rgba(35,32,28,.04);color:var(--ink)}
  .side-item[aria-current="page"]{background:var(--sand);color:var(--cover);box-shadow:inset 3px 0 0 #A87D2E}
  .side-item[aria-current="page"] .ico{stroke-width:2.3}
  .side-badge{min-width:28px;height:28px;padding:0 8px;border-radius:14px;background:var(--cover);color:var(--on-dark);display:grid;place-items:center;font:700 15px/1 var(--sans)}
  .side-foot{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:10px}
  .side-cap{font:700 15px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ochre-ink);padding:0 8px}
  .side-me{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink)}
  .side-me:hover{box-shadow:inset 0 0 0 1px var(--line-btn);color:var(--ink)}
  .side-me-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
  .side-me-name{font:500 18px/1.15 var(--serif)}
  .side-me-meta{font:400 15px/1.2 var(--sans);color:var(--ink-3)}
  .side-invite{min-height:52px;border-radius:12px;display:flex;align-items:center;gap:12px;padding:0 14px;font:700 17px/1 var(--sans);color:var(--cover);text-decoration:none}
  .side-invite:hover{background:rgba(35,32,28,.04)}
  body.has-side .toast{left:calc(50% + var(--side) / 2)}
}

/* ── mobile tab bar (Bengü Iz spec 05 §3): Главная · Шежіре · Записать · Семья — «Я» is the top bar's avatar ── */
.tabbar{height:auto;min-height:80px;grid-template-columns:repeat(4,1fr);padding:0 0 calc(8px + env(safe-area-inset-bottom));background:var(--page);border-top:1px solid var(--line);box-shadow:none}
.tab{position:relative;height:64px;gap:5px;font:400 17px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;color:var(--ink-3);border-radius:12px}
.tab .ico{width:26px;height:26px}
.tab[aria-current="page"]{color:var(--cover);font-weight:700}
.tab[aria-current="page"] .ico{stroke-width:2.3}
.tab .rec-glyph{width:26px;height:26px}
.tab .rec-glyph i{width:10px;height:10px}
.tab-badge{position:absolute;top:6px;left:calc(50% + 6px);min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--cover);color:var(--on-dark);display:grid;place-items:center;font:700 13px/1 var(--sans)}
body.has-tabbar{padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 32px)}
.toast{bottom:calc(var(--tabbar) + 20px + env(safe-area-inset-bottom));background:var(--ink);color:var(--page);border-radius:14px;font:700 17px/1.35 var(--sans)}
@media (min-width:1000px){.toast{bottom:32px}}

/* ── ring (ring.js) ── */
.ring-face{background:var(--sand) center/cover;color:#6B4A1E;font-weight:500}
.ring-face.has-photo{filter:var(--photo-grade)}
.ring--dark .ring-face{background-color:#3A3128;color:var(--gold-2)}
.ring-num{color:var(--ink)}
.ring--dark .ring-num{color:var(--on-dark)}

/* ── book cover: cloth, gold frame, the ring with the lattice, the name (v10) ── */
.book{--w:168px;aspect-ratio:1/1.33}
.book::before{display:none}
.book-cover{border-radius:6px;background-color:var(--cv,var(--cv-night));background-image:var(--cloth-tex);box-shadow:0 16px 24px -16px rgba(30,20,10,.75),inset 0 1px 0 rgba(255,236,200,.12);padding:12% 9% 12% 15%;justify-content:center;gap:9%;color:var(--on-dark);transition:transform var(--d-ui,200ms) var(--ease-out,ease)}
.book-cover::before{width:9%;background:rgba(0,0,0,.26);box-shadow:inset -1px 0 0 rgba(255,236,200,.08)}
.book-cover::after{left:13%;right:5%;top:4.5%;bottom:4.5%;border:1px solid rgba(201,164,92,.55);border-radius:3px}
.book-kicker{font:700 max(10px,5.5cqw)/1 var(--sans);letter-spacing:.2em;color:var(--gold-2)}
.book-name{font:600 max(12px,11cqw)/1.15 var(--serif);color:var(--on-dark)}
.book:hover .book-cover,a:focus-visible .book-cover{transform:translateY(-6px)}
.shelf-meta{font-size:15px;color:var(--ink-3)}
.shelf-meta b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.book:hover .book-cover{transform:none}}

/* ── portraits: every elder photo gets the Ақ үй grade ── */
.portrait img,img.portrait{filter:var(--photo-grade)}

/* «Чья книга?» sheet (Записать from the tab bar / sidebar) */
.sheet-sub{margin:18px 0 2px;font:700 15px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ochre-ink)}
a.sheet-item{color:var(--ink)}