/* «Salen» – design tokens copied from the lecture slides (spec §6.1).
   Square corners, no shadows, no gradients, no emoji. */
:root {
  --bg: #192232; --card: #243247; --card-2: #2B3B55;
  --text: #E8EDF3; --muted: #B4BFCF; --white: #FFFFFF; --line: #C9D1DB;
  --blue: #2F6DB5; --green: #2E9E6B; --coral: #D9534F; --amber: #E9A23B; --violet: #7B6CC0; --teal: #2BA6A0;
  --amber-tint: #5A4A1E; --coral-tint: #5A2F2E; --green-tint: #2E5A3F;
  --font-title: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-icon: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
  --radius: 0;
  --line-40: rgba(201, 209, 219, .4);
  --line-30: rgba(201, 209, 219, .3);
  --on-accent: #192232;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F4F6F9; --card: #FFFFFF; --card-2: #E8EDF3; --text: #192232; --muted: #4A5568; --white: #192232;
  --line: #4A5568; --line-40: rgba(74, 85, 104, .4); --line-30: rgba(74, 85, 104, .3);
  --amber-tint: #F6E7C8; --coral-tint: #F5D9D8; --green-tint: #D3EEDF;
  color-scheme: light;
}
* { box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.3; }
h1, h2, h3 { font-family: var(--font-title); color: var(--white); margin: 0 0 .4em; line-height: 1.2; }
h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 18px; }
p { margin: 0 0 .7em; }
a { color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
.sym { font-family: var(--font-icon); font-variant-emoji: text; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- page frame ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 16px; }
.wide { max-width: 1280px; }
.titlebar { padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--line-40); }
.titlebar .kicker { color: var(--muted); font-size: 15px; margin-bottom: 2px; }

/* ---------- card with inset accent bar ---------- */
.card { position: relative; background: var(--card); padding: 18px 16px 14px; margin: 0 0 14px; --accent: var(--blue); }
.card::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 6px; background: var(--accent); }
.card.row-accent { padding-left: 22px; }
.card.row-accent::before { top: 12px; bottom: 12px; left: 0; right: auto; width: 6px; height: auto; }
.card > h2:first-child, .card > h3:first-child, .card > .card-head:first-child { margin-top: 4px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.card-head h2, .card-head h3 { margin: 0; flex: 1; }
.card .body { color: var(--muted); }
.accent-blue { --accent: var(--blue); } .accent-green { --accent: var(--green); } .accent-coral { --accent: var(--coral); }
.accent-amber { --accent: var(--amber); } .accent-violet { --accent: var(--violet); } .accent-teal { --accent: var(--teal); }

.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px;
  background: var(--accent, var(--blue)); color: var(--white); font-weight: bold; font-family: var(--font-title); flex: none; }
