/* Riletture — mobile first. Everything below 640px is the real target;
   the wider layout is a courtesy for the laptop. */

:root{
  --paper:#FAF9F3;
  --raise:#FFFFFF;
  --sunk:#F1EFEC;
  --ink:#171412;
  --ink2:#4A443E;
  --mute:#767068;
  --line:#E4E0DA;
  --line2:#CFC9C1;
  --accent:#7A4A2B;          /* default; each source overrides with its own */
  --star:#B8891F;
  --ok:#3F6B4F;
  --icon:color-mix(in srgb, var(--ink2) 35%, var(--mute));
  --danger:#B03A24;
  /* The rail used to take the book's cover colour, which produced 13 hues
     ranging from 1.02 to 3.64 against the card — several of them literally
     invisible. Nobody learns 63 colours anyway. Two shelves, two colours,
     both above 3:1 in either theme; the cover thumbnail does the per-book
     identifying, which it can actually do. */
  --rail-ibc:#B5713F; --rail-lib:#4E88C4;
  /* the three the statistics screen counts in, taken from Readwise's own */
  --streak:#FE6A00; --gold:#C99400; --sea:#2E72B8;
  --shadow:rgba(23,20,18,.06);
  --tabh:calc(58px + env(safe-area-inset-bottom));
  /* Six sizes were in play on one screen, with steps of 1.18, 1.16 and 1.07 —
     close enough that 12.6 and 11.8 read as the same size while not being it.
     Three, at a ratio of 1.25: the words, the label, the aside. */
  --t-body:1.09rem; --t-label:.87rem; --t-small:.7rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12100E; --raise:#1B1815; --sunk:#221E1A;
    --ink:#F0EBE4; --ink2:#BFB6AB; --mute:#8B8177;
    --line:#2C2723; --line2:#3D3630;
    --accent:#D89A6A; --star:#E0B45A; --ok:#7FBE9C;
    --icon:color-mix(in srgb, var(--ink2) 35%, var(--mute));
    --danger:#E2836B;
    --rail-ibc:#C87F4E; --rail-lib:#5E95CF;
    --streak:#FF8534; --gold:#E9B408; --sea:#6BA8E8;
    --shadow:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#12100E; --raise:#1B1815; --sunk:#221E1A;
  --ink:#F0EBE4; --ink2:#BFB6AB; --mute:#8B8177;
  --line:#2C2723; --line2:#3D3630;
  --accent:#D89A6A; --star:#E0B45A; --ok:#7FBE9C;
  --icon:color-mix(in srgb, var(--ink2) 35%, var(--mute));
  --danger:#E2836B;
  --rail-ibc:#C87F4E; --rail-lib:#5E95CF;
  --streak:#FF8534; --gold:#E9B408; --sea:#6BA8E8;
  --shadow:rgba(0,0,0,.5);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* every display rule below would otherwise beat the hidden attribute */
[hidden]{display:none !important}
html,body{margin:0; padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font-family:inherit; color:inherit; border:none; background:none; cursor:pointer}
svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}

/* ---------- boot ---------- */
.boot{position:fixed; inset:0; background:var(--paper); z-index:99;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem}
.boot span{font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.7rem; font-weight:500}
.boot small{color:var(--mute); font-size:.8rem}
.boot.gone{opacity:0; pointer-events:none; transition:opacity .28s}

/* ---------- views ---------- */
.view{padding-bottom:calc(var(--tabh) + 1.5rem); min-height:100vh}
.view[hidden]{display:none}

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:20; background:var(--paper);
  padding:calc(env(safe-area-inset-top) + .9rem) 1rem .55rem;
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:.6rem;
}
.top-row{display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:34px}
h1{font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.65rem; font-weight:500;
  letter-spacing:-.015em; margin:0; line-height:1.1}
.icon{width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  color:var(--ink2); flex:none}
.icon:active{background:var(--sunk)}
.count{font-size:var(--t-small); color:var(--mute); margin:0; letter-spacing:.01em;
  font-variant-numeric:tabular-nums}

/* ---------- search ---------- */
.searchbar{display:block}
.searchbar input{
  flex:1; min-width:0; width:100%; font-family:inherit; font-size:16px; /* 16px stops iOS zooming */
  padding:.6rem .8rem; border-radius:11px; border:1px solid var(--line2);
  background:var(--raise); color:var(--ink);
}
.searchbar input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
.txtbtn{font-size:.87rem; color:var(--accent); padding:.4rem .2rem; font-weight:500; flex:none}

/* ---------- filter chips ---------- */
.filters{display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
  margin:0 -1rem; padding:0 1rem .15rem; -webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:none; font-size:.79rem; font-weight:500; padding:.34rem .68rem;
  border-radius:999px; border:1px solid var(--line2); background:var(--raise);
  color:var(--ink2); white-space:nowrap; display:flex; align-items:center; gap:.3rem;
}
.chip b{font-weight:600; font-variant-numeric:tabular-nums; opacity:.5; font-size:.72rem}
.chip.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip.on b{opacity:.6}
.chip.star.on{background:var(--star); border-color:var(--star); color:#1A1408}
.chip:active{transform:scale(.96)}

/* ---------- feed ---------- */
.feed{display:flex; flex-direction:column; gap:1.25rem; padding:.85rem 1rem 0}
.card{
  background:var(--raise); border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.05rem .9rem; display:flex; flex-direction:column; gap:.6rem;
  box-shadow:0 1px 2px var(--shadow); position:relative; overflow:hidden;
}
/* The rail is the book's own colour, taken off its cover.

   It used to be one of exactly two: --rail-ibc for the podcast, --rail-lib for
   Marco's own reading. That told you which library a card came from, which the
   cover thumbnail two centimetres away already tells you, and it meant every
   book in a shelf of four had an identical blue line. Now the line matches the
   spine you would have pulled off the shelf, so a card is recognisable before
   any of it is read.

   --accent is set inline per card from the colour build_covers.py reads out of
   the cover image. --rail-lib remains the floor for a source with no cover at
   all, of which there are two. */
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent, var(--rail-lib))}
.card .text{
  font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.09rem; line-height:1.55;
  color:var(--ink); font-weight:400; white-space:pre-wrap; overflow-wrap:anywhere;
}
.card .text.clamped{display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical;
  overflow:hidden}
/* --accent on a card is that book's cover colour, so it must never carry text
   here: some covers are near-black on the dark ground. */
.more{align-self:flex-start; font-size:.78rem; color:var(--ink2); font-weight:600;
  padding:.15rem 0}
