/* =====================================================================
   style-montsuki.css: THE look of the whole site, "modern montsuki".
   Loaded by every page after base.css and the page's own stylesheet, and
   always on, in both themes: those files lay the foundation (layout,
   fonts, spacing, and an older set of colors), and this file paints over
   it: its colors at the top replace theirs (section 1 by day, section 2
   at night: the same design, only dark), and its rules restyle the parts
   listed below. (The rules start with ":root" only so they outweigh the
   same rules in those files.)

   Montsuki is a man's formal kimono: a crested haori jacket over hakama
   trousers. This look is its modern version: clean, sharp and flat (no
   paper grain, brush strokes or wood lattice), with a man's colors and
   details:
     - dark, muted dyes: indigo (ai), dark tea-brown (kuro-cha) and pine
       green (tokiwa), on undyed silk;
     - HayaGo's logo (the "H" on its board) on each colored panel, where a montsuki
       carries its family crest;
     - a narrow, stiff belt (kaku-obi) with fine woven lines under the top
       bar and over the footer;
     - the fine vertical pinstripes of hakama cloth on the footer and the
       philosophy band;
     - the hanging scroll kept, but flat: thin gold rods, no wood;
     - a flat tatami under the board, edged in indigo cloth;
     - old gold (kincha) for small marks, and a dark red (the color of a
       haori's hidden lining) only for the current page.
   ===================================================================== */

/* ---------- 1. Palette: day ------------------------------------------ */
:root:root:not([data-theme="dark"]){
  --cream:#e3ddd2;          /* undyed silk: the page */
  --ivory:#efeae1;          /* panels holding text */
  --bar:#efeae1;            /* the top bar */
  --charcoal:#1b1b1e;       /* sumi: text and headings */
  --ink:#1b1b1e;
  --ink-black:#1b1b1e;      /* "HayaGo" in the top bar */
  --indigo-muted:#3d3c42;
  --indigo-deep:#1f2a3d;    /* ai: panels, main buttons */
  --night-ai:#1a1d24;       /* the footer: sumi-indigo */
  --forest:#2c4a40;         /* tokiwa: pine green */
  --forest-light:#2c4a40;
  --kaki:#4a3a2e;           /* kuro-cha: dark tea-brown */
  --vermilion:#8e2a2a;      /* the haori lining's dark red: current page */
  --vermilion-wash:rgba(142,42,42,.10);
  --gold-muted:#a88443;     /* kincha: rules, small marks, focus */
  --dawn:#d8d1c3;
  --muted-on-light:#545158;
  --label-on-light:#4a3a2e; /* small labels: tea-brown */
  --wood-ink:#1f2a3d;       /* crests, style emblems, usage bars: indigo */
  --btn-hover:#2c3a54;      /* a main button under the mouse */
  --field:#f5f2ec;
  --raised-hover:#f5f2ec;
  --error:#8e2a2a;
}

/* ---------- 2. Palette: night ---------------------------------------- */
/* The SAME look as the day, only dark: every color above has its night
   twin here, with the same job (the page goes dark, the text goes light,
   the three dyes stay dyes). Nothing is drawn at night that isn't drawn
   by day. js/theme.js switches it on (Settings: Light / Dark / System). */
:root:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#141518;           /* the page */
  --ivory:#1c1d22;          /* panels holding text */
  --bar:#1c1d22;            /* the top bar */
  --charcoal:#e6e2da;       /* text and headings */
  --ink:#e6e2da;
  --brand-ink:#e6e2da;      /* "HayaGo" in the top bar */
  --indigo-muted:#bdbac1;
  --indigo-deep:#26324a;    /* ai: panels, main buttons */
  --night-ai:#0e0f12;       /* the footer */
  --forest:#24403a;         /* tokiwa: pine green */
  --forest-light:#7fa596;   /* pine green for text and marks on the page */
  --kaki:#3e3128;           /* kuro-cha: dark tea-brown */
  --vermilion:#c25a50;      /* the haori lining's red: current page */
  --vermilion-wash:rgba(194,90,80,.14);
  --gold-muted:#c4a066;     /* kincha: rules, small marks, focus */
  --muted-on-light:#a9a6ad;
  --label-on-light:#c2ab92; /* small labels: light tea-brown */
  --wood-ink:#9aa8c4;       /* crests, style emblems, usage bars: light indigo */
  --btn-hover:#33415e;
  --field:#1a1b20;
  --raised-hover:#25262c;
  --error:#e6907a;
}
/* The black brush "H" turns light, as it already does on the colored panels. */
:root[data-theme="dark"] .brand-mark{filter:invert(1) sepia(.2) brightness(.96);}

