/* Henley Business School Africa - Module 2 Governance Exercises
   Shared stylesheet. Calibri stack, flat brand palette, no external assets. */

:root {
  --navy-primary: #003366;
  --navy-deep: #002244;
  --gold: #FFB81C;
  --gold-on-white: #B98A00;
  --panel-fill: #F5F6FA;
  --border: #E5E7EB;
  --tertiary: #6B7280;
  --body-text: #1F2937;
  --white: #FFFFFF;

  --external-pink: #F3A6D8;
  --internal-blue: #159AC4;

  --rating-high: #C9362B;
  --rating-medium: #FFF0CF;
  --rating-low: #E3ECD8;
  --matrix-header-navy: #002B50;
  --matrix-rowhead-fill: #EEF2F4;
  --matrix-grid-line: #9AA5B1;
  --matrix-text-dark: #17324D;

  --m2-card-fill: #EEF2F4;
  --m2-card-border: #C7D0D7;
  --m2-red: #FF0000;
  --m2-yellow: #FFFF00;
  --m2-green: #00B050;
  --m2-axis-chip: #E6E6E6;

  --appetite-red: #C00000;
  --appetite-amber: #FFC000;
  --appetite-green: #196B24;

  --radius-sm: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Calibri, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--body-text);
  background: var(--white);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 {
  color: var(--navy-primary);
  line-height: 1.3;
  margin: 0 0 var(--space-2) 0;
}

h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }

p { margin: 0 0 var(--space-2) 0; }

a { color: var(--navy-primary); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button, select, input {
  font-family: inherit;
  font-size: 16px;
}

button {
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-sm);
}

button:focus-visible,
select:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--navy-primary);
  outline-offset: 2px;
}

/* ---------- Layout shell ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 72px;
  flex-wrap: wrap;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__wordmark img {
  display: block;
  height: 32px;
  width: auto;
}

.site-header__title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-header__org {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-primary);
  letter-spacing: 0.02em;
}

.site-header__module {
  font-size: 12px;
  color: var(--tertiary);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.site-header__status {
  font-size: 13px;
  color: var(--tertiary);
  min-width: 3.5em;
}

.link-plain {
  font-size: 14px;
  text-decoration: underline;
  color: var(--navy-primary);
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) 24px var(--space-4) 24px;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-3) 24px;
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-size: 13px;
  color: var(--tertiary);
}

@media (max-width: 599px) {
  .site-header__inner { min-height: 56px; padding: 8px 16px; }
  main { padding: var(--space-2) 16px var(--space-3) 16px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.btn-primary {
  background: var(--navy-primary);
  color: var(--white);
  border-color: var(--navy-primary);
}
.btn-primary:hover:not(:disabled) { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn-primary:disabled { background: var(--border); border-color: var(--border); color: var(--tertiary); cursor: not-allowed; }

.btn-secondary {
  background: var(--white);
  color: var(--navy-primary);
  border-color: var(--navy-primary);
}
.btn-secondary:hover { background: var(--panel-fill); }

.btn-reset {
  background: var(--white);
  color: var(--tertiary);
  border-color: var(--border);
  font-weight: 400;
  font-size: 14px;
  padding: 8px 14px;
}
.btn-reset:hover { border-color: var(--tertiary); }
.btn-reset.is-armed {
  color: var(--gold-on-white);
  border-color: var(--gold-on-white);
  font-weight: 700;
}

/* ---------- Hub cards ---------- */

.hub-eyebrow {
  font-size: 13px;
  color: var(--tertiary);
  margin-bottom: var(--space-3);
}

.hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 899px) {
  .hub-grid { grid-template-columns: 1fr; }
}

.hub-card {
  background: var(--panel-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (max-width: 599px) {
  .hub-card { padding: 20px; }
}

.hub-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tertiary);
}

.hub-card__title { margin: 0; }

.hub-card__desc {
  color: var(--body-text);
  margin: 0;
  flex-grow: 1;
}

.state-chip {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--tertiary);
}

.state-chip[data-state="in-progress"] {
  color: var(--gold-on-white);
  border-color: var(--gold-on-white);
}

