/* =====================================================================
   style-montsuki.css: THE look of the whole site, "modern montsuki".
   Loaded by every page after base.css and theme-dark.css, and always on:
   those two 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, 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 */
  --text-on-dark:#f1ede5;
  --muted-on-dark:#d2cec6;
  --on-ink:#efeae1;
  --field:#f5f2ec;
  --raised-hover:#f5f2ec;
  --error:#8e2a2a;
}

/* ---------- 2. Palette: night ---------------------------------------- */
:root:root[data-theme="dark"]{
  --lacquer:#141518;
  --lacquer-raised:#1c1d22;
  --lacquer-high:#25262c;
  --bar:#1c1d22;
  --field:#1a1b20;
  --indigo-deep:#26324a;    /* ai panels, a little lighter than the page */
  --night-ai:#0e0f12;
  --forest:#24403a;
  --forest-light:#7fa596;
  --kaki:#3e3128;
  --vermilion:#c25a50;
  --gold-leaf:#ece6da;      /* main buttons and highlights: silk */
  --gold-muted:#c4a066;     /* kincha */
  --gold-line:rgba(236,230,218,.16);
  --label-on-light:#c4a066; /* small labels: kincha */
  --wood-ink:#c4a066;
  --on-ink:#141518;
}

/* ---------- 3. Clean and flat ---------------------------------------- */
/* (No paper grain: --grain-paper / --grain-dark are "none" in base.css.) */
:root:root{
  --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,
:root[data-theme="dark"] .nav-link::after{height:2px;background:var(--vermilion);}
:root[data-theme="dark"] .nav-link.active,
:root[data-theme="dark"] .nav-link[aria-current="page"]{color:var(--ink);}

/* ---------- 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[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .on-dark .eyebrow,
:root[data-theme="dark"] .surface-indigo .eyebrow,
:root[data-theme="dark"] .surface-forest .eyebrow,
:root[data-theme="dark"] .surface-kaki .eyebrow{color:var(--label-on-light);}
:root .surface-indigo .eyebrow,
:root .surface-forest .eyebrow,
:root .surface-kaki .eyebrow,
:root[data-theme="dark"] .rank-card .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[data-theme="dark"] .panel-body.panel-body,
:root .rank-card.rank-card,
:root[data-theme="dark"] .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;}
:root[data-theme="dark"] .panel-body h3,
:root[data-theme="dark"] .panel-body .link-arrow,
:root[data-theme="dark"] .rank-card-value{color:var(--text-on-dark);}
:root[data-theme="dark"] .panel-body p,
:root[data-theme="dark"] .panel-body .subhead-en{color:rgba(241,237,229,.8);}

/* 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,
:root[data-theme="dark"] .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,
:root[data-theme="dark"] .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,
:root[data-theme="dark"] .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,
:root[data-theme="dark"] .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,
:root[data-theme="dark"] .band-forest{background-image:var(--hakama);}

/* ---------- 7. Buttons: sharp indigo blocks -------------------------- */
:root:not([data-theme="dark"]) .btn{background:var(--indigo-deep);border-color:var(--indigo-deep);color:var(--on-ink);}
:root:not([data-theme="dark"]) .btn:hover{background:#2c3a54;border-color:#2c3a54;}
:root:not([data-theme="dark"]) .btn:disabled:hover{background:var(--indigo-deep);border-color:var(--indigo-deep);}
:root:not([data-theme="dark"]) .btn.btn-quiet{background:transparent;color:var(--ink);border-color:rgba(27,27,30,.5);}
:root:not([data-theme="dark"]) .on-dark .btn,
:root:not([data-theme="dark"]) .surface-indigo .btn,
:root:not([data-theme="dark"]) .surface-forest .btn,
:root:not([data-theme="dark"]) .surface-kaki .btn{background:transparent;color:var(--text-on-dark);border-color:rgba(241,237,229,.7);}
:root .btn,
:root[data-theme="dark"] .btn:hover{box-shadow:none;}

/* ---------- 8. Footer: sumi-indigo hakama cloth, the obi on top ------- */
:root .site-footer,
:root[data-theme="dark"] .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,
:root[data-theme="dark"] #boardWrap{
  background-color:var(--floor);background-image:none;
  border-top:6px solid var(--heri);border-bottom:6px solid var(--heri);
}
:root[data-theme="dark"] .bowl-black,
:root[data-theme="dark"] .bowl-white{box-shadow:0 0 0 1px rgba(236,230,218,.35);}

/* Night: crests don't glow; bars use the plain line color. */
:root[data-theme="dark"] .crest-mon{color:var(--wood-ink);filter:none;}
:root[data-theme="dark"] .profile-bar-fill,
:root[data-theme="dark"] .lib-progress-fill{background:var(--wood-ink);}
:root[data-theme="dark"] .profile-bar,
:root[data-theme="dark"] .lib-progress-bar{background:var(--gold-line);}