.badge.on-light, .badge.amber, .badge.teal { color: var(--on-accent); }
.badge.amber { background: var(--amber); } .badge.teal { background: var(--teal); } .badge.green { background: var(--green); color: #fff; }
.badge.blue { background: var(--blue); color: #fff; } .badge.violet { background: var(--violet); color: #fff; } .badge.coral { background: var(--coral); color: #fff; }

/* ---------- chips ---------- */
.chip { display: inline-block; background: var(--card-2); color: var(--text); padding: 6px 10px; margin: 2px 4px 2px 0; text-align: center; }
.chip.question { background: var(--amber); color: var(--on-accent); font-weight: bold; }
.chip.answer-here { background: var(--amber-tint); color: var(--amber); font-weight: bold; }
.chip.warn { background: var(--coral-tint); color: var(--text); }
.chip.practical { background: var(--green-tint); color: var(--text); }
.chip.colored { color: #fff; }
.chip.colored.dark { color: var(--on-accent); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px;
  background: var(--amber); color: var(--on-accent); border: 0; font-weight: bold; cursor: pointer; text-decoration: none; }
.btn.secondary { background: var(--card-2); color: var(--text); }
.btn.danger { background: var(--coral); color: #fff; }
.btn.green { background: var(--green); color: #fff; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 15px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, .ibtn:focus-visible, .opt:focus-visible, .star:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- forms (match the form slide) ---------- */
.frow { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 14px; }
.frow-label { background: var(--card); padding: 10px 12px 8px; display: flex; align-items: flex-start; gap: 8px; }
.frow-label .num { color: var(--amber); font-weight: bold; font-family: var(--font-title); min-width: 1.6em; }
.frow-label .lbl { flex: 1; color: var(--white); font-size: 17px; font-weight: bold; }
.frow-label .lbl .opt-tag { color: var(--muted); font-weight: normal; }
.frow-label .help { display: block; color: var(--muted); font-weight: normal; font-size: 15px; margin-top: 2px; }
.frow-field { background: var(--card-2); padding: 10px 12px; }
input[type=text], input[type=number], input[type=password], input:not([type]), textarea, select {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line-30); padding: 10px 12px; min-height: 46px; font-size: 17px; }
textarea { resize: vertical; min-height: 92px; line-height: 1.35; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: transparent; }
input:disabled, textarea:disabled, select:disabled { opacity: .7; }
.counter { text-align: right; font-size: 14px; color: var(--muted); margin-top: 4px; }
.counter.over { color: #FF8A86; font-weight: bold; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { min-height: 44px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line-30); cursor: pointer; text-align: left; }
.opt[aria-pressed="true"], .opt[aria-checked="true"] { background: var(--amber); color: var(--on-accent); border-color: var(--amber); font-weight: bold; }
.opt:disabled { cursor: default; }
.scale { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.scale .opt { min-width: 44px; text-align: center; }
.scale-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; margin-top: 4px; }
.rowset { display: grid; gap: 8px; }
.rowset .r { display: grid; gap: 6px; background: var(--bg); padding: 8px; border: 1px solid var(--line-30); }
.rowset .r label { font-size: 14px; color: var(--muted); }
.locked-val { font-weight: bold; color: var(--white); }
.section { margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.section h2 { margin: 0; flex: 1; font-size: 21px; }

/* ⓘ help button: square blue badge with a white i, 44 x 44 touch target */
.ibtn { flex: none; width: 44px; height: 44px; margin: -6px -6px -6px 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0; }
.ibtn > span { width: 26px; height: 26px; background: var(--blue); color: #fff; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-weight: bold; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.ibtn.mini { width: 36px; height: 36px; margin: -6px -8px -6px -2px; }
.ibtn.mini > span { width: 20px; height: 20px; font-size: 13px; }

/* soft check: amber tint strip with an amber «!» badge, never red */
.tip { display: flex; gap: 10px; align-items: flex-start; background: var(--amber-tint); color: var(--text); padding: 8px 10px; margin-top: 8px; font-size: 15px; }
.tip .badge { background: var(--amber); color: var(--on-accent); min-width: 24px; height: 24px; font-size: 15px; }
.tip .x { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; min-width: 32px; }

/* help sheet: bottom sheet on phones, popover on wide screens */
.sheet-back { position: fixed; inset: 0; background: rgba(10, 14, 22, .55); z-index: 50; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow: auto; background: var(--card); z-index: 51;
  padding: 22px 18px 24px; border-top: 6px solid var(--blue); transform: translateY(0); transition: transform .18s ease-out; touch-action: pan-y; }
.sheet.dragging { transition: none; }
.sheet h2 { padding-right: 48px; }
.sheet h3 { color: var(--white); font-size: 16px; margin: 14px 0 4px; }
.sheet p { color: var(--muted); margin: 0; white-space: pre-line; }
.sheet .ex { border-left: 4px solid var(--amber); padding-left: 10px; }
.sheet .close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; background: var(--card-2); border: 0; color: var(--text); font-size: 20px; cursor: pointer; }
.sheet .grab { position: absolute; top: 6px; left: 50%; width: 44px; height: 4px; margin-left: -22px; background: var(--line-40); }
@media (min-width: 900px) {
  .sheet { left: auto; right: 24px; bottom: 24px; width: 440px; max-height: 70vh; }
  .sheet .grab { display: none; }
}

/* phase indicator (activity colours from the flow slide) */
.phase { display: flex; align-items: center; gap: 10px; background: var(--card); padding: 10px 12px; margin-bottom: 14px; border-left: 6px solid var(--blue); }
.phase .badge { background: var(--accent); }
.phase.skjema { --accent: var(--blue); border-left-color: var(--blue); }
.phase.stemming { --accent: var(--amber); border-left-color: var(--amber); }
.phase.stemming .badge { color: var(--on-accent); }
.phase.plenum { --accent: var(--green); border-left-color: var(--green); }
.phase.quiz { --accent: var(--violet); border-left-color: var(--violet); }
.phase .t { flex: 1; font-weight: bold; color: var(--white); }
.phase .clock { font-family: var(--font-title); font-weight: bold; font-variant-numeric: tabular-nums; }
.phase .clock.over { color: #FF8A86; }

.statusbar { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line-40); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; z-index: 5; }
.statusbar .st { flex: 1; color: var(--muted); font-size: 15px; }
.offline { background: var(--coral-tint); padding: 6px 10px; margin-bottom: 10px; font-size: 15px; }

/* case/intro block */
.case { background: var(--card); padding: 14px 16px; margin-bottom: 14px; border-left: 6px solid var(--teal); }
.case p { color: var(--muted); }
.case p:last-child { margin-bottom: 0; }
.assigned { display: flex; gap: 10px; align-items: center; background: var(--card-2); padding: 10px 12px; margin-bottom: 14px; }
.assigned .swatch { width: 18px; height: 18px; flex: none; }

/* sms preview */
.phone-frame { background: #0E141F; border: 2px solid var(--line-40); padding: 14px 12px; max-width: 360px; }
.phone-frame .bubble { background: #E8EDF3; color: #192232; padding: 10px 12px; font-size: 19px; line-height: 1.35; white-space: pre-wrap; word-wrap: break-word; }
.phone-frame .from { color: var(--muted); font-size: 13px; margin-bottom: 6px; }

/* factor marks: sentence cards with tappable chips */
.sent { background: var(--bg); border: 1px solid var(--line-30); padding: 10px; margin-bottom: 8px; }
.sent .s { margin-bottom: 8px; color: var(--text); }
.fchips { display: flex; flex-wrap: wrap; gap: 4px; }
.fchip { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 4px 4px 8px; background: var(--card-2); border: 2px solid transparent; cursor: pointer; font-size: 15px; gap: 4px; }
.fchip .sw { width: 14px; height: 14px; flex: none; }
.fchip[aria-pressed="true"] { background: var(--c); color: #fff; }
.fchip.dark[aria-pressed="true"] { color: var(--on-accent); }
.fchip .ibtn { margin: 0; }
.mk { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.mk-multi { background-image: linear-gradient(var(--c1), var(--c1)), linear-gradient(var(--c2), var(--c2)); background-size: 100% 3px, 100% 3px;
  background-position: 0 100%, 0 calc(100% - 5px); background-repeat: no-repeat; padding-bottom: 7px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; color: var(--muted); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { width: 12px; height: 12px; display: inline-block; }

/* matrix */
table.matrix { border-collapse: collapse; width: 100%; font-size: 15px; }
table.matrix th, table.matrix td { border: 1px solid var(--line-30); padding: 6px 8px; text-align: left; vertical-align: top; }
table.matrix th { background: var(--card); color: var(--white); }
table.matrix td { background: var(--bg); }
table.matrix .n { color: var(--amber); font-weight: bold; }

/* stars */
.stars { display: flex; gap: 2px; }
.star { width: 48px; height: 48px; background: none; border: 0; color: var(--amber); font-size: 32px; cursor: pointer; font-family: var(--font-icon); line-height: 1; padding: 0; }
.crit-chip { background: var(--card-2); padding: 10px 12px; margin: 10px 0 6px; display: flex; align-items: center; gap: 8px; }
.crit-chip .lbl { flex: 1; font-weight: bold; }

/* generic display cards (wall, votes, results) */
.dcard { position: relative; background: var(--card); padding: 18px 14px 12px; --accent: var(--blue); break-inside: avoid; margin: 0 0 12px; }
.dcard::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 6px; background: var(--accent); }
.dcard .blk { margin-bottom: 8px; }
.dcard .blk:last-child { margin-bottom: 0; }
.dcard .bl { color: var(--muted); font-size: .8em; text-transform: none; margin-bottom: 1px; }
.dcard .bv { color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
.dcard .bv.title { color: var(--white); font-weight: bold; font-size: 1.15em; font-family: var(--font-title); }
.dcard .bv.big { font-size: 1.1em; color: var(--white); }
.dcard .bv.small { font-size: .85em; color: var(--muted); }
.dcard.hidden-card { opacity: .45; }
.dcard ol.scenes { margin: 0; padding-left: 1.4em; }
.dcard .arrow { color: var(--amber); font-family: var(--font-icon); font-size: 1.3em; margin: 2px 0; }
.dcard .slides { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 8px; overflow-x: auto; }
.dcard .slide { background: var(--card-2); padding: 10px; }
.dcard .slide .sn { color: var(--amber); font-weight: bold; font-size: .8em; }
.dcard .feedhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dcard .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }

/* bars and plots */
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 3em; align-items: center; gap: 10px; }
.bar .bl { color: var(--text); }
.bar .bt { background: var(--card-2); height: 1.1em; position: relative; }
.bar .bf { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); }
.bar .bn { font-weight: bold; color: var(--white); text-align: right; font-variant-numeric: tabular-nums; }
.bar.hl .bl { color: var(--amber); font-weight: bold; }
.bargroup { color: var(--muted); font-size: .8em; margin-top: 6px; }
svg.plot text { fill: var(--muted); font-family: var(--font-body); }
svg.plot .ax { stroke: var(--line-40); }
svg.plot .pt { fill: var(--amber); }
.stat { display: flex; align-items: baseline; gap: 12px; }
.stat .v { font-size: 2.2em; font-weight: bold; color: var(--white); font-family: var(--font-title); }
table.tbl { border-collapse: collapse; width: 100%; }
table.tbl th, table.tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line-30); text-align: left; }
table.tbl th { color: var(--muted); font-weight: normal; }

/* misc */
.err { color: #FF8A86; }
.ok { color: #7FD1A8; }
.waiting { text-align: center; padding: 18vh 16px; }
.waiting .big { font-size: 24px; color: var(--white); font-family: var(--font-title); }
.privacy-gate { position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow: auto; padding: 16px; }
.privacy-gate .card { max-width: 640px; margin: 0 auto; }
.privacy-gate p { color: var(--muted); }
.privacy-gate strong { color: var(--text); }
body.privacy-open { overflow: hidden; }
details summary { cursor: pointer; }
.login-card { max-width: 420px; margin: 10vh auto; }
.grid2 { display: grid; gap: 12px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.notice-strip { font-size: 14px; color: var(--muted); background: var(--card); border-left: 4px solid var(--teal); padding: 6px 10px; margin: -6px 0 14px; }
.notice-strip a { color: var(--text); }
.privacy-gate h3, #privacyNotice h3 { font-size: 17px; margin-top: 10px; }