.state-chip[data-state="complete"] {
  color: var(--navy-primary);
  border-color: var(--navy-primary);
}

/* ---------- Inline notices ---------- */

.inline-notice {
  background: var(--panel-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--body-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.inline-notice[hidden] {
  display: none;
}

/* ---------- Gate hint: what's missing before a disabled Continue unlocks ---------- */

.gate-hint {
  background: var(--panel-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: 13px;
  color: var(--navy-primary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.gate-hint[hidden] {
  display: none;
}

.gate-hint__icon {
  flex: none;
  font-weight: 700;
  color: var(--gold-on-white);
}

.inline-notice__dismiss {
  background: none;
  border: none;
  color: var(--tertiary);
  font-size: 16px;
  min-height: 44px;
  min-width: 44px;
  line-height: 1;
}

.storage-warning {
  font-size: 13px;
  color: var(--gold-on-white);
  border: 1px solid var(--gold-on-white);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: var(--space-3);
}

/* ---------- Page intro band ---------- */

.page-intro {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.page-intro__text { max-width: 720px; }

.progress-counter {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-primary);
  white-space: nowrap;
}

/* ---------- Draggable card ---------- */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  touch-action: none;
  cursor: grab;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, transform 150ms ease-out;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.card.is-dragging {
  border: 2px solid var(--navy-primary);
  background: var(--panel-fill);
  transform: scale(1.03);
  cursor: grabbing;
}

.card-placeholder {
  border: 1px dashed #C7D0D7;
  border-radius: var(--radius-sm);
  background: transparent;
}

.card__grip {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--navy-primary);
}

.card__grip-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card__grip-lines span {
  display: block;
  width: 14px;
  height: 2px;
  background: var(--navy-primary);
}

.card__grip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card__title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 60px 6px 0;
  color: var(--body-text);
}

.card__desc {
  font-size: 14px;
  margin: 0 0 var(--space-2) 0;
  color: var(--body-text);
}

.card__classification {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--body-text);
  margin-bottom: var(--space-2);
}

.classification-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.classification-dot--external { background: var(--external-pink); }
.classification-dot--internal { background: var(--internal-blue); }

.card__move {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card__move label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tertiary);
}

.card__move select {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--body-text);
  width: 100%;
}

.card__marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  margin-top: var(--space-1);
}

.marker-shape {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
}

.marker-shape--triangle {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 13px solid var(--appetite-red);
}
.marker-shape--square { background: var(--appetite-amber); }
.marker-shape--circle { background: var(--appetite-green); border-radius: 50%; }

/* ---------- Tray ---------- */

.card-tray {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.card-tray.drop-target--hover {
  border: 2px solid var(--gold);
  background: #FBF3E0;
}

.card-tray .card { flex: 1 1 200px; min-width: 200px; max-width: 260px; }

@media (max-width: 899px) {
  .card-tray .card { flex: 1 1 45%; min-width: 45%; max-width: none; }
}

/* ---------- Matrix screen layout: risks accordion (left) + board (right) ----------
   #m1-tray/#m2-tray on the matrix screens double as the risk accordion list, so
   they are overridden here to a single stacked column (each accordion item keeps
   its own height when expanded/collapsed; a wrapped multi-per-row tray would
   reflow awkwardly). Scoped by ID so the plain .card-tray used elsewhere
   (js/tiering.js) keeps its existing wrapped layout untouched. */

#m1-tray,
#m2-tray {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

#m1-tray .card,
#m2-tray .card {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.matrix-layout {
  display: block;
}

.matrix-layout__risks {
  margin-bottom: var(--space-3);
}

.matrix-layout__board {
  min-width: 0;
}

@media (min-width: 900px) {
  .matrix-layout {
    display: grid;
    grid-template-columns: minmax(240px, 260px) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }
  .matrix-layout__risks {
    margin-bottom: 0;
  }
  .matrix-layout__board {
    overflow-x: auto;
  }
}

