/* Motherson voting dashboard, visual system v4.
   White page. Tiles are Motherson black at 4%, so structure comes from fill and
   spacing, never lines. One red: the brand, the primary action and the four
   format letters F / C / S / P. State is a coloured dot from the approved
   palette: green agrees, yellow splits, pink polarises or disagrees. The purple
   family is the sequential ramp for vote bars. Numbers are tabular. */

:root {
  /* Approved Motherson colours */
  --m-red: #DA2128; --m-black: #231F20; --m-white: #FFFFFF;
  --m-green: #8AB48F; --m-green-2: #B1D8BE; --m-green-3: #C7E2D0; --m-green-4: #DAECE0; --m-green-5: #EDF6F0; --m-green-6: #F5FAF7;
  --m-pink: #F60062; --m-pink-2: #ED657A; --m-pink-3: #F2929A; --m-pink-4: #F6BABC; --m-pink-5: #FBDEDC; --m-pink-6: #FEF6F5;
  --m-purple: #4D2A6C; --m-purple-2: #6A3D7F; --m-purple-3: #875C96; --m-purple-4: #A47EAD; --m-purple-5: #C4ADCB; --m-purple-6: #DCCDE3;
  --m-orange: #EB5B36; --m-orange-2: #F0826A; --m-orange-3: #F39A8A; --m-orange-4: #F6AF9D; --m-orange-5: #F8C5B7; --m-orange-6: #FBD9D2;
  --m-yellow: #EBCC0F; --m-yellow-2: #FED442; --m-yellow-3: #FFDB6E; --m-yellow-4: #FFE6A0; --m-yellow-5: #FFEDB8; --m-mint: #E1F3D7;

  --bg: #FFFFFF;
  --tile: #F5F4F4;
  --tile-2: #FFFFFF;
  --tile-3: #E9E8E8;
  --ctl: #F0EFEF;
  --ctl-hover: #E4E3E3;
  --dark: #231F20;
  --text: #231F20;
  --text-2: #6B6869;
  --text-3: #A19E9F;
  --hair: rgba(35, 31, 32, 0.08);
  --hair-2: rgba(35, 31, 32, 0.14);
  --red: #DA2128;
  --red-soft: rgba(218, 33, 40, 0.08);
  --ok: #8AB48F; --ok-tint: #EDF6F0;
  --warn: #EBCC0F; --warn-tint: #FFEDB8;
  --bad: #F60062; --bad-tint: #FBDEDC;
  --ramp-1: #4D2A6C; --ramp-2: #875C96; --ramp-3: #C4ADCB; --ramp-4: #DCCDE3;
  --gradient: linear-gradient(45deg, #4D2A6C 0%, #A32A47 55%, #DA2128 100%);
  --r-tile: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --pill: 99px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --col: 1180px;
  --measure: 1060px;
  --focus: 0 0 0 3px rgba(35, 31, 32, 0.18);

  /* Colour by role, the same on every page:
     where you are  (menus, tabs)            black text with a black underline
     what you pick  (options, filters)       Motherson purple, white text
     who you pick   (names, portraits)       a soft purple tint with a purple outline, so red
                                             portraits and red buttons stay calm beside it
     how you view   (view switches)          a white thumb on a grey track
     what you do    (buttons)                red for the main action, grey for the rest
     how it stands  (status, agreement)      green, yellow and pink tints, never on controls
     Votes as data use the purple ramp, darkest for 3; people are red portraits. */
  --nav: #231F20;
  --pick: #4D2A6C;
  --pick-hover: #6A3D7F;
  --pick-soft: #A47EAD;
  --pick-tint: #F1EBF5;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--pick); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ol, ul { margin: 0; }
h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
strong, b { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.num, .table, .hist-labels, .bar-legend, .r-score, .r-avg, .big-num, .cell, .p-avg { font-variant-numeric: tabular-nums; }
.fmt-key { color: var(--red); font-weight: 700; }

/* ---------- shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  height: 66px; padding: 0 40px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair);
}
.brand { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.brand img { height: 22px; width: auto; display: block; }
.brand-sub { font-size: 14.5px; color: var(--text); padding-left: 14px; border-left: 1px solid var(--hair-2); line-height: 1; }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; padding: 4px 3px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
/* Tabs are pills. The selected one is a dark pill, the same treatment as the
   selected tab inside Admin and Results, so "you are here" reads the same everywhere. */
.nav a { position: relative; padding: 8px 14px; border-radius: var(--pill); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--text-2); white-space: nowrap; transition: background 0.15s, color 0.15s; }
.nav a:hover { background: var(--ctl); color: var(--text); }
.nav a.active, .nav a.active:hover { background: transparent; color: var(--nav); font-weight: 600; }
.nav a.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--nav); }
.topbar-snug .nav a.active::after { left: 10px; right: 10px; }
.topbar-compact .brand-sub { display: none; }
.topbar-tight .who-bar .status-pill { display: none; }
.topbar-snug .nav a { padding: 8px 10px; }
.topbar-snug .who-bar { gap: 10px; }
.nav .l-short { display: none; }
.topbar-short .nav .l-full { display: none; }
.topbar-short .nav .l-short { display: inline; }
.who-bar { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
.who-bar .who-name { color: var(--text); font-weight: 600; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--pill); background: var(--ctl); color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 1.2; }
.status-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.status-pill:hover { background: var(--ctl-hover); color: var(--text); }
.status-pill.status-ok { color: var(--text); }
.status-pill.status-ok::before { background: var(--ok); }
.status-pill.status-warn::before { background: var(--warn); }
.status-pill.status-dark { background: var(--dark); color: #fff; }
.status-pill.status-dark::before { background: #fff; }
.container { max-width: var(--col); margin: 0 auto; padding: 64px 40px 160px; }
.loading { color: var(--text-3); padding: 64px 0; }

/* ---------- typography ---------- */
.eyebrow { font-size: 13.5px; font-weight: 600; color: var(--text-3); letter-spacing: 0.005em; }
.display { font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin: 12px 0 18px; }
.display .flourish { color: var(--red); }
/* The Motherson framework after a broad message's investor-facing title: same line,
   quieter tone, never split across lines. */
.framework { color: var(--text-2); font-weight: 500; white-space: nowrap; }
.display .framework, .r-name .framework, .theme-card .name .framework, .msg-tile .m-name .framework { color: var(--text-3); }
/* Where the name is already muted, the framework takes the same tone rather than a darker one. */
.rv-todo-name .framework, .eyebrow .framework, .muted .framework, .faint .framework, .small .framework { color: inherit; font-weight: inherit; }
.lead { font-size: 19px; line-height: 1.5; color: var(--text-2); max-width: var(--measure); }
.lead strong { color: var(--text); }
.message-large { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; max-width: 980px; margin: 6px 0 14px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 13.5px; }
.label { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.page-head { margin-bottom: 44px; }
.page-head .context { margin-top: 14px; max-width: var(--measure); line-height: 1.6; color: var(--text-2); font-size: 16px; }
.section { margin-top: 72px; }
.section > h2 { margin-top: 8px; }
.prose { max-width: var(--measure); line-height: 1.65; }
.prose p + p { margin-top: 10px; }

/* ---------- tiles ---------- */
.card { background: var(--tile); border-radius: var(--r-tile); padding: 32px; }
.card + .card { margin-top: 20px; }
.tile-dark { background: var(--dark); color: #fff; }
.tile-dark .muted, .tile-dark .faint, .tile-dark .eyebrow, .tile-dark .small { color: rgba(255, 255, 255, 0.62); }
.hero { background: var(--gradient); color: #fff; border-radius: 28px; padding: 52px 56px; }
.hero .eyebrow { color: rgba(255, 255, 255, 0.72); }
.hero h1 { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; max-width: 920px; margin: 16px 0 20px; text-wrap: balance; }
.hero p { font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); max-width: 840px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card { margin-top: 0; }
.stack > * + * { margin-top: 20px; }
.stack-sm > * + * { margin-top: 10px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.divider { height: 1px; background: var(--hair); margin: 28px 0; }

/* Status lines. Plain text by default; only a true alarm gets a box. */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: -12px 0 40px; font-size: 16px; color: var(--text-2); }
.banner strong { color: var(--text); }
.banner-ok strong::before, .banner-warn strong::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.banner-ok strong::before { background: var(--ok); }
.banner-warn strong::before { background: var(--warn); }
.banner-alert { background: var(--bad-tint); color: var(--text); padding: 16px 22px; border-radius: var(--r-md); margin-top: 0; }
.banner-alert strong { color: var(--red); }
.banner-info { margin-top: 0; margin-bottom: 20px; font-size: 15px; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--pill); border: none;
  background: var(--ctl); color: var(--text);
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--ctl-hover); }
.card .btn, .modal .btn { background: var(--tile-2); }
.card .btn:hover, .modal .btn:hover { background: var(--tile-3); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary, .card .btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover, .card .btn-primary:hover { background: #C41D23; }
.btn-dark, .card .btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover, .card .btn-dark:hover { background: #3A3536; }
.btn-quiet, .card .btn-quiet { background: transparent; color: var(--text-2); }
.btn-quiet:hover, .card .btn-quiet:hover { background: var(--ctl); color: var(--text); }
.tile-dark .btn, .hero .btn { background: rgba(255, 255, 255, 0.14); color: #fff; }
.tile-dark .btn:hover, .hero .btn:hover { background: rgba(255, 255, 255, 0.22); }
.tile-dark .btn-primary { background: var(--red); color: #fff; }
.hero .btn-primary { background: #fff; color: var(--dark); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-lg { padding: 14px 26px; font-size: 17px; }
.btn-link { background: none; border: none; padding: 0; color: var(--text-2); font-weight: 500; cursor: pointer; }
.btn-link:hover { color: var(--text); }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions-end { justify-content: flex-end; }
.danger-zone { border-top: 1px solid var(--hair); margin-top: 24px; padding-top: 20px; }

.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choice {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--pill); border: none;
  background: var(--ctl); color: var(--text);
  font-size: 15px; font-weight: 500; cursor: pointer; line-height: 1.2;
  transition: background 0.15s, color 0.15s;
}
.choice:hover { background: var(--ctl-hover); }
.card .choice { background: var(--tile-2); }
.card .choice:hover { background: var(--tile-3); }
.choice[aria-pressed="true"], .card .choice[aria-pressed="true"] { background: var(--pick); color: #fff; }
.choice:disabled { cursor: default; opacity: 0.55; }
.choice:disabled[aria-pressed="true"] { opacity: 1; }
.choice-key { font-weight: 700; min-width: 1em; text-align: center; }
.choice-label { font-weight: 500; }
.choices-compact .choice { padding: 7px 12px; font-size: 13.5px; }
/* A small note inside a pill: quieter than the name. */
.choice-note { font-size: 12.5px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.choice[aria-pressed="true"] .choice-note { color: rgba(255, 255, 255, 0.55); }
/* Priority 3 / 2 / 1 / 0: four pills in one row, each with its number and its meaning. */
.choices-priority { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.choices-priority .choice { justify-content: flex-start; padding: 12px 14px; font-size: 14.5px; min-width: 0; }
.choices-priority .choice-key { font-variant-numeric: tabular-nums; font-size: 17px; min-width: 1.1em; }
.choices-priority .choice-label { white-space: normal; text-align: left; line-height: 1.25; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field .label { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.field label.label, .field label.small { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 13.5px; color: var(--text-3); margin-top: -4px; }
input[type="text"], input[type="password"], input[type="number"], input[type="search"], textarea, select {
  width: 100%; padding: 12px 14px; border: none; border-radius: var(--r-sm);
  background: var(--ctl); font-size: 15.5px; line-height: 1.45; color: var(--text);
}
.card input[type="text"], .card input[type="password"], .card input[type="number"], .card textarea, .card select { background: var(--tile-2); }
.tile-dark input, .tile-dark textarea { background: rgba(255, 255, 255, 0.1); color: #fff; }
textarea { resize: vertical; min-height: 64px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
input:focus, textarea:focus, select:focus { outline: none; box-shadow: var(--focus); }
input[readonly], textarea[readonly] { color: var(--text-2); }
input.inline { width: auto; }
.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.checkbox input { width: auto; margin: 0; }
.save-state { font-size: 13px; color: var(--text-3); min-width: 60px; transition: opacity 0.4s; text-align: right; }
.save-state[data-state="saved"] { color: var(--text-2); }
.save-state[data-state="error"] { color: var(--red); font-weight: 600; }

/* ---------- state labels, bars ---------- */
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; line-height: 1.4; }
.tag::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.tag-ok::before { background: var(--ok); }
.tag-warn::before { background: var(--warn); }
.tag-bad::before { background: var(--bad); }
.tag-red::before { background: var(--red); }
.tag-dark { background: var(--dark); color: #fff; padding: 4px 12px; border-radius: var(--pill); }
.tag-dark::before { display: none; }
.tag-outline, .tag-soft { background: var(--ctl); color: var(--text-2); padding: 4px 12px; border-radius: var(--pill); font-weight: 500; white-space: normal; }
.card .tag-outline, .card .tag-soft { background: var(--tile-2); }
.tag-outline::before, .tag-soft::before { display: none; }
.tags { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* Sub-theme tags (Country / Customer / Component): labels, not controls, so they
   stay small, hairline and flat, below the title and description. */
.st-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.st-tag { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--text-2); padding: 2px 9px; border: 1px solid var(--hair-2); border-radius: var(--pill); white-space: nowrap; }
.tag-picks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 4px; }
/* Admin: a story's additional supporting sub-themes, one row per link. */
.supports { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.supports:empty::before { content: 'None yet.'; font-size: 13.5px; color: var(--text-3); }
.support-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; }
.support-key { font-size: 13.5px; white-space: nowrap; }
.evidence-table tr.ev-first:not(:first-child) td { border-top: 1px solid var(--hair-2); }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.chip-ok { color: var(--text); }
.chip-ok::before { background: var(--ok); }
.progress { height: 6px; border-radius: var(--pill); background: var(--ctl); overflow: hidden; }
.card .progress { background: var(--tile-2); }
.tile-dark .progress { background: rgba(255, 255, 255, 0.14); }
.progress > i { display: block; height: 100%; background: var(--dark); border-radius: var(--pill); transition: width 0.3s; }
.tile-dark .progress > i { background: #fff; }
.progress.progress-ok > i { background: var(--ok); }
.bar { display: flex; height: 14px; border-radius: var(--pill); overflow: hidden; background: var(--ctl); }
.card .bar { background: var(--tile-2); }
.bar i { display: block; height: 100%; }
.bar-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); margin-top: 8px; }
.bar-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ramp-1 { background: var(--ramp-1); } .ramp-2 { background: var(--ramp-2); } .ramp-3 { background: var(--ramp-3); } .ramp-4 { background: var(--ramp-4); }
.big-num { font-size: 64px; font-weight: 600; letter-spacing: -0.035em; line-height: 0.95; }
.big-num small { font-size: 18px; font-weight: 500; color: var(--text-3); letter-spacing: 0; margin-left: 4px; }
.tile-dark .big-num small { color: rgba(255, 255, 255, 0.6); }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--hair-2); white-space: nowrap; }
.table td { padding: 14px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table td.num, .table th.num { text-align: right; }
.table-wrap { overflow-x: auto; }
.table .sub { color: var(--text-3); font-size: 13px; }

/* ---------- sign in ---------- */
.signin { min-height: calc(100vh - 66px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 44px; padding: 40px 0; }
.signin .brand-mark { height: 30px; width: auto; margin-bottom: 26px; }
.signin .display { font-size: 72px; margin: 14px 0 0; }
.signin .lead { margin: 0 auto; font-size: 20px; max-width: 720px; }
.name-groups { display: flex; flex-direction: column; gap: 28px; align-items: center; }
.name-rows { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.names { justify-content: center; gap: 10px; max-width: 820px; }
.names .choice { padding: 14px 24px; font-size: 17px; }
.names .choice[aria-pressed="true"] { background: var(--pick-tint); color: var(--pick); box-shadow: inset 0 0 0 1.5px var(--pick); font-weight: 600; }
.pin-form { margin: 8px auto 0; display: flex; flex-direction: column; gap: 16px; width: 340px; text-align: left; }
.pin-form input { font-size: 24px; letter-spacing: 0.32em; padding: 12px 16px; text-align: center; }
.pin-form .actions { justify-content: center; }
.error { color: var(--red); font-weight: 600; font-size: 14px; }
.signin-foot { color: var(--text-3); font-size: 13.5px; max-width: 560px; margin: 0 auto; }

/* ---------- home ---------- */
.theme-card { display: flex; flex-direction: column; gap: 22px; padding: 36px; }
.theme-card .name { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--text); }
.theme-card .message { font-size: 17px; color: var(--text-2); line-height: 1.5; margin-top: -8px; max-width: 460px; }
.tile-pct { font-size: 15px; font-weight: 600; color: var(--text-3); }
.steps { display: flex; flex-direction: column; margin-top: auto; padding-top: 4px; }
.step { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--hair); }
.step:first-child { border-top: none; }
.step .step-name { font-size: 15.5px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.step .step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--tile-2); color: var(--text-2); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.step .step-state { font-size: 14px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.step.done .step-state { color: var(--text); font-weight: 600; }
.tick { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--hair-2); position: relative; flex-shrink: 0; }
.tick.on { background: var(--ok); border-color: var(--ok); }
.tick.on::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.submit-card { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 40px; margin-top: 20px; }

/* ---------- overview ---------- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: stretch; margin-top: 24px; }
.flow-major { background: var(--tile); border-radius: 22px; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 8px; }
.flow-num { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--text-3); }
.flow-step { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin-top: 6px; }
.flow-q { font-size: 16px; font-weight: 500; color: var(--text); line-height: 1.4; }
.flow-do { margin-top: auto; padding-top: 12px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.flow-arrow { align-self: center; color: var(--text-3); font-size: 20px; }
.flow-after { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.flow-after .p-step { padding: 8px 14px; border-radius: var(--pill); background: var(--ctl); font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.flow-after .flow-arrow { font-size: 15px; }
.msg-tile { padding: 28px; }
.msg-tile .m-name { font-size: 24px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; line-height: 1.15; margin-top: 8px; }
.msg-tile .m-text { margin-top: 10px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.msg-tile .m-subs { margin: 16px 0 0; padding: 0; list-style: none; }
.msg-tile .m-subs li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 14.5px; font-weight: 500; line-height: 1.35; }

/* ---------- voting: one page per message ---------- */
/* The route through the vote: Overview, the four messages with their progress, Review.
   Text tabs with a red underline, as on Results, so no step reads as a black button. */
.vote-steps { display: flex; gap: 18px; margin: -28px 0 40px; border-bottom: 1px solid var(--hair-2); overflow-x: auto; scrollbar-width: none; }
.vote-steps::-webkit-scrollbar { display: none; }
.vote-steps a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 0 13px; color: var(--text-3); font-size: 14.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: color 0.15s; }
.vote-steps a:hover { color: var(--text); }
.vote-steps a .num { font-weight: 700; }
.vote-steps a.is-on { color: var(--text); }
.vote-steps a.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--nav); }
.vote-steps .vs-count { padding: 1px 7px; border-radius: var(--pill); background: var(--ctl); color: var(--text-2); font-size: 12px; font-weight: 600; }
.vote-steps a.is-on .vs-count { background: var(--dark); color: #fff; }
.vote-steps a.is-done::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
/* A message's number sits quietly before its title; its label and line sit under it. */
.msg-num { color: var(--text-3); font-weight: 600; margin-right: 0.3em; }
.msg-label { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--text); }
.msg-head { margin-bottom: 30px; }
.msg-sub { max-width: var(--measure); font-size: 21px; line-height: 1.45; letter-spacing: -0.01em; color: var(--text-2); }
.msg-sub b { font-weight: 600; color: var(--text); }
.msg-how { max-width: var(--measure); margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.sm-wrap ~ .foot-nav { max-width: 1020px; }

/* A sub-message card: title and state, the description with its supporting evidence on
   the same line, then one slim rating row and the reason. Compact, because there are 25. */
.sm-wrap { max-width: 1020px; container-type: inline-size; }
.sm-count { margin: 0 0 10px 4px; min-height: 20px; }
.sm-count-done { color: var(--text); font-weight: 600; }
.sm-list { display: flex; flex-direction: column; gap: 10px; }
.sm-card { padding: 22px 26px 22px; border-radius: 20px; background: var(--tile); scroll-margin-top: 90px; }
.sm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sm-title { display: flex; align-items: baseline; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.sm-code { font-weight: 600; color: var(--text-3); margin-right: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-title .sm-code { margin-right: 0; font-size: 15px; letter-spacing: 0; }
/* A sub-message code and its name: a long name wraps under its own first word. */
.cn { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.45em; align-items: baseline; text-align: left; vertical-align: baseline; }
.cn .sm-code { margin-right: 0; }
.sm-meta { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sm-meta .save-state { min-width: 0; }
/* State as a small tinted label: yellow while half done, green once complete. */
.sm-state { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: var(--pill); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.sm-state:empty { display: none; }
.sm-state.is-needs { background: var(--m-yellow-5); color: var(--text); }
.sm-state.is-needs::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.sm-state.is-done { background: var(--m-green-4); color: var(--text); padding-left: 5px; }
.sm-tick { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.sm-tick::after { content: ''; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sm-desc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 32px; margin-top: 4px; }
.sm-desc { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
/* Supporting evidence: secondary, right-aligned on the description's first line. The
   padding is taken back by the margin, so the text sits on the same baseline and the
   pill that appears while the drawer is open does not move anything. */
.sm-evidence { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; margin: -5px -12px -5px 0; padding: 5px 12px; border: none; border-radius: var(--pill); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
.sm-evidence::after { content: '\2192'; color: var(--text-2); font-weight: 600; }
.sm-evidence:hover { background: var(--tile-2); }
.sm-evidence-n { color: var(--text-2); font-weight: 500; white-space: pre; }
.sm-evidence.is-on { background: var(--tile-3); color: var(--text); }
.sm-evidence.is-on .sm-evidence-n { color: var(--text-2); }
.sm-evidence.is-gap { color: var(--text-2); font-weight: 500; }
.sm-evidence.is-gap::after { content: none; }
.sm-evidence.is-gap::before { content: ''; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-3); align-self: center; }
.sm-evidence.is-gap.is-on { background: var(--ctl-hover); color: var(--text); }
.sm-vote { display: grid; gap: 16px; margin-top: 18px; }
/* The 3 / 2 / 1 / 0 scale: four separate pills in one row, each as wide as its words. The
   chosen one takes the colour of every choice on the site: purple with white text. */
.choices-scale { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.sm-card .choices-scale .choice { gap: 8px; min-height: 42px; padding: 9px 18px 9px 16px; border-radius: var(--pill); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text); font-size: 14.5px; }
.sm-card .choices-scale .choice:hover { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--pick); color: var(--text); }
.choices-scale .choice-key { font-weight: 700; font-variant-numeric: tabular-nums; }
.choices-scale .choice-label { font-weight: 500; }
.sm-card .choices-scale .choice[aria-pressed="true"], .sm-card .choices-scale .choice[aria-pressed="true"]:hover { background: var(--pick); box-shadow: none; color: #fff; }
.sm-card .choices-scale .choice:disabled { opacity: 0.55; }
.sm-card .choices-scale .choice:disabled[aria-pressed="true"] { opacity: 1; }
/* The reason: room for three lines to start, growing with what is written. */
.sm-card textarea.sm-reason { min-height: calc(4.35em + 22px); padding: 11px 14px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 15px; line-height: 1.45; resize: none; overflow: hidden; }
.sm-card textarea.sm-reason:focus { box-shadow: var(--focus); }
@container (max-width: 760px) {
  .sm-card { padding: 20px 18px; }
  .sm-desc-row { flex-direction: column; align-items: flex-start; }
  .sm-evidence { margin: 0 0 0 -12px; }
}
@container (max-width: 420px) {
  .sm-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Home: each message lists its sub-messages with the rating given and a tick once complete. */
.theme-card .msg-label { font-size: 17px; color: var(--text-2); margin-top: 4px; }
.home-subs { list-style: none; margin: 0; padding: 0; }
.home-subs li { border-top: 1px solid var(--hair); }
.home-subs li:first-child { border-top: none; }
.home-subs a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; font-size: 14.5px; }
.home-subs a:hover .hs-name { color: var(--text); text-decoration: none; }
.hs-code { color: var(--text-3); font-weight: 600; font-size: 13px; }
.hs-name { font-weight: 500; line-height: 1.35; transition: color 0.15s; }
.hs-state { display: inline-flex; align-items: center; gap: 8px; }
.msg-tile { display: block; }
.msg-tile .msg-label { font-size: 15px; color: var(--text-2); margin-top: 2px; }
.msg-tile .m-subs li .m-code { color: var(--text-3); font-weight: 600; min-width: 2em; }

/* A rating as a small square in the purple ramp of the vote bars: darkest for 3. */
.rating { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: #fff; background: var(--ramp-1); vertical-align: middle; }
.rating.r-2 { background: var(--ramp-2); }
.rating.r-1 { background: var(--ramp-3); color: var(--text); }
.rating.r-0 { background: var(--ramp-4); color: var(--text); }
.rating.r-none { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--hair-2); font-weight: 500; }
.rating.rating-sm { min-width: 22px; height: 22px; font-size: 12.5px; border-radius: 7px; padding: 0 5px; }
.review-table td:first-child { width: 34%; }
.review-table th, .review-table td { padding: 10px 10px; text-align: left; vertical-align: baseline; }

/* Portraits: a photo, or white initials on Motherson red, the same circle for everyone. */
.avatar { --av: 40px; width: var(--av); height: var(--av); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: var(--red); color: #fff; font-size: calc(var(--av) * 0.36); font-weight: 700; letter-spacing: 0.01em; line-height: 1; user-select: none; vertical-align: middle; }
.avatar.has-photo { background: var(--tile-3); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-cell { display: inline-flex; align-items: center; gap: 10px; }
.photo-cell { min-width: 150px; }
.photo-actions { margin-top: 6px; gap: 2px; }
.photo-actions label.btn { cursor: pointer; }
/* ---------- supporting evidence drawer ---------- */
/* Sits beside the assessment rather than over it: while it is open the page makes
   room for it, so every control stays reachable. No backdrop, the page stays usable,
   it scrolls on its own, and it closes with the button or Escape. */
:root { --evidence-w: 470px; }
.evidence { position: fixed; top: 66px; right: 0; bottom: 0; z-index: 25; width: min(var(--evidence-w), 100vw); display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--hair-2); box-shadow: -16px 0 48px rgba(35, 31, 32, 0.08); animation: ev-in 0.18s ease-out; }
body.evidence-open .container { margin-right: min(var(--evidence-w), 100vw); transition: margin-right 0.18s ease-out; }
@keyframes ev-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ev-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--hair); }
.ev-title { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; }
.ev-title:focus { box-shadow: none; }
.ev-count { font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-top: 3px; }
.ev-close { align-self: start; margin: -3px -8px 0 0; }
.ev-note { grid-column: 1 / -1; font-size: 13px; color: var(--text-2); line-height: 1.45; margin-top: 8px; }
/* DEMAL coverage: one cell per pillar, so gaps show before any reading. */
.ev-pillars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(min-content, 1fr)); gap: 6px; margin-top: 14px; }
.ev-pillar { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 7px; border: none; border-radius: 12px; background: var(--tile); color: var(--text); font: inherit; cursor: pointer; transition: background 0.15s; }
.ev-pillar:hover { background: var(--ctl-hover); }
.ev-pillar-letter { font-size: 15px; font-weight: 700; line-height: 1.2; }
.ev-pillar-name { font-size: 11.5px; color: var(--text-2); line-height: 1.3; white-space: nowrap; }
.ev-pillar-n { font-size: 13px; font-weight: 600; margin-top: 2px; }
.ev-pillar.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text-3); }
.ev-pillar.is-empty .ev-pillar-name { color: var(--text-3); }
.ev-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 40px; }
.ev-cards { display: flex; flex-direction: column; gap: 8px; }
.ev-group + .ev-group { margin-top: 22px; }
.ev-group-title { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 8px; }
.ev-group-letter { font-weight: 700; color: var(--text-3); }
.ev-group-n { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.ev-group-empty { font-size: 13.5px; color: var(--text-2); padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair-2); }
/* Story card: collapsed shows two lines of story and proof; "Read full story" opens the rest. */
.evc { background: var(--tile); border-radius: 14px; padding: 13px 15px 12px; }
.evc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: baseline; }
.evc .story-num { background: var(--tile-2); }
.evc-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.evc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ev-tag { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--text-2); padding: 2px 8px; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--hair-2); white-space: nowrap; }
.ev-badge { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text); padding: 2px 8px; border-radius: var(--pill); background: var(--tile-2); white-space: nowrap; }
/* Key evidence: listed first, outlined and labelled so it reads as the lead example. The label is
   outlined too: a filled pill on this site only ever means a chosen option (purple) or an action (red). */
.ev-key { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--text); padding: 2px 8px; border-radius: var(--pill); background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--text); white-space: nowrap; }
.evc.is-key { box-shadow: inset 0 0 0 1.5px var(--text); }
.evc-summary, .evc-proof { font-size: 13.5px; line-height: 1.5; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.evc-proof { color: var(--text-2); margin-top: 6px; }
.evc-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.evc-proof .evc-label { color: var(--text); }
.evc-label-story, .evc-why { display: none; }
.evc.is-open .evc-summary, .evc.is-open .evc-proof { display: block; -webkit-line-clamp: unset; overflow: visible; color: var(--text); }
.evc.is-open .evc-label-story { display: block; margin-top: 10px; }
.evc.is-open .evc-label-story + .evc-summary { margin-top: 2px; }
.evc.is-open .evc-proof, .evc.is-open .evc-why { margin-top: 10px; }
.evc.is-open .evc-proof .evc-label, .evc.is-open .evc-why .evc-label { display: block; color: var(--text-2); margin-bottom: 2px; }
.evc.is-open .evc-why { display: block; font-size: 13.5px; line-height: 1.5; }
.evc-toggle { display: inline-block; margin-top: 7px; padding: 2px 0; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.evc-toggle:hover { color: var(--text); }
.evc-missing { font-size: 13px; color: var(--text-3); margin-top: 8px; }
.evc-caution { font-size: 12.5px; line-height: 1.45; margin-top: 6px; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.evc-caution .evc-label { color: var(--text); }
.evc-source { display: none; font-size: 12.5px; line-height: 1.45; margin-top: 8px; color: var(--text-2); }
.evc.is-open .evc-caution { display: block; -webkit-line-clamp: unset; overflow: visible; margin-top: 10px; }
.evc.is-open .evc-source { display: block; }
.ev-none { padding: 4px 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ev-none strong { display: block; color: var(--text); margin-bottom: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shared bits ---------- */
.admin-note { margin: -24px 0 18px; }
.story-num { font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 7px; background: var(--ctl); color: var(--text-2); white-space: nowrap; }
.card .story-num { background: var(--tile-2); }
.foot-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.missing-list { display: flex; flex-direction: column; }
.missing-list a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.missing-list a:first-child { border-top: none; }
.review-scores td, .review-scores th { padding: 10px 10px; }
.nowrap { white-space: nowrap; }
.rv-todo-group { margin-top: 18px; }
.rv-todo-name { font-size: 13px; font-weight: 600; color: var(--text-3); }
.rv-folds { margin-top: 20px; }
.rv-block + .rv-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hair); }
.rv-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rv-edit { font-size: 14px; font-weight: 600; color: var(--text-2); }
.rv-edit:hover { color: var(--text); }
.review-scores td:first-child { width: 28%; }
.quote { padding: 12px 16px; border-left: 2px solid var(--hair-2); color: var(--text-2); white-space: pre-wrap; }

/* ---------- collapsible sections ---------- */
.fold { background: var(--tile); border-radius: var(--r-tile); }
.fold summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 20px; align-items: center; padding: 24px 32px; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary { border-radius: var(--r-tile); }
.fold[open] summary { border-radius: var(--r-tile) var(--r-tile) 0 0; }
.fold summary:focus-visible { box-shadow: inset 0 0 0 2px var(--hair-2); }
.fold-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 14px; }
.fold-n { width: 28px; height: 28px; border-radius: 50%; background: var(--tile-2); color: var(--text-2); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fold-n-done { background: var(--ok); }
.fold-n-done::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; }
.fold-summary { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.fold-chev { width: 10px; height: 10px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform 0.15s; margin-top: -4px; }
.fold[open] .fold-chev { transform: rotate(-135deg); margin-top: 4px; }
.fold-body { padding: 0 32px 32px; }

/* ---------- admin ---------- */
.tabs { display: flex; gap: 4px 26px; flex-wrap: wrap; margin: 0 0 32px; border-bottom: 1px solid var(--hair-2); }
.tabs a { position: relative; padding: 8px 0 12px; font-size: 15px; font-weight: 600; color: var(--text-3); transition: color 0.15s; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--nav); }
.tabs a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--nav); }
.edit-row { padding: 22px 0; border-top: 1px solid var(--hair); }
.edit-row:first-child { border-top: none; padding-top: 0; }
.edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.edit-grid .span-2 { grid-column: span 2; }
.edit-grid .field label { font-size: 13.5px; color: var(--text-2); font-weight: 500; }
.edit-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.report { white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
.report ul { margin: 6px 0 0; padding-left: 18px; }
code, .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--ctl); padding: 2px 6px; border-radius: 5px; }

/* ---------- results ---------- */
/* One page, Results, read two ways. The levels never look alike: the title, the view
   switch (a dark thumb), the Group sections (text tabs with a red underline), and the
   message filter (outlined chips). */
.rs-head { margin-bottom: 36px; }
.rs-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.rs-head .display { margin: 10px 0 12px; }
.rs-sub { font-size: 16px; color: var(--text-2); }
.rs-tools { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.rs-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill); background: var(--ctl); color: var(--text-2); font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s; }
.rs-toggle:hover { background: var(--ctl-hover); color: var(--text); }
.rs-toggle input { margin: 0; accent-color: var(--pick); }
.view-switch { display: inline-flex; gap: 4px; margin-top: 30px; padding: 4px; border-radius: var(--pill); background: var(--ctl); }
.view-switch a { padding: 10px 22px; border-radius: var(--pill); font-size: 15px; font-weight: 600; color: var(--text-2); transition: background 0.15s, color 0.15s; }
.view-switch a:hover { color: var(--text); }
.view-switch a.is-on { background: #FFFFFF; color: var(--text); box-shadow: 0 1px 3px rgba(35, 31, 32, 0.16); }
.rs-tabs { display: flex; gap: 34px; margin-top: 30px; border-bottom: 1px solid var(--hair-2); overflow-x: auto; scrollbar-width: none; }
.rs-tabs::-webkit-scrollbar { display: none; }
.rs-tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 15px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-3); white-space: nowrap; transition: color 0.15s; }
.rs-tabs a:hover { color: var(--text); }
.rs-tabs a.active { color: var(--text); }
.rs-tabs a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--nav); }
.rs-count { display: inline-block; padding: 1px 8px; border-radius: var(--pill); background: var(--ctl); color: var(--text-2); font-size: 12.5px; font-weight: 600; letter-spacing: 0; line-height: 1.5; }
.rs-tabs a.active .rs-count { background: var(--dark); color: #fff; }
.rs-filter { gap: 6px; margin: 0 0 18px; }
.rs-filter .choice { padding: 6px 13px; background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text-2); font-size: 13.5px; }
.rs-filter .choice:hover { background: var(--ctl); color: var(--text); }
.rs-filter .choice[aria-pressed="true"] { background: var(--pick); box-shadow: none; color: #fff; }
.results-intro { margin-bottom: 22px; }
.rs-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 32px; flex-wrap: wrap; margin: 64px 0 20px; }
.rs-section-head-first { margin-top: 0; }
.rs-section-head h2 { font-size: 26px; }
.rs-section-head p { margin-top: 6px; max-width: var(--measure); text-wrap: pretty; }
.rs-key { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 2px; font-size: 13px; color: var(--text-2); }
.rs-key > span { display: inline-flex; align-items: center; gap: 7px; }
.rs-h { display: flex; align-items: center; gap: 10px; margin: 52px 0 16px; font-size: 24px; }

