/* wikt/ — shared design system for the Wiktionary section. Matches the nisanyan
   hub/experiments aesthetic (Source Serif + Inter, OKLCH, light/dark). Accent = amber. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:oklch(0.965 0.012 83); --surface:oklch(0.992 0.008 83); --raised:oklch(0.95 0.014 84);
  --ink:oklch(0.255 0.018 55); --ink-soft:oklch(0.43 0.02 55); --muted:oklch(0.58 0.018 60);
  --line:oklch(0.86 0.012 75);
  --accent:oklch(0.66 0.14 64); --accent2:oklch(0.55 0.12 250); --warm:oklch(0.62 0.17 35); --cool:oklch(0.6 0.1 230);
  --serif:"Source Serif 4",Georgia,serif; --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:oklch(0.2 0.012 62); --surface:oklch(0.245 0.013 62); --raised:oklch(0.285 0.014 64);
  --ink:oklch(0.93 0.014 84); --ink-soft:oklch(0.78 0.016 80); --muted:oklch(0.66 0.018 75);
  --line:oklch(0.36 0.014 64);
  --accent:oklch(0.78 0.14 70); --accent2:oklch(0.7 0.12 250); --warm:oklch(0.72 0.16 40); --cool:oklch(0.72 0.1 230);
}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.topline{height:3px;background:var(--accent);position:fixed;top:0;left:0;right:0;z-index:6}
.serif{font-family:var(--serif)}
.eyebrow{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.muted{color:var(--muted)} .soft{color:var(--ink-soft)}

/* top bar (plate pages) */
.bar{position:fixed;top:3px;left:0;right:0;z-index:5;display:flex;align-items:center;gap:.75rem;padding:.8rem 1.1rem;pointer-events:none}
.bar>*{pointer-events:auto}
.crumbs{font-size:.85rem;color:var(--muted);white-space:nowrap}
.crumbs a:hover{color:var(--accent)} .crumbs b{color:var(--ink);font-family:var(--serif);font-weight:600}
.pill{padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in oklch,var(--surface) 82%,transparent);backdrop-filter:blur(8px);color:var(--ink);font-family:var(--sans);font-size:.9rem;outline:none}
.pill:focus{border-color:color-mix(in oklch,var(--accent) 55%,var(--line))}