.who{min-width:0; display:flex; flex-direction:column; gap:.05rem}
.who .t{font-size:.79rem; font-weight:600; color:var(--ink2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.who .a{font-size:.71rem; color:var(--mute); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.fav{width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  color:var(--icon); flex:none; margin:-6px -6px -6px 0}
/* opening the book is a header action like the other two, so the highlight
   itself stays nothing but the words */
.bookbtn{width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  color:var(--icon); flex:none; margin:-6px -2px -6px 0}
.bookbtn:active{background:var(--sunk)}
.bookbtn svg{width:20px; height:20px}
.fav.on{color:var(--star)}
.fav.on svg{fill:var(--star)}
.fav:active{background:var(--sunk)}
.tagline{display:flex; flex-wrap:wrap; gap:.3rem}
.tag{font-size:.66rem; font-weight:600; letter-spacing:.02em; color:var(--mute);
  background:var(--sunk); padding:.16rem .42rem; border-radius:5px}
.tag.t10{color:var(--star); background:color-mix(in srgb, var(--star) 14%, transparent)}

.sentinel{height:1px}
.end{text-align:center; color:var(--mute); font-size:.8rem; padding:1.6rem 1rem .5rem; margin:0}
.empty .txtbtn{display:block; margin:.5rem auto 0}
.empty{text-align:center; color:var(--mute); font-size:.9rem; padding:3rem 1.5rem}

/* ---------- library ---------- */
.library{padding:1rem 1rem 0; display:flex; flex-direction:column; gap:1.6rem}
.group{display:flex; flex-direction:column; gap:.55rem}
.group > h2{font-size:.71rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); margin:0}
.src{
  display:flex; align-items:center; gap:.85rem; width:100%; text-align:left;
  background:var(--raise); border:1px solid var(--line); border-radius:13px;
  padding:.7rem .8rem; box-shadow:0 1px 2px var(--shadow);
}
.src:active{background:var(--sunk)}
.thumb{width:46px; height:46px; border-radius:9px; flex:none; object-fit:cover;
  background:var(--accent); display:grid; place-items:center;
  font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.1rem; color:#fff; font-weight:500}
.src .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem}
.src .ti{font-size:.94rem; font-weight:600; line-height:1.25; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.src .su{font-size:.76rem; color:var(--mute); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.src .n{font-size:.78rem; color:var(--mute); font-variant-numeric:tabular-nums; flex:none;
  display:flex; align-items:center; gap:.35rem}
.src .n svg{width:15px; height:15px; color:var(--line2)}

/* ---------- review ---------- */
.progress{height:3px; background:var(--sunk); border-radius:2px; overflow:hidden}
.prog{height:100%; width:0; background:var(--accent); transition:width .3s ease}
.stage{padding:1rem 1rem 0; position:relative}
.rcard{
  background:var(--raise); border:1px solid var(--line); border-radius:16px;
  padding:1.5rem 1.3rem; box-shadow:0 2px 10px var(--shadow);
  display:flex; flex-direction:column; gap:1.1rem; min-height:52vh;
  animation:rise .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.rcard .text{font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.24rem; line-height:1.58;
  white-space:pre-wrap; overflow-wrap:anywhere; flex:1}
.rcard .foot{display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  border-top:1px solid var(--line); padding-top:.85rem}
/* Two arrows, apart rather than in a row.
   Three answers needed three equal buttons across the width. Two directions do
   not: pushed to the edges they sit under the thumbs, they say which way they
   send you, and they leave the middle of the screen to the highlight, which is
   the thing worth looking at. */
.actions{display:flex; justify-content:space-between; padding:1rem 1.4rem 1.3rem}
.nav{width:54px; height:54px; border-radius:50%; border:1px solid var(--line2);
  background:var(--raise); display:grid; place-items:center; color:var(--ink2)}
.nav svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.nav:active{transform:scale(.94); color:var(--ink)}
.nav:disabled{opacity:.3}
/* Kept so the three answers can be restored by markup alone. See index.html. */
.fb{border-radius:13px; padding:.75rem .4rem; border:1px solid var(--line2);
  background:var(--raise); display:flex; flex-direction:column; gap:.1rem; align-items:center}
.fb b{font-size:.9rem; font-weight:600}
.fb span{font-size:.66rem; color:var(--mute)}
.fb:active{transform:scale(.97)}
.fb.again{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2))}
.fb.known{border-color:color-mix(in srgb,var(--ok) 45%,var(--line2))}
.done{text-align:center; padding:4rem 1.5rem; display:flex; flex-direction:column;
  gap:.7rem; align-items:center}
.done h2{font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.9rem; font-weight:500; margin:0}
.done p{color:var(--mute); font-size:.9rem; margin:0; max-width:24rem}
.primary{background:var(--ink); color:var(--paper); border-radius:12px;
  padding:.8rem 1.5rem; font-weight:600; font-size:.92rem; margin-top:.6rem}
.primary:active{opacity:.85}

/* ---------- tabs ---------- */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  height:var(--tabh); padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.tab{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--mute); font-size:.65rem; font-weight:600; letter-spacing:.02em; position:relative;
  min-width:0; padding:0 .15rem}
.tab span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:400px){ .tab{font-size:.58rem; letter-spacing:0} }
.tab svg{width:23px; height:23px}
.tab.on{color:var(--ink)}
.dot{position:absolute; top:8px; right:calc(50% - 18px); width:7px; height:7px;
  border-radius:50%; background:var(--accent)}

/* ---------- wider screens ---------- */
@media (min-width:700px){
  /* keep the header's contents on the same column as the cards, otherwise the
     bar runs edge to edge while the feed sits narrow in the middle */
  .top{padding-left:0; padding-right:0; align-items:center}
  .top > *{width:100%; max-width:44rem; padding-left:1.5rem; padding-right:1.5rem}
  .feed,.library,.stage{max-width:44rem; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem}
  .actions{max-width:44rem; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem}
  .filters{padding-bottom:.15rem}
  h1{font-size:1.9rem}
  .tabs{max-width:44rem; margin:0 auto; border-left:1px solid var(--line);
    border-right:1px solid var(--line); border-radius:14px 14px 0 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ---------- header button group ---------- */
.hgroup{display:flex; gap:.15rem}

/* ---------- search match ---------- */
mark{background:color-mix(in srgb, var(--star) 32%, transparent); color:inherit;
  border-radius:3px; padding:.02em .1em}

/* ---------- library stats + progress ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden}
.stats div{background:var(--raise); padding:.7rem .4rem; display:flex; flex-direction:column;
  align-items:center; gap:.1rem}
.stats b{font-size:1.2rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1}
.stats span{font-size:.63rem; color:var(--mute); text-align:center}
.bar{display:block; height:3px; background:var(--sunk); border-radius:2px; margin-top:.35rem;
  overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:2px}

/* ---------- export ---------- */
.ghost{width:100%; border:1px solid var(--line2); border-radius:12px; padding:.75rem;
  font-size:.88rem; font-weight:600; color:var(--ink2); background:var(--raise)}
.ghost:active{background:var(--sunk)}
.fine{font-size:.72rem; color:var(--mute); margin:.5rem 0 0; text-align:center}
.fine code{font-size:.95em; background:var(--sunk); padding:.05em .3em; border-radius:4px}

/* ---------- review: fit the viewport, scroll the card, never lose the buttons ----------
   A long reflection (Rovelli's run to 900+ characters) otherwise pushes the
   feedback buttons underneath the tab bar. The view becomes a fixed column:
   header, a card that scrolls inside itself, actions pinned above the tabs. */
#v-review:not([hidden]){
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  padding-bottom:var(--tabh);
}
#v-review .top{flex:none}
#v-review .stage{flex:1 1 auto; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; padding-bottom:.4rem}
#v-review .rcard{min-height:0}
#v-review .actions{flex:none; padding-top:.7rem; padding-bottom:.7rem;
  border-top:1px solid var(--line); background:var(--paper)}
#v-review .done{flex:1; justify-content:center; padding-top:0}
/* the scroll lives in .stage, so the page itself must not also scroll */
body:has(#v-review:not([hidden])){overflow:hidden}

/* ---------- video timestamp (ep05's lessons are indexed to the recording) ---------- */
.at{font-size:.66rem; font-weight:600; color:var(--ink); background:transparent;
  border:1px solid var(--line2);
  padding:.14rem .4rem; border-radius:5px; text-decoration:none; white-space:nowrap}
.at:active{background:var(--sunk)}

/* ---------- tags on a card are tappable filters ---------- */
.tag{font-family:inherit; cursor:pointer; border:1px solid transparent}
.tag:active{background:var(--line); transform:scale(.96)}
.chip.filt{border-style:dashed}

/* ---------- filter sheet ----------
   Person is the one dimension that grows without bound, so it never goes in the
   strip. Everything lives here, grouped, the standard answer to more facets
   than a single row can hold. */
.scrim{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px)}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  max-height:82vh; display:flex; flex-direction:column;
  background:var(--paper); border-top:1px solid var(--line2);
  border-radius:18px 18px 0 0; box-shadow:0 -8px 40px var(--shadow);
  padding:.5rem 1rem calc(env(safe-area-inset-bottom) + .9rem);
  transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.7,.3,1);
}
.sheet.up{transform:none}
.sheet-grab{width:38px; height:4px; border-radius:2px; background:var(--line2);
  margin:.15rem auto .6rem; flex:none}