/* Summary first: the top of the ranking and how much the team agrees, on a dark tile. */
.rs-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px 64px; padding: 40px 44px 42px; border-radius: var(--r-tile); background: var(--dark); color: #fff; }
.rs-kicker { margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.58); }
.rs-top { list-style: none; margin: 0; padding: 0; }
.rs-top li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rs-top li:first-child { padding-top: 2px; border-top: none; }
.rs-top-rank { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--red); }
.rs-top-name { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.rs-top-meta { display: block; margin-top: 3px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.rs-top-avg { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.rs-top-more { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.rs-hero-side { display: flex; flex-direction: column; }
.rs-hero-foot { margin-top: auto; padding-top: 24px; font-size: 14.5px; color: rgba(255, 255, 255, 0.62); }
.rs-hero-foot b { color: #fff; }
/* Agreement across the sub-messages: one block each, in the state colours. */
.rs-strip { display: grid; grid-template-columns: repeat(var(--n, 25), minmax(0, 1fr)); gap: 4px; height: 46px; }
.rs-strip i { border-radius: 5px; background: var(--tile-3); }
.rs-strip-legend { list-style: none; display: grid; gap: 8px; margin: 18px 0 0; padding: 0; font-size: 15px; }
.rs-strip-legend li { display: flex; align-items: center; gap: 10px; }
.rs-strip-legend i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; background: var(--tile-3); }
.rs-strip-legend b { min-width: 26px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.rs-strip .is-strong, .rs-strip-legend .is-strong { background: var(--ok); }
.rs-strip .is-mixed, .rs-strip-legend .is-mixed { background: var(--warn); }
.rs-strip .is-divided, .rs-strip-legend .is-divided { background: var(--bad); }
.rs-hero .rs-strip .is-na, .rs-hero .rs-strip-legend .is-na { background: rgba(255, 255, 255, 0.22); }
.rs-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 24px 56px; align-items: center; padding: 36px 40px; border-radius: var(--r-tile); background: var(--tile); }
.rs-overview-title { font-size: 30px; letter-spacing: -0.025em; line-height: 1.15; }
.rs-overview p { margin-top: 10px; line-height: 1.6; text-wrap: pretty; }
.rs-overview .rs-strip-legend { font-size: 14.5px; }
.rs-overview .rs-strip-legend b { font-size: 17px; }
.rs-overview + .fold { margin-top: 12px; }
.rs-rules { max-width: var(--measure); line-height: 1.65; }

/* Agreement as a tinted badge: green strong, yellow mixed, pink divided. */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: var(--pill); background: var(--ctl); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); }
.card .badge-na, .rk-item .badge-na { background: var(--tile-2); }
.badge-strong { background: var(--m-green-4); }
.badge-strong::before { background: var(--ok); }
.badge-mixed { background: var(--m-yellow-5); }
.badge-mixed::before { background: var(--warn); }
.badge-divided { background: var(--m-pink-5); }
.badge-divided::before { background: var(--bad); }
.badge-polar { background: transparent; box-shadow: inset 0 0 0 1px var(--m-pink-4); color: var(--text-2); }
.badge-polar::before { background: var(--bad); }

/* Every vote at once: one rating square per person on the voting list. */
.ballot { display: inline-flex; flex-wrap: nowrap; gap: 4px; vertical-align: middle; }
.ballot .rating { width: 24px; min-width: 24px; height: 24px; padding: 0; border-radius: 7px; font-size: 13px; }
.ballot .rating.r-none { box-shadow: inset 0 0 0 1.5px var(--hair-2); }

/* Ranking: the same row for every sub-message. */
.rk-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.rk-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 64px 200px; gap: 22px; align-items: center; padding: 16px 24px; border-radius: 18px; background: var(--tile); transition: background 0.15s; scroll-margin-top: 90px; }
.rk-item.no-rank { grid-template-columns: minmax(0, 1fr) auto 64px 200px; }
.rk-item:hover { background: var(--tile-3); }
.rk-rank { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--text-3); text-align: center; }
.rk-item.is-top .rk-rank { color: var(--red); }
.rk-title { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.rk-meta { display: block; margin-top: 3px; font-size: 13px; color: var(--text-3); }
.rk-avg { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; text-align: right; }
.rk-state { display: flex; flex-wrap: wrap; gap: 6px; }

/* Where opinions differ: the votes, then both sides next to each other in one plain panel. */
.df-card { padding: 28px 32px 30px; scroll-margin-top: 90px; }
.card.df-card + .card.df-card { margin-top: 14px; }
.df-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 24px; flex-wrap: wrap; }
.df-title { margin-top: 4px; font-size: 21px; }
.df-summary { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 14px; }
.df-avg { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.df-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; border-radius: 16px; background: var(--tile-2); }
.df-side { min-width: 0; padding: 16px 22px 12px; }
.df-side + .df-side { border-left: 1px solid var(--hair); }
.df-side h4, .df-none h4 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: 14px; font-weight: 600; }
.df-side h4 .num { font-size: 13px; font-weight: 500; color: var(--text-3); }
.df-side > .small.faint { padding: 8px 0 6px; }
.df-none { margin-top: 12px; padding: 14px 22px 10px; border-radius: 16px; background: var(--tile-2); }

