/* Proverb Lab — progressive disclosure: a cursor, the text, a small toolbar.
   Dark mode follows the OS. */
:root{
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#faf8f4;--fg:#1d1b18;--mut:#7a746b;--card:#fff;--bd:#e4dfd6;
  --slot-s:52%;--slot-l:37%;--tint:11%;--edge:55%;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#171613;--fg:#efebe3;--mut:#9a948a;--card:#222018;--bd:#38352d;
  --slot-s:42%;--slot-l:74%;--tint:16%;--edge:45%;
}}
:root[data-theme="dark"]{
  --bg:#171613;--fg:#efebe3;--mut:#9a948a;--card:#222018;--bd:#38352d;
  --slot-s:42%;--slot-l:74%;--tint:16%;--edge:45%;
}
*{box-sizing:border-box}
body{margin:0 auto;background:var(--bg);color:var(--fg);font:16px/1.5 Georgia,'Times New Roman',serif;padding:24px 20px;max-width:640px;min-height:100vh;display:flex;flex-direction:column}
[hidden]{display:none!important}

/* search: the cursor replaces the proverb in place — same type, same
   height as the proverb it swaps with, so nothing jumps */
#search{display:none;animation:rise .3s cubic-bezier(.2,.8,.3,1)}
#stage.searching #search{display:block}
#stage.searching .ph{display:none}
#search .sw{position:relative}
#sClose{position:absolute;top:50%;right:0;translate:0 -50%;width:46px;height:46px;border:0;background:none;color:var(--mut);border-radius:12px;display:grid;place-items:center;cursor:pointer;padding:0}
#sClose svg{display:block}
#sClose:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 7%,transparent)}
#sClose:active{transform:scale(.92)}
#q{width:100%;font:clamp(24px,5.5vw,30px)/2 Georgia,'Times New Roman',serif;background:none;border:0;outline:0;padding:0 58px 0 0;caret-color:var(--fg);color:var(--fg)}
#q::placeholder{color:var(--mut);opacity:.5}

/* add: enter your own proverb in place — no autocomplete, a language toggle
   on the left, save/close on the right. Same type and height as the proverb. */
#add{display:none;animation:rise .3s cubic-bezier(.2,.8,.3,1)}
#stage.adding #add{display:block}
#stage.adding .ph{display:none}
#add .sw{position:relative}
#aq{width:100%;font:clamp(24px,5.5vw,30px)/2 Georgia,'Times New Roman',serif;background:none;border:0;outline:0;padding:0 58px;caret-color:var(--fg);color:var(--fg)}
#aq::placeholder{color:var(--mut);opacity:.5}
#aLang{position:absolute;top:50%;left:0;translate:0 -50%;width:46px;height:46px;border:0;background:none;font-size:22px/1;border-radius:12px;display:grid;place-items:center;cursor:pointer;padding:0}
#aLang:hover{background:color-mix(in srgb,var(--fg) 7%,transparent)}
#aGo{position:absolute;top:50%;right:0;translate:0 -50%;width:46px;height:46px;border:0;background:none;color:var(--mut);border-radius:12px;display:grid;place-items:center;cursor:pointer;padding:0}
#aGo svg{display:block}
#aGo:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 7%,transparent)}
mark{background:linear-gradient(transparent 62%,#ffd54a80 62%);color:inherit;border-radius:2px;padding:0 1px}

/* popovers: search suggestions and word options share the look */
.sug,.wpop{background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:0 8px 28px #0003,0 2px 6px #0002;max-height:52vh;overflow:auto;overscroll-behavior:contain}
.sug{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:20}
.sug:empty{display:none}
.sug button,.wpop .opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:var(--fg);font:17px Georgia,'Times New Roman',serif;padding:10px 14px;cursor:pointer;white-space:normal}
.sug button + button,.wpop .opt + .opt{border-top:1px solid var(--bd)}
.sug button.act,.sug button:hover,.wpop .opt:hover{background:var(--bg)}
.sug .an{font:14px system-ui,sans-serif;color:var(--mut)}
.sug .an:hover{color:var(--fg)}
.sug small{display:block;color:var(--mut);font:11px system-ui,sans-serif;margin-top:2px}

/* selected state: a small toolbar, then the text — centered in the viewport
   (margin:auto centers both axes and degrades safely when content overflows) */
#stage{margin:auto;width:100%;animation:rise .45s cubic-bezier(.2,.8,.3,1)}

/* the original proverb, a quiet italic reference above the editable one */
.orig{font:italic clamp(13px,3vw,16px)/1.6 Georgia,'Times New Roman',serif;color:var(--mut);text-align:center;margin:0 auto 12px;max-width:32ch}
.bar{display:flex;gap:2px;justify-content:center;align-items:center;margin:0 0 36px;overflow-x:auto}
#tLang{font-size:19px}
.lpop{margin:0 auto 24px;max-width:24ch;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:0 8px 28px #0003,0 2px 6px #0002;max-height:52vh;overflow:auto;overscroll-behavior:contain}
.lpop[hidden]{display:none}
.lopt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:var(--fg);font:15px system-ui,sans-serif;padding:9px 14px;cursor:pointer;white-space:nowrap}
.lopt + .lopt{border-top:1px solid var(--bd)}
.lopt:hover{background:var(--bg)}
.lopt.on{background:var(--fg);color:var(--bg)}
.bar button{width:38px;height:38px;border:0;background:none;color:var(--mut);border-radius:10px;display:grid;place-items:center;cursor:pointer;padding:0}
.bar button svg{display:block}
.bar button:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 7%,transparent)}
.bar button.on{color:var(--bg);background:var(--fg)}
.bar button:disabled{opacity:.25;cursor:default}
.bar button:disabled:hover{color:var(--mut);background:none}
#tEye .eyeoff{display:none}
#tEye.off .eye{display:none}
#tEye.off .eyeoff{display:block}
.sep{width:1px;height:22px;background:var(--bd);margin:0 8px}