.sheet-head{display:flex; align-items:center; justify-content:space-between; flex:none;
  padding-bottom:.5rem}
.sheet-head h2{font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.3rem; font-weight:500; margin:0}
.sheet-body{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:1.2rem; padding:.3rem 0 1rem}
.facet{display:flex; flex-direction:column; gap:.55rem}
.facet h3{font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); margin:0; display:flex; align-items:center; gap:.45rem}
.facet h3 em{font-style:normal; font-weight:600; font-size:.9em; opacity:.6;
  font-variant-numeric:tabular-nums}
.facet-tags{display:flex; flex-wrap:wrap; gap:.4rem}
.sheet-apply{flex:none; width:100%; margin-top:.2rem}

/* ---------- library index (level 1) ---------- */
.idx{display:flex; align-items:center; gap:.85rem; width:100%; text-align:left;
  background:var(--raise); border:1px solid var(--line); border-radius:13px;
  padding:.85rem .9rem; box-shadow:0 1px 2px var(--shadow)}
.idx:active{background:var(--sunk)}
.idx.dim{opacity:.42; box-shadow:none}
.idx-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:.12rem}
.idx .ti{font-size:.97rem; font-weight:600; line-height:1.25; text-transform:capitalize}
.idx .su{font-size:.76rem; color:var(--mute)}
.idx .n{font-size:.78rem; color:var(--mute); font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:.35rem; flex:none}
.idx .n svg{width:15px; height:15px; color:var(--line2)}

/* ---------- library group (level 2) ---------- */
.lib-head{display:flex; flex-direction:column; gap:.6rem; padding-bottom:.2rem}
.back{display:flex; align-items:center; gap:.3rem; font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
  font-size:1.4rem; font-weight:500; text-transform:capitalize; margin-left:-.4rem}
