/* =====================================================================
   base.css: the "Igo: The Way of Go" design system, shared by EVERY
   page (index.html, login.html, terms.html, privacy.html, app.html, and
   the Journal pages built by the server's journal-pages.js).

   What lives here:
     1. Design tokens:  every color, font and spacing value, as named
                          CSS variables. Most colors are painted over by
                          style-montsuki.css (the look), so change them there.
     2. Page basics:     page background, text, links, focus.
     3. Shared pieces:   the brand wordmark, navigation bar, buttons,
                          panels, crest, rules, footer.

   Load order on every page: base.css → site.css / app.css (+ eval.css) /
   journal.css → theme-dark.css → style-montsuki.css → layout-side.css.
   Page-specific layout lives in site.css (marketing, sign-in and legal
   pages), journal.css (the Journal), app.css and eval.css (the app). The
   rules of the design itself are written up in
   NextSteps/Layout Notes.txt. Read that before adding anything new, and
   when in doubt, remove rather than add.
   ===================================================================== */

/* ---------- 1. Design tokens ---------------------------------------- */
:root{
  /* Palette, "old Japan": paper steeped in tea, sumi ink, and natural
     dyes a little faded by time (see marketting/HayaGo-colour-palette.html).
     The token names are older than the colors: --cream is now tea-stained
     washi, --indigo-deep a faded ai, --forest moss, --vermilion cinnabar. */
  --indigo-deep:#34445a;   /* faded ai (indigo): dark panels */
  --indigo-muted:#4a4038;  /* (name kept) a soft brown ink for lead-in paragraphs */
  --charcoal:#2b2622;      /* sumi ink: body text and headings */
  --cream:#e2d3b5;         /* tea washi: main page background */
  --ivory:#ebdfc6;         /* kinari (unbleached): panels holding text */
  --vermilion:#ad4630;     /* cinnabar, a RARE accent: seals, hover underlines */
  --gold-muted:#9c7d47;    /* old gold: thin rules, crests, focus outlines */
  --forest:#566042;        /* moss: secondary dark panels and bands */
  --kaki:#7a5236;          /* persimmon brown: a third dark panel, small labels */
  --night-ai:#26313f;      /* the deepest indigo: the footer */
  --stone:#7d7468;         /* quiet details */
  --ink-black:#221e1b;     /* deepest sumi: the written-out name */

  /* Materials, only for frames and the goban itself. The board/stone
     colors drawn by JavaScript live in js/utils.js (BOARD_COLORS);
     keep --wood matching BOARD_COLORS.wood there. */
  --wood:#c7a06b;
  --wood-dark:#7c5a34;
  --wood-light:#dcc096;
  /* (The tatami under the board is --floor / --heri in style-montsuki.css.) */
  /* Hairline gold for thin borders, rules and soft washes, as an "R,G,B"
     triplet so each use picks its own strength:
     rgba(var(--line-gold-rgb), .55). The same in day and night. */
  --line-gold-rgb:184,160,122;
  /* Tints of the palette colors for large, calm areas (a colored band,
     a hover wash): color arrives through surfaces, not bright accents. */
  --dawn:#d9c4a0;                    /* warm sky near the horizon */
  --vermilion-wash:rgba(173,70,48,.10);
  --forest-light:#4c6136;

  /* Text colors for each kind of surface, so a component only has to say
     "I'm on a dark panel" and pick the matching pair. */
  --text-on-light:var(--charcoal);
  --muted-on-light:#5d554b;       /* usuzumi (thinned ink): 4.5:1+ on tea washi */
  --label-on-light:var(--kaki);   /* small labels above headings: persimmon, 4.5:1+ on tea washi */
  --text-on-dark:#efe5cf;
  --muted-on-dark:#cfc4ad;
  --on-ink:#efe4cc;               /* text on a sumi-filled button */

  /* Page-surface roles: what the light/dark theme switch (section 4
     below) re-colors. Components draw headings, links and outlines in
     --ink rather than --indigo-deep, so the dark theme can turn them
     light while the indigo panels themselves stay indigo. */
  --page:var(--cream);               /* the page background */
  --grain-page:var(--grain-paper);   /* the texture on it */
  --ink:var(--charcoal);             /* headings, buttons, links on the page */
  --wood-ink:var(--wood-dark);       /* crests and small wood-colored marks */
  --bar:#d6c29d;                     /* toasted paper: the top bar of every page */
  --brand-ink:var(--ink-black);      /* the written-out "HayaGo" in the top bar */
  --field:#f3ead6;                   /* inside of text boxes: pale paper, not white */
  --raised-hover:#efe5cf;            /* a light panel under the mouse */
  --error:#8f3a29;                   /* error messages */
  color-scheme:light;

  /* Typefaces. Each has a fallback chain in case the web font is slow. */
  /* The "Woodblock" pairing: an old-print serif for headings and accents,
     a quiet gothic for text. Zen Antique has a single weight, so bold is
     never faked (font-synthesis on body). */
  --font-display:"Zen Antique","Hiragino Mincho ProN",Georgia,serif;      /* headings */
  --font-serif-en:"Zen Antique",Georgia,serif;                            /* English subheads */
  --font-body:"Zen Kaku Gothic Antique","Hiragino Sans","Segoe UI",Arial,sans-serif; /* running text */

  /* Spacing. Sections are far apart on purpose: negative space is part
     of the design, not wasted room. */
  --space-section:clamp(80px, 10vw, 128px);
  --gutter:clamp(20px, 5vw, 64px);    /* side margin of the page */
  --content-max:1180px;               /* never edge-to-edge */

  --rule:1px;
  --radius:2px;                       /* barely-there corners */
  --ease-calm:cubic-bezier(.25,.1,.25,1);

  /* Paper grain on light / dark surfaces. The montsuki look is flat, so
     both are "none"; they're kept as hooks (a texture could be put back
     here as a background image). */
  --grain-paper:none;
  --grain-dark:none;
}

