/* =============================================================================
   luuletused.ee — base layer
   Direction A's visual identity, kept unchanged by Direction D (HANDOFF §4).
   No framework: the whole site is this file plus two small scripts.
   ========================================================================== */

/* --- tokens ---------------------------------------------------------------
   Three theme states, in this order and no other:
     :root                            light — every token defined here
     prefers-color-scheme + :not()    system dark, unless light is forced
     [data-theme="dark"]              explicit choice, wins both ways
   No colour gets its only definition inside a media or [data-theme] block. */
:root{
  /* surfaces and ink */
  --paper:#f2f2f0;
  --surface:#ffffff;
  --surface-2:#f8f8f6;
  --ink:#2a2926;
  --ink-2:#5c5952;
  --ink-3:#7a756d;
  --rule:#d9d5cd;
  --line:#e4e1db;
  --accent:#d2472a;
  --accent-soft:#fbeae5;
  --good:#2f7355;
  --good-soft:#e6f0ea;
  --warn:#8f660f;
  --warn-soft:#f7efdb;
  /* ad units are walled off on their own ground, never the page ground */
  --adslot:#eeece8;
  --adslot-line:#c7c2b8;
  --shadow:0 1px 2px rgba(42,41,38,.07),0 8px 24px -12px rgba(42,41,38,.24);

  /* type */
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --text-xs:11px;
  --text-sm:12.5px;
  --text-base:15px;
  --text-md:16px;
  --text-lg:clamp(18px,2.4vw,20px);
  --text-xl:clamp(22px,4vw,28px);
  --text-2xl:clamp(26px,5vw,34px);
  /* The poem's line box. The ruled background repeats on exactly this period. */
  --leading:30px;

  /* space and shape */
  --gap-1:4px; --gap-2:8px; --gap-3:12px; --gap-4:16px; --gap-5:24px; --gap-6:32px; --gap-7:48px;
  --radius:10px;
  --radius-sm:6px;
  --radius-pill:999px;

  /* reserved heights — every late-loading unit claims its space up front so
     CLS stays at 0 and nothing jumps under a thumb (HANDOFF §6) */
  --ad-inarticle:280px;
  --ad-infeed:250px;
  --ad-anchor:58px;
  --ad-rail:600px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1a1917;
  --surface:#232220;
  --surface-2:#2b2a27;
  --ink:#ece9e3;
  --ink-2:#aaa59c;
  --ink-3:#837e75;
  --rule:#423f3a;
  --line:#35332f;
  --accent:#ff7d5e;
  --accent-soft:#3a2119;
  --good:#6cc79b;
  --good-soft:#1c2a22;
  --warn:#e0b055;
  --warn-soft:#2d2616;
  --adslot:#2a2825;
  --adslot-line:#4a4640;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --paper:#1a1917;
  --surface:#232220;
  --surface-2:#2b2a27;
  --ink:#ece9e3;
  --ink-2:#aaa59c;
  --ink-3:#837e75;
  --rule:#423f3a;
  --line:#35332f;
  --accent:#ff7d5e;
  --accent-soft:#3a2119;
  --good:#6cc79b;
  --good-soft:#1c2a22;
  --warn:#e0b055;
  --warn-soft:#2d2616;
  --adslot:#2a2825;
  --adslot-line:#4a4640;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.6);
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--text-md);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Copy counts, ratings and every other figure line up in a column. */
.tnum{font-family:var(--mono);font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:var(--gap-2);top:var(--gap-2);z-index:99;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--gap-2) var(--gap-3);text-decoration:none;
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- layout ---------------------------------------------------------------
   Mobile is the primary design; the wider layouts are the derivative.
     < 780px   one column
     780-1000  wider measure, still one column
     > 1000px  three columns — finder rail, results, ad + shortlist rail */
.wrap{max-width:680px;margin:0 auto;padding:0 var(--gap-4)}
main{padding:var(--gap-5) 0 var(--gap-7)}
.stack>*+*{margin-top:var(--gap-4)}

/* --- masthead -------------------------------------------------------------- */
.bar{background:var(--surface);border-bottom:1px solid var(--line)}
.barrow{display:flex;align-items:center;gap:var(--gap-4);padding:10px var(--gap-4);max-width:680px;margin:0 auto}
.mark{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.02em;text-decoration:none}
.mark i{color:var(--accent);font-style:normal}
.barnav{display:flex;gap:var(--gap-3);font-size:13.5px;color:var(--ink-2)}
.barnav a{text-decoration:none}
.barnav a:hover{color:var(--ink);text-decoration:underline}
.tbtn{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:var(--text-sm);color:var(--ink-2);cursor:pointer;
  border:1px solid var(--line);background:var(--surface);
  padding:5px 11px;border-radius:var(--radius-pill);
}
.tbtn:hover{color:var(--ink)}

