/* styles.css — shared palette + layout for the Chinese Folk Music site */
:root{
  --bg:#f5f5f2; --card:#ffffff; --ink:#23262b; --muted:#6b7280;
  --line:#e3e1da; --accent:#8a5a2b;
  --shaanxi:#e8743b;   /* warm — 陕北 */
  --jiangnan:#2e9e8f;  /* cool — 江南 */
  --shandong:#7a5cc0;  /* 山东 extension */
}
*{box-sizing:border-box;}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); margin:0; padding:0 18px 64px; line-height:1.5;
}
a{color:var(--accent); text-decoration:none;} a:hover{text-decoration:underline;}
.wrap{max-width:1060px; margin:0 auto;}

/* header / nav */
.site-head{max-width:1060px; margin:0 auto; padding:26px 0 8px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.site-head h1{font-size:23px; margin:0;}
.site-head .en{color:var(--muted); font-weight:400; font-size:17px;}
.site-head .byline{color:var(--muted); font-weight:500; font-size:15px;}
.site-head .byline a{color:var(--muted);} .site-head .byline a:hover{color:var(--accent);}
.en-title{color:var(--muted); font-weight:400; font-size:16px;}
.site-nav{margin-left:auto; display:flex; gap:16px; font-size:14px;}
.sub{color:var(--muted); font-size:14px; margin:0 auto 22px; max-width:1060px;}
/* highlighted "main finding" callout (landing) */
.key-finding{max-width:1060px; margin:0 auto 22px; padding:14px 18px; background:#fff7ef;
  border:1px solid #f0d9bf; border-left:4px solid var(--shaanxi); border-radius:12px;}
.key-finding-tag{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--shaanxi); margin-bottom:6px;}
.key-finding p{margin:0; font-size:14.5px; line-height:1.65; color:var(--ink);}
.hero{display:block; width:100%; max-width:1060px; margin:8px auto 22px; max-height:400px;
  object-fit:cover; object-position:center; border-radius:16px; border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.06);}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px;
      padding:20px 22px; margin-bottom:22px; box-shadow:0 1px 3px rgba(0,0,0,.04);}
.card h2{font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
         margin:0 0 14px; font-weight:700;}
.rule{height:1px; background:var(--line); margin:8px 0 14px;}
.theme-h{max-width:1060px; margin:18px auto 2px; font-size:18px; font-weight:700; color:var(--accent);
  border-top:2px solid var(--line); padding-top:12px;}
.about-card{overflow:hidden;}
.about-img{float:right; width:260px; max-width:42%; height:auto; border-radius:10px;
  border:1px solid var(--line); margin:2px 0 10px 18px;}