/* ---------- 2. Page basics ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background-color:var(--page);
  background-image:var(--grain-page);
  color:var(--text-on-light);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  /* The Japanese fonts space English letters widely; pull them in. */
  letter-spacing:-.03em;
  word-spacing:-.06em;
  font-synthesis:style;   /* never a fake bold; a slanted accent is fine */
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
  letter-spacing:-.02em;
  word-spacing:0;
  margin:0;
  text-wrap:balance;
}
p{margin:0;}
a{color:inherit;}

/* Keyboard focus: a thin gold outline, visible but still on-brand. */
:focus-visible{outline:1px solid var(--gold-muted);outline-offset:3px;}
.on-dark :focus-visible{outline-color:var(--gold-muted);}

/* Hidden visually but still read by screen readers. */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;
}

.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter);}

/* ---------- 3a. Surfaces -------------------------------------------- */
/* Put .surface-indigo / -forest / -cream on any block to give it that
   background plus the right text colors. Dark ones also get .on-dark
   behaviour (light text, light links). */
.surface-indigo,.surface-forest,.surface-kaki{color:var(--text-on-dark);background-image:var(--grain-dark);}
.surface-indigo{background-color:var(--indigo-deep);}
.surface-forest{background-color:var(--forest);}
.surface-kaki{background-color:var(--kaki);}
.surface-cream{background-color:var(--ivory);color:var(--text-on-light);}
.surface-indigo h1,.surface-indigo h2,.surface-indigo h3,
.surface-forest h1,.surface-forest h2,.surface-forest h3,
.surface-kaki h1,.surface-kaki h2,.surface-kaki h3{color:var(--text-on-dark);}

/* A full-width colored band behind a whole section (e.g. the pine-green
   band behind the homepage's philosophy section; its pinstripes are in
   style-montsuki.css). */
.band-forest{background-color:var(--forest);}

/* ---------- 3b. Type helpers ---------------------------------------- */
/* Small English label that sits above a heading (normal case, persimmon). */
.eyebrow{
  display:block;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--label-on-light);
}
.on-dark .eyebrow,.surface-indigo .eyebrow,.surface-forest .eyebrow,.surface-kaki .eyebrow{color:var(--muted-on-dark);}
/* Refined English subheading (italic serif, wide spacing). */
.subhead-en{
  display:block;
  font-family:var(--font-serif-en);
  font-style:italic;
  font-weight:500;
  font-size:1.2rem;
  line-height:1.4;
  letter-spacing:0;
  color:var(--muted-on-light);
}
.surface-indigo .subhead-en,.surface-forest .subhead-en,.surface-kaki .subhead-en{color:var(--muted-on-dark);}

/* Thin gold horizontal rule. Use sparingly, between major ideas. */
.rule-gold{border:0;height:var(--rule);background:var(--gold-muted);opacity:.7;margin:0;}
.rule-gold.short{width:56px;}