/* --- page furniture -------------------------------------------------------- */
.crumbs{font-size:var(--text-sm);color:var(--ink-3);margin-bottom:var(--gap-3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-title{font-family:var(--serif);font-size:var(--text-2xl);font-weight:600}
.lede{color:var(--ink-2);margin-top:var(--gap-3);font-size:var(--text-lg)}
.count{font-size:var(--text-xs);color:var(--ink-3);margin-top:var(--gap-2);
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.intro{font-size:var(--text-base);color:var(--ink-2);margin-top:var(--gap-3);line-height:1.62}
.empty{margin-top:var(--gap-4);color:var(--ink-2)}
.hsec{
  font-size:var(--text-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);margin-top:var(--gap-6);
}

/* --- occasion grid --------------------------------------------------------- */
.occgrid{margin-top:var(--gap-3);display:grid;gap:var(--gap-2);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.occ{border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.occ a{display:block;padding:11px var(--gap-3);text-decoration:none}
.occ a:hover{background:var(--surface-2);border-radius:9px}
.occ .n{display:block;font-size:13.5px;font-weight:600}
.occ .c{display:block;font-size:10px;color:var(--ink-3);margin-top:3px;
  font-family:var(--mono);font-variant-numeric:tabular-nums}

/* --- poem lists ------------------------------------------------------------
   Hairline separators via a 1px grid gap over the border colour: one border,
   no double lines, no :last-child exceptions. */
.plist{margin-top:var(--gap-3);display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pitem{background:var(--surface);padding:11px var(--gap-3)}
.pitem:hover{background:var(--surface-2)}
.pitem a{display:block;text-decoration:none}
.pitem .ti{display:block;font-family:var(--serif);font-size:var(--text-base);font-weight:600}
.pitem a:hover .ti{text-decoration:underline}
.pitem .ln{display:block;font-family:var(--serif);font-size:13px;color:var(--ink-2);
  line-height:1.45;margin-top:3px}
.pitem .ft{display:flex;align-items:center;gap:var(--gap-2);margin-top:7px;flex-wrap:wrap;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-3)}
.pitem .ft .rid{border:1px solid var(--line);border-radius:3px;padding:1px 5px;background:var(--surface-2)}
.pitem .ft .cp{color:var(--accent);font-weight:500}
.pitem .ft .sv{margin-left:auto;color:var(--ink-2)}

/* --- poem page ------------------------------------------------------------- */
.poemcard{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:var(--gap-4)}
.poemmeta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:9px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-3)}
.poemmeta .stars{color:var(--accent);font-family:var(--sans);font-size:var(--text-sm)}
.poemmeta .copies{background:var(--accent-soft);color:var(--accent);padding:3px 7px;
  border-radius:4px;font-weight:500}
/* The one decorative gesture in the whole design: real ruled lines. The
   gradient period equals --leading exactly, so the verse sits on the rules
   instead of running through them. */
.poem-body{
  font-family:var(--serif);
  font-size:15.5px;
  line-height:var(--leading);
  margin-top:var(--gap-4);
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--leading) - 1px),
    var(--rule) calc(var(--leading) - 1px) var(--leading));
}
.cta{display:flex;gap:var(--gap-2);margin-top:var(--gap-4)}
/* Class-only selectors: a `.cta button` element rule would outrank .cta__sq
   and quietly turn the icon buttons into full-width primary buttons. */
