/* Antífona — the design is the prototype's, ported token-for-token.
   Paper and ink, gold as the single accent, era colours as a secondary
   coding dimension. Do not re-pick the colours. */

:root{
  --bg:#EDE7DC; --bg-2:#E4DDCF; --paper:rgba(255,255,255,.94); --paper-solid:#FFFFFF; --paper-2:rgba(0,0,0,.035);
  --ink:#1E1A16; --ink-2:#5C554B; --ink-3:#8E867A; --line:rgba(30,26,22,.08); --line-2:rgba(30,26,22,.14);
  --gold:#B8934F; --gold-soft:rgba(184,147,79,.16);
  --era-patristic:#B8934F; --era-medieval:#9A4B4B; --era-early:#3F7D7A; --era-modern:#5B6C8F;
  --shadow-1:0 1px 2px rgba(30,26,22,.06),0 8px 24px -8px rgba(30,26,22,.18);
  --shadow-2:0 2px 6px rgba(30,26,22,.08),0 24px 60px -16px rgba(30,26,22,.32);
  --spring:cubic-bezier(.34,1.35,.64,1); --ease:cubic-bezier(.32,.72,0,1);
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif; --sans:"Instrument Sans",-apple-system,system-ui,sans-serif;
  --tint:#5B6C8F; --atmo-a:.25; --sea:#A9D3EE; --land:#B7DDAA; --border:rgba(255,255,255,.75);
  --atmo:radial-gradient(120% 80% at 50% 0%,color-mix(in oklab,var(--tint) 24%,transparent),transparent 60%),radial-gradient(90% 60% at 50% 110%,rgba(58,72,90,.18),transparent 60%);
}
html[data-theme=dark]{
  --bg:#141210; --bg-2:#1B1815; --paper:rgba(32,28,24,.68); --paper-solid:#231F1B; --paper-2:rgba(32,28,24,.5);
  --ink:#F1EBE0; --ink-2:#B9B0A2; --ink-3:#7E766B; --line:rgba(241,235,224,.08); --line-2:rgba(241,235,224,.14);
  --gold:#D0AA62; --gold-soft:rgba(208,170,98,.16);
  --era-patristic:#D0AA62; --era-medieval:#C46A6A; --era-early:#5FA6A2; --era-modern:#8397BD;
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-2:0 2px 6px rgba(0,0,0,.35),0 24px 60px -16px rgba(0,0,0,.7);
  --sea:color-mix(in oklab,#A9D3EE 22%,#0F151C); --land:color-mix(in oklab,#B7DDAA 28%,#171C18); --border:rgba(255,255,255,.14);
  --atmo:radial-gradient(120% 80% at 50% 0%,color-mix(in oklab,var(--tint) 18%,transparent),transparent 60%),radial-gradient(90% 60% at 50% 110%,rgba(40,52,74,.5),transparent 60%);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:12px}
/* The page heading, present for machines and screen readers but never painted.
   This interface has no title bar by design — the map and the sheet are the
   whole surface — so the heading is stated here rather than drawn. Taken out
   of flow, so it cannot affect a single existing rule. Nothing else uses it. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a{color:var(--gold)}a:hover{color:var(--ink)}
#app{position:fixed;inset:0}
#map{position:absolute;inset:0;background:var(--sea);z-index:0;transition:background .4s}
#map .land{fill:var(--land);fill-opacity:1;stroke:none;transition:fill .4s}
#map .border{fill:none;stroke:var(--border);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.leaflet-container{font-family:var(--sans)}
.leaflet-control-attribution{background:var(--paper)!important;backdrop-filter:blur(12px);color:var(--ink-3)!important;font-size:10px;border-radius:8px 0 0 0;padding:2px 8px}
.leaflet-control-attribution a{color:var(--ink-2)!important}
.leaflet-control-zoom{border:0!important;box-shadow:var(--shadow-1)!important;border-radius:14px!important;overflow:hidden;background:var(--paper);backdrop-filter:blur(16px)}
.leaflet-control-zoom a{background:transparent!important;color:var(--ink)!important;border:0!important;width:38px!important;height:38px!important;line-height:38px!important;font-weight:400;transition:background .15s}
.leaflet-control-zoom a:hover{background:var(--gold-soft)!important}
.leaflet-bottom.leaflet-right{bottom:max(16px,env(safe-area-inset-bottom));right:12px}
@media (max-width:879px){.leaflet-control-zoom{display:none}.leaflet-bottom.leaflet-right{bottom:calc(var(--peek,112px) + 6px)}}
/* map atmosphere */
#atmo{position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--atmo);mix-blend-mode:multiply;opacity:var(--atmo-a);transition:opacity .4s}
html[data-theme=dark] #atmo{mix-blend-mode:normal}
/* pins */
.pin-wrap{background:none!important;border:0!important}
.pin{position:relative;display:grid;place-items:center;width:44px;height:44px;transform:translateZ(0);animation:pop .55s var(--spring) both;cursor:pointer;will-change:transform}
.pin:hover .av{transform:scale(1.12)}
.pin:active .av{transform:scale(.96);transition-duration:.08s}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:500;font-size:16px;letter-spacing:-.02em;color:var(--ink);background:var(--paper-solid);box-shadow:0 0 0 2px var(--paper-solid),0 0 0 3.5px var(--ring,var(--gold)),var(--shadow-1);transition:transform .35s var(--spring),box-shadow .2s;user-select:none;overflow:hidden}
/* Absolute, because the avatar boxes are auto-sized grids: a percentage
   width would resolve against the image's own 256px, not the circle. */