/* ---------- 3c. Brand wordmark -------------------------------------- */
/* The written-out name: the brush "H" image (img/logo-mark.png, the
   boardless logo) stands in for the letter H, followed by typed "ayaGo".
   Where the mark stands ALONE (favicon, footer crest), use
   img/logo-board.png instead, never this wordmark's image by itself. */
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);}
.brand-word{display:inline-flex;align-items:flex-end;}
.brand-mark{height:44px;width:auto;margin-right:-4px;}  /* the "H", deliberately taller than the typed letters, like a painted initial */
.brand-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:25px;
  line-height:1;
  letter-spacing:.04em;
  padding-bottom:3px;
}
/* On a dark background the black brush mark would disappear, so it's
   re-colored to a soft cream with a CSS filter. */
.on-dark .brand{color:var(--text-on-dark);}
.on-dark .brand-mark{filter:invert(1) sepia(.2) brightness(.96);}

/* ---------- 3d. The side column (a top bar on phones) --------------- */
/* ONE column for every page (homepage, sign-in, legal, Journal and the
   app), drawn by the server (Hayago-Analyzer/server/site-frame.js) as
   a <header> with the side-nav class: the logo, the links, then at the bottom the
   logo mark (signed out) or Upload game and your initial and name (signed
   in). Here it's laid out as a bar across the top, which is what phones
   keep; layout-side.css turns it into the column on wider screens. Its
   colors and the obi strip along its edge are in style-montsuki.css. */
.side-nav{
  position:relative;z-index:10;
  display:flex;align-items:center;gap:clamp(20px,4vw,56px);
  min-height:72px;padding:0 var(--gutter);
  background-color:var(--bar);background-image:var(--grain-paper);
}
.side-nav .brand{color:var(--brand-ink);}
.side-nav .brand-mark{height:40px;}
.side-nav .brand-name{font-size:22px;}
/* Along the bar's edge: a decorative strip. Its size and pattern (the
   kaku-obi belt) are in style-montsuki.css; layout-side.css turns it to
   run down the column. */
.side-nav::after{content:"";position:absolute;left:0;right:0;pointer-events:none;}
.nav-links{display:flex;align-items:center;gap:clamp(20px,3vw,44px);}
.nav-link{
  position:relative;
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:500;
  line-height:normal;
  letter-spacing:0;
  text-transform:none;
  text-decoration:none;
  white-space:nowrap;
  color:var(--ink);
  padding:6px 0;
}
/* Hover / current page: a thin vermilion line fades in underneath. */
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--vermilion);opacity:0;transition:opacity .4s var(--ease-calm);
}
.nav-link:hover::after,.nav-link.active::after,.nav-link[aria-current="page"]::after{opacity:1;}
.side-nav .nav-end{display:flex;align-items:center;gap:20px;margin-left:auto;}
.nav-crest{width:30px;height:30px;}

/* Your initial (a round ring) and name, opening the account menu. The ring
   darkens under the mouse, and is gold on a paid plan (it stays gold under
   the mouse, see the rule order below). */
.profile-btn{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;color:var(--ink);}
.profile-btn-name{font-size:13.5px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:980px){ .profile-btn-name{display:none;} }
.profile-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--stone);
  font-family:var(--font-display);font-size:16px;line-height:1;letter-spacing:0;}
.profile-btn:hover .profile-avatar,.profile-btn.active .profile-avatar{border-color:var(--ink);}
.profile-btn.plan-paid .profile-avatar{border-color:var(--gold-muted);}

/* The small menu that opens from your initial: Profile, Plans, Settings,
   Sign out. */
.profile-menu-wrap{position:relative;}
.profile-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:20;min-width:170px;
  display:flex;flex-direction:column;padding:6px 0;
  background:var(--ivory);border:var(--rule) solid rgba(var(--line-gold-rgb),.6);box-shadow:0 8px 24px rgba(26,39,68,.18);}
.profile-menu[hidden]{display:none;}
.profile-menu button,.profile-menu a{display:block;width:100%;padding:10px 18px;text-align:left;
  background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--ink);}
.profile-menu button:hover,.profile-menu a:hover,.profile-menu :focus-visible{background:rgba(var(--line-gold-rgb),.18);}

/* Phones: logo and the bottom items on the first row, the links on a
   second row underneath, so nothing has to squeeze or wrap. */
@media (max-width:760px){
  .side-nav{flex-wrap:wrap;gap:0 16px;padding:12px 16px 0;}
  .side-nav .nav-links{order:3;width:100%;gap:22px;padding:10px 0 8px;}
  .side-nav .nav-end{gap:12px;}
  .nav-crest{display:none;}
}

