/* 仁工夫工具坊 — shared design system
   Cinnabar / paper / ink / gold / sage. Georgia + Noto Serif SC headers. */

:root{
  --ink:#2b2622;
  --paper:#faf7f1;
  --gold:#b8923e;
  --cinnabar:#b4442c;
  --cinnabar-dark:#9c3a25;
  --sage:#5c7a6a;
  --card:#ffffff;
  --line:#e6dfd2;
  --muted:#7a7165;
  --wash:#f3eee3;
  --serif:Georgia,'Noto Serif SC','Songti SC',serif;
  --sans:Calibri,'Segoe UI','Noto Sans SC','PingFang SC',sans-serif;
  --radius:6px;
  --maxw:980px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  padding:0 16px 70px; max-width:var(--maxw); margin:0 auto;
}
body[data-lang="zh"]{font-family:'Noto Sans SC','PingFang SC',var(--sans)}
h1,h2,h3,h4{font-family:var(--serif); font-weight:normal}
a{color:var(--cinnabar)}
img{max-width:100%}
[hidden]{display:none !important}

/* ── header ───────────────────────────────── */
.site-head{
  border-bottom:3px double var(--gold); padding:22px 0 16px; margin-bottom:26px;
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
.sealmark{
  width:60px; height:60px; background:var(--cinnabar); border-radius:6px; color:#faf3ea;
  font-family:var(--serif); display:grid; place-items:center; font-size:15px; line-height:1.15;
  text-align:center; letter-spacing:2px; flex-shrink:0; text-decoration:none;
  box-shadow:0 1px 0 rgba(43,38,34,.25);
}
.site-head .titles{flex:1; min-width:180px}
.site-head h1{font-size:21px; margin-bottom:3px}
.site-head .sub{color:var(--muted); font-size:13px}
.motto{
  display:inline-block; margin-top:6px; font-size:12.5px; color:var(--cinnabar);
  border:1px solid var(--cinnabar); border-radius:20px; padding:1px 12px;
}
.head-actions{display:flex; gap:8px; align-items:center}

/* ── language toggle ──────────────────────── */
.langswitch{display:flex; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--card)}
.langswitch button{
  border:none; border-radius:0; background:transparent; padding:5px 13px;
  font-size:13px; cursor:pointer; color:var(--muted); font-family:var(--sans);
}
.langswitch button[aria-pressed="true"]{background:var(--cinnabar); color:#faf3ea}

/* ── generic ──────────────────────────────── */
section{margin-bottom:34px}
h2{font-size:18.5px; color:var(--cinnabar); border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:4px}
h3{font-size:15.5px; margin:10px 0 6px}
p{margin-bottom:9px}
.lede{color:var(--muted); font-size:13.5px; margin-bottom:14px}
.note{font-size:12.5px; color:var(--muted)}
.card{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--gold);
      border-radius:var(--radius); padding:14px 16px; margin-bottom:14px}
.card.cin{border-left-color:var(--cinnabar)}
.card.sage{border-left-color:var(--sage)}

button{font-family:var(--sans); font-size:13.5px; border-radius:var(--radius); border:1px solid var(--line);
       background:var(--card); color:var(--ink); padding:7px 14px; cursor:pointer}
button:hover{border-color:var(--gold)}
button:focus-visible{outline:2px solid var(--cinnabar); outline-offset:2px}
button.primary{background:var(--cinnabar); border-color:var(--cinnabar); color:#faf3ea}
button.primary:hover{background:var(--cinnabar-dark)}
button.ghost{background:transparent}
button:disabled{opacity:.45; cursor:default}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px}

select,input[type=text]{
  font-family:inherit; font-size:13.5px; padding:7px 10px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--paper); color:var(--ink); max-width:100%;
}
select:focus-visible,input:focus-visible{outline:2px solid var(--gold); outline-offset:1px}

/* ── invite gate ──────────────────────────── */
#gate{position:fixed; inset:0; background:var(--paper); z-index:900; display:grid; place-items:center; padding:24px}
#gate .box{max-width:400px; width:100%; text-align:center}
#gate .sealmark{margin:0 auto 18px}
#gate h1{font-size:20px; margin-bottom:6px}
#gate p{font-size:13.5px; color:var(--muted)}
#gate form{display:flex; gap:8px; margin:18px 0 10px}
#gate input{flex:1; text-align:center; letter-spacing:1px}
#gate .err{color:var(--cinnabar); font-size:13px; min-height:18px}

