/* =========================================================
   Handle With Care: a SIIRF data classification game
   ========================================================= */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-italic.woff2") format("woff2"); font-style: italic; font-weight: 700; font-display: swap; }

:root {
  --shell: #F6F3EC; --sand: #EDE7D9; --line: #E3DCCB; --paper: #FFFFFF; --card: #FBF7EC;
  --slate: #2F3E4E; --slate-dark: #1F2A36; --ochre: #C9963A; --accent: #B7862B;
  --ink: #1F2933; --muted: #56606B; --good: #2F6B4A; --bad: #9B3B2E;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--shell); line-height: 1.55; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .4em; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 .8em; }
a { color: var(--slate); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 22px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn { display: inline-block; font: inherit; font-weight: 800; font-size: .95rem; padding: 11px 22px; border-radius: 999px; border: 2px solid var(--slate); background: var(--slate); color: #fff; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--slate-dark); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.soft { background: transparent; color: var(--slate); }
.btn.soft:hover { background: var(--sand); }
.btn.ochre { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }
.btn.small { padding: 7px 14px; font-size: .85rem; }

/* ===== Top bar ===== */
.topbar { background: var(--slate); color: #F6F3EC; }
.topbar .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.brand img { height: 26px; width: auto; display: block; }
.app-name { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.2rem; color: #E0B45A; }
.to-siirf { margin-left: auto; color: #E9E6DD; font-weight: 600; font-size: .92rem; text-decoration: none; }
.to-siirf:hover { color: #fff; text-decoration: underline; }

/* ===== Start screen ===== */
.setup { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px; padding: 40px 0 30px; align-items: start; }
.kicker { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.setup h1 { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--slate); }
.lead { font-size: 1.08rem; color: var(--muted); }
.how { list-style: none; counter-reset: s; padding: 0; margin: 18px 0; display: grid; gap: 8px; }
.how li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.how li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--slate); color: #fff; font-weight: 800; }
.how span { color: var(--muted); font-size: .92rem; }
.you-get { color: var(--muted); }
.setup-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 14px; }
.setup-card h2 { font-size: 1.4rem; margin: 0; }
.setup-card label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.setup-card input[type="text"] { font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); width: 100%; }
.opt { font-weight: 400; color: var(--muted); }
.team-count { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.team-count legend { font-weight: 700; font-size: .92rem; margin-bottom: 6px; padding: 0; }
.team-count label { position: relative; display: block; }
.team-count input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.team-count span { display: block; text-align: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; background: var(--shell); cursor: pointer; }
.team-count input:checked + span { background: var(--slate); color: #fff; border-color: var(--slate); }
.team-count input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
p.small, .privacy { font-size: .86rem; color: var(--muted); margin: 0; }
.privacy { background: var(--shell); border-radius: 10px; padding: 12px 14px; }
@media (max-width: 860px) { .setup { grid-template-columns: minmax(0, 1fr); padding-top: 24px; } }

/* ===== Game layout ===== */
.game { padding: 14px 0 24px; }
.game-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.game-head h1 { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.6rem; color: var(--slate); margin: 0; }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.steps li { padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--sand); color: var(--muted); }
.steps li.done { background: #DCE6DD; color: var(--good); }
.steps li.now { background: var(--slate); color: #fff; }
.team-tabs { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.team-tab { font: inherit; font-weight: 700; font-size: .88rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; border-left: 5px solid var(--tc); }
.team-tab[aria-selected="true"] { outline: 3px solid var(--tc); }

.stage {
  border-radius: 24px; padding: 16px; min-height: 560px; color: #F3EBD6;
  background: radial-gradient(ellipse at 50% 20%, #22504B 0%, #17393A 55%, #0F2827 100%);
  border: 7px solid #4A3322; box-shadow: inset 0 0 50px rgba(0, 0, 0, .5), 0 22px 40px -24px rgba(31, 41, 51, .55);
}
.brief { background: #F3EBD6; color: var(--ink); border-radius: 12px; padding: 12px 18px; margin-bottom: 14px; }
.brief h2 { font-size: 1.25rem; margin: 0 0 2px; }
.brief p { margin: 0; font-size: 1rem; }
.panel { background: var(--card); color: var(--ink); border-radius: 16px; padding: 18px; }
.dark-panel { background: rgba(0, 0, 0, .22); border-radius: 14px; padding: 14px; color: #E9E6DD; font-size: .92rem; }
.dark-panel h3, .panel-label { margin: 0 0 8px; color: #E0B45A; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font); }
.game-nav { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.game-nav p { flex: 1; margin: 0; text-align: center; color: var(--muted); font-size: .92rem; }
.three { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.two { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .three { grid-template-columns: 230px minmax(0, 1fr); } .three > .side-right { grid-column: 1 / -1; } }
@media (max-width: 760px) { .three, .two { grid-template-columns: minmax(0, 1fr); } .stage { padding: 10px; border-width: 4px; border-radius: 16px; } .game-nav { flex-wrap: wrap; } .game-nav p { order: -1; flex-basis: 100%; } .team-tabs { margin-left: 0; } }

/* ===== Data list (left panel) ===== */
.data-list { display: flex; flex-direction: column; gap: 7px; }
.item-btn { font: inherit; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; background: var(--card); color: var(--ink); border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; font-weight: 700; font-size: .9rem; }
.item-btn small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; }
.item-btn.current { outline: 3px solid #E0B45A; }
.item-btn.todo { opacity: .78; }
.badge { flex: none; color: #fff; font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--lc, var(--slate)); }
.pending { flex: none; font-size: .72rem; color: #8A6A2E; font-weight: 800; }

/* ===== Round 1: your data ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.data-table th { text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A6A2E; padding: 0 8px 8px; }
.data-table td { border-top: 1px solid var(--line); padding: 8px; vertical-align: middle; }
.data-table td:first-child { width: 34px; }
.num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sand); font-size: .75rem; font-weight: 800; }
.remove { font: inherit; background: none; border: 0; color: var(--bad); font-weight: 800; cursor: pointer; font-size: 1.1rem; }
.add-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 8px; margin-top: 12px; }
.add-row input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; width: 100%; }
.examples { display: flex; flex-wrap: wrap; gap: 6px; }
.example { font: inherit; font-size: .8rem; font-weight: 700; background: var(--card); color: var(--ink); border: 0; border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.empty { color: var(--muted); padding: 12px 8px; }
@media (max-width: 760px) { .add-row { grid-template-columns: minmax(0, 1fr); } .data-table th:nth-child(4), .data-table td:nth-child(4) { display: none; } }

/* ===== Round 2: the matrix ===== */
.matrix-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.matrix-head h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin: 0; }
.matrix-head .sub { color: var(--muted); font-size: .85rem; margin: 0; }
.matrix { width: 100%; border-collapse: separate; border-spacing: 5px 4px; margin-top: 4px; }
.matrix thead th { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8A6A2E; text-align: center; padding: 4px; }
.matrix thead th:first-child { text-align: left; }
.matrix tbody th { text-align: left; width: 30%; font-size: .9rem; padding: 2px 0; }
.matrix tbody th small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; line-height: 1.3; }
.cell { display: block; width: 100%; font: inherit; text-align: center; padding: 6px 3px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; font-weight: 700; font-size: .82rem; line-height: 1.2; }
.cell em { display: block; font-style: normal; font-weight: 500; font-size: .68rem; margin-top: 2px; opacity: .9; }
.cell[aria-pressed="true"] { background: var(--rc); color: #fff; border-color: var(--rc); }
.r0 { --rc: #5E6F63; } .r1 { --rc: #4A5D70; } .r2 { --rc: #B7862B; } .r3 { --rc: #9B3B2E; }
.special { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.special p { margin: 0 0 6px; font-weight: 800; font-size: .85rem; }
.special p span, .publish p span { font-weight: 500; color: var(--muted); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.check { display: flex; gap: 8px; align-items: center; font-size: .8rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--bad); flex: none; }
.publish { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.publish p { margin: 0; font-weight: 800; font-size: .85rem; }
.result-card { border-radius: 16px; padding: 18px; color: #fff; background: var(--lc, #56606B); }
.result-card small { font-weight: 800; letter-spacing: .12em; font-size: .72rem; opacity: .9; }
.result-card h2 { color: #fff; font-size: 1.8rem; margin: 4px 0 6px; }
.result-card ul { margin: 0; padding-left: 18px; font-size: .88rem; }
.rules-key div { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.rules-key i { flex: none; width: 12px; height: 12px; border-radius: 3px; margin-top: 4px; background: var(--lc); }
.decide { display: grid; gap: 8px; }
.override { background: rgba(0, 0, 0, .22); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.override label { display: grid; gap: 4px; font-size: .85rem; font-weight: 700; color: #F3EBD6; }
.override select, .override textarea { font: inherit; font-weight: 400; padding: 8px 10px; border-radius: 8px; border: 0; width: 100%; color: var(--ink); }
.override textarea { min-height: 64px; resize: vertical; }
.saved-note { font-size: .85rem; color: #C9D3CF; margin: 0; }
@media (max-width: 760px) {
  .matrix thead { display: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100%; }
  .matrix tr { padding: 8px 0; border-top: 1px solid var(--line); }
  .matrix tbody td { display: inline-block; width: calc(50% - 4px); padding: 2px; }
  .checks { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Dialog: the matrix for reference ===== */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(1000px, 94vw); max-height: 90vh; color: var(--ink); background: var(--paper); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
dialog::backdrop { background: rgba(15, 22, 30, .6); }
.dialog-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--slate); color: #fff; }
.dialog-head h2 { color: #fff; margin: 0; font-size: 1.3rem; }
.close { font: inherit; font-size: 1.6rem; line-height: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; }
#matrixReference { padding: 16px 20px 22px; overflow-x: auto; }
.ref { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
.ref th, .ref td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.ref thead th { color: #fff; font-size: .8rem; }
.ref tbody th small { display: block; font-weight: 500; color: var(--muted); }
.ref-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.ref-rules h3 { font-size: 1rem; margin-bottom: 6px; }
.ref-rules ul { margin: 0; padding-left: 18px; font-size: .9rem; }
@media (max-width: 640px) { .ref-rules { grid-template-columns: minmax(0, 1fr); } }

/* ===== Round 3: handling ===== */
.policy-card { border-left: 8px solid var(--lc); }
.policy-card .badge { font-size: .75rem; }
.policy-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin: 10px 0 6px; }
.policy-card .rule { background: #F3EBD6; border-radius: 10px; padding: 10px 12px; font-size: .86rem; margin-top: 10px; }
.groups { display: grid; gap: 10px; }
.group { background: rgba(0, 0, 0, .2); border-radius: 14px; padding: 12px 14px; }
.group h3 { margin: 0 0 8px; color: #E0B45A; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font); }
.option { font: inherit; display: inline-block; margin: 0 6px 6px 0; padding: 9px 13px; border-radius: 10px; border: 0; background: var(--card); color: var(--ink); font-weight: 600; font-size: .88rem; cursor: pointer; text-align: left; }
.option[aria-pressed="true"] { outline: 3px solid #E0B45A; background: #fff; }
.feedback { margin: 4px 0 0; font-size: .86rem; padding: 7px 10px; border-radius: 8px; }
.feedback.ok { background: rgba(62, 138, 99, .25); color: #D7F0DF; }
.feedback.no { background: rgba(181, 72, 58, .3); color: #FBDCD6; }

/* ===== Round 4: access ===== */
.req { background: var(--card); color: var(--ink); border-radius: 16px; padding: 20px; }
.who { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--slate); color: #fff; font-weight: 800; flex: none; }
.who strong { display: block; font-size: 1.05rem; }
.who span { color: var(--muted); font-size: .88rem; }
.req .request { font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; }
.decisions { display: grid; gap: 10px; }
.decision { font: inherit; text-align: left; border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; background: rgba(0, 0, 0, .2); color: #F3EBD6; cursor: pointer; }
.decision strong { display: block; font-size: 1.05rem; }
.decision span { font-size: .86rem; color: #C9D3CF; }
.decision[aria-pressed="true"] { border-color: #E0B45A; background: rgba(224, 180, 90, .12); }
.conds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cond { display: flex; gap: 6px; align-items: center; background: var(--card); color: var(--ink); padding: 7px 10px; border-radius: 9px; font-weight: 700; font-size: .84rem; cursor: pointer; }
.cond input { accent-color: var(--slate); }
.answer { background: #F3EBD6; color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: .92rem; }
.answer.match { border-left: 6px solid var(--good); }
.answer.differ { border-left: 6px solid var(--bad); }
.answer p { margin: 4px 0 0; }
.scenario-dots { display: flex; gap: 6px; margin-top: 10px; }
.scenario-dots button { font: inherit; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #F3EBD6; font-weight: 800; cursor: pointer; font-size: .8rem; }
.scenario-dots button.done { background: #3E8A63; }
.scenario-dots button.current { outline: 3px solid #E0B45A; }

/* ===== Round 5: incidents ===== */
.incident { background: #9B3B2E; color: #fff; border-radius: 16px; padding: 22px; }
.incident small { font-weight: 800; letter-spacing: .12em; font-size: .75rem; opacity: .85; }
.incident h3 { color: #fff; font-family: var(--serif); font-weight: 600; font-size: 1.6rem; margin: 8px 0; }
.incident-nav { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.incident-nav .btn { border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent; }
.incident-nav .btn.ochre { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }
.outcomes { display: grid; gap: 10px; }
.team-outcome { background: var(--card); color: var(--ink); border-radius: 14px; padding: 12px 14px; border-left: 6px solid var(--tc); }
.team-outcome h4 { margin: 0 0 6px; font-size: 1rem; }
.outcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.outcome:first-of-type { border-top: 0; }
.outcome small { grid-column: 1 / -1; color: var(--muted); }
.tag { font-weight: 800; font-size: .74rem; padding: 3px 9px; border-radius: 999px; color: #fff; align-self: start; }
.tag.protected { background: var(--good); } .tag.exposed { background: var(--bad); } .tag.low { background: #5E6F63; }

/* ===== Data register ===== */
.register { background: var(--card); color: var(--ink); border-radius: 18px; padding: 20px; }
.register-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.register-head h2 { font-size: 1.6rem; margin: 0 0 4px; }
.register-head p { margin: 0; color: var(--muted); }
.reg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-scroll { overflow-x: auto; }
.reg-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 900px; }
.reg-table th { text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A6A2E; padding: 8px; border-bottom: 2px solid var(--line); }
.reg-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.reg-table .badge { display: inline-block; }
.gaps { margin: 2px 0 0; padding-left: 16px; color: var(--bad); }
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.summary div { background: #F3EBD6; border-radius: 12px; padding: 10px 12px; }
.summary b { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.6rem; display: block; }
.summary span { font-size: .82rem; color: var(--muted); }
@media (max-width: 760px) { .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.foot { padding: 24px 0 30px; font-size: .85rem; color: var(--muted); text-align: center; }

@media print {
  .topbar, .game-head, .game-nav, .foot, .reg-actions, #setup { display: none !important; }
  body { background: #fff; }
  .stage { background: none; border: 0; box-shadow: none; padding: 0; color: var(--ink); }
  .register { padding: 0; }
  .reg-table { min-width: 0; font-size: 9pt; }
}

/* ===== Round 1 layout ===== */
.data-lay { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.data-lay .dark-panel ul { margin: 0; padding-left: 18px; }
.data-lay .dark-panel li { margin-bottom: 5px; }
.data-lay .dark-panel + .dark-panel { margin-top: 12px; }
.panel-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.panel-title h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin: 0; }
.panel-title span { color: var(--muted); font-size: .85rem; }
@media (max-width: 860px) { .data-lay { grid-template-columns: minmax(0, 1fr); } }
.next-item { margin-top: 10px; }
.new-session { margin-top: 14px; }

/* ===== Phone fixes ===== */
@media (max-width: 560px) {
  .topbar .wrap { gap: 10px; }
  .app-name { font-size: 1.05rem; white-space: nowrap; }
  .to-siirf { display: none; }
}
@media (max-width: 760px) {
  .matrix tbody th { width: 100%; padding-bottom: 4px; }
  .reg-table { min-width: 0; }
  .reg-table thead { display: none; }
  .reg-table, .reg-table tbody, .reg-table tr, .reg-table td { display: block; width: 100%; }
  .reg-table tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
  .reg-table td { border: 0; padding: 4px 0; }
  .reg-table td::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A6A2E; }
  .reg-table td:first-child::before { display: none; }
}

/* =========================================================
   Clean, light theme (overrides the card-table look above)
   ========================================================= */
body { background: #F7F7F5; }
.stage { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; color: var(--ink); border-radius: 0; }
.brief { background: none; padding: 0; margin: 4px 0 14px; }
.brief h2 { font-size: 1.45rem; }
.brief p { color: var(--muted); max-width: 75ch; }
.panel, .req, .register, .team-outcome { background: #fff; border: 1px solid #E5E5E0; box-shadow: none; }
.dark-panel, .group, .override, .decision { background: #fff; border: 1px solid #E5E5E0; color: var(--ink); }
.dark-panel h3, .panel-label, .group h3 { color: var(--muted); }
.dark-panel ul, .data-lay .dark-panel li { color: var(--ink); }
.saved-note { color: var(--muted); }
.override label { color: var(--ink); }
.override select, .override textarea { border: 1px solid #E5E5E0; }
.override summary { cursor: pointer; font-weight: 700; color: var(--slate); }

/* Steps: clickable tabs */
.game-head { margin: 6px 0 10px; }
.steps { gap: 4px; }
.step-btn { font: inherit; font-weight: 700; font-size: .85rem; padding: 8px 14px; border-radius: 999px; border: 1px solid #E5E5E0; background: #fff; color: var(--muted); cursor: pointer; }
.step-btn:hover { border-color: var(--slate); color: var(--slate); }
.step-btn[aria-current="step"] { background: var(--slate); border-color: var(--slate); color: #fff; }
.step-btn .tick { color: var(--good); margin-right: 4px; }
.step-btn[aria-current="step"] .tick { color: #fff; }
.team-tab { background: #fff; }

/* Item list */
.item-btn { background: #F7F7F5; border: 1px solid #E5E5E0; }
.item-btn:hover { border-color: var(--slate); }
.item-btn.current { outline: 2px solid var(--slate); outline-offset: 0; background: #fff; }
.item-btn.todo { opacity: 1; }
.pending { color: var(--muted); font-weight: 700; }
.done-tag { flex: none; font-size: .72rem; font-weight: 800; color: var(--good); }

/* Moving between items */
.item-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #E5E5E0; }
.item-nav .count { flex: 1; text-align: center; font-size: .88rem; color: var(--muted); font-weight: 700; }
.link-btn { font: inherit; font-weight: 700; font-size: .88rem; background: none; border: 0; color: var(--slate); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.link-btn:hover { background: #F0F1F2; }
.link-btn:disabled { opacity: .35; cursor: default; background: none; }

/* Choices */
.option { background: #F7F7F5; border: 1px solid #E5E5E0; }
.option:hover { border-color: var(--slate); }
.option[aria-pressed="true"] { outline: 0; background: var(--slate); border-color: var(--slate); color: #fff; }
.feedback.ok { background: #EAF4EE; color: #245A3B; }
.feedback.no { background: #FBEDEA; color: #8A3328; }
.feedback.info { background: #F0F1F2; color: var(--muted); }
.decision span { color: var(--muted); }
.decision[aria-pressed="true"] { border-color: var(--slate); background: #F2F4F6; }
.cond { background: #F7F7F5; border: 1px solid #E5E5E0; }
.answer { background: #F7F7F5; }
.scenario-dots button { background: #F0F1F2; color: var(--ink); }
.scenario-dots button.done { background: var(--good); color: #fff; }
.scenario-dots button.current { outline: 2px solid var(--slate); }
.rules-key { font-size: .88rem; }
.result-card { background: #8A8F99; }
.check { background: #fff; }
.incident { background: #fff; color: var(--ink); border: 1px solid #E5E5E0; border-top: 6px solid var(--bad); }
.incident small { color: var(--bad); opacity: 1; }
.incident h3 { color: var(--ink); }
.incident-nav .btn { border-color: var(--slate); color: var(--slate); background: transparent; }
.incident-nav .btn.ochre { background: var(--slate); border-color: var(--slate); color: #fff; }
.summary div { background: #F7F7F5; }
.notice { background: #FFF8E6; border: 1px solid #F0DFB4; color: #6B5320; border-radius: 10px; padding: 10px 12px; font-size: .9rem; margin: 0 0 12px; }
.notice .link-btn { padding: 0 4px; }
.not-set { color: var(--muted); font-style: italic; }
.game-nav p { font-size: .88rem; }
.steps li { padding: 0; background: none; border-radius: 0; }
.who .avatar { color: #fff; }
.btn.ochre { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn.ochre:hover { background: var(--slate-dark); }
.access-nav { margin-bottom: 14px; }
.access-nav .item-nav { margin: 0; padding: 0; border: 0; }

/* =========================================================
   Lighter, easier-to-read type and clearer navigation
   ========================================================= */
body { font-size: 16px; line-height: 1.6; font-weight: 400; }
h1, h2, h3, .brief h2, .matrix-head h3, .panel-title h3, .policy-card h3, .register-head h2, .incident h3, .result-card h2, .setup-card h2, dialog h2 {
  font-family: var(--font); font-weight: 600; letter-spacing: -0.01em;
}
.setup h1, .app-name { font-family: var(--font); font-style: normal; font-weight: 600; }
.setup h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
.app-name { font-size: 1.05rem; color: #F3DFA9; }
strong, b { font-weight: 600; }
.btn, .step-btn, .team-tab, .option, .cell, .item-btn, .example, .cond, .check, .decision strong, .summary b { font-weight: 600; }
.kicker, .dark-panel h3, .panel-label, .group h3, .matrix thead th, .data-table th, .reg-table th, .result-card small, .incident small, .tag, .badge, .pending, .done-tag {
  font-weight: 600; letter-spacing: .05em;
}
.summary b { font-family: var(--font); font-style: normal; font-size: 1.5rem; }
.cell { font-size: .84rem; }
.cell em { font-size: .72rem; }
.matrix tbody th { font-weight: 600; }
.matrix tbody th small, .item-btn small { font-size: .78rem; }
.brief h2 { font-size: 1.4rem; }
.result-card h2 { font-size: 1.6rem; }
.option, .decision span, .feedback, .answer, .rules-key, .check { font-size: .92rem; }

/* Editable data rows */
.data-table td input { font: inherit; font-size: .95rem; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #E5E5E0; border-radius: 8px; background: #FAFAF8; color: var(--ink); }
.data-table td:nth-child(2) input { font-weight: 600; }
.data-table td input:hover { border-color: #CDD2D7; background: #fff; }
.data-table td input:focus { border-color: var(--slate); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(47, 62, 78, .15); }
.data-table td input::placeholder { color: #A3A7AD; font-weight: 400; }
@media (max-width: 760px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { position: relative; border: 1px solid #E5E5E0; border-radius: 12px; padding: 8px 40px 8px 8px; margin-bottom: 8px; }
  .data-table td { border: 0; padding: 2px 0; }
  .data-table td:first-child { display: none; }
  .data-table td:nth-child(4) { display: block; }
  .data-table td:last-child { position: absolute; top: 8px; right: 6px; width: auto; }
}

/* Clear navigation buttons */
.item-nav { gap: 10px; }
.nav-btn { font: inherit; font-weight: 600; font-size: .92rem; padding: 9px 16px; border-radius: 999px; border: 1px solid #CDD2D7; background: #fff; color: var(--slate); cursor: pointer; }
.nav-btn:hover:not(:disabled) { border-color: var(--slate); background: #F2F4F6; }
.nav-btn:disabled { opacity: .35; cursor: default; }
.nav-btn.skip { border-style: dashed; }
.item-nav .btn.small { padding: 9px 18px; font-size: .92rem; }
.item-nav .count { font-weight: 600; }
.game-nav .btn { padding: 12px 22px; }
.step-btn { padding: 9px 16px; font-size: .9rem; }
.result-card { background: var(--lc, #8A8F99); }
.check { font-weight: 400; }