/* ============================================================
   Fiber Optic Residential Compound Project — brief deck
   Scene kit: scope columns, hierarchy flow, topology switcher,
   compound map with layer toggles, core calculator, schedule
   and BOQ tables, consistency checker, timeline, marks bars.
   Light Daw AlFada brand theme (same palette as the FTTH deck).
   ============================================================ */

:root {
  --p-red: #e0322f;      /* backbone  */
  --p-blue: #2f6fd6;     /* distribution */
  --p-green: #1f9d55;    /* drop */
  --p-ink: #172a44;
  --p-mut: #667a94;
  --p-line: #e3eaf3;
  --p-soft: #f6f9fe;
}

/* ---------- generic bits reused across scenes ---------- */
.p-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; color: var(--p-mut);
  font-size: 16.5px; font-weight: 600; line-height: 1.6;
}
.p-note b { color: var(--color-navy); }
.p-note .rd { color: var(--p-red); }

.p-chip {
  position: absolute; top: 0; left: 0; z-index: 12;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 15px; border-radius: 99px;
  background: #fff7ec; border: 1.6px dashed var(--color-orange);
  color: var(--color-orange-600); font-weight: 800; font-size: 16px;
}

/* a plain titled panel — the workhorse for lists and tables */
.p-card {
  position: absolute; border-radius: 16px; background: #fff;
  border: 1px solid var(--p-line); box-shadow: 0 10px 26px -18px rgba(24,72,120,.5);
  overflow: hidden;
}
.p-card > .hd {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 15px; background: var(--p-soft);
  border-bottom: 1px solid var(--p-line);
  font-weight: 800; font-size: 16px; color: var(--color-navy);
}
.p-card > .hd .ico { width: 19px; height: 19px; color: var(--color-blue); }
.p-card > .bd { padding: 12px 15px; }