/* ---------- 3. Clean and flat ---------------------------------------- */
/* (No paper grain: --grain-paper / --grain-dark are "none" in base.css.) */
:root:root{
  /* Text on the dark dyes and on main buttons: the same in both themes,
     since the panels stay dyed. */
  --text-on-dark:#f1ede5;
  --muted-on-dark:#d2cec6;
  --on-ink:#efeae1;
  --radius:0;
  /* The kaku-obi: a narrow indigo belt with two fine woven gold lines. */
  --obi:linear-gradient(to bottom,
    var(--indigo-deep) 0 2px, var(--gold-muted) 2px 3px, var(--indigo-deep) 3px 5px, var(--gold-muted) 5px 6px, var(--indigo-deep) 6px 8px);
  /* Hakama cloth: fine vertical pinstripes, light on a dark ground. */
  --hakama:repeating-linear-gradient(90deg,
    rgba(255,255,255,.055) 0 1px, transparent 1px 6px,
    rgba(255,255,255,.03) 6px 7px, transparent 7px 12px);
  /* The mark on each colored panel, where a montsuki carries its family
     crest: HayaGo's logo on its own, the board version, as lines only
     (img/logo-board-lines.png), used as a mask so it takes whatever color
     it's given (white on the colored panels). */
  --mon:url("/img/logo-board-lines.png");
  /* A flat tatami: rush-green, no weave, edged with indigo cloth (heri). */
  --floor:#bab58f;
  --heri:var(--indigo-deep);
}
:root[data-theme="dark"]{
  /* At night the belt is a lighter indigo than the panels. */
  --obi:linear-gradient(to bottom,
    #2b3853 0 2px, var(--gold-muted) 2px 3px, #2b3853 3px 5px, var(--gold-muted) 5px 6px, #2b3853 6px 8px);
  --floor:#262721;
}

/* ---------- 4. Top bar: the kaku-obi under it ------------------------ */
:root .side-nav::after{
  bottom:0;height:8px;   /* inside the bar, so nothing below can cover it */
  background:var(--obi);
}
/* Current page / hover: a dark red line, like a glimpse of haori lining. */
:root .nav-link::after{height:2px;background:var(--vermilion);}

/* ---------- 5. Labels: a small gold square before them --------------- */
:root .eyebrow{display:flex;align-items:center;gap:9px;}
:root .eyebrow::before{content:"";width:7px;height:7px;background:var(--gold-muted);flex:none;}
:root .hero-goban figcaption .eyebrow::before{display:none;}
:root .surface-indigo .eyebrow,
:root .surface-forest .eyebrow,
:root .surface-kaki .eyebrow{color:var(--muted-on-dark);}

/* ---------- 6. Plain, sharp edges ------------------------------------ */
/* (The old wood frames were removed from base.css.) */
:root .hero-goban .goban-surface{box-shadow:0 0 0 1px rgba(27,27,30,.3);}

/* The homepage's three panels and the app's rank card: plain blocks of
   dark dye, each carrying the logo (the "H" on its board) at its top right, where a
   montsuki carries its crest on the chest. */
:root .panel-body.panel-body,
:root .rank-card.rank-card{
  position:relative;background-image:none;box-shadow:none;
}
:root .panel-body::after,
:root .rank-card::after{
  content:"";position:absolute;top:22px;right:22px;width:34px;height:34px;pointer-events:none;
  background:rgba(241,237,229,.88);
  -webkit-mask:var(--mon) center/contain no-repeat;
          mask:var(--mon) center/contain no-repeat;
}
:root .rank-card::after{width:28px;height:28px;top:18px;right:18px;}
:root .panel-num{color:var(--text-on-dark);opacity:.75;font-family:var(--font-body);font-size:16px;}

/* The philosophy section, built like "How it works" above it instead of
   as a framed scroll with a drawing: straight on the pinstriped pine band,
   a large quote as its heading, a short gold rule, then the three
   principles side by side (each under its own kaku-obi), and the link. */
:root .scroll-frame.scroll-frame{
  display:block;background:none;box-shadow:none;color:var(--text-on-dark);
}
:root .scroll-strip,
:root .scroll-goban{display:none;}
:root .scroll-body{display:block;padding:0;}
:root .scroll-text blockquote{
  max-width:820px;margin:10px 0 14px;
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:clamp(28px,3.4vw,40px);line-height:1.3;color:var(--text-on-dark);
}
:root .scroll-text .attribution{color:var(--muted-on-dark);margin-bottom:22px;}
:root .scroll-text .rule-gold{width:56px;margin:0 0 56px;background:var(--gold-muted);opacity:1;}
:root .principles{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin:0 0 48px;
}
:root .principles > div{
  padding-top:26px;background:var(--obi) top/100% 8px no-repeat;
}
:root .principles dt{font-size:22px;font-weight:400;color:var(--text-on-dark);}
:root .principles dd{margin-top:8px;color:var(--muted-on-dark);}
:root .scroll-text .link-arrow{color:var(--text-on-dark);border-bottom-color:rgba(241,237,229,.4);}
@media (max-width:860px){
  :root .principles{grid-template-columns:1fr;}
}

/* The hanging scroll stays, but flat: thin gold rods, no wood, no curve. */
:root .scroll-rod{
  height:5px;margin:0 -8px;border-radius:0;background:var(--gold-muted);box-shadow:none;
}

/* The philosophy band: pine green woven with hakama pinstripes. */
:root .band-forest{background-image:var(--hakama);}

/* ---------- 7. Buttons: sharp indigo blocks -------------------------- */
:root .btn{background:var(--indigo-deep);border-color:var(--indigo-deep);color:var(--on-ink);box-shadow:none;}
:root .btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);}
:root .btn:disabled:hover{background:var(--indigo-deep);border-color:var(--indigo-deep);}
:root .btn.btn-quiet{background:transparent;color:var(--ink);border-color:color-mix(in srgb, var(--ink) 50%, transparent);}
:root .on-dark .btn,
:root .surface-indigo .btn,
:root .surface-forest .btn,
:root .surface-kaki .btn{background:transparent;color:var(--text-on-dark);border-color:rgba(241,237,229,.7);}

/* ---------- 8. Footer: sumi-indigo hakama cloth, the obi on top ------- */
:root .site-footer{
  position:relative;border-top:0;background-image:var(--hakama);background-size:auto;
}
:root .site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--obi);
}

/* ---------- 9. The app ----------------------------------------------- */
/* The board rests on a flat tatami edged with indigo cloth. */
:root #boardWrap{
  background-color:var(--floor);background-image:none;
  border-top:6px solid var(--heri);border-bottom:6px solid var(--heri);
}