/* cards / panels */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.panel{position:fixed;z-index:5;background:color-mix(in oklch,var(--surface) 94%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -34px #000}
.btn{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:500;font-family:var(--sans)}
.btn:hover{border-color:color-mix(in oklch,var(--accent) 50%,var(--line))}
.btn.on{background:var(--accent);color:#1a1408;border-color:var(--accent)}

/* loading */
.loading{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:var(--bg);transition:opacity .5s}
.loading.gone{opacity:0;pointer-events:none}
.spin{margin:1.1rem auto 0;width:1.5rem;height:1.5rem;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* generic bars (focus panels) */
.flowbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;font-size:.84rem;padding:.12rem 0;cursor:pointer}
.flowbar .nm{font-family:var(--serif)} .flowbar .nm:hover{color:var(--accent)}
.flowbar .track{height:.5rem;border-radius:999px;background:color-mix(in oklch,var(--accent) 70%,transparent)}
.flowbar .v{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.78rem}

/* clickable word → word page (used across plates) */
.wl{cursor:pointer;text-decoration:none;color:inherit;border-bottom:1px dotted color-mix(in oklch,var(--accent) 45%,transparent)}
.wl:hover{color:var(--accent);border-bottom-color:var(--accent)}

.wikt-hovercard{position:absolute;z-index:9999;display:none;max-width:20rem;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 12px 34px -12px rgba(0,0,0,.4),0 2px 8px -4px rgba(0,0,0,.3);padding:.6rem .75rem;opacity:0;transform:translateY(3px);transition:opacity .13s,transform .13s;pointer-events:auto}
.wikt-hovercard.show{opacity:1;transform:translateY(0)}
.wikt-hovercard .hc-w{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.1;letter-spacing:-.01em}
.wikt-hovercard .hc-m{font-size:.74rem;color:var(--ink-soft);margin-top:.15rem} .wikt-hovercard .hc-m i{color:var(--accent);font-family:var(--serif)}
.wikt-hovercard .hc-ipa{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--muted)}
.wikt-hovercard .hc-g{font-size:.84rem;color:var(--ink-soft);line-height:1.4;margin-top:.32rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wikt-hovercard .hc-go{font-size:.68rem;color:var(--accent);margin-top:.4rem;font-weight:600}

/* ---------- global shell: top bar ---------- */
:root{--wtop-h:52px}
#wtop{position:fixed;top:0;left:0;right:0;height:var(--wtop-h);z-index:40;display:flex;align-items:center;gap:.75rem;
  padding:0 clamp(.8rem,2vw,1.3rem);background:color-mix(in oklch,var(--bg) 88%,transparent);backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 color-mix(in oklch,var(--accent) 22%,transparent)}
#wtop .wt-brand{font-family:var(--serif);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink);padding-right:.2rem}
#wtop .wt-brand:hover{color:var(--accent)}
#wtop .wt-search{position:relative;flex:1;max-width:32rem;margin:0 auto}
#wtop .wt-search input{width:100%;padding:.42rem .9rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in oklch,var(--surface) 70%,transparent);color:var(--ink);font-family:var(--sans);font-size:.9rem;outline:none}
#wtop .wt-search input:focus{border-color:color-mix(in oklch,var(--accent) 55%,var(--line));background:var(--surface)}
#wtop .wt-dice{cursor:pointer;border:1px solid var(--line);background:none;border-radius:999px;padding:.34rem .55rem;font-size:.95rem;line-height:1}
#wtop .wt-dice:hover{border-color:color-mix(in oklch,var(--accent) 50%,var(--line))}
#wtop .wt-dice.spin{animation:spin .5s linear infinite}
#wtop .wt-atlas{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;border:1px solid var(--line);background:none;color:var(--ink-soft);border-radius:999px;padding:.4rem .85rem;font-family:var(--sans);font-size:.85rem;font-weight:500}
#wtop .wt-atlas:hover{border-color:color-mix(in oklch,var(--accent) 50%,var(--line));color:var(--ink)}
#wtop .wt-atlas .wt-ch{font-size:.7rem;transition:transform .18s} #wtop .wt-atlas.open .wt-ch{transform:rotate(180deg)}
#wtres{position:absolute;top:2.7rem;left:0;right:0;max-height:min(70vh,26rem);overflow:auto;padding:.25rem;display:none}
#wtres.open{display:block}
#wtres .wt-r{display:flex;width:100%;gap:.6rem;align-items:baseline;padding:.45rem .7rem;background:none;border:none;border-radius:9px;color:var(--ink);text-align:left;cursor:pointer}
#wtres .wt-r:hover,#wtres .wt-r.on{background:color-mix(in oklch,var(--accent) 16%,transparent)}
#wtres .wt-rw{font-family:var(--serif);font-size:1rem} #wtres .wt-rl{font-size:.62rem;color:var(--accent);text-transform:uppercase;letter-spacing:.03em}
#wtres .wt-rg{margin-left:auto;font-size:.74rem;color:var(--muted);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wtres .wt-empty{padding:.6rem .7rem;color:var(--muted);font-size:.84rem;font-style:italic}
#wtmenu{position:absolute;top:calc(var(--wtop-h) - 4px);right:clamp(.8rem,2vw,1.3rem);width:min(94vw,38rem);max-height:min(78vh,34rem);overflow:auto;padding:1rem 1.1rem;display:none;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem 1.4rem}
#wtmenu.open{display:grid}
#wtmenu .wt-gl{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:.45rem}
#wtmenu .wt-i{display:block;padding:.32rem .4rem;border-radius:8px;margin:0 -.4rem}
#wtmenu .wt-i:hover{background:color-mix(in oklch,var(--accent) 12%,transparent)}
#wtmenu .wt-i.on{background:color-mix(in oklch,var(--accent) 16%,transparent)}
#wtmenu .wt-it{font-family:var(--serif);font-weight:600;font-size:.98rem;display:block}
#wtmenu .wt-id{font-size:.76rem;color:var(--muted);line-height:1.35;display:block;margin-top:.05rem}
/* offsets so content clears the fixed bar */
.topline{display:none}
body.wt-scroll{padding-top:var(--wtop-h)}
body.wt-scroll .controls{top:var(--wtop-h)}
body.wt-scroll thead th{top:var(--wtop-h)}
body.wt-map .bar{top:var(--wtop-h)}
body.wt-map .loading{top:0}
@media (max-width:560px){ #wtop .wt-atlas{padding:.4rem .6rem} #wtop .wt-brand{font-size:1.1rem} }

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}