/* ============================================================================
 * ቃና · qaanaa.com — styles for the reader site and the staff desk
 *
 * Plain CSS, no build step. Colours, fonts and spacing come from CSS variables
 * defined at the top (:root) — change them there, not in individual rules.
 *   --serif / --sans  reading and interface fonts (set from the desk: Settings → Geʼez font)
 *   --lh / --pgap     line height and space between paragraphs
 *   --ink --bg --soft --line --muted …  colours; dark mode redefines them
 *
 * Sections in this file (search for the title to jump there):
 *   • Public masthead
 *   • Covers (muted, editorial)
 *   • Front page
 *   • Sign-in options
 *   • Image studio
 *   • Highlight-to-post
 *   • Marker (highlight with mouse / finger)
 *   • Community
 *   • Proverbs
 *   • Proverb of the day feature
 *   • WhatsApp contact
 *   • Optional pictures
 *   • Top strip (proverb of the day ↔ ads), full proverb size
 *   • Consistent poem cards
 *   • Home: featured squares + rail
 *   • Rich text in reading views
 *   • Editor
 *   • Read mode
 *   • Share sheet & copy protection
 *   • Reading formats
 *   • No sideways scrolling on any screen
 *   • Desk shell
 *   • Ads manager
 *   • Image banner in the top strip
 *   • Light mode (slow connections)
 *   • Editorial workflow
 *   • Proverbs table
 *   • Typography settings
 *   • Desk menu: collapsible groups + account menu
 *   • Review page
 *   • Section front
 *   • Footer shortcuts
 *   • Analytics
 *   • Section page
 *   • Article
 *   • Mobile tab bar (public)
 *   • Buttons & forms (desk)
 *   • Login
 *   • Desk shell
 * ========================================================================== */

:root{
  /* ---- Colour (semantic). Every text/background pair below is >= 4.5:1 (WCAG AA). ---- */
  --bg:#ffffff; --soft:#f7f7f5; --ink:#121212; --muted:#5a5a5a; --faint:#6b6b6b; --line:#e2e2e2; --rule:#121212;
  --link:#326891; --ok:#2E7D4F; --warn:#9a6200; --bad:#B3261E; --field:#ffffff;
  --info:#326891;
  --ok-bg:#e8f3ec; --ok-ink:#25683f; --warn-bg:#fbf1de; --warn-ink:#8a5700;
  --bad-bg:#fbe9e7; --bad-ink:#B3261E; --info-bg:#e8f0f7; --info-ink:#2a5a82;
  --focus:#326891; --accent:#D99A1E;
  /* ---- Type scale ---- */
  --fs-title:1.5rem; --fs-section:1.05rem; --fs-body:.95rem; --fs-label:.85rem; --fs-helper:.8rem; --fs-meta:.78rem; --fs-table:.9rem;
  /* ---- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* ---- Radius, shadow, motion, touch target ---- */
  --r-1:4px; --r-2:8px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.08); --shadow-menu:0 6px 20px rgba(0,0,0,.14);
  --t:120ms ease-out; --tap:40px;
  --sans:"Noto Sans Ethiopic","Noto Sans",system-ui,sans-serif;
  --serif:"Noto Serif Ethiopic","Noto Serif",Georgia,serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121212; --soft:#1c1c1c; --ink:#ececec; --muted:#a8a8a8; --faint:#8c8c8c; --line:#2e2e2e; --rule:#ececec;
  --link:#7fb2dd; --ok:#5bc08a; --warn:#e6a83a; --bad:#f07a70; --field:#1a1a1a; --info:#7fb2dd; --focus:#7fb2dd;
  --ok-bg:#16291f; --ok-ink:#7fd1a2; --warn-bg:#2d2412; --warn-ink:#f0b955; --bad-bg:#2e1815; --bad-ink:#f59a92; --info-bg:#16222d; --info-ink:#9cc6e8;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-menu:0 6px 20px rgba(0,0,0,.5);}}
:root[data-theme="dark"]{
  --bg:#121212; --soft:#1c1c1c; --ink:#ececec; --muted:#a8a8a8; --faint:#8c8c8c; --line:#2e2e2e; --rule:#ececec;
  --link:#7fb2dd; --ok:#5bc08a; --warn:#e6a83a; --bad:#f07a70; --field:#1a1a1a; --info:#7fb2dd; --focus:#7fb2dd;
  --ok-bg:#16291f; --ok-ink:#7fd1a2; --warn-bg:#2d2412; --warn-ink:#f0b955; --bad-bg:#2e1815; --bad-ink:#f59a92; --info-bg:#16222d; --info-ink:#9cc6e8;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-menu:0 6px 20px rgba(0,0,0,.5);}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;min-height:100dvh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.en{font-family:"Noto Sans",system-ui,sans-serif;color:var(--muted);font-size:.85rem}

/* ---------- Public masthead ---------- */
.mast{padding-top:10px}
.mast-top{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted);min-height:36px}
.mast-top .acts{display:flex;gap:4px}
.ibtn{width:36px;height:36px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.ibtn:hover{background:var(--soft)}
.logo{display:block;text-align:center;font-family:var(--serif);font-weight:800;font-size:clamp(2.6rem,8vw,4.2rem);line-height:1;letter-spacing:.02em;margin:2px 0 6px}
.tagline{text-align:center;font-size:.85rem;color:var(--muted);margin-bottom:12px}
.snav{border-top:1px solid var(--line);border-bottom:1px solid var(--rule);box-shadow:0 3px 0 -2px var(--bg),0 4px 0 -2px var(--rule)}
.snav-in{display:flex;overflow-x:auto;scrollbar-width:none;padding:8px 0}
.snav-in::-webkit-scrollbar{display:none}
.snav-row{display:flex;gap:2px;margin:0 auto;padding:0 14px}
.snav a{padding:4px 12px;font-size:.88rem;white-space:nowrap;color:var(--ink)}
.snav a:hover{text-decoration:underline}
.snav a.on{font-weight:700}
@media(max-width:700px){.mast-top .date{display:none}}

/* ---------- Themes: what a piece is about ----------------------------------
   Under the sections sits a second row — ኵሉ · ፍቕሪ · ሓጐስ · ዕዮ — and each one
   has its own address and its own page. Set the way a newspaper sets the
   topics under a section name: quiet words in a line, not buttons, with the
   one you are reading in bold above a hairline. */
.thm-nav{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);margin:0 0 20px;padding:0 2px}
.thm-nav::-webkit-scrollbar{display:none}
.thm-link{position:relative;white-space:nowrap;padding:11px 15px 10px;font-size:.9rem;
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.thm-link:first-child{padding-left:2px}
.thm-link:hover{color:var(--ink)}
.thm-link.on{color:var(--ink);font-weight:700;border-bottom-color:var(--rule)}

/* A theme page carries no drawn heading: the row says which one is open, so
   a title above it was only the same word twice. The row sits straight under
   the section menu, where the first piece used to be pushed down the page. */
.thm-nav{margin-top:2px}
/* how many pieces sit under each one */
.thm-link i{font-style:normal;font-size:.72rem;color:var(--faint);margin-left:5px;vertical-align:.08em}
.thm-link.on i{color:var(--muted)}
/* one with nothing under it yet is still offered, just quietly */
.thm-link.bare{color:var(--faint)}
.thm-link.bare:hover{color:var(--muted)}
@media(max-width:700px){.thm-link{padding:10px 12px 9px;font-size:.86rem}}

/* Picking the themes of one piece, in the desk. On/off, several at a time. */
.thp{display:flex;flex-wrap:wrap;gap:8px}
.thp-b{border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;
  border-radius:999px;padding:7px 15px;font-size:.88rem;font-family:inherit;min-height:36px}
.thp-b:hover{border-color:var(--muted)}
.thp-b.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.prov-thms{display:block;font-size:.76rem;color:var(--faint);margin-top:3px}
/* what is shown in place of the buttons when no list has been made yet */
.thp-none{margin:0;font-size:.88rem;color:var(--muted)}
.thp-none a{text-decoration:underline;text-underline-offset:2px}

/* ---------- Covers (muted, editorial) ---------- */
.cover{position:relative;overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.9);aspect-ratio:3/2;background:#444}
.cover .g{font-family:var(--serif);font-weight:700;font-size:clamp(3rem,9vw,6rem);line-height:1}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap{font-size:.75rem;color:var(--faint);margin-top:5px}

/* ---------- Front page ---------- */

/* ---------- Sign-in options ---------- */
.sso{display:grid;gap:10px}
.sso button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border-radius:4px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%;font-family:"Noto Sans Ethiopic","Noto Sans",system-ui,sans-serif}
.sso button:hover{border-color:var(--ink)}
.sso svg{width:18px;height:18px;flex-shrink:0}
.sso-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line)}
.sso-ic svg{width:16px;height:16px}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:.8rem;margin:18px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:70;padding:16px}
.modal{background:var(--bg);color:var(--ink);max-width:400px;width:100%;padding:22px;border:1px solid var(--line);max-height:90dvh;overflow:auto}
.acct{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 6px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer}
.acct:hover{background:var(--soft)}
.phone-row{display:grid;grid-template-columns:minmax(0,150px) 1fr;gap:8px}
.phone-row .select{padding:6px 8px}
.code-in{letter-spacing:.5em;font-size:1.4rem;text-align:center;font-family:ui-monospace,Menlo,monospace}
.acc-wrap{max-width:560px;margin:30px auto 0}
.acc-list{margin:24px 0}
.av.big{width:72px;height:72px;font-size:1.8rem;margin:0 auto}
.lnk{background:none;border:0;padding:0;color:var(--link);cursor:pointer;font-size:inherit;text-decoration:underline}
.lnk-danger{background:none;border:0;color:var(--bad);cursor:pointer;font-size:.85rem;text-decoration:underline}
.me{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:700;font-size:.85rem;margin-left:4px}
.signin-link{font-size:.8rem;font-weight:600;border:1px solid var(--ink);padding:4px 10px;border-radius:3px;margin-left:6px;align-self:center}

/* ---------- Image studio ---------- */
.studio{padding-top:22px}
.studio-grid{display:grid;gap:28px;margin-top:14px}
@media(min-width:920px){.studio-grid{grid-template-columns:1fr 1fr;align-items:start}}
.step-h{margin:24px 0 8px}
.chunks{border:1px solid var(--line);max-height:46vh;overflow:auto;padding:6px}
.chunk{display:block;width:100%;text-align:left;border:0;border-left:3px solid transparent;background:none;padding:6px 10px;font-family:var(--serif);font-size:1.02rem;line-height:1.7;cursor:pointer}
.chunks.poem .chunk{text-align:center}
.chunk:hover{background:var(--soft)}
.chunk.on{background:color-mix(in srgb,var(--link) 15%,transparent);border-left-color:var(--link)}
.chunk.anchor{border-left-color:var(--ink);border-left-width:5px}
.gapline{height:12px}
.plat{display:flex;gap:8px;flex-wrap:wrap}
.plat button{border:1px solid var(--line);background:var(--bg);padding:8px 14px;border-radius:999px;cursor:pointer;font-size:.88rem}
.plat button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.size{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--bg);padding:10px;cursor:pointer;text-align:left;font-size:.85rem}
.size.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.size i{display:block;background:var(--faint);flex-shrink:0}
.size small{display:block;color:var(--muted);font-size:.72rem}
.theme-sw{display:flex;gap:10px}
.theme-sw button{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);cursor:pointer}
.theme-sw button.on{box-shadow:0 0 0 3px var(--link)}
.canvas-wrap{background:var(--soft);padding:16px;display:grid;place-items:center;min-height:240px}
.canvas-wrap canvas{max-width:100%;max-height:64vh;width:auto;height:auto;box-shadow:0 2px 14px rgba(0,0,0,.2)}

/* ---------- Highlight-to-post ---------- */
.selbar{position:absolute;z-index:80;display:none;align-items:center;gap:2px;background:var(--ink);color:var(--bg);border-radius:8px;padding:4px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.selbar.show{display:flex}
.selbar button{background:none;border:0;color:inherit;padding:9px 12px;font-weight:600;cursor:pointer;border-radius:6px;font-size:.88rem;white-space:nowrap;font-family:var(--sans)}
.selbar button:hover,.selbar button:focus-visible{background:rgba(127,127,127,.25)}
.selbar .cnt{font-size:.72rem;opacity:.7;padding:0 8px}
.selbar.bottom{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));justify-content:center;top:auto!important}
.selbar.bottom button{flex:1;padding:12px}
.prose[data-src] ::selection,.prose[data-src]::selection{background:color-mix(in srgb,var(--link) 30%,transparent)}
.tip{font-size:.8rem;color:var(--muted);border-left:2px solid var(--link);padding-left:10px;margin:0 0 18px}
.hl-edit{font-family:var(--serif);font-size:1.05rem;line-height:1.8;min-height:96px}

