/* Members' side — shared by login.html and library.html.
   Every rule here is checked against docs/ui-rules.md: 17px body floor, 60px
   targets (68px for a primary), labels above fields and always visible, errors
   in words beside the field, nothing hover-dependent, no icon without a label,
   works from 320px to a TV and at 200% zoom. */

:root{
  --ink:#141312;
  --bone:#F7F5F0;
  --bone-2:#EFEBE2;
  --ochre-ink:#6E5F38;
  --brass:#C8B888;
  --stone:#4B4A46;
  --aizome:#25455C;
  --rule:#1413121F;
  --bone-dim:#C9C6BF;
  --good:#2F5133;
  --bad:#8A2B12;

  --sans:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --util:"Libre Franklin",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* No grey/blue box flashed round whatever a finger taps; the focus ring for keys stays. */
html{-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video,iframe{display:block;max-width:100%}
a{color:var(--aizome)}
:focus-visible{outline:3px solid var(--aizome);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0}
/* A heading a screen reader announces and the eye never sees: the path's title is the map itself. */
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--ink);color:var(--bone);
  padding:14px 18px;border-radius:4px;font-family:var(--util);font-weight:700}
[hidden]{display:none !important}

/* ------------------------------------------------------------- masthead */
.mast{border-bottom:1px solid var(--rule);background:var(--bone)}
.mast-in{max-width:62rem;margin:0 auto;padding:14px 22px;display:flex;flex-wrap:wrap;
  gap:12px;align-items:center;justify-content:space-between}
.mast-home{display:inline-block;padding:14px 22px;font-family:var(--util);font-weight:700;
  font-size:1rem;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.mast-who{font-family:var(--util);font-size:.9375rem;color:var(--stone)}

/* --------------------------------------------------------------- layout */
.sheet{max-width:34rem;margin:0 auto;padding:34px 22px 70px}
.wide{max-width:52rem;margin:0 auto;padding:30px 22px 80px}
.kicker{font-family:var(--util);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--ochre-ink);margin:0 0 10px}
h1{font-weight:900;font-size:clamp(1.5rem,5.4vw,2.125rem);line-height:1.18;
  letter-spacing:-.022em;margin:0 0 12px;text-wrap:balance}
h2{font-weight:900;font-size:clamp(1.25rem,4vw,1.5rem);line-height:1.22;
  letter-spacing:-.018em;margin:34px 0 10px}
.lede{font-family:var(--util);font-size:1.0625rem;line-height:1.6;color:var(--stone);
  margin:0 0 22px;max-width:42rem}
.lede b{color:var(--ink)}
.note{font-family:var(--util);font-size:1rem;line-height:1.55;color:var(--stone);
  margin:12px 0 0;max-width:42rem}
.note b{color:var(--ink)}

/* ---------------------------------------------------------------- forms */
.field{margin:0 0 16px}
.field label{display:block;font-family:var(--util);font-size:1rem;font-weight:600;margin:0 0 7px}
.field input{
  width:100%;min-height:62px;padding:15px 16px;
  font:1.0625rem var(--util);color:var(--ink);
  background:#fff;border:2px solid #14131259;border-radius:4px;
}
.field input:focus{border-color:var(--aizome)}
.field input.code{font:700 1.75rem/1 var(--util);letter-spacing:.3em;text-align:center;
  padding:18px 10px 18px 20px}
.err{font-family:var(--util);font-size:1rem;font-weight:600;color:var(--bad);
  margin:8px 0 0;padding-left:0}
.err.good{color:var(--good)}
.hp{position:absolute;left:-9999px}

/* Hierarchy is size, never a second dark — ui-rules.md. */
.btn{
  display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;
  width:100%;min-height:60px;padding:14px 20px;margin:0 0 12px;
  border:0;border-radius:6px;cursor:pointer;text-decoration:none;
  font:700 1.0625rem/1.25 var(--sans);
}
.btn-1{background:var(--aizome);color:var(--bone);min-height:68px;font-size:1.1875rem}
.btn-2{background:var(--bone-2);color:var(--ink);border:2px solid var(--stone)}
.btn[disabled]{opacity:.6;cursor:default}
.btn + .btn{margin-top:12px}
.quiet{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  min-height:48px;padding:12px 0;
  font:600 1rem var(--util);color:var(--aizome);text-decoration:underline;
}
.or{display:flex;align-items:center;gap:12px;margin:26px 0 20px;
  font-family:var(--util);font-size:.9375rem;color:var(--stone)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}
.help{font-family:var(--util);font-size:1rem;color:var(--stone);
  border-top:1px solid var(--rule);margin:36px 0 0;padding:20px 0 0;overflow-wrap:anywhere}

