/* carnatic.css — shared styling for the Carnatic ragas and melakarta tools.
 *
 * The page stays in the warm ManyHand palette, because most of what is on it is
 * reading material and reference. The part you actually play — swaras, keyboard,
 * transport — sits on a dark instrument panel, so it reads as a thing to touch
 * rather than another block of text, and ties visually to the other music tools.
 */

:root{
  --cream:#faf5ec; --paper:#fffdf8; --ink:#221a12; --inksoft:#6f6152;
  --brand:#0e386d; --brand2:#0b7d74; --branddeep:#0a5f57; --line:#e8ddc9;
  --radius:16px;

  /* instrument panel */
  --pnl:#171a21; --pnl2:#1f242e; --pnl3:#2a303c; --pedge:#39414f;
  --ptext:#f0ece3; --pdim:#9aa2b1;
  --gold:#e0b25a; --teal:#4fd1c5; --rose:#f0876a;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  background:var(--cream); color:var(--ink); line-height:1.5;
  display:flex; flex-direction:column; min-height:100%; }

header.site{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px;
  border-bottom:1.5px solid var(--line); background:var(--paper); }
header.site .brand{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:20px; letter-spacing:-.02em;
  color:var(--brand); text-decoration:none; display:flex; align-items:center; gap:8px; }
header.site .brand span{ color:var(--brand2); }
header.site .back{ font-size:13px; font-weight:700; color:var(--brand); text-decoration:none; }

main{ width:100%; max-width:1000px; margin:0 auto; padding:22px 14px calc(36px + env(safe-area-inset-bottom)); }
h1.title{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:29px; text-align:center; margin:2px 0 2px; }
.sub{ text-align:center; color:var(--inksoft); font-size:14.5px; margin-bottom:18px; }
.hidden,[hidden]{ display:none !important; }

/* ------------------------------------------------------------- the panel */
.stage{
  background:linear-gradient(180deg,var(--pnl2),var(--pnl));
  border:1.5px solid #0b0d12; border-radius:18px; padding:14px;
  color:var(--ptext);
  box-shadow:0 24px 54px -28px rgba(10,12,17,.85), inset 0 1px 0 rgba(255,255,255,.06);
}

/* raga selector row */
.navbar{ display:flex; align-items:center; gap:8px; justify-content:center; margin-bottom:10px; }
.arw{ font:inherit; font-size:19px; font-weight:800; cursor:pointer; width:38px; height:38px; flex:none;
  border-radius:10px; background:var(--pnl3); border:1px solid var(--pedge); color:var(--ptext); }
.arw:hover{ background:var(--pedge); }
.navbar select, .navbar .numin{ font:inherit; font-size:15px; font-weight:700; padding:8px 10px; border-radius:10px;
  background:var(--pnl3); border:1px solid var(--pedge); color:var(--ptext); max-width:340px; width:100%; }
.navbar .numin{ width:92px; text-align:center; }