/* ---------- Marker (highlight with mouse / finger) ---------- */
.prose.marking{-webkit-user-select:none;user-select:none;touch-action:pan-y;cursor:text}
.prose.marking .mk-w{cursor:pointer;border-radius:3px}
.prose.marking .mk-w:hover{background:rgba(255,214,64,.35)}
.mk-w.mk,.mk-s.mk{background:#ffe066;color:#121212}
.mk-w.mk-pre,.mk-s.mk-pre{background:rgba(255,224,102,.65);color:#121212}
.mk-w.mk-anchor{background:#ffe066;color:#121212;outline:2px dashed #9a7a00;outline-offset:1px}
.marker-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--ink)}
.marker-btn[aria-pressed="true"]{background:#ffe066;border-color:#d4b01c;color:#121212}
.marker-btn .icon{width:16px;height:16px}
.markbar{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:80;display:none;gap:4px;align-items:center;background:var(--ink);color:var(--bg);padding:6px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:calc(100% - 24px)}
.markbar.show{display:flex}
.markbar .lbl{font-size:.8rem;padding:0 10px;white-space:nowrap;opacity:.85}
.markbar button{background:none;border:0;color:inherit;padding:9px 12px;border-radius:6px;cursor:pointer;font-weight:600;font-size:.85rem;white-space:nowrap;font-family:var(--sans)}
.markbar button:hover{background:rgba(127,127,127,.25)}
.markbar button.primary{background:#ffe066;color:#121212}
.markbar button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:899px){.markbar{bottom:calc(72px + env(safe-area-inset-bottom));left:12px;right:12px;transform:none;justify-content:space-between}.markbar .lbl{padding:0 4px}}

.picktext{border:1px solid var(--line);background:var(--bg);padding:14px 16px;max-height:44vh;overflow:auto;font-family:var(--serif);font-size:1.05rem;line-height:1.9;white-space:pre-wrap;cursor:text;-webkit-user-select:text;user-select:text}
.picktext.poem{text-align:center}
.picktext::selection{background:#ffe066;color:#121212}
::highlight(pick){background-color:#ffe066;color:#121212}

/* ---------- Community ---------- */
.like{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:4px 10px;cursor:pointer;font-size:.82rem;color:var(--ink);margin-right:2px}
.like .icon{width:17px;height:17px}
.like.on{color:#c0392b;border-color:color-mix(in srgb,#c0392b 40%,transparent)}
.au-link:hover b{text-decoration:underline}
.about-author{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-top:26px;flex-wrap:wrap}
.about-author>div{flex:1;min-width:180px}
.about-author p{margin:2px 0 0;color:var(--muted);font-size:.9rem;font-family:var(--serif)}
.comments{margin-top:30px}
.comments .sblock-h{border-top:1px solid var(--rule);padding-top:8px;margin-bottom:14px}
.c-form{display:flex;gap:12px;margin-bottom:18px}
.c-in{min-height:84px;resize:vertical;font-family:var(--serif)}
.c-item{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.c-item p{margin:4px 0 0;font-family:var(--serif);line-height:1.7}
.c-meta{font-size:.85rem}
.c-meta time{color:var(--faint);font-size:.78rem;margin-left:6px}
.c-signin{display:flex;gap:10px;align-items:center}
.av.sm{width:32px;height:32px;font-size:.85rem}
.av.huge{width:96px;height:96px;font-size:2.4rem;margin:0 auto 14px}
.author-head{text-align:center;padding:30px 0 20px;border-bottom:1px solid var(--rule)}

/* ---------- Proverbs ---------- */
.share-sm{gap:12px;font-size:.78rem;margin-top:10px}
.prov-big q{font-family:var(--serif);font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.5;quotes:none;display:block;padding:28px 0 6px;font-weight:600}
.pv-today{border-top:3px solid var(--ink)}
.pv .kicker{margin-bottom:4px}
.prov-today{border:1px solid var(--line);border-top:3px solid var(--ink);padding:18px;margin:18px 0 8px;text-align:center}
.prov-today q{font-family:var(--serif);font-size:1.7rem;quotes:none;display:block;line-height:1.5}
.prov-today .share{justify-content:center}
.pv .share{justify-content:center}
.prov-admin-today{font-family:var(--serif);font-size:1.4rem;margin:0 0 8px;line-height:1.5}

.plist{list-style:none;margin:0 auto;padding:0;max-width:760px}
.plist li{border-bottom:1px solid var(--line)}
.plist-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;background:none;border:0;padding:14px 4px;text-align:left;cursor:pointer;color:var(--ink)}
.plist-row:hover .plist-text{text-decoration:underline;text-underline-offset:4px}
.plist-text{font-family:var(--serif);font-size:1.15rem;line-height:1.5}
.plist-date{font-size:.75rem;color:var(--faint);white-space:nowrap}
.plist li.is-today .plist-text{font-weight:700}
.plist li.is-today .plist-date{color:var(--ink);font-weight:600}
.plist li.open{background:var(--soft)}
.plist-more{padding:0 12px 14px}
.plist-more p{margin:0 0 6px;font-family:var(--serif);color:var(--muted)}
.plist-more .share{margin-top:6px}

/* ---------- Proverb of the day feature ---------- */
.pod{position:relative;background:var(--ink);color:var(--bg);text-align:center;overflow:hidden}
.pod-home{margin-top:22px}
.pod-weave{height:10px;background:
  linear-gradient(135deg,#9B2D5A 25%,transparent 25%) -5px 0/10px 10px,
  linear-gradient(225deg,#9B2D5A 25%,transparent 25%) -5px 0/10px 10px,
  linear-gradient(315deg,#D99A1E 25%,transparent 25%) 0 0/10px 10px,
  linear-gradient(45deg,#D99A1E 25%,transparent 25%) 0 0/10px 10px,#0F7C7A}
.pod-in{padding:30px 20px 28px;max-width:860px;margin:0 auto}
@media(min-width:760px){.pod-in{padding:44px 40px 38px}}
.pod-label{display:inline-block;font-size:.8rem;font-weight:700;color:#F0B545;border-bottom:1px solid rgba(240,181,69,.5);padding-bottom:3px;margin-bottom:16px}
.pod-text{display:block;color:inherit}
.pod-text q{quotes:none;display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,4.6vw,2.9rem);line-height:1.45}
.pod-text:hover q{opacity:.85}
.pod-note{font-family:var(--serif);font-size:1.05rem;margin:14px auto 0;max-width:560px;opacity:.75}
.pod-btn{display:inline-block;margin-top:20px;background:transparent;color:inherit;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:7px 20px;cursor:pointer;font-weight:600;font-size:.85rem}
:root[data-theme="dark"] .pod-btn{border-color:rgba(0,0,0,.35)}
.pod-btn:hover{background:rgba(127,127,127,.2)}
.pod-share{margin-top:18px}
.pod-share .share{justify-content:center;margin:0}
.pod-share .share a{color:inherit}
.plist-h{max-width:760px;margin:34px auto 0;border-top:1px solid var(--rule);padding-top:8px}
.plist-chev{font-size:1.1rem;color:var(--faint);width:18px;text-align:center}

/* ---------- WhatsApp contact ---------- */
.wa-box{border:1px solid var(--line);padding:24px;text-align:center;margin:22px 0 10px}
.wa-ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#25D366;color:#fff;margin-bottom:10px;flex-shrink:0}
.wa-ic svg{width:26px;height:26px}
.btn.wa-send{background:#1DA851;border-color:#1DA851;color:#fff}
.wa-send svg{width:20px;height:20px}
.wa-row{display:grid;grid-template-columns:1fr 1.3fr auto auto;gap:8px;align-items:center;margin-bottom:8px}
@media(max-width:560px){.wa-row{grid-template-columns:1fr 1fr}}
.input.bad{border-color:var(--bad)}
.disabled-link{opacity:.35;pointer-events:none}
.wa-preview{display:flex;gap:8px;flex-wrap:wrap}
.wa-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.85rem}
.wa-chip svg{width:16px;height:16px;color:#1DA851}
.foot a.wa-foot{color:#1DA851}

/* ---------- Optional pictures ---------- */
/* The picture is laid over a box of fixed shape. It used to sit inside the box in the
   normal flow, so a tall photo stretched the box and the cards came out different sizes. */
.pic{position:relative;overflow:hidden;background:var(--soft);aspect-ratio:3/2}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cols .pic{margin-bottom:10px}
.fig .pic{aspect-ratio:16/9}
.fig.fig-poem{max-width:460px;margin:0 auto 28px}
.fig.fig-poem .pic{aspect-ratio:4/3}
.cover.plain{background:var(--soft);color:var(--faint)}
.snip{font-family:var(--serif);font-size:1rem;line-height:1.85;margin:8px 0 0;color:var(--ink);border-left:2px solid var(--line);padding-left:12px}
.lead.noimg{display:block;text-align:center;padding:28px 0 32px}
.lead.noimg .story{display:block;max-width:760px;margin:0 auto}
.lead.noimg .hl-xl{font-size:clamp(2.1rem,5.5vw,3.4rem)}
.lead.noimg .snip{border:0;padding:0;font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.95;margin:18px auto 6px}
.lead.noimg .sum{max-width:620px;margin:10px auto 0;font-size:1.05rem}
.lead-cta{display:inline-block;margin-top:16px;border-bottom:2px solid var(--ink);font-weight:600;font-size:.9rem;padding-bottom:2px}
.srow.noimg{grid-template-columns:1fr}
@media(min-width:700px){.srow.noimg{grid-template-columns:140px 1fr}}
.srow.compact{grid-template-columns:1fr 100px!important}
.srow.compact.noimg{grid-template-columns:1fr!important}
.textcard{position:absolute;inset:0;background:#121212;color:#fff;display:grid;place-items:center;padding:16px 20px;text-align:center}
.textcard div{font-family:var(--serif);font-size:1rem;line-height:1.7;white-space:pre-line}
.textcard span{position:absolute;left:12px;bottom:8px;font-family:var(--serif);font-weight:800;font-size:.95rem}
.poem-note{border-left:3px solid var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--bg));padding:10px 12px;margin:0 0 16px;font-size:.9rem}

/* ---------- Top strip (proverb of the day ↔ ads), full proverb size ---------- */
.topstrip{position:relative}
.topstrip:empty{display:none}
/* One band, one size.

   The strip turns over between the proverb of the day and the ads. It used
   to be a *least* height that each one then grew past in its own way — a
   long proverb made it tall, a short ad made it short, and it was taller
   again on a phone. So the whole page jumped up and down under the reader's
   thumb every few seconds. Now it is one fixed height, the same for the
   proverb, an ad and a picture banner, and the same on a phone as on a
   desk. Anything too long is trimmed inside the band instead of pushing
   it open; the full words are always one tap away on their own page.      */
.ts{position:relative;height:300px;display:flex;flex-direction:column;overflow:hidden}
/* Held to one size on every screen, rather than growing with the window.
   `.ts` here so the big proverb on the front page is left alone. */
.ts.pod .pod-text q{font-size:1.55rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ts.pod .pod-note{font-size:.95rem;margin-top:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ts .ts-ad-title{font-size:1.5rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ts .ts-ad-text{font-size:.95rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ts-anim{animation:tsin .5s ease}
@keyframes tsin{from{opacity:0}to{opacity:1}}
.ts-prov .pod-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:40px}
.ts-ad{background:var(--soft);border-bottom:1px solid var(--line)}
.ts-ad-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:18px;padding-bottom:42px;text-align:center}
.ts-label{font-size:.72rem;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 8px;margin-bottom:14px}
.ts-ad-body{display:flex;align-items:center;gap:22px;max-width:860px}
.ts-ad-img{width:150px;height:150px;object-fit:cover;flex-shrink:0}
.ts-ad-copy{display:flex;flex-direction:column;align-items:center}
.ts-ad-body:has(.ts-ad-img) .ts-ad-copy{align-items:flex-start;text-align:left}
.ts-ad-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.8vw,2.4rem);line-height:1.35;color:var(--ink)}
.ts-ad-title:hover{text-decoration:underline}
.ts-ad-text{margin:8px 0 0;color:var(--muted);font-size:1rem}
.ts-ad-foot{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.pod-btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink);margin-top:0;display:inline-block}
.ts-sponsor{font-size:.75rem;color:var(--faint)}
.ts-ctrl{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;align-items:center;gap:7px}
.ts-dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(127,127,127,.45);cursor:pointer;padding:0}
.ts-dot.ad{border-radius:2px}
.ts-prov .ts-dot.on{background:#F0B545}
.ts-ad .ts-dot.on{background:var(--ink)}
.ts-pause{border:0;background:none;cursor:pointer;color:rgba(127,127,127,.9);font-size:.7rem;padding:4px 6px;margin-left:4px}
.ts-bar{position:absolute;left:0;right:0;bottom:0;height:3px}
.ts-bar i{display:block;height:100%;background:#F0B545;opacity:.7;transition:width 1s linear}
.ts-ad .ts-bar i{background:var(--ink);opacity:.3}
/* The picture stays beside the words on a phone too. Stacking it on top
   was what made the ad taller than the proverb, and the band is one height
   now — so the picture gets smaller instead of the box getting bigger. */
@media(max-width:700px){.ts-ad-img{width:92px;height:92px}.ts-ad-body{gap:14px}}


/* collapsible strip */
.ts-toggle{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(127,127,127,.45);background:transparent;cursor:pointer;color:inherit;flex-shrink:0}
.ts-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ts-toggle:hover{background:rgba(127,127,127,.2)}
.ts-toggle-abs{position:absolute;top:18px;right:16px;z-index:2}
.ts-prov .ts-toggle{color:#fff}
:root[data-theme="dark"] .ts-prov .ts-toggle{color:#121212}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ts-prov .ts-toggle{color:#121212}}
.ts-ad .ts-toggle{color:var(--ink)}
.ts-pop{animation:tspop .55s cubic-bezier(.2,.8,.2,1)}
@keyframes tspop{from{clip-path:inset(0 0 100% 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
.ts-mini{animation:tsin .35s ease}
.ts-mini-in{display:flex;align-items:center;gap:12px;min-height:46px}
.ts-mini-prov{background:var(--ink);color:var(--bg);border-top:4px solid #D99A1E}
.ts-mini-ad{background:var(--soft);border-bottom:1px solid var(--line)}
.ts-mini-label{font-size:.68rem;font-weight:700;color:#F0B545;white-space:nowrap}
.ts-mini-label.ad{color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:0 6px;font-weight:600}
.ts-mini-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:.92rem;color:inherit}
.ts-mini-text.serif{font-family:var(--serif);font-size:1rem}
.ts-mini-text:hover{text-decoration:underline}
.ts-mini-cta{font-size:.75rem;font-weight:700;border-bottom:1px solid currentColor;white-space:nowrap}
.ts-mini .ts-toggle{width:30px;height:30px}

/* ---------- Consistent poem cards ---------- */
.poem-card .pc-mark,.sq-poemcard .pc-mark{display:block;font-family:Georgia,"Noto Serif",serif;font-size:3rem;line-height:.8;height:.55em;color:#D99A1E;margin-bottom:6px}
.poem-card .pc-sum{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-style:normal}
/* The gold rule above each poem card: a short mark over the poem itself, the
   width of the card. Not the same thing as a bar drawn across the whole page
   above a section's lead, which is gone. */
.cols .poem-card{display:block;border-top:3px solid #D99A1E;padding-top:12px}
.cols.c4 .poem-card .hl{font-size:1.2rem}
.sq-poemcard{background:#f4efe6}
:root[data-theme="dark"] .sq-poemcard:not(.sq-ink){background:#1f1b16}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sq-poemcard:not(.sq-ink){background:#1f1b16}}
.sq-poemcard.sq-ink{background:var(--ink)}
.sq-poemcard{justify-content:center}
.sq.sq-poemcard .sq-by{margin-top:10px}
.sq-big.sq-poemcard{padding:36px}
.sq-big.sq-poemcard h3{margin-bottom:10px}
.sq-poemcard .pc-mark{font-size:3.4rem}
.sq-big.sq-poemcard .pc-mark{font-size:5rem}
.sq-big .sq-sum{font-size:clamp(1rem,1.7vw,1.25rem);-webkit-line-clamp:3}
.sq-poemcard .sq-sum{-webkit-line-clamp:3}
.rail-sum{font-family:var(--serif);font-size:.85rem;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
/* ---------- Home: featured squares + rail ---------- */
.home-grid{display:grid;gap:28px;margin-top:22px}
@media(min-width:960px){.home-grid{grid-template-columns:2.2fr 1fr}.rail{border-left:1px solid var(--line);padding-left:24px}}
.feat-h{margin-bottom:12px}
.sq-empty{background:var(--soft)}
/* phone: one big card, then two per row — every card fully visible */
.feat-wide{display:none}
.feat-phone{display:block}
.fp-hero .sq{aspect-ratio:4/5}
.fp-hero .sq-poemcard,.fp-hero .sq-txt{aspect-ratio:auto;min-height:300px}
.fp-head{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 8px;font-weight:700;font-size:.9rem}
.fp-head .muted{font-weight:400;font-size:.78rem}
.fp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fp-grid>.sq{aspect-ratio:1}
.fp-grid>.fp-wide{grid-column:span 2;aspect-ratio:2/1}
.fp-grid .sq h3{font-size:.98rem}
.fp-grid .sq-sum,.fp-grid .sq-poem{-webkit-line-clamp:3}
/* tablet: one wide card, then two per row */
@media(min-width:700px){
  .feat-wide{display:block}
  .feat-phone{display:none}
  .sq-grid.fx{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
  .sq-grid.fx .slot-0{grid-column:span 2;aspect-ratio:16/10}
}
@media(min-width:700px) and (max-width:1099px){.sq-grid.fx .hide-t{display:none}}
/* full page: 4 columns, large 2x2 + 4 beside it, then rows of 4 */
@media(min-width:1100px){
  .sq-grid.fx{grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-flow:dense}
  .sq-grid.fx .slot-0{grid-column:span 2;grid-row:span 2;aspect-ratio:1}
  .sq-grid.fx .hide-d{display:none}
  .sq-grid.fx .sq:not(.sq-big) h3{font-size:.98rem}
  .sq-grid.fx .sq:not(.sq-big) .sq-sum{-webkit-line-clamp:2}
  .sq-grid.fx .sq-big h3{font-size:clamp(1.6rem,2.4vw,2.3rem)}
}
/* admin preview of the three layouts */
.lay-grid{display:grid;gap:8px}
.lay-grid.lay-d{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense}
.lay-grid.lay-t{grid-template-columns:repeat(2,1fr)}
.lay-grid.lay-d .slot-0{grid-column:span 2;grid-row:span 2}
.lay-grid.lay-t .slot-0{grid-column:span 2}
.lay-grid.lay-p{grid-template-columns:repeat(2,1fr);max-width:320px;margin:0 auto}
.lay-grid.lay-p .slot-0{grid-column:span 2}
.lay-slot.is-hidden{opacity:.35;border-style:dashed}
.lay-hid{font-size:.62rem;color:var(--bad)}
.lay-info{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin:8px 0 12px}
.lay-info b{color:var(--ink)}
.lay-slot{border:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:6px;background:var(--bg);min-width:0}
.lay-slot[draggable="true"]{cursor:grab}
.lay-slot.dragging{opacity:.4}
.lay-slot.over{outline:2px dashed var(--link);outline-offset:2px}
.lay-slot.is-auto .lay-card{opacity:.7}
.lay-name{font-size:.68rem;color:var(--muted);font-weight:600}
.lay-card{flex:1;min-height:70px;background:var(--soft);padding:8px;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;position:relative}
.lay-slot.slot-0 .lay-card{min-height:170px}
.lay-card.has-img{color:#fff}
.lay-card.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.75))}
.lay-card>*{position:relative}
.lay-card b{font-family:var(--serif);font-size:.85rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.lay-slot.slot-0 .lay-card b{font-size:1.1rem}
.lay-kick{font-size:.62rem;opacity:.8}
.lay-auto{position:absolute!important;top:6px;right:6px;font-size:.62rem;background:var(--ink);color:var(--bg);padding:0 6px;border-radius:3px}
.lay-sel{min-height:32px;padding:3px 6px;font-size:.78rem}
.sq{position:relative;aspect-ratio:1;overflow:hidden;display:flex;flex-direction:column;color:var(--ink)}
.sq:hover h3{text-decoration:underline;text-underline-offset:3px}
.sq-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.sq-img:hover img{transform:scale(1.03)}
.sq-cap{position:relative;margin-top:auto;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff}
.sq-cap h3{color:#fff}
.sq h3{font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1.3;margin:4px 0}
.sq-big h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.sq-kick{font-size:.7rem;opacity:.85}
.sq-by{font-size:.72rem;opacity:.8;margin-top:4px}
.sq-txt{padding:16px;border:1px solid var(--line);background:var(--bg)}
.sq-t1{background:var(--soft)}
.sq-t2{background:#f4efe6}
:root[data-theme="dark"] .sq-t2{background:#1f1b16}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sq-t2{background:#1f1b16}}
.sq-ink,.sq-poemcard.sq-ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sq-ink h3,.sq-ink .sq-sum,.sq-ink .sq-by{color:var(--bg)}
/* In dark mode the big featured tile must not become a white box: it sits a shade
   above the page with normal text, keeping the gold quote mark. */
:root[data-theme="dark"] .sq-ink,:root[data-theme="dark"] .sq-poemcard.sq-ink{background:#1c1a17;color:var(--ink);border-color:#2a2622}
:root[data-theme="dark"] .sq-ink h3,:root[data-theme="dark"] .sq-ink .sq-sum,:root[data-theme="dark"] .sq-ink .sq-by{color:var(--ink)}
:root[data-theme="dark"] .sq-ink .sq-sum,:root[data-theme="dark"] .sq-ink .sq-by{color:var(--muted)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sq-ink,:root:not([data-theme="light"]) .sq-poemcard.sq-ink{background:#1c1a17;color:var(--ink);border-color:#2a2622}
  :root:not([data-theme="light"]) .sq-ink h3{color:var(--ink)}
  :root:not([data-theme="light"]) .sq-ink .sq-sum,:root:not([data-theme="light"]) .sq-ink .sq-by{color:var(--muted)}
}
.sq-txt .sq-kick{color:var(--muted)}
.sq-ink .sq-kick{color:#F0B545;opacity:1}
.sq-poem,.sq-sum{font-family:var(--serif);font-size:.88rem;line-height:1.7;margin:6px 0 0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.sq-big .sq-poem{font-size:clamp(1rem,1.8vw,1.3rem);line-height:1.9;-webkit-line-clamp:6;margin-top:auto}
.sq-txt .sq-by{margin-top:auto;padding-top:6px}
.sq-big .sq-by{margin-top:14px}
.rail-h{font-size:.95rem;font-weight:700;margin:0 0 6px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.rail-list{list-style:none;margin:0;padding:0}
.rail-list li{border-bottom:1px solid var(--line)}
.rail-item{display:flex;gap:12px;padding:12px 0;align-items:flex-start}
.rail-item:hover b{text-decoration:underline}
.rail-main{flex:1;display:flex;flex-direction:column}
.rail-main b{font-family:var(--serif);font-size:1rem;line-height:1.35}
.rail-main .kicker{margin-bottom:2px}
.rail-main .meta{margin-top:4px}
.rail-item img{width:64px;height:64px;object-fit:cover;flex-shrink:0}
.rail-list.rk{counter-reset:r}
.rail-list.rk li{counter-increment:r;display:flex;gap:10px;align-items:flex-start}
.rail-list.rk li::before{content:counter(r);font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--faint);padding-top:10px;min-width:18px}
.rail-list.rk .rail-item{flex:1}
.rail-preview{border:1px dashed var(--line);padding:12px}
.rail-preview .rail{border:0;padding:0}
.add-row{display:flex;gap:8px;margin-top:10px}
.add-row .select{min-height:36px;padding:4px 8px}
.ad-card{border:1px solid var(--line);padding:12px;margin-bottom:10px}
.ad-card.off{opacity:.65}
.ad-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.ad-card .field{margin-bottom:8px}

/* ---------- Rich text in reading views ---------- */
.prose.rich{white-space:normal}
.prose.rich h2{font-size:1.4em;margin:1.25em 0 .4em;line-height:1.3}
.prose.rich h3{font-size:1.15em;margin:1em 0 .3em;line-height:1.35}
.prose.rich blockquote{margin:.9em 0;padding:.2em 0 .2em 1em;border-left:3px solid #D99A1E;font-size:1.08em;color:var(--muted)}
.prose.rich ul,.prose.rich ol{padding-left:1.4em;margin:0 0 1em}
.prose.rich li{margin:.25em 0}
.prose.rich mark{background:#ffe38a;color:#121212;padding:0 .15em;border-radius:2px}
.prose.rich a{text-decoration:underline;text-underline-offset:3px;color:var(--link)}
.prose.rich hr{border:0;margin:1.6em 0;text-align:center;height:auto}
.prose.rich hr::before{content:"• • •";color:var(--faint);letter-spacing:.6em}
.prose.rich p:empty{display:none}
.prose.poem.rich blockquote{border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.6em 0}

/* ---------- Editor ---------- */
.rte{border:1px solid var(--line);background:var(--bg);border-radius:6px}
.rte:focus-within{border-color:var(--ink)}
.rt-bar{position:sticky;top:57px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px;background:var(--soft);border-bottom:1px solid var(--line);border-radius:6px 6px 0 0}
@media(max-width:760px){.rt-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;top:92px}}
.rt-g{display:flex;align-items:center;gap:2px;padding-right:6px;margin-right:2px;border-right:1px solid var(--line)}
.rt-g:last-child{border-right:0}
.rt-right{margin-left:auto}
.rt-b{min-width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;border-radius:5px;cursor:pointer;color:var(--ink);font-size:.95rem;flex-shrink:0}
.rt-b .icon{width:18px;height:18px}
.rt-b:hover{background:var(--bg)}
.rt-b[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.rt-sel{height:34px;border:1px solid var(--line);border-radius:5px;background:var(--bg);padding:0 6px;font-size:.82rem}
.rt-link{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--line);background:var(--soft)}
.rt-link[hidden]{display:none}
.rt-link .input{min-height:34px;flex:1}
.rt-keys{display:flex;flex-wrap:wrap;gap:3px;padding:8px;border-bottom:1px solid var(--line)}
.rt-keys button{min-width:34px;height:34px;border:1px solid var(--line);background:var(--bg);border-radius:4px;cursor:pointer;font-family:var(--serif);font-size:1.05rem}
.rt-area{display:grid}
.rt-area.split-on{grid-template-columns:1fr}
@media(min-width:1000px){.rt-area.split-on{grid-template-columns:1fr 1fr}}
.rt-doc{min-height:340px;padding:22px 26px;outline:none;font-size:1.12rem;line-height:var(--lh,1.75)}
.rt-doc.poem{text-align:center}
.rt-doc{position:relative}
.rt-doc.is-empty::before{content:attr(data-placeholder);color:var(--faint);position:absolute;left:26px;right:26px;top:22px;pointer-events:none}
.rt-doc.poem.is-empty::before{text-align:center}
.rt-doc p{margin:0 0 var(--pgap,0.45em)}
.rt-preview{border-left:1px solid var(--line);background:var(--soft);padding:16px 22px;max-height:70vh;overflow:auto}
@media(max-width:999px){.rt-preview{border-left:0;border-top:1px solid var(--line)}}
.rt-prev-h{font-size:.72rem;color:var(--muted);margin-bottom:10px;font-family:var(--sans)}
.rt-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
/* focus mode */
.rte.is-focus{position:fixed;inset:0;z-index:95;border:0;border-radius:0;display:flex;flex-direction:column}
.rte.is-focus .rt-bar{top:0;border-radius:0;justify-content:center}
.rte.is-focus .rt-area{flex:1;overflow:auto}
.rte.is-focus .rt-doc{max-width:760px;margin:0 auto;width:100%;padding:48px 28px;font-size:1.25rem}
body.rt-focus-on{overflow:hidden}
.rev-edit-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 8px;flex-wrap:wrap}

/* ---------- Read mode ---------- */
.rm-offer{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-left:4px solid #D99A1E;padding:14px 16px;margin:0 0 22px;background:var(--soft)}
.rm-offer .icon{width:28px;height:28px;flex-shrink:0}
.rm-offer div{flex:1;display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.rm-offer span{color:var(--muted);font-size:.82rem}
@media(max-width:560px){.rm-offer{flex-wrap:wrap}.rm-offer .btn{width:100%}}
body.rm-open{overflow:hidden}
.rm{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;--bgc:#fbfaf7;--fg:#1d1d1d;--mu:#6d6d6d;background:var(--bgc);color:var(--fg)}
.rm-sepia{--bgc:#f4ecd8;--fg:#3b2f22;--mu:#7d6b55}
.rm-night{--bgc:#111418;--fg:#d9d6cf;--mu:#8b8f96}
.rm-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--bgc);border-bottom:1px solid color-mix(in srgb,var(--fg) 12%,transparent);transition:transform .25s}
.rm-bar.hide{transform:translateY(-100%)}
.rm-x{border:0;background:none;color:inherit;font-size:1.1rem;cursor:pointer;width:34px;height:34px;border-radius:50%}
.rm-x:hover{background:color-mix(in srgb,var(--fg) 10%,transparent)}
.rm-title{font-family:var(--serif);font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-left{font-size:.78rem;color:var(--mu);white-space:nowrap}
.rm-tools{display:flex;align-items:center;gap:4px}
.rm-tools>button{border:1px solid color-mix(in srgb,var(--fg) 20%,transparent);background:none;color:inherit;border-radius:5px;height:32px;min-width:36px;cursor:pointer;font-size:.85rem}
.rm-themes{display:flex;gap:5px;margin-left:6px}
.rm-th{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.rm-th.on{outline:2px solid #D99A1E;outline-offset:2px}
.rm-th-paper{background:#fbfaf7}.rm-th-sepia{background:#f4ecd8}.rm-th-night{background:#111418}
@media(max-width:700px){.rm-bar{flex-wrap:wrap}.rm-title{flex-basis:calc(100% - 120px)}.rm-tools{width:100%;justify-content:space-between}}
.rm-prog{position:absolute;left:0;right:0;bottom:-1px;height:3px}
.rm-prog i{display:block;height:100%;width:0;background:#D99A1E}
.rm-scroll{flex:1;overflow-y:auto;outline:none;padding:90px 22px 80px}
.rm-page{max-width:660px;margin:0 auto}
.rm-w-w .rm-page{max-width:860px}
.rm-page .kicker{color:var(--mu)}
.rm-page h1{font-size:clamp(2rem,5vw,2.8rem);margin:6px 0 10px}
.rm-by{color:var(--mu);font-size:.85rem;margin:0 0 34px}
.rm .rm-body,.rm .rm-body.prose,.rm .rm-body.rich{font-size:var(--rmfs)!important;line-height:var(--rmlh)!important;color:var(--fg)}
.rm .rm-body h2{font-size:1.4em}
.rm .rm-body h3{font-size:1.15em}
.rm-body blockquote{color:var(--mu)}
.rm-body hr::before{color:var(--mu)}
.rm-end{text-align:center;color:var(--mu);margin:50px 0 20px;line-height:2.4}
.rm-end .btn{color:var(--fg);border-color:color-mix(in srgb,var(--fg) 25%,transparent)}
.rm-resume{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:var(--fg);color:var(--bgc);padding:10px 14px;border-radius:8px;display:flex;gap:10px;align-items:center;font-size:.88rem;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center}
.rm-resume .btn{background:var(--bgc);color:var(--fg);border-color:var(--bgc)}
.rm-resume .btn.line{background:transparent;color:var(--bgc);border-color:var(--bgc)}

/* ---------- Share sheet & copy protection ---------- */
.selbar{z-index:110}
.share-sheet{max-width:440px}
.sh-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sh-quote{margin:0;padding:12px 14px;border-left:3px solid #D99A1E;background:var(--soft);font-family:var(--serif);line-height:1.8;max-height:180px;overflow:auto}
.sh-by{font-size:.82rem;color:var(--muted);margin:8px 0 14px}
.sh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sh-btn{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);background:var(--bg);border-radius:6px;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink);text-decoration:none}
.sh-btn:hover{border-color:var(--ink)}
.sh-btn.strong{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sh-note{margin:14px 0 0;text-align:center}
body:not(.is-desk) .prose img,body:not(.is-desk) .pic img{-webkit-user-drag:none;user-select:none}
@media print{
  body:not(.is-desk) #root,body:not(.is-desk) #readmode,body:not(.is-desk) #topstrip{display:none!important}
  body:not(.is-desk)::after{content:"ጽሑፋት ቃና ንምሕታም ኣይፍቀዱን። ኣብ qaanaa.com ኣንብቡ።";display:block;padding:40px;font-size:18px;text-align:center}
}

/* ---------- Reading formats ---------- */
.fmt-box{border:1px solid var(--line);padding:14px;margin:0 0 22px}
.fmt-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:10px}
.fmt-head span{font-size:.8rem;color:var(--muted)}
.fmt-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:700px){.fmt-opts{grid-template-columns:repeat(2,1fr)}}
.fmt-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer;color:var(--ink)}
.fmt-opt:hover{border-color:var(--ink)}
.fmt-opt.on{border-color:#D99A1E;box-shadow:inset 0 0 0 1px #D99A1E;background:color-mix(in srgb,#D99A1E 8%,var(--bg))}
.fmt-opt .icon{width:22px;height:22px;flex-shrink:0;margin-top:2px}
.fmt-opt span{display:flex;flex-direction:column;gap:2px}
.fmt-opt b{font-size:.9rem}
.fmt-opt small{font-size:.72rem;color:var(--muted);line-height:1.35}
.pager{margin-top:6px}
.pager-view{height:min(66vh,620px);overflow:hidden;position:relative}
.pager-cols{height:100%;column-fill:auto;transition:transform .35s ease;will-change:transform}
.pager-cols p,.pager-cols li{orphans:3;widows:3}
.pager-cols h2,.pager-cols h3{break-after:avoid}
.pager-cols blockquote{break-inside:avoid}
.pager-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pager-count{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pager-prog{height:3px;background:var(--soft);margin-top:10px}
.pager-prog i{display:block;height:100%;width:0;background:#D99A1E;transition:width .3s}
.parts-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;font-size:.85rem;color:var(--muted);flex-wrap:wrap}
.parts-dots{display:flex;gap:5px;flex-wrap:wrap}
.pdot{width:22px;height:6px;border-radius:3px;border:0;background:var(--line);cursor:pointer;padding:0}
.pdot.done{background:color-mix(in srgb,#D99A1E 45%,var(--line))}
.pdot.on{background:#D99A1E}
.parts-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.parts-done{color:var(--ok);font-weight:600}

/* ---------- No sideways scrolling on any screen ---------- */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
.home-grid>*,.split>*,.an-2>*,.form-grid>*,.field>*,.studio-grid>*,.two>*,.front>*,.lead>*,.cols>*,.byl>*,.drow>.main,.rail-main,.fmt-opt span{min-width:0}
.feat,.rte,.rt-area,.pager,.parts,.fp-scroll{min-width:0;max-width:100%}
.tools{flex-wrap:wrap;justify-content:flex-end}
.byl{flex-wrap:wrap}
img,svg,video,canvas{max-width:100%}
.prose,.rt-doc,.sh-quote,.plist-text,.pod-text q,.ts-ad-title,.hl{overflow-wrap:anywhere}
pre,code{white-space:pre-wrap;word-break:break-word}
.nums>div{min-width:0}
.nums b{overflow-wrap:anywhere}
@media(max-width:420px){
  .wrap{padding-left:14px;padding-right:14px}
  .fp-scroll{margin:0 -14px;padding-left:14px;padding-right:14px}
  .rt-doc{padding:16px 14px}
  .rt-doc.is-empty::before{left:14px;right:14px;top:16px}
  .box{padding:14px}
  .tools .marker-btn{padding:4px 9px}
}

/* ---------- Desk shell ---------- */
.dshell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh}
.dside{position:sticky;top:0;height:100dvh;overflow-y:auto;scrollbar-width:none;border-right:1px solid var(--line);background:var(--soft);display:flex;flex-direction:column;gap:10px;padding:14px 12px;z-index:50}
.dside-top{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 6px}
.dside-x{display:none;border:0;background:none;font-size:1.1rem;cursor:pointer;color:var(--ink);width:36px;height:36px;border-radius:50%}
.dnew{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:var(--bg);border-radius:8px;min-height:42px;font-weight:600;font-size:var(--fs-table)}
.dnew .icon{width:18px;height:18px}
.dgroups{display:flex;flex-direction:column;gap:14px;flex:1}
.dgroup{display:flex;flex-direction:column;gap:1px}
.dgroup-h{font-size:.68rem;font-weight:700;color:var(--faint);padding:0 10px 4px;letter-spacing:.02em}
.dlink{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:var(--ink);font-size:var(--fs-table);border:0;background:none;cursor:pointer;width:100%;text-align:left;position:relative}
.dlink .icon{width:19px;height:19px;flex-shrink:0;color:var(--muted)}
.dlink:hover{background:var(--bg)}
.dlink.on{background:var(--bg);font-weight:700;box-shadow:inset 3px 0 0 #D99A1E}
.dlink.on .icon{color:var(--ink)}
.dl-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbadge{min-width:20px;height:20px;border-radius:10px;background:var(--bad);color:var(--bg);font-size:.7rem;font-weight:700;display:grid;place-items:center;padding:0 6px}
.dbadge.neutral{background:var(--line);color:var(--ink)}
.dside-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.duser{display:flex;align-items:center;gap:10px;padding:4px 8px}
.duser .dl-t{display:flex;flex-direction:column;line-height:1.3}
.duser small{color:var(--muted);font-size:var(--fs-meta)}
.dfoot-btns{display:flex;flex-direction:column}
.dmain{min-width:0;display:flex;flex-direction:column}
.dtop{position:sticky;top:0;z-index:30;height:56px;display:flex;align-items:center;gap:12px;padding:0 28px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.dmenu{display:none;border:0;background:none;cursor:pointer;color:var(--ink);width:40px;height:40px;border-radius:8px;place-items:center}
.dmenu .icon{width:22px;height:22px}
.dlogo-m{display:none}
.dcrumb{font-weight:700;font-size:var(--fs-body);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtop-r .btn .icon{width:16px;height:16px}
main.desk{padding:24px 28px 60px;width:100%;max-width:1260px}
.dscrim{display:none}
.dtabs{display:none}
/* tablet: icon rail */
@media(max-width:1099px) and (min-width:700px){
  .dshell{grid-template-columns:84px minmax(0,1fr)}
  .dside{padding:12px 8px;align-items:stretch}
  .dgroup-h,.dbadge.neutral,.dnew .dl-t{display:none}
  .dlink{flex-direction:column;gap:2px;padding:8px 2px;min-height:var(--tap)}
  .dside .dlink .dl-t{flex:none;max-width:100%;font-size:.64rem;text-align:center;line-height:1.2}
  .dside-top{justify-content:center;padding:0 0 4px}
  .dlogo small{display:none}
  .dnew{padding:0}
  .dlink{justify-content:center}
  .dlink .icon{width:22px;height:22px}
  .dgroup{padding-top:8px;border-top:1px solid var(--line)}
  .dgroup:first-child{border-top:0;padding-top:0}
  .dbadge{position:absolute;top:2px;right:6px;min-width:17px;height:17px;font-size:.62rem}
  .duser{justify-content:center;padding:4px 0}
  main.desk{padding:20px 22px 60px}
  .dtop{padding:0 22px}
}
/* phone: drawer + bottom tabs */
@media(max-width:699px){
  .dshell{grid-template-columns:minmax(0,1fr)}
  /* closed drawer is hidden from keyboard and screen readers, not just moved off-screen */
  .dside{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-102%);visibility:hidden;transition:transform .18s ease-out,visibility 0s .18s;box-shadow:0 0 30px rgba(0,0,0,.25);z-index:120}
  .dside.open{transform:none;visibility:visible;transition-delay:0s}
  .dside-x{display:grid;place-items:center}
  .dscrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:110}
  .dmenu{display:grid}
  .dlogo-m{display:block;font-family:var(--serif);font-weight:800;font-size:1.3rem}
  .dcrumb{font-size:var(--fs-label);color:var(--muted);font-weight:600}
  .dtop{padding:0 10px;gap:8px}
  .dtop-r{display:none}
  main.desk{padding:16px 14px 96px}
  .dtabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .dtabs a,.dtabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;color:var(--faint);border:0;background:none;cursor:pointer;padding:2px 0}
  .dtabs .icon{width:22px;height:22px}
  .dtabs .on{color:var(--ink);font-weight:700}
}
@media(max-width:760px){.rt-bar{top:56px}}

/* ---------- Ads manager ---------- */
.ad-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ad-order{display:flex;flex-direction:column}
.ad-order .ibtn{height:22px;width:30px}
.ad-thumb{width:112px;height:44px;border-radius:5px;overflow:hidden;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--line)}
.ad-thumb img{width:100%;height:100%;object-fit:cover}
.ad-thumb.txt{background:var(--soft);font-family:var(--serif);font-weight:700;color:var(--muted);width:44px}
.ad-main{flex:1;min-width:180px}
.ad-main b{font-family:var(--serif);font-size:1.02rem}
.ad-main .sub{font-size:var(--fs-meta);color:var(--muted);margin-top:2px}
.ad-acts{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:699px){.ad-acts{width:100%;padding-left:42px}.ad-thumb{width:84px}}
.size-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.85rem;flex-wrap:wrap}
.size-row b{flex:1 0 auto}
.size-row span{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:360px){.size-row{font-size:.78rem;gap:4px}.size-row span{white-space:normal}}
.kind-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:480px){.kind-opts{grid-template-columns:1fr}}
.up-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) minmax(0,.8fr);gap:10px;align-items:end}
@media(max-width:699px){.up-grid{grid-template-columns:minmax(0,1fr)}.up-grid .up-slot:last-child .up-box{max-width:60%}}
.up-head{display:flex;justify-content:space-between;gap:6px;font-size:.8rem;margin-bottom:4px}
.up-box{position:relative;display:grid;place-items:center;border:1.5px dashed var(--faint);border-radius:6px;overflow:hidden;cursor:pointer;width:100%}
.up-box:hover{border-color:var(--ink)}
.up-box img{position:absolute;inset:0;width:100%;height:100%}
.up-box input{position:absolute;opacity:0;width:1px;height:1px}
.up-empty{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;mix-blend-mode:difference;font-size:.7rem}
.up-meta{display:flex;justify-content:space-between;gap:6px;font-size:.72rem;margin-top:4px;min-height:18px}
.warnt{color:var(--warn)}
.color-in{width:56px;height:38px;border:1px solid var(--line);border-radius:6px;padding:2px;background:var(--bg);cursor:pointer}
.pv-stage{background:repeating-conic-gradient(var(--soft) 0 25%,var(--bg) 0 50%) 0 0/16px 16px;border:1px solid var(--line);border-radius:8px;padding:16px;display:grid;place-items:center}
.pv-device{width:100%;overflow:hidden;border-radius:6px;box-shadow:0 4px 18px rgba(0,0,0,.18);background:var(--soft);position:relative}
.pv-d{aspect-ratio:4.6/1}
.pv-t{aspect-ratio:3/1;max-width:78%}
.pv-m{aspect-ratio:1.3/1;max-width:52%}
.pv-device .ban{position:absolute;inset:0}
.pv-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:.8rem}
.pv-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:8px}
.pv-text .ts-label{margin:0 0 2px;font-size:.55rem}
.pv-text b{font-family:var(--serif);font-size:clamp(.8rem,2.2vw,1.1rem);line-height:1.3}
.pv-text small{font-size:.62rem;color:var(--muted)}
.pv-cta{font-size:.6rem;background:var(--ink);color:var(--bg);border-radius:999px;padding:2px 10px;margin-top:2px}

/* ---------- Image banner in the top strip ---------- */
.ban{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.ban img{position:absolute;inset:0;width:100%;height:100%;display:none}
.ban.fit-cover img{object-fit:cover}
.ban.fit-contain img{object-fit:contain}
.ban .ban-d{display:block}
@media(max-width:1099px){.ban:not([class*="force-"]) .ban-d{display:none}.ban:not([class*="force-"]) .ban-t{display:block}}
@media(max-width:699px){.ban:not([class*="force-"]) .ban-t{display:none}.ban:not([class*="force-"]) .ban-m{display:block}}
.ban.force-d .ban-d,.ban.force-t .ban-t,.ban.force-m .ban-m{display:block!important}
.ban.force-d .ban-t,.ban.force-d .ban-m,.ban.force-t .ban-d,.ban.force-t .ban-m,.ban.force-m .ban-d,.ban.force-m .ban-t{display:none!important}
.ban-label{position:absolute;left:10px;top:10px;font-size:.66rem;font-weight:700;background:rgba(255,255,255,.9);color:#333;border-radius:3px;padding:1px 7px}
.ban-sponsor{position:absolute;right:10px;bottom:10px;font-size:.66rem;color:#fff;background:rgba(0,0,0,.45);border-radius:3px;padding:1px 7px}
.ts-banner{padding:0}
.ts-ban{position:absolute;inset:0}
.ts-banner .ts-ban .ban{max-width:1200px;margin:0 auto}
@media(max-width:699px){.ts-banner .ts-ban .ban{max-width:none}}
.ts-banner .ts-ctrl{bottom:10px;left:50%;right:auto;transform:translateX(-50%);background:rgba(0,0,0,.45);padding:4px 10px;border-radius:999px}
.ts-banner .ts-dot{background:rgba(255,255,255,.5)}
.ts-banner .ts-dot.on{background:#fff}
.ts-banner .ts-pause{color:#fff}
.ts-banner .ts-toggle{color:#fff;background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.5)}
.ts-banner .ban-sponsor{bottom:44px}

.c-row.is-new{background:color-mix(in srgb,#D99A1E 8%,var(--bg));box-shadow:inset 3px 0 0 #D99A1E;padding-left:10px}
.c-sent{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}
.c-sent>b{font-size:.85rem}

/* ---------- Light mode (slow connections) ---------- */
body.light-mode{--serif:"Abyssinica SIL","Nyala","Noto Serif Ethiopic",Georgia,serif;--sans:"Noto Sans Ethiopic",system-ui,-apple-system,"Segoe UI",sans-serif}
body.light-mode *{animation:none!important;transition:none!important}
body.light-mode .pic,body.light-mode .fig,body.light-mode .cover img,body.light-mode .sq-img img,
body.light-mode .rail-item img,body.light-mode .ts-banner .ban img,body.light-mode .ad-thumb img,
body.light-mode .install,body.light-mode .ts-ad-img,body.light-mode .ts-img{display:none!important}
body.light-mode .sq-img{background:var(--soft);color:var(--ink)}
body.light-mode .sq-img .sq-cap{background:none;color:var(--ink);margin-top:auto}
body.light-mode .sq-img .sq-cap h3{color:var(--ink)}
body.light-mode .srow{grid-template-columns:1fr!important}
body.light-mode .ts-banner{min-height:150px}
body.light-mode .ban-alt{display:flex}
body.light-mode .ban-sponsor{display:none}
body.light-mode .ban-alt{padding-bottom:46px;background:rgba(0,0,0,.25)}
body.light-mode .cover.plain .g{opacity:.5}
.ban-alt{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;color:#fff;background:rgba(0,0,0,.35)}
.ban-alt b{font-family:var(--serif);font-size:clamp(1.1rem,3vw,1.6rem);line-height:1.35}
.ban-alt small{opacity:.8;font-size:.78rem}
.ban-cta{background:#fff;color:#111;border-radius:999px;padding:3px 14px;font-size:.8rem;font-weight:700;margin-top:4px}
.lite-pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:3px 10px;font-size:.74rem;font-weight:600;cursor:pointer;color:var(--muted);margin-right:4px}
.lite-pill .icon{width:14px;height:14px}
.lite-pill.on{border-color:#2E7D4F;color:#2E7D4F;background:color-mix(in srgb,#2E7D4F 10%,transparent)}
.lite-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;border:1px solid var(--line);border-left:4px solid #2E7D4F;background:var(--soft);padding:12px 14px;margin:16px 0 0;font-size:.9rem}
.lite-banner span{color:var(--muted);flex:1;min-width:200px;font-size:.84rem}
.lb-acts{display:flex;gap:8px;flex:0 0 auto}
.lite-note{border:1px dashed var(--line);padding:14px;text-align:center;color:var(--muted);font-size:.85rem;margin-top:10px}
.offline{padding:5px 10px}
body.has-outbox .offline{display:block;background:var(--ok)}
.help-ol{padding-left:18px;line-height:1.9;margin:6px 0 12px}
.pin-screen{min-height:100dvh;display:grid;place-items:center;background:var(--soft);padding:20px}
.pin-box{background:var(--bg);border:1px solid var(--line);padding:28px 24px;max-width:320px;width:100%;text-align:center}
.pin-box .code-in{margin:10px 0 14px}

.icon-preview{display:flex;gap:14px;align-items:center;margin:4px 0 14px}
.app-icon{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:1.5rem;line-height:1;flex-shrink:0}
.desk-icon{background:#121212;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);position:relative}
.desk-icon small{position:absolute;bottom:7px;font-family:var(--sans);font-size:.5rem;font-weight:600;letter-spacing:.06em;color:#F0B545}

/* ---------- Editorial workflow ---------- */
.sync-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:var(--fs-meta);font-weight:600;color:var(--muted);white-space:nowrap}
.sync-chip i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.sync-chip.pending{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.sync-chip.pending i{background:var(--warn)}
.sync-chip.offline{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.sync-chip.offline i{background:var(--bad)}
.rev-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.conflict-bar{border-left:4px solid var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--bg));padding:10px 12px;font-size:.88rem;margin:0 0 14px}
.vlist{list-style:none;margin:0;padding:0}
.vlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.vlist li.conflict{background:color-mix(in srgb,var(--bad) 6%,transparent)}
.vlist .sub{font-size:.76rem;color:var(--muted)}
.ver-view{border:1px solid var(--line);padding:12px;margin-top:10px;max-height:340px;overflow:auto;background:var(--soft)}
.ver-view .prose{font-size:1rem}
.inote{border-left:3px solid var(--line);padding:6px 10px;margin-top:8px;font-size:.88rem}
.inote time{color:var(--faint);font-size:.75rem;margin-left:6px}
.inote p{margin:4px 0 0}
.notes-list{margin-top:6px}
.tmsg{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:.88rem;background:var(--bg)}
.tmsg.me{background:var(--soft)}
.tmsg time{color:var(--faint);font-size:.74rem;margin-left:6px}
.tmsg p{margin:4px 0 0}
.wdetail{flex:1 0 100%;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.wdetail h4{margin:10px 0 6px;font-size:.82rem}
.wrow{align-items:flex-start}

/* ---------- Proverbs table ---------- */
.imp-btn{position:relative;overflow:hidden}
.imp-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.imp-box{border-color:var(--ok)}
.prov-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0 14px}
.today-strip{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-left:3px solid #D99A1E;padding:8px 12px}
.today-strip b{font-family:var(--serif);font-size:1.05rem}
.prov-search{max-width:260px;min-height:38px}
.prov-tbl{min-width:620px}
.prov-tbl td{vertical-align:middle}
.prow{cursor:pointer}
.prow:hover{background:var(--soft)}
.prow.on{background:color-mix(in srgb,#D99A1E 10%,transparent)}
.prow.on .prov-cell{font-weight:600}
.prow.open{background:var(--soft)}
.prov-cell{font-family:var(--serif);font-size:1rem;line-height:1.5}
.prov-note{display:block;font-family:var(--sans);font-size:.78rem;color:var(--muted);margin-top:2px}
.prov-state{white-space:nowrap}
.prov-when{font-size:.76rem;color:var(--muted)}
.prov-when.queued{color:var(--faint)}
.prov-acts{text-align:right;white-space:nowrap}
.prov-acts .btn{margin-left:4px}
.prov-acts .hint{font-size:.72rem}

/* reading-format menu */
.fmt-wrap{position:relative;display:inline-block}
.fmt-btn .chev{font-size:.7rem;opacity:.7}
.fmt-btn[aria-expanded="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fmt-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px;width:min(280px,86vw);text-align:left}
.fmt-head-sm{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:.78rem;font-weight:700;padding:4px 8px 8px}
.fmt-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px;cursor:pointer;color:var(--ink)}
.fmt-item:hover{background:var(--soft)}
.fmt-item.on{background:color-mix(in srgb,#D99A1E 12%,transparent)}
.fmt-item .icon{width:19px;height:19px;flex-shrink:0;margin-top:2px}
.fmt-item span{display:flex;flex-direction:column;gap:1px;min-width:0}
.fmt-item b{font-size:.88rem}
.fmt-item small{font-size:.72rem;color:var(--muted);line-height:1.35}
@media(max-width:560px){.fmt-menu{right:auto;left:0}}

.read-btn{display:inline-flex;align-items:center;gap:6px}
.read-btn .icon{width:16px;height:16px}

/* ---------- Typography settings ---------- */
.tp-h{font-size:.82rem;margin:16px 0 8px}
.font-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:700px){.font-grid{grid-template-columns:1fr}}
.font-card{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--bg);cursor:pointer;color:var(--ink)}
.font-card:hover{border-color:var(--ink)}
.font-card.on{border-color:#D99A1E;box-shadow:inset 0 0 0 1px #D99A1E;background:color-mix(in srgb,#D99A1E 7%,var(--bg))}
.fc-name{font-size:.78rem;font-weight:700}
.fc-sample{font-size:1.05rem;line-height:1.6}
.fc-note{font-size:.72rem;color:var(--muted)}
.tp-preview{border:1px dashed var(--line);padding:14px 16px;margin-top:12px;max-height:230px;overflow:auto}
.tp-preview .prose{font-size:1.05rem}
input[type=range]{width:100%;accent-color:var(--ink)}
/* live site: hide demo-only parts; hold the page until real data is in */
.live .demo-chip,.live .demo-box,.live .box:has([data-a="resetdemo"]){display:none!important}
.live:not(.google-on) .login-card .sso,.live:not(.google-on) .login-card .sso+.hint,.live:not(.google-on) .login-card .or{display:none!important}
.g-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;font-weight:600}
.g-btn svg{flex-shrink:0}
.live-pending #root{visibility:hidden}
#boot{display:none;pointer-events:none;position:fixed;inset:0;z-index:5;place-items:center;font:800 2.4rem "Noto Serif Ethiopic",serif;color:#999;animation:pulse 1.2s ease-in-out infinite alternate}
.live-pending #boot{display:grid}
@keyframes pulse{from{opacity:.35}to{opacity:1}}
.wa-list{display:flex;flex-direction:column;gap:8px}
.wa-contact{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);text-decoration:none}
.wa-contact:hover{border-color:#25D366;background:color-mix(in srgb,#25D366 6%,var(--bg))}
.wa-dot{width:38px;height:38px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;flex-shrink:0}
.wa-dot svg{width:20px;height:20px;fill:#fff}
.wa-c-main{flex:1;min-width:0;display:flex;flex-direction:column}
.wa-c-main b{font-size:1rem}
.wa-c-main small{color:var(--muted);font-size:var(--fs-helper)}
.wa-go{font-weight:700;color:#128C7E;white-space:nowrap}
.rt-gap{gap:2px}
.rt-gap-l{font-size:.72rem;color:var(--muted);padding:0 4px}
.rt-gap-v{min-width:44px;text-align:center;font-size:.82rem;font-variant-numeric:tabular-nums;font-weight:600}
.rt-gap-v small{display:block;font-size:.58rem;font-weight:400;color:var(--muted);line-height:1}
.font-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:6px}
.font-pick button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer;color:var(--ink)}
.font-pick button span{font-size:1.25rem;line-height:1.3}
.font-pick button small{font-size:.72rem;color:var(--muted)}
.font-pick button.on{border-color:#D99A1E;box-shadow:inset 0 0 0 1px #D99A1E;background:color-mix(in srgb,#D99A1E 8%,var(--bg))}

/* ---------- Desk menu: collapsible groups + account menu ---------- */
.dgroups{gap:4px!important}
.dgroup-h{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;cursor:pointer;padding:8px 10px;border-radius:7px;font-size:var(--fs-meta);font-weight:700;color:var(--muted);text-align:left;letter-spacing:.02em}
.dgroup-h:hover{background:var(--bg);color:var(--ink)}
.dgroup-h span:first-child{flex:1}
.dgroup-h .chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s;transform:rotate(-90deg)}
.dgroup.open .dgroup-h .chev{transform:none}
.dgroup-items{display:none;flex-direction:column;gap:1px;padding:2px 0 6px}
.dgroup.open .dgroup-items{display:flex}
.duser-wrap{position:relative;border-top:1px solid var(--line);padding-top:10px}
.duser{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;cursor:pointer;padding:8px;border-radius:8px;text-align:left;color:var(--ink)}
.duser:hover,.duser[aria-expanded="true"]{background:var(--bg)}
.duser .dl-t{flex:1;display:flex;flex-direction:column;line-height:1.3}
.duser small{color:var(--muted);font-size:var(--fs-meta)}
.duser .dots{width:18px;height:18px;fill:var(--muted);flex-shrink:0}
.umenu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.16);padding:6px;z-index:5}
.umi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:7px;cursor:pointer;color:var(--ink);font-size:var(--fs-table);text-align:left;text-decoration:none}
.umi:hover{background:var(--soft)}
.umi .icon{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.umi span:nth-child(2){flex:1}
.umi-v{font-size:var(--fs-meta);color:var(--muted)}
.umi.danger{color:var(--bad)}
.umi.danger .icon{color:var(--bad)}
.umi-sep{height:1px;background:var(--line);margin:4px 6px}
@media(max-width:1099px) and (min-width:700px){
  .dgroup-h{display:none}
  .dgroup-items{display:flex!important}
  .duser .dl-t,.duser .dots{display:none}
  .duser{justify-content:center}
  .umenu{left:0;right:auto;width:240px}
}

.prow2{border-bottom:1px solid var(--line)}
.prow2.open{background:var(--soft);border-radius:8px;margin:6px 0;border-bottom:0}
.prow2.open>.drow{padding-left:10px;padding-right:10px}
.pedit{padding:6px 14px 14px}
.rights{display:flex;flex-direction:column;gap:4px}
.rights .chk{min-height:36px}
.pill.off{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);border-color:transparent}

.a-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.a-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.a-chart{display:flex;align-items:flex-end;gap:2px;height:140px;border-bottom:1px solid var(--line);padding-top:6px}
.a-chart span{flex:1;background:#D99A1E;border-radius:2px 2px 0 0;min-width:2px;opacity:.85}
.a-chart span:hover{opacity:1}
.a-axis{display:flex;justify-content:space-between;font-size:var(--fs-meta);color:var(--muted);margin-top:4px}

.ts-tab{display:flex;justify-content:center;background:transparent;height:0;position:relative;z-index:20}
.ts-tab button{position:absolute;top:0;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:var(--bg);color:var(--muted);font-size:.72rem;padding:3px 12px 5px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.06)}
.ts-tab button:hover{color:var(--ink)}
.ts-tab svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.sec-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px}

.cf-bar{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:14px;background:var(--soft)}
.cf-q{width:100%;margin-bottom:10px}
.cf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cf-f{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-meta);color:var(--muted);font-weight:600}
.cf-f .select,.cf-f .input{min-height:36px;padding:4px 8px;font-size:var(--fs-label)}
.cf-sum{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:var(--fs-helper);color:var(--muted)}
.cf-gh{margin-top:22px}

.msg-row{display:flex;gap:12px;align-items:flex-start;padding:14px 4px;border-bottom:1px solid var(--line)}
.msg-row.is-new{background:color-mix(in srgb,#D99A1E 7%,transparent);box-shadow:inset 3px 0 0 #D99A1E;padding-left:12px}
.msg-main{flex:1;min-width:0}
.msg-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.msg-head time{margin-left:auto;font-size:var(--fs-meta);color:var(--faint)}
.msg-about{font-size:var(--fs-helper);color:var(--muted);margin-top:2px}
.msg-about a{text-decoration:underline}
.msg-main p{margin:6px 0 0;font-family:var(--serif);line-height:1.7}
.msg-del{opacity:.5}
.msg-row:hover .msg-del{opacity:1}

/* ---------- Review page ---------- */
.rv{padding-bottom:90px}
.rv-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.rv-status{display:flex;gap:6px}
.rv-tabs{margin-left:auto;display:flex;gap:4px}
.rv-tab{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 12px;font-size:.8rem;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.rv-tab:hover{border-color:var(--ink)}
.rv-tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rv-n{background:#D99A1E;color:#fff;border-radius:9px;font-size:.65rem;padding:0 6px;font-weight:700}
.rv-doc{max-width:760px;margin:0 auto}
.rv.with-panel .rv-doc{margin:0;max-width:calc(100% - 400px)}
.rv-panel{position:fixed;top:56px;right:0;bottom:0;width:380px;background:var(--bg);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.06);z-index:40;display:flex;flex-direction:column}
.rv-panel-h{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.rv-ptabs{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.rv-panel-b{padding:14px 16px 100px;overflow-y:auto;flex:1}
.rv-panel-b .textarea{margin:8px 0}
.rv-bar{position:fixed;left:248px;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:8px;padding:12px 24px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.rv-bar.sheet{flex-direction:column;align-items:stretch;gap:8px;box-shadow:0 -10px 30px rgba(0,0,0,.1)}
.rv-bar.sheet .actions{justify-content:flex-end}
.rv-spacer{flex:1}
.rv-opt span{margin-left:4px}
.danger-t{color:var(--bad)}
@media(max-width:1099px) and (min-width:700px){.rv-bar{left:76px}}
@media(max-width:1099px){.rv.with-panel .rv-doc{max-width:none}.rv-panel{width:min(420px,100%)}}
@media(max-width:699px){
  .rv{padding-bottom:150px}
  .rv-tabs{margin-left:0;width:100%}
  .rv-bar{left:0;bottom:62px;padding:10px 12px;flex-wrap:wrap}
  .rv-bar .btn{flex:1;min-width:0;padding-left:8px;padding-right:8px}
  .rv-spacer{display:none}
  .rv-opt span{display:none}
  .rv-opt{flex:0 0 auto!important}
  .rv-panel{top:auto;left:0;height:78vh;width:100%;border-left:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -12px 30px rgba(0,0,0,.18);z-index:130}
}

.rv-tab{white-space:nowrap}
.pform .pf-sec{padding:12px 0;border-top:1px solid var(--line)}
.pform .pf-sec:first-of-type{border-top:0;padding-top:4px}
.pf-h{display:block;font-size:.74rem;font-weight:700;color:var(--muted);margin-bottom:8px;letter-spacing:.02em}
.pform .form-grid{gap:10px 14px;align-items:start}
.pform .input{min-height:44px;height:44px}
.pform .pw .input{height:44px}
.pform .field{margin-bottom:6px}
.pf-rights{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.sw-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);cursor:pointer}
.sw-row:first-child{border-top:0}
.sw-row>span{flex:1;display:flex;flex-direction:column}
.sw-row b{font-size:.9rem}
.sw-row small{font-size:.74rem;color:var(--muted)}
.tgl{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s;margin:0}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.tgl:checked{background:#2E7D4F}
.tgl:checked::after{transform:translateX(18px)}
.tgl:disabled{opacity:.55;cursor:default}
.tgl:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.dtop-r{display:flex;align-items:center;gap:10px}
.sync-chip{height:30px;padding:0 12px;border-radius:999px;background:var(--bg);font-size:var(--fs-meta);gap:7px;transition:border-color .15s,background .15s}
.sync-chip:hover{border-color:var(--ink);background:var(--soft)}
.sync-chip i{width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.sync-chip.pending i{box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}
.sync-chip.offline i{box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 20%,transparent)}
@media(max-width:699px){.sync-chip span{display:none}.sync-chip{padding:0 10px}}
.box .help-ol{font-size:.84rem;line-height:1.8}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stream-tight{margin-top:4px}
.page-top{display:flex;align-items:center;margin:10px 0 6px}
.back-btn{display:inline-flex;align-items:center;gap:4px;border:0;background:none;cursor:pointer;color:var(--muted);font-size:.85rem;padding:6px 8px 6px 2px;border-radius:6px}
.back-btn:hover{color:var(--ink)}
.back-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.acc-compact{padding-top:0!important;margin-top:0!important}
.acc-head{display:flex;align-items:center;gap:12px;padding:10px 0 14px;border-bottom:1px solid var(--line)}
.acc-id{flex:1;min-width:0;display:flex;flex-direction:column}
.acc-id b{font-family:var(--serif);font-size:1.15rem}
.acc-id small{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.acc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.acc-tiles a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}
.acc-tiles a:hover{border-color:var(--ink)}
.acc-tiles b{font-size:1.2rem}
.acc-tiles span{font-size:.76rem;color:var(--muted)}
.acc-sec-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.acc-post{padding:8px 0}
.acc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:.82rem}
.acc-foot a{color:var(--muted);text-decoration:underline}
.ct-wrap{max-width:560px;margin:0 auto}
.ct-title{margin:0 0 14px}
.ct-group{margin-bottom:18px}
.ct-h{display:block;font-size:.74rem;font-weight:700;color:var(--muted);margin:0 0 8px;letter-spacing:.03em}
.wa-dot.mail{background:#2A6DB5}
.wa-dot.mail svg{fill:none;stroke:#fff;stroke-width:1.8}
.ct-mail:hover{border-color:#2A6DB5;background:color-mix(in srgb,#2A6DB5 6%,var(--bg))}
.ct-mail .wa-go{color:#2A6DB5}
.ce-row{display:grid;grid-template-columns:1fr 1.2fr auto;gap:8px;margin-bottom:8px}
@media(max-width:600px){.ce-row{grid-template-columns:1fr auto}.ce-row input[data-ce="email"]{grid-column:1/2}}
.input.bad{border-color:var(--bad)}
.pstory{display:block;border:1px solid var(--line);border-left:4px solid #D99A1E;border-radius:10px;padding:14px 16px;margin:14px 0 6px;color:var(--ink);text-decoration:none;background:var(--soft)}
.pstory:hover{border-color:var(--ink);border-left-color:#D99A1E}
.pstory b{display:block;font-family:var(--serif);font-size:1.15rem;margin:4px 0}
.pstory-t{display:block;color:var(--muted);font-size:.9rem;line-height:1.6}
.pstory-go{display:inline-block;margin-top:6px;font-weight:700;font-size:.85rem}
.pstory-edit summary{cursor:pointer;list-style:none}
.pstory-edit summary::-webkit-details-marker{display:none}
.pstory-edit .textarea{min-height:180px}
.prov-page{max-width:760px;margin:0 auto}
.prov-page .plist,.prov-page .plist-h{max-width:none;margin-left:0;margin-right:0}
.prov-page .plist-h{border-top:0}

/* ---------- Section front ---------- */
.sf{margin-top:14px}
.sf a{color:var(--ink);text-decoration:none}
/* Category page: every piece is the same square tile as on the home page, with the
   title and details inside the picture. */
.sf-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sf-tiles .sq h3{font-size:.98rem}
/* The title sits on a dark fade over the bottom of the picture: clear at the top,
   darkest at the foot, so there is no visible edge, and it stops well short of the
   middle of the picture. */
.sf-tiles .sq-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.35) 45%,rgba(0,0,0,.7));pointer-events:none}
.sf-tiles .sq-img .sq-cap{background:none;z-index:1}
.sf-tiles .sq-img .sq-cap *{text-shadow:0 1px 3px rgba(0,0,0,.6)}
.sf-tiles .sq-sum,.sf-tiles .sq-poem{-webkit-line-clamp:3}
@media(max-width:1000px){.sf-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:699px){.sf-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sf-tiles .sq h3{font-size:.9rem}.sf-tiles .sq-cap{padding:10px}.sf-tiles .sq-txt{padding:12px}}
.sf-by{display:block;font-size:.76rem;color:var(--muted);margin-top:6px}
.sf-sum{margin:6px 0 0;color:var(--muted);line-height:1.6;font-size:.95rem}
.sf-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.sf-lead{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}
.sf-lead.noimg{grid-template-columns:1fr;max-width:760px}
.sf-lead-img img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.sf-lead-h{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.25;margin:0}
.sf-lead:hover .sf-lead-h,.sf-card:hover .sf-card-h,.sf-row:hover h3{text-decoration:underline;text-underline-offset:3px}
.sf-lead .sf-sum{font-size:1.02rem;-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.sf-lead.poem{border-bottom:1px solid var(--line)}
/* No gold rule above the lead poem. The quotation mark below it already
   marks a poem, so the line was a second mark doing the same job, and it cut
   the page in half right where the reading starts. The spacing it used to
   carry is kept, so nothing below it moves. */
.sf-lead.poem .sf-lead-txt{padding-top:14px}
.sf-lead.poem .pc-mark{display:block;font-size:3rem;line-height:.8;height:.5em;color:#D99A1E;margin-bottom:8px}
.sf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid var(--line)}
.sf-grid.n1{grid-template-columns:1fr}.sf-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sf-card{display:block;padding:16px 16px 18px;border-left:1px solid var(--line)}
.sf-card:first-child{border-left:0;padding-left:0}
.sf-card:last-child{padding-right:0}
.sf-card-img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;margin-bottom:10px}
.sf-card-h{font-family:var(--serif);font-size:1.08rem;line-height:1.35;margin:0}
.sf-card.poem{border-top:0}
.sf-card .pc-mark{display:block;font-size:2.2rem;line-height:.8;height:.5em;color:#D99A1E;margin-bottom:6px}
.sf-latest{font-size:.8rem;font-weight:700;letter-spacing:.04em;margin:22px 0 4px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.sf-row{display:grid;grid-template-columns:110px 1fr 150px;gap:18px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.sf-row time{font-size:.76rem;color:var(--muted);padding-top:4px}
.sf-row h3{font-family:var(--serif);font-size:1.15rem;line-height:1.35;margin:0}
.sf-row img{width:150px;aspect-ratio:3/2;object-fit:cover}
.sf-row:not(:has(img)){grid-template-columns:110px 1fr}
@media(max-width:1000px){.sf-grid,.sf-grid.n3,.sf-grid.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-card:nth-child(odd){border-left:0;padding-left:0}.sf-card:nth-child(even){padding-right:0}
  .sf-card:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:699px){
  .sf-lead{grid-template-columns:1fr;gap:12px}
  .sf-grid,.sf-grid.n2,.sf-grid.n3,.sf-grid.n4{grid-template-columns:1fr}
  .sf-card{padding:14px 0!important;border-left:0!important;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 110px;gap:4px 12px}
  .sf-card:first-child{border-top:0}
  .sf-card-img{grid-column:2;grid-row:1/4}
  .sf-card-img img{margin:0;aspect-ratio:1!important;width:100%!important}
  .sf-card.noimg{display:block}
  .sf-row{grid-template-columns:1fr 96px;gap:12px}
  .sf-row time{display:none}
  .sf-row img{width:96px;aspect-ratio:1}
  .sf-row:not(:has(img)){grid-template-columns:1fr}
}
.ul-wrap{max-width:760px;margin:0 auto}
.ul-item{position:relative}
.ul-item .sf-row{padding-right:40px}
.ul-x{position:absolute;top:14px;right:0;opacity:.55}
.ul-item:hover .ul-x{opacity:1}
main{padding-bottom:20px}
.pub{padding-bottom:70px}
@media(min-width:900px){.pub{padding-bottom:0}}

/* ---------- Footer shortcuts ---------- */
.foot{border-top:1px solid var(--rule);margin-top:40px;padding:20px 0 20px}
.foot-logo{font-family:var(--serif);font-weight:800;font-size:1.9rem;line-height:1}
.foot-grid{display:grid;gap:16px 16px;grid-template-columns:repeat(2,1fr);margin-top:14px}
@media(min-width:760px){.foot-grid{grid-template-columns:repeat(5,1fr)}}
.foot h4{font-size:.8rem;font-weight:700;margin:0 0 6px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.foot a,.foot button.lnk{font-size:.85rem;line-height:1.5;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.foot a:hover,.foot button.lnk:hover{color:var(--ink);text-decoration:underline}
.foot button.lnk{text-decoration:none}
.foot a.foot-logo{font-size:1.9rem;color:var(--ink);line-height:1}
.foot a.foot-logo:hover{text-decoration:none}
.foot-bottom{border-top:1px solid var(--line);margin-top:16px;padding-top:10px;font-size:.75rem;color:var(--faint);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.page{max-width:680px;margin:0 auto;padding-top:28px;font-family:var(--serif);font-size:1.1rem;line-height:1.9}
.page p{margin:0 0 1.1em}

/* ---------- Analytics ---------- */
.an-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:760px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.kpis{grid-template-columns:repeat(6,1fr)}}
.kpis>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px}
.kpis b{display:block;font-family:var(--serif);font-size:1.6rem;line-height:1.25;font-variant-numeric:tabular-nums}
.kpis span{display:block;font-size:var(--fs-meta);color:var(--muted)}
.delta{font-size:var(--fs-meta);font-weight:600}
.delta.up{color:var(--ok)}.delta.down{color:var(--bad)}
/* ---- ጥዕና ሳይት: one line per thing checked, with what to do when it fails ----
   --ok and --bad already answer to both light and dark, so this needs no
   colours of its own and cannot drift away from the rest of the desk. */
.hz{list-style:none;margin:20px 0 0;padding:0}
.hz li{display:flex;gap:12px;padding:14px 2px;border-top:1px solid var(--line)}
.hz li b{font-size:18px;line-height:1.3;width:20px;flex:none}
.hz li.y b,.hz-ok{color:var(--ok)}
.hz li.n b,.hz-no{color:var(--bad)}
.hz li p{margin:0;font-weight:600}
.hz li small{display:block;margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.55}
.hz-links{margin:8px 0 0}
.hz-links dt{margin-top:14px;font-weight:600}
.hz-links dd{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.an-sec{margin-top:36px}
.an-sec>.hint{margin:8px 0 12px;display:block}
.an-2{display:grid;gap:36px}
@media(min-width:900px){.an-2{grid-template-columns:1fr 1fr}.an-2 .an-sec{margin-top:0}}
.an-row{margin-top:36px}
.chart{width:100%;height:auto;display:block;margin-top:10px}
.chart .gl{stroke:var(--line)}
.chart .ln{stroke:var(--ink);fill:none;stroke-width:2}
.chart .ln2{stroke:var(--faint);fill:none;stroke-width:1.5;stroke-dasharray:4 4}
.chart .ar{fill:var(--ink);opacity:.06}
.chart text{fill:var(--faint);font-size:11px;font-family:var(--sans)}
.legend{display:flex;gap:18px;font-size:.78rem;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:18px;border-top:2px solid var(--ink);vertical-align:middle;margin-right:6px}
.legend i.p{border-top:2px dashed var(--faint)}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-label);min-width:540px}
.tbl th{text-align:left;font-size:var(--fs-meta);color:var(--muted);font-weight:600;padding:8px 12px 8px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.tbl td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td b{font-family:var(--serif);font-weight:600}
.hbar{display:grid;grid-template-columns:120px 1fr 48px;gap:10px;align-items:center;padding:5px 0;font-size:var(--fs-label)}
.hbar .t{background:var(--soft);height:10px}
.hbar .t i{display:block;height:10px;background:var(--ink)}
.hbar span:last-child{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.heat{display:grid;grid-template-columns:44px repeat(24,1fr);gap:2px;font-size:.66rem;color:var(--faint);min-width:540px;margin-top:10px}
.heat i{aspect-ratio:1;background:var(--ink);display:block}
.callout{border-left:3px solid var(--ink);padding:8px 12px;background:var(--soft);font-size:.86rem;margin-top:14px}
.gap{color:var(--bad);font-weight:600;font-size:.74rem;white-space:nowrap}
@media print{
  .deskbar,.an-actions,.toast,.demo-chip,.offline,.no-print{display:none!important}
  body{background:#fff;color:#000}
  .an-sec,.an-2{break-inside:avoid}
  .print-only{display:block!important}
}
.print-only{display:none}
.front{display:grid;gap:0;margin-top:22px}
@media(min-width:960px){.front{grid-template-columns:2.1fr 1fr}.front-side{border-left:1px solid var(--line);padding-left:24px;margin-left:24px}}
.lead{display:grid;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
@media(min-width:700px){.lead{grid-template-columns:1fr 1.5fr;gap:24px}}
.kicker{font-size:.78rem;color:var(--muted);display:block;margin-bottom:6px}
.hl{font-family:var(--serif);font-weight:700;line-height:1.25;margin:0}
.hl-xl{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.hl-lg{font-size:1.35rem}
.hl-md{font-size:1.12rem}
.sum{font-family:var(--serif);color:var(--muted);margin:8px 0 0;font-size:.98rem;line-height:1.6}
.meta{display:block;font-size:.75rem;color:var(--faint);margin-top:8px}
a.story:hover .hl{color:var(--muted)}
.cols{display:grid;gap:0}
.cols>*{padding:18px 0;border-bottom:1px solid var(--line)}
@media(min-width:700px){
  .cols.c3{grid-template-columns:repeat(3,1fr)}
  .cols.c4{grid-template-columns:repeat(4,1fr)}
  /* Equal columns with a gap between them (not unequal side padding), so every
     card and its picture comes out exactly the same width. The rule between
     columns is drawn in the middle of the gap. */
  .cols{column-gap:32px}
  .cols>*{border-bottom:0;position:relative}
  .cols>*+*::before{content:"";position:absolute;left:-16px;top:0;bottom:0;border-left:1px solid var(--line)}
}
.cols .cover{margin-bottom:10px}
.front-side section{padding:4px 0 20px}
.front-side section+section{border-top:1px solid var(--line);padding-top:18px}
.side-h{font-size:.85rem;font-weight:700;margin:0 0 12px}
.proverb q{font-family:var(--serif);font-size:1.45rem;line-height:1.5;quotes:none;display:block}
.proverb .en{font-style:italic;font-family:"Noto Serif",serif;display:block;margin-top:8px}
.ranked{list-style:none;margin:0;padding:0;counter-reset:r}
.ranked li{counter-increment:r;display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.ranked li:first-child{border-top:0;padding-top:0}
.ranked li::before{content:counter(r);font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--faint);line-height:1;min-width:20px}
.sblock{margin-top:34px;border-top:1px solid var(--rule);padding-top:8px}
.sblock-h{font-size:.95rem;font-weight:700;margin:0}
.sblock-h a:hover{text-decoration:underline}
.install{display:flex;gap:12px;align-items:center;border:1px solid var(--line);padding:10px 14px;margin-top:18px;font-size:.88rem}
.install p{margin:0;flex:1}

/* ---------- Section page ---------- */
.sec-head{text-align:center;padding:26px 0 18px;border-bottom:1px solid var(--rule)}
.sec-head h1{font-family:var(--serif);font-size:clamp(2rem,5vw,2.8rem);margin:0}
.stream{max-width:900px;margin:0 auto}
.srow{display:grid;grid-template-columns:1fr 120px;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
@media(min-width:700px){.srow{grid-template-columns:140px 1fr 200px;gap:24px}}
.srow time{font-size:.78rem;color:var(--faint);display:none}
@media(min-width:700px){.srow time{display:block}}
.srow .cover{aspect-ratio:3/2}
.srow .cover .g{font-size:2.4rem}
.pv{padding:22px 0;border-bottom:1px solid var(--line);text-align:center}
.pv q{font-family:var(--serif);font-size:1.5rem;quotes:none}
.empty{text-align:center;padding:48px 16px;color:var(--muted)}

/* ---------- Article ---------- */
.article{max-width:680px;margin:0 auto;padding-top:28px}
.article .hl{font-size:clamp(1.9rem,4.5vw,2.7rem)}
.article .dek{font-family:var(--serif);font-size:1.15rem;color:var(--muted);margin:12px 0 0}
.byl{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:20px 0;font-size:.85rem}
.byl b{font-weight:700}
.byl time{display:block;color:var(--faint);font-size:.78rem}
.tools{display:flex;gap:2px}
.fig{margin:0 0 28px}
.prose{font-family:var(--serif);font-size:calc(1.15rem * var(--fs,1) * var(--tscale,1));line-height:var(--lh,1.75)}
.prose p{margin:0 0 var(--pgap,0.45em)}
.prose.poem{white-space:pre-line;text-align:center;line-height:calc(var(--lh,1.75) + .25);padding:10px 0}
.prose.big{text-align:center;font-size:calc(2rem * var(--fs,1));line-height:1.6;padding:30px 0 10px}
.endrule{border:0;border-top:1px solid var(--line);margin:30px 0}
.share{display:flex;gap:16px;font-size:.85rem;flex-wrap:wrap}
.share a{text-decoration:underline;text-underline-offset:3px}
.more{margin-top:30px;border-top:1px solid var(--rule);padding-top:8px}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--ink);width:0;z-index:40}

/* ---------- Mobile tab bar (public) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);display:flex;padding:6px 0 calc(6px + env(safe-area-inset-bottom));z-index:30}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:.7rem;color:var(--faint)}
.tabbar a.on{color:var(--ink);font-weight:600}
@media(min-width:900px){.tabbar{display:none}}
.search-in{width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;font-family:var(--serif);font-size:1.6rem;padding:10px 0;margin:26px 0 10px;outline:none}
.demo-chip{position:fixed;left:12px;bottom:78px;z-index:35;background:#fffbe6;color:#5c4400;border:1px dashed #c9a227;font-size:var(--fs-meta);padding:5px 10px;border-radius:4px}
@media(min-width:900px){.demo-chip{bottom:14px}}

/* ---------- Buttons & forms (desk) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);border-radius:var(--r-1);padding:9px 16px;font-weight:600;font-size:var(--fs-body);cursor:pointer;min-height:var(--tap);transition:background-color var(--t),border-color var(--t),opacity var(--t)}
.btn:hover{opacity:.88}
.btn:active{opacity:.75}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.line:hover{border-color:var(--ink)}
.btn.danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.btn.sm{padding:4px 10px;min-height:32px;font-size:.82rem}
.is-desk .btn.sm{padding:4px 12px;min-height:var(--tap);font-size:var(--fs-label)}
.btn.full{width:100%}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:transparent}
.btn.ghost:hover{background:var(--soft);opacity:1}
.btn.danger:hover{background:var(--bad-bg);opacity:1}
.btn.solid-danger{background:var(--bad);border-color:var(--bad);color:var(--bg)}
/* in-flight: the label stays, a small spinner replaces the icon space, clicks are ignored */
.btn.loading{position:relative;pointer-events:none;opacity:.75}
.btn.loading::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.field{display:grid;gap:5px;margin-bottom:16px}
.field label{font-size:var(--fs-label);font-weight:600}
.hint{font-size:var(--fs-helper);color:var(--muted)}
.field-err{font-size:var(--fs-helper);color:var(--bad-ink);margin:0}
.input,.select,.textarea{width:100%;border:1px solid var(--line);background:var(--field);border-radius:var(--r-1);padding:9px 11px;min-height:42px}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--ink)}
.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--bad)}
.textarea{min-height:240px;resize:vertical;font-family:var(--serif);line-height:1.9;font-size:1.05rem}
.textarea.short{min-height:100px}
.t-title{font-family:var(--serif);font-size:1.5rem;font-weight:700;border:0;border-bottom:1px solid var(--line);border-radius:0;padding-left:0;background:transparent}
.err{color:var(--bad);font-size:.85rem;margin:0 0 12px}
.pill{font-size:var(--fs-meta);font-weight:600;padding:2px 8px;border-radius:var(--r-1);border:1px solid currentColor;white-space:nowrap}
.pill.published,.pill.active{color:var(--ok-ink)}
.pill.submitted{color:var(--info-ink)}
.pill.changes{color:var(--warn-ink)}
.pill.draft,.pill.off{color:var(--faint)}
.pill.rejected{color:var(--bad-ink)}

/* ---------- Login ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px;background:var(--soft)}
.login-card{width:100%;max-width:380px;background:var(--bg);border:1px solid var(--line);padding:32px 28px}
.login-card .logo{font-size:2.6rem}
.login-card h1{font-size:1rem;text-align:center;margin:0 0 24px;font-weight:600}
.pw{position:relative}
.pw button{position:absolute;right:6px;top:6px;border:0;background:transparent;font-size:.78rem;color:var(--link);cursor:pointer;padding:6px}
.demo-box{margin-top:22px;border:1px dashed #c9a227;background:#fffbe6;color:#5c4400;padding:10px 12px;font-size:var(--fs-meta);line-height:1.5}

/* ---------- Desk shell ---------- */
.deskbar{border-bottom:1px solid var(--rule);background:var(--bg);position:sticky;top:0;z-index:30}
.deskbar-in{display:flex;align-items:center;gap:16px;min-height:56px}
.dlogo{font-family:var(--serif);font-weight:800;font-size:1.5rem}
.dlogo small{font-family:var(--sans);font-weight:500;font-size:var(--fs-meta);color:var(--muted);margin-left:6px}
.dnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.dnav a{padding:6px 10px;font-size:var(--fs-table);white-space:nowrap;border-bottom:2px solid transparent}
.dnav a.on{border-color:var(--ink);font-weight:600}
.who{display:flex;align-items:center;gap:10px;font-size:.82rem;white-space:nowrap}
@media(max-width:760px){.deskbar-in{flex-wrap:wrap;gap:4px 12px;padding-top:6px}.dnav{order:3;flex-basis:100%}.who .nm{display:none}}
.desk{padding:28px 0 60px}
.ptitle{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:20px}
.ptitle h1{font-family:var(--serif);font-size:var(--fs-title);margin:0;line-height:1.2}
.nums{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-bottom:26px}
@media(min-width:700px){.nums{grid-template-columns:repeat(4,1fr)}}
.nums div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 14px}
.nums b{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1.2}
.nums span{font-size:var(--fs-helper);color:var(--muted)}
.h2{font-size:.95rem;font-weight:700;margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.drow{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.drow .main{flex:1;min-width:180px}
.drow .main b{font-family:var(--serif);font-size:1.08rem}
.drow .sub{font-size:var(--fs-helper);color:var(--muted)}
.drow .cover{width:64px;aspect-ratio:1}
.drow .cover .g{font-size:1.6rem}
.note{border-left:3px solid var(--warn);padding:4px 10px;font-size:.85rem;margin-top:6px;background:var(--soft)}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--soft);border:1px solid var(--line);font-family:var(--serif);font-weight:700;flex-shrink:0}
.split{display:grid;gap:28px}
@media(min-width:920px){.split{grid-template-columns:1.3fr 1fr;align-items:start}.stick{position:sticky;top:76px}}
.box{border:1px solid var(--line);padding:18px}
.box+.box{margin-top:16px}
.box h3{font-size:var(--fs-table);margin:0 0 12px}
.steps{display:flex;gap:0;margin-bottom:22px;border-bottom:1px solid var(--line)}
.steps button{border:0;background:transparent;padding:8px 14px 10px 0;margin-right:14px;cursor:pointer;font-size:var(--fs-table);color:var(--faint);border-bottom:2px solid transparent;margin-bottom:-1px}
.steps button.on{color:var(--ink);border-color:var(--ink);font-weight:600}
.steps button.done{color:var(--ok)}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.counter{font-size:.78rem;text-align:right;color:var(--muted)}
.counter.over{color:var(--bad);font-weight:700}
.keys{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.keys button{border:1px solid var(--line);background:var(--bg);min-width:34px;height:34px;cursor:pointer;font-family:var(--serif)}
.upload{display:block;border:1px dashed var(--faint);padding:20px;text-align:center;cursor:pointer}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.upload img{max-height:180px;margin:0 auto 10px}
.checks{list-style:none;padding:0;margin:0 0 18px}
.checks li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.checks .y{color:var(--ok);font-weight:700;width:16px}.checks .n{color:var(--bad);font-weight:700;width:16px}
.social{border:1px solid var(--line);font-size:.9rem}
.social-top{display:flex;gap:10px;align-items:center;padding:10px}
.social-txt{padding:0 10px 10px;white-space:pre-wrap;word-break:break-word}
.social-img{aspect-ratio:1.91/1;background:var(--soft);display:grid;place-items:center;color:var(--faint);position:relative;overflow:hidden}
.social-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.social-link{padding:8px 10px;background:var(--soft);font-size:.8rem}
.opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.opt small{display:block;color:var(--muted);font-size:var(--fs-meta)}
.chk{display:flex;gap:6px;align-items:center;font-size:.88rem;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--ink)}
.nets{display:flex;gap:14px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line)}
.seg button{border:0;background:transparent;padding:6px 12px;cursor:pointer;font-size:var(--fs-label)}
.seg button.on{background:var(--ink);color:var(--bg)}
.form-grid{display:grid;gap:0 16px}
@media(min-width:700px){.form-grid{grid-template-columns:1fr 1fr}}
.cred{border:1px solid var(--ok);background:color-mix(in srgb,var(--ok) 6%,var(--bg));padding:18px;margin-bottom:22px}
.cred dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 14px;font-size:.92rem}
.cred dt{color:var(--muted)}
.cred dd{margin:0;font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.result{max-width:520px;margin:20px auto;text-align:center}
.result ul{list-style:none;padding:0;text-align:left;margin:20px 0}
.result li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;max-width:calc(100% - 32px)}
.toast.show{opacity:1}
@media(min-width:900px){.toast{bottom:28px}}
.offline{display:none;background:var(--warn);color:#fff;text-align:center;font-size:.8rem;padding:3px}
body.is-offline .offline{display:block}

/* ---------- Marker: easier to hit, smooth colour ---------- */
.prose.marking .mk-w{padding:2px 0;border-radius:3px;transition:background-color .08s ease;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.prose.marking{-webkit-tap-highlight-color:transparent}

/* ---------- Picture maker: text box lines closer together ---------- */
#picktext{line-height:1.7}
#picktext p{margin:0 0 .35em}

/* ---------- "Add to phone" hint fades away ---------- */
.install{transition:opacity .35s ease, transform .35s ease}
.install.fade-out{opacity:0;transform:translateY(-6px)}

/* ---------- Picture maker: line spacing control ---------- */
.space-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.space-pick button{width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:1.2rem;cursor:pointer}
.space-pick button:hover:not(:disabled){border-color:var(--ink)}
.space-pick button:disabled{opacity:.35;cursor:default}
.space-val{min-width:110px;text-align:center;font-weight:600;font-size:.9rem}
.space-pick .hint{flex-basis:100%;margin:0}

/* ---------- Highlights (ኣድምቕ) ---------- */
/* a soft pale yellow tint behind the words, not a solid block */
mark.rhl,.prose.rich mark.rhl{background:#FDF2BF;color:inherit;padding:0;border-radius:2px;cursor:pointer;
  box-shadow:none;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  transition:background-color .15s ease}
mark.rhl:hover,.prose.rich mark.rhl:hover{background:#FBE89B;box-shadow:none}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) mark.rhl,html:not([data-theme="light"]) .prose.rich mark.rhl{background:rgba(240,181,69,.26);box-shadow:none;color:inherit}
  html:not([data-theme="light"]) mark.rhl:hover{background:rgba(240,181,69,.38);box-shadow:none}
}
html[data-theme="dark"] mark.rhl,html[data-theme="dark"] .prose.rich mark.rhl{background:rgba(240,181,69,.26);box-shadow:none;color:inherit}
html[data-theme="dark"] mark.rhl:hover{background:rgba(240,181,69,.38);box-shadow:none}
.hl-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.hl-quote{flex:1;min-width:0;color:var(--ink);text-decoration:none;font-family:var(--serif);line-height:1.65}
.hl-quote:hover{text-decoration:underline;text-underline-offset:3px}
.hl-src{display:block;font-family:var(--sans);font-size:.76rem;color:var(--muted);margin-top:6px;text-decoration:none}
.hl-acts{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* the picture maker's text box looks exactly like the article */
.picktext.prose{font-size:1rem;max-height:46vh;overflow:auto;border:1px solid var(--line);padding:14px 16px}
.picktext.prose p{margin:0 0 var(--pgap,.45em)}

/* ---------- ንጸሓፋይ ሸልም (would you support the writer?) ---------- */
.sup{border:1px solid var(--line);border-radius:12px;padding:16px;margin:26px 0 8px;background:var(--soft);
  max-width:720px;margin-left:auto;margin-right:auto;transition:border-color .2s ease}
.sup:hover{border-color:var(--muted)}
.sup-open{border-color:#D99A1E;background:color-mix(in srgb,#D99A1E 6%,var(--bg))}
.sup-done{background:var(--bg)}
.sup-head{display:flex;align-items:center;gap:12px}
.sup-head>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sup-head b{font-family:var(--serif);font-size:1.02rem;line-height:1.35}
.sup-head small{color:var(--muted);font-size:.8rem;line-height:1.5}
.sup-ic{width:38px;height:38px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;flex-shrink:0}
.sup-ic svg{width:19px;height:19px}
.sup-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.sup-c{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);color:var(--ink);font-weight:600;font-size:.92rem;cursor:pointer;
  transition:transform .12s ease,border-color .12s ease,background .12s ease}
.sup-c span{font-size:1.5rem;line-height:1}
.sup-c:hover{transform:translateY(-2px)}
.sup-c.yes:hover{border-color:#2E7D4F;background:color-mix(in srgb,#2E7D4F 8%,var(--bg))}
.sup-c.maybe:hover{border-color:#D99A1E;background:color-mix(in srgb,#D99A1E 8%,var(--bg))}
.sup-c.no:hover{border-color:var(--muted)}
.sup-c:active{transform:scale(.97)}
.sup-bands{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.sup-band{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);
  cursor:pointer;font-size:.88rem;font-weight:600}
.sup-band:hover{border-color:#D99A1E;background:color-mix(in srgb,#D99A1E 8%,var(--bg))}
.sup-bars{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.sup-bar{display:grid;grid-template-columns:70px 1fr 42px;align-items:center;gap:10px;font-size:.82rem;color:var(--muted)}
.sup-bar .t{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.sup-bar i{display:block;height:100%;border-radius:4px;transition:width .5s ease}
.sup-bars .hint{margin:4px 0 0;text-align:right}
@media(max-width:560px){
  .sup{padding:14px}
  .sup-choices{grid-template-columns:1fr;gap:6px}
  .sup-c{flex-direction:row;justify-content:center;gap:10px;padding:12px}
  .sup-c span{font-size:1.2rem}
}

/* author picker: typing a new name */
.au-new{display:flex;gap:8px;margin-top:8px}
.au-new .input{flex:1;min-height:40px}
.au-pick{display:flex;flex-direction:column;gap:8px}

.del-ask{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--bad)}

/* optional extras when sending a piece */
.extra-box{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:6px 0 14px;background:var(--soft)}
.extra-box summary{cursor:pointer;list-style:none}
.extra-box summary::-webkit-details-marker{display:none}
.extra-box summary::before{content:"▸ ";color:var(--muted)}
.extra-box[open] summary::before{content:"▾ "}

/* ---------- The vote pop-up ---------- */
.sup-modal{max-width:460px;padding:18px}
.sup-q .sup-head{margin-bottom:2px}
.sup-modal .sup-choices{margin-top:16px}
@media(max-width:560px){.sup-modal{max-width:none;width:100%}}

/* ---------- ⭐ star for a writer ---------- */
.star-row{display:flex;align-items:center;gap:14px;max-width:720px;margin:26px auto 0;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.star-row>div{flex:1;display:flex;flex-direction:column;gap:2px}
.star-row b{font-family:var(--serif);font-size:1rem}
.star-row small{color:var(--muted);font-size:.8rem}
.star-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);color:var(--ink);cursor:pointer;font-weight:600;font-size:.9rem;
  transition:border-color .15s ease,background .15s ease,transform .1s ease}
.star-btn:hover{border-color:#D99A1E;background:color-mix(in srgb,#D99A1E 8%,var(--bg))}
.star-btn:active{transform:scale(.97)}
.star-btn.on{border-color:#D99A1E;background:color-mix(in srgb,#D99A1E 14%,var(--bg))}
.star-ic{font-size:1.15rem;line-height:1;color:#D99A1E}
.star-n{background:var(--soft);border-radius:999px;padding:1px 8px;font-size:.8rem;color:var(--muted)}
.star-btn.on .star-n{background:var(--bg)}
.star-btn.big{padding:12px 22px;font-size:1rem}
.star-btn.big .star-ic{font-size:1.4rem}
.author-star{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
@media(max-width:560px){.star-row{flex-direction:column;align-items:stretch;text-align:center}
  .star-row .star-btn{justify-content:center}}

/* ---------- ንጸሓፋይ ሸልም: the bar under the top strip ---------- */
.sup-top{border-bottom:1px solid var(--line);background:color-mix(in srgb,#2E7D4F 9%,var(--bg))}
.sup-top-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 20px}
.sup-top-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sup-top-txt b{font-family:var(--serif);font-size:.98rem;line-height:1.35}
.sup-top-txt small{color:var(--muted);font-size:.78rem}
.sup-top-btns{display:flex;gap:6px;flex-shrink:0}
.sup-top .sup-c{flex-direction:row;gap:6px;padding:8px 14px;font-size:.86rem}
.sup-top .sup-c span{font-size:1rem}
.sup-top .sup-ic{width:34px;height:34px;flex-shrink:0}
.sup-top-x{flex-shrink:0}
@media(max-width:860px){
  .sup-top-in{flex-wrap:wrap;padding:10px 14px 12px;gap:8px 10px;position:relative}
  .sup-top .sup-ic{display:none}
  .sup-top-txt{flex:1 1 100%;padding-right:30px}      /* room for the ✕ in the corner */
  .sup-top-txt b{font-size:.92rem}
  .sup-top-btns{flex:1 1 100%;order:3}
  .sup-top .sup-c{flex:1;justify-content:center;padding:10px 4px;font-size:.82rem}
  .sup-top-x{position:absolute;top:6px;right:8px}
}

/* ---- "unsent work found": offered when the copy on this device differs ---- */
.rescue-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  margin:0 0 14px;padding:11px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--warn,#B7791F) 12%,var(--bg));
  border:1px solid color-mix(in srgb,var(--warn,#B7791F) 34%,transparent)}
.rescue-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.rescue-txt b{font-size:.94rem}
.rescue-txt span{font-size:.8rem;opacity:.78}
.rescue-act{display:flex;gap:8px;flex-shrink:0}
@media(max-width:560px){.rescue-bar{flex-direction:column;align-items:stretch}
  .rescue-act{justify-content:flex-start}}

/* ---- "you are offline" notice where a piece's text would be ---- */
.off-note{display:flex;flex-direction:column;gap:7px;margin:24px 0;padding:16px 18px;border-radius:14px;
  background:var(--card,rgba(127,127,127,.07));border:1px solid rgba(127,127,127,.22)}
.off-note b{font-size:1rem}
.off-note span{font-size:.88rem;opacity:.8;line-height:1.55}
.off-note .off-tip{font-size:.82rem;opacity:.66}
.off-note>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* ---- Fixing the site's own wording, where you see it ---------------------- */
.wp-spot{cursor:pointer;border-bottom:1px dashed color-mix(in srgb,var(--accent,#2E7D4F) 60%,transparent);
  border-radius:2px;transition:background .12s}
.wp-spot:hover{background:color-mix(in srgb,var(--accent,#2E7D4F) 16%,transparent)}
.wp-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap;justify-content:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--accent,#2E7D4F) 14%,var(--bg));
  border-top:1px solid color-mix(in srgb,var(--accent,#2E7D4F) 40%,transparent);
  font-size:.84rem;box-shadow:0 -6px 24px -18px rgba(0,0,0,.6)}
.wp-bar .wp-n{opacity:.7;font-size:.78rem}
.wp-back{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.42)}
.wp-box{position:fixed;z-index:81;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(460px,calc(100vw - 32px));max-height:86vh;overflow:auto;
  background:var(--bg);border:1px solid var(--line,rgba(127,127,127,.3));
  border-radius:16px;padding:18px 18px 16px;box-shadow:0 20px 60px -20px rgba(0,0,0,.55)}
.wp-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin-bottom:6px}
.wp-was{font-size:1.02rem;line-height:1.6;padding:9px 11px;border-radius:10px;
  background:rgba(127,127,127,.1);margin-bottom:12px;word-break:break-word}
.wp-l{display:block;font-size:.8rem;opacity:.75;margin-bottom:5px}
.wp-in{width:100%;font-size:1.02rem;line-height:1.6;resize:vertical}
/* the list page in the desk */
.wl-row{display:flex;flex-direction:column;gap:6px;padding:11px 0;border-top:1px solid var(--line,rgba(127,127,127,.18))}
.wl-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.7rem;opacity:.62}
.wl-in{width:100%;font-size:1rem;line-height:1.6;resize:vertical}
.wl-was{font-size:.86rem;opacity:.7}
.wl-groups{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}

/* ---- The closed sign, shown while the site is being prepared ------------- */
.gate{min-height:78vh;display:grid;place-items:center;padding:32px 16px}
.gate-card{max-width:440px;width:100%;text-align:center;display:flex;flex-direction:column;
  gap:14px;align-items:center}
.gate-mark{width:74px;height:74px;border-radius:19px;display:grid;place-items:center;
  font-family:var(--serif,"Noto Serif Ethiopic",serif);font-weight:800;font-size:1.9rem;
  background:var(--ink,#16201a);color:var(--bg,#fff);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.gate h1{font-family:var(--serif,"Noto Serif Ethiopic",serif);font-size:1.7rem;margin:4px 0 0;
  line-height:1.35;text-wrap:balance}
.gate p{margin:0;font-size:.97rem;line-height:1.75;opacity:.82;max-width:34em}
.gate-form{width:100%;display:flex;flex-direction:column;gap:7px;margin-top:6px}
.gate-l{font-size:.86rem;opacity:.8}
.gate-state{display:flex;align-items:center;gap:9px;font-size:.88rem;
  padding:9px 12px;border-radius:10px;margin:0 0 10px;background:rgba(127,127,127,.09)}
.gate-state .gate-dot{width:9px;height:9px;border-radius:99px;flex-shrink:0}
.gate-state.open .gate-dot{background:var(--accent,#2E7D4F)}
.gate-state.shut .gate-dot{background:var(--warn,#B7791F)}
.gate-state span:last-child{opacity:.68;font-size:.82rem}
.gate-btn{width:100%}
.gate-row{display:flex;gap:8px}
.gate-row .input{flex:1;min-width:0}
.gate-fine{font-size:.78rem;opacity:.6}
.gate-ok{padding:11px 14px;border-radius:11px;font-size:.92rem;
  background:color-mix(in srgb,var(--accent,#2E7D4F) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#2E7D4F) 38%,transparent)}
.gate-wa{margin-top:4px}
.gate-foot{font-size:.78rem;opacity:.45;letter-spacing:.06em;margin-top:10px}
@media(max-width:420px){.gate-row{flex-direction:column}}
/* the switch in the desk */
.gate-admin.is-on{border-color:color-mix(in srgb,var(--warn,#B7791F) 46%,transparent);
  background:color-mix(in srgb,var(--warn,#B7791F) 7%,transparent)}

/* ---- "new pieces" — offered at the top of a list, never forced ---------- */
.newbar{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin:0 0 16px;padding:10px 16px;border-radius:99px;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:600;
  color:var(--bg);background:var(--ink);border:0;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.5);
  animation:newbar-in .3s ease}
.newbar:hover{opacity:.9}
.newbar-dot{width:7px;height:7px;border-radius:99px;background:#6FC28C;flex-shrink:0;
  animation:newbar-pulse 1.8s ease-in-out infinite}
@keyframes newbar-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes newbar-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.newbar,.newbar-dot{animation:none}}

/* ---- the shape of a poem while its words are on their way --------------- */
.skel{display:flex;flex-direction:column;gap:14px;margin:26px 0 0}
.skel i{display:block;height:1em;border-radius:5px;
  background:linear-gradient(90deg,rgba(127,127,127,.13) 25%,rgba(127,127,127,.22) 37%,rgba(127,127,127,.13) 63%);
  background-size:400% 100%;animation:skel 1.4s ease infinite}
@keyframes skel{from{background-position:100% 50%}to{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.skel i{animation:none}}

/* ---------- The poem view -------------------------------------------------
   A poem fills the screen on the colour its poet chose, with nothing else on
   it. The site's masthead, footer and top strip are taken away entirely —
   they belong to the article pages.                                        */
body.pmv-on .topstrip,body.pmv-on .mast,body.pmv-on .foot,body.pmv-on .tabbar,body.pmv-on .fnav,body.pmv-on .rd-top,body.pmv-on .offline{display:none!important}
body.pmv-on{overflow:hidden;background:var(--pvbg,#FBF8F1)}
.pmv{position:fixed;inset:0;z-index:60;background:var(--pvbg);color:var(--pvink);
  display:flex;flex-direction:column;overflow:hidden;
  --pvline:color-mix(in srgb,var(--pvink) 16%,transparent);
  --pvsoft:color-mix(in srgb,var(--pvink) 7%,var(--pvbg))}
.pmv ::selection{background:color-mix(in srgb,var(--pvink) 22%,transparent)}

/* Nothing may flash when a page is turned.

   A phone paints a grey rectangle over whatever was tapped. The tap areas
   here are half the screen, so that rectangle was a dark sheet blinking
   across the poem at every turn — plainest on the pale backgrounds. The
   same goes for the outline a browser draws round a button it has just
   been clicked, and for the blue selection a long press starts. Keyboard
   users still get their outline: that is :focus-visible, kept below. */
.pmv,.pmv *{-webkit-tap-highlight-color:transparent}
.pmv-zone,.pmv-hit{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pmv-zone:focus,.pmv-hit:focus,.pmv-zone:active,.pmv-hit:active{outline:0;background:none}
.pmv-zone::-moz-focus-inner,.pmv-hit::-moz-focus-inner{border:0}
.pmv-zone:focus-visible,.pmv-hit:focus-visible{outline:2px solid var(--pvmu);outline-offset:-6px}

/* the opening card: the poem's name and its poet, alone */
.pmv-cover{align-items:center;justify-content:center;padding:56px 32px;text-align:center}
.pmv-cover-in{display:flex;flex-direction:column;align-items:center;animation:pmv-rise .7s ease both}
.pmv-mark{font-family:var(--serif);font-size:.82rem;letter-spacing:6px;color:var(--pvmu);margin-bottom:60px}
.pmv-rule{display:block;width:28px;height:1px;background:var(--pvmu);margin:0}
/* Ge'ez has tall ascenders and deep descenders, so a tight line-height lets
   a two-line title sit on top of the poet's name. */
.pmv-t{margin:34px 0 0;font-family:var(--serif);font-size:clamp(1.9rem,8vw,2.7rem);
  line-height:1.5;font-weight:700;padding:0 4px;overflow-wrap:break-word}
.pmv-cby{margin:22px 0 36px;font-size:.95rem;line-height:1.7;color:var(--pvmu)}
.pmv-et{margin:0;font-family:var(--serif);font-size:1.7rem;line-height:1.5;font-weight:700}
.pmv-hint{position:absolute;bottom:58px;left:0;right:0;text-align:center;margin:0;font-size:.82rem;color:var(--pvmu);animation:pmv-breathe 2.6s ease-in-out infinite alternate}
@keyframes pmv-breathe{from{opacity:.45}to{opacity:1}}
@keyframes pmv-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pmv-hit{position:absolute;inset:0;border:0;background:none;cursor:pointer;z-index:1}

/* the poem itself */
/* A short poem sits in the middle of the screen; a long one starts at its
   first line. `margin:auto` on the child does both — centring it with
   `justify-content` instead cuts the top off when the poem is taller than
   the screen, and no amount of scrolling brings it back. */
.pmv-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:72px 30px 84px;
  display:flex;flex-direction:column;min-height:0}
/* The text fades out at the top and the bottom instead of being cut at the
   edge, and never runs under the button in the corner or the bar at the foot.
   It is two bands of the poem's OWN colour fading to nothing — a mask over
   the whole reading area looks the same but makes the browser drop the
   background behind it, and the poem loses its colour entirely. */
.pmv::before,.pmv::after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:2}
.pmv::before{top:0;height:66px;background:linear-gradient(to bottom,var(--pvbg) 38%,transparent)}
.pmv::after{bottom:0;height:72px;background:linear-gradient(to top,var(--pvbg) 38%,transparent)}
/* the opening and closing cards hold nothing that could run off the edge */
.pmv-cover::before,.pmv-cover::after{content:none}
.pmv-mid-col{margin:auto;display:flex;flex-direction:column;align-items:center;width:100%}
.pmv-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:74px 34px 110px;min-height:0}
/* The poem's own markup, untouched: the same .prose.poem.rich the article
   page uses, so the author's centring, spacing, bold, quotes and line breaks
   all come through exactly as they left them. Only the colour and the size
   are ours. */
.pmv .pmv-body{max-width:34ch;width:100%;margin:0;padding:0;color:var(--pvink);
  font-size:var(--pvfs);line-height:2.05}
.pmv .pmv-body p,.pmv .pmv-body h2,.pmv .pmv-body h3,.pmv .pmv-body li,.pmv .pmv-body b,.pmv .pmv-body strong{color:var(--pvink)}
.pmv .pmv-body blockquote{color:var(--pvmu);border-color:var(--pvline)}
.pmv .pmv-body a{color:var(--pvink)}
.pmv .pmv-body mark{background:color-mix(in srgb,var(--pvink) 20%,transparent);color:var(--pvink)}
/* A blank line the author left is a break between parts. It stays in the
   content as a real element — that is what makes the pages turn in page-by-page
   reading, and what a screen reader skips — but nothing is drawn for it: the
   reader sees only the space it makes.

   To show a mark instead, this is the one place to change. A quiet rule:
       .section-divider{border-top:1px solid var(--pvmu);width:72px}
   or three dots:
       .section-divider::before{content:"\00B7 \00B7 \00B7";letter-spacing:.7em} */
/* Only inside a poem. A divider an author puts in a story keeps the site's
   own "• • •" exactly as before. */
.pmv .pmv-body hr,.pmv .pmv-body .section-divider,
.mood-prev .prose hr,.mood-prev .prose .section-divider{
  border:0;height:0;width:100%;background:none;padding:0;margin:1.15em auto}
.pmv .pmv-body hr::before,.mood-prev .prose hr::before{content:none}
.mood-prev .prose hr,.mood-prev .prose .section-divider{margin:.9em auto}
.pmv-in{animation:pmv-rise .55s ease both}
@media(prefers-reduced-motion:reduce){
  .pmv-in,.pmv-cover-in{animation:none}
  .pmv-hint{animation:none}
}

/* a long poem read a stanza at a time: left goes back, right goes on, and
   the narrow strip between them brings the buttons */
.pmv-zone{position:absolute;top:0;bottom:104px;border:0;background:none;cursor:pointer;padding:0;z-index:1}
.pmv-prev{left:0;width:28%}
.pmv-mid{left:28%;width:24%;cursor:default}
.pmv-next{right:0;width:48%}
.pmv-zone:disabled{cursor:default}
.pmv-foot{position:absolute;left:0;right:0;bottom:30px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:11px;pointer-events:none}
.pmv-dots{display:flex;gap:9px;align-items:center}
.pmv-dots i{display:block;width:4px;height:4px;border-radius:2px;background:var(--pvmu);transition:width .22s}
.pmv-dots i.on{width:20px;background:var(--pvink)}
.pmv-count{font-size:.72rem;color:var(--pvmu)}

/* the closing card */
.pmv-end{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:40px}
.pmv-cover .pmv-end{margin-top:0}
.pmv-fin{margin:16px 0 30px;font-size:.78rem;letter-spacing:3px;color:var(--pvmu)}
.pmv-eby{margin:12px 0 26px;font-size:.9rem;line-height:1.7;color:var(--pvmu)}
/* side by side: two rows of buttons at the end of every poem added up to a
   screenful of scrolling on a long one */
.pmv-acts{display:flex;gap:10px;width:100%;max-width:300px}
.pmv-acts .pmv-big{flex:1;min-width:0}
.pmv-big{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:0;border-radius:8px;
  background:var(--pvink);color:var(--pvbg);font:600 1rem var(--sans);cursor:pointer}
.pmv-big.line{background:none;color:var(--pvink);border:1px solid var(--pvline)}
.pmv-big .icon{width:20px;height:20px}
/* The one question, on the closing card. Drawn in the poem's own ink and
   paper rather than the site's, so it belongs to the page it sits on. */
/* The quiet row beside the share buttons: it covers nothing, so a reader who
   does not want to answer simply reads past it. */
.ask-asked{margin:0;font-family:var(--serif);font-size:1.02rem;color:var(--muted);
  border-left:3px solid var(--line);padding-left:12px;line-height:1.6}
.askrow{border:1px solid var(--line);border-left:3px solid #D99A1E;padding:14px 16px;margin:18px 0}
.askrow-q{margin:0 0 10px;font-family:var(--serif);font-size:1rem;line-height:1.6}
.askrow-b{display:flex;gap:8px;flex-wrap:wrap}
.askrow-b button{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);
  color:inherit;cursor:pointer;font-family:inherit;border-radius:999px;padding:7px 14px;font-size:.86rem;min-height:38px}
.askrow-b button:hover{border-color:var(--ink);background:var(--soft)}
.pmv .askrow{border-color:var(--pvline);border-left-color:var(--pvmu);margin:22px 0 0;width:100%;max-width:330px;text-align:left}
.pmv .askrow-b button{border-color:var(--pvline);background:none}

/* Writing the question, in the desk: what it will say, and where. */
.ask-prev{border:1px dashed var(--line);background:var(--soft);padding:16px;margin-top:14px;text-align:center}
.ask-prev-q{margin:8px 0 0;font-family:var(--serif);font-size:1.05rem;font-weight:700;line-height:1.5}
.ask-prev-n{margin:6px 0 0;font-size:.84rem;color:var(--muted)}
.ask-prev-b{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.ask-prev-b span{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 13px;font-size:.84rem}
.ask-place{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);padding:13px 15px;
  margin-bottom:8px;cursor:pointer}
.ask-place:hover{border-color:var(--muted)}
.ask-place.on{border-color:var(--ink);box-shadow:inset 3px 0 0 #D99A1E}
.ask-place input{margin-top:3px;flex-shrink:0}
.ask-place b{display:block;font-size:.96rem}
.ask-place small{display:block;color:var(--muted);font-size:.82rem;line-height:1.5;margin-top:2px}

/* The one question, as a card at the end of a poem. It sits above the poem's
   own full screen, so it keeps the site's paper and ink rather than the
   poem's — a reader has finished reading and is being spoken to, not read to. */
.vpop{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.5);animation:vpop-in .25s ease}
@keyframes vpop-in{from{opacity:0}to{opacity:1}}
.vpop-in{position:relative;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-top:4px solid #D99A1E;padding:30px 24px 24px;max-width:380px;width:100%;text-align:center;
  animation:vpop-rise .3s cubic-bezier(.2,.8,.2,1)}
@keyframes vpop-rise{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
.vpop-x{position:absolute;top:8px;right:8px}
.vpop-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--soft);margin-bottom:14px}
.vpop-ic svg{width:22px;height:22px}
.vpop-q{margin:0;font-family:var(--serif);font-size:1.12rem;line-height:1.55;font-weight:700}
.vpop-n{margin:8px 0 18px;font-size:.84rem;color:var(--muted);line-height:1.6}
.vpop-b{display:flex;gap:8px}
.vpop-b button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1px solid var(--line);background:var(--bg);color:inherit;cursor:pointer;font-family:inherit;
  border-radius:8px;padding:11px 4px;font-size:.84rem;min-height:62px}
.vpop-b button span{font-size:1.25rem;line-height:1}
.vpop-b button:hover{border-color:var(--ink);background:var(--soft)}
@media(prefers-reduced-motion:reduce){.vpop,.vpop-in{animation:none}}
.pmv-again{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);border:0;background:none;
  color:var(--pvmu);font:inherit;font-size:.85rem;cursor:pointer;border-bottom:1px solid var(--pvline);padding-bottom:3px}

/* the buttons: out of the way until asked for, and always reachable */
.pmv-nub{position:absolute;top:14px;left:12px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;
  background:none;color:var(--pvmu);opacity:.5;cursor:pointer;display:grid;place-items:center}
.pmv-nub:hover,.pmv-nub:focus-visible{opacity:1;background:var(--pvsoft)}
.pmv-open .pmv-nub{opacity:0;pointer-events:none}
/* A poem read in one scroll closes with the poet's name and nothing else. */
.pmv-end-quiet{margin-top:34px;padding-bottom:10px}
.pmv-end-quiet .pmv-eby{margin:16px 0 0}
/* ⭐ in the row of small buttons, where a scrolling poem keeps it */
/* ---- the book a poem came from, at the foot of the button bar -------------
   Its own line rather than a ninth icon: on a 390px phone the icon row is
   already exactly full, and an icon on its own could not say which book. It
   uses the poem's own colours, so it belongs to the page the reader is on
   rather than arriving from the website around it. */
.pmv-book{display:flex;align-items:center;gap:10px;margin:2px 0 0;padding:11px 12px;
  border:1px solid var(--pvline);border-radius:12px;background:transparent;color:inherit;
  text-decoration:none;font-size:.9rem;line-height:1.35;min-height:44px}
.pmv-book .icon{width:19px;height:19px;flex:none;opacity:.75}
.pmv-book span{flex:1;min-width:0;color:var(--pvmu)}
.pmv-book b{font-family:var(--serif);font-weight:600;color:inherit}
.pmv-book i{font-style:normal;opacity:.5;flex:none}
a.pmv-book:hover,a.pmv-book:focus-visible{border-color:currentColor;background:color-mix(in srgb,var(--pvink) 7%,transparent)}
.pmv-book-flat{border-style:dashed;opacity:.9}
.pmv-b-star{font-size:1.15rem;line-height:1}
.pmv-b-star.on{color:#D99A1E}
.pmv-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:14px 12px calc(22px + env(safe-area-inset-bottom));
  background:var(--pvsoft);border-top:1px solid var(--pvline);display:flex;flex-direction:column;gap:8px;
  transform:translateY(110%);transition:transform .26s ease}
.pmv-open .pmv-bar,.pmv-cover .pmv-bar{transform:none}
.pmv-bt{display:flex;align-items:baseline;gap:8px;padding:0 6px;min-width:0}
.pmv-bt b{font-family:var(--serif);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmv-bt span{font-size:.8rem;color:var(--pvmu);white-space:nowrap}
.pmv-br{display:flex;align-items:center;gap:2px}
.pmv-b{width:44px;height:44px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;display:grid;place-items:center}
.pmv-b:hover{background:color-mix(in srgb,var(--pvink) 12%,transparent)}
.pmv-b.on{color:#D9534F}
.pmv-sp{flex:1}
.pmv-fs{border:1px solid var(--pvline);background:none;color:inherit;border-radius:6px;height:40px;min-width:44px;
  cursor:pointer;font:inherit;font-size:.85rem}
.pmv-fs-b{font-size:1.15rem;margin-left:6px}
@media(min-width:760px){
  .pmv-poem{max-width:36ch}
  .pmv-bar{padding-left:22px;padding-right:22px}
  .pmv-prev{width:22%}.pmv-mid{left:22%;width:20%}.pmv-next{width:58%}
}

/* ---------- The poet's two choices, in the desk ---------- */
.mood-box{border:1px solid var(--line);border-radius:8px;padding:14px 14px 16px;background:var(--soft)}
.mood-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
@media(max-width:560px){.mood-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mood-sw{height:48px;border-radius:8px;border:1px solid var(--line);cursor:pointer;
  font-family:var(--serif);font-size:1.1rem;display:grid;place-items:center;padding:0}
.mood-sw.on{border-color:#D99A1E;box-shadow:0 0 0 3px color-mix(in srgb,#D99A1E 28%,transparent)}
.mood-name{margin:10px 0 14px;font-size:.92rem}
.mood-flow{display:flex;gap:8px;margin-bottom:6px}
.mood-flow button{flex:1;min-height:44px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  border-radius:8px;font:inherit;font-size:.92rem;cursor:pointer}
.mood-flow button.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.mood-prev{margin-top:12px;border-radius:8px;padding:22px 18px;display:flex;flex-direction:column;
  align-items:center;gap:4px;text-align:center;background:var(--pvbg);color:var(--pvink)}
.mood-prev .prose{width:100%;font-size:1rem;line-height:1.95;color:var(--pvink);margin:0;padding:0}
.mood-prev .prose p,.mood-prev .prose h2,.mood-prev .prose h3{color:var(--pvink)}
.mood-prev .prose blockquote{color:var(--pvmu);border-color:color-mix(in srgb,var(--pvink) 25%,transparent)}
.warn-hint{color:#9a6b00;display:block}
:root[data-theme="dark"] .warn-hint{color:#e8b64c}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .warn-hint{color:#e8b64c}}
.mood-prev b{margin-top:12px;font-size:.78rem;font-weight:400;color:var(--pvmu)}

/* ---------- Pages, each with a colour of its own (desk) ---------- */
.pg-strip{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.pg-chip{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);border-radius:18px;font:inherit;font-size:.85rem;cursor:pointer}
.pg-chip.on{border-color:var(--ink);background:var(--ink);color:var(--bg);font-weight:600}
.pg-chip i{width:12px;height:12px;border-radius:50%;border:1px solid;display:block;flex:none}
.pg-clear{min-height:36px;padding:0 10px;border:0;background:none;color:var(--muted);
  font:inherit;font-size:.82rem;cursor:pointer;text-decoration:underline}
.mood-sw.mood-none{background:var(--bg);color:var(--muted);font-size:1rem}
/* the colour changes with the page, so let it move rather than jump */
.pmv{transition:background-color .35s ease,color .35s ease}

/* ---------- Sliding from page to page ---------- */
.pmv-slide{width:100%;display:flex;justify-content:center}
.pmv-slide.from-right{animation:pmv-slide-r .42s cubic-bezier(.22,.8,.3,1) both}
.pmv-slide.from-left{animation:pmv-slide-l .42s cubic-bezier(.22,.8,.3,1) both}
@keyframes pmv-slide-r{from{opacity:0;transform:translateX(38px)}to{opacity:1;transform:none}}
@keyframes pmv-slide-l{from{opacity:0;transform:translateX(-38px)}to{opacity:1;transform:none}}
/* the line that shows the turn coming, so it is never a surprise */
.pmv-prog{position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;background:color-mix(in srgb,var(--pvink) 12%,transparent)}
.pmv-prog i{display:block;height:100%;width:0;background:var(--pvmu)}
.pmv-prog.off{opacity:0}
.pmv-open .pmv-prog{display:none}
/* awarding the poet, at the end of the poem */
.pmv-star{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  min-height:44px;padding:0 16px;border:1px solid var(--pvline);border-radius:22px;
  background:none;color:var(--pvmu);font:inherit;font-size:.86rem;cursor:pointer}
.pmv-star:hover{color:var(--pvink);border-color:var(--pvmu)}
.pmv-star.on{color:var(--pvink);border-color:var(--pvink)}
.pmv-star span{font-size:1.05rem;line-height:1}
.pmv-starn{font-size:.78rem;opacity:.75}
@media(prefers-reduced-motion:reduce){
  .pmv-slide.from-right,.pmv-slide.from-left{animation:none}
}
.mood-split{border-top:1px solid var(--line);margin-top:12px;padding-left:0;padding-right:0}
.pmv-again-b{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;
  min-height:46px;padding:0 18px;border:1px solid var(--pvline);border-radius:23px;
  background:none;color:var(--pvink);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.pmv-again-b:hover{background:color-mix(in srgb,var(--pvink) 9%,transparent)}
.pmv-again-b .icon{width:18px;height:18px}

/* ---- the book an article came from, beneath the text ----------------------
   A card, not a line of small print: the reader has just finished and this is
   the one place the page asks them to do something. Name on the left, button
   on the right; on a narrow phone the button drops under the name at full
   width so it is easy to hit. */
.bk-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 4px;padding:16px;
  border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:12px;background:var(--soft)}
.bk-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.bk-ic .icon{width:22px;height:22px}
.bk-tx{flex:1;min-width:150px;display:flex;flex-direction:column;gap:2px}
.bk-tx small{color:var(--muted);font-size:.78rem;letter-spacing:.02em}
.bk-tx .bk-au{font-style:normal;font-size:.9rem;color:var(--muted)}
.bk-tx b{font-family:var(--serif);font-size:1.12rem;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.bk-buy{flex:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.bk-flat{border-left-style:dashed}
@media(max-width:480px){.bk-buy{width:100%}}

/* ---- highlights must never cover the line above ----------------------------
   A highlight's background is painted over the whole height of the font, and
   Tigrinya letters stand taller and hang lower than the line spacing leaves
   room for. So each highlighted line painted its top edge over the feet of the
   line above it, and that line's letters looked cut off.

   Multiplying the colour with what is beneath it, instead of laying it on top,
   keeps the yellow and lets the letters underneath show straight through, so
   nothing is covered however tight the lines are. In the dark theme a
   multiplied yellow would turn black, so there the solid yellows become the
   same see-through tint the reader highlights already use. */
mark,.prose.rich mark,mark.rhl,.mk-w.mk,.mk-s.mk,.mk-w.mk-pre,.mk-s.mk-pre,.mk-w.mk-anchor,.prose.marking .mk-w:hover{
  mix-blend-mode:multiply;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) mark,html:not([data-theme="light"]) .prose.rich mark,
  html:not([data-theme="light"]) mark.rhl,html:not([data-theme="light"]) .mk-w,html:not([data-theme="light"]) .mk-s{mix-blend-mode:normal}
  html:not([data-theme="light"]) .prose.rich mark{background:rgba(240,181,69,.3);color:inherit}
  html:not([data-theme="light"]) .mk-w.mk,html:not([data-theme="light"]) .mk-s.mk,html:not([data-theme="light"]) .mk-w.mk-anchor{background:rgba(240,181,69,.38);color:inherit}
  html:not([data-theme="light"]) .mk-w.mk-pre,html:not([data-theme="light"]) .mk-s.mk-pre{background:rgba(240,181,69,.26);color:inherit}
}
html[data-theme="dark"] mark,html[data-theme="dark"] .prose.rich mark,html[data-theme="dark"] mark.rhl,
html[data-theme="dark"] .mk-w,html[data-theme="dark"] .mk-s{mix-blend-mode:normal}
html[data-theme="dark"] .prose.rich mark{background:rgba(240,181,69,.3);color:inherit}
html[data-theme="dark"] .mk-w.mk,html[data-theme="dark"] .mk-s.mk,html[data-theme="dark"] .mk-w.mk-anchor{background:rgba(240,181,69,.38);color:inherit}
html[data-theme="dark"] .mk-w.mk-pre,html[data-theme="dark"] .mk-s.mk-pre{background:rgba(240,181,69,.26);color:inherit}
/* the poem viewer has its own light and dark pages and its own see-through tint */
.pmv mark,.pmv .pmv-body mark{mix-blend-mode:normal}

/* ---- one card for the writer: about, star and message ----------------------
   Replaces three stacked blocks. The message form folds away until asked for,
   so the card is two short rows instead of most of a screen. */
.acard{margin-top:26px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.acard-top{display:flex;align-items:center;gap:12px}
.acard-who{flex:1;min-width:0}
.acard-who b{font-family:var(--serif);font-size:1.05rem}
.acard-who p{margin:2px 0 0;color:var(--muted);font-size:.86rem;font-family:var(--serif);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.acard-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.acard-acts .star-btn,.acard-btn{min-height:40px;padding:8px 14px;font-size:.88rem}
.acard-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;background:var(--bg);
  color:var(--ink);font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit}
.acard-btn:hover,.acard-btn.on{border-color:var(--ink)}
.acard-btn .icon{width:17px;height:17px}
.acard-btn:last-child{margin-left:auto;border-color:transparent;background:transparent;color:var(--muted)}
.acard-btn:last-child:hover{color:var(--ink);border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.acard-note{margin:10px 0 0;color:var(--muted);font-size:.78rem}
.acard-msg{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.acard-msg .c-form{margin-bottom:0}
@media(max-width:560px){.acard-acts .star-btn,.acard-acts .acard-btn{flex:1 1 auto;justify-content:center}
  .acard-btn:last-child{margin-left:0;flex-basis:100%}}

/* a page read a page at a time follows a finger sideways; up and down is still
   the browser's, so nothing here fights scrolling */
.pmv-zone,.pmv-stage{touch-action:pan-y}
.pmv-slide{will-change:transform,opacity}

/* ---------- Desk: shared components (see "Shared desk UI helpers" in app.js) ---------- */
.ptitle-d{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:var(--sp-1)}
.ptitle-back{display:inline-block;font-size:var(--fs-label);color:var(--muted);margin-bottom:var(--sp-1);padding:var(--sp-1) 0}
.ptitle-back:hover{color:var(--ink);text-decoration:underline}
.req{color:var(--bad-ink)}
/* badges */
.bdg{display:inline-flex;align-items:center;font-size:.75rem;font-weight:600;line-height:1.4;padding:2px 8px;border-radius:var(--r-1);white-space:nowrap;background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.bdg.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:transparent}
.bdg.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}
.bdg.bad{background:var(--bad-bg);color:var(--bad-ink);border-color:transparent}
.bdg.info{background:var(--info-bg);color:var(--info-ink);border-color:transparent}
/* empty / error / loading */
.state{text-align:center;padding:var(--sp-6) var(--sp-4);color:var(--muted);display:grid;gap:var(--sp-3);justify-items:center}
.state p{margin:0;max-width:44ch}
.error-state p{color:var(--bad-ink)}
.skel-list{display:grid;gap:var(--sp-3)}
.skel{display:grid;grid-template-columns:64px 1fr;gap:var(--sp-1) var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.skel i{grid-row:span 2;height:64px;background:var(--soft);border-radius:var(--r-1)}
.skel b{display:block;height:14px;background:var(--soft);border-radius:var(--r-1);align-self:center}
.skel b.s{width:55%}
@media(prefers-reduced-motion:no-preference){.skel i,.skel b{animation:skelp 1.2s ease-in-out infinite}}
@keyframes skelp{50%{opacity:.55}}
/* tabs */
.tabs{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-1);overflow:auto;width:max-content;max-width:100%;scrollbar-width:none}
.tab{border:0;background:transparent;padding:var(--sp-2) var(--sp-4);min-height:var(--tap);font-size:var(--fs-label);cursor:pointer;white-space:nowrap;color:var(--ink);transition:background-color var(--t)}
.tab:hover{background:var(--soft)}
.tab.on{background:var(--ink);color:var(--bg);font-weight:600}
.tab-n{opacity:.8;font-variant-numeric:tabular-nums}
.more{display:flex;justify-content:center;padding:var(--sp-4) 0}
/* row menu */
.rmwrap{position:relative;display:inline-flex}
.rmbtn{padding:0 var(--sp-3)}
.rmenu{position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:200px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-menu);padding:var(--sp-1);display:grid}
.rmenu .umi{min-height:var(--tap)}
/* confirm dialog */
.dlg{max-width:420px}
.dlg h2{font-size:var(--fs-section);margin:0 0 var(--sp-2);line-height:1.4}
.dlg p{margin:0 0 var(--sp-4);color:var(--muted);font-size:var(--fs-body)}
.dlg-actions{display:flex;gap:var(--sp-3);justify-content:flex-end;flex-wrap:wrap}
.is-desk .modal{border-radius:var(--r-2)}
@media(max-width:480px){.dlg-actions .btn{flex:1}}
/* toast: errors are visibly different and stay longer */
.toast.show{pointer-events:auto}
.toast.err{background:var(--bad-bg);color:var(--bad-ink);border:1px solid var(--bad-ink)}

/* Today page */
.attn{display:grid;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;margin-bottom:var(--sp-5)}
.attn-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);min-height:48px;border-bottom:1px solid var(--line);transition:background-color var(--t)}
.attn-row:last-child{border-bottom:0}
.attn-row:hover{background:var(--soft)}
.attn-row .bdg{min-width:28px;justify-content:center;font-variant-numeric:tabular-nums}
.attn-row>span:nth-child(2){flex:1;min-width:0}
.chev-r{width:16px;height:16px;color:var(--faint);flex-shrink:0}
a.drow{color:inherit}
a.drow:hover{background:var(--soft)}
.today .h2{margin-top:var(--sp-5)}
.today .ptitle+.h2{margin-top:0}

/* lists */
.racts{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.is-desk .seg button{min-height:var(--tap)}
.cf-f .select,.cf-f .input{min-height:var(--tap)}
.cf-toggle{display:none}
@media(max-width:699px){
  .drow .racts{width:100%}
  .cf-bar{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2);align-items:center}
  .cf-q{margin-bottom:0}
  .cf-toggle{display:inline-flex}
  .cf-row{display:none;grid-column:1/-1;grid-template-columns:1fr 1fr}
  .cf-bar.open .cf-row{display:grid}
  .cf-sum{grid-column:1/-1;margin-top:0}
}
@media(min-width:920px){.split.split-ads{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.need{text-align:right;min-height:1.2em;margin:var(--sp-2) 0 0}
.need:empty{display:none}

/* Settings tabs: show only the boxes of the open tab */
.stabs-site .stab:not([data-tab=site]),.stabs-look .stab:not([data-tab=look]),.stabs-data .stab:not([data-tab=data]),.stabs-device .stab:not([data-tab=device]){display:none}
.stab>.box{margin-bottom:var(--sp-4)}
.tabs+.split{margin-top:var(--sp-5)}
/* every page header's one-line description, whatever markup built it: Ge'ez needs the Ethiopic sans, not .en's Latin stack */
.ptitle .en{display:block;font-family:var(--sans);font-size:var(--fs-label);color:var(--muted);margin-top:var(--sp-1)}

/* touch targets: 40px minimum on phones and tablets (WCAG 2.5.8 asks 24px, we hold to 40) */
.is-desk .btn.sm{min-width:var(--tap)}
.is-desk .ibtn{width:var(--tap);height:var(--tap)}
.ptitle-back{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);margin-bottom:0}
@media(max-width:1099px){
  .rt-b{min-width:var(--tap);height:var(--tap)}
  .rt-sel{height:var(--tap)}
  .sync-chip{height:var(--tap);min-width:var(--tap);justify-content:center}
  .ad-order .ibtn,.ibtn[style*="height:22px"]{height:var(--tap)!important;min-width:var(--tap)}
  .desk select,.desk .select{min-height:var(--tap)!important}
}

/* one footer for every form: destructive action on the left, Cancel then the primary on the right */
.form-foot{display:flex;gap:var(--sp-2);justify-content:flex-end;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--sp-4);margin-top:var(--sp-5)}
.form-foot .ff-danger{margin-right:auto}
.form-foot.sticky{position:sticky;bottom:0;z-index:20;background:var(--bg);padding:var(--sp-3) 0}
@media(max-width:699px){.form-foot.sticky{bottom:calc(60px + env(safe-area-inset-bottom))}}
/* utilities that replace repeated inline styles (!important because inline style always won) */
.u-m0-0-10{margin:0 0 10px!important}
.u-ul{text-decoration:underline!important}
.u-tc{text-align:center!important}
.u-m0{margin:0!important}
.u-mt8{margin-top:8px!important}
.u-m10-0-0{margin:10px 0 0!important}
.u-m0-0-8{margin:0 0 8px!important}
.u-m8-0-0{margin:8px 0 0!important}
.u-mt12{margin-top:12px!important}
.u-jstart{justify-content:flex-start!important}
.u-m0-0-12{margin:0 0 12px!important}
.u-mt10{margin-top:10px!important}
.u-m6-0-0{margin:6px 0 0!important}
.u-mt14{margin-top:14px!important}
.u-mb12{margin-bottom:12px!important}
.u-mt6{margin-top:6px!important}
.u-mt22{margin-top:22px!important}
.u-mt26{margin-top:26px!important}
.u-tr{text-align:right!important}
.u-mw420{max-width:420px!important}
.u-f1{flex:1!important}

/* ===== Modern desk skin ====================================================
   Scoped to body.is-desk so the reader site is untouched. Cool-grey canvas, white
   cards with soft borders and shadows, rounded controls, tinted pills, an amber
   accent. Everything uses the tokens at the top of this file. */
body.is-desk{
  --canvas:#f4f5f7; --soft:#f0f1f4; --line:#e4e6eb; --muted:#566070; --faint:#5f6877;
  --accent:#E0A21E; --accent-ink:#8a5700; --accent-bg:#fbf0d8;
  --r-1:8px; --r-2:14px;
  --shadow-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-2:0 2px 4px rgba(16,24,40,.05),0 8px 20px rgba(16,24,40,.08);
  --focus:#2b6cb0;
  background:var(--canvas)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.is-desk{
  --canvas:#0e1013; --bg:#171a1f; --soft:#1d2025; --line:#272b32; --muted:#a3abb8; --faint:#8f98a6;
  --accent-ink:#f0b955; --accent-bg:#2d2412;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.5)}}
:root[data-theme="dark"] body.is-desk{
  --canvas:#0e1013; --bg:#171a1f; --soft:#1d2025; --line:#272b32; --muted:#a3abb8; --faint:#8f98a6;
  --accent-ink:#f0b955; --accent-bg:#2d2412;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.5)}
.is-desk .dmain,.is-desk main.desk{background:transparent}

/* sidebar: white panel, pill-shaped active item */
.is-desk .dside{background:var(--bg);border-right:1px solid var(--line)}
.is-desk .dlink{border-radius:10px;transition:background-color var(--t),color var(--t)}
.is-desk .dlink:hover{background:var(--soft)}
.is-desk .dlink.on{background:var(--accent-bg);box-shadow:none;font-weight:600;color:var(--ink)}
.is-desk .dlink.on .icon{color:var(--accent-ink)}
.is-desk .dgroup-h{letter-spacing:.04em;text-transform:none}
.is-desk .dnew{border-radius:12px;min-height:44px;box-shadow:var(--shadow-1);transition:transform var(--t),box-shadow var(--t)}
.is-desk .dnew:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.is-desk .dtop{background:color-mix(in srgb,var(--canvas) 82%,transparent);border-bottom:1px solid var(--line)}
.is-desk .duser:hover{background:var(--soft)}
.is-desk .dtabs{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px)}
.is-desk .dtabs .on{color:var(--accent-ink)}

/* headings */
.is-desk .ptitle{border-bottom:0;padding-bottom:0;margin-bottom:var(--sp-5)}
.is-desk .ptitle h1{font-family:var(--sans);font-weight:700;font-size:1.65rem;letter-spacing:-.01em}
.is-desk .ptitle-d,.is-desk .ptitle .en{font-size:var(--fs-body)}
.is-desk .h2{border-bottom:0;padding-bottom:0;margin:0 0 var(--sp-3);font-size:var(--fs-section);font-weight:700;letter-spacing:-.005em}

/* cards */
.is-desk .box,.is-desk .cf-bar,.is-desk .attn,.is-desk .login-card,.is-desk .modal{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-1)}
.is-desk .box{padding:var(--sp-5)}
.is-desk .box h3{margin-top:0}
.is-desk .cf-bar{padding:var(--sp-4)}
.is-desk .modal{box-shadow:var(--shadow-2);padding:var(--sp-5)}
.is-desk .modal-bg{backdrop-filter:blur(2px)}
.is-desk .attn-row:hover{background:var(--soft)}

/* key numbers: separate cards, sans numerals */
.is-desk .nums{border:0;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.is-desk .nums>div{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-1);padding:var(--sp-4)}
.is-desk .nums b{font-family:var(--sans);font-weight:700;font-size:1.9rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.is-desk .nums span{font-size:var(--fs-label);color:var(--muted)}
@media(min-width:700px){.is-desk .nums{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}

/* list rows become cards */
.is-desk .drow,.is-desk .ad-row,.is-desk .msg-row{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-1);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-2);transition:box-shadow var(--t),border-color var(--t)}
.is-desk .drow:hover,.is-desk .ad-row:hover,.is-desk .msg-row:hover{box-shadow:var(--shadow-2)}
.is-desk .msg-row.is-new{background:var(--accent-bg);box-shadow:var(--shadow-1)}
.is-desk .box .drow,.is-desk .box .ad-row,.is-desk .modal .drow{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;margin:0;padding-left:0;padding-right:0}
.is-desk .drow .cover,.is-desk .drow .pic{border-radius:10px;overflow:hidden}
.is-desk .drow .main b{font-size:1.05rem}

/* status pills: rounded and tinted instead of outlined */
.is-desk .pill{border-color:transparent;background:color-mix(in srgb,currentColor 12%,transparent);border-radius:var(--r-pill);padding:3px 10px}
.is-desk .bdg{border-radius:var(--r-pill)}
.is-desk .dbadge{border-radius:var(--r-pill)}

/* buttons and fields */
.is-desk .btn{border-radius:10px}
.is-desk .btn:not(.line):not(.danger):not(.ghost):not(.solid-danger):hover{opacity:1;box-shadow:var(--shadow-2);transform:translateY(-1px)}
.is-desk .btn.line{background:var(--bg);border-color:var(--line)}
.is-desk .btn.line:hover{background:var(--soft);border-color:var(--line);opacity:1}
.is-desk .btn.danger{background:var(--bg)}
.is-desk .btn.sm{border-radius:9px}
.is-desk .btn,.is-desk .dnew{transition:transform var(--t),box-shadow var(--t),background-color var(--t),border-color var(--t)}
.is-desk .input,.is-desk .select,.is-desk .textarea{border-radius:10px;border-color:var(--line);background:var(--field)}
.is-desk .input:focus,.is-desk .select:focus,.is-desk .textarea:focus{border-color:var(--focus);outline:2px solid color-mix(in srgb,var(--focus) 30%,transparent);outline-offset:0}
.is-desk .ibtn{border-radius:10px}
.is-desk .ibtn:hover{background:var(--soft)}

/* segmented controls and tabs */
.is-desk .tabs,.is-desk .seg{background:var(--soft);border:0;border-radius:12px;padding:3px;gap:2px;overflow:hidden}
.is-desk .tab,.is-desk .seg button{border-radius:9px;color:var(--muted)}
.is-desk .tab:hover,.is-desk .seg button:hover{background:transparent;color:var(--ink)}
.is-desk .tab.on,.is-desk .seg button.on{background:var(--bg);color:var(--ink);box-shadow:var(--shadow-1);font-weight:600}
.is-desk .steps button.on{border-color:var(--accent)}

/* menus and tables */
.is-desk .rmenu,.is-desk .umenu{border-radius:12px;box-shadow:var(--shadow-2)}
.is-desk .umi{border-radius:8px}
.is-desk .tbl th{border-bottom:1px solid var(--line);text-transform:none}
.is-desk .tbl tbody tr:hover td{background:var(--soft)}

/* sign-in */
.is-desk .login{background:radial-gradient(1200px 500px at 50% -10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent),var(--canvas)}
.is-desk .login-card{padding:var(--sp-6) var(--sp-5);border-radius:18px;box-shadow:var(--shadow-2)}

/* ===== Desk sidebar: no-scroll, compact, modern ===== */
@media(min-width:1100px){
  .is-desk .dside{overflow:visible;padding:clamp(10px,2vh,18px) 12px;gap:clamp(6px,1.4vh,12px)}
  .is-desk .dgroups{gap:2px!important;flex:1;min-height:0}
  .is-desk .dgroup-h{padding:9px 10px;font-size:.78rem;gap:10px;color:var(--ink);letter-spacing:0}
  .is-desk .dgroup-h .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;color:var(--muted)}
  .is-desk .dgroup.open>.dgroup-h{color:var(--ink)}
  .is-desk .dgroup.open>.dgroup-h .icon{color:var(--accent-ink)}
  .is-desk .dgroup-items{margin:2px 0 6px 18px;padding:2px 0 2px 8px;border-left:1px solid var(--line);gap:1px}
  .is-desk .dgroup-items .dlink{padding:clamp(5px,.9vh,8px) 10px;font-size:.88rem}
  .is-desk .dgroup-items .dlink .icon{width:17px;height:17px}
  .is-desk .dgroup:only-child .dgroup-items,.is-desk .dgroups>.dgroup:first-child .dgroup-items{margin:0;padding:0;border:0}
  .is-desk .duser-wrap{padding-top:clamp(6px,1.2vh,10px)}
}
@media(min-width:1100px) and (max-height:640px){
  .is-desk .dgroup-h{padding:6px 10px}
  .is-desk .dnew{min-height:36px}
}

/* ---- Thumbnail picture field (desk) ---- */
.thumb-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.thumb-prev{position:relative;width:120px;aspect-ratio:3/2;overflow:hidden;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--muted);text-align:center;border:1px solid var(--faint)}
.thumb-prev.none{border-style:dashed}
.thumb-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb-act{display:flex;gap:8px;flex-wrap:wrap}
.thumb-pick{position:relative;cursor:pointer}
.thumb-pick input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.thumb-pick.busy{opacity:.6;pointer-events:none}

/* ===== Sign in and register (js/app.js → authView) =============================
   Made for people who are new to smartphones: large type, 54–58px touch targets,
   one question at a time, labels that never disappear, errors that say what to
   do. Phone: one column. Tablet: a centred card. Laptop: a welcome panel beside
   the form. */
.au{max-width:460px;margin:0 auto;padding:0 0 28px;width:100%}
.au-card{display:grid;gap:12px;align-content:start;min-width:0}
.au h2{margin:0;font-size:1.6rem;line-height:1.3;text-wrap:balance}
.au-sub{margin:-4px 0 0;color:var(--muted);font-size:1.02rem}
.au-hint{font-size:.92rem;color:var(--muted)}
.au-fine{font-size:.9rem;color:var(--muted);text-align:center;margin:0}
.au-fine a{text-decoration:underline;color:inherit}
.au-c{text-align:center}
.au .lnk{font-size:1.02rem;padding:6px 2px}
.au .lnk.plain{color:var(--ink);text-decoration:none;font-weight:600}
.au-back{justify-self:start;align-self:flex-start;padding:8px 2px!important;font-size:1.05rem!important}
.au-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--soft);border-radius:14px;padding:5px}
.au-tabs button{border:0;background:transparent;border-radius:10px;min-height:48px;font-weight:600;font-size:1.05rem;cursor:pointer;color:var(--ink);font-family:inherit}
.au-tabs button.on{background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.2),0 0 0 1px var(--line)}
.au-f{display:grid;gap:7px}
.au-f label,.au-lab{font-weight:700;font-size:1.05rem}
.au-lrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.au-in{width:100%;min-height:54px;border:2px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--field,var(--bg));font-size:1.15rem;color:var(--ink);font-family:inherit}
.au-in:focus{outline:3px solid var(--focus,var(--link));outline-offset:0;border-color:var(--ink)}
.au-in.bad{border-color:var(--bad)}
.au-code-in{letter-spacing:.35em;font-size:1.5rem;text-align:center;font-family:ui-monospace,Menlo,monospace}
.au-phone{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.au-cc{display:flex;align-items:center;gap:6px;min-height:54px;border:2px solid var(--line);border-radius:12px;padding:0 12px;background:var(--soft);font-size:1.1rem;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;font-family:inherit}
.au-cc small{font-weight:400;color:var(--muted);font-size:.85rem;max-width:7em;overflow:hidden;text-overflow:ellipsis}
.au-pw{position:relative}
.au-pw .au-in{padding-right:92px}
.au-peek{position:absolute;right:6px;top:6px;bottom:6px;min-width:76px;border:0;border-radius:8px;background:var(--soft);cursor:pointer;font-weight:600;color:var(--ink);font-family:inherit}
.au-btn{min-height:58px;border-radius:14px;border:2px solid var(--ink);background:var(--ink);color:var(--bg);font-size:1.15rem;font-weight:700;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-family:inherit}
.au-btn.alt{background:var(--bg);color:var(--ink);border-color:var(--line);font-weight:600}
.au-btn.wa{background:#1DA851;border-color:#1DA851;color:#fff}
.au-btn svg{width:20px;height:20px;flex:none}
.au-btn.loading{opacity:.6;pointer-events:none}
.au-btn:focus-visible,.au-cc:focus-visible,.au-peek:focus-visible,.au-tabs button:focus-visible,.au-crow:focus-visible{outline:3px solid var(--focus,var(--link));outline-offset:2px}
.au-or{display:flex;align-items:center;gap:12px;color:var(--muted);line-height:1}
.au-or::before,.au-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.au-err,.au-info{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-weight:600}
.au-err{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad)}
.au-info{background:var(--soft);border:1px solid var(--line);font-weight:400}
.au-err b,.au-info b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.85rem}
.au-err b{background:var(--bad);color:var(--bg)}
.au-info b{background:var(--link);color:var(--bg)}
.au-steps{display:grid;gap:8px}
.au-steps .au-lab{color:var(--muted);font-size:.95rem}
.au-dots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.au-dots i{height:8px;border-radius:4px;background:var(--line)}
.au-dots i.on{background:var(--accent)}
.au-checks{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.au-checks li{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:1rem}
.au-checks li b{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:.75rem;flex:none}
.au-checks li.ok{color:var(--ok);font-weight:600}
.au-checks li.ok b{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.au-clist{border:1px solid var(--line);border-radius:12px;max-height:min(58vh,460px);overflow-y:auto;background:var(--bg)}
.au-clist h4{margin:0;padding:8px 14px;background:var(--soft);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);position:sticky;top:0}
.au-crow{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;min-height:56px;padding:8px 14px;border:0;border-bottom:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;text-align:left;font-size:1.05rem;font-family:inherit}
.au-crow.sel{background:color-mix(in srgb,var(--accent) 16%,var(--bg));font-weight:700}
.au-crow small{display:block;color:var(--muted);font-size:.82rem;font-weight:400}
.au-code{font-variant-numeric:tabular-nums;color:var(--muted);flex:none}
.au-side{display:none}
.au-banner{margin-top:10px}
.au-banner-in{display:grid;gap:10px;background:color-mix(in srgb,var(--accent) 14%,var(--bg));border:2px solid var(--accent);border-radius:14px;padding:14px 16px;max-width:560px;margin:0 auto}
.au-banner-in b{font-size:1.1rem}
.au-banner-in small{color:var(--muted)}
.au-banner-row{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.au-banner .au-btn{min-height:50px;font-size:1.05rem}
/* A phone is tall: use all of it. The question and its fields at the top, the action at the bottom
   within thumb's reach. On a short screen everything simply follows on from the one before. */
.au-foot{display:grid;gap:12px}
@media(max-width:699px){
  .au-card{display:flex;flex-direction:column;gap:16px;flex:1}
  .au-card>*{flex:none}
  .au-foot{margin-top:auto;padding-top:8px}
  .au h2{font-size:1.75rem}
  .au-in,.au-cc{min-height:58px}
  .au-btn{min-height:62px}
}
@media(max-width:699px){.au-hide-s{display:none}}
@media(max-width:699px) and (max-height:799px){.au-card{gap:12px}}
@media(min-width:700px){
  .au{max-width:540px;margin-top:24px}
  .au-card{border:1px solid var(--line);border-radius:20px;padding:36px;background:var(--bg);gap:16px}
}
@media(min-width:1100px){
  .au{max-width:1000px;display:grid;grid-template-columns:5fr 6fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:28px;padding:0}
  .au-side{display:grid;align-content:center;gap:28px;background:var(--ink);color:var(--bg);padding:56px 48px}
  .au-logo{font-size:3.4rem;font-weight:700;line-height:1}
  .au-side h2{font-size:1.7rem;font-weight:600}
  .au-side ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
  .au-side li{display:flex;gap:14px;align-items:flex-start;font-size:1.1rem}
  .au-side li i{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#15140f;display:grid;place-items:center;font-style:normal;font-weight:700}
  .au-card{border:0;border-radius:0;padding:48px 40px}
  .au .au-card>*{width:100%;max-width:440px;margin-left:auto;margin-right:auto}
}
.au.au-plain{display:block;max-width:540px;overflow:visible;border:0;margin-top:8px}
@media(min-width:700px){.au.au-plain .au-card{border:1px solid var(--line);border-radius:20px;padding:36px}}
@media(min-width:1100px){.au.au-plain .au-card{padding:36px}.au.au-plain .au-card>*{max-width:none;margin-left:0;margin-right:0}}

/* Sign-in page: a page of its own, nothing of the website around it. */
.au-shell{--au-hero:#15140f;--au-hero-ink:#f4efe4;min-height:var(--au-h,100dvh);display:flex;flex-direction:column;background:var(--au-hero)}
/* The top of the page is the same dark panel as the proverb of the day on the front page, with the same
   woven border, so signing in feels like a room of ቃና and not a form on a blank page. */
.au-weave{height:10px;background:
  linear-gradient(135deg,#9B2D5A 25%,transparent 25%) -5px 0/10px 10px,
  linear-gradient(225deg,#9B2D5A 25%,transparent 25%) -5px 0/10px 10px,
  linear-gradient(315deg,#D99A1E 25%,transparent 25%) 0 0/10px 10px,
  linear-gradient(45deg,#D99A1E 25%,transparent 25%) 0 0/10px 10px,#0F7C7A}
.au-hero{color:var(--au-hero-ink);padding-top:env(safe-area-inset-top);padding-bottom:34px;background:radial-gradient(120% 90% at 85% -10%,rgba(217,154,30,.20),transparent 60%),var(--au-hero)}
.au-hero-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));max-width:1100px;margin:0 auto}
.au-top-logo{font-family:var(--serif);font-weight:800;font-size:2rem;line-height:1;color:var(--au-hero-ink)}
.au-close{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;font-weight:600;font-size:.98rem;color:var(--au-hero-ink);border:1px solid rgba(244,239,228,.28)}
.au-close:hover{background:rgba(244,239,228,.12)}
.au-hero-body{display:none;max-width:560px;margin:0 auto;padding:10px max(22px,env(safe-area-inset-left)) 0;text-align:center}
.au-hero-label{display:inline-block;font-size:.8rem;font-weight:700;color:#F0B545;border-bottom:1px solid rgba(240,181,69,.5);padding-bottom:3px;margin-bottom:12px}
.au-hero-q{display:block;quotes:none;font-family:var(--serif);font-weight:700;font-size:1.42rem;line-height:1.5;text-wrap:balance}
.au-hero-q.au-tag{font-weight:500;font-size:1.05rem;opacity:.85}
.au-main{flex:1;width:100%;display:flex;flex-direction:column;background:var(--bg);position:relative;margin-top:-26px;border-radius:28px 28px 0 0;box-shadow:0 -14px 34px rgba(0,0,0,.28);padding:28px max(16px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.au-demo{display:block;width:fit-content;margin:0 auto 24px;background:#fffbe6;color:#5c4400;border:1px dashed #c9a227;font-size:var(--fs-meta);padding:5px 10px;border-radius:4px}
@media(max-width:699px){.au{flex:1;display:flex;flex-direction:column;max-width:none}.au.au-plain{display:flex}.au-demo{margin:0;border-radius:0;text-align:center;width:auto}}
/* a tall phone has room for the proverb; a short one keeps just the bar */
@media(max-width:699px) and (min-height:820px){.au-hero-body{display:block}}
/* tablet: the dark band across the top, the card floating over its lower edge */
@media(min-width:700px){
  .au-shell{background:var(--soft)}
  .au-hero{padding-bottom:96px}
  .au-hero-body{display:block;padding-top:22px}
  .au-hero-q{font-size:1.7rem}
  .au-main{display:grid;align-content:start;background:transparent;box-shadow:none;border-radius:0;margin-top:-72px;padding-top:0}
  .au{box-shadow:0 30px 70px -28px rgba(0,0,0,.45);border-radius:20px}
  .au-card{box-shadow:none}
}
/* laptop: the welcome panel carries the proverb, the top is a plain bar again */
@media(min-width:1100px){
  .au-hero{background:var(--bg);color:var(--ink);padding-bottom:0}
  .au-hero .au-weave,.au-hero-body{display:none}
  .au-top-logo,.au-close{color:var(--ink)}
  .au-close{border-color:var(--line)}
  .au-close:hover{background:var(--soft)}
  .au-shell{background:var(--bg)}
  .au-main{margin-top:0;padding-top:8px}
}

/* Reading with no connection: what is on the phone, and the plain words on the save button. */
.off-ok{color:var(--ok);font-weight:600;white-space:nowrap}
.off-miss{opacity:.45}
.ibtn.save-btn{width:auto;min-width:36px;padding:0 10px;border-radius:18px;display:inline-flex;align-items:center;gap:5px}
.save-lab{font-size:.82rem;font-weight:600}

/* Polish: the details a thumb and an eye notice. */
.au .au-card h2::after{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--accent);margin-top:12px}
.au-in{transition:border-color .15s,box-shadow .15s,background-color .15s}
.au-in:focus,.au-cc:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 38%,transparent)}
.au-iw{position:relative}
.au-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .15s}
.au-iw:focus-within .au-ico,.au-pw:focus-within .au-ico{stroke:var(--ink)}
.au-has-ico{padding-left:50px}
.au-btn:not(.alt):not(.wa){background:linear-gradient(180deg,#2a2822,var(--ink) 55%);box-shadow:0 10px 22px -10px rgba(21,20,15,.65),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .12s,box-shadow .12s}
:root[data-theme="dark"] .au-btn:not(.alt):not(.wa){background:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .au-btn:not(.alt):not(.wa){background:var(--ink)}}
.au-btn:active{transform:scale(.985)}
.au-btn.alt{box-shadow:0 1px 2px rgba(0,0,0,.06)}
.au-btn.loading{position:relative;color:transparent}
.au-btn.loading::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:au-spin .7s linear infinite}
.au-btn.alt.loading::after{border-color:var(--line);border-top-color:var(--ink)}
.au-tabs{box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.au-tabs button.on{font-weight:700}
.au-dots i.on{background:linear-gradient(90deg,#D99A1E,#F0B545)}
.au-clist{box-shadow:0 1px 2px rgba(0,0,0,.05)}
/* laptop welcome panel: the woven border, and today's proverb under the benefits */
.au-side{position:relative;overflow:hidden}
.au-side .au-weave{position:absolute;left:0;right:0;top:0}
.au-side::after{content:"";position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(217,154,30,.28),transparent 65%);pointer-events:none}
.au-side-q{margin-top:6px;padding-top:22px;border-top:1px solid rgba(244,239,228,.2);position:relative;z-index:1}
.au-side-q span{display:inline-block;font-size:.78rem;font-weight:700;color:#F0B545;margin-bottom:8px}
.au-side-q q{display:block;quotes:none;font-family:var(--serif);font-weight:700;font-size:1.25rem;line-height:1.5}
@keyframes au-spin{to{transform:rotate(360deg)}}
@keyframes au-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .au-card.au-fresh>*{animation:au-up .45s cubic-bezier(.2,.7,.2,1) both}
  .au-card.au-fresh>*:nth-child(2){animation-delay:.04s}.au-card.au-fresh>*:nth-child(3){animation-delay:.08s}
  .au-card.au-fresh>*:nth-child(4){animation-delay:.12s}.au-card.au-fresh>*:nth-child(5){animation-delay:.16s}
  .au-card.au-fresh>*:nth-child(6){animation-delay:.2s}.au-card.au-fresh>*:nth-child(7){animation-delay:.24s}
}

/* ===== The new look (a trial: body.ui-new) ============================================================== */
/* one profile icon: at the bottom on a phone and tablet, at the top only on a laptop */
body.ui-new .acct-top{display:none}
@media(min-width:1100px){body.ui-new .acct-top{display:inline-flex}}
body.ui-new .mast-top .ibtn{width:44px;height:44px;background:var(--soft);box-shadow:0 1px 3px rgba(0,0,0,.1)}
body.ui-new .mast-top .ibtn:hover{background:var(--line)}
body.ui-new .pub{padding-bottom:120px}
@media(min-width:1100px){body.ui-new .pub{padding-bottom:70px}}
body.ui-new .tabbar{display:none}
/* the floating bar */
.fnav{position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:4px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:34px;padding:8px;box-shadow:0 16px 36px -14px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.08);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.fnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 4px;border-radius:24px;
  font-size:.72rem;font-weight:600;line-height:1.1;color:var(--muted);transition:background-color .2s,color .2s}
.fnav a .icon{width:24px;height:24px}
.fnav a.on{background:var(--accent);color:#15140f;font-weight:700}
.fnav a:focus-visible{outline:3px solid var(--focus,var(--link));outline-offset:2px}
.fnav .fav{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#15140f;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.fnav a.on .fav{background:#15140f;color:var(--accent)}
body.nav-hide .fnav{transform:translateY(140%);opacity:0}
@media(min-width:700px){.fnav{left:50%;right:auto;width:520px;transform:translateX(-50%)}body.nav-hide .fnav{transform:translate(-50%,140%)}}
@media(min-width:1100px){.fnav{display:none}}
body.pmv-on .fnav{display:none!important}
/* the article: a picture with the title on it, and a sheet rising over it */
.rd-main{display:block}
.rd-top{display:none}
@media(min-width:1100px){.rd-top{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:12px 20px}.rd-logo{font-family:var(--serif);font-weight:800;font-size:2rem;line-height:1}.rd-top .acts{display:flex;gap:6px;align-items:center}}
.article.rd{max-width:none;padding-top:0;margin:0}
.rd-hero{position:relative;height:310px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:0 22px 52px;background:#15140f}
.rd-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rd-pat{position:absolute;inset:0;background:radial-gradient(120% 90% at 85% -10%,rgba(217,154,30,.35),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px),#15140f}
.rd-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 38%,rgba(0,0,0,.78))}
.rd-hero>*{position:relative;z-index:2}
.rd-wv{position:absolute!important;left:0;right:0;top:0;height:8px;z-index:3;background:
  linear-gradient(135deg,#9B2D5A 25%,transparent 25%) -5px 0/10px 10px,linear-gradient(225deg,#9B2D5A 25%,transparent 25%) -5px 0/10px 10px,
  linear-gradient(315deg,#D99A1E 25%,transparent 25%) 0 0/10px 10px,linear-gradient(45deg,#D99A1E 25%,transparent 25%) 0 0/10px 10px,#0F7C7A}
.rd-bar{position:absolute!important;left:0;right:0;top:calc(20px + env(safe-area-inset-top));z-index:4;display:flex;justify-content:space-between;padding:0 16px}
.rd-btn{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(21,20,15,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rd-btn .icon{width:24px;height:24px}
.rd-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.rd-txt{width:100%;max-width:700px;margin:0 auto}
.rd-kick{display:inline-block;font-size:.82rem;font-weight:700;color:#F0B545;margin-bottom:8px;background:rgba(21,20,15,.6);padding:3px 12px;border-radius:999px}
.rd-hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.3;margin:0 0 8px;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.rd-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.9rem;opacity:.95}
.rd-ok{background:rgba(255,255,255,.2);border-radius:999px;padding:1px 10px;font-weight:600;font-size:.8rem}
.rd-sheet{position:relative;z-index:3;margin-top:-30px;background:var(--bg);border-radius:30px 30px 0 0;padding:22px 20px 40px;box-shadow:0 -12px 30px -10px rgba(0,0,0,.35)}
.rd-sheet>*{max-width:680px;margin-left:auto;margin-right:auto}
.rd-by{display:flex;align-items:center;gap:12px;padding-bottom:14px}
.rd-av{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#15140f;display:grid;place-items:center;font-weight:800;font-size:1.15rem;flex:none}
.rd-nm{flex:1;min-width:0}.rd-nm b{display:block;font-size:1.02rem}.rd-nm small{color:var(--muted)}
.rd-by time{color:var(--muted);font-size:.85rem}
.rd-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:2px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.rd-acts button{min-height:54px;border-radius:16px;border:1.5px solid var(--line);background:var(--bg);display:grid;justify-items:center;align-content:center;gap:1px;font-size:.74rem;font-weight:600;cursor:pointer;color:var(--ink)}
.rd-acts button.on{background:color-mix(in srgb,var(--accent) 22%,var(--bg));border-color:var(--accent)}
.rd-acts .icon{width:21px;height:21px}
.rd-acts .aa{display:inline-flex;align-items:baseline;gap:2px;line-height:1;font-weight:700}.rd-acts .aa i{font-style:normal;font-size:.85rem}.rd-acts .aa b{font-size:1.3rem}
.rd-sheet>.sup-top{max-width:none;margin:0 0 16px;border:1px solid var(--line);border-radius:18px;overflow:hidden}.rd-sheet>.sup-top .sup-top-in{padding:12px 14px;flex-wrap:wrap}
.rd-acts button:focus-visible{outline:3px solid var(--focus,var(--link));outline-offset:2px}
.rd-read{width:100%;margin:0 auto 18px}
.rd-sheet>.prose,.rd-sheet>.rich{max-width:680px}
@media(min-width:700px){.rd-hero{height:360px;padding-inline:36px}.rd-sheet{padding-inline:36px}.rd-bar{padding:0 28px}}
@media(min-width:1100px){.rd-hero{height:420px}.rd-bar{display:none}.rd-hero{padding-bottom:64px}}
/* the invitation, the switch and the one question */
.ui-pv{display:block;flex:none;width:84px;height:104px;border-radius:14px;border:2px solid var(--ink);background:var(--bg);position:relative;overflow:hidden;box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
.ui-pv i{position:absolute;left:8px;right:8px;top:8px;height:42px;border-radius:7px;background:linear-gradient(160deg,#2b2218,#d99a1e)}
.ui-pv u{position:absolute;left:8px;right:8px;top:56px;height:5px;border-radius:3px;background:var(--line);text-decoration:none}
.ui-pv u+u{top:66px;right:28px}
.ui-pv .fb{position:absolute;left:8px;right:8px;bottom:7px;height:15px;border-radius:9px;background:var(--bg);border:1px solid var(--line);display:flex;gap:4px;padding:2px 3px;align-items:center;justify-content:space-between}
.ui-pv .fb em{width:9px;height:9px;border-radius:50%;background:var(--line)}.ui-pv .fb em.on{width:22px;border-radius:6px;background:var(--accent)}
.ui-pv.old .fb{left:0;right:0;bottom:0;height:13px;border-radius:0;border-width:1px 0 0}
.ui-btn{border:0;border-radius:999px;min-height:44px;padding:0 20px;font-weight:700;font-size:.95rem;cursor:pointer;background:var(--ink);color:var(--bg)}
.ui-btn.alt{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.ui-inv{margin:12px 0 4px;border-radius:20px;padding:14px;display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;max-width:620px;margin-inline:auto;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%,var(--bg)),color-mix(in srgb,var(--accent) 8%,var(--bg)));border:1.5px solid color-mix(in srgb,var(--accent) 60%,var(--bg))}
.ui-inv .tx{display:grid;gap:6px}.ui-inv b{font-size:1.05rem}.ui-inv .d{font-size:.88rem;color:var(--muted);line-height:1.45}
.ui-inv .bb{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.ui-look{margin:14px 0;border:1px solid var(--line);border-radius:20px;padding:16px;display:grid;gap:12px}
.ui-look h3{margin:0;font-size:1.05rem}.ui-look p{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.ui-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ui-opt{border:2px solid var(--line);border-radius:18px;padding:12px;background:var(--bg);display:grid;justify-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:.95rem;text-align:center;color:var(--ink)}
.ui-opt small{font-weight:400;color:var(--muted);font-size:.78rem;line-height:1.3}
.ui-opt[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
.ui-opt:focus-visible,.ui-btn:focus-visible,.vote:focus-visible{outline:3px solid var(--focus,var(--link));outline-offset:2px}
.ui-fbs{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg);border-radius:28px 28px 0 0;padding:26px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -16px 40px -12px rgba(0,0,0,.5);display:grid;gap:12px;text-align:center;max-width:560px;margin:0 auto}
.ui-fbs::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:4px;border-radius:2px;background:var(--line);transform:translateX(-50%)}
.ui-fbs h4{margin:4px 0 0;font-size:1.1rem}.ui-fbs p{margin:0;color:var(--muted);font-size:.9rem}
.ui-x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--soft);cursor:pointer;font-size:1rem;color:var(--ink)}
.votes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vote{border:1.5px solid var(--line);border-radius:18px;min-height:80px;background:var(--bg);display:grid;place-items:center;gap:2px;cursor:pointer;font-weight:700;font-size:.95rem;padding:8px;color:var(--ink)}
.vote .em{font-size:1.8rem;line-height:1}.vote:hover{border-color:var(--ink)}
.ui-lnk{border:0;background:transparent;text-decoration:underline;color:var(--link);cursor:pointer;font-size:.95rem;padding:6px}
.ui-fbs .thx{display:grid;gap:8px;justify-items:center;padding:6px 0}
.ui-fbs .ok{width:52px;height:52px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#15140f}
.ui-fbs .ok .icon{width:26px;height:26px}
/* ቃና Desk: the new look against the classic one */
.ui-an .sp{display:flex;height:24px;border-radius:12px;overflow:hidden;background:var(--soft)}
.ui-an .sp i{display:grid;place-items:center;font-style:normal;font-size:.74rem;font-weight:700;color:#15140f;min-width:0;overflow:hidden;white-space:nowrap}
.ui-an .sp i.a{background:var(--accent)}.ui-an .sp i.b{background:var(--ink);color:var(--bg)}
.ui-an .r{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:12px;align-items:center;font-size:.88rem;margin:10px 0}
.ui-an .leg{display:flex;gap:14px;font-size:.78rem;color:var(--muted);margin-top:6px}
.ui-an .leg em{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;font-style:normal}
@media(prefers-reduced-motion:reduce){.fnav{transition:none}}

.ctry-t{display:block;min-width:60px;height:8px;background:var(--line);border-radius:4px;overflow:hidden}.ctry-t i{display:block;height:100%;background:var(--ink)}
.tbl.ctry td.num,.tbl.ctry th:nth-child(2),.tbl.ctry th:nth-child(3){font-variant-numeric:tabular-nums;text-align:right}.ctry-more{margin-top:10px}.ctry-more summary{cursor:pointer;font-size:.9rem;padding:6px 0}