/* Study material pages (study-<chapter>.html), made from the Physics Circle Master Book HTML.
   The book's own classes are kept (ctitle, one, sec-t, pts, fbar, fig, clock, pq …) and restyled for the web,
   with the book palette as tokens so light and dark both work. */
:root {
  --b-lav: #ece4fc; --b-lav2: #f6f2fe; --b-lavb: #b89ce8; --b-deep: #3b2483; --b-deep-bg: #3b2483; --b-purple: #6f4fc4;
  --b-yel: #fff1a6; --b-yel2: #fff8d6; --b-yelb: #f0cf4a; --b-yel-ink: #8a6a00; --b-line: #e7e1f5;
}
:root[data-theme="dark"] {
  --b-lav: #2c2540; --b-lav2: #24202e; --b-lavb: #6d5aa6; --b-deep: #c9b8ff; --b-deep-bg: #4b3796; --b-purple: #b9a3ff;
  --b-yel: #4a4120; --b-yel2: #2b2719; --b-yelb: #a8902f; --b-yel-ink: #e3c76b; --b-line: #37343e;
}

.st-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.st-stats li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 980px; background: var(--surface); color: var(--muted); font-size: 13.5px; }
.st-stats b { color: var(--ink); font-weight: 700; }

/* layout: concept sidebar on wide screens (same look as the PYQ topic sidebar) */
.st-main { padding-bottom: 40px; }
@media (min-width: 1080px) {
  .st-main { max-width: 1140px; display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 36px; align-items: start; }
  html.js .st-side { display: block; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; margin-top: 22px;
    padding: 18px 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); scrollbar-width: thin; }
  body:has(.st-side) .page-head, body:has(.st-side) .foot { max-width: 1140px; padding-left: calc(16px + 250px + 36px); }
  .st-chips { display: none !important; }
}
.st-side .ts-list a { display: flex; gap: 8px; padding: 7px 10px; border-radius: 10px; color: var(--muted); font: 500 14px/1.35 var(--sys); text-decoration: none; }
.st-side .ts-list a em { flex: none; min-width: 20px; font-style: normal; font-weight: 700; color: var(--b-purple); font-size: 12.5px; padding-top: 1px; }
.st-side .ts-list a:hover { color: var(--ink); background: color-mix(in srgb, var(--line) 35%, transparent); }
.st-side .ts-list a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* phones: a sticky strip of concept chips */
.st-chips { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; margin: 14px -16px 0; padding: 8px 16px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.st-chips::-webkit-scrollbar { display: none; }
.st-chips a { flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 980px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.st-chips a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* one concept = one card */
.concept { margin: 22px 0 0; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); scroll-margin-top: 64px; }
@media (max-width: 600px) { .concept { padding: 16px 14px 14px; border-radius: 16px; } }
.ctitle { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--b-lav); }
.ctitle .big { font-size: 42px; font-weight: 800; line-height: .85; color: var(--b-lavb); }
.ctitle .k { font-size: 11px; letter-spacing: .2em; font-weight: 800; color: var(--b-purple); }
.ctitle h2 { margin: 2px 0 0; font-size: clamp(20px, 2.6vw, 25px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }

.theory { font-size: 16px; line-height: 1.55; }
.theory b { font-weight: 700; }
.one { margin: 0 0 10px; padding: 10px 14px; border-left: 5px solid var(--b-yelb); border-radius: 0 12px 12px 0; background: var(--b-yel2); }
.lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--b-yel-ink); }
.sec-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 22px 0 10px; }
.sec-t .n { padding: 2px 9px; border-radius: 8px; background: var(--b-deep-bg); color: #fff; font-size: 11px; letter-spacing: .14em; font-weight: 700; }
.sec-t h2 { margin: 0; font-size: 18.5px; font-weight: 800; letter-spacing: -.01em; }
.sec-t .secno { color: var(--b-purple); margin-right: 4px; }
.sec-t .line { flex: 1; min-width: 30px; height: 2px; background: repeating-linear-gradient(90deg, var(--b-lavb) 0 6px, transparent 6px 11px); opacity: .7; }
.pts { margin: 6px 0; padding-left: 22px; }
.pts li { margin: 4px 0; }
.pts li::marker { color: var(--b-purple); font-weight: 700; }
.fbar { position: relative; margin: 10px 0; padding: 10px 16px; border-radius: 12px; background: var(--b-lav); text-align: center; font-size: 19px; font-weight: 700; overflow-x: auto; }
.fbar[data-eq]::after { content: attr(data-eq); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 11.5px; font-weight: 600; }
@media (max-width: 600px) { .fbar { font-size: 17px; padding: 10px 12px 18px; } .fbar[data-eq]::after { top: auto; bottom: 3px; transform: none; } }
.row { display: flex; gap: 16px; align-items: flex-start; }
.row:has(> .fig:first-child) { flex-direction: row-reverse; }
.grow { flex: 1; min-width: 0; }
@media (max-width: 700px) { .row, .row:has(> .fig:first-child) { flex-direction: column; } .row > .fig { align-self: center; } }
.fig { max-width: 100%; margin: 10px auto; }
.fig svg, .qfig svg, .ico svg, .map svg { display: block; width: 100%; height: auto; }
.fig .cap { margin-top: 4px; color: var(--muted); font-size: 13px; text-align: center; }
.qfig { max-width: 200px; margin: 8px auto; }
/* diagrams are drawn in the book's ink on white: flip them for dark mode, colours keep their hue */
:root[data-theme="dark"] :is(.fig, .qfig, .ico, .map) svg { filter: invert(.9) hue-rotate(180deg); }
.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 8px 0; }
.ico { padding: 8px; border: 1px solid var(--b-line); border-radius: 12px; text-align: center; font-size: 13px; color: var(--muted); }
.clock { width: 100%; margin: 10px 0; border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--b-lavb); border-radius: 12px; overflow: hidden; font-size: 15px; }
.clock th { padding: 6px 10px; background: var(--b-lav); color: var(--b-purple); font-size: 11.5px; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.clock td { padding: 6px 10px; border-top: 1px dashed var(--b-line); }
.clock td:last-child { font-weight: 800; color: var(--b-deep); }
.tcols > .clock, .theory .clock { display: table; }
@media (max-width: 600px) { .clock { font-size: 13.5px; } .clock td, .clock th { padding: 5px 7px; } }
/* JEE · NEET Corner */
.bx .n { background: #d9467a; }
.bxi { margin: 8px 0; padding: 10px 14px; border: 1.5px dashed var(--b-lavb); border-radius: 14px; }
.bxh { font-weight: 800; color: var(--b-purple); margin-bottom: 4px; }

/* inline maths written in HTML: fractions and overbars */
.fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 3px; line-height: 1.1; }
.fr > span:last-child { border-top: 1.5px solid currentColor; padding-top: 1px; }
.ov { border-top: 1.4px solid currentColor; padding-top: 1px; }

/* solved examples */
.sx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 26px 0 10px; padding-top: 16px; border-top: 2px solid var(--b-lav); }
.sx-head h3 { margin: 0; font-size: 20px; font-weight: 800; }
.sx-head span { color: var(--muted); font-size: 13.5px; }
.sx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 900px) { .sx-list { grid-template-columns: 1fr; } }
.pq { padding: 12px 14px; border: 1px solid var(--b-line); border-radius: 14px; background: var(--bg); font-size: 15px; line-height: 1.5; }
.pqh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.pqn { padding: 1px 8px; border-radius: 7px; background: var(--b-deep-bg); color: #fff; font-size: 10.5px; letter-spacing: .12em; font-weight: 800; }
.pqtag { color: var(--muted); font-size: 12.5px; }
.pqt { font-weight: 500; }
.qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 8px 0 0; padding-left: 4px; counter-reset: opt; }
.qopts.two { grid-template-columns: 1fr; }
.qopts i { font-size: 0; }
.qopts i::before { counter-increment: opt; content: "(" counter(opt, lower-alpha) ")"; margin-right: 6px; font-size: 14px; font-style: normal; font-weight: 700; color: var(--b-purple); }
.sol { margin-top: 10px; }
.sol > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 980px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; }
.sol > summary::-webkit-details-marker { display: none; }
.sol > summary::after { content: "▾"; font-size: 11px; }
.sol[open] > summary::after { content: "▴"; }
.sol[open] > summary { margin-bottom: 8px; }
.pq .s { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 8px 12px; border-radius: 10px; background: var(--b-lav2); font-size: 14.5px; }
.pq .s .st { display: contents; }
.pq .s .t { padding-top: 3px; font-size: 10.5px; letter-spacing: .12em; font-weight: 800; color: var(--b-purple); white-space: nowrap; }
.pqa { margin-top: 6px; text-align: right; font-size: 14px; }
.pqa b { padding: 0 6px; border-radius: 4px; background: var(--b-yel); }