.back svg{width:22px; height:22px}
.back:active{opacity:.6}
.lib-top{display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.lib-top .icon{margin-right:-.4rem}
.lib-head .count{margin:0}
.lib-head .searchbar input{font-size:16px}

/* what Marco wrote about this source, beside the book itself */
.docs{display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
  margin:.7rem -1.15rem 0; padding:0 1.15rem .2rem}
.docs::-webkit-scrollbar{display:none}
.doc-chip{flex:none; display:flex; align-items:center; gap:.35rem;
  font-size:.78rem; font-weight:600; color:var(--ink2); white-space:nowrap;
  border:1px solid var(--line2); border-radius:999px; padding:.32rem .7rem;
  background:var(--raise)}
.doc-chip svg{width:15px; height:15px; color:var(--icon)}
.doc-chip i{font-style:normal; font-size:.66rem; color:var(--mute);
  font-variant-numeric:tabular-nums}
.doc-chip:active{background:var(--sunk)}

/* ---------- sheet: one block per world ---------- */
.world{display:flex; flex-direction:column; gap:1rem;
  border:1px solid var(--line); border-radius:14px; padding:.9rem .85rem 1rem;
  background:color-mix(in srgb, var(--raise) 55%, transparent)}
.world h4{margin:0; font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.15rem; font-weight:500;
  display:flex; align-items:baseline; gap:.45rem}
.world h4 em{font-style:normal; font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:.7rem;
  font-weight:600; color:var(--mute); font-variant-numeric:tabular-nums}
.world .facet h3{font-size:.63rem}
.chip.dim{opacity:.35}
.chip:disabled{cursor:default}

/* ---------- card: source first, then the highlight ---------- */
/* ---------- search: the highlights, or the book ---------- */
.searchrow{display:flex; gap:.5rem; align-items:center}
.searchrow input{flex:1; min-width:0}
.search-modes{display:flex; gap:.35rem; padding-top:.5rem}
.search-modes .chip{font-size:.74rem; font-weight:600; padding:.24rem .62rem;
  border-radius:999px; border:1px solid var(--line2); background:transparent;
  color:var(--ink2); white-space:nowrap}
.search-modes .chip.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.search-modes .chip:disabled{opacity:.35}
.bookhit .text{font-size:.92rem; line-height:1.55}
.bookhit .passage-open{align-self:flex-start; pointer-events:none}
.bookhit .src-head .who .a{font-style:italic}

.src-head{display:flex; align-items:flex-start; gap:.7rem}
/* cover + title are one target: it is the whole identity of the card, and a
   42px cover on its own is a small thing to hit with a thumb */
.src-open{display:flex; align-items:flex-start; gap:.7rem; flex:1; min-width:0;
  text-align:left; padding:0; margin:0; border-radius:7px}
.src-open:active{opacity:.6}
.cover{width:42px; height:auto; max-height:62px; object-fit:cover; border-radius:4px;
  flex:none; background:var(--sunk); box-shadow:0 1px 4px var(--shadow)}
.cover.ph{width:42px; height:56px; display:grid; place-items:center; background:var(--accent);
  color:#fff; font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1rem; font-weight:500; border-radius:4px}
.src-head .who{flex:1; min-width:0; padding-top:.1rem}
.src-head .t{font-size:var(--t-label); font-weight:600; color:var(--ink2); line-height:1.3;
  white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
.src-head .a{font-size:var(--t-small); color:var(--mute)}
.src-head .fav{margin:-6px -6px 0 0}
.card .text{margin-top:.1rem}
/* A highlight is the author's words; a note is Marco's. Everything else in
   this project insists on being able to tell those apart later, so the card
   says which is which rather than running them together. */
.note{margin:0; font-size:.88rem; line-height:1.55; color:var(--ink2);
  border-left:2px solid var(--star); padding-left:.7rem}
.note b{display:block; font-size:.6rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--star); margin-bottom:.15rem}

/* ---------- end of a finite list ---------- */
.done-note{text-align:center; color:var(--mute); font-size:.78rem; letter-spacing:.04em;
  padding:1.4rem 1rem .4rem; margin:0}

/* covers in the library rows */
img.thumb{width:42px; height:auto; max-height:60px; object-fit:cover; border-radius:5px;
  background:var(--sunk)}
.thumb.ph{width:42px; height:56px}

/* episode number sits before the title, quiet enough not to compete with it */
.epno{font-style:normal; font-variant-numeric:tabular-nums; color:var(--mute);
  font-weight:600; font-size:.85em; margin-right:.45em; letter-spacing:.01em}

/* ---------- library level 3: one source ---------- */
.hero{display:flex; gap:.9rem; align-items:flex-start; padding:.2rem 0 .3rem}
.hero-cover{width:76px; height:auto; max-height:112px; object-fit:cover; border-radius:6px;
  flex:none; background:var(--sunk); box-shadow:0 2px 10px var(--shadow)}
.hero-cover.ph{width:76px; height:104px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.5rem}
.hero-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem}
.hero-body h2{font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.22rem; font-weight:500;
  margin:0; line-height:1.25; text-wrap:balance}
.hero-body p{margin:0; font-size:.85rem; color:var(--mute)}
.hero-body .at{align-self:flex-start; margin-top:.35rem}
#v-library .feed{padding-left:0; padding-right:0}

/* Inside one source the hero already names the book, so each card drops the
   repeated cover and title and keeps only its star. */
#v-library .card .src-head .src-open{display:none}
/* Floating this row out of flow saved 42px of height and cost 130px of line
   width on every line, because the text then had to clear the icons all the
   way down. Left in flow, just made shorter. */
#v-library .card .src-head .fav,
#v-library .card .src-head .bookbtn{width:32px; height:30px; margin:-4px -2px -6px 0}
#v-library .card .src-head{justify-content:flex-end; margin:-.2rem -.2rem -.5rem 0}

/* ---------- login ---------- */
.login{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:1.5rem}
.login-box{width:100%; max-width:23rem; display:flex; flex-direction:column; gap:.5rem}
.login-box h1{font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:2.15rem; font-weight:500;
  letter-spacing:-.02em; margin:0 0 1.4rem; line-height:1.12}
.login-box .sub{color:var(--mute); font-size:.92rem; margin:0 0 1.3rem}
.login-box form{display:flex; flex-direction:column; gap:.85rem}
.login-box label{display:flex; flex-direction:column; gap:.3rem; font-size:.78rem;
  font-weight:600; color:var(--ink2); letter-spacing:.02em}
.login-box input{font-family:inherit; font-size:16px; padding:.7rem .85rem; border-radius:11px;
  border:1px solid var(--line2); background:var(--raise); color:var(--ink)}
.login-box input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
.login-box .primary{margin-top:.4rem; width:100%; padding:.85rem}
.login-box .primary:disabled{opacity:.6}
.li-error{background:color-mix(in srgb,#c0392b 16%,transparent); color:var(--ink);
  border-radius:9px; padding:.6rem .8rem; font-size:.86rem; margin:0}

/* ---------- adopt a highlight from someone else's library ---------- */
.adopt{font-size:.68rem; font-weight:600; color:var(--ink); background:transparent;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  padding:.18rem .5rem; border-radius:6px; white-space:nowrap}
.adopt.on{background:color-mix(in srgb,var(--ok) 18%,transparent); color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.adopt:active{transform:scale(.96)}
.empty.small{padding:.8rem 0; text-align:left; font-size:.85rem}

/* ---------- "chi stai leggendo" — the shelf picker ----------
   Not a profile switcher: you stay signed in as yourself throughout. It chooses
   WHICH LIBRARY you're reading, and what you may do there still comes from the
   database rules, not from this screen. */
.picker{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.2rem; padding:2rem 1.2rem}
.picker h1{font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:1.9rem; font-weight:500;
  margin:0; text-align:center; letter-spacing:-.01em}
.picker-grid{display:flex; flex-wrap:wrap; gap:1.6rem 1.4rem; justify-content:center;
  max-width:24rem}
.pick{display:flex; flex-direction:column; align-items:center; gap:.6rem; width:6.7rem}
.pick-face img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}
.pick-face{width:6.7rem; height:6.7rem; border-radius:14px; display:grid; place-items:center;
  font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:2.4rem; color:#fff; font-weight:500;
  background:var(--accent); position:relative; overflow:hidden;
  box-shadow:0 3px 14px var(--shadow); transition:transform .15s}
.pick:active .pick-face img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}
.pick-face{transform:scale(.95)}
.pick-name{font-size:.86rem; font-weight:600; color:var(--ink2); text-align:center;
  line-height:1.25}
.pick-sub{font-size:.68rem; color:var(--mute); text-align:center; margin-top:-.35rem}
.pick-ro{position:absolute; bottom:0; left:0; right:0; padding:.18rem;
  background:rgba(0,0,0,.45); font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:.56rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.picker-out{color:var(--mute)}


/* the IBC tile spells its name out, so it needs a smaller face */
.pick-face img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}
.pick-face{font-size:2.4rem; line-height:1}
.pick[data-scope="ibc"] .pick-face img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}
.pick-face{font-size:1.5rem; letter-spacing:.02em}

/* which world you're looking at — stated once, quietly */
.whoami{font-family:'Newsreader', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; font-size:.68rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--mute); margin:0 0 -.3rem}
.top-row .txtbtn{font-size:.8rem; white-space:nowrap}

/* ---------- per-card menu, edit and delete ---------- */
.dots{width:30px; height:30px; border-radius:8px; color:var(--icon); flex:none;
  font-size:1.05rem; line-height:1; margin:-4px -6px 0 0; letter-spacing:.06em}
.dots:active{background:var(--sunk)}
.rowmenu{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  border-top:1px solid var(--line); padding-top:.6rem; margin-top:.2rem}
.rowmenu button{font-size:.8rem; font-weight:600; padding:.35rem .7rem; border-radius:8px;
  border:1px solid var(--line2); color:var(--ink2); background:var(--raise)}
