/* studysheet.css — shared linear "study sheet" template for mind-map pages.
 * Replaces the radial hub-and-spoke poster (mindmap.css) with a normal,
 * top-to-bottom reading flow: a student reads it start to finish like a
 * lesson recap, not a poster they have to visually navigate. No fixed
 * canvas, no scaling tricks needed — it's just a responsive web page.
 *
 * Each topic is a numbered section: a heading, then real explanatory
 * sentences (not keyword fragments), with equation/example/mistake boxes
 * pulled out for scanning. Section accent colours reuse the same --mm-cN
 * palette as the radial template for visual continuity across the site.
 */
:root{
  --ss-bg:#f4f1ea; --ss-ink:#241f18; --ss-ink-dim:#5b5346;
  --ss-c1:#0e7490; --ss-c2:#b91c1c; --ss-c3:#6d28d9;
  --ss-c4:#b45309; --ss-c5:#15803d; --ss-c6:#1e3a8a;
  --ss-c7:#be185d; --ss-c8:#4338ca;
}
.ss-body{font-family:'Nirmala UI','Latha','Noto Sans Tamil','Segoe UI',sans-serif;background:var(--ss-bg);color:var(--ss-ink);margin:0;padding:22px 16px 60px}
.ss-body *{box-sizing:border-box}
.sr-only{position:absolute;left:-9999px}

.ss-wrap{max-width:800px;margin:0 auto}

.ss-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.ss-toolbar h1{font-size:14px;color:var(--ss-ink-dim);letter-spacing:.5px;text-transform:uppercase;opacity:.85;font-weight:600;margin:0}
.ss-btn{background:var(--ss-ink);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;cursor:pointer;font-family:inherit}
.ss-btn:hover{background:#3f3527}

.mm-sibnav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-2px 0 16px;padding-bottom:10px;border-bottom:1px solid rgba(36,31,24,.12)}
.mm-sibnav a{font-size:12.5px;font-weight:600;text-decoration:none;color:var(--ss-ink);background:#fff;border:1.5px solid rgba(36,31,24,.18);border-radius:99px;padding:5px 12px;transition:background .12s,border-color .12s}
.mm-sibnav a:hover{border-color:var(--ss-ink);background:#efe9dc}
.mm-sibnav a.current{background:var(--ss-ink);color:#fff;border-color:var(--ss-ink)}
.mm-sibnav a.home{background:none;border-style:dashed;opacity:.8}
.mm-sibnav .sep{width:1px;height:16px;background:rgba(36,31,24,.15);margin:0 2px}

.ss-hero{background:#fff;border:2.5px solid var(--ss-ink);border-radius:16px;padding:22px 26px;margin-bottom:18px;text-align:center;box-shadow:0 6px 18px rgba(36,31,24,.08)}
.ss-hero .ic{font-size:34px;margin-bottom:4px}
.ss-hero .ta{font-size:22px;font-weight:800}
.ss-hero .en{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;opacity:.65;margin-top:4px}

.ss-sec{background:#fff;border-radius:14px;border:1.5px solid rgba(36,31,24,.10);border-left:6px solid var(--c);box-shadow:0 4px 14px rgba(36,31,24,.06);padding:18px 22px 20px;margin-bottom:16px}
.ss-sec.c1{--c:var(--ss-c1)} .ss-sec.c2{--c:var(--ss-c2)} .ss-sec.c3{--c:var(--ss-c3)} .ss-sec.c4{--c:var(--ss-c4)}
.ss-sec.c5{--c:var(--ss-c5)} .ss-sec.c6{--c:var(--ss-c6)} .ss-sec.c7{--c:var(--ss-c7)} .ss-sec.c8{--c:var(--ss-c8)}
.ss-sec h2{display:flex;align-items:center;gap:9px;font-size:18px;margin:0 0 4px;color:var(--c)}
.ss-sec h2 .no{background:var(--c);color:#fff;font-size:13px;font-weight:800;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ss-sec p{font-size:15px;line-height:1.85;margin:10px 0}
.ss-sec p:first-of-type{margin-top:12px}
.ss-sec b{color:var(--ss-ink)}

.ss-eq{background:#f4f1ea;border-radius:10px;padding:12px 16px;margin:12px 0;font-family:'Cambria Math',serif;font-size:15px;line-height:1.7;border:1px solid rgba(36,31,24,.10)}
.ss-example{background:rgba(14,116,144,.06);border-left:3px solid var(--ss-c1);border-radius:0 10px 10px 0;padding:12px 16px;margin:12px 0;font-size:14.5px;line-height:1.75}
.ss-example .lbl{font-weight:800;color:var(--ss-c1);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.ss-mistake{background:rgba(185,28,28,.06);border-left:3px solid var(--ss-c2);border-radius:0 10px 10px 0;padding:12px 16px;margin:12px 0;font-size:14.5px;line-height:1.75}
.ss-mistake .lbl{font-weight:800;color:var(--ss-c2);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.ss-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
.ss-table th,.ss-table td{padding:7px 10px;text-align:left;border-bottom:1px solid rgba(36,31,24,.10)}
.ss-table th{color:var(--ss-ink-dim);font-size:12.5px;text-transform:uppercase;letter-spacing:.3px}

.ss-foot{text-align:center;font-size:11.5px;color:var(--ss-ink-dim);margin-top:26px;display:flex;justify-content:space-between}

@media print{
  .ss-toolbar,.mm-sibnav{display:none}
  .ss-body{background:#fff;padding:0}
  .ss-sec{box-shadow:none;border:1px solid #ccc;border-left:5px solid var(--c);break-inside:avoid}
  .ss-hero{box-shadow:none}
  a{color:inherit;text-decoration:none}
}
@media (max-width:600px){
  .ss-hero .ta{font-size:19px}
  .ss-sec{padding:15px 16px 17px}
  .ss-sec h2{font-size:16.5px}
}