/* Shared app chrome: tokens, rail, buttons used across study pages. */
:root{
  --cream:#F6F2E9; --white:#FFFFFF; --ink:#14150F; --muted:#6B6F66;
  --green:#00802F; --green-deep:#05411F; --green-lit:#3ED67E;
  --mint:#CFE9D5; --butter:#F3DE9B; --sky:#C9DCEF; --line:#E5E0D3;
  --blush:#F0D4C8; --lilac:#D9D4EF; --amber:#C9A227; --rust:#C0503A;
  --r-lg:24px; --r-md:18px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(20,21,15,.05),0 12px 32px -12px rgba(5,65,31,.18);
}

/* Rail nav: icon + label (overrides page-local square-only .nav-i) */
.rail a.nav-i{
  aspect-ratio:auto;
  max-height:none;
  flex-direction:column;
  gap:3px;
  padding:8px 4px 7px;
  min-height:52px;
}
.rail a.nav-i svg{width:24px;height:24px;flex-shrink:0;stroke-width:2;}
.rail a.nav-i:not(.on):not(:hover){color:rgba(255,255,255,.62);}
.rail a.nav-i .nav-lbl{
  font-size:9px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.15;
  text-align:center;
  margin:0 -8px;
  white-space:nowrap;
}
@media(max-width:900px){
  .rail a.nav-i{
    max-height:none;
    min-height:48px;
    padding:6px 2px 5px;
    aspect-ratio:auto;
  }
  .rail a.nav-i .nav-lbl{font-size:8.5px;}
}
.conf-lock{
  font-size:12px;font-weight:600;color:#7A6314;background:var(--butter);
  border-radius:12px;padding:8px 12px;margin:8px 0 0;
}

/* Note kinds: Law A uses one file with CSS filters. Math A loads separate files. */
.note-kind-summary #view-law .law-note .dbox,
.note-kind-summary #view-law .law-note .block{display:none!important;}

/* Learn / Review / Test hubs — same language as Home */
.hl{position:relative;white-space:nowrap;color:var(--green-deep);}
.hl::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.32em;
  background:var(--green-lit);opacity:.42;border-radius:4px;z-index:-1;
  transform:scaleX(0);transform-origin:left;
  animation:hub-sweep .7s .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes hub-sweep{to{transform:scaleX(1);}}
.hub-hero h1{
  font-size:clamp(28px,4vw,42px);letter-spacing:-.045em;line-height:1.05;
}
.hub-hero .sub{
  margin:12px 0 0;font-size:15px;color:var(--muted);font-weight:500;
  max-width:42ch;line-height:1.5;
}

.track-pills{
  display:flex;flex-wrap:wrap;gap:8px;
}
.track-pills button{
  border:0;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:800;letter-spacing:-.02em;
  padding:10px 16px;border-radius:var(--r-pill);
  background:var(--white);color:var(--muted);
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.track-pills button:hover{color:var(--ink);}
.track-pills button.on{
  background:var(--ink);color:var(--white);box-shadow:none;
}

.subj-nav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
}
.subj-nav[hidden]{display:none!important;}
@media(max-width:720px){
  .subj-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .subj-card{padding:11px 10px 12px;}
  .subj-card .top{flex-direction:column;align-items:flex-start;gap:2px;}
  .subj-card .subj-name{font-size:13px;white-space:nowrap;}
}
.subj-card[hidden]{display:none!important;}
.subj-card{
  text-align:left;border:0;cursor:pointer;font-family:inherit;color:inherit;
  border-radius:18px;padding:14px 16px 15px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 2px rgba(20,21,15,.04);
  transition:transform .2s ease,box-shadow .25s ease;
}
.subj-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);}
.subj-card.on{box-shadow:inset 0 0 0 2px var(--green-deep),var(--shadow-card);}
.subj-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.subj-card .subj-name{font-size:14.5px;font-weight:800;letter-spacing:-.03em;}
.subj-card .subj-meta{font-size:11px;font-weight:700;color:rgba(20,21,15,.55);}
.subj-card .cbar{height:7px;border-radius:99px;background:rgba(20,21,15,.1);overflow:hidden;}
.subj-card .cbar i{display:block;height:100%;border-radius:99px;width:0;background:var(--green-deep);}
.subj-card.mint{background:#EAF5EC;}
.subj-card.butter{background:var(--butter);}
.subj-card.lilac{background:var(--lilac);}
.subj-card.sky{background:var(--sky);}
.subj-card.blush{background:var(--blush);}
.subj-card .coming{
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.65);border-radius:var(--r-pill);padding:3px 8px;
}