/* ---------- S3 · scope in / out ---------- */
.c3 .col { position: absolute; top: 6px; width: 578px; height: 372px; }
.c3 .in { right: 0; } .c3 .out { left: 0; }
.c3 .in > .hd { background: #eaf7ef; border-bottom-color: #cfe9da; color: #146c3a; }
.c3 .out > .hd { background: #fdeeee; border-bottom-color: #f6d5d5; color: #a52220; }
.c3 ul { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.c3 li { display: flex; align-items: flex-start; gap: 7px;
  font-size: 16px; font-weight: 600; color: var(--p-ink); line-height: 1.45; }
.c3 li .mk { flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 900; margin-top: 1px; }
.c3 .in .mk { background: #d7f0e2; color: #146c3a; }
.c3 .out .mk { background: #fadada; color: #a52220; }
.c3 .out li { color: var(--p-mut); }

/* ---------- S4 · what the instructor hands over ---------- */
.c4 .give { position: absolute; width: 272px; height: 168px; }
.c4 .g1 { right: 0; top: 8px; } .c4 .g2 { right: 296px; top: 8px; }
.c4 .g3 { right: 592px; top: 8px; } .c4 .g4 { right: 888px; top: 8px; }
.c4 .give .bd { font-size: 15.5px; font-weight: 600; color: var(--p-mut); line-height: 1.6; }
.c4 .give .bd b { color: var(--color-navy); }
.c4 .ids { position: absolute; left: 0; right: 0; top: 196px; height: 150px;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 0 10px; }
.c4 .hid {
  display: grid; place-items: center; width: 78px; height: 54px; border-radius: 11px;
  background: #fff; border: 1.6px solid var(--p-line); direction: ltr;
  font-family: ui-monospace, monospace; font-size: 16px; font-weight: 800;
  color: var(--color-navy); animation: hidIn .5s var(--ease, ease) both;
}
.c4 .hid.more { border-style: dashed; color: var(--p-mut); font-weight: 700; }
@keyframes hidIn { from { opacity: 0; transform: translateY(9px) scale(.94); } }

/* ---------- S5 · the ten decisions ---------- */
.c5 .dec {
  position: absolute; width: 380px; height: 62px; border-radius: 13px;
  display: flex; align-items: center; gap: 11px; padding: 0 14px;
  background: #fff; border: 1px solid var(--p-line);
  box-shadow: 0 8px 20px -16px rgba(24,72,120,.55);
}
.c5 .dec .n {
  flex: none; width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center;
  background: var(--color-navy); color: #fff; font-weight: 800; font-size: 15px; direction: ltr;
}
.c5 .dec span { font-size: 16px; font-weight: 700; color: var(--p-ink); line-height: 1.35; }
.c5 .dec.k-b .n { background: var(--p-blue); }
.c5 .dec.k-o .n { background: var(--color-orange-600); }
.c5 .dec.k-g .n { background: var(--p-green); }

/* ---------- S6 · network hierarchy ---------- */
.c6 .lvl {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 470px; height: 60px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  background: #fff; border: 2px solid var(--p-line); font-weight: 800;
  font-size: 19px; color: var(--color-navy); z-index: 3;
}
.c6 .lvl .ico { width: 24px; height: 24px; color: var(--color-blue); }
.c6 .lvl small { font-family: ui-monospace, monospace; font-size: 14px;
  font-weight: 700; color: var(--p-mut); direction: ltr; }
.c6 .l1 { top: 0; border-color: #f0c9c8; }
.c6 .l2 { top: 84px; border-color: #f0c9c8; }
.c6 .l3 { top: 168px; border-color: #cddcf6; }
.c6 .l4 { top: 252px; border-color: #cde6d8; }
.c6 .rail { position: absolute; left: 50%; width: 4px; margin-left: -2px;
  border-radius: 3px; z-index: 1; }
.c6 .r1 { top: 60px; height: 24px; background: var(--p-red); }
.c6 .r2 { top: 144px; height: 24px; background: var(--p-red); }
.c6 .r3 { top: 228px; height: 24px; background: var(--p-blue); }
.c6 .r4 { top: 312px; height: 22px; background: var(--p-green); }
.c6 .pulse {
  position: absolute; left: 50%; margin-left: -6px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; z-index: 4;
  box-shadow: 0 0 0 3px currentColor, 0 0 16px currentColor;
  animation: fall 3.4s linear infinite;
}
.c6 .pulse.p1 { color: var(--p-red); }
.c6 .pulse.p2 { color: var(--p-blue); animation-delay: 1.1s; }
.c6 .pulse.p3 { color: var(--p-green); animation-delay: 2.2s; }
@keyframes fall { 0% { top: 54px; opacity: 0; } 8% { opacity: 1; }
  92% { opacity: 1; } 100% { top: 336px; opacity: 0; } }
.c6 .homes { position: absolute; left: 0; right: 0; top: 334px;
  display: flex; justify-content: center; gap: 13px; }
.c6 .homes i {
  width: 52px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: #eef7f1; border: 1.6px solid #cde6d8; color: var(--p-green);
}
.c6 .homes i svg { width: 24px; height: 24px; }
.c6 .tagr {
  position: absolute; font-family: ui-monospace, monospace; direction: ltr;
  font-size: 13.5px; font-weight: 800; padding: 3px 10px; border-radius: 8px;
}
.c6 .tagr.t1 { right: 150px; top: 62px; background: #fdecec; color: var(--p-red); }
.c6 .tagr.t2 { right: 150px; top: 230px; background: #eaf1fd; color: var(--p-blue); }
.c6 .tagr.t3 { right: 150px; top: 312px; background: #eaf7ef; color: var(--p-green); }

/* ---------- S7 · topology switcher ---------- */
.c7 .tpwrap { position: absolute; right: 0; top: 46px; width: 640px; height: 300px;
  border-radius: 16px; background: var(--p-soft); border: 1px solid var(--p-line); }
.c7 svg.tp { position: absolute; inset: 0; width: 100%; height: 100%; }
.c7 .tp .lk { stroke: #b9cbe4; stroke-width: 2.4; fill: none; }
.c7 .tp .lk.on { stroke: var(--p-blue); stroke-width: 3; }
.c7 .tp .nd { fill: #fff; stroke: var(--color-navy); stroke-width: 2; }
.c7 .tp .hub { fill: var(--color-navy); }
.c7 .tp text { font-family: ui-monospace, monospace; font-size: 11px;
  font-weight: 700; fill: var(--p-mut); }
.c7 .tinfo { position: absolute; left: 0; top: 46px; width: 552px; height: 300px; }
.c7 .tinfo .bd { font-size: 16.5px; font-weight: 600; color: var(--p-ink); line-height: 1.65; }
.c7 .tinfo .bd b { color: var(--color-blue); }
.c7 .tinfo .verdict { display: block; margin-top: 11px; padding: 9px 13px; border-radius: 11px;
  font-size: 15.5px; font-weight: 700; }
.c7 .tinfo .verdict.good { background: #eaf7ef; color: #146c3a; }
.c7 .tinfo .verdict.warn { background: #fdf3e3; color: #a86518; }
.c7 [data-tp] { display: none; }
.c7 [data-tp].on { display: block; }

/* ---------- tab strip (shared) ---------- */
.p-tabs { position: absolute; display: flex; gap: 9px; flex-wrap: wrap; z-index: 10; }
.p-tab {
  padding: 7px 18px; border-radius: 99px; font-size: 16px; font-weight: 800;
  background: #fff; border: 1.6px solid var(--p-line); color: var(--p-mut);
  transition: all .18s ease; cursor: pointer;
}
.p-tab:hover { border-color: #bdd2ee; color: var(--color-navy); }
.p-tab.on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

/* ---------- S8 + S10 · the compound map ---------- */
.p-map { position: absolute; border-radius: 16px; overflow: hidden;
  background: #eef2f6; border: 1px solid var(--p-line); }
.p-map svg { display: block; width: 100%; height: 100%; }
.p-map .plot { fill: #dfe7ef; stroke: #c6d3e0; stroke-width: 1.2; }
.p-map .road { stroke: #fff; stroke-width: 13; stroke-linecap: round; fill: none; }
.p-map .roadc { stroke: #d8e2ec; stroke-width: 1.2; stroke-dasharray: 7 8; fill: none; }
.p-map .house { fill: #fff; stroke: #97acc4; stroke-width: 1.4; }
.p-map .house.lit { fill: #e8f6ee; stroke: var(--p-green); stroke-width: 1.8; }
.p-map .hlbl { font-family: ui-monospace, monospace; font-size: 8.5px;
  font-weight: 700; fill: #5f7690; }
.p-map .bb { stroke: var(--p-red); stroke-width: 4; fill: none; stroke-linecap: round; }
.p-map .dst { stroke: var(--p-blue); stroke-width: 3; fill: none; stroke-linecap: round; }
.p-map .drp { stroke: var(--p-green); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.p-map .fdp { fill: var(--p-blue); stroke: #fff; stroke-width: 2; }
.p-map .odf { fill: var(--color-navy); stroke: #fff; stroke-width: 2; }
.p-map .isp { fill: var(--p-red); stroke: #fff; stroke-width: 2; }
.p-map .pin { font-family: ui-monospace, monospace; font-size: 11px;
  font-weight: 800; fill: var(--color-navy); }
/* layers are toggled by class on the map root */
.p-map .lay { transition: opacity .3s ease; }
.p-map:not(.s-bb) .lay-bb { opacity: .08; }
.p-map:not(.s-dst) .lay-dst { opacity: .08; }
.p-map:not(.s-drp) .lay-drp { opacity: .06; }
.p-map:not(.s-lbl) .lay-lbl { opacity: 0; }
/* the route lines draw themselves in when the slide opens */
.p-map .dash { stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: drawIn 2.2s ease forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

.p-legend { position: absolute; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.p-legend span { display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--p-ink); }
.p-legend i { width: 22px; height: 4px; border-radius: 3px; flex: none; }
.p-legend i.dot { width: 12px; height: 12px; border-radius: 50%; }

/* ---------- S8 · FDP grouping ---------- */
.c8 .p-map { right: 0; top: 44px; width: 700px; height: 316px; }
.c8 .grp { position: absolute; left: 0; top: 44px; width: 492px; }
.c8 .grow {
  display: flex; align-items: center; gap: 11px; padding: 9px 13px; margin-bottom: 9px;
  border-radius: 12px; background: #fff; border: 1px solid var(--p-line);
}
.c8 .grow .tagf {
  flex: none; padding: 3px 11px; border-radius: 8px; direction: ltr;
  font-family: ui-monospace, monospace; font-size: 14px; font-weight: 800;
  background: #eaf1fd; color: var(--p-blue);
}
.c8 .grow .hs { font-family: ui-monospace, monospace; font-size: 14.5px;
  font-weight: 700; color: var(--p-ink); direction: ltr; }
.c8 .grow .cnt { margin-inline-start: auto; font-size: 14px; font-weight: 700; color: var(--p-mut); }

/* ---------- S9 · logical topology ---------- */
.c9 .tree { position: absolute; inset: 0; }
.c9 .tnode {
  position: absolute; border-radius: 12px; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--p-line); font-weight: 800;
  font-size: 16px; color: var(--color-navy); z-index: 3; padding: 0 12px;
}
.c9 .tnode small { display: block; font-family: ui-monospace, monospace;
  font-size: 12.5px; font-weight: 700; color: var(--p-mut); direction: ltr; }
.c9 svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.c9 .wires .w { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.c9 .wires .w.bb { stroke: var(--p-red); }
.c9 .wires .w.dst { stroke: var(--p-blue); }
.c9 .wires text { font-family: ui-monospace, monospace; font-size: 12px;
  font-weight: 800; fill: var(--p-mut); }
.c9 .hbox {
  position: absolute; border-radius: 11px; padding: 7px 10px; text-align: center;
  background: #eef7f1; border: 1.6px solid #cde6d8; direction: ltr;
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 800; color: #146c3a;
}

/* ---------- S11 · cable label anatomy ---------- */
.c11 .lbl {
  position: absolute; left: 50%; transform: translateX(-50%); top: 22px;
  display: flex; align-items: stretch; border-radius: 14px; overflow: hidden;
  border: 2px solid var(--color-navy); direction: ltr;
}
.c11 .lbl > span { padding: 15px 26px; font-family: ui-monospace, monospace;
  font-size: 30px; font-weight: 800; color: var(--color-navy); background: #fff; }
.c11 .lbl > span + span { border-left: 2px solid var(--p-line); }
.c11 .lbl .a { background: #fdecec; color: var(--p-red); }
.c11 .lbl .b { background: #eaf1fd; color: var(--p-blue); }
.c11 .lbl .c { background: #eaf7ef; color: var(--p-green); }
.c11 .leg { position: absolute; top: 110px; width: 300px; text-align: center; }
.c11 .leg .up { display: block; height: 26px; border-top: 2px dashed #b9cbe4;
  border-inline-start: 2px dashed #b9cbe4; width: 50%; margin-inline-start: 50%; }
.c11 .leg b { display: block; font-size: 17px; font-weight: 800; color: var(--color-navy); }
.c11 .leg span.d { display: block; font-size: 15px; font-weight: 600; color: var(--p-mut);
  line-height: 1.5; margin-top: 3px; }
.c11 .pre { position: absolute; top: 232px; width: 340px; height: 118px; }
.c11 .pre .bd { text-align: center; }
.c11 .pre .code { display: block; font-family: ui-monospace, monospace; direction: ltr;
  font-size: 25px; font-weight: 800; margin-bottom: 5px; }
.c11 .pre .what { display: block; font-size: 15.5px; font-weight: 700; color: var(--p-ink); }
.c11 .pre .ex { display: block; font-size: 14px; font-weight: 600; color: var(--p-mut);
  margin-top: 4px; direction: ltr; font-family: ui-monospace, monospace; }
.c11 .pre.k1 { right: 0; } .c11 .pre.k1 .code { color: var(--p-red); }
.c11 .pre.k2 { left: 50%; transform: translateX(-50%); } .c11 .pre.k2 .code { color: var(--p-blue); }
.c11 .pre.k3 { left: 0; } .c11 .pre.k3 .code { color: var(--p-green); }

/* ---------- S12 · core-count calculator ---------- */
.c12 .calc { position: absolute; right: 0; top: 40px; width: 604px; height: 312px; }
.c12 .rowh { display: flex; align-items: center; justify-content: space-between; }
.c12 .rowh b { font-size: 18px; font-weight: 800; color: var(--color-navy); }
.c12 .big { font-family: ui-monospace, monospace; font-size: 44px; font-weight: 800;
  color: var(--color-blue); direction: ltr; line-height: 1.1; }
.c12 input[type="range"] { width: 100%; margin: 14px 0 4px; accent-color: var(--color-blue); height: 26px; }
.c12 .scale { display: flex; justify-content: space-between;
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700;
  color: var(--p-mut); direction: ltr; }
.c12 .out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 15px; }
.c12 .out div { border-radius: 12px; padding: 11px 8px; text-align: center;
  background: var(--p-soft); border: 1px solid var(--p-line); }
.c12 .out b { display: block; font-family: ui-monospace, monospace; font-size: 26px;
  font-weight: 800; color: var(--color-navy); direction: ltr; }
.c12 .out span { display: block; font-size: 13.5px; font-weight: 700; color: var(--p-mut); margin-top: 2px; }
.c12 .pick { margin-top: 14px; padding: 11px 15px; border-radius: 12px;
  background: #eaf1fd; border: 1.6px solid #cddcf6; font-size: 16.5px;
  font-weight: 700; color: var(--color-navy); line-height: 1.5; }
.c12 .pick b { font-family: ui-monospace, monospace; direction: ltr; color: var(--p-blue); }
.c12 .ladder { position: absolute; left: 0; top: 40px; width: 488px; height: 312px; }
.c12 .lrow { display: flex; align-items: center; gap: 11px; padding: 8px 12px;
  border-radius: 11px; margin-bottom: 7px; border: 1.6px solid transparent;
  transition: all .2s ease; }
.c12 .lrow .cap { flex: none; width: 74px; font-family: ui-monospace, monospace;
  font-size: 16px; font-weight: 800; color: var(--color-navy); direction: ltr; }
.c12 .lrow .bar { flex: 1; height: 12px; border-radius: 7px; background: #e8eef7; overflow: hidden; }
.c12 .lrow .bar i { display: block; height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, var(--p-blue), #6ea0e4); }
.c12 .lrow .use { flex: none; font-size: 14px; font-weight: 700; color: var(--p-mut); }
.c12 .lrow.on { background: #eaf1fd; border-color: var(--p-blue); }
.c12 .lrow.on .use { color: var(--color-navy); }

/* ---------- S13/S14/S15 · tables ---------- */
.p-tbl { width: 100%; border-collapse: collapse; direction: rtl; }
.p-tbl th {
  padding: 8px 11px; text-align: right; font-size: 14px; font-weight: 800;
  color: var(--p-mut); background: var(--p-soft);
  border-bottom: 1.6px solid var(--p-line); white-space: nowrap;
}
.p-tbl td {
  padding: 7px 11px; font-size: 15px; font-weight: 600; color: var(--p-ink);
  border-bottom: 1px solid #eef2f8;
}
.p-tbl td.m { font-family: ui-monospace, monospace; font-weight: 700; direction: ltr; text-align: right; }
.p-tbl tr.bb td.m:first-child { color: var(--p-red); }
.p-tbl tr.dst td.m:first-child { color: var(--p-blue); }
.p-tbl tr.drp td.m:first-child { color: var(--p-green); }
.p-tbl tr.tot td { background: #f3f7fd; font-weight: 800; color: var(--color-navy); }

/* ---------- S16 · consistency checker ---------- */
.c16 .doc { position: absolute; width: 282px; height: 250px; top: 54px; }
.c16 .d1 { right: 0; } .c16 .d2 { right: 306px; }
.c16 .d3 { right: 612px; } .c16 .d4 { right: 918px; }
.c16 .doc .bd { font-family: ui-monospace, monospace; font-size: 13.5px;
  font-weight: 700; direction: ltr; line-height: 1.95; color: var(--p-ink); }
.c16 .doc .bd div { padding: 1px 5px; border-radius: 5px; transition: all .25s ease; }
.c16 .doc .bd div.bad { background: #fdecec; color: var(--p-red); font-weight: 800; }
.c16 .doc .bd div.miss { background: #fdecec; color: var(--p-red);
  text-decoration: line-through; opacity: .8; }
.c16 .doc.flag { border-color: var(--p-red); box-shadow: 0 0 0 3px rgba(224,50,47,.16); }
.c16 .verdict {
  position: absolute; left: 0; right: 0; top: 322px; text-align: center;
  padding: 11px; border-radius: 13px; font-size: 18px; font-weight: 800;
  transition: all .3s ease;
}
.c16 .verdict.ok { background: #eaf7ef; color: #146c3a; }
.c16 .verdict.no { background: #fdecec; color: #a52220; }

/* ---------- S17 · ten-day timeline ---------- */
.c17 .rail { position: absolute; left: 20px; right: 20px; top: 96px; height: 5px;
  border-radius: 4px; background: #e2eaf4; }
.c17 .rail i { display: block; height: 100%; border-radius: 4px; width: 0;
  background: linear-gradient(90deg, var(--color-orange), var(--p-blue));
  animation: railGrow 3.2s ease forwards .3s; }
@keyframes railGrow { to { width: 100%; } }
.c17 .day { position: absolute; top: 20px; width: 112px; text-align: center; }
.c17 .day .dn {
  width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; display: grid;
  place-items: center; background: #fff; border: 2.4px solid var(--p-line);
  font-family: ui-monospace, monospace; font-weight: 800; font-size: 16px;
  color: var(--color-navy); position: relative; z-index: 3; direction: ltr;
}
.c17 .day .dt { display: block; margin-top: 9px; font-size: 14.5px;
  font-weight: 800; color: var(--color-navy); line-height: 1.3; }
.c17 .day .dd { display: block; margin-top: 3px; font-size: 12.5px;
  font-weight: 600; color: var(--p-mut); line-height: 1.4; }
.c17 .day.mark .dn { border-color: var(--color-orange); background: #fff7ec;
  color: var(--color-orange-600); }
.c17 .day.fin .dn { border-color: var(--p-green); background: #eaf7ef; color: #146c3a; }
.c17 .chk { position: absolute; left: 0; right: 0; top: 258px; height: 96px; }
.c17 .chk .bd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.c17 .chk .q { display: flex; align-items: flex-start; gap: 7px;
  font-size: 14.5px; font-weight: 700; color: var(--p-ink); line-height: 1.4; }
.c17 .chk .q i { flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff7ec; color: var(--color-orange-600); display: grid; place-items: center;
  font-size: 12px; font-weight: 900; font-style: normal; direction: ltr; }

/* ---------- S18 · deliverables + marks ---------- */
.c18 .dlv { position: absolute; right: 0; top: 40px; width: 604px; }
.c18 .drow { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  margin-bottom: 9px; border-radius: 12px; background: #fff; border: 1px solid var(--p-line); }
.c18 .drow .n { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid;
  place-items: center; background: var(--color-navy); color: #fff;
  font-weight: 800; font-size: 15px; direction: ltr; }
.c18 .drow b { font-size: 16.5px; font-weight: 800; color: var(--color-navy); }
.c18 .drow span { display: block; font-size: 14px; font-weight: 600; color: var(--p-mut); margin-top: 1px; }
.c18 .marks { position: absolute; left: 0; top: 40px; width: 488px; }
.c18 .mrow { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.c18 .mrow .ml { flex: none; width: 168px; font-size: 15px; font-weight: 700; color: var(--p-ink); }
.c18 .mrow .mb { flex: 1; height: 22px; border-radius: 7px; background: #eef2f8; overflow: hidden; }
.c18 .mrow .mb i { display: block; height: 100%; border-radius: 7px; width: 0;
  background: linear-gradient(90deg, var(--p-blue), #6ea0e4);
  animation: markGrow 1.1s cubic-bezier(.16,.84,.44,1) forwards; }
.c18 .mrow.top .mb i { background: linear-gradient(90deg, var(--color-orange-600), var(--color-orange)); }
@keyframes markGrow { to { width: var(--w); } }
.c18 .mrow .mv { flex: none; width: 46px; text-align: left; direction: ltr;
  font-family: ui-monospace, monospace; font-size: 15px; font-weight: 800; color: var(--color-navy); }

/* ---------- S19 · allowed software ---------- */
.c19 .sw { position: absolute; width: 210px; height: 96px; border-radius: 14px;
  display: grid; place-items: center; gap: 4px; background: #fff;
  border: 1px solid var(--p-line); text-align: center; }
.c19 .sw b { font-size: 17px; font-weight: 800; color: var(--color-navy); direction: ltr; }
.c19 .sw span { font-size: 13.5px; font-weight: 600; color: var(--p-mut); }

/* ---------- corrections found by rendering the deck ---------- */
/* S7 · a pane is selected on first paint, so give the info card its slot */
.c7 .tinfo { display: none; }
.c7 .tinfo.on { display: block; }

/* S12 · the calculator and the ladder each needed one more row of room */
.c12 .calc, .c12 .ladder { height: 372px; }
.c12 .lrow { padding: 6px 12px; margin-bottom: 5px; }
.c12 .pick { margin-top: 12px; }

/* S17 · the rail belongs behind the day circles, not across their captions */
.c17 .rail { top: 42px; }
.c17 .chk { top: 172px; height: 104px; }
.c17 .day .dd { min-height: 34px; }

/* ---------- height corrections from the measured overflow audit ---------- */
/* every value below is (measured content height) rounded up, not a guess */
.c11 .pre { height: 164px; top: 236px; }
.c13 .p-card { height: 336px !important; }
.c14 .p-card { height: 374px !important; }
.c15 .p-card { height: 430px !important; }
.c15 .p-tbl td { padding: 4px 10px; font-size: 14px; }
.c15 .p-tbl th { padding: 6px 10px; font-size: 13px; }
.c19 .p-card { height: 266px !important; }