.rowmenu button:active{background:var(--sunk)}
.rowmenu .danger{color:#c0563f; border-color:color-mix(in srgb,#c0563f 40%,transparent)}
.rowmenu .ask{font-size:.82rem; color:var(--ink2); margin-right:auto}
.editing{display:flex; flex-direction:column; gap:.6rem}
.edit-area{width:100%; min-height:7rem; resize:vertical; font-family:inherit;
  font-size:1.05rem; line-height:1.55; padding:.7rem .8rem; border-radius:10px;
  border:1px solid var(--line2); background:var(--paper); color:var(--ink)}
.edit-area:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
.edit-bar{display:flex; gap:.6rem; justify-content:flex-end; align-items:center}
.primary.small{padding:.45rem 1rem; font-size:.85rem; border-radius:9px; margin:0}

/* ---------- the passage from the book ---------- */
.passage-open{align-self:flex-start; font-size:.76rem; font-weight:600; color:var(--ink);
  border:1px solid var(--line2);
  padding:.26rem .6rem; border-radius:7px; background:transparent}
.passage-open:active{background:var(--sunk)}
.passage{border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent);
  padding:.1rem 0 .2rem .85rem; display:flex; flex-direction:column; gap:.45rem;
  animation:unfold .22s ease}
@keyframes unfold{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.passage-head{margin:0; font-size:.64rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute)}
.passage-body{margin:0; font-size:.97rem; line-height:1.6; color:var(--ink2);
  white-space:pre-wrap; overflow-wrap:anywhere}
.passage-close{align-self:flex-start; font-size:.74rem; font-weight:600; color:var(--mute);
  padding:.1rem 0}


/* ---------- the book reader, in the shape of the Personal Education ones ----------
   A chapter rail, justified serif text, and pages you turn. The type settings
   are deliberately the same numbers as `.bookcontent` in those readers, so a
   book reads identically in both places. */
body.reading{overflow:hidden}
.reader{position:fixed; inset:0; z-index:60; background:var(--paper);
  display:flex; flex-direction:column}

.rd-bar{flex:none; display:flex; align-items:center; gap:.5rem;
  padding:calc(env(safe-area-inset-top) + .6rem) .9rem .55rem;
  border-bottom:1px solid var(--line)}
.rd-close{width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  color:var(--ink2); flex:none}
.rd-close:active{background:var(--sunk)}
.rd-icon{width:34px; height:32px; border-radius:9px; flex:none; display:grid;
  place-items:center; border:1px solid var(--line2); color:var(--ink2);
  font-size:1rem; line-height:1}
.rd-icon:active{background:var(--sunk)}
.rd-icon:disabled{opacity:.32}
.rd-title{flex:1; min-width:0; font-size:.92rem; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.rd-tools{display:flex; gap:.25rem; flex:none}
.rd-tools button{font-size:.78rem; font-weight:600; color:var(--ink2);
  border:1px solid var(--line2); border-radius:8px; padding:.24rem .5rem}
.rd-tools button:active{background:var(--sunk)}

.rd-shell{flex:1; min-height:0; display:flex; position:relative}

/* the chapter rail */
.rd-rail{width:274px; flex:none; background:var(--raise);
  border-right:1px solid var(--line); overflow-y:auto; padding-bottom:1.5rem;
  -webkit-overflow-scrolling:touch}
.rd-railtop{padding:1rem 1rem .3rem}
.rd-railtop h2{margin:0; font-size:1.02rem; font-weight:600; line-height:1.25;
  letter-spacing:-.01em}
.rd-by{color:var(--mute); font-size:.78rem; margin-top:.2rem}
.rd-navsec{font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); padding:1rem .95rem .35rem; font-weight:700}
.rd-navlist{display:flex; flex-direction:column; gap:1px; padding:0 .5rem}
.rd-navlink{display:block; width:100%; text-align:left; padding:.42rem .55rem;
  border-radius:7px; color:var(--ink2); font-size:.83rem; line-height:1.4}
.rd-navlink:active{background:var(--sunk)}
.rd-navlink.on{background:var(--sunk); color:var(--accent); font-weight:600}

/* Below the fold of a phone the rail cannot be permanent, so it slides over. */
.rd-scrim{position:absolute; inset:0; z-index:4; background:rgba(0,0,0,.42)}
@media (min-width:900px){
  .rd-tocbtn{display:none}
  .rd-scrim{display:none !important}
}
@media (max-width:899px){
  .rd-rail{position:absolute; inset:0 auto 0 0; z-index:5; max-width:82vw;
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:2px 0 18px var(--shadow)}
  .rd-rail.open{transform:none}
}

.rd-main{flex:1; min-width:0; display:flex; flex-direction:column}
.rd-viewport{flex:1; min-height:0; position:relative; overflow:hidden;
  padding:1.6rem clamp(1.1rem, 4vw, 3.4rem)}
.rd-clip{height:100%; overflow:hidden}
.rd-clip.scrolling{overflow-y:auto; -webkit-overflow-scrolling:touch}

/* the page itself — the Personal Education numbers */
.rd-content{height:100%; column-fill:auto;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  font-size:1rem; line-height:1.7; text-align:justify;
  hyphens:auto; -webkit-hyphens:auto; color:var(--ink)}
.rd-content p{margin:0; text-indent:1.5em; orphans:2; widows:2;
  overflow-wrap:break-word}
.rd-content h3{font-size:1.22em; font-weight:600; text-align:left; hyphens:none;
  margin:0 0 .9em; line-height:1.3; break-after:avoid; letter-spacing:-.01em}
.rd-content h3 + p, .rd-content p:first-child{text-indent:0}
.rd-content .md-h1,.rd-content .md-h2,.rd-content .md-h3{font-size:1.08em;
  font-weight:600; text-align:left; hyphens:none; margin:1.4em 0 .5em;
  text-indent:0; break-after:avoid; letter-spacing:-.005em}
.rd-content .md-h4,.rd-content .md-h5,.rd-content .md-h6{font-size:.86em;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); text-align:left; hyphens:none; margin:1.5em 0 .45em;
  text-indent:0; break-after:avoid}
.rd-content blockquote{margin:1em 0; padding:.1em 0 .1em .9rem; text-indent:0;
  text-align:left; border-left:2px solid var(--line2); color:var(--ink2);
  hyphens:none}
.rd-content blockquote.star{border-left-color:var(--star)}
.rd-content ul{text-align:left; text-indent:0; margin:.9em 0; padding-left:1.2rem;
  hyphens:none}
.rd-content li{margin:0 0 .3em}
.rd-content hr{border:none; border-top:1px solid var(--line); margin:1.6em 0}
.rd-content code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.85em; background:var(--sunk); padding:.08em .3em; border-radius:4px}
.rd-content b{font-weight:600; color:var(--ink)}
.rd-content mark{background:none; color:inherit; padding:0}
/* the passage you arrived at */
.rd-content mark.here{background:color-mix(in srgb, var(--star) 26%, transparent);
  border-radius:3px; padding:.06em .1em; scroll-margin:40vh}
/* something you marked before — a line under the words rather than a wash
   over them, so a re-read is still a read and not a coloured page */
.rd-content mark.was{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--star) 55%,transparent)}
.rd-content mark.was.weak{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--star) 26%,transparent)}
.rd-content.scrolling{column-width:auto !important; width:auto !important;
  height:auto !important; transform:none !important;
  max-width:34em; margin:0 auto; padding-bottom:3rem}