/* practise link + previous / next concept */
.st-practise { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.st-practise b { font-size: 15.5px; }
.st-practise b::after { content: " ›"; }
.st-practise small { color: var(--muted); font-size: 13px; }
.st-pn { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 13.5px; }
.st-pn a { max-width: 48%; color: var(--accent); text-decoration: none; }
.st-pn a:hover { text-decoration: underline; }
.st-next { text-align: right; margin-left: auto; }

/* Exam-Day Card */
.xcard .sec-t:first-child { margin-top: 0; }
.map { position: relative; width: 100% !important; max-width: 720px; margin: 0 auto; }
.mmb { position: absolute; padding: 4px 8px; border: 1.5px solid var(--b-lavb); border-radius: 10px; background: var(--surface); font-size: 12.5px; line-height: 1.25; }
.mmb .f { font-weight: 700; }
.mmb .c { color: var(--muted); font-size: 11px; }
@media (max-width: 700px) {
  .map svg { display: none; }
  .map { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mmb { position: static; }
}
.fsheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .fsheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fsheet { grid-template-columns: 1fr; } }
.fcard { padding: 10px 14px; border-radius: 14px; background: var(--b-lav2); font-size: 15px; }
.fcard .lbl { color: var(--b-purple); }
.fcard p { margin: 3px 0; font-weight: 600; }
.mvf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mvf > div { padding: 10px 14px; border-radius: 14px; }
.mvf .m { background: var(--bad-soft); }
.mvf .f { background: var(--good-soft); }
.mvf .h { font-size: 11.5px; letter-spacing: .14em; font-weight: 800; margin-bottom: 4px; }
.mvf .m .h { color: var(--bad); }
.mvf .f .h { color: var(--good); }
.mvf p { margin: 4px 0; }
@media (max-width: 560px) { .mvf { grid-template-columns: 1fr; } }

/* textbook-size sub/superscripts (the browser default reads as "I cm") */
.st-body sub, .st-body sup { font-size: .68em; line-height: 0; position: relative; vertical-align: baseline; }
.st-body sub { bottom: -.28em; }
.st-body sup { top: -.5em; }
/* style.css uses .fbar for the PYQ filter bar (flex + gap); book formula boxes are plain blocks */
.st-body .fbar { display: block; gap: 0; align-items: initial; }

/* ===== match the printed Master Book (its final style rounds), scaled for screens ===== */
.theory { font-size: 16px; line-height: 1.6; }
/* section heads: purple "7.1.1 Title" with a thin rule under it; no pill, no dashes */
.theory .sec-t { display: block; margin: 26px 0 10px; padding-bottom: 4px; border-bottom: 1.5px solid var(--b-deep); }
.theory .sec-t .n, .theory .sec-t .line { display: none; }
.theory .sec-t h2 { font-size: 19px; color: var(--b-deep); }
.theory .secno { color: var(--b-purple); margin-right: 6px; }
/* points: purple dots */
.theory .pts { list-style: none; margin: 4px 0 10px; padding-left: 20px; }
.theory .pts li { position: relative; margin: 4px 0; }
.theory .pts li::before { content: ""; position: absolute; left: -15px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--b-purple); }
/* formula boxes: sized to the formula, centred, dotted border */
.st-body .fbar { display: table; margin: 10px auto; padding: 5px 18px; max-width: 100%; border: 1.6px dotted var(--b-deep); border-radius: 10px;
  background: var(--surface); font-size: 17.5px; font-weight: 600; line-height: 1.6; text-align: center; }