.ph{font:clamp(24px,5.5vw,30px)/2 Georgia,'Times New Roman',serif;text-align:center;white-space:pre-wrap;margin:0 auto;max-width:26ch}
/* first load: just the broken proverb and the key buttons — the editor
   toolbar (with back) waits behind first engagement; share is always there */
body:not(.unlocked) .bar{display:none}
.w{display:inline-block;text-align:center;position:relative}
.wd{--ink:hsl(var(--h) var(--slot-s) var(--slot-l));border:0;background:none;font:inherit;color:inherit;padding:0 1px;cursor:pointer;border-bottom:2px dotted color-mix(in srgb,var(--ink) var(--edge),transparent)}
.wd:hover{border-bottom-color:var(--ink)}
.wd.on{background:color-mix(in srgb,var(--ink) var(--tint),transparent);border-bottom-color:var(--ink)}
.wd.ln{border-bottom-style:double;border-bottom-width:3px}
.tag{--ink:hsl(var(--h) var(--slot-s) var(--slot-l));position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;display:block;font:10.5px/1.3 system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);background:transparent;border:0;border-radius:6px;padding:2px 6px;cursor:pointer;opacity:.9}
.tag:hover{opacity:1;background:color-mix(in srgb,var(--ink) var(--tint),transparent)}

/* the key row below the text: ← back and ⟳ remix — tap or use the keys */
.keys{display:flex;gap:8px;justify-content:center;margin:22px auto 0}
.key{display:flex;align-items:center;gap:7px;padding:8px 16px;font:12px/1 system-ui,sans-serif;color:var(--mut);background:var(--card);border:1px solid var(--bd);border-bottom:3px solid var(--bd);border-radius:9px;cursor:pointer;letter-spacing:.1em;text-transform:uppercase}
.key.cta{color:var(--bg);background:var(--fg);border-color:var(--fg);padding:10px 22px;font-weight:600}
.key.cta:not(:disabled):hover{color:var(--bg);background:color-mix(in srgb,var(--fg) 88%,var(--bg))}
.key.cta:not(:disabled):active{transform:translateY(1px)}
.key svg{display:block}
.key:not(:disabled):hover{color:var(--fg)}
.key:not(:disabled):active{transform:translateY(1px)}
.key.back{padding:8px 13px}

/* desktop: the saying always sits on one line — the type scales down to fit
   (see fitPh in ui.js); mobile keeps its comfortable wrap */
@media (min-width:720px){
  .ph{white-space:nowrap;max-width:none;width:max-content}   /* one line, box grows with the text */
}
.key.back:disabled{opacity:.35;cursor:default}

/* word popover: label, hint, scored options, grammar proof */
.wpop{margin:18px auto 0;max-width:36ch;text-align:left}
.wl{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:11px system-ui,sans-serif;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;padding:10px 14px 0}
.wh{font:12px/1.4 system-ui,sans-serif;color:var(--mut);padding:4px 14px 8px}
.lk{display:inline-flex;align-items:center;gap:6px;margin:2px 14px 8px;padding:5px 12px;font:11px system-ui,sans-serif;color:var(--mut);background:none;border:1px solid var(--bd);border-radius:14px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase}
.lk:hover{color:var(--fg);border-color:var(--fg)}
.wpop .opt .o{flex:1}
.wpop .opt.on .o{color:var(--mut)}
.m{display:inline-flex;align-items:center;gap:3px;font:9px/1 system-ui,sans-serif;color:var(--mut);flex:none}
.m b{font-weight:600}
.m i{width:22px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--fg) 14%,transparent);position:relative;overflow:hidden}
.m i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--v));background:var(--fg);border-radius:2px}
code{--ink:hsl(var(--h) var(--slot-s) var(--slot-l));font:12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--card);border:1px solid var(--bd);border-left:3px solid var(--bd);border-left-color:color-mix(in srgb,var(--ink) 60%,var(--bd));padding:5px 9px;border-radius:7px;display:block;margin:8px 14px 12px;overflow-x:auto;white-space:nowrap;color:var(--fg)}


/* feedback + focus + reduced motion */
@keyframes pop{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes hot{from{background:color-mix(in srgb,var(--ink) 20%,transparent);border-color:var(--ink)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pop{animation:pop .38s cubic-bezier(.2,.8,.3,1)}
code.pop{animation:hot 1.1s ease-out}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.wd:focus-visible{outline-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.pop,#stage,#search,#add{animation:none}}