/* the button that turns a selection into a highlight */
.rd-markbtn{position:absolute; z-index:9; display:flex; align-items:center; gap:.35rem;
  font-family:inherit; font-size:.8rem; font-weight:600; white-space:nowrap;
  background:var(--ink); color:var(--paper); border:none; border-radius:999px;
  padding:.45rem .85rem; box-shadow:0 3px 12px var(--shadow)}
.rd-markbtn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2}
.rd-markbtn.busy{opacity:.5; pointer-events:none}
.rd-flash{position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 4.2rem); z-index:9;
  background:var(--ink); color:var(--paper); font-size:.82rem; font-weight:600;
  padding:.45rem .9rem; border-radius:999px; box-shadow:0 3px 12px var(--shadow);
  animation:flashin .2s ease}
@keyframes flashin{from{opacity:0; transform:translate(-50%,6px)}to{opacity:1}}
.rd-content{-webkit-user-select:text; user-select:text}

.rd-foot{flex:none; display:flex; align-items:center; justify-content:center;
  gap:1rem; padding:.5rem .9rem calc(env(safe-area-inset-bottom) + .7rem);
  border-top:1px solid var(--line)}
.rd-ind{font-size:.72rem; color:var(--mute); min-width:11rem; text-align:center;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums}

.rd-loading{flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.8rem; color:var(--mute); font-size:.92rem;
  text-align:center; padding:2rem}

/* ---------- Anassimandro ----------
   A room you arrive in, not a form you fill. The greeting is the first thing,
   the box is the second, and nothing else competes until there is an answer. */
#v-ask{padding-top:1rem}
.ask-wrap{max-width:44rem; margin:0 auto; padding:0 1.15rem}
.ask-hello{display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:min(16vh, 6rem) 0 1.6rem}
.ask-star{width:34px; height:34px; flex:none; color:var(--accent); display:grid;
  place-items:center}
.ask-star svg{width:32px; height:32px}
.ask-star svg use, .tab svg use{stroke-width:2.1}
.ask-hello h1{margin:0; font-size:clamp(1.6rem, 6.5vw, 2.2rem); font-weight:500;
  letter-spacing:-.02em; line-height:1.1; text-wrap:balance}

.ask-box{border:1px solid var(--line2); border-radius:18px; background:var(--raise);
  padding:.9rem 1rem .7rem; box-shadow:0 2px 10px var(--shadow);
  display:flex; flex-direction:column; gap:.7rem}
.ask-box:focus-within{border-color:var(--accent)}
.ask-box textarea{width:100%; border:none; background:transparent; color:var(--ink);
  font-family:inherit; font-size:16px; line-height:1.5; resize:none; outline:none;
  min-height:1.6rem; max-height:220px}
.ask-box textarea::placeholder{color:var(--mute)}
.ask-foot{display:flex; align-items:center; gap:.5rem}
.ask-scopes{display:flex; gap:.35rem; flex:1; min-width:0; overflow-x:auto;
  scrollbar-width:none}
.ask-scopes::-webkit-scrollbar{display:none}
.ask-scopes .chip{flex:none; font-size:.74rem; font-weight:600; padding:.26rem .66rem;
  border-radius:999px; border:1px solid var(--line2); background:transparent;
  color:var(--ink2); white-space:nowrap}
.ask-scopes .chip.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.ask-scopes .chip:disabled{opacity:.4}
.ask-locked{font-size:.74rem; font-weight:600; color:var(--mute); padding:.26rem 0;
  white-space:nowrap}
.ask-go{width:34px; height:34px; flex:none; border-radius:50%; display:grid;
  place-items:center; background:var(--ink); color:var(--paper)}
.ask-go svg{width:19px; height:19px; stroke-width:2}
.ask-go:active{opacity:.8}

.ask-note{color:var(--mute); font-size:.78rem; margin:.7rem .2rem 0; line-height:1.5}
.ask-count{color:var(--mute); font-size:.76rem; margin:1.4rem .2rem .7rem;
  font-variant-numeric:tabular-nums}
#ask-out{padding-bottom:2rem}
#ask-out .card{margin-bottom:.7rem}
.askhit .text{font-size:.95rem; line-height:1.55}
.askkind{font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute); background:var(--sunk); padding:.16rem .44rem; border-radius:5px;
  flex:none; align-self:flex-start}
.askhit .passage-open{align-self:flex-start; pointer-events:none}
.ask-down{border:1px solid var(--line); border-radius:13px; background:var(--raise);
  padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.4rem; font-size:.9rem}
.ask-down b{color:var(--ink)}
.ask-down span{color:var(--ink2); line-height:1.55}
.ask-down code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.85em; background:var(--sunk); padding:.1em .35em; border-radius:4px}

/* ---------- ripasso da ascoltare ---------- */
.daily{padding:.5rem 0 .2rem; display:flex; flex-direction:column; gap:.45rem}
.daily audio{width:100%; height:2.4rem}
.daily-note{color:var(--mute); font-size:.76rem; margin:0; line-height:1.5}
.daily-note code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.9em; background:var(--sunk); padding:.1em .35em; border-radius:4px}
.daily-text{max-height:44vh; overflow-y:auto; font-size:.92rem; line-height:1.65;
  color:var(--ink2); border-top:1px solid var(--line); padding-top:.6rem}
.daily-text p{margin:0 0 .8rem}

/* ---------- the written answer ---------- */
/* Set wider and looser than a search result on purpose: this is something to
   read, not something to scan. The passages below it keep the card look, so
   the difference between "what your sources say" and "what was written from
   them" is visible before a single word is read. */
.ask-answer{margin:1.5rem .2rem 0; font-size:1.02rem; line-height:1.72; color:var(--ink)}
.ask-answer p{margin:0 0 1rem}
.ask-answer b{font-weight:650; color:var(--ink)}
.ask-writing{color:var(--mute)}
.ask-writing::after{content:'…'; animation:askdots 1.4s steps(4,end) infinite}
@keyframes askdots{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}

/* The line where the model says a thought is its own and not the sources'. */
.ask-answer .lettura{border-left:2px solid var(--line); padding:.15rem 0 .15rem .85rem;
  color:var(--ink2); font-size:.97rem}

/* A citation points at the passage it came from; the number on the card is the
   same badge, so the eye can match them without reading. */
.cite{display:inline-block; min-width:1.1rem; text-align:center; font-size:.68rem;
  font-weight:700; line-height:1.1rem; vertical-align:.32em; margin:0 .07rem;
  color:var(--mute); background:var(--sunk); border-radius:4px;
  text-decoration:none; font-variant-numeric:tabular-nums}
.cite:hover{color:var(--ink); background:var(--line)}
.citen{display:inline-block; min-width:1.05rem; text-align:center; font-size:.62rem;
  font-weight:700; line-height:1.05rem; margin-right:.3rem; color:var(--mute);
  background:var(--sunk); border-radius:4px; font-variant-numeric:tabular-nums}
.askhit:target{outline:2px solid var(--line); outline-offset:2px}

.ask-cost{color:var(--mute); font-size:.72rem; font-variant-numeric:tabular-nums}
.ask-err{color:var(--mute); font-size:.85rem}