/* ── friction dial ────────────────────────── */
.dial{display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; width:fit-content; margin:8px 0}
.dial button{border:none; border-radius:0; border-right:1px solid var(--line); background:var(--card); padding:8px 16px; font-size:14px}
.dial button:last-child{border-right:none}
.dial button[aria-pressed="true"]{background:var(--cinnabar); color:#faf3ea}
.dial button[aria-pressed="true"]:hover{background:var(--cinnabar)}

/* teacher display settings */
.toggles{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 2px}
.toggles button{border:1px solid var(--line); background:var(--card); padding:6px 14px; font-size:13px}
.toggles button[aria-pressed="true"]{background:var(--sage); border-color:var(--sage); color:#faf3ea}
.toggles button[aria-pressed="true"]:hover{background:var(--sage)}
.toggles button::before{content:"○ "; font-size:11px}
.toggles button[aria-pressed="true"]::before{content:"● "}

/* ── pitch grid ───────────────────────────── */
.gridwrap{overflow-x:auto; padding-bottom:4px}
.pgrid{display:grid; grid-template-columns:52px repeat(8,minmax(34px,1fr)); gap:3px; min-width:380px; margin:8px 0}
.pgrid .rowlab{font-size:11.5px; color:var(--muted); display:flex; align-items:center; justify-content:flex-end; padding-right:6px; font-family:var(--serif)}
.cell{aspect-ratio:1.35/1; background:var(--wash); border:1px solid var(--line); border-radius:4px;
      cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:1px; font-family:var(--serif); line-height:1; color:transparent; user-select:none;
      overflow:hidden}
/* both notations sit in every cell; the teacher toggles decide what shows */
.cell .jp,.cell .sf{display:none}
.cell .jp{font-size:11px}
.cell .sf{font-size:8.5px; font-style:normal; opacity:.9; letter-spacing:.2px}
.cell.on{color:#faf3ea}
body[data-jianpu="on"] .cell.on .jp{display:block}
body[data-solfege="on"] .cell.on .sf{display:block}
.cell.playing{color:var(--gold)}
.pgrid.mini .cell .jp,.pgrid.mini .cell .sf{display:none !important}
.cell.on{background:var(--cinnabar); border-color:var(--cinnabar)}
/* the playhead must read as the playhead on a filled, a call, or an empty cell,
   so it takes the cell over entirely rather than ringing it */
.cell.playing{background:var(--ink); border-color:var(--ink);
              box-shadow:0 0 0 2px var(--gold) inset}
.cell.on.call{background:var(--sage); border-color:var(--sage)}

/* the one phrase box: call on the left, response zone on the right */
.pgrid.phrase{grid-template-columns:52px repeat(16,minmax(26px,1fr)); min-width:640px}
/* syllables need more room than digits */
body[data-solfege="on"] .pgrid.phrase{grid-template-columns:52px repeat(16,minmax(34px,1fr)); min-width:760px}
body[data-solfege="on"] .zonebar{min-width:705px}
.phrase-readout{font-family:var(--serif); font-size:15px; letter-spacing:3px; margin:10px 0 2px}
.phrase-readout .sep{color:var(--gold); margin:0 8px; letter-spacing:0}
.phrase-readout .rest{color:var(--muted)}
.opt .jianpu.edited{color:var(--cinnabar)}
.opt .editmark{font-size:11px; color:var(--cinnabar); margin-left:6px}
.cell.resp{background:#efe9db}
.cell.resp.on{background:var(--cinnabar); border-color:var(--cinnabar)}
.cell.divide{border-left:2px solid var(--gold)}
.zonebar{display:flex; gap:3px; margin:0 0 4px 55px; min-width:585px}
.zonebar span{flex:1; font-size:11.5px; color:var(--muted); font-family:var(--serif)}
.zonebar span+span{border-left:2px solid var(--gold); padding-left:6px}
.pgrid.mini{grid-template-columns:repeat(8,16px); gap:2px; min-width:0; margin:6px 0}
.pgrid.mini .cell{aspect-ratio:1/1; cursor:default; border-radius:2px}
.pgrid.mini .cell.playing{box-shadow:0 0 0 2px var(--ink) inset}
.phrasewrap{overflow-x:auto; margin:6px 0}
.legend-inline{display:flex; gap:16px; align-items:center; flex-wrap:wrap;
               font-size:12px; color:var(--muted); margin:10px 0 2px}
.legend-inline i{width:11px; height:11px; border-radius:2px; display:inline-block;
                 margin-right:5px; vertical-align:-1px}
.legend-inline .sw-call{background:var(--sage)}
.legend-inline .sw-ai{background:var(--cinnabar)}
.pgrid.readonly .cell{cursor:default}
.jianpu{font-family:var(--serif); font-size:17px; letter-spacing:5px; margin:8px 0 2px}
.melody-line{font-family:var(--serif); font-size:16px; letter-spacing:6px; margin:6px 0 2px}
.countdown{font-family:var(--serif); color:var(--sage); font-size:14.5px; margin:10px 0 2px}

/* ── suggestion + palette cards ───────────── */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; margin-top:12px}
.opt{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:11px 12px}
.opt h4{font-size:14.5px; margin-bottom:2px}
.opt .strat{font-size:12px; color:var(--muted); margin-bottom:4px}
.opt.chosen{border-color:var(--cinnabar); box-shadow:0 0 0 1px var(--cinnabar)}
.chips{display:flex; gap:5px; margin:8px 0}
.chip{flex:1; height:22px; border-radius:4px; border:1px solid var(--line); font-size:10.5px;
      display:grid; place-items:center; color:var(--muted); background:var(--wash)}

/* ── why box ──────────────────────────────── */
.whybox{margin-top:10px; display:none; gap:8px; align-items:center; flex-wrap:wrap}
.whybox.show{display:flex}
.whybox input{flex:1; min-width:180px}
.whybox input.need{border-color:var(--cinnabar); box-shadow:0 0 0 1px var(--cinnabar)}

/* ── decision log ─────────────────────────── */
#logpanel{background:var(--card); border:1px solid var(--line); border-top:3px double var(--gold);
          border-radius:var(--radius); padding:14px 16px}
.logentry{display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line)}
.logentry:last-child{border-bottom:none}
.stamp{width:38px; height:38px; flex-shrink:0; background:var(--cinnabar); color:#faf3ea; border-radius:4px;
       display:grid; place-items:center; font-family:var(--serif); font-size:17px; transform:rotate(-4deg)}
@keyframes stampin{0%{transform:scale(2.2) rotate(-14deg);opacity:0}60%{transform:scale(.92) rotate(-2deg);opacity:1}100%{transform:scale(1) rotate(-4deg)}}
.stamp.fresh{animation:stampin .45s ease-out}
@media (prefers-reduced-motion:reduce){.stamp.fresh{animation:none}}
.logentry .what{font-size:13.5px}
.logentry .meta{font-size:11.5px; color:var(--muted)}
.logentry .why{font-size:12.5px; color:var(--muted); font-style:italic}
.logempty{color:var(--muted); font-size:13px; font-style:italic; padding:6px 0}

/* ── hub tool grid ────────────────────────── */
.toolgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:14px}
.toolcard{
  background:var(--card); border:1px solid var(--line); border-top:3px solid var(--gold);
  border-radius:0 0 var(--radius) var(--radius); padding:14px 15px; display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.toolcard:hover{border-color:var(--gold); box-shadow:0 2px 8px rgba(43,38,34,.07)}
.toolcard.soon{opacity:.82; border-top-color:var(--line)}
.toolcard h3{font-size:16px; margin:0 0 3px}
.toolcard .en{font-size:12.5px; color:var(--muted); margin-bottom:7px}
.toolcard .one{font-size:13px; flex:1}
.status{display:inline-block; font-size:11px; border-radius:20px; padding:1px 9px; margin-top:10px; align-self:flex-start}
.status.live{background:var(--cinnabar); color:#faf3ea}
.status.lite{background:var(--wash); color:var(--gold); border:1px solid var(--gold)}
.status.soon{background:var(--wash); color:var(--muted); border:1px solid var(--line)}

/* ── tables ───────────────────────────────── */
table{width:100%; border-collapse:collapse; margin:8px 0; background:var(--card); font-size:13px}
th{font-family:var(--serif); font-weight:normal; text-align:left; background:var(--wash);
   border-bottom:2px solid var(--gold); padding:7px 9px}
td{padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:none}
.dot{display:inline-block; width:13px; height:13px; border-radius:50%; vertical-align:middle}
.dot.full{background:var(--cinnabar)}
.dot.half{background:linear-gradient(90deg,var(--gold) 50%,var(--wash) 50%); border:1px solid var(--gold)}
.dot.none{background:var(--wash); border:1px solid var(--line)}

/* ── curriculum strip ─────────────────────── */
.curbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--wash);
        border:1px solid var(--line); border-radius:var(--radius); padding:10px 13px; margin-bottom:16px}
