/* MIS 752 Lab 13 Lite v2 only. style.css is shared by every Lite lab and stays untouched; everything Lab 13 needs is here. */

/* ---------- carried over from the first Lab 13 page: her chart, the stops, ROI, governance, capstone ---------- */
.roundgrid {display: grid; grid-template-columns: 5fr 4fr; gap: 22px; align-items: start;}
.chart {background: #fff; border: 4px solid #111; border-radius: 18px; padding: 16px 18px; color: #111;}
.chart .c-h {font-size: 1.3rem; font-weight: 900; margin-bottom: 8px;}
.chart .cl {display: grid; grid-template-columns: 3.6rem 1fr; gap: 10px; padding: 6px 4px; border-bottom: 1px dashed #ddd; font-size: 1.1rem;}
.chart .cl:last-child {border-bottom: none;}
.chart code.cid, code.cid {font-family: Menlo, Consolas, monospace; font-weight: 900; color: #B10202; font-size: 1.05rem;}
.chart .cov {background: #fff8db; border-radius: 8px; font-weight: 700;}
.stops {display: grid; gap: 12px;}
.stop {display: grid; grid-template-columns: 3.2rem 1fr; gap: 12px; align-items: start; background: #fff; border: 3px solid #e4e4e7;
  border-radius: 16px; padding: 12px 16px; color: #111;}
.stop .n {font-size: 2.2rem; line-height: 1;} .stop b {font-size: 1.2rem;} .stop .d {display: block; font-size: 1.05rem; color: #333; margin-top: 4px;}
.honest {margin-top: 12px; font-size: 1.05rem; color: #444;}
.watch {margin-top: 14px; font-size: 1.1rem; color: #333;} .watch a {color: #B10202; font-weight: 800;}
.simgrid {display: grid; grid-template-columns: 2fr 3fr; gap: 22px; align-items: start; margin-top: 10px;}
input[type=range] {width: 100%; accent-color: #B10202; height: 28px;}
.hint {font-weight: 500; color: #666; font-size: .95rem;}
.bars {background: #fff; border: 3px solid #e4e4e7; border-radius: 18px; padding: 18px 20px; color: #111;}
.bar {display: grid; grid-template-columns: minmax(12rem, 19rem) 1fr 6.5rem; gap: 12px; align-items: center; margin: 14px 0; font-size: 1.1rem; font-weight: 700;}
.track {background: #f1f1f3; border-radius: 10px; height: 34px; overflow: hidden;}
.fill {height: 100%; border-radius: 10px; transition: width .35s ease;}
.fill.truth {background: #111;} .fill.naive {background: #dc2626;} .fill.strat {background: #16a34a;}
.val {font-size: 1.3rem; font-weight: 900; text-align: right;}
.tell {margin-top: 10px; background: #fff8db; border: 2px solid #d97706; border-radius: 12px; padding: 12px 14px; font-size: 1.15rem; color: #111;}
.tell.shows {margin-top: 16px;} .whylist {margin: 6px 0 0 0; padding-left: 24px;} .whylist li {margin: 4px 0;}
.h3 {font-size: 1.6rem; font-weight: 900; margin: 26px 0 6px 0; color: #111;}
.row.five > .field {flex: 1 1 190px;}
.field input[type=number] {width: 100%; box-sizing: border-box; font: inherit; font-size: 1.2rem; padding: 10px 12px; border: 2px solid #d4d4d8; border-radius: 12px; background: #fff; color: #111;}
table.roi {width: 100%; border-collapse: collapse; background: #fff; border: 3px solid #111; margin-top: 12px; font-size: 1.15rem; color: #111;}
table.roi th, table.roi td {padding: 10px 12px; border-bottom: 1px solid #e4e4e7; text-align: right;}
table.roi th:first-child, table.roi td:first-child {text-align: left;}
table.roi th {background: #f1f1f3; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em;}
td.pos {color: #15803d; font-weight: 900;} td.neg {color: #b91c1c; font-weight: 900;}
.govgrid {display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start;}
.oform.insert {box-shadow: 6px 6px 0 #d4d4d8; background: #fffef7;}
.oform.insert ul {margin: 4px 0; padding-left: 22px;} .oform.insert li {margin: 4px 0;}
.oform.insert .reg {font-size: 1rem; color: #333; border-top: 1px solid #ddd; margin-top: 12px; padding-top: 10px;}
.oform.insert .reg a {color: #B10202;} .oform.insert input {margin-top: 6px;}
li.found {color: #7f1d1d; font-weight: 700; list-style: "🎯 ";}
.signoff {display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: center; margin-top: 18px; background: #fff; border: 3px solid #e4e4e7; border-radius: 18px; padding: 16px 20px; color: #111;}
.signoff figure {margin: 0;} .signoff img {width: 100%; border-radius: 12px; display: block;}
.signoff figcaption {font-size: .8rem; color: #888; margin-top: 4px;}
.signoff .s-h {font-size: 1.35rem; font-weight: 900; margin-bottom: 4px;} .signoff .s-p {font-size: 1.1rem; color: #333; margin-bottom: 10px;}
.signrows {display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;}
.signrows label {font-weight: 800; font-size: 1rem; display: block; margin-bottom: 4px;}
.canvas {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #fff; border: 4px solid #B10202; border-radius: 14px; padding: 12px; box-shadow: 6px 6px 0 #B10202; color: #111; margin-bottom: 14px;}
.cbox {border: 2px solid #e4e4e7; border-radius: 10px; padding: 8px 10px; font-size: 1rem; line-height: 1.35; min-height: 3.2rem;}
.cbox .ch {font-size: .85rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #B10202; margin-bottom: 4px;}
.cbox.empty {color: #999; font-style: italic; background: #fafafa;}

/* ---------- v3: five acts, ten screens, one bench ---------- */
.acts {display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0 8px;}
.acts a {display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 10px; align-items: center; text-decoration: none; color: #111; background: #fff; border: 3px solid #111; border-radius: 16px; padding: 10px 12px;}
.acts a:hover {background: #111; color: #fff;}
.acts .an {grid-row: span 3; background: #B10202; color: #fff; font-weight: 900; border-radius: 12px; text-align: center; padding: 10px 0; font-size: 1.5rem;}
.acts a b {font-size: 1.05rem; line-height: 1.2;} .acts a span:not(.an) {font-size: .9rem; opacity: .75;}
.acts em.req {display: block; font-style: normal; font-size: .8rem; font-weight: 800; color: #15803d; margin-top: 2px;} .acts em.req.opt {color: #2563eb;} .acts a:hover em.req {color: #facc15;}
.why {margin-top: 14px;} .why .excard {margin: 0;}
.connect {background: #fff; border: 3px solid #111; border-radius: 18px; padding: 14px 18px; margin: 14px 0 0;}
.connect-h {font-size: 1.15rem; margin-bottom: 6px; color: #111;}
details.more {background: #fff; border: 2px solid #e4e4e7; border-radius: 14px; padding: 8px 14px; margin: 12px 0; color: #111;}
details.more > summary {cursor: pointer; font-weight: 800; font-size: 1.05rem; list-style: none;} details.more > summary::-webkit-details-marker {display: none;}
details.more > summary::before {content: "▸ ";} details.more[open] > summary::before {content: "▾ ";}
details.more[open] > summary {margin-bottom: 8px;}
.act {margin: 64px 0 0; background: #111; color: #fff; border-radius: 22px; padding: 22px 28px; display: grid; grid-template-columns: auto 1fr; gap: 4px 22px; align-items: center; scroll-margin-top: 56px;}
.act .an {grid-row: span 2; font-size: 1.1rem; font-weight: 900; background: #B10202; border-radius: 14px; padding: 16px 18px; letter-spacing: .1em;}
.act h2 {margin: 0; font-size: 2.6rem; font-weight: 900; color: #fff !important;}
.act p {margin: 0; font-size: 1.3rem; color: #e5e5e5;}
.bridge {margin: 44px auto 0; max-width: 1100px; background: #fff8db; border: 3px solid #d97706; border-radius: 999px; padding: 14px 26px; font-size: 1.35rem; font-weight: 800; color: #111; display: flex; gap: 14px; align-items: center;}
.bridge span {background: #d97706; color: #fff; border-radius: 50%; width: 2.1rem; height: 2.1rem; display: inline-grid; place-items: center; font-size: 1.2rem; flex: 0 0 auto;}
.screen {scroll-margin-top: 56px;}
.benchbar {display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 10px;}
.bb-k {font-weight: 900; letter-spacing: .08em; color: #B10202; font-size: .95rem; text-transform: uppercase; margin-top: 12px; white-space: nowrap;}
.chips.bench {margin: 0;}
button.bchip {font-size: 1.05rem; font-weight: 800; padding: 10px 16px; border-radius: 999px; border: 3px solid #c4c4c8; background: #fff; color: #111; display: inline-flex; gap: 8px; align-items: center;}
button.bchip .bn {background: #111; color: #fff; border-radius: 999px; padding: 0 9px; font-size: .9rem;} button.bchip.own .bn {display: none;}
button.bchip:hover {border-color: #111;} button.bchip.selected {background: #111; color: #fff; border-color: #111;} button.bchip.selected .bn {background: #B10202;}
.bm {font-size: .78rem; font-weight: 900; border-radius: 999px; padding: 1px 8px; background: #e4e4e7; color: #111;} .bm.ok {background: #dcfce7; color: #166534;} .bm.brk {background: #fee2e2; color: #7f1d1d;}
button.bchip.selected .bm {background: #fff; color: #111;}
.bench-panels {background: #fff; border: 4px solid #111; border-radius: 22px; padding: 6px 22px 16px; color: #111;}
.mission .mission-h {margin: 14px 0 10px;} .mission .mission-h h2 {font-size: 1.9rem !important;}
.mission.own .mission-h p {font-size: 1.1rem;}
.benchnav {display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; border-top: 2px dashed #e4e4e7; padding-top: 10px;} .bpos {font-weight: 800; color: #555;}
.mission.pre > .brkwrap, .mission.pre > details.second, .mission.pre > .tell.shows, .mission.pre > .think, .mission.pre > .field {display: none;}
.mission.pre > .runbtn::after {content: " · the break-it, a second opinion and the reflection open after this run"; font-size: .85rem; font-weight: 600; opacity: .85;}
.swhead {font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; color: #111;}
.sw-what {font-size: .82rem; color: #444; font-weight: 500; line-height: 1.25;}
.oform-wrap {margin-top: 12px;}
.attackgrid {display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start;}
.visionbox {background: #fff; border: 4px solid #111; border-radius: 20px; padding: 16px 20px; color: #111;}
.vhead {font-size: 1.3rem;} .vsub {font-size: 1.05rem; color: #444; margin: 4px 0 10px;}
.actthink {margin-top: 22px; background: #eef4ff; border: 3px solid #2563eb; border-radius: 18px; padding: 14px 18px; color: #111;}
.hearingbox {margin-top: 26px; background: #f8fafc; border: 3px solid #475569; border-radius: 20px; padding: 14px 18px; color: #111;}
.hsub {font-size: 1.1rem; color: #333; margin: 4px 0 10px;}
.keepgrid {display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; margin-top: 14px;}
.handin.keep {border: 4px solid #B10202;} .handin.learned {margin-top: 16px; background: #fff8db;}
.endcap {margin-top: 30px; text-align: center; font-size: 1.2rem; font-weight: 800; color: #555;}
.tutorwrap {margin-top: 22px;}
[hidden] {display: none !important;}
.line.compact .st .st-row {display: none;}
.line.compact .st.open .st-row, .line.compact .st.lit .st-row, .line.compact .st.done .st-row {display: block;}
.line.compact .st {min-height: 0;} .line.compact .st-title {margin-bottom: 0;}
.bench-top .chart {max-height: 560px; overflow: auto;}
.bench-top .switchbox {margin-bottom: 0;}
.bench-top .switches {grid-template-columns: 1fr; gap: 6px;}
.bench-top label.sw {padding: 7px 10px;}
.bench-top .sw-tx {display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; align-items: center;}
.bench-top .sw-what {grid-column: 1 / -1;}
.bench-top .swfoot {font-size: 1rem;}
.mdot {font-size: .95rem; line-height: 1;}
.stcard {display: grid; gap: 10px; color: #111;}
.stc-top {display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 1.25rem;}
.stc-rows {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 18px;}
.stcard.m-green {border-left: 8px solid #16a34a; padding-left: 12px;} .stcard.m-yellow {border-left: 8px solid #d97706; padding-left: 12px;} .stcard.m-red {border-left: 8px solid #dc2626; padding-left: 12px;}
.stc-acts {display: flex; flex-wrap: wrap; gap: 4px; align-items: center;}
.budget {margin-top: 12px; background: #eff6ff; border: 2px solid #2563eb; border-radius: 12px; padding: 12px 14px; font-size: 1.1rem; color: #111;}
.savebox {margin-top: 10px;}
.banner {margin-top: 22px; background: #B10202; color: #fff; font-size: 1.6rem; font-weight: 900; border-radius: 18px; padding: 18px 24px; text-align: center;}
.labbadge {display: inline-block; background: #B10202; color: #fff !important; font-weight: 900; font-size: .9rem; letter-spacing: .04em; border-radius: 999px; padding: 3px 10px; white-space: nowrap;}
.labbadge.sm {font-size: .75rem; padding: 2px 8px;} .labbadge.big {font-size: 1.15rem; padding: 6px 14px;}
.labtag {display: block; width: max-content; margin-top: 3px; background: #B10202; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .7rem; letter-spacing: .03em;}
.chips {display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;}
button.wchip {font-size: 1.05rem; font-weight: 800; padding: 10px 16px; border-radius: 999px; border: 3px solid #c4c4c8; background: #fff; color: #111;}
.chips.big button.wchip {font-size: 1.25rem; padding: 14px 20px;}
button.wchip:hover {border-color: #111;} button.wchip.selected {background: #111; color: #fff; border-color: #111;}
button.mini {font-size: .95rem; font-weight: 800; padding: 6px 12px; border-radius: 10px; border: 2px solid #111; background: #fff; color: #111; margin: 4px 6px 4px 0;}
button.mini:hover {background: #111; color: #fff;}
.btnrow2 {display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0;} .btnrow2 > button {flex: 1 1 260px;}
.status {font-size: 1.05rem; color: #555; margin: 6px 0;}
.flash {animation: flash 1.6s ease;} @keyframes flash {0%, 60% {box-shadow: 0 0 0 8px #facc15;} 100% {box-shadow: none;}}
.sticky {position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #111; padding: 8px 12px;
  border-radius: 0 0 14px 14px; margin: 0 0 14px; box-shadow: 0 4px 14px rgba(0,0,0,.18);}
.sticky a {color: #fff !important; text-decoration: none; font-weight: 800; font-size: .95rem; padding: 4px 11px; border-radius: 999px; background: #1f2937;}
.sticky a:hover, .sticky a.on {background: #B10202;}
.callpill {margin-left: auto; color: #fff; font-size: .95rem; padding: 0 6px; text-align: right;}
.callpill b {color: #facc15; font-size: 1.15rem;} .callpill span {display: block; font-size: .72rem; opacity: .8;}
.roadmap em.req {display: block; grid-column: 2; font-style: normal; font-size: .8rem; font-weight: 800; color: #15803d; margin-top: 2px;}
.roadmap em.req.opt {color: #2563eb;} .roadmap a:hover em.req {color: #facc15;}
.roadnote {margin: 6px 0 4px; background: #fff; border: 2px solid #e4e4e7; border-radius: 12px; padding: 10px 14px; font-size: 1.05rem; color: #111;}
.knote:not(:empty) {background: #fef3c7; border: 2px solid #d97706; border-radius: 12px; padding: 10px 14px; font-size: 1.1rem; margin: 10px 0;}
.pair.compact {grid-template-columns: minmax(260px, 1fr) 2fr; align-items: start;}
.panel.tile1 {min-height: 0;} .tile1 .vpill {max-width: none; margin: 4px 0 10px;}
.t1-ans {font-size: 1.1rem; background: #fff; border: 2px solid #111; border-radius: 12px; padding: 10px 12px;} .t1-meta {margin-top: 8px; font-size: 1.05rem;}
.broke .how {margin-top: 6px; font-size: 1.02rem; color: #444;}

/* ---------- Part A: the world table ---------- */
table.world {width: 100%; border-collapse: collapse; background: #fff; border: 3px solid #111; margin-top: 14px; font-size: 1.1rem; color: #111;}
table.world th, table.world td {padding: 10px 12px; border-bottom: 1px solid #e4e4e7; text-align: left; vertical-align: top;}
table.world th {background: #f1f1f3;} table.world td.wl {font-weight: 800; white-space: nowrap;}
table.world td.mine {background: #f0fdf4; font-weight: 600;} table.world td.empty {color: #999;}
table.world tr.same td {background: #111; color: #fff; font-weight: 700;} table.world tr.same code {color: #facc15;}

/* ---------- Part B hero: one question, thirteen labs ---------- */
.linebar {display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px;}
.linebar .runbtn {width: auto !important; flex: 0 1 auto; padding: 18px 28px !important;}
.linebar .predbtn {padding: 12px 18px !important; font-size: 1.1rem !important;}
.lprog {font-size: 1.2rem; font-weight: 800; color: #111;}
.line {background: #0f172a; color: #fff; border-radius: 26px; padding: 24px 24px 18px; scroll-margin-top: 10px;}
.line-q {display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 14px;}
.lq-k {font-size: 1rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #fca5a5;}
.lq-t {font-size: 1.6rem; font-weight: 800; color: #fff;}
.lq-mode {font-size: .9rem; font-weight: 800; border-radius: 999px; padding: 4px 12px; background: #334155; color: #e2e8f0;}
.lq-mode.m-live {background: #16a34a; color: #fff;} .lq-mode.m-recorded {background: #2563eb; color: #fff;}
.lane {display: grid; grid-template-columns: 170px 1fr; gap: 14px; margin: 12px 0;}
.lane-l {border-left: 6px solid #B10202; padding-left: 12px;}
.lane-l b {display: block; font-size: 1.05rem; letter-spacing: .08em; color: #fff;} .lane-l span {display: block; font-size: .9rem; color: #cbd5e1; margin-top: 4px;}
.lane-every .lane-l {border-left-color: #facc15;}
.stations {display: grid; gap: 12px;}
.stations.n5 {grid-template-columns: repeat(5, minmax(0, 1fr));} .stations.n6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
.stations.n2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
button.st {all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; background: #fff; color: #111; border: 3px solid #cbd5e1; border-radius: 16px; padding: 12px 12px 10px;
  transition: opacity .35s, transform .35s, box-shadow .35s, border-color .35s; font-size: .95rem; line-height: 1.32;}
button.st:hover {border-color: #facc15;}
button.st.dim {opacity: .32;} button.st.done {border-color: #16a34a;}
button.st.lit {opacity: 1; border-color: #facc15; transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 7px rgba(250,204,21,.45);}
button.st.picked {box-shadow: 0 0 0 5px #B10202;}
.st-top {display: flex; align-items: center; gap: 6px;} .st-n {background: #111; color: #fff; font-weight: 900; border-radius: 999px; padding: 1px 9px; font-size: .9rem;}
.st-ic {margin-left: auto; font-size: 1.7rem; line-height: 1;}
.st-title {font-size: 1.08rem; font-weight: 900; margin: 6px 0 4px;}
.st-row {margin-top: 5px;} .st-row .k {display: block; font-size: .7rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: #64748b;}
.st-row.q {background: #f0fdf4; border-radius: 8px; padding: 4px 6px;} .st-row.q .k {color: #15803d;}
.st-row.no {color: #991b1b;} .st-row.no .k {color: #b91c1c;}
.st-row.out {color: #1e3a8a;} .st-row.out .k {color: #2563eb;}
.lane-every .stations {position: relative;}
.line-cap {text-align: center; font-size: 1.25rem; font-weight: 800; color: #facc15; margin-top: 10px;}
.line-cap.big {font-size: 1.7rem; color: #111; margin: 14px 0;}
.line-act {margin-top: 12px; background: #fff; border: 3px solid #111; border-radius: 14px; padding: 10px 14px; font-size: 1.1rem; color: #111;}
.line-act .act-note {display: block; margin-top: 6px; color: #444; font-size: 1rem;}
#line_world {margin-top: 12px;}

/* ---------- Part B: the nine cards ---------- */
.cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;}
.pcard {background: #fff; border: 4px solid #d4d4d8; border-radius: 20px; padding: 16px 18px; color: #111; scroll-margin-top: 20px;}
.pcard.m-red {border-color: #dc2626;} .pcard.m-yellow {border-color: #d97706;} .pcard.m-green {border-color: #16a34a;}
.pc-top {display: flex; justify-content: space-between; align-items: center;} .pc-ic {font-size: 2.6rem;}
.pc-title {font-size: 1.35rem; font-weight: 900; margin-top: 8px;} .pc-week {color: #666; font-size: .95rem; margin-bottom: 6px;}
.pc-row {margin-top: 8px; font-size: 1.05rem; line-height: 1.4;}
.pc-row .k {display: block; font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #B10202;}
.pc-row.world {background: #f0fdf4; border-radius: 10px; padding: 6px 8px;}
.pc-foot {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px;}
.mstate {font-weight: 900;} .seen {background: #dcfce7; color: #166534; border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: .9rem;}
button.pc-quiz {margin-left: auto; font-weight: 800; border: 2px solid #111; background: #fff; border-radius: 10px; padding: 6px 10px; font-size: .95rem;}

/* ---------- Part C: the pipeline, the missions, break-it, second opinions, switches, red team ---------- */
.pipe {display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 6px; align-items: stretch;}
.pstop {background: #fff; border: 3px solid #111; border-radius: 14px; padding: 10px 8px; text-align: center; color: #111;}
.ps-n {font-size: .7rem; font-weight: 900; letter-spacing: .05em; color: #64748b;} .ps-ic {font-size: 2rem;} .ps-name {font-weight: 900; font-size: 1rem; margin: 2px 0 4px;}
.ps-what {font-size: .82rem; color: #444; margin-top: 6px; text-align: left;} .ps-ar {align-self: center; font-size: 1.4rem; font-weight: 900; color: #B10202;}
.tag.parts {background: #fee2e2; color: #7f1d1d;}
.extx.chips {display: flex; flex-wrap: wrap; gap: 8px;}
a.pchip {display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: #111; background: #fff; border: 2px solid #111; border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 1rem;}
a.pchip:hover {background: #111; color: #fff;}
.brkwrap {margin-top: 14px; background: #f4f4f5; border: 3px dashed #111; border-radius: 16px; padding: 12px 14px;}
button.brkbtn {width: 100%; font-size: 1.3rem; font-weight: 900; padding: 14px; border-radius: 14px; border: none; background: #111; color: #fff;}
button.brkbtn:hover {background: #333;} .brkhint {font-size: 1rem; color: #444; margin-top: 6px;}
.panel.broken {background: #f4f4f5; border: 5px dashed #111;}
.tl-row.off {border-left-color: #111; border-left-style: solid; background: #e4e4e7; border-radius: 0 8px 8px 0;}
.tl-row.off .tl-tx {color: #111; text-decoration: line-through; text-decoration-thickness: 2px;}
.broke, .saved {margin-top: 14px; padding: 14px 18px; border-radius: 14px; font-size: 1.2rem; color: #111;}
.broke {background: #fecaca; border: 3px solid #dc2626;} .saved {background: #dcfce7; border: 3px solid #16a34a;}
details.second {margin-top: 14px; background: #eef4ff; border: 3px solid #2563eb; border-radius: 16px; padding: 10px 14px;}
details.second > summary {cursor: pointer; font-size: 1.1rem; list-style: none;} details.second > summary::-webkit-details-marker {display: none;}
details.second > summary::before {content: "▸ ";} details.second[open] > summary::before {content: "▾ ";}
.so-body {display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px;}
.so-body select {flex: 1 1 320px; width: auto;} .so-body .sobtn {flex: 0 0 auto; padding: 10px 18px !important; font-size: 1.1rem !important;} .so-body .soout {flex: 1 1 100%;}
details.optpart {margin: 22px 0; background: #fff; border: 3px solid #111; border-radius: 18px; padding: 12px 16px;}
details.optpart > summary {cursor: pointer; list-style: none; font-size: 1.15rem;} details.optpart > summary::-webkit-details-marker {display: none;}
details.optpart > summary::before {content: "▸ "; font-weight: 900;} details.optpart[open] > summary::before {content: "▾ ";}
.sec-inline {font-size: 1.7rem; font-weight: 900; border-left: 10px solid #B10202; padding-left: 12px; margin-right: 8px;}
.aftertools {margin-top: 8px;}
.switchbox {background: #fff; border: 3px solid #111; border-radius: 18px; padding: 14px; margin-bottom: 12px;}
.switches {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}
label.sw {display: flex; gap: 10px; align-items: center; cursor: pointer; background: #f0fdf4; border: 3px solid #16a34a; border-radius: 14px; padding: 10px; scroll-margin-top: 30px;}
label.sw input {position: absolute; opacity: 0; width: 1px; height: 1px;}
.swtrack {flex: 0 0 56px; height: 30px; border-radius: 999px; background: #16a34a; position: relative; transition: background .2s;}
.swknob {position: absolute; top: 3px; left: 29px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .2s;}
label.sw.is-off {background: #e4e4e7; border-color: #111;} label.sw.is-off .swtrack {background: #111;} label.sw.is-off .swknob {left: 3px;}
label.sw.is-off .sw-n {text-decoration: line-through;}
.sw-tx {display: grid; gap: 4px;} .sw-n {font-weight: 900; font-size: 1rem;}
.swfoot {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: 1.1rem;}
.redteam {background: #fff1f2; border: 4px solid #B10202; border-radius: 20px; padding: 16px 20px; color: #111;}
.rt-head {font-size: 1.4rem;} .rt-sub {font-size: 1.15rem; margin: 6px 0;} .rt-hints {font-size: 1.1rem; margin: 6px 0 10px;}
.rt-try {background: #fff; border: 2px solid #fecaca; border-radius: 14px; padding: 10px 12px; margin: 10px 0;}
.rt-try .field {margin: 0 0 8px;} .rtv {max-width: none; margin-top: 10px;} .rt-own {margin-top: 10px; font-size: 1.1rem;}
.rt-score {font-size: 1.15rem; margin-top: 8px;}
.micslot {display: block; margin-top: 6px;} .micnote {font-size: 1rem; color: #444; margin-left: 4px;}

/* ---------- Part C: the photo card ---------- */
.vgrid {display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start;}
.vsamples {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
button.vsample {all: unset; cursor: pointer; background: #fff; border: 3px solid #d4d4d8; border-radius: 12px; padding: 6px; text-align: center; font-weight: 800; font-size: .95rem;}
button.vsample img {width: 100%; height: 70px; object-fit: contain; display: block; margin-bottom: 4px;}
button.vsample.selected {border-color: #111; box-shadow: 0 0 0 4px #facc15;}
label.drop {display: block; margin-top: 12px; background: #fff; border: 3px dashed #94a3b8; border-radius: 14px; padding: 16px; text-align: center; font-weight: 800; cursor: pointer; font-size: 1.05rem;}
label.drop.over {border-color: #B10202; background: #fff1f2;} label.drop input {display: none;}
.vpreview img {width: 100%; border: 3px solid #111; border-radius: 12px; margin-top: 12px; display: block;} .vcap {font-size: .9rem; color: #555;}
.vnote {font-size: .95rem; color: #555; margin-top: 8px;}
.vread, .vprop {background: #fff; border: 3px solid #111; border-radius: 14px; padding: 12px 14px; margin-top: 12px; color: #111;}
.vread .fh, .vprop .fh, .draft .fh {font-family: monospace; letter-spacing: .1em; color: #B10202; font-weight: 900; font-size: .9rem; margin-bottom: 6px;}
.vexam {margin-top: 8px; font-size: 1.05rem;} .vline {font-size: 1.15rem;} .vdup {margin-top: 6px; color: #7f1d1d; font-weight: 700;}
table.ptable {width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 1rem; background: #fff;}
table.ptable th, table.ptable td {border: 1px solid #e4e4e7; padding: 6px 8px; text-align: left; vertical-align: top;}
table.ptable th {background: #f1f1f3;} td.sev-major {color: #b91c1c; font-weight: 900;} td.sev-moderate {color: #b45309; font-weight: 800;}

/* ---------- Part D: your world ---------- */
.wr-pick {background: #fff; border: 3px solid #111; border-radius: 16px; padding: 14px 16px; font-size: 1.2rem; color: #111;}
.wr-banner {display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: #111; color: #fff; border-radius: 18px; padding: 16px 20px; margin-bottom: 14px;}
.wr-emoji {font-size: 3.2rem;} .wr-name {font-size: 1.7rem; font-weight: 900;} .wr-lesson {font-size: 1.2rem; color: #e5e5e5; margin-top: 4px;}
.wr-change {color: #facc15 !important; font-weight: 800;}
.wmission {background: #fff; border: 4px solid #111; border-radius: 20px; padding: 14px 18px; margin: 16px 0; color: #111;}
.wm-head {display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
.wm-n {font-weight: 900; color: #B10202;} .wm-title {font-size: 1.4rem; font-weight: 900;}
.wm-kind {background: #111; color: #fff; border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: .9rem;}
.wm-twin {margin-left: auto; background: #fef3c7; border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: .95rem;}
.ptable.twin td:first-child {font-weight: 700;}

/* ---------- what AI makes ---------- */
.mksrc {font-size: 1.15rem; background: #fff; border: 2px solid #e4e4e7; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px;}
.mkgrid {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start;}
.mktile {background: #fff; border: 3px solid #111; border-radius: 18px; padding: 14px; color: #111; display: grid; gap: 8px; align-content: start;}
.mk-h {font-size: 1.15rem; font-weight: 900; letter-spacing: .06em; color: #B10202;}
.mk-why {font-size: 1rem; background: #fff8db; border-radius: 10px; padding: 6px 8px;}
.mk-out {font-size: .92rem; color: #1e3a8a; border-top: 1px dashed #cbd5e1; padding-top: 6px;}
.mknote {font-size: .95rem; color: #444;}
.mkans {font-size: 1.1rem; background: #fff8db; border: 2px solid #111; border-radius: 12px; padding: 10px;}
.mkans .cite, span.cite {background: #111; color: #fff; border-radius: 6px; padding: 0 5px; font-family: Menlo, monospace; font-size: .9em;}
.mkimg img, .mkimg video, canvas.mkcanvas {width: 100%; border: 3px solid #111; border-radius: 12px; display: block; margin-top: 6px;}
.mkimg a.go {display: inline-block; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: #15803d; color: #fff !important; font-weight: 800; text-decoration: none; font-size: .95rem;}
.mktile .predbtn {padding: 10px !important; font-size: 1.05rem !important;}
.draft {background: #fffef7; border: 3px dashed #111; border-radius: 12px; padding: 10px;} .dtext {font-size: 1rem;}
.mkclose {margin-top: 18px; background: #111; color: #fff; font-size: 1.5rem; font-weight: 900; border-radius: 18px; padding: 18px 24px; text-align: center;}

/* ---------- Part G: the hearing ---------- */
.seats {display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px;}
.seat {background: #fff; border: 3px solid #111; border-radius: 16px; padding: 12px; text-align: center; display: grid; gap: 4px; color: #111;}
.seat span:last-child {font-size: .9rem; color: #555;}
.hav {font-size: 1.9rem; line-height: 1;} .hav.big {font-size: 3rem;}
.room {margin-top: 12px; display: grid; gap: 10px;}
.hb {display: grid; grid-template-columns: 3rem 1fr; gap: 10px; align-items: start; animation: pop .45s ease-out;}
.hbody {background: #fff; border: 3px solid #111; border-radius: 4px 16px 16px 16px; padding: 10px 14px; color: #111;}
.hb.chair .hbody {background: #f1f5f9; border-color: #475569;} .hb.you .hbody {background: #eef4ff; border-color: #2563eb;}
.hwho {font-size: .85rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #555;}
.htext {font-size: 1.2rem;} .hfix {color: #7c2d12; font-size: 1.05rem;}
.vstamp {display: inline-block; font-weight: 900; border-radius: 8px; padding: 2px 10px; margin-right: 6px; border: 3px solid;}
.vstamp.v-APPROVE {color: #15803d; border-color: #15803d;} .vstamp.v-NOTYET {color: #b45309; border-color: #b45309;} .vstamp.v-NO {color: #b91c1c; border-color: #b91c1c;}
.verdictcard {margin-top: 10px; border-radius: 20px; padding: 18px 22px; border: 5px solid; background: #fff; color: #111;}
.verdictcard.ok {border-color: #16a34a;} .verdictcard.meh {border-color: #d97706;} .verdictcard.bad {border-color: #dc2626;}
.vc-h {font-weight: 900; letter-spacing: .1em; color: #555;} .vc-v {font-size: 2.2rem; font-weight: 900; margin: 4px 0 10px;}
.vc-t {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center;} .vc-m {font-weight: 800;}
.vc-f {margin-top: 10px; font-size: 1.05rem;} .vc-n {margin-top: 8px; font-size: .95rem; color: #555;}
.kworld {background: #f0fdf4; border: 2px solid #16a34a; border-radius: 12px; padding: 10px 14px; font-size: 1.1rem; margin: 10px 0;}

/* ---------- Part H: the tutor and the quiz ---------- */
.tutorbox {background: #fff; border: 4px solid #111; border-radius: 20px; padding: 16px; color: #111;}
.tlog {display: grid; gap: 12px;} .tentry {border-bottom: 2px dashed #e4e4e7; padding-bottom: 10px;}
.tq {font-size: 1.2rem; font-weight: 800;} .ta {font-size: 1.15rem; background: #f8fafc; border-left: 6px solid #16a34a; border-radius: 0 12px 12px 0; padding: 10px 14px; margin-top: 6px;}
.ta.refused, .ta.stopped {border-left-color: #111; background: #f4f4f5;} .ta.queue {border-left-color: #d97706;} .ta.interrupt {border-left-color: #dc2626;} .ta.waiting {color: #666; font-style: italic;}
.tsum {margin-top: 8px; font-size: .95rem; color: #444;}
button.cite {font-family: Menlo, monospace; font-size: .85em; font-weight: 900; background: #111; color: #fff; border: none; border-radius: 6px; padding: 1px 6px; margin: 0 2px;}
span.cite.bad {background: #dc2626;}
.packcard {margin-top: 8px; background: #fff8db; border: 2px solid #d97706; border-radius: 10px; padding: 8px 10px; font-size: 1rem;}
.tutorbar {align-items: center;} .tutorbar .runbtn {flex: 1 1 320px;}
.qmap {display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin-bottom: 10px;}
a.qdot {text-decoration: none; color: #111; background: #fff; border: 3px solid #d4d4d8; border-radius: 12px; padding: 6px; text-align: center; font-size: 1.5rem;}
a.qdot span {display: block; font-size: .72rem; font-weight: 800;}
a.qdot.m-green {border-color: #16a34a; background: #f0fdf4;} a.qdot.m-yellow {border-color: #d97706; background: #fffbeb;} a.qdot.m-red {border-color: #dc2626; background: #fef2f2;}
.qcard {background: #fff; border: 4px solid #111; border-radius: 20px; padding: 16px 18px; color: #111;}
.qmeta {font-weight: 800; color: #444;} .qq {font-size: 1.5rem; font-weight: 900; margin: 8px 0;}
.rubric {background: #eff6ff; border: 2px solid #2563eb; border-radius: 12px; padding: 10px 14px; font-size: 1.05rem;}
.grade {margin-top: 12px; border-radius: 16px; padding: 14px 18px; border: 4px solid;}
.grade.ok {border-color: #16a34a; background: #f0fdf4;} .grade.meh {border-color: #d97706; background: #fffbeb;} .grade.bad {border-color: #dc2626; background: #fef2f2;}
.gscore {font-size: 1.6rem; font-weight: 900;} .gpoints {margin: 8px 0; font-size: 1.05rem;} .gfb {font-size: 1.1rem;} .gagain {margin-top: 8px; font-weight: 800;}

/* ---------- narrower screens: everything stacks ---------- */
@media (max-width: 1400px) {.stations.n6 {grid-template-columns: repeat(3, minmax(0, 1fr));} .stations.n5 {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .mkgrid {grid-template-columns: repeat(3, minmax(0, 1fr));} .cards {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 1000px) {
  .pair.compact {grid-template-columns: 1fr;} .callpill {margin-left: 0;}
  .roundgrid, .simgrid, .govgrid, .signoff, .signrows, .canvas, .bar, .vgrid, .roadmap, .cards, .mkgrid, .seats, .switches, .lane, .vc-t {grid-template-columns: 1fr;}
  .stations.n5, .stations.n6, .stations.n2 {grid-template-columns: 1fr 1fr;} .pipe {grid-template-columns: 1fr;} .ps-ar {transform: rotate(90deg);}
  .qmap {grid-template-columns: repeat(3, 1fr);} .wr-banner {grid-template-columns: 1fr;} .act {grid-template-columns: 1fr;} .act .an {grid-row: auto; width: max-content;}
  .act h2 {font-size: 2rem;} .acts, .attackgrid, .keepgrid {grid-template-columns: 1fr;} .bridge {border-radius: 22px; font-size: 1.15rem;} .benchbar {flex-direction: column;}}

/* ---------- embedded view and the key note ---------- */
.framebar {background: #fef3c7; border: 2px solid #d97706; border-radius: 0 0 12px 12px; padding: 8px 14px; font-size: 1.05rem; font-weight: 700; color: #111; margin-bottom: 8px;}
.framebar a {color: #B10202;}
.keynote {margin-top: 10px; font-size: 1rem; color: #333; background: #f0fdf4; border: 2px solid #16a34a; border-radius: 12px; padding: 8px 12px;}
.vchoice {display: grid; gap: 6px; margin: 4px 0 8px;} .vchoice .checkfield {font-weight: 600; font-size: 1.02rem;} .vchoice input {width: 18px; height: 18px;}
.vrow {font-size: 1rem; display: flex; gap: 10px; align-items: center;} .vrow select {width: auto; min-width: 320px; font-size: 1rem; padding: 6px 10px;}
.speaknote {font-size: .9rem; color: #444; margin-left: 6px;}

/* ---------- the narration toggle and the sound unlock ---------- */
button.togglebtn {font-size: 1.1rem; font-weight: 900; padding: 12px 18px; border-radius: 999px; border: 3px solid #111; background: #fff; color: #111;}
button.togglebtn.on {background: #15803d; border-color: #15803d; color: #fff;}
.narnote {display: block; margin: 4px 0 10px;}
.lvoice {display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 1.05rem; font-weight: 800; color: #111;}
.lvoice select {font: inherit; font-size: 1rem; font-weight: 600; padding: 8px 10px; border: 2px solid #d4d4d8; border-radius: 10px; background: #fff; color: #111;}
button.enable-sound {font-size: 1rem; font-weight: 900; padding: 8px 14px; border-radius: 10px; border: 3px solid #B10202; background: #fff; color: #B10202; margin-left: 6px;}
button.enable-sound:hover {background: #B10202; color: #fff;}

/* ---------- the line as "what you learned": two lines a card, a photo, the reading; the now panel; the wrap-up; the bench job ---------- */
.st-ph {width: 100%; height: 86px; object-fit: cover; border-radius: 10px; margin: 8px 0 2px; display: block;}
.st-row.learn {color: #14532d;} .st-row.learn .k {color: #15803d;}
.st-row.better {color: #1e3a8a;} .st-row.better .k {color: #2563eb;}
.st-read {font-size: .8rem; font-weight: 700; color: #64748b; margin-top: auto; padding-top: 6px;}
.line-now {margin-top: 14px; background: #fff; color: #111; border-radius: 14px; padding: 12px 16px; font-size: 1.05rem; line-height: 1.4;}
.line-now .ln-head {display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 1.15rem;}
.line-now .ln-rows {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;}
.line-now .k {display: block; font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: #64748b;}
.line-now .q {background: #f0fdf4; border-radius: 8px; padding: 4px 8px;} .line-now .q .k {color: #15803d;}
.line-now .no {color: #991b1b;} .line-now .no .k {color: #b91c1c;}
.ln-done {font-weight: 800; font-size: 1.15rem;}
.wrap {background: #fff; border: 3px solid #111; border-radius: 18px; padding: 18px 22px; color: #111; margin-top: 16px;}
.wrap-h {font-size: 1.5rem; font-weight: 900; margin-bottom: 6px;}
.wrap-l {margin: 4px 0 8px; padding-left: 24px;} .wrap-l li {margin: 8px 0; font-size: 1.15rem; line-height: 1.45;}
.wrap-why {background: #fef3c7; border-radius: 12px; padding: 12px 16px; margin: 10px 0 14px; font-size: 1.15rem; line-height: 1.45;}
.wrap-next {display: flex; flex-wrap: wrap; gap: 14px; align-items: center;} .wrap-or {color: #555; font-size: 1.05rem;}
.benchjob {background: #fff; border: 3px solid #B10202; border-radius: 18px; padding: 16px 22px; margin: 12px 0 18px; color: #111;}
.bj-h {font-size: 1.4rem; font-weight: 900;} .bj-t {font-size: .95rem; font-weight: 700; color: #666; margin-left: 8px;}
.bj-l {margin: 6px 0; padding-left: 24px;} .bj-l li {margin: 7px 0; font-size: 1.12rem; line-height: 1.45;}
.bj-p {display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 1.08rem; margin-top: 8px;}
.bj-bar {flex: 1 1 200px; height: 12px; background: #f1f1f3; border-radius: 999px; overflow: hidden;} .bj-bar i {display: block; height: 100%; background: #16a34a;}
.bj-done {margin-top: 10px; background: #dcfce7; border-radius: 10px; padding: 10px 14px; font-weight: 800;}
.bj-tip {margin-top: 8px; color: #555;}
.w-borrow {margin-top: 16px; color: #555; font-size: 1.05rem;} .w-borrow .chips {margin-top: 6px;}
@media (max-width: 1000px) {.line-now .ln-rows {grid-template-columns: 1fr;}}

/* ---------- the send-off: the last lab ---------- */
.sendoff {background: linear-gradient(135deg, #111 0%, #3b0a0a 100%); color: #fff; border-radius: 26px; padding: 34px 40px; margin: 40px 0 18px;}
.sendoff .so-k {display: inline-block; background: #B10202; color: #fff; font-weight: 900; letter-spacing: .12em; padding: 6px 14px; border-radius: 10px; font-size: .95rem;}
.sendoff h2 {font-size: 2.6rem; font-weight: 900; margin: 14px 0 10px; color: #fff; line-height: 1.15;}
.sendoff .so-lead {font-size: 1.35rem; color: #f5f5f5; margin: 0 0 10px;}
.sendoff .so-list {list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px;}
.sendoff .so-list li {font-size: 1.2rem; line-height: 1.45; background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 14px;}
.sendoff .so-close {font-size: 1.4rem; font-weight: 800; color: #facc15; line-height: 1.45; margin: 8px 0 18px;}
.sendoff .so-acts {display: flex; flex-wrap: wrap; gap: 14px;} .sendoff .so-acts a {text-decoration: none;}
@media (max-width: 1000px) {.sendoff .so-list {grid-template-columns: 1fr;} .sendoff h2 {font-size: 2rem;}}

.sendoff .so-acts a {display: inline-block; font-weight: 900; font-size: 1.15rem; padding: 14px 22px; border-radius: 14px;}
.sendoff .so-acts a.runbtn {background: #B10202; color: #fff;} .sendoff .so-acts a.predbtn {background: #fff; color: #111;}
.lane-after .st-ph {height: 140px; object-position: center 28%;}

/* Lab 13: no prediction buttons on this page (his call, 2026-10-18): the run itself is the lesson. */
#examples .predict, #wr_missions .predict, #y_predict, #wq_predict {display: none !important;}

.kpara textarea {min-height: 9rem;} .kpara .mini {margin-top: 8px;}
.kmore {margin: 12px 0; background: #fff; border: 2px dashed #cbd5e1; border-radius: 14px; padding: 10px 14px;} .kmore > summary {cursor: pointer; font-weight: 800;}