/* ---------- Card accordion (risk list on the matrix screens) ----------
   Title stays visible at all times as a real <button>. The "Move to"
   select and, on Matrix 2 / Round B, the appetite and tolerance status
   picker both live permanently in headerRow, a sibling of the
   collapsible body and never a descendant of it, so neither control's
   reachability depends on collapse state, at any width, on any surface.
   The long description is the only thing inside the body. The JS
   force-collapses a card's body on every placement (see the
   setCardOpenState calls next to setM1/setM2Cell in js/rounds.js and
   applyMatrix1Placement/applyMatrix2Cell in js/matrices.js) so a placed
   card renders compact the instant it lands, whatever the delegate did
   before; the same write force-reopens a card returned to the tray.
   Clicking a card's own toggle still expands it on demand, and that
   state simply does not survive the next placement. */

.card__header-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-2) 0;
}

.card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  margin: 0 60px 0 0;
  padding: 6px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  color: var(--body-text);
  font: inherit;
}

.card__toggle:hover { background: var(--panel-fill); }

.card__toggle:focus-visible {
  outline: 2px solid var(--navy-primary);
  outline-offset: 2px;
}

/* min-width: 0 plus the wrap rules stop a long unbroken title (Round B
   lets a delegate type their own risk name, up to 120 characters with no
   space required) from setting a min-content floor that overflows the
   card and the page on a phone. */
.card__toggle-title {
  font-weight: 700;
  font-size: 15px;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* A solid circular badge, not a text glyph, so the expand/collapse
   control on a collapsed placed card reads as an obvious tappable
   button rather than a subtle plus sign that is easy to miss. */
.card__toggle-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy-primary);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.card__body {
  margin-top: var(--space-1);
}

.card__body[hidden] {
  display: none;
}

/* Placed-card grip clearance. Both boards' grid tracks floor at
   minmax(110px, 1fr), where a card's own content width can be narrower
   than the horizontal room the base .card__toggle margin reserves for
   .card__grip beside the title, which collides with the title in that
   band. Board-cell cards get the grip out of the title's row entirely
   instead: a small top strip holds an icon-only grip, and the toggle
   recovers the full row width for the title. Tray cards are never this
   narrow and are untouched, since these selectors only match a card that
   is already sitting inside a board cell. */
.m1-cell .card,
.m2-cell .card {
  padding-top: 28px;
}

/* Horizontal breathing room is worth more to a placed card than padding
   is. The base 16px card padding plus the cell's own 10px left a 56px
   title box at 1024px, narrower than single words like "Goodbye" (65px),
   "Assistant" (68px) or "Judgment" (72px), so titles had to break
   mid-word. Trimming both, inside cells only, widens that box to 80px:
   measured, all five risk titles then wrap on real word boundaries at
   1024px instead of one of five, and every placed card settles to the
   same height (215px at 1024px, 193px at 1440px) so rows line up. Tray
   cards keep the roomier base padding. */
.m1-cell .card,
.m2-cell .card {
  padding-left: 8px;
  padding-right: 8px;
}

.m1-cell,
.m2-cell {
  padding-left: 6px;
  padding-right: 6px;
}

.m1-cell .card .card__grip,
.m2-cell .card .card__grip {
  top: 6px;
  right: 8px;
}

.m1-cell .card .card__grip-label,
.m2-cell .card .card__grip-label {
  display: none;
}

/* align-items keeps the circular expand badge pinned to the title's
   first line when a long title wraps, rather than centring it against
   the full wrapped height. The reduced gap matters more than it looks:
   inside a cell the title and the 28px badge share a row about 91px
   wide at 1024px, so the base 16px gap was taking a fifth of the title's
   space and forcing titles to break mid-word. Measured at 6px, the title
   box grows from 46px to 56px at 1024px and from 23px to 33px in the
   narrowest grid band around 650px, and placed cards get shorter
   (373px to 305px at 650px) because titles wrap onto fewer lines. The
   badge keeps its full 28px size and the toggle keeps its 44px minimum
   height, so no tap target shrinks. */
.m1-cell .card .card__toggle,
.m2-cell .card .card__toggle {
  margin: 0;
  align-items: flex-start;
  gap: 6px;
}

/* ---------- Tier panels (Page 1) ---------- */

.tier-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

@media (max-width: 899px) {
  .tier-panels { grid-template-columns: 1fr; }
}