.cta__copy{
  flex:1;min-height:44px;border:0;border-radius:9px;
  background:var(--accent);color:#fff;
  font-size:14.5px;font-weight:600;padding:var(--gap-3);cursor:pointer;
}
.cta__copy:hover{filter:brightness(1.06)}
.cta__sq{
  flex:none;width:44px;min-height:44px;border-radius:9px;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
  font-size:16px;cursor:pointer;
}
.cta__sq[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.cta__status{min-height:1.4em;margin-top:var(--gap-2);font-size:var(--text-sm);color:var(--accent)}

/* --- rating ---------------------------------------------------------------
   Sits between the copy button and slot A, so the ad is never one thumb-width
   from the button everyone came to press. */
.rate{
  display:flex;align-items:center;gap:var(--gap-3);flex-wrap:wrap;
  margin-top:var(--gap-3);padding-top:var(--gap-3);border-top:1px solid var(--line);
}
.rate__q{font-size:var(--text-sm);color:var(--ink-2)}
.rate__stars{display:flex;gap:2px;margin-left:auto}
.rate__star{
  border:0;background:none;cursor:pointer;padding:2px 3px;
  font-size:19px;line-height:1;color:var(--line);
}
.rate__star.is-on{color:var(--accent)}
.rate.is-done .rate__star{cursor:default;color:var(--line)}
.rate.is-done .rate__q{color:var(--good);font-weight:600}

.morelink{margin-top:var(--gap-4);font-size:13.5px}
.morelink a{color:var(--accent);font-weight:600;text-decoration:none}
.morelink a:hover{text-decoration:underline}

/* Slot E is desktop-only: below 1000px the rail is not rendered at all rather
   than pushed under the poem, where it would be a fourth unit on a phone. */
.cols__rail{display:none}

/* --- ad slots --------------------------------------------------------------
   Every unit is labelled, sits on its own ground, walled off from the page, and
   reserves its height before it fills. The rules CSS cannot enforce — never
   between the h1 and the poem body, never beside the copy button, no
   interstitial on entry — live in the templates and in the tests. */
.ad{
  display:block;margin:var(--gap-6) 0;padding:var(--gap-2);
  border:1px solid var(--adslot-line);border-radius:9px;background:var(--adslot);
}
.ad__label{
  display:block;margin-bottom:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.ad__unit{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--ad-infeed);
}
.ad--inarticle .ad__unit{min-height:var(--ad-inarticle)}
.ad--rail .ad__unit{min-height:var(--ad-rail)}
.ad__unit>ins{width:100%}
.ad__placeholder{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  border:1px dashed var(--adslot-line);border-radius:6px;padding:6px 10px;
}

/* Slot D. Fixed rather than sticky so revealing or dismissing it never reflows
   the document; the space it occupies is reserved on <body> instead. */
.anchor{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;gap:9px;
  min-height:var(--ad-anchor);padding:6px var(--gap-3);
  border-top:1px solid var(--adslot-line);background:var(--adslot);
}
.anchor__label{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.anchor__unit{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px}
.anchor__close{
  flex:none;width:28px;height:28px;border-radius:var(--radius-pill);
  border:1px solid var(--adslot-line);background:var(--surface);color:var(--ink-2);
  font-size:15px;line-height:1;cursor:pointer;
}
.has-anchor{padding-bottom:calc(var(--ad-anchor) + var(--gap-2))}
[data-anchor="off"] .anchor{display:none}
[data-anchor="off"] .has-anchor{padding-bottom:0}

/* --- pagination ------------------------------------------------------------ */
.pager{display:flex;align-items:center;gap:var(--gap-4);margin-top:var(--gap-5);font-size:13.5px}
.pager span{color:var(--ink-3);font-size:var(--text-xs);font-family:var(--mono)}
.pager a{color:var(--accent);font-weight:600;text-decoration:none}
.pager a:hover{text-decoration:underline}

/* --- footer ---------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:var(--surface);
  padding:var(--gap-5) 0 var(--gap-6);margin-top:var(--gap-6)}
.foot p{font-size:var(--text-sm);color:var(--ink-3)}
.foot .mock{margin-top:6px;font-family:var(--mono);font-size:var(--text-xs)}


/* --- the finder -----------------------------------------------------------
   Three questions at the top of a page that already ranks. The chips are
   links, so this works with JS off; the script only makes the swap live. */
.finder{
  margin-top:var(--gap-4);padding:var(--gap-3);
  border:1px solid var(--line);border-radius:11px;background:var(--surface-2);
}
.finder[aria-busy="true"]{opacity:.7}
.fq{border:0;padding:0;margin:0 0 11px}
.fq:last-of-type{margin-bottom:0}
.fq__q{padding:0;margin-bottom:6px;display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--ink-2)}
.fq__n{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:3px;padding:0 4px;background:var(--surface)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  min-height:32px;padding:5px 10px;
  font-size:11.5px;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip__c{font-size:9.5px;color:var(--ink-3)}
.chip--on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip--on .chip__c{color:#fff;opacity:.8}
.chip--on:hover{border-color:var(--accent);color:#fff}
/* A combination that would return nothing is dimmed and not tappable: nobody
   should be able to reach an empty result. */
.chip--dim{color:var(--ink-3);opacity:.5;pointer-events:none}

/* The live count is the whole feeling of the feature — 1 240 -> 186 -> 34. */
.counter{
  display:flex;align-items:baseline;gap:var(--gap-2);
  border-top:1px solid var(--line);margin-top:11px;padding-top:10px;
  font-family:var(--mono);font-size:var(--text-xs);color:var(--ink-3);
}
.counter b{font-family:var(--sans);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.counter b:focus{outline:none}
.counter__was{text-decoration:line-through;opacity:.6}
.counter__clr{margin-left:auto;color:var(--accent);font-family:var(--sans);
  font-size:11.5px;font-weight:600;text-decoration:none}
.finder__go{margin-top:10px;width:100%;min-height:40px;border:1px solid var(--accent);
  border-radius:9px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}

/* Shown before a visitor can conclude the site is empty, with a real count. */
.widen{
  margin-top:11px;padding:11px var(--gap-3);
  border:1px dashed var(--line);border-radius:9px;background:var(--surface-2);
}
.widen__h{font-size:var(--text-sm);font-weight:600}
.widen__b{font-size:11.5px;color:var(--ink-2);margin-top:4px}
.widen__a{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:600;
  color:var(--accent);text-decoration:none}

/* --- Minu valik ------------------------------------------------------------
   Up to five poems in localStorage. No account, nothing sent to the server. */
.tray{
  margin-bottom:var(--gap-4);padding:11px var(--gap-3);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
}
.tray__h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600}
.tray__c{font-family:var(--mono);font-size:9.5px;background:var(--accent);color:#fff;
  border-radius:var(--radius-pill);padding:1px 6px}
.tray__list{margin-top:var(--gap-2)}
.tray__r{display:flex;align-items:center;gap:var(--gap-2);
  padding:6px 0;border-bottom:1px solid var(--line)}
.tray__r:last-child{border-bottom:0}
.tray__r a{flex:1;font-family:var(--serif);font-size:12.5px;color:var(--ink-2);text-decoration:none}
.tray__r a:hover{color:var(--ink);text-decoration:underline}
.tray__x{flex:none;width:24px;height:24px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-3);cursor:pointer;line-height:1}

/* Slot C rides in the list as a sibling of the rows, never inside one. */
.pitem--ad{padding:0;background:var(--paper)}
.pitem--ad .ad{margin:0;border:0;border-radius:0}

/* --- wider viewports -------------------------------------------------------
   One codebase, three layouts (HANDOFF §5):
     < 780px   single column, the finder collapsed above the list
     780-1000  two columns, finder rail and results, no right rail
     > 1000px  three columns, the right rail joins */
@media (min-width:780px){
  .wrap,.barrow{max-width:720px}
  .page-title{letter-spacing:-.02em}
  .cols--category{display:grid;grid-template-columns:238px 1fr;gap:var(--gap-5);align-items:start}
  .cols--category .finder{margin-top:0}
  .rail{position:sticky;top:var(--gap-4)}
}
@media (min-width:1000px){
  .wrap,.barrow{max-width:1080px}
  .cols--category{grid-template-columns:238px 1fr 300px}
  .cols--home{display:grid;grid-template-columns:1fr 300px;gap:var(--gap-5);align-items:start}
  .cols--poem{display:grid;grid-template-columns:1fr 300px;gap:var(--gap-5);align-items:start}
  .cols__rail{display:block}
}

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

/* --- search box ------------------------------------------------------------ */
.searchbox{display:flex;gap:var(--gap-2);margin-top:var(--gap-4)}
.searchbox__i{
  flex:1;min-width:0;min-height:44px;padding:0 var(--gap-3);
  font:inherit;font-size:var(--text-base);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
}
.searchbox--big .searchbox__i{background:var(--surface)}
.searchbox__i::placeholder{color:var(--ink-3)}
.searchbox__b{
  flex:none;min-height:44px;padding:0 var(--gap-4);
  border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
  color:var(--ink-2);font-weight:600;cursor:pointer;
}
.searchbox__b:hover{color:var(--ink)}

/* --- seasonal band ---------------------------------------------------------
   Traffic is heavily seasonal, so the homepage leads with whatever is close. */
.season{
  display:block;margin-top:var(--gap-3);padding:11px var(--gap-3);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;background:var(--surface-2);text-decoration:none;
}
.season__k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.season__h{display:block;margin-top:4px;font-size:13.5px;font-weight:600}

/* --- occasion tiles with sub-shortcuts ------------------------------------- */
.occ__a{display:block;padding:11px var(--gap-3) 6px;text-decoration:none}
.occ__sub{display:flex;gap:5px;flex-wrap:wrap;padding:0 var(--gap-3) 11px}
.occ__sub a{
  font-size:10.5px;color:var(--accent);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:2px 7px;background:var(--surface-2);
}
.occ__sub a:hover{border-color:var(--accent)}

/* --- forms ----------------------------------------------------------------- */
.wrap--narrow{max-width:560px}
.form{margin-top:var(--gap-5)}
.field{margin-bottom:var(--gap-4)}
.field label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:5px}
.field__opt{font-weight:400;color:var(--ink-3)}
.field input,.field select,.field textarea{
  width:100%;min-height:44px;padding:10px var(--gap-3);
  font:inherit;font-size:var(--text-base);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;background:var(--surface);
}
.field textarea{font-family:var(--serif);line-height:1.7;resize:vertical}
.field [aria-invalid="true"]{border-color:var(--accent)}
.field__h{margin-top:5px;font-size:11.5px;color:var(--ink-3)}
.field__e{margin-top:5px;font-size:11.5px;color:var(--accent);font-weight:600}
.form__go{
  width:100%;min-height:46px;border:0;border-radius:9px;
  background:var(--accent);color:#fff;font-size:var(--text-base);font-weight:600;cursor:pointer;
}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.notice{margin-top:var(--gap-4);padding:var(--gap-3) var(--gap-4);border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface-2)}
.notice--good{border-left:3px solid var(--good)}
.notice--bad{border-left:3px solid var(--accent);color:var(--accent);font-size:var(--text-base)}
.notice__h{font-weight:600}
.notice__b{margin-top:4px;font-size:var(--text-base);color:var(--ink-2)}

/* --- category FAQ ---------------------------------------------------------- */
.faq{margin-top:var(--gap-5)}
.faq__i{border-bottom:1px solid var(--line);padding:var(--gap-3) 0}
.faq__i:last-child{border-bottom:0}
.faq__q{font-size:var(--text-base);font-weight:600}
.faq__a{margin-top:5px;font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* --- recipient vote (tagging stage 4) -------------------------------------- */
.rate--tags{align-items:flex-start}
.tagvote{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto;max-width:100%}
.tagvote__b{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:var(--radius-pill);padding:4px 10px;font-size:11.5px;cursor:pointer;
}
.tagvote__b:hover{border-color:var(--ink-3);color:var(--ink)}
.tagvote__b.is-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.is-done .tagvote__b{cursor:default}
.is-done .tagvote__b:not(.is-on){opacity:.45}

/* --- poem tags -------------------------------------------------------------- */
.ptags{display:flex;gap:4px;flex-wrap:wrap;margin-top:var(--gap-2)}
.ptags a{
  font-size:10px;color:var(--ink-3);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:2px 8px;background:var(--surface-2);
}
.ptags a:hover{color:var(--ink);border-color:var(--ink-3)}

.byline{margin-top:6px;font-size:var(--text-sm);color:var(--ink-3)}
.field select[multiple]{height:auto;padding:6px}
.field select[multiple] option{padding:4px 6px}

/* --- moderation ------------------------------------------------------------ */
.adminbar{display:flex;align-items:center;gap:var(--gap-4);flex-wrap:wrap}
.adminbar .tbtn{margin-left:auto}
.pending{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:var(--gap-4);margin-top:var(--gap-4)}
.pending__t{font-family:var(--serif);font-size:var(--text-xl);font-weight:600}
.pending__m{margin-top:5px;font-family:var(--mono);font-size:var(--text-xs);color:var(--ink-3)}
.pending__c{display:flex;gap:4px;flex-wrap:wrap;margin-top:var(--gap-2)}
.pending__c .tg{font-size:10px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:2px 8px;background:var(--surface-2)}
.pending__a{display:flex;gap:var(--gap-2);margin-top:var(--gap-4)}
.pending__a form{flex:1}
.pending__a form:last-child{flex:none}
.pending__no{min-height:44px;padding:0 var(--gap-4);border:1px solid var(--line);
  border-radius:9px;background:var(--surface-2);color:var(--ink-2);font-weight:600;cursor:pointer}
.pending__no:hover{color:var(--accent);border-color:var(--accent)}