.rname{ text-align:center; margin-bottom:12px; }
.rname .n{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:27px; letter-spacing:-.01em; color:#fff; }
.rname .meta{ font-size:12.5px; color:var(--pdim); margin-top:2px; }
.rname .note{ display:inline-block; margin-top:7px; font-size:12.5px; font-weight:700; color:var(--gold);
  background:rgba(224,178,90,.12); border:1px solid rgba(224,178,90,.34); border-radius:999px; padding:4px 11px; }

/* ---------------------------------------------------------- swara rows */
.scale{ display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.scale .line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.scale .lab{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pdim); min-width:96px; }
.swaras{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; justify-content:center; }

.sw{ font:inherit; cursor:pointer; text-align:center; min-width:56px; padding:7px 9px 6px; border-radius:10px;
  background:var(--pnl3); border:1px solid var(--pedge); color:var(--ptext); line-height:1.15; }
.sw .s{ display:block; font-size:15px; font-weight:800; }
.sw .t{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.05em; color:var(--pdim); margin-top:1px; }
.sw .c{ display:block; font-size:9px; font-weight:700; color:var(--teal); font-variant-numeric:tabular-nums; }
.sw:hover{ background:var(--pedge); }
.sw.lit{ background:var(--gold); border-color:var(--gold); color:#241a06; }
.sw.lit .t{ color:#5e4713; } .sw.lit .c{ color:#3f2f08; }
.sw.achala{ border-color:rgba(79,209,197,.45); }

/* ------------------------------------------------------------- keyboard */
.keys{ position:relative; display:flex; height:112px; margin:0 auto 12px; max-width:560px; touch-action:none; }
.key{ position:relative; cursor:pointer; user-select:none; display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:7px; font-size:10px; font-weight:700; transition:background .05s; }
.key.w{ flex:1; background:#f3efe6; border:1px solid #c9c2b4; border-top:none; border-radius:0 0 6px 6px; color:#6b6355; }
.key.w + .key.w{ border-left:none; }
.key.b{ position:absolute; top:0; width:9.2%; height:62%; z-index:2; background:#232830;
  border:1px solid #12151a; border-top:none; border-radius:0 0 5px 5px; color:#b9c0cc; font-size:9px; padding-bottom:5px; }
.key.on{ background:var(--teal); color:#04302c; border-color:var(--teal); }
.key.b.on{ background:var(--brand2); color:#eafffd; }
.key.play{ background:var(--gold) !important; color:#241a06 !important; }

/* ----------------------------------------------------------- notation */
.notation{ background:rgba(0,0,0,.26); border:1px solid var(--pedge); border-radius:11px; padding:10px 12px;
  margin-bottom:12px; position:relative; }
.notation .line{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:var(--ptext);
  overflow-x:auto; white-space:nowrap; }
.cpn{ position:absolute; top:8px; right:8px; font:inherit; font-size:11px; font-weight:700; cursor:pointer;
  padding:4px 9px; border-radius:8px; background:var(--pnl3); border:1px solid var(--pedge); color:var(--pdim); }
.cpn:hover{ color:var(--ptext); }

/* ----------------------------------------------------------- controls */
.controls{ display:flex; flex-wrap:wrap; gap:9px 14px; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.2); border:1px solid var(--pedge); border-radius:11px; padding:10px 12px; margin-bottom:11px; }
.fld{ display:flex; flex-direction:column; gap:3px; font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pdim); }
.fld select, .fld input[type=range]{ font:inherit; font-size:13px; font-weight:600; text-transform:none; letter-spacing:0; }
.fld select{ padding:6px 8px; border-radius:9px; background:var(--pnl3); border:1px solid var(--pedge); color:var(--ptext); }
.fld input[type=range]{ width:118px; accent-color:var(--gold); }
.toggle{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; font-size:12.5px;
  font-weight:700; color:var(--pdim); padding:7px 11px; border-radius:9px;
  background:var(--pnl3); border:1px solid var(--pedge); }
.toggle input{ accent-color:var(--teal); width:14px; height:14px; }
.toggle.on{ background:rgba(79,209,197,.16); border-color:var(--teal); color:var(--teal); }

/* transport */
.playbtns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:10px; }
.pbtn{ font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; padding:9px 15px; border-radius:10px;
  background:var(--gold); border:1px solid var(--gold); color:#241a06; }
.pbtn:hover{ filter:brightness(1.06); }
.pbtn.ghost{ background:var(--pnl3); border-color:var(--pedge); color:var(--ptext); }
.pbtn.stop{ background:var(--pnl3); border-color:var(--pedge); color:var(--rose); }

.kbdhint{ text-align:center; font-size:11.5px; color:var(--pdim); }
.kbdhint kbd{ font-family:inherit; font-weight:700; background:var(--pnl3); border:1px solid var(--pedge);
  border-radius:5px; padding:1px 5px; font-size:11px; color:var(--ptext); }

.tuningnote{ text-align:center; font-size:11.5px; color:var(--pdim); margin-top:8px; line-height:1.45; }
.tuningnote b{ color:var(--teal); }

.share{ text-align:center; margin-top:11px; }
.share button{ font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:7px 13px; border-radius:9px;
  background:var(--pnl3); border:1px solid var(--pedge); color:var(--pdim); }
.share button:hover{ color:var(--ptext); }
.msg{ text-align:center; font-size:12px; color:var(--teal); font-weight:700; min-height:16px; margin-top:5px; }

/* janya / extra rows */
.janya{ border-top:1px solid var(--pedge); margin-top:11px; padding-top:10px; }
.jl{ font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--pdim);
  text-align:center; margin-bottom:7px; }
.jrow{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.jrow span, .kata{ font-size:12px; font-weight:700; color:var(--ptext);
  background:var(--pnl3); border:1px solid var(--pedge); border-radius:999px; padding:4px 10px; }
.kata{ display:block; text-align:center; margin-top:10px; color:var(--pdim); background:none; border:0; font-size:12px; }

/* chips below the panel */
.chips{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:14px; }
.chip{ font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:6px 12px; border-radius:999px;
  background:var(--paper); border:1.5px solid var(--line); color:var(--brand); }
.chip:hover{ background:#fffaf0; border-color:var(--brand2); }

/* ------------------------------------------------------------ page text */
.panel{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-top:18px; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); }
.step-label{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--branddeep); margin:0 0 10px; }
.panel h2{ font-family:"Fraunces",Georgia,serif; font-size:20px; margin:0 0 8px; }
.panel p{ color:var(--inksoft); font-size:14.5px; margin-bottom:10px; }
.panel a{ color:var(--brand); font-weight:700; }
details{ border-top:1.5px solid var(--line); padding:11px 0; }
details:last-of-type{ border-bottom:1.5px solid var(--line); }
details summary{ cursor:pointer; font-weight:700; font-size:14.5px; }
details p{ margin-top:6px; font-size:14px; }

/* --------------------------------------------- the 72, by chakra (melakarta) */
.chakra{ margin-bottom:14px; }
.chakra:last-child{ margin-bottom:0; }
.chakra h3{ font-family:"Fraunces",Georgia,serif; font-size:15px; font-weight:900; color:var(--brand);
  margin:0 0 6px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.chakra h3 small{ font-family:"Hanken Grotesk",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--inksoft); }
.chakra .row{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.mk{ font:inherit; font-size:12px; font-weight:700; cursor:pointer; text-align:left; line-height:1.25;
  padding:7px 8px; border-radius:9px; background:var(--cream); border:1.5px solid var(--line); color:var(--ink); }
.mk .num{ display:block; font-size:10px; font-weight:800; color:var(--branddeep); }
.mk:hover{ background:#fff; border-color:var(--brand2); }
.mk.sel{ background:var(--brand); border-color:var(--brand); color:#fff; }
.mk.sel .num{ color:#a9c8ea; }

@media (max-width:820px){ .chakra .row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:460px){ .chakra .row{ grid-template-columns:repeat(2,1fr); } }

footer{ text-align:center; color:var(--inksoft); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer a{ color:var(--brand); }

/* ---------------------------------------------------------------- small */
@media (max-width:620px){
  main{ padding:14px 10px calc(30px + env(safe-area-inset-bottom)); }
  h1.title{ font-size:23px; }
  .sub{ font-size:13.5px; margin-bottom:14px; }
  .stage{ padding:11px; border-radius:14px; }
  .rname .n{ font-size:22px; }
  .scale .lab{ min-width:100%; }
  .keys{ height:92px; }
  .sw{ min-width:50px; padding:6px 7px 5px; }
  .fld input[type=range]{ width:96px; }
}