.tier-panel {
  background: var(--panel-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 200px;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

@media (max-width: 599px) {
  .tier-panel { padding: 16px; }
}

.tier-panel.drop-target--hover {
  border: 2px solid var(--gold);
  background: #FBF3E0;
}

.tier-panel__header h3 { margin-bottom: 4px; }

.tier-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-on-white);
  margin-bottom: 8px;
}

.tier-definition {
  font-size: 14px;
  margin-bottom: 6px;
}

.tier-assign-when {
  font-size: 13px;
  color: var(--tertiary);
  margin-bottom: 0;
}

.tier-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-grow: 1;
}

.tier-panel__empty {
  font-style: italic;
  color: var(--tertiary);
  font-size: 14px;
}

@media (min-width: 600px) and (max-width: 899px) {
  .tier-panel__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .tier-panel__body .tier-panel__empty { grid-column: 1 / -1; }
}

/* Phone: dropdown-first list */
@media (max-width: 599px) {
  .tiering-drag-layout { display: none; }
}
@media (min-width: 600px) {
  .tiering-list-layout { display: none; }
}

.tiering-list-layout .card { margin-bottom: var(--space-2); }

/* The list layout has no drag engine attached (dropdown is the only way to
   place a card here), so hide the drag grip/label to avoid suggesting an
   affordance that does nothing on phone. */
.tiering-list-layout .card__grip { display: none; }

/* Phone-only: on tablet/desktop the tier definitions already live in each
   panel header, so this collapsible summary would just duplicate them. */
@media (min-width: 600px) {
  .tier-defs-collapsible { display: none; }
}

