/* Formula cards, shared by the Formula Sheet, the Formula Booklets and the Exam Timer (games/formula-data.js). */
:root{ --fc-navy:#002060; --fc-red:#C8102E; }
.card{
  container-type:inline-size; position:relative; background:#fff; border:1px solid var(--cl); border-radius:10px;
  display:flex; flex-direction:column; overflow:hidden; break-inside:avoid; page-break-inside:avoid;
  --ink-l:var(--fc-navy); --h:var(--fc-red);
}
.card::before{ content:""; display:block; height:1.6cqi; min-height:3px; background:var(--c); }
.card.drag{ outline:3px solid var(--fc-navy); opacity:.85; }
@media (hover:hover){ .grid.sortable .card{ cursor:grab; } }
.ch{ display:flex; align-items:baseline; justify-content:space-between; gap:2cqi; padding:2.6cqi 4.5cqi 0; }
.nm{ font-weight:800; color:var(--fc-navy); font-size:6cqi; line-height:1.15; }
.tag{ font-size:3.9cqi; font-weight:800; text-transform:uppercase; letter-spacing:.3cqi; color:var(--c); background:var(--f2); border-radius:99px; padding:.5cqi 2.4cqi; white-space:nowrap; }
.dg{ display:block; width:100%; height:auto; padding:1cqi 3cqi 0; }
.fm{ margin:1cqi 4cqi 0; padding:2cqi 2cqi; background:var(--f2); border-radius:2.4cqi; display:flex; flex-direction:column; align-items:center; gap:1cqi; }
.fx{ font-size:calc(var(--k, 1) * 8cqi); color:var(--fc-navy); white-space:nowrap; max-width:100%; line-height:1.2; }
.fx + .fx{ margin-top:.2em; }
.fx .katex{ display:inline-block; }
.fx .katex{ font-size:1em; }
.wh{ margin:2cqi 4.5cqi 3cqi; font-size:4.8cqi; line-height:1.3; color:#3c475c; text-align:center; }
.wh.say{ font-weight:600; color:#2b3548; }
.wh i{ font-family:"Cambria Math", Cambria, "Times New Roman", serif; font-size:1.08em; color:var(--fc-navy); }
.sheet.no-names .ch{ display:none; }
.sheet.no-names .card .dg{ padding-top:3cqi; }
.sheet.no-where .wh{ display:none; }
.sheet.no-where .fm{ margin-bottom:4cqi; }
.sheet.no-labels .dg .lb{ display:none; }
/* a 3D shape with its volume and its surface area on one card */
.fl{ font-size:3.6cqi; font-weight:800; text-transform:uppercase; letter-spacing:.3cqi; color:var(--c); line-height:1.1; }
.card.both .fm-s{ margin-top:1.6cqi; --c:#6b48b8; --f2:#f5f1fd; }
.sheet.no-where .card.both .fm:not(.fm-s){ margin-bottom:0; }
.sheet.bw .card.both .fm-s{ --c:#222; --f2:#fff; }

/* the families: colour, and black and white (print-friendly ink) */
.card[data-fam="area"]{ --c:#2f5fb3; --cl:#d3dff3; --f:#dce8fb; --f2:#eef4fd; --f3:#c3d6f4; --x:#a9c4ef; }
.card[data-fam="perim"]{ --c:#1d8659; --cl:#cfe9dc; --f:#e0f3ea; --f2:#eef8f3; --f3:#c6e7d6; --x:#a7d8bf; }
.card[data-fam="vol"]{ --c:#c0641a; --cl:#f3dcc6; --f:#fde8d3; --f2:#fef4ea; --f3:#f7d3b0; --x:#f2c08f; }
.card[data-fam="surf"]{ --c:#6b48b8; --cl:#e0d6f3; --f:#ece4fb; --f2:#f5f1fd; --f3:#d9cbf5; --x:#c4b0ef; }
.card[data-fam="rad"]{ --c:#167f86; --cl:#cbe7e8; --f:#dcf1f2; --f2:#edf8f8; --f3:#c2e4e6; --x:#9fd3d6; }
.card[data-fam="circ"]{ --c:#b8336a; --cl:#f1d3e0; --f:#fbe3ed; --f2:#fdf1f6; --f3:#f5c9db; --x:#efb0ca; }
.card[data-fam="gcse"]{ --c:#9a6a00; --cl:#efe0bd; --f:#fbf0d4; --f2:#fdf8ea; --f3:#f3e0b0; --x:#ecd08a; }
.card[data-fam="pure"]{ --c:#4338ca; --cl:#d9d7f5; --f:#e6e4fb; --f2:#f3f2fd; --f3:#d3cff7; --x:#bab4f1; }
.card[data-fam="stats"]{ --c:#4b5d73; --cl:#d7dde5; --f:#e7ebf0; --f2:#f3f5f8; --f3:#d5dce5; --x:#bcc7d4; }
.card[data-fam="mech"]{ --c:#8a4b1f; --cl:#ead8c8; --f:#f6e8dc; --f2:#fbf4ee; --f3:#ecd6c2; --x:#ddb99a; }
/* a card with no diagram: the formulae sit at the top */
.card.nodg .fm{ margin-top:3cqi; }
.fx.sm{ font-size:calc(var(--k, 1) * 6.6cqi); }
.sheet.bw .card{ --c:#222; --cl:#9a9a9a; --f:#fff; --f2:#fff; --f3:#efefef; --x:#e2e2e2; --ink-l:#000; --h:#222; }
.sheet.bw .stitle, .sheet.bw .nm, .sheet.bw .fx{ color:#000; }
.sheet.bw .stitle::after{ background:#000; }
.sheet.bw .fm{ border:1px solid #bbb; }
.sheet.bw .tag{ border:1px solid #888; }
.sheet.bw .wh, .sheet.bw .wh i{ color:#000; }

/* the diagrams (viewBox 220 × 150) */
.dg .fc{ fill:var(--f); stroke:none; }
.dg .f2{ fill:var(--f2); } .dg .f3{ fill:var(--f3); } .dg .fxs{ fill:var(--x); }
.dg .sh{ fill:var(--f); stroke:var(--c); stroke-width:2; stroke-linejoin:round; }
.dg .ln{ fill:none; stroke:var(--c); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.dg .ms{ fill:none; stroke:var(--c); stroke-width:4.2; stroke-linejoin:round; stroke-linecap:round; }
.dg .hd{ fill:none; stroke:var(--c); stroke-width:1.4; stroke-dasharray:5 4; opacity:.8; }
.dg .ht{ fill:none; stroke:var(--h); stroke-width:1.6; stroke-dasharray:5 3.5; }
.dg .ra{ fill:none; stroke:var(--h); stroke-width:1.3; }
.dg .rk{ fill:none; stroke:var(--c); stroke-width:1.3; }
.dg .mk{ fill:none; stroke:var(--c); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.dg .faint{ fill:none; stroke:var(--c); stroke-width:1.2; stroke-dasharray:2.5 3.5; opacity:.55; }
.dg .dot{ fill:var(--c); }
.dg .lb{ font-family:"Cambria Math", Cambria, "Times New Roman", "DejaVu Serif", serif; font-style:italic; font-size:16.5px; fill:var(--ink-l); text-anchor:middle; dominant-baseline:central; }
.dg .lb.up{ font-style:normal; }
.dg .lb.st{ text-anchor:start; } .dg .lb.en{ text-anchor:end; }
.dg .lb .i{ font-style:italic; }

/* statistical tables: a card the full width of the grid */
.grid .card.wide{ grid-column:1 / -1; }
.card.wide::before{ height:.5cqi; }
.card.wide .ch{ padding:1cqi 1.6cqi 0; }
.card.wide .nm{ font-size:2.1cqi; }
.card.wide .tag{ font-size:1.25cqi; padding:.2cqi 1cqi; letter-spacing:.1cqi; }
.card.wide .wh{ font-size:1.55cqi; margin:.8cqi 1.6cqi 1.2cqi; text-align:left; }
.stw{ padding:.8cqi 1.6cqi 0; overflow-x:auto; }
.st{ border-collapse:collapse; width:100%; font-size:1.45cqi; font-variant-numeric:tabular-nums; color:#1a2333; }
.st th, .st td{ padding:.18cqi .5cqi; text-align:right; white-space:nowrap; border-bottom:1px solid #eef1f6; }
.st thead th{ background:var(--f2); color:var(--fc-navy); font-weight:700; border-bottom:2px solid var(--cl); text-align:center; }
.st tbody th{ color:var(--fc-navy); font-weight:700; }
.st tbody tr.st-first td, .st tbody tr.st-first th{ border-top:2px solid var(--cl); }
.st th.st-n{ text-align:left; }
.st i{ font-family:"Cambria Math", Cambria, "Times New Roman", serif; }
.st.st-narrow{ width:auto; margin:0 auto; font-size:1.8cqi; }
.st.st-narrow td{ padding:.3cqi 2.4cqi; }
.st.st-random td{ text-align:center; padding:.25cqi .2cqi; }
.st.st-random td.st-gap{ padding-right:1.6cqi; }
.st-two{ display:grid; grid-template-columns:1fr 1fr; gap:2cqi; }
.st-cap{ margin:.6cqi 0 0; font-size:1.4cqi; font-weight:700; color:var(--c); }
.st-none{ color:#a33; }
.sheet.bw .st thead th{ background:#fff; color:#000; border-bottom-color:#000; }
.sheet.bw .st, .sheet.bw .st tbody th{ color:#000; }

/* a whole document (the Formula Booklets page and the Exam Timer) */
.doc-intro{ font-size:.95rem; color:#3c475c; margin:0 0 12px; line-height:1.45; }
.doc-sec{ margin:0 0 26px; }
.doc-h{ display:flex; align-items:center; gap:10px; margin:6px 0 10px; font-size:1.25rem; color:var(--fc-navy); }
.doc-num{ display:inline-flex; align-items:center; justify-content:center; width:1.7em; height:1.7em; border-radius:8px; background:var(--fc-navy); color:#fff; font-size:.9em; }
.doc-p{ margin:14px 0 8px; font-size:.82rem; text-transform:uppercase; letter-spacing:.6px; color:#5a6478; }
.doc-note{ font-size:.88rem; color:#5a6478; margin:6px 0 10px; }
.doc-grid{ display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); gap:12px; }

/* a long page of cards (fitLazy): the browser skips laying out cards that are off the screen */
.lazy .card{ content-visibility:auto; contain-intrinsic-size:auto 300px; }
.lazy .card.wide{ contain-intrinsic-size:auto 700px; }
@media print{ .lazy .card{ content-visibility:visible; } }
.doc-title{ margin:0 0 10px; font-size:1.35rem; font-weight:800; color:var(--fc-navy); }

/* a ✕ on a card (cardHTML(id, { remove: true })) */
.card-x{ flex:none; align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; width:max(20px, 6.4cqi); height:max(20px, 6.4cqi); margin:-.6cqi -2cqi 0 0; padding:0; border-radius:50%; border:1px solid #d7deea; background:#fff; color:var(--fc-red); font:inherit; font-weight:800; font-size:max(11px, 3.4cqi); line-height:1; cursor:pointer; }
.card-x:hover, .card-x:focus-visible{ background:var(--fc-red); border-color:var(--fc-red); color:#fff; }
.card.wide .card-x{ width:max(20px, 2.2cqi); height:max(20px, 2.2cqi); font-size:max(11px, 1.1cqi); margin:0; }
@media print{ .card-x{ display:none; } }

/* everything on one screen (fitScreen) */
.fs{ display:flex; flex-direction:column; }
.fs-title{ margin:0 0 8px; font-size:20px; font-weight:800; color:var(--fc-navy); line-height:1.2; }
.fs-grid{ display:grid; grid-template-columns:repeat(var(--cols, 4), minmax(0, 1fr)); gap:8px; align-content:start; }
.fs-empty{ margin:40px 10px; text-align:center; color:#5a6478; font-size:18px; line-height:1.5; }