/* A reason on one line: the rating, who gave it, what they wrote. */
.reasons { list-style: none; margin: 0; padding: 0; }
.reason { display: grid; grid-template-columns: auto 104px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hair); }
.reason:first-child { border-top: none; }
.reason-who { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.reason-text { font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.reason-note { padding: 10px 0 8px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--text-3); }
.df-side .reason { grid-template-columns: auto 84px minmax(0, 1fr); }
.hide-names .reason, .hide-names .df-side .reason { grid-template-columns: auto minmax(0, 1fr); }
.hide-names .who { display: none; }

/* Reasons by message: a quiet message heading, then one plain card per sub-message. */
.rm-theme { margin-top: 44px; }
.rs-filter + .rm-theme { margin-top: 26px; }
.rm-theme-head { margin-bottom: 16px; }
.rm-name { display: flex; align-items: baseline; gap: 12px; font-size: 28px; letter-spacing: -0.025em; line-height: 1.15; }
.rm-num { font-weight: 600; color: var(--text-3); }
.rm-label { margin-top: 6px; max-width: var(--measure); font-size: 15.5px; color: var(--text-2); }
.rm-label b { font-weight: 600; color: var(--text); }
.rm-sub { padding: 26px 30px 22px; scroll-margin-top: 90px; }
.card.rm-sub + .card.rm-sub { margin-top: 12px; }
.rm-sub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 24px; flex-wrap: wrap; }
.rm-sub-text { min-width: 0; max-width: 760px; }
.rm-sub-title { font-size: 20px; }
.rm-desc { margin-top: 3px; font-size: 15px; color: var(--text-2); }
.rm-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 14px; }
.rm-avg { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.rm-reasons { margin-top: 14px; padding: 4px 20px; border-radius: 16px; background: var(--tile-2); }
.rm-none { margin-top: 12px; font-size: 14.5px; color: var(--text-3); }
/* The team decision: one quiet line under the reasons; the chosen one is outlined, not black. */
.rm-sub .decision { margin-top: 14px; padding-top: 0; border-top: none; }
.d-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rm-sub .decision .d-title { margin: 0 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.d-row .choices { gap: 4px; }
.d-row .choice { padding: 6px 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 13.5px; }
.card .d-row .choice:hover { background: var(--tile-2); }
.card .d-row .choice[aria-pressed="true"] { background: var(--pick); box-shadow: none; color: #fff; }
.d-row input { flex: 1 1 220px; min-width: 180px; padding: 8px 12px; font-size: 14px; }
.rm-sub .decision .d-recorded { margin-top: 6px; font-size: 12.5px; color: var(--text-3); }

/* Summary tiles, used by Decisions and Admin. A table or tile after them keeps its gap. */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kpis > .card { margin-top: 0; }
.kpis + .card, .kpis + .table-wrap { margin-top: 20px; }
.kpi .k-label, .k-label { font-size: 13.5px; color: var(--text-3); font-weight: 600; margin-bottom: 14px; }
.kpi .big-num { font-size: 48px; }
/* The 3 / 2 / 1 / 0 bar with its counts underneath. */
.pbar { height: 12px; }
.pbar-legend { display: flex; gap: 12px; margin-top: 7px; font-size: 12.5px; color: var(--text-2); }
.pbar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pbar-legend b { font-weight: 600; color: var(--text); }
.pbar-legend .is-zero, .pbar-legend .is-zero b { color: var(--text-3); font-weight: 500; }
.pbar-legend .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
/* Vaaman keeps the earlier message block and comment list. */
.result-theme { padding: 44px; }
.result-theme .r-name { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; color: var(--text); }
.result-theme .msg-label { font-size: 19px; margin-top: 6px; }
.result-theme .r-message { font-size: 18px; color: var(--text-2); margin-top: 8px; max-width: 640px; }
.comments { display: grid; gap: 10px; }
.comment { padding: 10px 16px; border-left: 2px solid var(--hair-2); font-size: 15px; line-height: 1.5; }
.comment .who { font-weight: 600; font-size: 13.5px; margin-right: 8px; }
.comment .rating { margin-right: 10px; vertical-align: 1px; }
.comment .text { white-space: pre-wrap; }
.decision { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hair); }
.decision .d-title { font-size: 13.5px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; }
.decision .d-form { display: flex; flex-direction: column; gap: 12px; }
.decision .d-recorded { font-size: 13.5px; color: var(--text-3); }

@media (max-width: 1100px) {
  .rs-hero, .rs-overview { grid-template-columns: 1fr; }
  .rk-item { grid-template-columns: 40px minmax(0, 1fr) 64px; gap: 10px 18px; }
  .rk-item.no-rank { grid-template-columns: minmax(0, 1fr) 64px; }
  .rk-rank, .rk-main, .rk-avg { grid-row: 1; }
  .rk-ballot, .rk-state { grid-column: 2 / -1; }
  .rk-item.no-rank .rk-ballot, .rk-item.no-rank .rk-state { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .rs-tabs { gap: 24px; }
  .rs-tabs a { font-size: 16px; }
  .rs-hero { padding: 30px 26px; }
  .rs-overview { padding: 28px 26px; }
  .rs-overview-title { font-size: 24px; }
  .rk-item { padding: 14px 16px; }
  .df-sides { grid-template-columns: 1fr; }
  .df-side + .df-side { border-left: none; border-top: 1px solid var(--hair); }
  .rm-name { font-size: 24px; }
  .result-theme { padding: 30px; }
}
@media (max-width: 600px) {
  .rs-strip { height: 38px; gap: 3px; }
  .rs-tabs { gap: 20px; }
  .rs-tabs a { font-size: 15px; }
  .rs-tabs .rs-count { display: none; }
  .ballot { gap: 3px; }
  .ballot .rating { width: 20px; min-width: 20px; height: 20px; font-size: 11.5px; border-radius: 6px; }
  .rs-top li { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; }
  .rs-top-name { font-size: 17px; }
  .reason { grid-template-columns: auto minmax(0, 1fr); }
  .reason-text { grid-column: 1 / -1; margin-top: 4px; }
}
/* Vaaman: a selected sub-message with its evidence underneath. */
.vs-sub { padding: 18px 0; border-top: 1px solid var(--hair); }
.vs-sub:first-of-type { border-top: none; }
.vs-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.vs-name { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.vs-meta { margin-top: 4px; }
.vs-story { padding: 8px 0; border-top: 1px solid var(--hair); }
.vs-story:first-of-type { border-top: none; padding-top: 0; }
.discussion-item { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-top: 1px solid var(--hair); }
.discussion-item:first-of-type { border-top: none; }
.discussion-item .reasons { color: var(--text-2); font-size: 14.5px; margin-top: 4px; }
.hold-item { align-items: flex-start; }
.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--hair-2); } to { box-shadow: 0 0 0 3px transparent; } }

/* ---------- people ---------- */
/* The stage: red portraits float slowly; position follows voting similarity. Every moving
   part stops for reduced motion (see the end of this file). */
.pp-stage { --pp-size: 78px; position: relative; height: clamp(460px, 46vw, 580px); border-radius: var(--r-tile); background: var(--tile); }
.pp { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s; }
.pp-stage.is-placed .pp { opacity: 1; }
.pp.is-hover, .pp.is-selected, .pp.is-compared { z-index: 3; }
.pp.is-hover { z-index: 4; }
.pp-push { position: absolute; left: 0; top: 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pp-float { position: absolute; left: 0; top: 0; animation: pp-drift var(--dur, 15s) ease-in-out var(--delay, 0s) infinite; will-change: transform; }
@keyframes pp-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(var(--dx1, 0px), var(--dy1, 0px), 0); }
  50% { transform: translate3d(var(--dx2, 0px), var(--dy2, 0px), 0); }
  75% { transform: translate3d(var(--dx3, 0px), var(--dy3, 0px), 0); }
}
.pp-face { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(var(--pp-size) / -2)); display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer; transition: opacity 0.35s; }
.pp-face:focus-visible { box-shadow: none; }
/* the stage decides the portrait size, over the size the avatar was drawn with */
.pp-avatar { --av: var(--pp-size) !important; font-size: calc(var(--pp-size) * 0.34); box-shadow: 0 12px 26px rgba(218, 33, 40, 0.24); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s; }
.pp.is-hover .pp-avatar, .pp-face:focus-visible .pp-avatar { transform: scale(1.08); box-shadow: 0 16px 34px rgba(218, 33, 40, 0.32); }
.pp-face:focus-visible .pp-avatar { outline: 3px solid rgba(35, 31, 32, 0.28); outline-offset: 4px; }
.pp.is-selected .pp-avatar { box-shadow: 0 0 0 4px var(--tile), 0 0 0 7px var(--pick), 0 16px 34px rgba(218, 33, 40, 0.3); }
.pp.is-compared .pp-avatar { box-shadow: 0 0 0 4px var(--tile), 0 0 0 7px var(--pick-soft), 0 16px 34px rgba(218, 33, 40, 0.24); }
.pp-name { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.pp-sim { margin-top: -5px; min-height: 16px; font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.pp.is-empty .pp-avatar { opacity: 0.55; }
.pp-stage.has-selection .pp:not(.is-selected):not(.is-compared):not(.is-hover) .pp-face { opacity: 0.62; }
/* The hover summary: a small dark label above the portrait, below it near the top edge. */
.pp-card { position: absolute; left: 0; bottom: calc(var(--pp-size) / 2 + 12px); transform: translate(-50%, 4px); display: flex; flex-direction: column; gap: 2px; padding: 9px 13px; border-radius: 12px; background: var(--dark); color: #fff; font-size: 13px; line-height: 1.35; white-space: nowrap; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.pp-card .faint { color: rgba(255, 255, 255, 0.62); }
.pp.card-below .pp-card { bottom: auto; top: calc(var(--pp-size) / 2 + 48px); }
.pp.card-start .pp-card { left: -28px; transform: translate(0, 4px); }
.pp.card-end .pp-card { left: auto; right: -28px; transform: translate(0, 4px); }
.pp.is-hover .pp-card { opacity: 1; transform: translate(-50%, 0); }
.pp.is-hover.card-start .pp-card, .pp.is-hover.card-end .pp-card { transform: translate(0, 0); }
.pp-legend { margin: 12px 4px 0; max-width: var(--measure); }
/* One person's panel. */
.pp-panel { margin-top: 24px; padding: 28px 34px 34px; scroll-margin-top: 90px; }
.pp-switch { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--hair-2); }
.pp-mini { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 4px; border: none; border-radius: var(--pill); background: var(--tile-2); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.pp-mini:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--hair-2); }
.pp-mini.is-on { background: var(--pick-tint); color: var(--pick); box-shadow: inset 0 0 0 1.5px var(--pick); font-weight: 600; }
.pp-mini.is-on:focus-visible, .names .choice[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 1.5px var(--pick), var(--focus); }
.pp-mini.is-compared { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--pick-soft); }
.pp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; }
.pp-head-name { font-size: 32px; letter-spacing: -0.025em; line-height: 1.1; }
.pp-head-text .muted { margin-top: 4px; }
.pp-counts { margin-top: 6px; font-size: 14.5px; font-weight: 500; }
.pp-mode { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pp-mode-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; }
.pp-mode-label { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.pp-mode .choices { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--tile-3); }
.card .pp-mode .choice { padding: 7px 14px; background: transparent; color: var(--text-2); white-space: nowrap; }
.card .pp-mode .choice .choice-label { font-weight: 600; }
.card .pp-mode .choice:hover { background: transparent; color: var(--text); }
.card .pp-mode .choice[aria-pressed="true"] { background: #FFFFFF; color: var(--text); box-shadow: 0 1px 3px rgba(35, 31, 32, 0.16); }
.pp-other select { width: auto; padding: 7px 12px; }
.pp-body { margin-top: 24px; }
.pp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pp-fact { padding: 18px 20px; border-radius: 16px; background: var(--tile-2); }
.pp-fact .k-label { margin-bottom: 4px; }
.pp-fact-n { margin: 4px 0 6px; font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.pp-fact-n small { margin-left: 4px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.pp-block { margin-top: 30px; }
.pp-block h3 { font-size: 17px; margin-bottom: 10px; }
.pp-block h3 .faint { margin-left: 4px; font-size: 14px; font-weight: 500; }
.pp-block > .small.faint { margin: -2px 0 12px; max-width: var(--measure); }
.pp-list { list-style: none; margin: 0; padding: 0; }
.pp-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 14.5px; }
.pp-list li:first-child { border-top: none; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--pill); background: var(--tile-2); font-size: 13.5px; font-weight: 500; }
.pp-differ { padding: 12px 0; border-top: 1px solid var(--hair); }
.pp-differ:first-of-type { border-top: none; }
.pp-differ-head { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 14.5px; font-weight: 600; }
.pp-differ-nums { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 400; }
.pp-differ .quote { margin-top: 8px; padding: 6px 14px; }
.pp-words { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-word { padding: 7px 14px; border: none; border-radius: var(--pill); background: var(--tile-2); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.pp-word:hover { background: var(--tile-3); }
.pp-word.is-on { background: var(--pick); color: #fff; }
.pp-word.is-on .faint { color: rgba(255, 255, 255, 0.65); }
.pp-votes-group { margin-top: 18px; }
.pp-votes-group .rv-todo-name { margin-bottom: 4px; }
/* Every vote: their rating, the group's average and the gap, in words and numbers. */
.pp-vote { display: grid; grid-template-columns: minmax(0, 1.05fr) 270px minmax(0, 1.5fr); gap: 6px 22px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--hair); transition: background 0.2s, box-shadow 0.2s; }
.rv-todo-name + .pp-vote { border-top-color: transparent; }
/* A tinted row carries no line above or below it, so rules stay straight. */
.pp-vote.is-far { border-radius: 12px; border-top-color: transparent; background: rgba(246, 0, 98, 0.06); }
.pp-vote.is-far + .pp-vote { border-top-color: transparent; }
.pp-vote.is-word { border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--text); }
.pp-vote-name { font-size: 14.5px; font-weight: 500; }
.pp-vote-nums { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-group { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.pp-group b { font-weight: 600; color: var(--text); }
.pp-gap { padding: 2px 9px; border-radius: var(--pill); background: var(--tile-3); color: var(--text-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-gap.is-far { background: var(--m-pink-5); color: var(--text); }
.pp-gap.is-close { background: var(--m-green-4); color: var(--text); }
.pp-vote-reason { font-size: 14.5px; line-height: 1.5; }
/* Two people side by side. */
.pp-pair-head { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.pp-pair-people { display: flex; align-items: center; gap: 10px; }
.pp-vs { color: var(--text-3); font-size: 18px; }
.pp-pair-row { padding: 14px 0; border-top: 1px solid var(--hair); }
.pp-pair-row:first-of-type { border-top: none; }
.pp-pair-name { margin-bottom: 8px; font-size: 14.5px; font-weight: 600; }
.pp-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.pp-side { padding: 10px 14px; border-radius: 12px; background: var(--tile-2); }
.pp-side-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13.5px; }
.pp-pick { margin-top: 4px; }
.pp-hint { margin-left: 6px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.pp-empty { font-size: 15px; color: var(--text-2); }
.pp-reason { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--text); }
.pp-differ-nums { gap: 10px; }
.pp-differ-name { font-weight: 600; }
.pp-rules { margin-top: 32px; }
.pp-rules .fold { background: var(--tile-2); border-radius: 16px; }
.pp-rules .fold summary { padding: 16px 22px; }
.pp-rules .fold-title { font-size: 15px; }
.pp-rules .fold-summary { font-size: 13.5px; color: var(--text-3); }
.pp-rules .fold-body { padding: 0 22px 18px; }
.pp-rules-list { margin: 0; padding-left: 18px; line-height: 1.6; }
.pp-rules-list li + li { margin-top: 6px; }
@media (max-width: 1100px) {
  .pp-vote { grid-template-columns: minmax(0, 1fr) 270px; }
  .pp-vote-reason { grid-column: 1 / -1; }
  .pp-facts { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pp-stage { --pp-size: 62px; height: 520px; }
  .pp-panel { padding: 24px 20px 28px; }
  .pp-head { grid-template-columns: auto minmax(0, 1fr); }
  .pp-mode { grid-column: 1 / -1; align-items: flex-start; }
  .pp-mode-row { justify-content: flex-start; }
  .pp-head-name { font-size: 26px; }
  .pp-grid, .pp-sides { grid-template-columns: 1fr; }
  .pp-vote { grid-template-columns: 1fr; padding: 11px 6px; }
}
@media (max-width: 600px) {
  .pp-stage { --pp-size: 52px; height: 800px; }
  .card .pp-mode .choice { padding: 7px 12px; }
  .pp-card { white-space: normal; width: 190px; }
}

/* ---------- presentation mode ---------- */
body.present .topbar { display: none; }
body.present .container { max-width: 1500px; padding: 48px 64px 160px; font-size: 18px; }
body.present .display { font-size: 64px; }
body.present .result-theme .r-name { font-size: 44px; }
body.present .result-theme .r-message { font-size: 22px; max-width: 800px; }
body.present .big-num { font-size: 80px; }
body.present .rs-tabs a { font-size: 21px; }
body.present .rs-top-name { font-size: 24px; }
body.present .rs-top-rank, body.present .rs-top-avg { font-size: 32px; }
body.present .rk-item { grid-template-columns: 52px minmax(0, 1fr) auto 90px 230px; padding: 20px 28px; }
body.present .rk-item.no-rank { grid-template-columns: minmax(0, 1fr) auto 90px 230px; }
body.present .rk-title { font-size: 21px; }
body.present .rk-avg, body.present .rk-rank { font-size: 30px; }
body.present .ballot .rating { width: 30px; min-width: 30px; height: 30px; font-size: 15px; }
body.present .df-title, body.present .rm-sub-title { font-size: 26px; }
body.present .reason-text { font-size: 18px; }
body.present .badge { font-size: 15px; }
body.present .present-hide { display: none !important; }
.present-exit { position: fixed; right: 24px; bottom: 24px; z-index: 30; }

/* ---------- modal & toast ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(35, 31, 32, 0.4); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { background: #fff; border-radius: 22px; padding: 30px; width: 100%; max-width: 480px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22); }
.modal .btn { background: var(--ctl); }
.modal .btn:hover { background: var(--ctl-hover); }
/* A dialog's own button colours win over the grey above, so white text never sits on grey. */
.modal .btn-primary { background: var(--red); color: #fff; }
.modal .btn-primary:hover { background: #C41D23; }
.modal .btn-dark { background: var(--dark); color: #fff; }
.modal .btn-dark:hover { background: #3A3536; }
.modal h2 { margin-bottom: 10px; font-size: 22px; }
.modal p { color: var(--text-2); line-height: 1.55; }
.modal .actions { margin-top: 24px; justify-content: flex-end; }
.toasts { position: fixed; left: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--dark); color: #fff; padding: 11px 18px; border-radius: var(--pill); font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); animation: toast-in 0.18s ease-out; }
.toast-error { background: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .kpis, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { display: none; }
}
@media (max-width: 860px) {
  .container { padding: 40px 24px 120px; }
  body.evidence-open .container { margin-right: auto; }
  .topbar { padding: 0 24px; gap: 18px; }
  .who-bar .status-pill { display: none; }
  .display { font-size: 40px; }
  .signin .display { font-size: 48px; }
  .hero { padding: 32px; border-radius: 22px; }
  .hero h1 { font-size: 32px; }
  .message-large { font-size: 24px; }
  .msg-label { font-size: 19px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .admin-note { margin-top: -16px; }
  .edit-grid { grid-template-columns: 1fr; }
  .edit-grid .span-2 { grid-column: span 1; }
  .card { padding: 26px; }
  .theme-card { padding: 28px; }
  .submit-card { padding: 30px; }
  .section { margin-top: 56px; }
  .fold summary { grid-template-columns: minmax(0, 1fr) 20px; padding: 20px 24px; }
  .fold-summary { grid-column: 1 / -1; justify-content: flex-start; }
  .fold-body { padding: 0 24px 24px; }
}
@media (max-width: 600px) {
  .evidence { border-left: none; }
  .ev-pillar-name { display: none; }
  .support-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .support-row [data-remove-support] { justify-self: end; }
  .vote-steps { margin-top: -16px; }
  .foot-nav .btn { flex: 1 1 auto; max-width: 100%; white-space: normal; text-align: center; }
}

/* Reduced motion: the same composition, without movement. The People view also sets
   .is-still from the same preference, so a script-driven nudge never runs either. */
.pp-stage.is-still .pp-float { animation: none; }
.pp-stage.is-still .pp, .pp-stage.is-still .pp-push, .pp-stage.is-still .pp-avatar, .pp-stage.is-still .pp-face, .pp-stage.is-still .pp-card { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .evidence { animation: none; }
  html { scroll-behavior: auto; }
  .pp-float { animation: none; }
  .pp, .pp-push, .pp-avatar, .pp-face, .pp-card, .flash, .toast { transition: none; animation: none; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; font-size: 12px; }
  .topbar, .no-print, .present-exit, .toasts, .evidence { display: none !important; }
  .container { max-width: none; padding: 0; }
  .card, .fold { border: 1px solid #ddd; background: #fff; break-inside: avoid; page-break-inside: avoid; padding: 18px; border-radius: 10px; }
  .fold summary { padding: 0 0 10px; }
  .fold-body { padding: 0; }
  a[href]::after { content: none; }
}