.syll-panel{
  background:var(--white);border-radius:22px;box-shadow:var(--shadow-card);
  padding:8px 8px 10px;overflow:hidden;
}
.syll-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:16px 16px 12px;flex-wrap:wrap;
}
.syll-head .lbl{color:var(--green);margin-bottom:6px;}
.syll-head h2{font-size:clamp(20px,2.4vw,26px);}
.syll-head .hint{font-size:12.5px;font-weight:600;color:var(--muted);}

.syll-row{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px 12px;
  align-items:center;padding:12px 12px;border-radius:16px;margin-bottom:4px;
  transition:background .18s ease;
  text-decoration:none;color:inherit;
}
.syll-row:hover{background:var(--cream);}
.syll-row .n{
  width:36px;height:36px;border-radius:11px;
  background:var(--mint);color:var(--green-deep);
  font-size:12px;font-weight:800;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;
}
.syll-row[data-tone="butter"] .n{background:var(--butter);color:#7A6314;}
.syll-row[data-tone="lilac"] .n{background:var(--lilac);color:#4A3F86;}
.syll-row[data-tone="sky"] .n{background:var(--sky);color:#2F5678;}
.syll-row[data-tone="blush"] .n{background:var(--blush);color:#8C3B23;}
.syll-row .nm{
  font-size:14.5px;font-weight:800;letter-spacing:-.025em;line-height:1.25;
  display:block;
}
.syll-row .meta{font-size:12px;font-weight:600;color:var(--muted);margin-top:2px;}
.syll-row .row-end{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.go-ch{
  font-size:12.5px;font-weight:800;color:var(--green-deep);
  background:var(--mint);padding:8px 12px;border-radius:var(--r-pill);white-space:nowrap;
}
a.syll-row:hover .go-ch{background:#b7dcc0;}
.status-pill{
  border:0;font-family:inherit;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:7px 10px;border-radius:var(--r-pill);line-height:1;
  background:var(--cream);color:var(--muted);
}
.status-pill.mastered{background:var(--green-deep);color:var(--white);}
.status-pill.solid{background:var(--mint);color:var(--green-deep);}
.status-pill.shaky{background:var(--butter);color:#7A6314;}
.status-pill.weak{background:var(--blush);color:#8C3B23;}
.status-pill.new{background:var(--cream);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);}
@media(max-width:720px){
  .syll-row{grid-template-columns:32px minmax(0,1fr);}
  .syll-row .n{width:32px;height:32px;border-radius:10px;}
  .syll-row .row-end{grid-column:2 / -1;justify-content:flex-start;}
}

.ch-list{display:flex;flex-direction:column;margin-top:4px;padding:0 6px 6px;}
.ch-row{
  display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:8px 12px;
  align-items:center;padding:12px 8px;border-radius:14px;transition:.15s;
  text-decoration:none;color:inherit;
}
.ch-row:hover{background:var(--cream);}
.ch-row .dot{width:9px;height:9px;border-radius:50%;background:var(--line);}
.ch-row .dot.mastered{background:var(--green-deep);}
.ch-row .dot.solid{background:var(--green);}
.ch-row .dot.shaky{background:var(--amber);}
.ch-row .dot.weak{background:var(--rust);}
.ch-row .dot.new{background:var(--line);}
.ch-row .nm{font-size:14px;font-weight:700;letter-spacing:-.02em;}
.ch-row .meta{font-size:12px;font-weight:600;color:var(--muted);}
.ch-row .go{font-size:12px;font-weight:800;color:var(--green-deep);background:var(--mint);padding:6px 10px;border-radius:var(--r-pill);}

.topic-tools{display:flex;flex-wrap:wrap;gap:4px;}
.topic-tools a{
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 8px;border-radius:var(--r-pill);background:var(--cream);color:var(--muted);
}
.topic-tools a:hover{background:var(--mint);color:var(--green-deep);}

.focus-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 4px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;
}
.focus-row:last-child{border-bottom:0;}
.focus-row a{color:var(--green-deep);font-weight:800;font-size:12px;background:var(--mint);padding:6px 10px;border-radius:var(--r-pill);}