.tier-defs-collapsible {
  background: var(--panel-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
}

.tier-defs-collapsible summary {
  font-weight: 700;
  color: var(--navy-primary);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.tier-defs-collapsible .tier-def-block {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* ---------- Reveal panel (Page 1) ---------- */

.reveal-panel {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.reveal-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 599px) {
  .reveal-row { grid-template-columns: 1fr; gap: 8px; }
}

.reveal-row__title { font-weight: 700; margin-bottom: 4px; }
.reveal-row__placement { font-size: 13px; color: var(--tertiary); }
.reveal-row__note { font-size: 14px; }

.reveal-closing {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--tertiary);
  font-style: italic;
}

/* ---------- Share code panel (delegate-facing) ---------- */

.share-code-panel {
  margin: var(--space-3) 0;
  background: var(--panel-fill);
  border: 2px solid var(--navy-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.share-code-heading {
  margin: 0 0 6px 0;
  font-size: 18px;
  color: var(--navy-primary);
}

.share-code-instruction {
  margin: 0 0 var(--space-2) 0;
  font-size: 14px;
}

.share-code-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.share-code-value {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy-deep);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  user-select: all;
}

@media (max-width: 599px) {
  .share-code-value { font-size: 22px; padding: 8px 12px; }
}

.share-code-copy-btn { min-width: 130px; }

.share-code-readaloud {
  margin: var(--space-2) 0 0 0;
  font-size: 12px;
  color: var(--tertiary);
}

/* ---------- Matrix legends (shared) ---------- */

.matrix-legend {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* ---------- Matrix 1 ----------
   Single DOM tree, reflowed by breakpoint: a true 5-column CSS grid on
   tablet/desktop (using display:contents on the row wrappers so each row's
   children become flat grid items), and a stacked block-per-Impact-row list
   on phone (display:contents removed, wrappers become normal blocks). This
   avoids ever compressing 16 cells into unreadable space on a narrow screen,
   per the mapping-webapp lesson on compressed grids. */

.matrix1-board {
  border: 1px solid var(--matrix-grid-line);
}

@media (min-width: 600px) {
  .matrix1-board {
    display: grid;
    grid-template-columns: 96px repeat(4, minmax(110px, 1fr));
    gap: 3px;
    background: var(--matrix-grid-line);
  }
  .matrix1-headerrow,
  .matrix1-row-wrapper,
  .matrix1-row-cells {
    display: contents;
  }
}

.matrix1-headerrow { display: none; }
@media (min-width: 600px) {
  .matrix1-headerrow { display: contents; }
}

.m1-corner { background: var(--matrix-header-navy); }

.m1-head {
  background: var(--matrix-header-navy);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 6px;
}

.matrix1-row-wrapper {
  margin-bottom: 3px;
}

.m1-rowhead {
  background: var(--matrix-rowhead-fill);
  color: var(--matrix-text-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  padding: 8px;
}

.matrix1-row-cells {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

@media (min-width: 600px) {
  .matrix1-row-cells { display: contents; }
}

.m1-cell {
  border: 1px solid var(--matrix-grid-line);
  background: var(--white);
  padding: 10px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: outline 150ms ease-out;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.m1-cell.drop-target--hover {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.m1-cell[data-rating="H"] { background: var(--rating-high); }
.m1-cell[data-rating="H"] .m1-rating-label,
.m1-cell[data-rating="H"] .m1-cell__mobile-label { color: var(--white); }
.m1-cell[data-rating="M"] { background: var(--rating-medium); }
.m1-cell[data-rating="L"] { background: var(--rating-low); }

.m1-rating-label {
  font-weight: 700;
  font-size: 13px;
  align-self: flex-end;
  color: var(--matrix-text-dark);
}

.m1-cell__mobile-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--matrix-text-dark);
  display: block;
}

@media (min-width: 600px) {
  .m1-cell__mobile-label { display: none; }
}

.m1-cell__cards { display: flex; flex-direction: column; gap: 6px; }

.m1-hover-hint {
  font-size: 11px;
  background: var(--white);
  border: 1px solid var(--gold);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  display: none;
}

.m1-cell.drop-target--hover .m1-hover-hint { display: block; }

/* ---------- Matrix 2 ----------
   Same single-DOM responsive pattern: HIGH/MEDIUM/LOW row wrappers with
   display:contents on tablet/desktop for the true 3x3 grid inside the
   sourced gradient wash, reflowing to stacked row blocks (no gradient, the
   status marker's colour+shape+text carries the meaning instead) on phone. */

.matrix2-outer {
  background: var(--m2-card-fill);
  border: 1px solid var(--m2-card-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.matrix2-board-wrap {
  display: flex;
  gap: 6px;
}

.matrix2-axis-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--matrix-header-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

@media (max-width: 599px) {
  .matrix2-axis-title { display: none; }
}

.matrix2-board {
  flex: 1 1 auto;
  border: 1px solid var(--m2-card-border);
}

@media (min-width: 600px) {
  .matrix2-board {
    display: grid;
    grid-template-columns: 56px repeat(3, minmax(110px, 1fr));
    gap: 3px;
    background: linear-gradient(45deg, var(--m2-green) 0%, var(--m2-yellow) 50%, var(--m2-red) 100%);
  }
  .matrix2-headerrow,
  .matrix2-row-wrapper,
  .matrix2-row-cells {
    display: contents;
  }
}

.matrix2-headerrow { display: none; }
@media (min-width: 600px) {
  .matrix2-headerrow { display: contents; }
}

.m2-corner { background: var(--m2-axis-chip); }

.m2-head {
  background: var(--m2-axis-chip);
  color: var(--matrix-header-navy);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 4px;
}

.matrix2-row-wrapper { margin-bottom: 3px; }

.m2-rowhead {
  background: var(--m2-axis-chip);
  color: var(--matrix-header-navy);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.matrix2-row-cells {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

@media (min-width: 600px) {
  .matrix2-row-cells { display: contents; }
}

.m2-cell {
  background: var(--panel-fill);
  border: 1px solid var(--m2-card-border);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 90px;
  transition: outline 150ms ease-out;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

@media (min-width: 600px) {
  .m2-cell { background: rgba(255, 255, 255, 0.78); }
}

.m2-cell.drop-target--hover {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.m2-cell__mobile-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--matrix-header-navy);
}

@media (min-width: 600px) {
  .m2-cell__mobile-label { display: none; }
}

.m2-hover-hint {
  font-size: 11px;
  background: var(--white);
  border: 1px solid var(--gold);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  display: none;
}

.m2-cell.drop-target--hover .m2-hover-hint { display: block; }

.status-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
}

.status-btn[aria-pressed="true"] {
  border-color: var(--navy-primary);
  background: var(--panel-fill);
}

/* ---------- Screen flow (Page 2) ---------- */

.screen { display: none; }
.screen.is-active { display: block; animation: fade-in 200ms ease-out; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.risk-readonly-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

@media (max-width: 899px) {
  .risk-readonly-list { grid-template-columns: 1fr; }
}

.risk-readonly-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.screen-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- Compare screen ---------- */

.compare-matrices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (max-width: 999px) {
  .compare-matrices { grid-template-columns: 1fr; }
}

.compare-matrix-block h3 { margin-bottom: 8px; }

.compare-mini-cell {
  font-size: 11px;
  min-height: 56px;
}

.risk-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy-primary);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
}

.delta-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.delta-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-fill);
  padding: var(--space-2);
}

.delta-row__title {
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

.delta-row__ratings {
  font-size: 13px;
  color: var(--tertiary);
  margin-bottom: 6px;
}

.delta-row__note {
  font-size: 14px;
}

.delta-closing {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--tertiary);
  font-style: italic;
}

/* ---------- Facilitator decode view ---------- */

.facilitator-input-panel {
  background: var(--panel-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.facilitator-label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.facilitator-textarea {
  width: 100%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  box-sizing: border-box;
}

.facilitator-manual-row {
  margin-top: var(--space-2);
}

.facilitator-manual-controls {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.facilitator-manual-input {
  flex: 1 1 260px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.facilitator-actions {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.facilitator-status {
  font-size: 13px;
  color: var(--tertiary);
}

.facilitator-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 999px) {
  .facilitator-columns { grid-template-columns: 1fr; }
}

.facilitator-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--white);
}

.facilitator-counts {
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.facilitator-rejected {
  background: var(--rating-medium);
  border: 1px solid var(--gold-on-white);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 13px;
}

.facilitator-rejected-heading {
  font-weight: 700;
  margin: 0 0 4px 0;
}

.facilitator-rejected-row {
  margin: 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.facilitator-reveal {
  margin-top: var(--space-3);
}

.facilitator-reveal-summary {
  font-size: 13px;
  color: var(--tertiary);
}

.facilitator-tier-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
}

@media (max-width: 599px) {
  .facilitator-tier-columns { grid-template-columns: 1fr; }
}

.facilitator-tier-column {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-fill);
  padding: var(--space-2);
}

.facilitator-tier-column h3 {
  font-size: 14px;
  margin-bottom: var(--space-1);
}

.facilitator-tier-empty {
  font-size: 13px;
  color: var(--tertiary);
}

.facilitator-tier-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-1);
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.facilitator-tier-count {
  font-weight: 700;
  color: var(--navy-primary);
}

.facilitator-risk-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  font-size: 12px;
}

.facilitator-risk-key-item {
  display: inline-flex;
  align-items: center;
}

.facilitator-status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

/* ---------- Round A / Round B (in-session) ---------- */

.round-intro-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}

.round-intro-meta__item {
  font-size: 14px;
  margin: 0;
}

.round-intro-meta__item strong {
  color: var(--navy-primary);
}

.round-name-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-3);
  max-width: 480px;
}

.round-name-field label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tertiary);
}

.round-name-field input[type="text"],
.round-name-field select {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--body-text);
  width: 100%;
  font-size: 16px;
}

.round-name-counter {
  font-size: 12px;
  color: var(--tertiary);
  text-align: right;
}

.round-privacy-note {
  background: var(--panel-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: 13px;
  color: var(--body-text);
  margin-bottom: var(--space-3);
}

.card__category {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-primary);
  background: var(--panel-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------------
   Facilitator decode view: the two live in-session round panels.
   Added 2026-09-09. Additive only; no rule above this line is modified.
   --------------------------------------------------------------------------- */

.facilitator-panel-note {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted-caption, #8899aa);
}

.facilitator-category-spread {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  background: var(--panel-fill, #f5f6fa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
}

.facilitator-category-spread h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.facilitator-category-row {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.facilitator-category-row:last-child { margin-bottom: 0; }