.st-body .fbar::after { content: none; }
.st-body .fbar .fr { font-size: .95em; }
@media (max-width: 600px) { .st-body .fbar { font-size: 16px; padding: 5px 12px; } }
.one { border-radius: 0; font-size: 16px; }
/* JEE · NEET Corner in the book's teal */
.theory .sec-t.bx { border-bottom-color: #0f766e; margin-top: 30px; }
.theory .sec-t.bx .n { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 6px; background: #0f766e; color: #fff; font-size: 10.5px; letter-spacing: .14em; }
.theory .sec-t.bx h2 { color: #0f766e; }
.bxi { margin: 0; padding: 8px 14px 10px; border: 0; border-left: 3px solid #0f766e; border-radius: 0; background: #eef8f6; }
.bxi + .bxi { border-top: 1px dashed #b7dcd5; }
.bxh { color: #0f766e; font-size: 16px; }
.bxi .pts li::before { background: #0f766e; }
.bxi .fbar { border-color: #0f766e; }
:root[data-theme="dark"] .bxi { background: #16282a; }
:root[data-theme="dark"] .bxi + .bxi { border-top-color: #2d4d4b; }
:root[data-theme="dark"] :is(.theory .sec-t.bx h2, .bxh) { color: #5fc9b8; }
/* standard-body icons */
.icons { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ico { padding: 6px 4px 8px; border: 0; background: var(--b-lav2); color: var(--b-deep); font-weight: 700; }
.ico svg { height: 70px; }
@media (max-width: 600px) { .icons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* diagrams: the converter turns the book's mm widths into pixels */
.theory .fig { margin: 12px auto 14px; }
.fig .cap { font-size: 13px; line-height: 1.35; }
/* tables: plain weight like the book */
.clock td, .clock td:last-child { font-weight: 400; color: var(--ink); }
.clock td:has(.fr) { white-space: nowrap; }

/* ===== maths ===== */
.fr { margin: 0 2px; line-height: 1.15; }
.fr > span { padding: 0 2px; }
.fr > span:last-child { border-top-width: 1.4px; padding-top: 2px; }
.ov { display: inline-block; border-top-width: 1.4px; padding: 2px 2px 0 1px; }
.rad { display: inline-block; margin-right: -1px; }
.rad:has(+ .ov .fr) { font-size: 1.75em; line-height: 1; vertical-align: -.2em; transform: scaleX(.85); transform-origin: right; }
.bp { display: inline-block; font-size: 1.6em; line-height: 1; vertical-align: -.12em; font-weight: 300; transform: scaleX(.75); }

/* Exam-Day Card mind map boxes, as in the book */
.mmb { width: 28.7%; height: 24.8%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--b-lav2); }
@media (max-width: 700px) { .mmb { width: auto; height: auto; padding: 8px; } }

/* arrangement like the book's columns: on wide screens a stand-alone diagram sits on the right and the
   formulas / points flow beside it; each new section starts below it */
.theory, .theory > .tcols { display: flow-root; }
@media (min-width: 900px) {
  .tcols > .fig { float: right; clear: right; max-width: 44%; margin: 4px 0 14px 28px; }
  .tcols > .sec-t, .tcols > .clock, .tcols > .icons, .tcols > .row, .tcols > .one { clear: both; }
  .tcols > .pts { overflow: hidden; }              /* bullets stay clear of the floated diagram */
  .tcols > .fbar { margin-left: auto; margin-right: auto; }
}
/* phones: a wide table scrolls inside its own box instead of poking out of the card */
@media (max-width: 600px) { .theory .clock { display: block; overflow-x: auto; } .theory .clock td:has(.fr) { white-space: normal; } }

/* ===== book helpers used by other chapters ===== */
.vv { font-weight: 700; font-style: normal; }                                   /* vectors in bold */
.vec { position: relative; display: inline-block; padding-top: .14em; }        /* arrow over a letter */
.vec::before { content: "→"; position: absolute; left: 50%; top: -.42em; transform: translateX(-50%); font-size: .72em; font-weight: 500; }
.prop, .pp { font-family: "STIX Two Math", "Cambria Math", "Times New Roman", serif; font-size: 1.15em; line-height: 1; }   /* ∝ */
.nu { display: inline-flex; flex-direction: column; align-items: flex-end; vertical-align: middle; margin-right: 1px; font-size: .62em; line-height: 1.02; }  /* ᴬ_Z X */
.fr .nu { font-size: .8em; }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; justify-items: center; margin: 10px 0 14px; clear: both; }
.cases .fig { margin: 0; }
@media (max-width: 700px) { .cases { grid-template-columns: 1fr; } }
.gsyms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 12px; clear: both; }
.gs { padding: 8px; border-radius: 12px; background: var(--b-lav2); text-align: center; }
.gs svg { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto 4px; }
:root[data-theme="dark"] .gs svg { filter: invert(.9) hue-rotate(180deg); }
.gsn { font-size: 13px; line-height: 1.3; }
.pgbrk, .colbrk { display: none; }
.st-body .ftr { display: none; }