/* theme.css — canonical COBOL / polyhymnia design tokens.
   Single source of truth for index / enroll / classroom.
   Change a color, font, or metric HERE and every page updates. */
:root{
  /* surface + ink */
  --paper:#F6F3ED; --ink:#111111; --white:#fff;
  --ink-72:rgba(17,17,17,.72); --ink-52:rgba(17,17,17,.52); --placeholder:#6b675e;
  /* accent */
  --cobalt:#072AC8; --cobalt-tint:rgba(7,42,200,.06); --cobalt-line:rgba(7,42,200,.28);
  /* lines */
  --line:#111111; --line-soft:rgba(17,17,17,.16);
  /* type */
  --font-sans:'Geist','Anuphan',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono','Anuphan',ui-monospace,'SFMono-Regular',Menlo,monospace;
  /* metrics */
  --maxw:1180px; --pad-x:clamp(1.25rem,5vw,4.5rem); --radius:3px; --topbar:56px;
  /* motion (both aliases are the same curve) + layering */
  --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --z-sticky:100; --z-overlay:1000;
}

/* ===== Main navigator (shared topbar: /, /enroll, /classroom, /profile) ===== */
.mainnav{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line-soft)}
.mainnav .mn-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);height:var(--topbar);display:flex;align-items:center;gap:1rem}
.mn-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.mn-brand .mn-dot{width:11px;height:11px;background:var(--cobalt);flex:none}
.mn-brand b{font-weight:700}.mn-brand .mn-sep{color:var(--ink-52)}
.mn-links{display:flex;align-items:center;gap:.2rem;margin-left:1.4rem}
.mn-link{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-72);text-decoration:none;padding:.5rem .7rem;border-bottom:2px solid transparent;transition:color .15s}
.mn-link[hidden]{display:none}
.mn-link:hover{color:var(--ink)}
.mn-link.active{color:var(--cobalt);border-bottom-color:var(--cobalt)}
/* nav submenu (ลงทะเบียน → รายชื่อรุ่น) — opens on hover and on keyboard focus */
.mn-item{position:relative;display:inline-flex}
.mn-item[hidden]{display:none}
.mn-haskids{display:inline-flex;align-items:center;gap:.28rem}
.mn-scaret{transition:transform .15s var(--ease)}
.mn-item:hover .mn-scaret,.mn-item:focus-within .mn-scaret{transform:rotate(180deg)}
.mn-sub{position:absolute;top:100%;left:0;min-width:max(100%,10.5rem);display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:.25rem;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s var(--ease),transform .14s var(--ease),visibility .14s}
.mn-item:hover .mn-sub,.mn-item:focus-within .mn-sub{opacity:1;visibility:visible;transform:none}
.mn-sub .mn-link{border-bottom:0;white-space:nowrap;padding:.5rem .6rem}
.mn-sub .mn-link:hover{background:var(--cobalt-tint);color:var(--cobalt)}
.mn-auth{margin-left:auto;display:flex;align-items:center;gap:.75rem;min-height:1px}
.mn-user{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:var(--ink-72);max-width:22vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-out,.mn-signin{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;padding:.45rem .8rem;border:1px solid var(--line);background:transparent;color:var(--ink);white-space:nowrap;transition:background .15s,color .15s}
.mn-out:hover{background:var(--ink);color:var(--paper)}
.mn-signin{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.mn-signin:hover{background:var(--ink);border-color:var(--ink)}
.mn-adminbtn{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:.45rem .8rem;border:1px solid var(--cobalt);background:transparent;color:var(--cobalt);white-space:nowrap;transition:background .15s,color .15s}
.mn-adminbtn:hover{background:var(--cobalt);color:#fff}
/* account menu — name button + โปรไฟล์/ออกจากระบบ dropdown */
.mn-account{position:relative;display:flex;align-items:center}
.mn-userbtn{display:inline-flex;align-items:center;gap:.45rem;background:transparent;border:1px solid var(--line);cursor:pointer;padding:.4rem .7rem;color:var(--ink);transition:background .15s,color .15s}
.mn-userbtn:hover,.mn-account.open .mn-userbtn{background:var(--ink);color:var(--paper)}
.mn-userbtn .mn-user{color:inherit;max-width:16vw}
.ic{display:block;flex:none}
/* natural-voice player (shared by articles + classroom lessons; markup in player.js) */
.ic-pause{display:none}
.np{display:flex;align-items:center;gap:.5rem;min-width:0;max-width:480px;min-height:40px;box-sizing:border-box;padding:.25rem .5rem .25rem .25rem;background:var(--paper);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.np-play{flex:none;width:30px;height:30px;display:grid;place-items:center;background:var(--ink);border:0;cursor:pointer;color:#fff;transition:transform .12s var(--ease)}
.np-play:hover{transform:translateY(-1px)}
.np-play:active{transform:translateY(1px)}
.np-play:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.np-play .ic{width:16px;height:16px}
.np.on .ic-play{display:none}
.np.on .ic-pause{display:block}
.np-name{flex:none;font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-72);white-space:nowrap}
.np-lock{color:var(--cobalt)}
.np-bar{position:relative;flex:1;min-width:56px;height:7px;background:var(--cobalt-tint);border:1.5px solid var(--ink);cursor:pointer;touch-action:none}
.np-prog{position:absolute;inset:0 auto 0 0;width:0;background:var(--cobalt)}
.np-head{position:absolute;top:50%;left:0;width:13px;height:13px;background:var(--cobalt);border:2px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.np-bar:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.np-t{flex:none;font-family:var(--font-mono);font-size:.62rem;color:var(--ink-72);white-space:nowrap}
.np.loading .np-play{opacity:.6;animation:nppulse 1s var(--ease) infinite}
@keyframes nppulse{50%{opacity:.9}}
.np.locked .np-prog,.np.locked .np-head{display:none}
.np.err .np-t::after{content:" · เตรียมเสียง"}
@media (prefers-reduced-motion:reduce){.np.loading .np-play{animation:none}}
@media (max-width:560px){.np-name{display:none}}
.mn-caret{width:15px;height:15px;transition:transform .18s}
.mn-account.open .mn-caret{transform:rotate(180deg)}
.mn-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:200px;background:var(--paper);border:1px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:none;flex-direction:column;z-index:calc(var(--z-sticky) + 8)}
.mn-account.open .mn-menu{display:flex}
.mn-mi{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;text-align:left;color:var(--ink);text-decoration:none;padding:.72rem .95rem;background:transparent;border:0;border-bottom:1px solid var(--line-soft);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.mn-mi:last-child{border-bottom:0}
.mn-mi:hover{background:var(--cobalt);color:#fff}
.mn-ham,.mn-backdrop,.mn-drawer{display:none}
@media (max-width:760px){
  .mainnav .mn-links,.mainnav .mn-auth{display:none}
  .mn-brand .mn-tag,.mn-brand .mn-sep{display:none}
  .mn-ham{order:-1;display:inline-flex;flex:none;width:38px;height:38px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);cursor:pointer;padding:0;color:var(--ink)}
  .mn-ham .ic{width:22px;height:22px}
  .mn-backdrop{display:block;position:fixed;inset:0;background:rgba(17,17,17,.4);opacity:0;visibility:hidden;transition:opacity .25s;z-index:calc(var(--z-sticky) + 5)}
  .mn-backdrop.show{opacity:1;visibility:visible}
  .mn-drawer{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:min(82vw,300px);background:var(--paper);border-right:1px solid var(--line);padding:calc(var(--topbar) + 1rem) 1.1rem 1.5rem;transform:translateX(-101%);transition:transform .3s var(--ease);z-index:calc(var(--z-sticky) + 6);overflow-y:auto}
  .mn-drawer.open{transform:none}
  .mn-dlinks{display:flex;flex-direction:column}
  .mn-drawer .mn-link{font-size:.8rem;padding:.85rem .3rem;border-bottom:1px solid var(--line-soft)}
  .mn-drawer .mn-link.active{border-bottom-color:var(--line-soft)}
  .mn-drawer .mn-sublink{padding-left:1.4rem;font-size:.74rem;color:var(--ink-52)}
  .mn-drawer .mn-sublink::before{content:"\21B3";margin-right:.45rem;opacity:.6}
  .mn-dauth{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}
  .mn-dname{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mn-dauth .mn-link{padding:.5rem .3rem;border-bottom:0}
  .mn-dauth .mn-out,.mn-dauth .mn-signin{text-align:center}
  html.mn-locked{overflow:hidden}
}
@media (min-width:761px){.mn-drawer,.mn-backdrop,.mn-ham{display:none!important}}