.av,.mini,.big{position:relative}
.av img,.mini img,.big img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* Initials fallback, tinted with the era colour so it reads as designed,
   not missing. */
.ini{color:color-mix(in oklab,var(--ring,var(--gold)) 62%,var(--ink))}
.pin.approx .av{box-shadow:0 0 0 2px var(--paper-solid),0 0 0 3.5px transparent,var(--shadow-1)}
.pin.approx .av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px dashed var(--ring,var(--gold))}
.pin.cluster{width:auto;height:52px;padding:0 4px}
.stack{display:flex;align-items:center}
.stack .av{width:32px;height:32px;font-size:13px;margin-left:-7px;box-shadow:0 0 0 2px var(--paper-solid),0 0 0 3px var(--ring),var(--shadow-1)}
.stack .av:first-child{margin-left:0}
/* A stack showing everyone is clickable per avatar, so only the one under the
   pointer reacts — and it rises above the ones it overlaps. */
.pin.cluster:hover .av[data-slug],.pin.cluster:active .av[data-slug]{transform:none}
.pin.cluster .av[data-slug]:hover{transform:scale(1.12);z-index:1}
.pin.cluster .av[data-slug]:active{transform:scale(.96);transition-duration:.08s}
.count{position:absolute;top:-4px;right:-2px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-1)}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
/* top bar */
#top{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;z-index:5;display:flex;justify-content:flex-end;align-items:flex-start;pointer-events:none}
#top>*{pointer-events:auto}
.glass{background:var(--paper);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}
.topright{display:flex;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;color:var(--ink);transition:transform .35s var(--spring),background .15s}
.icon-btn:hover{background:var(--gold-soft)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#unplaced{position:absolute;z-index:5;left:50%;transform:translateX(-50%);top:calc(max(12px,env(safe-area-inset-top)) + 56px);height:34px;padding:0 14px;border-radius:17px;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .35s var(--spring),background .15s;text-decoration:none}
#unplaced:hover{background:var(--paper-solid);color:var(--ink-2)}
#unplaced:active{transform:translateX(-50%) scale(.96)}
#unplaced .dots{display:flex}
#unplaced .dots span{width:18px;height:18px;border-radius:50%;background:var(--paper-solid);box-shadow:0 0 0 1.5px var(--ink-3);display:grid;place-items:center;font:500 9px var(--serif);margin-left:-5px}
#unplaced .dots span:first-child{margin-left:0}
/* sheet */
#sheet{position:absolute;left:0;right:0;top:0;height:100%;z-index:10;display:flex;flex-direction:column;border-radius:28px 28px 0 0;box-shadow:var(--shadow-2),inset 0 0 0 1px var(--line);will-change:transform;transition:transform .6s var(--ease);touch-action:none;overflow:hidden}
#sheet.dragging{transition:none}
#sheet.dragging *{pointer-events:none}
.grab{height:22px;display:grid;place-items:center;flex:none;cursor:grab}
.grab::before{content:"";width:40px;height:5px;border-radius:3px;background:var(--line-2)}
.sheet-head{flex:none;padding:2px 16px 12px}
.search{position:relative;display:flex;align-items:center;height:48px;border-radius:16px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s,background .2s}
.search:focus-within{box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 4px var(--gold-soft);background:var(--paper-solid)}
.search svg{position:absolute;left:14px;width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.7;stroke-linecap:round}
.search input{flex:1;height:100%;background:none;border:0;padding:0 44px 0 42px;font:inherit;font-size:16px;color:var(--ink);outline:none;min-width:0}
.search input::placeholder{color:var(--ink-3)}
.search input::-webkit-search-cancel-button{display:none}
.search .clear{position:absolute;right:6px;width:36px;height:36px;border-radius:18px;display:grid;place-items:center;color:var(--ink-3);opacity:0;transform:scale(.6);transition:all .3s var(--spring)}
.search.has .clear{opacity:1;transform:scale(1)}
.search .clear:hover{background:var(--gold-soft);color:var(--ink)}
/* At "full" the sheet is translated down ~6vh but keeps height:100%, so its
   bottom 6vh sits below the viewport; the extra scroll slack lets the last
   quote clear that off-screen band. Desktop (fixed panel) resets it below. */
.sheet-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:calc(6vh + 18px + env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
/* Author view: keep the theme pills reachable while reading down the quotes.
   An opaque band so scrolling quotes don't bleed through behind the pills. */
.chips.sticky-top{position:sticky;top:0;z-index:3;background:var(--paper-solid);padding-top:10px;padding-bottom:10px;box-shadow:0 6px 12px -8px var(--line)}
turbo-frame{display:block}
.view{animation:viewin .5s var(--ease) both}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chips{display:flex;gap:8px;padding:2px 16px 12px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 13px;border-radius:17px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px;transition:transform .35s var(--spring),background .15s,color .15s,box-shadow .15s;white-space:nowrap;text-decoration:none}
.chip:hover{background:var(--paper-solid);color:var(--ink)}
.chip:active{transform:scale(.94)}
.chip.on{background:var(--ink);color:var(--bg);box-shadow:none}
.chip.on:hover{color:var(--bg)}
.chip .mini{width:20px;height:20px;border-radius:50%;background:var(--paper-solid);box-shadow:0 0 0 1.5px var(--ring);display:grid;place-items:center;font:500 10px var(--serif);color:var(--ink);margin-left:-5px;overflow:hidden}
.chip .n{color:var(--ink-3);font-variant-numeric:tabular-nums}
.chip.on .n{color:inherit;opacity:.7}
.eyebrow{padding:10px 20px 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.eyebrow a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.eyebrow a:hover{color:var(--gold)}
.list{padding:0 12px}
.q{display:block;width:100%;text-align:left;padding:14px 12px 14px;border-radius:18px;transition:background .2s,transform .4s var(--spring);text-decoration:none;color:inherit}
.q:hover{background:var(--paper-2);color:inherit}
.q:active{transform:scale(.985)}
.q p{margin:0;font-family:var(--serif);font-size:22px;line-height:1.28;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty;font-weight:400}
.q.long p{font-size:19px}
/* flex-wrap: Spanish names and source titles run longer than the English the
   prototype was designed with — the source drops to its own line cleanly
   instead of breaking inside a name. */
.q .meta{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--ink-2);flex-wrap:wrap;row-gap:4px}
.q .meta>span{white-space:nowrap}
.q .meta .src{white-space:normal}
.q .meta .mini{width:22px;height:22px;border-radius:50%;background:var(--paper-solid);box-shadow:0 0 0 1.5px var(--ring);display:grid;place-items:center;font:500 10px var(--serif);color:var(--ink);overflow:hidden;flex:none}
.q .meta .src{color:var(--ink-3)}
.q .meta .src::before{content:"·";margin-right:8px}
.src.attr{font-style:italic}
.divider{height:1px;background:var(--line);margin:0 12px}
.empty{padding:36px 24px;text-align:center;color:var(--ink-3);font-size:14px}
.empty p{margin:0 0 16px}
.empty-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.empty-actions .chip{height:36px}
mark{background:var(--gold-soft);color:inherit;border-radius:3px;padding:0 1px}
.fallback-note{margin:10px 20px 0;font-size:12.5px;font-style:italic;color:var(--ink-3)}
/* scholarly caveat on author profiles: dating disputes, uncertain places */
.scholium{margin:6px 20px 6px;font-size:12.5px;line-height:1.55;font-style:italic;color:var(--ink-3);text-wrap:pretty}
/* author view */
.back-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;margin:4px 12px 0;border-radius:18px;font-size:14px;color:var(--ink-2);transition:background .15s,transform .35s var(--spring);text-decoration:none}
.back-btn:hover{background:var(--paper-2);color:var(--ink)}
.back-btn:active{transform:scale(.95)}
.back-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.person{padding:14px 20px 6px;display:flex;gap:16px;align-items:center}
.person .big{flex:none;width:72px;height:72px;border-radius:50%;background:var(--paper-solid);box-shadow:0 0 0 3px var(--paper-solid),0 0 0 5px var(--ring),var(--shadow-1);display:grid;place-items:center;font:500 30px var(--serif);color:var(--ink);letter-spacing:-.03em;animation:pop .6s var(--spring) both;overflow:hidden}
.person .big.ini{color:color-mix(in oklab,var(--ring,var(--gold)) 62%,var(--ink))}
.person h2{margin:0;font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.02;letter-spacing:-.015em}
.person h2 small{display:block;font-size:19px;font-weight:400;color:var(--ink-2);letter-spacing:-.01em;margin-top:2px;font-style:italic}
.person .dates{margin-top:6px;font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.person .dates b{font-weight:500;color:var(--ring);margin-right:8px}
/* Spanish labels run longer than the English the prototype was laid out in:
   the facts label column is 88px here, not 72px (NACIMIENTO, TRADICIÓN). */
.facts{margin:10px 20px 0;padding:12px 14px;border-radius:16px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:6px;font-size:13.5px;color:var(--ink-2)}
.facts div{display:flex;gap:10px;align-items:baseline}
.facts div > span:first-child{flex:none;width:88px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.facts .unk{font-style:italic;color:var(--ink-3)}
.desc{margin:14px 20px 6px;font-size:15px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.morebtn{display:flex;width:calc(100% - 40px);margin:6px 20px 8px;height:46px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:500;align-items:center;justify-content:center;gap:8px;transition:transform .35s var(--spring),opacity .15s;text-decoration:none}
.morebtn:hover{opacity:.9;color:var(--bg)}.morebtn:active{transform:scale(.97)}
.ppl{padding:0 12px}
.prow{display:flex;width:100%;align-items:center;gap:14px;padding:10px 12px;border-radius:16px;text-align:left;transition:background .2s,transform .35s var(--spring);text-decoration:none;color:inherit}
.prow:hover{background:var(--paper-2);color:inherit}.prow:active{transform:scale(.985)}
.prow .av{width:40px;height:40px;flex:none;position:relative}
.prow .nm{font-family:var(--serif);font-size:18px;letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
.prow .nm em{color:var(--ink-2);font-style:italic}
.prow .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
/* full-bleed quote */
#reader{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;background:var(--paper);backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);opacity:0;pointer-events:none;transition:opacity .45s var(--ease);touch-action:none}
#reader::before{content:"";position:absolute;inset:0;background:var(--atmo);pointer-events:none}
#reader.open{opacity:1;pointer-events:auto}
#reader .inner{position:relative;flex:1;display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));transform:translateY(40px) scale(.96);transition:transform .6s var(--spring)}
#reader.open .inner{transform:none}
#reader .rtop{display:flex;justify-content:space-between;align-items:center;height:48px}
#reader .rtop .eyebrow{padding:0}
#reader .body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
#reader blockquote{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,6.6vw,54px);line-height:1.14;letter-spacing:-.012em;text-wrap:pretty;color:var(--ink)}
#reader blockquote.long{font-size:clamp(24px,4.8vw,38px);line-height:1.22}
#reader .orig{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:clamp(16px,2.4vw,20px);color:var(--ink-2);line-height:1.45;opacity:0;transform:translateY(8px);transition:all .6s var(--ease) .15s}
#reader .orig.note{font-size:13.5px;font-family:var(--sans);color:var(--ink-3)}
#reader.open .orig{opacity:1;transform:none}
#reader .fallback-note{margin:14px 0 0}
#reader .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
#reader .tags .chip{height:30px;font-size:12.5px}
#reader .who{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px;margin:0 -12px;border-radius:18px;transition:background .2s,transform .35s var(--spring);text-decoration:none;color:inherit}
#reader .who:hover{background:var(--paper-2);color:inherit}#reader .who:active{transform:scale(.985)}
#reader .who .av{width:46px;height:46px;flex:none;position:relative;font-size:19px}
#reader .who .nm{font-family:var(--serif);font-size:19px;letter-spacing:-.01em;color:var(--ink)}
#reader .who .nm em{color:var(--ink-2)}
#reader .who .src{font-size:13px;color:var(--ink-3);margin-top:1px}
#reader .who .cite{font-size:12px;font-style:italic;color:var(--ink-3);margin-top:1px}
#reader .who > svg{margin-left:auto;width:20px;height:20px;stroke:var(--ink-3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* desktop: sheet becomes a left panel */
@media (min-width:880px){
  #sheet{top:16px;left:16px;bottom:auto;height:auto;max-height:calc(100% - 32px);width:420px;right:auto;border-radius:28px;transform:none!important;transition:none;touch-action:auto}
  .sheet-body{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .grab{display:none}
  .sheet-head{padding-top:16px}
  #top{left:456px}
  #unplaced{left:auto;right:12px;transform:none;top:calc(max(12px,env(safe-area-inset-top)) + 56px)}
  #unplaced:active{transform:scale(.96)}
  .leaflet-control-attribution{border-radius:8px 0 0 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  #sheet{transition-duration:.01ms!important}
}

/* Admin: in-place editing. Only rendered for a signed-in admin; each field
   is a turbo-frame that swaps between its display and a small form. */
turbo-frame.editable{display:block;position:relative}
.pencil{display:inline-grid;place-items:center;vertical-align:middle;width:22px;height:22px;margin:-4px 0 0 4px;border-radius:11px;color:var(--ink-3);transition:opacity .15s,background .15s,color .15s}
.pencil svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pencil:hover,.pencil:focus-visible{color:var(--ink);background:var(--gold-soft)}
@media (hover:hover){.editable:not(:hover):not(:focus-within) .pencil{opacity:0}}
.inline-form{margin:14px 20px 6px}
.inline-form textarea,.inline-form input:not([type=checkbox]):not([type=radio]),.inline-form select{width:100%;font:inherit;font-size:15px;line-height:1.55;color:var(--ink);background:var(--paper-solid);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;resize:vertical}
.inline-form textarea:focus-visible,.inline-form input:focus-visible,.inline-form select:focus-visible{outline:2px solid var(--gold);outline-offset:0;border-color:transparent}
.inline-actions{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px}
.inline-actions .hint{margin-left:auto;color:var(--ink-3);font-size:12px}
.btn{font:inherit;font-size:13.5px;font-weight:500;padding:7px 14px;border-radius:999px;background:var(--gold);color:#fff;text-decoration:none;cursor:pointer;border:0}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--paper-2)}
.inline-errors{margin:0 0 8px;padding:8px 12px 8px 28px;font-size:13px;color:#9A4B4B;border:1px solid color-mix(in oklab,#9A4B4B 40%,transparent);border-radius:10px}
html[data-theme=dark] .inline-errors{color:#C46A6A}
/* Pencil placement per field, and the small multi-input forms. */
.person > div{flex:1;min-width:0}
.editable-avatar{flex:none}
.editable-avatar .pencil{position:absolute;bottom:-6px;right:-8px;margin:0;background:var(--paper-solid);box-shadow:var(--shadow-1)}
.person h2 .pencil{margin-top:-10px}
.facts .coords{margin-left:6px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.facts .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.admin-facts{margin-top:10px;border-style:dashed}
.scholium.unk{color:var(--ink-3)}
.person .inline-form,.facts .inline-form{margin:0}
.facts .inline-form{padding:4px 0 6px}
.editable-note .inline-form{margin:6px 20px}
.inline-form .row{display:flex;gap:10px;align-items:flex-start}
.inline-form .row > div{flex:1;min-width:0}
.inline-form .row.radios{gap:14px;flex-wrap:wrap}
.inline-form .lbl{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:8px 0 3px}
.inline-form .lbl:first-child{margin-top:0}
.inline-form .chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);margin-top:8px;margin-right:12px}
.inline-form .hint{font-size:12px;color:var(--ink-3);margin:6px 0 0}
.facts .inline-form input:not([type=checkbox]):not([type=radio]),.facts .inline-form select,.person .inline-form input,.person .inline-form select{font-size:14px;padding:7px 10px;border-radius:10px}
.delete-author{margin:16px 20px 8px}
.btn.danger{color:#9A4B4B;border-color:color-mix(in oklab,#9A4B4B 40%,transparent)}
html[data-theme=dark] .btn.danger{color:#C46A6A}
.facts .inline-form div{display:block}
.facts .inline-form .row{display:flex}
/* Reader editors */
#reader .inline-form{margin:0}
#reader blockquote .pencil{width:30px;height:30px;margin:0 0 0 8px;vertical-align:middle}
#reader blockquote .pencil svg{width:18px;height:18px}
#reader .quote-input{font-family:var(--serif);font-size:clamp(22px,4vw,32px);line-height:1.2;letter-spacing:-.01em}
#reader .editable-original{display:block}
#reader .tags .pencil{align-self:center}
#reader .who.admin{flex-direction:column;align-items:stretch;gap:2px;cursor:default}
#reader .who.admin:hover{background:transparent}
#reader .who-main{display:inline-flex;vertical-align:middle;align-items:center;gap:14px;text-decoration:none;color:inherit}
#reader .who-main .av{width:46px;height:46px;flex:none;position:relative;font-size:19px}
#reader .who-main .nm{font-family:var(--serif);font-size:19px;letter-spacing:-.01em;color:var(--ink)}
#reader .who-rest{margin-left:60px;font-size:13.5px;color:var(--ink-2)}
#reader .who-rest .unk{font-style:italic;color:var(--ink-3)}
#reader .who-rest .attr-badge{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:8px}
#reader .who-rest .en-row{margin-top:6px}
#reader .who-rest .en-row .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:8px}
#reader .who-rest .inline-form{margin:6px 0}
.delete-quote{margin:8px 0 0;align-self:flex-start}
.tag-picker{position:relative}
.tag-tokens{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;background:var(--paper-solid);border:1px solid var(--line-2);border-radius:12px;cursor:text}
.tag-tokens:focus-within{outline:2px solid var(--gold);outline-offset:0;border-color:transparent}
.tag-tokens .token{height:28px;font-size:12.5px;padding:0 6px 0 11px;gap:4px}
.tag-tokens .token button{font:inherit;font-size:15px;line-height:1;color:inherit;opacity:.7;background:none;border:0;padding:0 4px;cursor:pointer;border-radius:8px}
.tag-tokens .token button:hover{opacity:1;background:rgba(255,255,255,.15)}
#reader .inline-form .tag-tokens .tag-query,.inline-form .tag-tokens .tag-query{flex:1 1 140px;width:auto;min-width:0;border:0;background:transparent;padding:4px 6px;font-size:14px;outline:none}
.tag-suggestions{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;margin:0;padding:6px;list-style:none;max-height:240px;overflow-y:auto;background:var(--paper-solid);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-2)}
.tag-suggestions li{padding:7px 10px;border-radius:8px;font-size:14px;cursor:pointer}
.tag-suggestions li[aria-selected=true],.tag-suggestions li:hover{background:var(--gold-soft)}
.tag-suggestions li.create{color:var(--ink-2);font-style:italic}
.tag-suggestions li.create::before{content:"+ ";font-style:normal}
.tag-error{font-size:12.5px;color:#9A4B4B}
/* Speed-dial and creation forms */
.dial{position:relative}
.dial-menu{position:absolute;top:52px;right:0;min-width:160px;padding:6px;border-radius:16px;display:flex;flex-direction:column;gap:2px}
.dial-menu a,.dial-menu button{display:block;width:100%;text-align:left;font:inherit;font-size:14px;color:var(--ink);padding:9px 12px;border-radius:10px;text-decoration:none;background:none;border:0;cursor:pointer}
.dial-menu a:hover,.dial-menu button:hover,.dial-menu a:focus-visible,.dial-menu button:focus-visible{background:var(--gold-soft);outline:none}
.dial-menu form{display:contents}
.dial.open .icon-btn svg{transform:rotate(45deg)}
.dial .icon-btn svg{transition:transform .35s var(--spring)}
.create-form .person .big{font-size:36px}
.create-facts{display:block;padding:4px 14px}
.fact-group{padding:8px 0}
.fact-group + .fact-group{border-top:1px solid var(--line)}
.fact-group .eyebrow{padding:0 0 2px}
.create-actions{margin:16px 20px 24px}
.add-quote{margin:8px 20px 0;display:inline-flex;text-decoration:none}
#reader .create-form{justify-content:flex-start;gap:14px;overflow-y:auto}
#reader .create-who{margin:0;padding:0}
#reader .create-form .inline-form{margin:0}
.dial-menu[hidden]{display:none}
.create-facts div{display:block}
.create-facts .row{display:flex}
.create-facts .inline-form .row > div{display:block}
/* Book dialog: a card on wide screens, a bottom sheet on narrow ones. */
.row.with-button{align-items:center}
.row.with-button select{flex:1}
.btn.small{flex:none;padding:6px 12px;font-size:13px;white-space:nowrap}
.sheet-dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;inset:0}
.sheet-dialog::backdrop{background:rgba(20,18,16,.35);backdrop-filter:blur(4px)}
.sheet-dialog .dialog-body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));padding:20px 22px 22px;border-radius:20px;background:var(--paper-solid);box-shadow:var(--shadow-2);color:var(--ink)}
.sheet-dialog h3{margin:0 0 6px;font-family:var(--serif);font-weight:400;font-size:22px}
.sheet-dialog input{width:100%;font:inherit;font-size:14px;color:inherit;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:8px 10px}
.sheet-dialog input:focus-visible{outline:2px solid var(--gold);outline-offset:0;border-color:transparent}
.sheet-dialog .lbl{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:10px 0 3px}
.sheet-dialog .row{display:flex;gap:10px}.sheet-dialog .row>div{flex:1}
.sheet-dialog .hint{font-size:12px;color:var(--ink-3);margin:8px 0 0}
.sheet-dialog .inline-actions{margin-top:14px}
@media (max-width:640px){
  .sheet-dialog .dialog-body{top:auto;bottom:0;left:0;transform:none;width:100%;border-radius:22px 22px 0 0;padding-bottom:max(22px,env(safe-area-inset-bottom))}
}

/* Install banner: a pale-yellow strip over everything, phones only. */
#install{position:fixed;z-index:30;top:max(8px,env(safe-area-inset-top));left:8px;right:8px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:16px;background:#FBF1C7;color:#3B3211;box-shadow:var(--shadow-2),inset 0 0 0 1px rgba(120,95,20,.18)}
#install[hidden]{display:none}
#install img{border-radius:10px;flex:none}
#install .txt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
#install .txt strong{font-weight:600;font-size:14px}
#install .txt span{opacity:.8}
#install .go{flex:none;height:34px;padding:0 14px;border-radius:17px;background:#3B3211;color:#FBF1C7;font-size:13px;font-weight:600}
#install .x{flex:none;width:34px;height:34px;border-radius:17px;display:grid;place-items:center}
#install .x svg{width:16px;height:16px;stroke-width:1.8;stroke-linecap:round}
html[data-theme=dark] #install{background:#3A3216;color:#F6EBC0;box-shadow:var(--shadow-2),inset 0 0 0 1px rgba(246,235,192,.16)}
html[data-theme=dark] #install .go{background:#F6EBC0;color:#3A3216}
#install{animation:install-in .5s var(--spring)}
@keyframes install-in{from{transform:translateY(-140%);opacity:0}}
#install .steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;opacity:1}
#install .steps li{display:flex;align-items:center;gap:8px}
#install .steps svg{flex:none;width:22px;height:22px;padding:3px;box-sizing:content-box;border-radius:8px;background:rgba(59,50,17,.1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-theme=dark] #install .steps svg{background:rgba(246,235,192,.14)}
@media (prefers-reduced-motion:reduce){#install{animation:none}}