.curbar .lbl{font-family:var(--serif); font-size:13.5px}
.curbar .out{font-size:12.5px; color:var(--muted); flex:1; min-width:160px}

/* ── shell (not-yet-built) pages ──────────── */
.shellnote{border-left:4px solid var(--sage); background:var(--card); border:1px solid var(--line);
           border-left-width:4px; border-radius:var(--radius); padding:14px 16px; margin-bottom:16px}
ol.steps{margin:6px 0 0 20px; font-size:13.5px}
ol.steps li{margin-bottom:5px}

.site-foot{border-top:3px double var(--gold); margin-top:34px; padding-top:12px; font-size:12.5px; color:var(--muted)}
.site-foot p{margin-bottom:5px}

@media (max-width:520px){
  .site-head{padding-top:16px}
  .site-head h1{font-size:18.5px}
  .head-actions{width:100%}
}

/* ── development trail ────────────────────── */
#trail{border-left:2px solid var(--line); margin-left:8px; padding-left:0}
.rel{position:relative; padding:0 0 26px 26px}
.rel::before{content:""; position:absolute; left:-8px; top:5px; width:14px; height:14px;
             border-radius:50%; background:var(--paper); border:2px solid var(--gold)}
.rel.current::before{background:var(--cinnabar); border-color:var(--cinnabar)}
.rel .reltop{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.rel .ver{font-family:var(--serif); font-size:15px; color:var(--cinnabar)}
.rel .date{font-size:12px; color:var(--muted)}
.rel h3{font-size:16px; margin:2px 0 4px}
.rel .why{font-size:13.5px; color:var(--ink); margin-bottom:6px}
.rel .changes{margin:0 0 8px 18px; font-size:13px; color:var(--muted)}
.rel .changes li{margin-bottom:3px}
.rel .open{font-size:13px}

/* version link in the header */
.head-actions .histlink{font-size:12.5px; color:var(--muted); text-decoration:none; white-space:nowrap}
.head-actions .histlink:hover{color:var(--cinnabar)}

/* ── axis picker inside the dial card ─────── */
.axisrow{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.axisrow .toggles.axis{margin:6px 0 4px}
.axisrow .toggles.axis button{padding:5px 12px; font-size:12.5px}
.axisrow .toggles.axis button::before{content:""}
.axisrow .toggles.axis button[aria-pressed="true"]{background:var(--cinnabar); border-color:var(--cinnabar)}

/* ── the mirror ───────────────────────────── */
.mirrorstats{display:flex; gap:22px; flex-wrap:wrap; margin:8px 0 4px}
.mirrorstats div{font-size:13px}
.mirrorstats b{font-family:var(--serif); font-size:19px; display:block; color:var(--cinnabar); line-height:1.2}
.mirrorstats span{color:var(--muted); font-size:12px}
.distmeter{display:flex; gap:3px; align-items:center; margin:7px 0 2px}
.distmeter i{width:13px; height:6px; border-radius:2px; background:var(--wash); border:1px solid var(--line)}
.distmeter i.on{background:var(--cinnabar); border-color:var(--cinnabar)}
.distmeter .lbl{font-size:11px; color:var(--muted); margin-left:6px}


/* ── landing navigation + textbook anchors ─────────── */
.navcard{text-decoration:none; color:inherit; display:block; border-top:3px solid var(--gold)}
.navcard:hover{border-color:var(--cinnabar)}
.navcard h4{color:var(--cinnabar)}
.toolcard .anchor{font-size:11.5px; color:var(--sage); margin-top:6px; padding-top:6px; border-top:1px dashed var(--line)}
.toolcard.demo{border-top-color:var(--cinnabar)}