.about-text p{margin:0 0 10px; font-size:14.5px; line-height:1.65;}
.about-text blockquote{margin:10px 0 0; padding:8px 14px; border-left:3px solid var(--accent);
  background:#fbf6ef; font-style:italic; border-radius:0 8px 8px 0;}
.about-video{clear:both; margin:14px 0 0; font-weight:600;}
.about-video a{color:var(--accent);}
@media(max-width:600px){ .about-img{float:none; width:100%; max-width:100%; margin:0 0 12px;} }

/* controls */
label{font-size:14px; font-weight:600;} .hint{color:var(--muted); font-weight:400;}
textarea{width:100%; height:64px; padding:10px 12px; font-size:18px; margin-top:8px;
  font-family:"SF Mono",Menlo,Consolas,monospace; border:1px solid var(--line);
  border-radius:8px; resize:vertical; background:#fbfbf9; color:var(--ink);}
.controls{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:14px;}
.controls .grp{display:flex; align-items:center; gap:8px; font-size:14px;}
select,input[type=range]{accent-color:var(--accent);}
select{padding:6px 8px; border-radius:6px; border:1px solid var(--line); background:#fff;}
button{padding:9px 18px; font-size:15px; border:none; border-radius:8px; cursor:pointer;
  background:var(--accent); color:#fff; font-weight:600; transition:filter .15s;}
button:hover{filter:brightness(1.08);}
button.ghost{background:#eceae3; color:var(--ink);} button.stop{background:#b23b3b;}

/* rendered jianpu score */
.score{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:30px;
  line-height:2.1; font-family:"SF Mono",Menlo,Consolas,monospace; min-height:60px;}
.ng{position:relative; display:inline-flex; align-items:center; padding:2px 3px; border-radius:6px;}
.ng.active{background:#ffe9a8;}
.num{position:relative; display:inline-block; min-width:20px; text-align:center; font-weight:600;}
.num.hi::before{content:'·'; position:absolute; top:-26px; left:0; right:0; font-size:30px;}
.num.hi2::before{content:'··'; position:absolute; top:-26px; left:0; right:0; font-size:30px; letter-spacing:-3px;}
.num.lo::after{content:'·'; position:absolute; bottom:-30px; left:0; right:0; font-size:30px;}
.num.lo2::after{content:'··'; position:absolute; bottom:-30px; left:0; right:0; font-size:30px; letter-spacing:-3px;}
.dash{display:inline-block; width:18px; text-align:center; color:var(--muted);}
.acc{font-size:18px; color:var(--accent); vertical-align:super;}
.uls{position:absolute; left:50%; transform:translateX(-50%); bottom:-7px; display:flex; flex-direction:column; gap:2px;}
.uls i{display:block; width:16px; height:2px; background:currentColor; border-radius:1px;}
.dotr{font-weight:700; margin:0 1px;}
.barline{display:inline-block; width:2px; height:36px; background:#c7c3b8; margin:0 7px; vertical-align:middle;}
.jp-staff g.active ellipse, .jp-staff g.active circle{fill:#b23b3b; stroke:#b23b3b;}
.jp-staff g.active line, .jp-staff g.active path{stroke:#b23b3b;}

/* stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px;}
.stat{background:#fbfbf9; border:1px solid var(--line); border-radius:10px; padding:12px 14px;}
.stat .v{font-size:24px; font-weight:700;} .stat .k{font-size:12px; color:var(--muted); margin-top:3px; line-height:1.35;}
.verdict{margin-top:14px; padding:12px 14px; border-radius:10px; font-size:14px;
  background:#f3f7f5; border:1px solid #d7e6df;}

svg{width:100%; height:auto; display:block;}

/* SVG/PNG download row under figures (JP.figDownloads) */
.fig-dl{display:flex; gap:8px; justify-content:flex-end; margin:6px 0 2px;}
.fig-dl.center{justify-content:center;}
.fig-dl button{padding:3px 10px; font-size:12px; background:#eceae3; color:var(--ink);}

/* 12-tone-clock wheel panels (wheels.js: mountPanel / TriView / pooled views) */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
@media(max-width:760px){ .duo{grid-template-columns:1fr;} }
.panel{text-align:center;}
.panel .sel-row{display:flex; gap:8px; justify-content:center; align-items:center; margin-bottom:10px; flex-wrap:wrap;}
.panel select{max-width:100%;}
.panel .tagline{min-height:22px; margin-bottom:4px;}
.panel svg{max-width:420px; width:100%; height:auto; margin:0 auto;}
.panel .btns{display:flex; gap:10px; justify-content:center; margin:12px 0 4px; flex-wrap:wrap;}
.panel .btns button{padding:7px 14px; font-size:14px;}
.panel .btns.dl-row{margin:2px 0 4px; gap:8px;}   /* SVG/PNG downloads on their own line */
.panel .btns button.dl-b{padding:4px 10px; font-size:12px;}
.panel .now{min-height:22px; font-size:14px; color:var(--muted);
  font-family:"SF Mono",Menlo,Consolas,monospace;}
.panel .mini{font-size:12.5px; color:var(--muted); margin-top:4px; min-height:18px;}
.panel .whl-info{margin:0 0 4px;}
.panel .whl-info .interval-key{text-align:left; margin:8px auto 6px; max-width:520px; font-size:12.5px;}
.chords path, .chords circle.loop{transition:opacity .35s;}
.legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:13px; color:var(--muted);}
.legend .it{display:flex; align-items:center; gap:6px;}
.legend .sw{width:14px; height:14px; border-radius:3px; display:inline-block; margin-right:5px;}

/* 4-vs-4 statistics page */
.finding{font-size:14.5px; line-height:1.7;}
.hl-sx{color:var(--shaanxi); font-weight:700;}
.hl-jn{color:var(--jiangnan); font-weight:700;}
.tests p{margin:0 0 9px; font-size:14px; line-height:1.6;}
.tests p.muted{color:var(--muted);}
.stat-tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
.stat-tbl th,.stat-tbl td{padding:6px 8px; text-align:right; border-bottom:1px solid var(--line);}
.stat-tbl th:first-child,.stat-tbl td:first-child{text-align:left;}
.stat-tbl thead th{color:var(--muted); font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.02em; white-space:nowrap; vertical-align:bottom;}
.stat-tbl thead th.th-chords{text-align:left; white-space:normal; min-width:150px;}
.stat-tbl .reg-row td{background:#faf7f2; font-weight:700; text-align:left; padding-top:11px;}
.stat-tbl .reg-row.sx td{color:var(--shaanxi);} .stat-tbl .reg-row.jn td{color:var(--jiangnan);}
.stat-tbl .mean-row td{font-weight:700; background:#fbfbf9;}
.stat-tbl .muted{color:var(--muted); font-weight:400; font-size:12px;}

/* interval-key ⓘ toggle (histogram section) */
.hist-h{display:flex; align-items:center; gap:8px;}
.info-toggle{appearance:none; -webkit-appearance:none; border:none; background:none; cursor:pointer;
  color:var(--accent); font-size:16px; line-height:1; padding:0; margin:0; border-radius:50%;
  text-transform:none; letter-spacing:0;}
.info-toggle:hover,.info-toggle.on{color:var(--ink);}
.info-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.interval-key{background:#fbf9f5; border:1px solid var(--line); border-radius:10px; padding:12px 16px;
  margin:0 0 14px; font-size:13px;}
.interval-key[hidden]{display:none;}
.ik-intro{margin:0 0 9px; color:var(--muted);}
.ik-list{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:5px 18px;}
.ik-list li{font-size:13px;}
.ik-list b{display:inline-block; min-width:32px; color:var(--ink);
  font-family:"SF Mono",Menlo,Consolas,monospace;}
.ik-st{color:var(--muted); font-size:11px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{padding:7px 9px; text-align:left; border-bottom:1px solid var(--line);}
th{color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:11px;}
td.mono{font-family:"SF Mono",Menlo,Consolas,monospace;}
.pill{display:inline-block; padding:1px 8px; border-radius:20px; color:#fff; font-size:12px; font-weight:600;}
details{margin-top:4px;} summary{cursor:pointer; color:var(--accent); font-weight:600; font-size:14px;}

/* pending state */
.pending,.pending-msg .pending{background:#fbf6ef; border:1px dashed #d9c9b0; color:#8a6d3b;
  border-radius:10px; padding:16px 18px; font-size:14px; text-align:center;}
.pending span{color:var(--muted); font-size:13px;}

/* comparison grid (landing) */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.compare .col{min-width:0;}
.compare h3{margin:0 0 4px; font-size:18px;}
.compare .tag{display:inline-block; font-size:12px; font-weight:700; color:#fff; padding:2px 9px; border-radius:20px;}
.tag.sx{background:var(--shaanxi);} .tag.jn{background:var(--jiangnan);} .tag.sd{background:var(--shandong);}
.tag.sx2{background:#b8902f;} /* 陕西 modern pop */
.compare .src{color:var(--muted); font-size:12.5px; margin:3px 0 12px;}
.mini-contour,.mini-hist{margin-top:10px;}
@media(max-width:760px){ .compare{grid-template-columns:1fr;} }

/* corpus directory */
.region-h{font-size:14px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.04em; margin:18px 0 10px; display:flex; align-items:center; gap:8px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;}
.mcard{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; transition:box-shadow .15s, transform .15s;}
.mcard:hover{box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-1px); text-decoration:none;}
.mcard .t{font-size:17px; font-weight:700; color:var(--ink);}
.mcard .t-en{font-size:13px; color:var(--muted); font-weight:600; margin-top:1px;}
.mcard .s{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.4;}
.badge{display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:20px; margin-top:9px;}
.badge.ready{background:#e6f3ee; color:#1f7a5e;} .badge.todo{background:#f3efe6; color:#9a7b3b;}
.foot{max-width:1060px; margin:30px auto 0; color:var(--muted); font-size:13px; border-top:1px solid var(--line); padding-top:16px;}