/* ------------------------------------------------------------ the offer */
.offer{border:2px solid var(--ink);border-radius:6px;padding:22px;margin:30px 0 0;background:#fff}
.offer h2{margin:0 0 8px}
.price{font-family:var(--util);font-size:2rem;font-weight:700;margin:0 0 2px;line-height:1.1}
.price i{font-style:normal;font-size:1rem;font-weight:400;color:var(--stone)}

.panel{background:var(--bone-2);border-radius:6px;padding:20px;margin:30px 0 0}
.panel h2{margin:0 0 8px;font-size:1.1875rem}
.flash{background:#DDE6DC;border-left:4px solid var(--good);padding:14px 16px;
  font-family:var(--util);font-size:1rem;margin:0 0 22px}

.foot-min{border-top:1px solid var(--rule);font-family:var(--util);font-size:1rem;
  text-align:center;padding:22px;color:var(--stone)}
.foot-min a{display:inline-block;padding:12px 14px}

/* The library's screens: a lesson rises gently into place, the path fades back in.
   Each plays every time the screen is shown (display:none resets it). */
#watch,#signed{animation:scr-rise .32s ease-out}
#path{animation:scr-fade .25s ease-out}
@keyframes scr-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes scr-fade{from{opacity:0}}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ---- the library: the member's screens themselves are in member-view.css, shared with
   the editor's "View as a student". Only how they sit on this page is here. ---- */
/* The painted journey runs the full width of the window (100vw, which on a desktop counts
   the scrollbar too). Both, as in the editor: on body alone the clip is handed up to the
   window as "hidden", which a browser's phone mode still lets you drag sideways. */
html,body{overflow-x:clip}
#appbar{margin:-30px -22px 22px;padding-inline:22px}
/* Messages float at the foot of the screen; the page never jumps to show one (Roy, 2026-09-23). */
#in .flash{position:fixed;z-index:30;left:12px;right:12px;bottom:max(16px,env(safe-area-inset-bottom));
  max-width:520px;margin:0 auto;background:var(--ink);color:var(--bone);border:0;border-radius:10px;
  box-shadow:0 6px 18px #0004;line-height:1.45;cursor:pointer}
#in .flash.bad{background:var(--bad)}
/* The answer to a tapped stone, on the stone. */
.mv .say{position:absolute;z-index:4;background:#fff;border-radius:10px;box-shadow:0 6px 18px #0003;
  padding:14px 16px;font:500 1rem/1.45 var(--util);color:var(--ink)}
.mv .say::before{content:"";position:absolute;left:calc(var(--ax) - 10px);top:-10px;
  border:10px solid transparent;border-top:0;border-bottom-color:#fff}
.mv .say b{display:block;font-size:1.0625rem;margin-bottom:2px}
.mv .say .mv-btn{margin-top:12px;width:100%}

/* --------------------------------------------- the library's menu (Roy, 2026-09-22) */
/* Signed in, lesson 1 is the bottom of the page: nothing under the path. */
.wide:has(> #in:not([hidden])){padding-bottom:0}
/* Icon over the word, so the belt and "0 of 5 studied" keep their room on a phone. */
.menu-btn{flex:0 0 auto;min-height:48px;min-width:56px;padding:5px 8px;border:2px solid var(--bone-dim);border-radius:6px;
  background:#fff;font:700 .8125rem var(--util);color:var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.menu-btn span{display:flex;flex-direction:column;gap:3px}
.menu-btn b{display:block;width:16px;height:2px;background:currentColor}
.menu-panel{margin:0 auto;top:0;width:100%;max-width:34rem;max-height:92vh;max-height:92dvh;overflow-y:auto;border:0;
  border-radius:0 0 12px 12px;padding:18px 22px 22px;background:var(--bone);color:var(--ink);
  box-shadow:0 10px 30px #0004}
.menu-panel::backdrop{background:#14131266}
.menu-panel h2{margin:0 0 8px;font-size:1.1875rem;padding-right:90px}
.menu-panel form{position:absolute;right:10px;top:8px}
.menu-close{min-height:48px;padding:0 10px;border:0;background:none;cursor:pointer;
  font:700 1rem var(--util);color:var(--aizome)}
.menu-panel .quiet{border-top:1px solid var(--rule);text-decoration:none}
.menu-panel .help{margin:12px 0 0;padding:16px 0 0}
.menu-legal{font-family:var(--util);margin:8px 0 0}
.menu-legal a{display:inline-block;padding:12px 6px}

/* The path floats: the painting starts at the very top of the window and the bar's two
   pills sit over it, so nothing is pinned above the map (Roy, 2026-09-23). */
.wide:has(> #in.float){padding-top:0}
#in.float #appbar{position:fixed;left:0;right:0;top:0;margin:0;padding-inline:10px}