/* ---------- adding a highlight ---------- */
.add-wrap{max-width:44rem; margin:0 auto; padding:.4rem 1.15rem 2rem}
.add-lead{font-size:1.15rem; font-weight:600; margin:.6rem 0 1rem; letter-spacing:-.01em}
.add-doors{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem}
.add-door{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.45rem; padding:1.1rem .4rem; border:1px solid var(--line); border-radius:14px;
  background:var(--raise); color:var(--ink); box-shadow:0 1px 2px var(--shadow);
  font-size:.82rem; font-weight:600; min-height:6.2rem}
.add-door svg{width:26px; height:26px; color:var(--ink2)}
.add-door i{font-style:normal; font-size:.62rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mute)}
.add-door:active{background:var(--sunk)}
.add-door:disabled{opacity:.5}
.add-hint{color:var(--mute); font-size:.8rem; margin:1rem .2rem 0; line-height:1.5}

.add-head{display:flex; align-items:center; gap:.3rem; margin:.1rem 0 .8rem}
.add-head .icon{margin-left:-.5rem}
.add-head h2{margin:0; font-size:1.05rem; font-weight:600; letter-spacing:-.01em}

.add-box{border:1px solid var(--line2); border-radius:16px; background:var(--raise);
  padding:.9rem 1rem .8rem; display:flex; flex-direction:column; gap:.1rem}
.add-box:focus-within{border-color:var(--accent)}
.add-box textarea, .add-box input{width:100%; border:none; background:transparent;
  color:var(--ink); font-family:inherit; font-size:16px; line-height:1.6;
  resize:none; outline:none}
.add-box #add-text{min-height:6.5rem; resize:vertical}
.add-box ::placeholder{color:var(--mute)}
.add-line{border-top:1px solid var(--line) !important; padding-top:.6rem !important;
  margin-top:.55rem}
.add-mic{align-self:flex-start; display:flex; align-items:center; gap:.45rem;
  font-size:.78rem; font-weight:600; color:var(--ink2); border:1px solid var(--line2);
  border-radius:999px; padding:.34rem .8rem; margin-top:.7rem}
.add-mic svg{width:16px; height:16px}
.add-mic.on{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.add-actions{display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin-top:.9rem}
.add-trash{width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line2); color:var(--danger)}
.add-trash svg{width:17px; height:17px}
.add-trash:active{background:var(--sunk)}
.add-next{padding:.5rem 1.4rem; border-radius:999px; background:var(--ink);
  color:var(--paper); font-weight:600; font-size:.88rem}
.add-next:disabled{opacity:.35}

.add-recap{margin:0 0 .9rem; padding:.7rem .9rem; border-left:2px solid var(--accent);
  background:var(--sunk); border-radius:0 10px 10px 0; color:var(--ink2);
  font-size:.92rem; line-height:1.55}
.add-recap cite{display:block; font-style:normal; color:var(--mute); font-size:.74rem;
  margin-top:.3rem; font-variant-numeric:tabular-nums}

.add-list{display:flex; flex-direction:column; margin-top:.4rem}
.add-row{display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  padding:.6rem .1rem; border-bottom:1px solid var(--line)}
.add-row:last-child{border-bottom:none}
.add-row:active{background:var(--sunk)}
.add-row .who{flex:1; min-width:0}
.add-row .t{font-size:.92rem; color:var(--ink); white-space:normal;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.add-row .a{font-size:.76rem}
.add-chev{width:17px; height:17px; flex:none; color:var(--mute)}
.add-msg{color:var(--ink2); font-size:.85rem; margin:.9rem .2rem 0; line-height:1.5}
.add-msg.ok{color:var(--ok); font-weight:600}
@media(max-width:360px){ .add-doors{grid-template-columns:1fr}
  .add-door{flex-direction:row; min-height:0; justify-content:flex-start; gap:.7rem; padding:.8rem 1rem} }

/* ---------- the app bar ----------
   The name is small on purpose: you know which app you opened. The corners
   hold the two things actually reached for. */
.appbar{position:sticky; top:0; z-index:25; display:flex; align-items:center;
  position:sticky;
  gap:.4rem; padding:calc(env(safe-area-inset-top) + .35rem) .6rem .35rem;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line)}
.appbar-name{position:absolute; left:50%; transform:translateX(-50%);
  max-width:46%; text-align:center; font-size:.86rem; font-weight:600;
  letter-spacing:.01em; color:var(--ink2); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; pointer-events:none}
.appbar-name.other{color:var(--accent)}
.appbar-right{display:flex; align-items:center; gap:.15rem; flex:none; margin-left:auto}
.streak{display:flex; align-items:center; gap:.2rem; padding:.3rem .5rem;
  border-radius:999px; color:var(--streak); font-weight:700; font-size:.84rem;
  font-variant-numeric:tabular-nums}
.streak svg{width:19px; height:19px; fill:none}
.streak:active{background:var(--sunk)}
#v-feed .top, #v-library .top{padding-top:.5rem}