/* ---------- 3e. Buttons & links ------------------------------------- */
/* Buttons: the shape lives here; the colors (fill, words, outline, hover)
   come from style-montsuki.css section 7 by day and theme-dark.css
   section 5 at night. Hover by day: a cinnabar underline appears.
   .btn-quiet is the outlined secondary one; on dark panels (.on-dark,
   .surface-*) a button is drawn as a light outline. */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 28px;
  font-family:var(--font-body);font-size:14.5px;font-weight:500;
  letter-spacing:0;text-decoration:none;
  border:var(--rule) solid;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background-color .4s var(--ease-calm), color .4s var(--ease-calm), border-color .4s var(--ease-calm);
}
.btn::after{
  content:"";position:absolute;left:28px;right:28px;bottom:9px;height:1px;
  background:var(--vermilion);opacity:0;transition:opacity .4s var(--ease-calm);
}
.btn:hover::after{opacity:1;}
.btn:disabled{opacity:.4;cursor:default;}
.btn:disabled::after{display:none;}
.btn.small{min-height:36px;padding:0 18px;font-size:13.5px;}
.btn.small::after{left:18px;right:18px;bottom:6px;}

/* Secondary action: a quiet text link ending in an arrow. */
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-serif-en);font-size:1.08rem;font-weight:600;
  letter-spacing:.06em;text-decoration:none;white-space:nowrap;
  color:inherit;
  background:none;border:0;padding:4px 0;cursor:pointer;
  border-bottom:var(--rule) solid rgba(var(--line-gold-rgb),.6);
  transition:border-color .4s var(--ease-calm);
}
.link-arrow .arrow{transition:transform .5s var(--ease-calm);}
.link-arrow:hover{border-bottom-color:var(--vermilion);}
.link-arrow:hover .arrow{transform:translateX(4px);}

/* ---------- 3f. Crest (mon) ------------------------------------------ */
/* HayaGo's logo as a small mark on its own (<span class="crest-mon"></span>
   with its old "crest" class name): the board version (the logo
   standing without "ayaGo" is always that one), drawn as lines only.
   (img/logo-board-lines.png is its border, grid, star points and "H" with
   the wood left out.) It is painted in the surrounding text color (currentColor):
   gold on the page, white on the dark panels. */
.crest-mon{
  display:inline-block;width:40px;height:40px;color:var(--gold-muted);flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:url("/img/logo-board-lines.png") center/contain no-repeat;
          mask:url("/img/logo-board-lines.png") center/contain no-repeat;
}
.crest-mon.large{width:64px;height:64px;}

/* ---------- 3g. Frames ---------------------------------------------- */
/* The old frames (.frame-kumiko lattice, .frame-wood, the inset gold line
   of .frame-line) are gone: the montsuki look is flat, sharp edges. The
   classes stay in the pages as plain wrappers; only what still shapes the
   layout is kept. */
.frame-kumiko > .frame-inner{height:100%;}
.frame-line{position:relative;}

/* ---------- 3h. Footer ---------------------------------------------- */
/* The deepest indigo (its pinstripes and the obi along the top are in
   style-montsuki.css section 8). */
.site-footer{
  padding:64px 0 48px;
  background-color:var(--night-ai);
}
.footer-grid{
  display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;
}
.footer-crest{width:52px;height:52px;border-radius:6px;}   /* logo-board.png, the standalone mark */
.footer-statement{max-width:460px;color:var(--muted-on-dark);font-size:14px;}
.footer-statement .brand{margin-bottom:6px;}
.footer-links{display:flex;gap:28px;font-size:14px;letter-spacing:0;text-transform:none;}
.footer-links a{text-decoration:none;color:var(--muted-on-dark);}
.footer-links a:hover{color:var(--text-on-dark);text-decoration:underline;text-decoration-color:var(--vermilion);text-underline-offset:6px;}
.footer-fine{margin-top:40px;padding-top:24px;border-top:var(--rule) solid rgba(var(--line-gold-rgb),.3);font-size:13px;color:var(--muted-on-dark);letter-spacing:0;}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;gap:24px;}
}

/* ---------- 3i. Motion ---------------------------------------------- */
/* The only animation in the whole design: things fade in gently as they
   scroll into view (see the small script at the bottom of each page).
   People who ask their system for reduced motion get no animation at all.
   Content only starts hidden once that script has added class="js" to
   <html>, so with JavaScript switched off, everything is simply visible. */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity 1.2s var(--ease-calm), transform 1.2s var(--ease-calm);}
.js .reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  *{transition-duration:0s !important;animation-duration:0s !important;}
}

/* ---------- 4. Dark theme ------------------------------------------- */
/* The night theme lives in its own file, css/theme-dark.css (loaded
   after the page's own stylesheet, before style-montsuki.css, whose
   section 2 holds the night colors). js/theme.js switches it on. */