/* ---------- impostazioni ---------- */
.set-wrap{max-width:44rem; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + .6rem) 1.15rem 2.5rem}
.set-head{display:flex; align-items:center; gap:.3rem; margin-bottom:1.2rem}
.set-head .icon{margin-left:-.5rem}
.set-head h1{margin:0; font-size:1.35rem; font-weight:500; letter-spacing:-.015em}
.set-sec{font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); margin:1.6rem .3rem .5rem}
.set-card{background:var(--raise); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:0 1px 2px var(--shadow)}
.set-row{display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  padding:.85rem 1rem; border-bottom:1px solid var(--line); color:var(--ink)}
.set-card .set-row:last-child{border-bottom:none}
.set-row:active{background:var(--sunk)}
.set-row > svg{width:21px; height:21px; flex:none; color:var(--icon)}
.set-label{flex:1; min-width:0; font-size:.95rem; font-weight:500}
.set-label i{display:block; font-style:normal; font-size:.78rem; color:var(--mute);
  margin-top:.08rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.set-chev{width:17px; height:17px; flex:none; color:var(--mute)}
.set-pill{flex:none; font-size:.68rem; font-weight:700; letter-spacing:.04em;
  color:var(--ink2); background:var(--sunk); padding:.2rem .5rem; border-radius:999px}
.set-me{display:flex; align-items:center; gap:.9rem; padding:.9rem 1rem}
.set-face{position:relative; width:54px; height:54px; flex:none; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:#fff;
  font-family:'Newsreader','Iowan Old Style','Charter',Georgia,serif; font-size:1.2rem;
  overflow:visible}
.set-face img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.set-cam{position:absolute; right:-3px; bottom:-3px; width:22px; height:22px;
  border-radius:50%; background:var(--raise); border:1px solid var(--line2);
  display:grid; place-items:center; color:var(--ink2)}
.set-cam svg{width:12px; height:12px; stroke-width:1.9}
.set-face:active{opacity:.8}
.set-msg{color:var(--ink2); font-size:.82rem; margin:.6rem .3rem 0; line-height:1.5}
.set-who{flex:1; min-width:0}
.set-who b{display:block; font-size:.98rem; font-weight:600}
.set-who i{display:block; font-style:normal; font-size:.8rem; color:var(--mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.set-foot{text-align:center; color:var(--mute); font-size:.74rem; margin:2rem 0 0}

/* ---------- statistiche ---------- */
.stat-card{display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem;
  background:var(--raise); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem .6rem; box-shadow:0 1px 2px var(--shadow)}
.stat{display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center;
  min-width:0}
.stat b{font-size:1.55rem; font-weight:600; letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums}
.stat span{font-size:.72rem; color:var(--mute); line-height:1.3}
.c-streak{color:var(--streak)} .c-gold{color:var(--gold)} .c-sea{color:var(--sea)}
.stat-note{color:var(--mute); font-size:.78rem; line-height:1.55; margin:.7rem .3rem 0}
.stat-note code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.9em; background:var(--sunk); padding:.08em .32em; border-radius:4px}

.cal{background:var(--raise); border:1px solid var(--line); border-radius:14px;
  padding:.9rem .8rem 1rem; margin-top:.6rem; box-shadow:0 1px 2px var(--shadow)}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem}
.cal-head b{font-size:.95rem; font-weight:600; text-transform:capitalize}
.cal-head > span{display:flex; align-items:center; gap:.1rem; flex:none}
.cal-head i{font-style:normal; color:var(--mute); font-weight:400}
.icon.sm{width:30px; height:30px}
.icon.sm svg{width:18px; height:18px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:.2rem; text-align:center}
.cal-grid i{font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.06em;
  color:var(--mute); padding-bottom:.3rem}
.cal-d{aspect-ratio:1; display:grid; place-items:center; border-radius:50%;
  font-size:.78rem; color:var(--ink2); font-variant-numeric:tabular-nums}
.cal-d.out{opacity:.28}
.cal-d.on{background:var(--streak); color:#fff; font-weight:600}
.cal-d.today{box-shadow:inset 0 0 0 1.5px var(--ink2)}
.cal-d.on.today{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- a message that does not block ---------- */
.toast{position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabh) + .9rem); z-index:80; max-width:min(26rem, calc(100vw - 2rem));
  background:var(--ink); color:var(--paper); font-size:.86rem; line-height:1.45;
  font-weight:500; padding:.6rem 1rem; border-radius:12px; text-align:center;
  box-shadow:0 4px 18px var(--shadow); animation:toastin .22s ease}
.toast.bad{background:var(--danger); color:#fff}
.toast.go{opacity:0; transition:opacity .4s}
@keyframes toastin{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1}}
body.reading .toast{bottom:calc(env(safe-area-inset-bottom) + 4.6rem); z-index:80}

/* ---------- reading a copy ---------- */
.offline{position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabh) + .6rem); z-index:70;
  background:var(--sunk); color:var(--ink2); border:1px solid var(--line2);
  font-size:.74rem; font-weight:600; padding:.3rem .8rem; border-radius:999px;
  white-space:nowrap; cursor:pointer}
.offline:active{background:var(--raise)}
body.reading .offline{display:none}

/* ---------- pull to reshuffle ---------- */
/* Height is driven from JS as the finger moves, so the default is nothing at
   all: with no height there is no gap above the feed and no hint that the
   gesture exists until it is being made.

   The arc is drawn with stroke-dasharray rather than by animating a width,
   because the thing being reported is progress around a circle and that is what
   a dash offset on a circle is. Rotated -90° so it fills from the top, like
   every other loader anyone has ever seen. */
.pull{height:0; overflow:hidden; display:grid; place-items:center; margin:0}
.pull svg{width:22px; height:22px; fill:none; stroke:var(--mute); stroke-width:2.4;
  stroke-linecap:round; stroke-dasharray:56.5; stroke-dashoffset:56.5;
  transform:rotate(-90deg); transition:stroke .15s ease}
.pull.ready svg{stroke:var(--accent)}

/* Let go past the threshold and the arc stops reporting the finger and starts
   reporting the work: a short gap chasing its own tail. It runs for a beat even
   though reshuffling is instant — a spinner that vanishes the moment it appears
   reads as a glitch, and the pause is what makes the new order feel fetched
   rather than jumped. */
.pull.spin svg{stroke:var(--accent); stroke-dasharray:38 20; stroke-dashoffset:0;
  animation:pullspin .65s linear infinite}
@keyframes pullspin{from{transform:rotate(-90deg)} to{transform:rotate(270deg)}}

/* ---------- review: the arrows never move ---------- */
/* Every other screen is a document that scrolls. This one is a control panel,
   and the controls have to stay where the thumbs are: the arrows sat at the end
   of the page, so a long highlight pushed them under the fold and moving to the
   next card meant scrolling to find the way to do it.
   So the screen is exactly one viewport tall, the header and the arrows are
   fixed portions of it, and the leftover in the middle belongs to the card. The
   TEXT scrolls, inside the card, and nothing else moves. */
#v-review{height:100vh; height:100dvh; padding-bottom:var(--tabh);
  display:flex; flex-direction:column; min-height:0}
#v-review .top{position:static}
/* The card is as tall as its highlight, up to the height available, and sits in
   the middle of what is left. Making it fill the stage outright pinned the
   arrows correctly and bought a second problem: three lines of Rovelli became a
   card with a hand's width of nothing under them, because the text was told to
   grow and the footer was pushed to the floor. Short is short. Only a highlight
   that genuinely runs past the bottom gets the full height, and then it scrolls
   inside. */
/* Everything sits at the top, and the empty space goes underneath.

   Centring the card was the obvious answer to a short highlight and the wrong
   one: it split the leftover evenly, so a three-line card had a gap above it
   AND a gap below, and both of them were doing nothing. Now the card starts
   under the header and the arrows follow it immediately, with whatever is left
   over falling to the floor — which is what `margin-bottom:auto` on the last
   item in a flex column means.

   The trade: the arrows move down the screen as a highlight gets longer,
   instead of always being in one place. They are always ON the screen, which
   was the actual complaint; a fixed position would mean bringing the gap back. */
#v-review .stage{flex:0 1 auto; min-height:0; display:flex; padding:.7rem 1rem 0}
#v-review .rcard{flex:0 1 auto; width:100%; max-height:100%; min-height:0;
  overflow:hidden}
#v-review .rcard .text{flex:0 1 auto; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none}
#v-review .rcard .text::-webkit-scrollbar{display:none}
#v-review .actions{flex:none; padding:.75rem 1.4rem 0; margin-bottom:auto}

/* A hint that there is more, added only when there actually is. Without it the
   text simply stops mid-sentence and looks like the highlight ends there. */
#v-review .rcard.more .text{
  mask-image:linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent);
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent)}

/* Editing inside the Ripasso. The card is capped at the height of the screen
   and clips what does not fit, which is right for reading and wrong the moment
   a textarea and three buttons appear underneath: they would be cut off with no
   way to reach them. While editing, the card scrolls. */
#v-review .rcard:has(.editing),
#v-review .rcard:has(.rowmenu){overflow-y:auto; overscroll-behavior:contain}