/* Value Cards app. Reads only the tokens in tokens.css.
   No coloured edges on cards, callouts, forms or panels: a surface gets a full 1px line and a shadow, never a
   coloured left, top, right or bottom border. */

/* ===================================================================== */
/* Type                                                                   */
/* ===================================================================== */

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
.display { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
.h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; }
.h4 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.lede { font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 680px; text-wrap: pretty; }
.muted { color: var(--muted); }
.soft { color: var(--text-2); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.rule { width: 40px; height: 3px; border-radius: 2px; background: var(--accent); margin: 12px 0 18px; }
.quote { font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink); }
p { margin: 0 0 10px; }
.stack > * + * { margin-top: var(--gap, 12px); }

/* ===================================================================== */
/* Controls                                                               */
/* ===================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  padding: 11px 18px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s, color 0.18s, transform 0.18s var(--ease), box-shadow 0.18s;
}
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .chip:focus-visible, .seg button:focus-visible, .vc:focus-visible, .linkbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.gold { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.gold:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: rgba(26, 26, 31, 0.05); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); }
.btn.lg { font-size: 15.5px; padding: 15px 24px; border-radius: var(--r); }
.btn.sm { font-size: 12.5px; padding: 7px 12px; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.42; cursor: not-allowed; transform: none; }
.btn:disabled:hover { border-color: var(--line-strong); }
.btn.primary:disabled:hover { background: var(--ink); border-color: var(--ink); }
.btn .arr { transition: transform 0.2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 4px; }
.linkbtn:hover { color: var(--ink); }
.linkbtn { position: relative; }
.linkbtn::after { content: ''; position: absolute; inset: -10px -4px; }
.iconbtn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 0; background: none; cursor: pointer; color: var(--text-2); }
.iconbtn:hover { background: rgba(26, 26, 31, 0.06); color: var(--ink); }

label.field, .field { display: block; }
.field > span, .label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 0 0 6px; }
.field > span em, .label em { font-style: normal; font-weight: 400; color: var(--muted); }
.input, .textarea, .select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 11px 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.input::placeholder, .textarea::placeholder { color: #a9a8a2; }
.input.big { font-size: 26px; letter-spacing: 0.3em; text-align: center; font-family: var(--font-display); padding: 14px; }
.help { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.error-text { color: var(--bad); font-size: 13px; margin-top: 8px; min-height: 1.3em; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1.2;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: all 0.15s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.gold.on { background: var(--accent); border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--panel); color: var(--text-2); white-space: nowrap; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.partly { background: var(--partly-soft); color: var(--partly); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.gold { background: var(--accent-wash); color: var(--accent-ink); }
.badge.ink { background: var(--ink); color: #fff; }
.badge.live { background: #fdeceb; color: #c2352f; }
.badge.live .dot { animation: pulse 1.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: 0 0 8px; }
.status.locked { color: var(--good); }
.status.locked::before { background: var(--good); }
.status.active::before { background: var(--accent); }
.status.opened::before { background: #b5b3ab; }
.status.invited::before { background: transparent; border: 1.5px solid #b5b3ab; }

.seg { display: inline-flex; padding: 3px; background: var(--panel); border-radius: 10px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all 0.15s var(--ease); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.toggle input { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--panel-2); position: relative; transition: background 0.2s; cursor: pointer; margin: 0; flex: 0 0 38px; }
.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s var(--ease); }
.toggle input:checked { background: var(--ink); }
.toggle input:checked::after { transform: translateX(16px); }
.toggle input:focus-visible { box-shadow: 0 0 0 3px var(--focus); outline: none; }

.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14px; line-height: 1.5; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); margin: 1px 0 0; flex: 0 0 20px; }

.radio-cards { display: grid; gap: 10px; }
.radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: all 0.15s var(--ease); }
.radio-card:hover { border-color: var(--ink); }
.radio-card.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.radio-card input { margin-top: 3px; accent-color: var(--ink); }
.radio-card b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.radio-card span { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ===================================================================== */
/* Shell                                                                  */
/* ===================================================================== */

.topbar { position: sticky; top: 0; z-index: 40; background: rgba(246, 245, 242, 0.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 62px; display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 19px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.brand-mark { width: 22px; height: 28px; position: relative; display: inline-block; }
.brand-mark::before, .brand-mark::after { content: ''; position: absolute; inset: 0; border-radius: 4px; border: 1.5px solid var(--ink); background: var(--surface); }
.brand-mark::before { transform: rotate(-9deg) translate(-2px, 1px); background: var(--accent-wash); }
.brand-mark::after { transform: rotate(5deg) translate(2px, 0); }
.brand small { font-family: var(--font-body); font-size: 12px; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.topnav { display: flex; gap: 2px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.topnav a { font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.topnav a:hover { color: var(--ink); background: rgba(26, 26, 31, 0.05); }
.topnav a.on { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1); }
.topbar .spacer { flex: 1 1 auto; }
.me-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-2); border: 0; background: none; padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.me-pill:hover { background: rgba(26, 26, 31, 0.05); color: var(--ink); }
.me-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.me-pill .caret { font-size: 10px; color: var(--muted); }
.me-wrap { position: relative; }
.me-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-3); padding: 8px; animation: rise 0.18s var(--ease) both; }
.me-menu .me-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.me-menu .me-who b { display: block; font-size: 14px; }
.me-menu .me-who span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.me-menu button, .me-menu a { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.me-menu button:hover, .me-menu button:focus-visible, .me-menu a:hover, .me-menu a:focus-visible { background: var(--panel); outline: none; color: var(--ink); }

.page { max-width: 1240px; margin: 0 auto; padding: 36px 24px 120px; }
.page.narrow { max-width: 860px; }
.page.mid { max-width: 1040px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.page-head .h1 { margin-top: 8px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-1); }
.panel.flat { box-shadow: none; }
.panel.tint { background: var(--accent-wash); border-color: rgba(154, 123, 46, 0.18); box-shadow: none; }
.panel + .panel { margin-top: 18px; }
.grid > .panel + .panel { margin-top: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head .h3 { margin: 0; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.side { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 980px) { .grid.three, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .grid.two, .grid.three, .grid.four { grid-template-columns: minmax(0, 1fr); } }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.divider { height: 1px; background: var(--line); margin: 22px 0; border: 0; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; padding: 12px 14px; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs a.on, .tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabs.center > :first-child { margin-left: auto; }
.tabs.center > :last-child { margin-right: auto; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty .h3 { color: var(--ink); margin-bottom: 8px; }

.stat { padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.stat .label { margin-bottom: 4px; font-weight: 500; }
.stat .value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.stat .value small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.stat .sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.stat .value.small-value { font-size: 19px; line-height: 1.3; }
@media (max-width: 640px) {
  .grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid.three.stats > :last-child { grid-column: 1 / -1; }
  .stat { padding: 14px; }
  .stat .value { font-size: 24px; }
  .stat .value.small-value { font-size: 15.5px; }
  .hero-figure { font-size: 44px; }
}

.progress { height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden; display: flex; gap: 2px; }
.progress > i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.progress > i.p { background: var(--accent); }
.progress > i.o { background: #c9c7bf; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .who { display: flex; align-items: center; gap: 12px; }
.table .who b { display: block; font-weight: 600; }
.table .who span:not(.av) { display: block; font-size: 12.5px; color: var(--muted); }
.table-scroll { overflow-x: auto; }

.callout { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: var(--panel); font-size: 14px; color: var(--text-2); line-height: 1.55; }
.callout b { color: var(--ink); }
.callout.gold { background: var(--accent-wash); }
.callout .ico { flex: 0 0 auto; font-size: 18px; line-height: 1.3; }

.notice { border: 1px solid var(--line); background: var(--surface); padding: 14px 16px; border-radius: var(--r-sm); font-size: 14px; color: var(--text-2); }

/* ===================================================================== */
/* Avatars                                                                */
/* ===================================================================== */

.av { --s: 34px; width: var(--s); height: var(--s); flex: 0 0 var(--s); border-radius: 50%; display: inline-grid; place-items: center; background: var(--ink); color: #fff; font-size: calc(var(--s) * 0.36); font-weight: 600; letter-spacing: 0.02em; position: relative; user-select: none; }
.av.you { background: var(--accent); }
.av.pending { background: var(--surface); color: var(--muted); border: 1.5px dashed #c5c3bb; }
.av.lg { --s: 52px; }
.av.xl { --s: 72px; font-family: var(--font-display); font-weight: 400; font-size: 28px; }
.av.sm { --s: 26px; }
.av.xs { --s: 20px; font-size: 8.5px; }
.av.a { background: var(--pair-a); }
.av.b { background: var(--pair-b); }
.av-stack { display: inline-flex; }
.av-stack .av { box-shadow: 0 0 0 2px var(--surface); }
.av-stack .av + .av { margin-left: -8px; }
.av-stack .av.xs + .av.xs { margin-left: -4px; }
.av .live-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #2fb35b; box-shadow: 0 0 0 2px var(--surface); }

/* ===================================================================== */
/* Value cards                                                            */
/* ===================================================================== */

.vc {
  --w: 160px;
  position: relative; width: var(--w); aspect-ratio: 5 / 7; flex: 0 0 auto;
  background: #fff; border-radius: calc(var(--w) * 0.075);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden; user-select: none;
  container-type: inline-size; isolation: isolate;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.vc::before { content: ''; position: absolute; inset: 5cqw; border-radius: 4cqw; border: 1px solid rgba(26, 26, 31, 0.07); pointer-events: none; z-index: 2; }
.vc .art { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 11cqw 10cqw 2cqw; }
.vc .art img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.vc .nm { font-family: var(--font-display); font-size: clamp(7px, min(var(--fmax, 11.5cqw), 150cqw / var(--lw, 8)), 40px); line-height: 1.08; letter-spacing: -0.01em; text-align: center; color: var(--ink); padding: 0 8cqw 12cqw; min-height: 30cqw; display: flex; align-items: center; justify-content: center; text-wrap: balance; }
.vc.custom .art { background: repeating-linear-gradient(135deg, #fbfaf6, #fbfaf6 6px, #f5f3ec 6px, #f5f3ec 12px); }
.vc.custom .art .pen { font-family: var(--font-display); font-size: 40cqw; color: #d8d4c6; line-height: 1; }
.vc.custom .nm { font-style: italic; }
.vc .rank { position: absolute; top: 6cqw; left: 6cqw; z-index: 3; width: 17cqw; height: 17cqw; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: max(10px, 8.5cqw); font-weight: 700; display: grid; place-items: center; }
.vc .tag { position: absolute; top: 6cqw; right: 6cqw; z-index: 3; }
.vc.sel, .vc.sel:hover { box-shadow: 0 0 0 3px var(--accent), var(--shadow-card); }
.vc.pick.sel:hover { box-shadow: 0 0 0 3px var(--accent), 0 18px 36px -10px rgba(26, 26, 31, 0.28); }
.vc.dim { opacity: 0.45; filter: grayscale(0.4); }
.vc.pick { cursor: pointer; }
.vc.pick:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(26, 26, 31, 0.06), 0 18px 36px -10px rgba(26, 26, 31, 0.28); }
.vc.private::after { content: attr(data-private); position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; font-size: max(9px, 6.5cqw); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(26, 26, 31, 0.74); text-align: center; padding: 3cqw 0; }
.vc.w-xs { --w: 64px; }
.vc.w-sm { --w: 92px; }
.vc.w-md { --w: 128px; }
.vc.w-lg { --w: 210px; }
.vc.w-xl { --w: 270px; }
.vc.w-xs .nm { --fmax: 14cqw; min-height: 26cqw; padding-bottom: 9cqw; }
.vc.w-xs::before { display: none; }

.vc-back {
  position: relative; width: var(--w, 160px); aspect-ratio: 5 / 7; border-radius: calc(var(--w, 160px) * 0.075);
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.16), transparent 58%), linear-gradient(160deg, #a8883a, #8a6d25);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.vc-back::before { content: ''; position: absolute; inset: 7%; border-radius: 6%; border: 1.5px solid rgba(255, 255, 255, 0.45); }
.vc-back::after { content: 'Value Cards'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: calc(var(--w, 160px) * 0.12); color: rgba(255, 255, 255, 0.92); letter-spacing: -0.01em; }
.vc-back.small::after { content: none; }

.vc-row { display: flex; gap: 14px; flex-wrap: wrap; }
.vc-row.tight { gap: 8px; }
.vc-row.center { justify-content: center; }
.vc-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px; scrollbar-width: thin; max-width: 100%; min-width: 0; }

.fan { --fan-step: 62px; --fan-drop: 8px; position: relative; height: 230px; display: flex; justify-content: center; align-items: flex-end; margin: 0 auto 30px; }
.fan .vc { --w: 128px; position: absolute; bottom: 0; transform-origin: 50% 120%; transition: transform 0.6s var(--ease-spring);
  transform: translateX(calc(var(--d, 0) * var(--fan-step))) translateY(calc(var(--ad, 0) * var(--fan-drop))) rotate(calc(var(--d, 0) * var(--fan-rot, 9deg))); }
.fan.small { --fan-step: 46px; --fan-drop: 5px; height: 170px; }
.fan.small .vc { --w: 96px; }
@media (max-width: 520px) {
  .fan { --fan-step: 40px; --fan-drop: 6px; height: 176px; }
  .fan .vc { --w: 100px; }
  .fan.small { --fan-step: 32px; height: 140px; }
  .fan.small .vc { --w: 80px; }
}

/* ===================================================================== */
/* Onboarding                                                             */
/* ===================================================================== */

.ob { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.ob-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; max-width: 1240px; width: 100%; margin: 0 auto; }
.ob-stage { flex: 1 1 auto; width: 100%; max-width: 660px; margin: 0 auto; padding: 10px 24px 10px; display: flex; flex-direction: column; justify-content: center; }
.ob-slide { text-align: center; animation: rise 0.42s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ob-slide .kicker { margin-bottom: 14px; }
.ob-title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; }
.ob-sub { font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 540px; margin: 0 auto; text-wrap: pretty; }
.ob-card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-2); padding: 18px 22px; text-align: left; border: 1px solid var(--line); max-width: 520px; margin: 0 auto 30px; }
.ob-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.ob-row:first-child { border-top: 0; padding-top: 2px; }
.ob-row:last-child { padding-bottom: 2px; }
.ob-row .n { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; }
.ob-row .n.lock { background: var(--accent-wash); color: var(--accent-ink); font-family: var(--font-body); font-size: 15px; }
.ob-row .t { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ob-row .t b { display: block; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.ob-quote { max-width: 520px; margin: 26px auto 0; text-align: left; background: var(--surface); border-radius: 14px; padding: 18px 20px; border: 1px solid var(--line); position: relative; }
.ob-quote p { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.5; margin: 0 0 10px; color: var(--ink); }
.ob-quote cite { font-style: normal; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ob-form { max-width: 440px; margin: 26px auto 0; text-align: left; background: var(--surface); border-radius: 16px; padding: 20px; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.ob-form .field + .field { margin-top: 14px; }
.ob-nav { pointer-events: none; position: sticky; bottom: 0; z-index: 5; width: 100%; max-width: 460px; margin: 0 auto; padding: 18px 24px calc(28px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 78%, rgba(246, 245, 242, 0)); }
@media (max-width: 560px) { .ob-top { padding: 14px 16px; } .ob-stage { padding: 4px 18px; } .ob-title { margin-bottom: 12px; } .ob-sub { font-size: 16px; } .ob-visual { margin-bottom: 22px; } .ob-nav { padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); } }
.ob-nav > * { pointer-events: auto; }
.ob-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(26, 26, 31, 0.16); transition: all 0.3s var(--ease); cursor: pointer; }
.ob-dots i.on { width: 26px; background: var(--accent); }
.ob-back { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--text-2); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ob-back:hover { color: var(--ink); }
.ob-visual { margin: 0 auto 30px; }
.reuse-box { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--accent-wash); font-size: 13.5px; color: var(--text-2); }
.reuse-box b { color: var(--ink); }

/* ===================================================================== */
/* Mapping flow chrome                                                    */
/* ===================================================================== */

.flow { min-height: 100vh; display: flex; flex-direction: column; }
.flow-top { position: sticky; top: 0; z-index: 30; background: rgba(246, 245, 242, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.flow-top-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; gap: 16px; }
.flow-steps { display: flex; gap: 4px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.flow-steps button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.flow-steps button i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-grid; place-items: center; font-style: normal; font-size: 11px; }
.flow-steps button.done { color: var(--text-2); }
.flow-steps button.done i { background: var(--ink); border-color: var(--ink); color: #fff; }
.flow-steps button.on { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1); }
.flow-steps button.on i { background: var(--accent); border-color: var(--accent); color: #fff; }
.flow-steps button:disabled { cursor: default; opacity: 0.6; }
.saved { font-size: 12.5px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-width: 70px; justify-content: flex-end; }
.saved::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.saved.saving::before { background: var(--accent); animation: pulse 1s infinite; }
.flow-body { flex: 1 1 auto; width: 100%; max-width: 1240px; margin: 0 auto; padding: 30px 20px 60px; }
.flow-head { text-align: center; max-width: 680px; margin: 0 auto 26px; }
.flow-head .kicker { margin-bottom: 10px; }
.flow-head .h1 { margin-bottom: 10px; }
.flow-foot { pointer-events: none; position: sticky; bottom: 0; z-index: 20; background: linear-gradient(to top, var(--bg) 70%, rgba(246, 245, 242, 0)); padding: 22px 20px 22px; }
.flow-foot-in > * { pointer-events: auto; }
.flow-foot-in { max-width: 1240px; margin: 0 auto; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.flow, .ob { overflow-x: clip; }
/* On a phone the step bar shows only where you are, and the footer buttons may wrap instead of widening the page. */
@media (max-width: 760px) {
  .flow-steps button:not(.on) { display: none; }
  .flow-top .brand span.full { display: none; }
}
@media (max-width: 560px) {
  .flow-top-in { padding: 0 16px; }
  .flow-body { padding: 22px 16px 40px; }
  .flow-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .flow-foot-in { gap: 8px; }
  .flow-foot-in .btn { white-space: normal; line-height: 1.25; text-align: center; }
  .flow-foot-in .btn.ghost { flex: 0 0 auto; padding-inline: 8px; }
  .flow-foot-in .btn.primary { flex: 1 1 auto; padding: 14px 14px; }
  .flow-foot-in .long { display: none; }
}

/* ===================================================================== */
/* Sorting                                                                */
/* ===================================================================== */

.sorter { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 26px; align-items: center; max-width: 1080px; margin: 0 auto; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pile-stack { position: relative; width: 120px; aspect-ratio: 5 / 7; border-radius: 10px; border: 2px dashed var(--line-strong); }
.pile-stack .vc { --w: 120px; position: absolute; inset: 0; }
.pile-label { font-size: 13px; font-weight: 600; color: var(--text-2); text-align: center; }
.pile-label b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 400; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.pile.left .pile-stack .vc:nth-last-child(1) { transform: rotate(-4deg); }
.pile.right .pile-stack .vc:nth-last-child(1) { transform: rotate(4deg); }
.pile.left .pile-stack .vc:nth-last-child(2) { transform: rotate(2deg); }
.pile.right .pile-stack .vc:nth-last-child(2) { transform: rotate(-2deg); }
.deck { position: relative; width: min(300px, 74vw); margin: 0 auto; }
.deck .vc { --w: min(300px, 74vw); position: relative; z-index: 3; touch-action: pan-y; cursor: grab; }
.deck .vc:active { cursor: grabbing; }
.deck .under { position: absolute; inset: 0; z-index: 1; }
.deck .under .vc-back { --w: min(300px, 74vw); position: absolute; inset: 0; }
.deck .under .vc-back:nth-child(1) { transform: translate(6px, 8px) rotate(2.4deg); }
.deck .under .vc-back:nth-child(2) { transform: translate(-5px, 5px) rotate(-1.8deg); }
.deck .hint-l, .deck .hint-r { position: absolute; top: 18px; z-index: 5; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.deck .hint-l { left: 14px; background: #fff; color: var(--text-2); border: 2px solid var(--text-2); transform: rotate(-8deg); }
.deck .hint-r { right: 14px; background: #fff; color: var(--accent-ink); border: 2px solid var(--accent); transform: rotate(8deg); }
.fly-left { animation: flyL 0.42s var(--ease) forwards; }
.fly-right { animation: flyR 0.42s var(--ease) forwards; }
@keyframes flyL { to { transform: translate(-130%, 30px) rotate(-18deg); opacity: 0; } }
@keyframes flyR { to { transform: translate(130%, 30px) rotate(18deg); opacity: 0; } }
.deal-in { animation: deal 0.36s var(--ease) both; }
@keyframes deal { from { transform: translateY(10px) scale(0.97); opacity: 0.4; } to { transform: none; opacity: 1; } }
.sort-actions { display: flex; gap: 12px; justify-content: center; margin: 26px auto 0; max-width: 520px; }
.sort-actions .btn { flex: 1 1 0; }
.sort-actions .cnt { display: none; margin-left: 2px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--panel); color: var(--text-2); }
.sort-actions .primary .cnt { background: rgba(255, 255, 255, 0.2); color: #fff; }
.sort-actions .btn.armed { transform: scale(1.04); box-shadow: 0 0 0 3px var(--focus); border-color: var(--accent); }
.sort-sub { margin: 8px 0 0; }
.sort-meta { display: flex; justify-content: center; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
@media (hover: none) { .sort-meta .keys { display: none; } }
.kbd { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); box-shadow: 0 1px 0 var(--line-strong); }
.counter { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.counter b { color: var(--ink); }
.mini-progress { width: 220px; height: 4px; background: var(--panel-2); border-radius: 99px; margin: 8px auto 0; overflow: hidden; }
.mini-progress i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.3s var(--ease); }
.sort-done { text-align: center; max-width: 560px; margin: 30px auto 0; animation: rise 0.4s var(--ease) both; }
.sort-done .big-num { font-family: var(--font-display); font-size: 84px; line-height: 1; color: var(--accent); }
/* On a phone the piles give way to counts in the buttons, the card is sized so the buttons stay on screen, and
   the buttons stick to the bottom where the thumb is. */
@media (max-width: 820px) {
  .sorter { grid-template-columns: minmax(0, 1fr); }
  .sorter .pile { display: none; }
  .deck { --dw: min(300px, 74vw, calc((100svh - var(--reserve, 330px)) * 0.71)); width: var(--dw); }
  .deck .vc, .deck .under .vc-back { --w: var(--dw); }
  .sort-actions { pointer-events: none; position: sticky; bottom: 0; z-index: 10; max-width: none; margin: 14px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 72%, rgba(246, 245, 242, 0)); }
  .sort-actions .btn { max-width: 260px; padding-inline: 14px; }
  .sort-actions .cnt { display: inline-block; }
  .sort-actions .btn { pointer-events: auto; }
  .counter { margin-top: 12px; }
}
@media (max-width: 560px) {
  .sort-view { padding-top: 16px; }
  .sort-view .flow-head { margin-bottom: 14px; }
  .sort-view .flow-head .kicker { display: none; }
  .sort-view .sort-sub { font-size: 14px; }
  .sort-actions { margin-inline: -16px; padding-inline: 16px; }
}

/* The piles board */
.board-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.board-cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Block layout on purpose: a scrolling grid inside a flex column gets rows shorter than its cards in Chromium. */
.board-col { background: var(--panel); border-radius: 14px; padding: 12px; min-height: 240px; transition: background 0.15s, outline-color 0.15s; }
.board-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin: 2px 4px 12px; display: flex; justify-content: space-between; }
.board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; max-height: min(52vh, 520px); overflow-y: auto; padding: 4px; margin: -4px; align-content: start; }
.board-cards .vc { --w: 100%; width: 100%; cursor: grab; }
.board-empty { text-align: center; font-size: 13px; color: var(--muted); padding: 60px 0; margin: 0; }
.board-tabs { display: none; margin-bottom: 12px; }
.board-help { margin-top: 14px; }
.move-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 14px; align-items: center; margin: 14px -24px -22px; padding: 14px 24px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(26, 26, 31, 0.2); }
.move-bar .t { min-width: 0; }
.move-bar b { display: block; font-size: 14px; margin-bottom: 8px; }
.move-bar .row { gap: 8px; }
@media (max-width: 760px) {
  .board-tabs { display: flex; width: 100%; }
  .board-tabs button { flex: 1 1 0; padding-inline: 6px; }
  .board-cols, .board-cols.two { grid-template-columns: minmax(0, 1fr); }
  .board-col:not(.on) { display: none; }
  .board-col h4 { display: none; }
  .board-cards { max-height: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .board-help { display: none; }
  .move-bar { margin: 14px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* ===================================================================== */
/* Choose five                                                            */
/* ===================================================================== */

.tray { position: sticky; top: 72px; z-index: 15; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 14px 18px; display: flex; align-items: center; gap: 18px; margin: 0 auto 26px; max-width: 1080px; }
.tray-slots { display: flex; gap: 12px; flex: 1 1 auto; overflow-x: auto; padding: 10px 4px 6px 10px; }
.slot { --w: 84px; width: var(--w); aspect-ratio: 5 / 7; border-radius: 8px; border: 2px dashed var(--line-strong); display: grid; place-items: center; color: var(--muted); font-family: var(--font-display); font-size: 22px; flex: 0 0 auto; position: relative; transition: border-color 0.15s, background 0.15s; }
.slot .vc { --w: calc(100% + 4px); width: calc(100% + 4px); position: absolute; inset: -2px; cursor: grab; }
.slot.filled { border-color: transparent; }
.slot.extra { border-color: rgba(154, 123, 46, 0.4); }
.slot[data-zone].drop-on { background: var(--accent-wash); border-color: var(--accent); outline: 0; }
.tray-text { flex: 0 0 210px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.tray-text b { color: var(--ink); display: block; font-size: 15px; }
.tray-note { flex: 0 1 300px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.tray-note b { color: var(--ink); }
.choose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; border-radius: var(--r-lg); transition: background 0.15s; }
.choose-grid .vc { --w: 100%; width: 100%; }
.choose-grid[data-zone].drop-on { outline: 2px dashed var(--accent); outline-offset: 8px; background: var(--accent-soft); }
.slot-btn { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 700; font-size: 15px; cursor: pointer; color: var(--ink); }
.slot-btn:hover { border-color: var(--ink); }
.slot-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.move-sheet { display: flex; gap: 20px; align-items: flex-start; }
.move-sheet > .vc { --w: 120px; }
.move-sheet .opts { display: flex; flex-direction: column; min-width: 0; }
.section-label { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 34px auto 16px; max-width: 1080px; }
.section-label::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
/* On a phone the tray sits above the footer buttons, with the count and the five slots. */
@media (max-width: 760px) {
  .tray { position: fixed; top: auto; left: 10px; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); margin: 0; flex-direction: column; align-items: stretch; padding: 10px 10px 8px; gap: 2px; }
  .tray-text { flex: 0 0 auto; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .tray-text b { display: inline; font-size: 14px; }
  .tray-text span { font-size: 12.5px; }
  .tray-note { flex: 0 0 auto; }
  .tray-slots { gap: 8px; padding: 10px 2px 4px 8px; justify-content: safe center; }
  .slot { --w: 54px; font-size: 18px; }
  .choose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 210px; }
  .move-sheet > .vc { --w: 96px; }
}

/* ===================================================================== */
/* Words                                                                  */
/* ===================================================================== */

.words { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 46px; max-width: 1020px; margin: 0 auto; align-items: start; }
.words-card { position: sticky; top: 92px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.words-card .vc { --w: 270px; }
.pager { display: flex; gap: 8px; justify-content: center; }
.pager button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.pager button.done { background: var(--panel); color: var(--ink); border-color: var(--panel-2); }
.pager button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.q-block + .q-block { margin-top: 26px; }
.q-block .q { font-family: var(--font-display); font-size: 21px; line-height: 1.3; margin-bottom: 10px; letter-spacing: -0.01em; }
.q-block .textarea { min-height: 104px; font-size: 15.5px; background: var(--surface); }
.addq { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 1.5px dashed var(--line-strong); background: transparent; border-radius: var(--r); padding: 13px 16px; font-size: 15px; line-height: 1.45; color: var(--text-2); cursor: pointer; margin-top: 14px; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.addq:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.addq:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.addq .plus { font-size: 18px; line-height: 1.2; color: var(--accent); font-weight: 600; }
.q-block + .addq { margin-top: 22px; }
.word-item .story-btn { width: auto; display: inline-flex; margin-top: 12px; padding: 8px 14px; font-size: 14px; }
@media (max-width: 860px) {
  .words { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .words-card { position: static; }
  .words-card .vc { --w: 190px; }
}

/* ===================================================================== */
/* Team step                                                              */
/* ===================================================================== */

.team-step { max-width: 1080px; margin: 0 auto; }
.mates { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.mate-list { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 92px; }
.mate { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 0; background: none; text-align: left; cursor: pointer; width: 100%; }
.mate:hover { background: rgba(26, 26, 31, 0.04); }
.mate.on { background: var(--surface); box-shadow: var(--shadow-1); }
.mate .t { flex: 1 1 auto; min-width: 0; }
.mate .t b { display: block; font-size: 14px; }
.mate .t span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mate .done-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--good-soft); color: var(--good); font-size: 11px; font-weight: 700; }
.picker-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.picker-tools .input { max-width: 260px; padding: 9px 12px; font-size: 14px; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.picker .vc { --w: 100%; width: 100%; }
.guess-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.guess-slots { gap: 8px; flex-wrap: nowrap; }
.guess-slots .vc { --w: 52px; }
.guess-slots .vc .nm { display: none; }
.guess-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.gchip { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: left; color: var(--ink); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.gchip img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; pointer-events: none; }
.gchip:hover { border-color: var(--ink); }
.gchip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.gchip.on { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 560px) { .guess-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gchip { font-size: 13px; gap: 8px; } .gchip img { width: 28px; height: 28px; flex-basis: 28px; } }
.rate-list { display: flex; flex-direction: column; gap: 10px; }
.rate-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); flex-wrap: wrap; }
.rate-row .who { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; min-width: 0; }
.rate-row .who b { display: block; font-size: 14.5px; }
.rate-row .who span:not(.av) { display: block; font-size: 12.5px; color: var(--muted); }
.tension-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; display: flex; gap: 18px; align-items: flex-start; }
.tension-card + .tension-card { margin-top: 12px; }
.tension-card .pairvis { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tension-card .pairvis .vc { --w: 64px; }
.tension-card .pairvis .vs { font-family: var(--font-display); font-style: italic; color: var(--muted); }
.tension-card .body { flex: 1 1 auto; min-width: 0; }
.tension-card .note { font-size: 14px; color: var(--text-2); margin: 6px 0 0; }
.rate-row .seg button.on { background: var(--ink); color: #fff; box-shadow: none; }
.steps-dots { display: flex; gap: 6px; margin: 2px 0 18px; }
.steps-dots i { flex: 1 1 0; height: 4px; border-radius: 4px; background: var(--panel-2); transition: background 0.2s; }
.steps-dots i.on { background: var(--accent); }
@media (max-width: 820px) {
  .mates { grid-template-columns: minmax(0, 1fr); }
  .mate-list { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; }
  .mate { flex: 0 0 auto; width: auto; padding: 8px 12px 8px 8px; }
  .mate .t span { display: none; }
  .tension-card { flex-direction: column; }
}
@media (max-width: 560px) {
  .rate-row .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .rate-row .seg button { padding: 10px 8px; }
}

/* ===================================================================== */
/* Review                                                                 */
/* ===================================================================== */

.review { max-width: 960px; margin: 0 auto; }
.checklist { display: grid; gap: 10px; }
.checklist .item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.checklist .item .ok { width: 22px; height: 22px; border-radius: 50%; background: var(--good-soft); color: var(--good); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 22px; }
.checklist .item .no { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); color: var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 22px; }
.checklist .item b { color: var(--ink); font-weight: 600; }
.preview-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.preview-five.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.preview-five .pv { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.preview-five .vc { --w: 100%; width: 100%; }
.eye { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.15s var(--ease); }
.eye:hover { border-color: var(--ink); color: var(--ink); }
.eye:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.eye.off { background: var(--ink); border-color: var(--ink); color: #fff; }
.lock-bar { position: sticky; bottom: 12px; z-index: 12; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 20px; box-shadow: var(--shadow-3); }
.lock-bar .check { flex: 1 1 320px; font-size: 13.5px; }
.lock-bar .remind { flex: 1 1 100%; font-size: 13px; color: var(--text-2); }
.see-list { margin: 0 0 14px; padding-left: 18px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.see-list li + li { margin-top: 4px; }
.lock-bar .error-text { flex: 1 1 100%; margin: 0; min-height: 0; }
.lock-bar .error-text:empty { display: none; }
@media (max-width: 640px) {
  .preview-five, .preview-five.six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .lock-bar { bottom: 0; margin: 18px -20px 0; border-radius: 16px 16px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .lock-bar .btn { width: 100%; }
}

/* ===================================================================== */
/* Profile                                                                */
/* ===================================================================== */

.hero-lock { text-align: center; padding: 20px 0 10px; }
.hero-lock .check-mark { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; background: var(--good-soft); color: var(--good); display: grid; place-items: center; font-size: 28px; animation: pop 0.5s var(--ease-spring) both; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.five.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.five .vc { --w: 100%; width: 100%; }
@media (max-width: 760px) { .five, .five.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.word-list { display: grid; gap: 14px; }
.word-item { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 18px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.word-item:first-child { border-top: 0; padding-top: 0; }
.word-item .vc { --w: 78px; }
.word-item h4 { font-family: var(--font-display); font-size: 20px; margin-bottom: 6px; }
.word-item dl { margin: 0; display: grid; gap: 8px; }
.word-item dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.word-item dd { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.word-item dd.empty-w { color: var(--muted); font-style: italic; }

/* ===================================================================== */
/* Dashboard                                                              */
/* ===================================================================== */

.team-tile { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-1); transition: transform 0.2s var(--ease), box-shadow 0.2s; position: relative; overflow: hidden; }
.team-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: inherit; }
.team-tile .h3 { margin: 8px 0 4px; }
.team-tile .meta { font-size: 13px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.team-tile .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 12px; }
.team-tile .peek { position: absolute; right: -14px; top: -10px; display: flex; opacity: 0.9; pointer-events: none; }
.team-tile .peek .vc { --w: 58px; margin-left: -26px; }
.team-tile .peek .vc:nth-child(1) { transform: rotate(-10deg) translateY(14px); }
.team-tile .peek .vc:nth-child(2) { transform: rotate(-2deg) translateY(4px); }
.team-tile .peek .vc:nth-child(3) { transform: rotate(8deg) translateY(10px); }
.new-tile { display: grid; place-items: center; text-align: center; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: 26px; color: var(--text-2); text-decoration: none; min-height: 190px; transition: all 0.2s; }
.new-tile:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.new-tile .plus { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--accent); }

.agenda { display: flex; flex-direction: column; }
.agenda .ag { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline; }
.agenda .ag:first-child { border-top: 0; }
.agenda .ag .time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.agenda .ag b { font-size: 14.5px; }
.agenda .ag span { display: block; font-size: 13px; color: var(--text-2); }
.agenda .ag .dur { font-size: 12.5px; color: var(--muted); }

/* Wizard */
.wizard { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.wiz-steps { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 4px; }
.wiz-steps button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 0; background: none; text-align: left; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.wiz-steps button i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-style: normal; font-size: 12px; flex: 0 0 26px; }
.wiz-steps button.done { color: var(--text-2); }
.wiz-steps button.done i { background: var(--ink); border-color: var(--ink); color: #fff; }
.wiz-steps button.on { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1); }
.wiz-steps button.on i { background: var(--accent); border-color: var(--accent); color: #fff; }
.wiz-body { min-width: 0; }
.wiz-body .panel { padding: 30px; }
.wiz-foot { display: flex; justify-content: space-between; margin-top: 20px; gap: 12px; }
.qrow { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--line); }
.qrow:first-child { border-top: 0; }
.qrow .t { flex: 1 1 auto; font-size: 14.5px; }
.qrow .t span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.people-rows { display: grid; gap: 8px; }
.people-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.people-row .input { padding: 9px 11px; font-size: 14px; }
@media (max-width: 860px) {
  .wizard { grid-template-columns: minmax(0, 1fr); }
  .wiz-steps { position: static; flex-direction: row; overflow-x: auto; }
  .wiz-steps button span { display: none; }
  .people-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .people-row .role { display: none; }
}
.email-preview { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); padding: 18px; max-height: 520px; overflow: auto; }

/* ===================================================================== */
/* Team map and workshop                                                  */
/* ===================================================================== */

.map-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; align-items: start; }
.map-nav { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 2px; }
.map-nav a, .map-nav button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; border: 0; background: none; text-align: left; cursor: pointer; }
.map-nav a:hover, .map-nav button:hover { color: var(--ink); background: rgba(26, 26, 31, 0.04); }
.map-nav a.on, .map-nav button.on { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1); }
.map-nav .ix { font-size: 11px; font-weight: 700; width: 22px; height: 22px; border-radius: 6px; background: var(--panel); color: var(--muted); display: grid; place-items: center; }
.map-nav a.on .ix, .map-nav button.on .ix { background: var(--accent); color: #fff; }
@media (max-width: 960px) {
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .map-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .map-nav a, .map-nav button { flex: 0 0 auto; }
}
.view-head { margin-bottom: 22px; }
.view-head .kicker { margin-bottom: 8px; }
.view-head .lede { margin-top: 10px; }
.questions { background: var(--accent-wash); border-radius: var(--r-lg); padding: 20px 22px; }
.questions .kicker { margin-bottom: 10px; display: block; }
.questions ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.questions li { font-family: var(--font-display); font-size: 17px; line-height: 1.4; color: var(--ink); padding-left: 4px; }
.questions li::marker { font-family: var(--font-body); font-size: 13px; color: var(--accent-ink); font-weight: 700; }
.howcalc { font-size: 13px; color: var(--muted); }
.howcalc summary { cursor: pointer; font-weight: 600; color: var(--text-2); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.howcalc summary::-webkit-details-marker { display: none; }
.howcalc summary::before { content: '?'; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-grid; place-items: center; font-size: 11px; }
.howcalc[open] summary { margin-bottom: 8px; }
.howcalc p { font-size: 13px; color: var(--text-2); line-height: 1.6; max-width: 720px; }

/* Side by side */
.sbs { display: flex; flex-direction: column; gap: 4px; }
.sbs-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.sbs-row:first-child { border-top: 0; }
.sbs-row .who { display: flex; gap: 12px; align-items: center; }
.sbs-row .who b { display: block; font-size: 15px; color: var(--ink); }
.sbs-row .who .role, .sbs-row .who div > span:not(.badge) { display: block; font-size: 12.5px; color: var(--muted); }
.whobtn { border: 0; background: none; padding: 6px 8px; margin: -6px -8px; border-radius: 12px; text-align: left; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.whobtn:hover { background: rgba(26, 26, 31, 0.04); }
.whobtn:focus-visible, .avbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.whobtn .t { display: block; min-width: 0; }
.avbtn { border: 0; padding: 0; cursor: pointer; }
.sbs-row .vc-row .vc.w-sm { --w: 92px; }
.sbs-row .vc-row .vc { --w: 96px; }
.sbs-row .vc-row .vc.hl { box-shadow: 0 0 0 3px var(--accent), var(--shadow-card); }
@media (max-width: 760px) { .sbs-row { grid-template-columns: minmax(0, 1fr); gap: 10px; } .sbs-row .vc-row { flex-wrap: nowrap; gap: 6px; } .sbs-row .vc-row .vc, .sbs-row .vc-row .vc.w-sm { --w: calc((100% - 24px) / 5); flex: 1 1 0; max-width: 92px; } }

.value-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.vtile { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.vtile .vc { --w: 64px; }
.vtile b { display: block; font-size: 15px; margin-bottom: 4px; }
.vtile .small { color: var(--text-2); line-height: 1.45; }

/* Workshop */
.ws { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); background: var(--bg); }
.ws.member { grid-template-columns: minmax(0, 1fr); }
.ws-rail { background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ws-rail .brand { margin: 0 10px 18px; }
.ws-rail .step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text-2); font-size: 14px; font-weight: 600; }
.ws-rail .step:hover { background: rgba(26, 26, 31, 0.04); color: var(--ink); }
.ws-rail .step i { width: 26px; height: 26px; border-radius: 8px; background: var(--panel); display: grid; place-items: center; font-style: normal; font-size: 12px; color: var(--muted); }
.ws-rail .step.done i { background: var(--ink); color: #fff; }
.ws-rail .step.on { background: var(--accent-wash); color: var(--ink); }
.ws-rail .step.on i { background: var(--accent); color: #fff; }
.ws-rail .step small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.ws-rail .rail-foot { margin-top: auto; padding: 14px 10px 0; display: flex; flex-direction: column; gap: 8px; }
.ws-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.ws-top { display: flex; align-items: center; gap: 16px; padding: 14px 32px; border-bottom: 1px solid var(--line); background: rgba(246, 245, 242, 0.92); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); }
.ws-top .title { font-weight: 600; font-size: 14px; }
.ws-top .here { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-left: auto; }
.timer { font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.timer.over { color: var(--bad); }
.ws-stage { flex: 1 1 auto; padding: 36px 40px 40px; max-width: 1280px; width: 100%; margin: 0 auto; }
.ws-stage .stage-title { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin: 6px 0 14px; text-wrap: balance; }
.ws-bottom { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 32px; border-top: 1px solid var(--line); background: rgba(246, 245, 242, 0.95); backdrop-filter: blur(16px); z-index: 20; }
.ws-lobby { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.rules { display: grid; gap: 14px; counter-reset: rule; }
.rules li { list-style: none; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; font-family: var(--font-display); font-size: 21px; line-height: 1.35; counter-increment: rule; }
.rules li::before { content: counter(rule); width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 16px; }
.rules { padding: 0; margin: 0; }
.presenter { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.presenter .vc-row { flex-wrap: nowrap; gap: 12px; }
.presenter .vc-row .vc { --w: min(150px, calc((100% - 48px) / 5)); flex: 1 1 0; max-width: 150px; }
.presenter .who { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.presenter .who .h1 { margin: 0; }
.presenter .whoinfo { font-size: 14px; color: var(--muted); }
.word-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 22px; }
.word-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.word-col h5 { margin: 0 0 6px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.word-col h5 .rk { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; display: grid; place-items: center; }
.word-col p { font-size: 13.5px; color: var(--text-2); margin: 0 0 6px; line-height: 1.5; }
.word-col p i { color: var(--muted); font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; display: block; }
.people-dots { display: flex; gap: 6px; align-items: center; }
.people-dots button { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.people-dots .av { opacity: 0.35; transition: opacity 0.2s; }
.people-dots .av.on, .people-dots .av.done { opacity: 1; }
.people-dots .av.on { box-shadow: 0 0 0 3px var(--accent); }
@media (max-width: 1100px) { .presenter, .ws-lobby { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ws { grid-template-columns: minmax(0, 1fr); }
  .ws-rail { position: static; height: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
  .ws-rail .brand, .ws-rail .rail-foot, .ws-rail .step small { display: none; }
  .ws-rail .step { grid-template-columns: 26px auto; flex: 0 0 auto; }
  .ws-stage { padding: 24px 18px; }
  .ws-top, .ws-bottom { padding: 12px 18px; }
}

/* Tension check */
.hyp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--shadow-1); }
.hyp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hyp-head .names { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.hyp-head .arrow { color: var(--muted); }
.hyp-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: start; }
.hyp-cards { display: flex; align-items: center; gap: 12px; }
.hyp-cards .vc { --w: 120px; }
.hyp-cards .meets { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--muted); text-align: center; line-height: 1.2; }
.hyp-cards .who-tag { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; margin-top: 8px; letter-spacing: 0.02em; }
.hyp-note { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.45; margin: 0 0 14px; }
.hyp-resp { background: var(--panel); border-radius: var(--r-sm); padding: 10px 14px; margin: 14px 0; font-size: 14.5px; color: var(--text-2); }
.hyp-resp b { color: var(--ink); }
.votes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.vote { border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: 12px; padding: 12px; cursor: pointer; text-align: left; transition: all 0.15s var(--ease); }
.vote:hover { border-color: var(--ink); }
.vote.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--accent-wash); }
.vote b { display: block; font-size: 14px; }
.vote .bar { height: 6px; border-radius: 99px; background: var(--panel); margin-top: 10px; overflow: hidden; }
.vote .bar i { display: block; height: 100%; background: var(--ink); border-radius: 99px; transition: width 0.4s var(--ease); }
.vote .count { font-size: 12px; color: var(--muted); margin-top: 6px; display: block; }
.verdict { margin-top: 22px; border-radius: var(--r-lg); padding: 20px 22px; background: var(--panel); animation: rise 0.4s var(--ease) both; }
.verdict.supported { background: var(--good-soft); }
.verdict.partly { background: var(--partly-soft); }
.verdict.not { background: #eef0f4; }
.verdict .vt { font-family: var(--font-display); font-size: 24px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.verdict .vt .ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-body); font-size: 16px; font-weight: 700; background: #fff; }
.verdict.supported .ico { color: var(--good); }
.verdict.partly .ico { color: var(--partly); }
.verdict.not .ico { color: #4b5874; }
.evidence { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.evidence li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.evidence li::before { content: '\2022'; color: var(--muted); font-weight: 700; text-align: center; }
.evidence li.pos::before { content: '+'; color: var(--good); }
.evidence li.neg::before { content: '\2212'; color: var(--bad); }
.verdict .reading { font-size: 15px; color: var(--ink); line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .hyp-body { grid-template-columns: minmax(0, 1fr); } .votes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hyp-cards .vc { --w: 92px; } .hyp { padding: 18px; } .hyp-note { font-size: 18px; } }
.verdict-chart { background: var(--surface); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.verdict .reading { margin-bottom: 14px; }
.why { font-size: 14px; }
.why summary { cursor: pointer; font-weight: 600; color: var(--text-2); list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; }
.why summary::-webkit-details-marker { display: none; }
.why summary::before { content: '+'; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); display: inline-grid; place-items: center; font-weight: 700; }
.why[open] summary::before { content: '\2212'; }
.why[open] summary { margin-bottom: 10px; }
.why .evidence { margin-bottom: 0; }

/* Perception */
.hero-figure { font-size: 64px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.hero-figure small { font-size: 22px; letter-spacing: -0.01em; font-weight: 500; color: var(--muted); }
.seen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.seen { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.seen .who { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; font-weight: 600; }
.seen .lbl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.seen .vc-row .vc { --w: 64px; }
.seen .none { font-size: 13px; color: var(--muted); }

/* Agreements */
.agree-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.agree-col { background: var(--panel); border-radius: var(--r-lg); padding: 16px; min-height: 220px; }
.agree-col h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin: 2px 4px 12px; display: flex; justify-content: space-between; }
.sticky { background: #fffdf3; border: 1px solid #efe6c8; border-radius: 10px; padding: 12px 34px 12px 14px; box-shadow: 0 1px 2px rgba(26, 26, 31, 0.05); font-size: 14.5px; line-height: 1.5; position: relative; animation: rise 0.35s var(--ease) both; }
.sticky + .sticky { margin-top: 10px; }
.sticky .by { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.sticky .del { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; width: 24px; height: 24px; border-radius: 6px; }
.sticky .del:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.agree-add { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; margin-top: 18px; }
@media (max-width: 900px) { .agree-cols { grid-template-columns: minmax(0, 1fr); } .agree-add { grid-template-columns: minmax(0, 1fr); } }

/* Synthesis */
.synth { max-width: 820px; }
.synth .headline { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 26px; text-wrap: balance; }
.synth section { padding: 20px 0; border-top: 1px solid var(--line); }
.synth section h3 { font-family: var(--font-display); font-size: 21px; margin-bottom: 8px; }
.synth section p { font-size: 16px; line-height: 1.7; color: var(--text-2); margin: 0; text-wrap: pretty; }
.synth .caveat { font-size: 13px; color: var(--muted); margin-top: 20px; }
.source-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.thinking { display: inline-flex; gap: 5px; }
.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: think 1.2s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: 0.15s; }
.thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes think { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

/* ===================================================================== */
/* Charts                                                                 */
/* ===================================================================== */

.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-body); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-2); margin-top: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-legend i.line { height: 2px; width: 14px; border-radius: 1px; }
.chart-tip { position: fixed; z-index: 90; pointer-events: none; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); max-width: 260px; opacity: 0; transition: opacity 0.12s; }
.chart-tip.show { opacity: 1; }
.chart-tip b { font-weight: 700; }
.table-toggle { font-size: 12.5px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.data-table th, .data-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.data-table th { font-weight: 600; color: var(--muted); font-size: 12px; }
.data-table td.n { text-align: right; font-variant-numeric: tabular-nums; }

.spectrum { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px 14px; transition: box-shadow 0.2s; }
.spectrum + .spectrum { margin-top: 14px; }
.spectrum.open { box-shadow: var(--shadow-2); }
.spectrum-head { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; cursor: pointer; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; border-radius: 8px; }
.spectrum-head:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.spectrum-head .sp-name { display: block; font-family: var(--font-display); font-size: 20px; line-height: 1.25; }
.spectrum-head .topic { display: block; }
.spectrum-head .chev { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); color: var(--text-2); font-weight: 700; margin-left: 6px; }
.pair-pick { margin-bottom: 16px; gap: 8px; }
.table-toggle summary::before { content: '\2261'; font-size: 13px; }
.spectrum-head .topic { font-size: 13px; color: var(--muted); }
.spectrum-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.spectrum-detail .side { font-size: 14px; color: var(--text-2); line-height: 1.55; }
.spectrum-detail .side b { display: block; color: var(--ink); margin-bottom: 4px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.spectrum-detail .bridge { grid-column: 1 / -1; font-size: 15px; color: var(--ink); line-height: 1.6; background: var(--accent-wash); padding: 14px 16px; border-radius: var(--r); }
@media (max-width: 700px) { .spectrum-detail { grid-template-columns: minmax(0, 1fr); } }

.obar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--surface); }
.obar i { display: block; height: 100%; position: relative; }
.obar i span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; font-style: normal; color: #fff; white-space: nowrap; overflow: visible; }
.obar.thin { height: 12px; border-radius: 4px; }
.olegend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.olegend span { display: inline-flex; align-items: center; gap: 6px; }
.olegend i { width: 10px; height: 10px; border-radius: 3px; }
.orient-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.orient-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; cursor: pointer; transition: all 0.15s; text-align: left; font: inherit; color: inherit; }
.orient-card:hover { border-color: var(--line-strong); }
.orient-card.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.orient-card .who { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.orient-card .lean { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

.legend-o { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }

/* Contested bars */
.div-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.div-row:first-child { border-top: 0; }
.div-row .lbl { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
button.lbl { border: 0; background: none; padding: 4px; margin: -4px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); text-align: left; }
button.lbl:hover { background: var(--panel); }
.div-row .lbl .vc { --w: 40px; }
.div-row .lbl .vc .nm { display: none; }
.div-track { position: relative; height: 26px; }
.div-track .mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--chart-axis); }
.div-track .seg { position: absolute; top: 3px; height: 20px; }
.div-names { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; gap: 10px; }
.div-names span:last-child { text-align: right; }

/* ===================================================================== */
/* Practice                                                               */
/* ===================================================================== */

.client-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr) 120px; gap: 16px; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: all 0.18s var(--ease); }
.client-row + .client-row { margin-top: 10px; }
.client-row:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); color: inherit; }
.client-row .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.client-row .who b { display: block; font-size: 15px; }
.client-row .who span:not(.av) { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-row .vc-row .vc { --w: 34px; border-radius: 4px; }
.client-row .vc-row .vc .nm { display: none; }
.client-row .vc-row .vc::before { display: none; }
@media (max-width: 860px) { .client-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .client-row .vc-row { display: none; } }
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item::before { content: ''; position: absolute; left: -24px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.tl-item .when { font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.diff { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.diff .in { background: var(--good-soft); color: var(--good); }
.diff .out { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1px; }
.note-item { padding: 14px 0; border-top: 1px solid var(--line); }
.note-item:first-child { border-top: 0; padding-top: 0; }
.note-item .when { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.note-item p { font-size: 14.5px; color: var(--ink); line-height: 1.6; margin: 0; }

/* ===================================================================== */
/* Modal, toast, demo bar, mailbox                                        */
/* ===================================================================== */

.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(26, 26, 31, 0.36); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; animation: fade 0.2s both; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; animation: rise 0.28s var(--ease) both; }
.modal.wide { width: min(980px, 100%); }
.modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 6px; }
.modal-head .h3 { margin: 0; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 24px 22px; }
.modal-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px; flex-wrap: wrap; border-top: 1px solid var(--line); }
/* On a phone a dialog is a sheet that rises from the bottom, with its buttons in reach of the thumb. */
@media (max-width: 560px) {
  .modal-back { padding: 0; align-items: end; justify-items: stretch; }
  .modal, .modal.wide { width: 100%; max-height: 92svh; border-radius: 18px 18px 0 0; animation: sheetUp 0.28s var(--ease) both; }
  .modal-head { padding: 16px 16px 4px; }
  .modal-body { padding: 8px 16px 16px; }
  .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1 1 0; }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }

.toast-wrap { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow-3); animation: toastIn 0.3s var(--ease) both; max-width: min(520px, 90vw); text-align: center; pointer-events: none; }
/* On a phone toasts appear at the top, away from the buttons at the bottom, and never catch a tap. */
@media (max-width: 560px) { .toast-wrap { top: calc(10px + env(safe-area-inset-top)); bottom: auto; } }
.toast.gold { background: var(--accent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

.demo-bar { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: 4px; padding: 5px; background: rgba(26, 26, 31, 0.92); color: #fff; border-radius: 999px; box-shadow: var(--shadow-3); font-size: 13px; backdrop-filter: blur(8px); }
.demo-bar .tagd { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #e9d9a8; padding: 0 8px 0 10px; }
.demo-bar button, .demo-bar a { border: 0; background: none; color: #fff; padding: 7px 11px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.demo-bar button:hover, .demo-bar a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.demo-bar .count { background: var(--accent); color: #fff; font-size: 11px; border-radius: 999px; padding: 1px 6px; }
.demo-menu { position: fixed; left: 16px; bottom: 66px; z-index: 71; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3); width: 320px; padding: 10px; border: 1px solid var(--line); animation: rise 0.2s var(--ease) both; }
.demo-menu .grp { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 6px; }
.demo-menu button, .demo-menu a { display: flex; width: 100%; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none; color: var(--ink); font-size: 14px; }
.demo-menu button:hover, .demo-menu a:hover { background: var(--panel); color: var(--ink); }
.demo-menu .t b { display: block; font-size: 14px; }
.demo-menu .t span { display: block; font-size: 12px; color: var(--muted); }
.demo-menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
.demo-menu .only-sm, .demo-bar .only-sm-tab { display: none; }
/* On a page with its own bottom bar the demo bar moves up, so it never covers a back button or the consent box. */
@media (min-width: 761px) {
  body:has(.flow-foot, .lock-bar, .ws.member .ws-bottom) .demo-bar { bottom: 100px; }
  body:has(.flow-foot, .lock-bar, .ws.member .ws-bottom) .demo-menu { bottom: 150px; }
}
@media (min-width: 901px) {
  body:has(.ws-rail) .demo-bar { left: 276px; bottom: 90px; }
  body:has(.ws-rail) .demo-menu { left: 276px; bottom: 140px; }
}
@media (max-width: 760px) {
  /* On a phone the bar becomes a slim tab on the left edge just under the header, so it never covers a button. */
  .demo-bar { left: 0; bottom: auto; top: 74px; transform: none; border-radius: 0 10px 10px 0; padding: 2px; }
  .demo-bar > :not([data-demo="menu"]) { display: none; }
  .demo-bar [data-demo="menu"] { writing-mode: vertical-rl; padding: 10px 5px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
  .demo-bar [data-demo="menu"] .who { display: none; }
  .demo-bar .only-sm-tab { display: inline; }
  .demo-menu { left: 34px; bottom: auto; top: 74px; transform: none; width: min(300px, calc(100vw - 48px)); max-height: calc(100svh - 96px); overflow: auto; animation: none; }
  .demo-menu .only-sm { display: flex; }
}

.mailbox { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: min(680px, calc(100vh - 80px)); }
.mail-list { border-right: 1px solid var(--line); overflow-y: auto; }
.mail-list button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 13px 16px; cursor: pointer; }
.mail-list button:hover { background: var(--bg); }
.mail-list button.on { background: var(--accent-wash); }
.mail-list button b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-list button span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-list button.unread b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 2px; }
.mail-read { overflow-y: auto; background: var(--bg); padding: 24px; }
.mail-meta { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.mail-meta b { color: var(--ink); font-size: 18px; display: block; font-weight: 600; margin-bottom: 6px; }
@media (max-width: 760px) { .mailbox { grid-template-columns: minmax(0, 1fr); height: auto; } .mail-list { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); } }

/* Emails as they would look in an inbox */
.mail { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 30px 32px; box-shadow: var(--shadow-1); font-size: 15px; line-height: 1.65; color: #2a2a2e; }
.mail-pre { display: none; }
.mail-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; color: var(--ink); margin-bottom: 22px; }
.mail-mark { width: 16px; height: 21px; border-radius: 3px; border: 1.5px solid var(--ink); background: var(--accent-wash); transform: rotate(-6deg); display: inline-block; }
.mail blockquote { margin: 18px 0; padding: 14px 18px; background: var(--bg); border-radius: 10px; font-family: var(--font-display); font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.mail blockquote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 13px; color: var(--muted); margin-top: 8px; }
.mail-cta { margin: 24px 0; }
.mail-btn { display: inline-block; background: var(--ink); color: #fff !important; text-decoration: none; font-weight: 600; padding: 13px 22px; border-radius: 10px; }
.mail-btn:hover { background: var(--accent); }
.mail-after { font-size: 14px; color: var(--text-2); }
.mail-foot { font-size: 12px; color: var(--muted); margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.6; }
.mail-receipt { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.mail-receipt td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.mail-receipt td:last-child { text-align: right; font-weight: 600; }

/* Loading */
.loading { min-height: 60vh; display: grid; place-items: center; color: var(--muted); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--panel-2); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: rise 0.35s var(--ease) both; }

/* Demo hub */
.demo-hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: center; margin-bottom: 34px; }
@media (max-width: 960px) { .demo-hero { grid-template-columns: minmax(0, 1fr); } }
.scenario { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-1); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.scenario:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.scenario .who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.scenario .h3 { margin: 4px 0 0; }
.scenario p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0; flex: 1 1 auto; }
.scenario .row { margin-top: 6px; }

/* Report and print */
.report { max-width: 900px; margin: 0 auto; }
.report-cover { padding: 30px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.report h2 { font-family: var(--font-display); font-size: 26px; margin: 34px 0 14px; }
@media print {
  .topbar, .demo-bar, .demo-menu, .no-print, .toast-wrap, .flow-top, .lock-bar, .intro-back, .unlock-card, .consent-bar { display: none !important; }
  body { background: #fff; }
  .page { padding: 0; max-width: none; }
  .panel { box-shadow: none; border-color: #ddd; break-inside: avoid; }
  .report h2 { break-after: avoid; }
  .shaded { filter: none; }
}

/* ===================================================================== */
/* Guided intro, notes and the shaded analysis                            */
/* ===================================================================== */

/* The first sort opens under a dimmed page with the current card lifted above it, so the only question on the
   screen is the one on the card. The text card sits at the bottom, and on a short screen the overlay scrolls. */
.intro-back { position: fixed; inset: 0; z-index: 40; background: rgba(26, 26, 31, 0.58); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 20px; overflow-y: auto; animation: fade 0.25s both; }
.intro-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-3); width: min(560px, 100%); padding: 22px 26px 20px; text-align: left; animation: rise 0.3s var(--ease) both; }
.intro-card h2 { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; margin-bottom: 10px; }
.intro-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 10px; }
.intro-card p.hint-note { font-size: 13px; color: var(--muted); }
.intro-card .btn { margin-top: 6px; }
.sort-view.intro-on .deck #cur { z-index: 45; box-shadow: var(--shadow-3), 0 0 0 1px rgba(255, 255, 255, 0.4); }
.sort-view.intro-on .deck .hint-l, .sort-view.intro-on .deck .hint-r { display: none; }
/* On a wide screen the text card sits beside the lifted card instead of under it. */
@media (min-width: 1100px) { .intro-back { justify-content: center; align-items: flex-start; padding-left: calc(50% + 190px); } .intro-card { width: min(440px, calc(50vw - 230px)); } }
/* On a phone the text card needs the room, so the current card stays visible under the dim instead of above it. */
@media (max-width: 820px) { .intro-card { padding: 18px 20px 16px; } .intro-card h2 { font-size: 20px; } .sort-view.intro-on .deck #cur { z-index: 3; box-shadow: var(--shadow-card); } }

/* A hint about the word on the card, shown under the deck while sorting. */
.card-hint { text-align: center; font-size: 13px; color: var(--muted); margin: 14px auto 0; max-width: 300px; line-height: 1.45; }
.card-hint b { color: var(--text-2); font-weight: 600; }

/* The note that a belief card is kept to yourself. It stays until the next card is sorted. */
.sens-note { max-width: 420px; margin: 14px auto 0; padding: 10px 14px; border-radius: var(--r); background: var(--accent-wash); border: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--text-2); text-align: center; animation: rise 0.3s var(--ease) both; }

/* The one line tip on the five, shown the first time only. */
.tip-line { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 620px; margin: -8px auto 18px; padding: 9px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); line-height: 1.45; text-align: center; }
.tip-line .iconbtn { flex: 0 0 auto; }

/* The analysis of a free mapping before the unlock: the real layout, blurred, with one card over it. */
.gated { position: relative; }
.shaded { filter: blur(6px); opacity: 0.55; pointer-events: none; user-select: none; }
.unlock-card { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-3); padding: 26px 28px; text-align: center; z-index: 2; }
.unlock-card .kicker { margin-bottom: 10px; }
.unlock-card .h2 { margin-bottom: 10px; }
.unlock-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 16px; }
.unlock-card .fine { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
@media (max-width: 640px) { .unlock-card { position: sticky; top: 80px; transform: none; left: auto; width: auto; margin: 0 0 18px; } .gated { display: flex; flex-direction: column; } .gated .unlock-card { order: -1; } }

/* The deeper analysis on the profile */
.clash-list { display: grid; gap: 14px; }
.clash { padding: 14px 0 2px; border-top: 1px solid var(--line); }
.clash:first-child { border-top: 0; padding-top: 0; }
.clash .lean { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; }
.clash .lean b { color: var(--ink); }
.clash .lean .pos { font-size: 12px; color: var(--muted); }
.clash p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 6px; }
.negotiation { padding: 14px 0 2px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.negotiation:first-child { border-top: 0; padding-top: 0; }
.negotiation .pair { display: flex; align-items: center; gap: 6px; }
.negotiation .pair .vc { --w: 60px; }
.negotiation .pair .and { font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 13px; }
.negotiation p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 6px; }
.never-rate { text-align: center; font-size: 13px; color: var(--muted); margin: 18px 0 0; }
@media (max-width: 560px) { .negotiation { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================================== */
/* Values, the value lens and the person sheet                            */
/* ===================================================================== */

.vfilters { margin-bottom: 10px; }
.vfilters .chip .cnt { font-size: 11.5px; opacity: 0.7; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 14px; }
.vcell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vcell .vc { --w: 100%; width: 100%; }
.vmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); min-height: 22px; }
.missing-list { columns: 3 150px; column-gap: 24px; }
.missing-list .linkbtn { display: block; margin: 0 0 12px; font-size: 14.5px; text-align: left; break-inside: avoid; }
@media (max-width: 560px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; } .vmeta .av-stack .av.xs:nth-child(n+4) { display: none; } }

.crumbs-lens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.crumbs-lens button { border: 0; background: none; padding: 4px 2px; color: var(--accent-ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-size: 13.5px; }
.crumbs-lens [aria-current] { color: var(--ink); font-weight: 600; }
.lens-pick { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.lens-pick .input { max-width: 220px; flex: 0 0 auto; padding: 9px 12px; font-size: 14px; }
.lens-pick .chips { flex: 1 1 300px; }
.lens { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: 'orbit words' 'near words'; gap: 22px 30px; align-items: start; }
.lens-orbit { grid-area: orbit; }
.lens-words { grid-area: words; }
.lens-near { grid-area: near; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lens-near .near .h4 { margin-bottom: 2px; }
.lens-near .near p { margin: 0 0 10px; }
.lens-near .vc-row .vc { --w: 76px; }
.orbit { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; }
.orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit svg g:focus { outline: none; }
.orbit svg g:focus circle:nth-child(2) { stroke: var(--accent); }
.orbit-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 17%; }
.orbit-card .vc { --w: 100%; width: 100%; }
.lens-caption { font-size: 13px; color: var(--muted); text-align: center; max-width: 460px; margin: 14px auto 0; line-height: 1.5; }
.lens-quote { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); scroll-margin: 90px; }
.lens-quote:first-of-type { border-top: 0; padding-top: 2px; }
.lens-quote b { font-size: 14px; }
.lens-quote p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.55; }
.lens-quote p i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.lens-quote.on { background: #eef4fc; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }
.tier-chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; background: var(--panel); color: var(--text-2); margin-left: 8px; vertical-align: 1px; }
.tier-chip.t3 { background: var(--accent-wash); color: var(--accent-ink); }
.lens-words .addq { margin-top: 12px; }
@media (max-width: 960px) {
  .lens { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'orbit' 'words' 'near'; }
  .lens-pick .input { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 560px) { .lens-near { grid-template-columns: minmax(0, 1fr); } .lens-near .vc-row .vc { --w: 64px; } .orbit-card { width: 21%; } }

.pair-group + .pair-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pair-group .h4 { margin-bottom: 2px; }
.pair-group p { margin: 0 0 8px; }
.pair-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pair-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--panel); font-size: 13.5px; font-weight: 600; }

.sheet-back { position: fixed; inset: 0; z-index: 85; background: rgba(26, 26, 31, 0.3); display: flex; justify-content: flex-end; animation: fade 0.2s both; }
.sheet { width: min(500px, 100%); height: 100%; overflow-y: auto; background: var(--surface); box-shadow: var(--shadow-3); padding: 22px 24px 40px; animation: slideIn 0.26s var(--ease) both; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } }
.sheet-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.sheet h3 { font-family: var(--font-display); font-size: 19px; font-weight: 400; margin: 24px 0 10px; }
.sheet-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sheet-five .vc { --w: 100%; width: 100%; }
.sheet-words { margin-top: 14px; display: grid; gap: 12px; }
.sheet-words .sw b { font-size: 14px; }
.sheet-words .sw p { margin: 3px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.55; }
.sheet-words .sw p i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.sheet-strip { padding: 6px 0; }
.sheet-strip svg { display: block; width: 100%; height: auto; margin-top: 2px; }
.sheet-pair { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.sheet-pair b { display: block; font-size: 14.5px; }
.sheet-pair span.small { display: block; }
.sheet-tension { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sheet-tension:first-of-type { border-top: 0; }
.sheet-tension b { display: block; }
@media (max-width: 560px) {
  .sheet-back { align-items: flex-end; }
  .sheet { height: 92svh; border-radius: 18px 18px 0 0; padding: 18px 16px calc(30px + env(safe-area-inset-bottom)); animation: sheetUp 0.28s var(--ease) both; }
}

.story-list { display: grid; gap: 4px; }
.story { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.story:first-child { border-top: 0; padding-top: 0; }
.story p { margin: 4px 0 0; font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--ink); }

/* ===================================================================== */
/* Team page, wizard and phone details                                    */
/* ===================================================================== */

.next-card { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 18px; box-shadow: var(--shadow-1); }
.next-card .kicker { margin-bottom: 4px; }
.agenda-box { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.agenda-box summary, .customize summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.agenda-box summary::-webkit-details-marker, .customize summary::-webkit-details-marker { display: none; }
.agenda-box summary::after, .customize summary::after { content: '+'; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); display: inline-grid; place-items: center; font-weight: 700; color: var(--text-2); flex: 0 0 22px; }
.agenda-box[open] summary::after, .customize[open] summary::after { content: '\2212'; }
.agenda-box[open] summary { margin-bottom: 6px; }
.customize { border: 1px solid var(--line-strong); border-radius: var(--r); padding: 8px 16px; }
.customize summary { font-weight: 600; font-size: 14.5px; }
.customize[open] { padding-bottom: 16px; }
.vis-seg { display: flex; width: 100%; }
.vis-seg button { flex: 1 1 0; }
.vis-seg button.on { background: var(--ink); color: #fff; }
.profile-strip { padding: 4px 0; border-top: 1px solid var(--line); }
.profile-strip:first-of-type { border-top: 0; }

.only-sm { display: none; }

/* Phones: the brand keeps only its mark, the name sits in the avatar, and the workshop header fits on one line. */
@media (max-width: 560px) {
  .hide-sm { display: none !important; }
  .only-sm { display: inline !important; }
  .topbar-in { padding: 0 14px; gap: 10px; }
  .topbar .brand { font-size: 0; gap: 0; }
  .topnav a { padding: 8px 9px; font-size: 13.5px; }
  .ws-top { flex-wrap: nowrap; gap: 10px; padding: 10px 14px; }
  .ws-top > .small, .ws-top .here > span:not(.av-stack) { display: none; }
  .ws-top .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ws-top .timer { font-size: 20px; min-width: 0; }
  .ws-bottom { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .ws-bottom > .small { display: none; }
  .ws-stage { padding: 20px 16px; }
  .presenter .vc-row { gap: 6px; }
  .next-card { padding: 16px; }
  .next-card .row, .next-card .btn { width: 100%; }
}

/* Small targets get a larger area to tap without changing how they look. */
.ob-back { position: relative; padding: 10px 14px; margin-top: 4px; }
.people-dots button { position: relative; }
.people-dots button::after { content: ''; position: absolute; inset: -8px; }
[data-drag] { -webkit-touch-callout: none; }

/* ===================================================================== */
/* Language menu                                                          */
/* ===================================================================== */

.lang-wrap { position: relative; flex: 0 0 auto; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--text-2); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
.lang-btn:hover { background: rgba(26, 26, 31, 0.05); color: var(--ink); }
.lang-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 75; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-3); padding: 6px; animation: rise 0.16s var(--ease) both; }
.lang-menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; background: none; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--panel); outline: none; }
.lang-menu button[aria-checked='true'] { font-weight: 700; }
.lang-menu .tick { color: var(--accent); }
.ob-top .lang-wrap, .flow-top-in .lang-wrap { margin-left: 4px; }
.flow-top-in .saved { margin-left: 0; }
@media (max-width: 560px) { .lang-btn { padding: 0 8px; } .lang-menu { right: -8px; } }

/* ===================================================================== */
/* Account                                                                */
/* ===================================================================== */

.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.plan-row:first-of-type { border-top: 0; padding-top: 0; }
.plan-row b { display: block; font-size: 15px; }
.plan-row span { font-size: 13.5px; color: var(--text-2); }
.table.invoices td { vertical-align: top; }
.table .nowrap, .nowrap { white-space: nowrap; }
.inv-what { font-weight: 600; font-size: 14px; }
.mail-list em.failed { font-style: normal; color: var(--bad); font-weight: 600; }
@media (max-width: 640px) {
  .table.invoices thead { display: none; }
  .table.invoices tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .table.invoices td { border: 0; padding: 0; }
  .table.invoices td:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .table.invoices td:nth-child(5) { grid-column: 1 / -1; text-align: left !important; }
}

/* ===================================================================== */
/* Operations dashboard                                                   */
/* ===================================================================== */

.ops .page-head .seg { flex-wrap: nowrap; }
.ops-health { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.htile { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow-1); transition: box-shadow 0.15s, transform 0.15s; }
.htile:hover { box-shadow: var(--shadow-2); }
.htile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.htile.on { box-shadow: 0 0 0 2px var(--ink); }
.htile b { font-size: 14.5px; }
.hstat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px 3px 4px; border-radius: 999px; white-space: nowrap; }
.hstat i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; color: #fff; }
.hstat.ok { background: var(--good-soft); color: var(--good); } .hstat.ok i { background: var(--good); }
.hstat.warn { background: var(--partly-soft); color: var(--partly); } .hstat.warn i { background: var(--partly); }
.hstat.fail { background: var(--bad-soft); color: var(--bad); } .hstat.fail i { background: var(--bad); }
.hnum { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.hnum small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.hsub { font-size: 13px; color: var(--text-2); }
.hlast { font-size: 12px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ops-kpis { margin-bottom: 18px; }
.ops-charts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ochart b { font-size: 13.5px; }
.ochart .num { font-weight: 700; }
.ochart svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.attn { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.attn li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.5; }
.lv { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--panel); color: var(--text-2); font-style: normal; }
.lv-error .lv { background: var(--bad); color: #fff; }
.lv-warn .lv { background: var(--partly); color: #fff; }
.funnel { display: grid; gap: 8px; }
.fstep { font-size: 13.5px; }
.fbar { height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden; margin-top: 4px; }
.fbar i { display: block; height: 100%; background: #33333b; border-radius: 999px; }
.ops-filters { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.ops-filters .chip { padding: 6px 11px; font-size: 12.5px; }
.ops-log { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); }
.ops-log .table th { position: sticky; top: 0; background: var(--surface); z-index: 1; padding-top: 10px; }
.ops-log .table td { padding: 9px 12px; font-size: 13.5px; vertical-align: top; }
.ops-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.ops-dl dt { color: var(--muted); }
.ops-dl dd { margin: 0; }
.ops-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: top; }
.ops-top li { display: grid; grid-template-columns: 140px minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: 13.5px; }
.ops-top .bar { height: 8px; background: var(--panel); border-radius: 999px; overflow: hidden; }
.ops-top .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ops-top .num { text-align: right; font-weight: 700; }
@media (max-width: 980px) { .ops-health { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ops-health { grid-template-columns: minmax(0, 1fr); } .ops-charts { grid-template-columns: minmax(0, 1fr); } .ops-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .ops-dl dd { margin-bottom: 8px; } .ops-top li { grid-template-columns: 110px minmax(0, 1fr) 26px; } }

/* ===================================================================== */
/* Admin console: tabs, accounts, actions                                 */
/* ===================================================================== */
.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 22px; padding: 4px; background: var(--panel); border-radius: 12px; width: max-content; max-width: 100%; }
.admin-tabs a { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.admin-tabs a:hover { color: var(--ink); }
.admin-tabs a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.admin-table td { vertical-align: top; }
.admin-table .n, .data-table .n { text-align: right; }
.admin-table tr.rowlink { cursor: pointer; }
.admin-table tr.rowlink:hover td { background: var(--panel); }
.admin-table a { color: inherit; text-decoration: none; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.admin-actions { position: sticky; top: 84px; }
.admin-act + .admin-act { margin-top: 8px; }
.ws-block + .ws-block { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.ws-block .data-table { margin-top: 8px; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: minmax(0, 1fr); } .admin-actions { position: static; } }

/* Your data, on the profile and on a participant's own page */
.data-rows { display: flex; flex-direction: column; }
.data-row { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); }
.data-row:first-child { border-top: 0; }
.data-row b { display: block; font-size: 15px; }
.data-row span { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 3px; max-width: 620px; line-height: 1.5; }
.data-row .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .data-row { flex-direction: column; align-items: flex-start; gap: 10px; } }
.account-banner { align-items: center; margin-bottom: 18px; }
.account-banner > span:not(.ico) { flex: 1 1 auto; }

/* ===================================================================== */
/* Consent bar, settings and the load tiles                               */
/* ===================================================================== */

/* The analytics consent bar, shown once at the bottom of the page. Full width on a phone, a centered card on a desktop. */
.consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3); padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
.consent-bar p { flex: 1 1 280px; font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0; }
.consent-bar .consent-actions { display: flex; gap: 8px; flex: 0 0 auto; }
@media (min-width: 640px) { .consent-bar { left: 50%; right: auto; bottom: 16px; width: min(560px, calc(100% - 32px)); transform: translateX(-50%); border-radius: var(--r-lg); padding-bottom: 14px; } }

/* Settings: panels in two columns on a wide screen, each setting separated by a hairline. */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.setting + .setting { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* The four load tiles on the operations dashboard. */
.load-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .load-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The gated analysis uses .gated (the wrapper), .shaded (the blurred sections) and .unlock-card. .blur-wrap is the same as .shaded. */
.blur-wrap { filter: blur(6px); opacity: 0.55; pointer-events: none; user-select: none; }

/* ------------------------------------------------------------------ */
/* Pictures of the workshop: the storyboard in the wizard, the page before each section */
/* ------------------------------------------------------------------ */
.story { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; padding: 2px 0; }
.story-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 8px 10px; transition: opacity 0.2s; }
.story-step.off { opacity: 0.42; }
.story-step.off .thumb { filter: grayscale(1); }
.story-step.most { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.story-step .thumb { background: var(--bg); border-radius: var(--r-sm); overflow: hidden; }
.story-step .thumb svg { display: block; width: 100%; height: auto; }
.story-label { font-size: 11.5px; font-weight: 600; line-height: 1.3; margin-top: 8px; color: var(--ink); }
.story-label span { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.story-tag { position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--panel-2); color: var(--text-2); }
.story-tag.gold { background: var(--accent); color: #fff; }
.thumb.lg { background: var(--bg); border-radius: var(--r); overflow: hidden; }
.thumb.lg svg { display: block; width: 100%; height: auto; }

.bridge { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.9fr); gap: 40px; align-items: start; max-width: 1180px; }
.bridge-look { background: var(--accent-wash); border-radius: var(--r-lg); padding: 20px 22px; }
.bridge-look .kicker { display: block; margin-bottom: 10px; }
.bridge-look ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.bridge-look li { font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: var(--ink); padding-left: 4px; }
.bridge-visual { padding: 18px; }
@media (max-width: 860px) { .bridge { grid-template-columns: 1fr; gap: 20px; } .bridge-visual { order: -1; } }

/* The timer */
.timer-custom { display: inline-flex; align-items: center; gap: 6px; }
.timer-custom .input { width: 64px; padding: 6px 8px; font-size: 13px; text-align: right; }
.ws-rail .toggle.small { font-size: 12.5px; color: var(--text-2); padding: 0 2px 6px; }
.ws-rail .toggle.small input { width: 32px; height: 18px; flex-basis: 32px; }
.ws-rail .toggle.small input::after { width: 14px; height: 14px; }
.ws-rail .toggle.small input:checked::after { transform: translateX(14px); }

/* The coach mark: the page dims, one element stays lit, a card beside it says what it is for */
.coach-back { position: fixed; inset: 0; z-index: 60; background: rgba(26, 26, 31, 0.55); animation: fade 0.25s both; }
.coach-target { position: relative; z-index: 61; box-shadow: 0 0 0 4px var(--accent), 0 0 0 10px rgba(154, 123, 46, 0.25), var(--shadow-3) !important; border-radius: var(--r-lg); animation: coach-pulse 1.6s ease-in-out infinite; background: var(--surface); }
@keyframes coach-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--accent), 0 0 0 10px rgba(154, 123, 46, 0.25), var(--shadow-3); } 50% { box-shadow: 0 0 0 4px var(--accent), 0 0 0 18px rgba(154, 123, 46, 0.08), var(--shadow-3); } }
.coach-card { position: fixed; z-index: 62; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 18px 20px 16px; animation: rise 0.3s var(--ease) both; }
.coach-card::before { content: ''; position: absolute; top: -8px; left: var(--arrow-x, 50%); width: 16px; height: 16px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.coach-card.above::before { top: auto; bottom: -8px; transform: translateX(-50%) rotate(225deg); }
.coach-card h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 6px; letter-spacing: -0.01em; }
.coach-card p { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0 0 12px; }

/* The offer to let Claude write the summary */
.ai-offer { background: var(--panel); border-radius: var(--r); padding: 16px 18px; }
.ai-offer.compact { background: var(--surface); border: 1px solid var(--line-strong); }
.ai-offer .ai-mark { color: var(--accent); margin-right: 2px; }
.ai-offer .toggle { margin-top: 4px; font-weight: 600; }
.ai-consent { display: grid; gap: 10px; margin-top: 12px; padding: 12px 14px; background: var(--surface); border-radius: var(--r-sm); border: 1px solid var(--line); }
.ai-offer.compact .ai-consent { background: var(--panel); border: 0; }
.ai-consent .check { font-size: 13.5px; }
.ai-consent .check em { display: block; font-style: normal; font-size: 12.5px; margin-top: 2px; }

/* ------------------------------------------------------------------ */
/* The guides: the interface at reduced size, a caption, a transport, a narration in the corner */
/* ------------------------------------------------------------------ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.guide { max-width: 980px; }
.guide-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow-2); }
.guide-canvas { position: absolute; left: 0; top: 0; width: 1120px; transform-origin: 0 0; background: var(--bg); overflow: hidden; }
.guide-main { position: absolute; inset: 0; overflow: hidden; }
.guide-top { display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(246, 245, 242, 0.9); }
.guide-top nav { display: flex; gap: 4px; }
.guide-top nav a { font-size: 14px; font-weight: 600; color: var(--text-2); padding: 7px 12px; border-radius: 10px; }
.guide-top nav a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.guide-pages { position: absolute; top: 56px; left: 0; right: 0; bottom: 0; }
.guide-scene { display: none; position: absolute; inset: 0; overflow: hidden auto; scrollbar-width: none; }
.guide-scene::-webkit-scrollbar { display: none; }
.guide-pages > .guide-scene { padding: 26px 28px 80px; }
.guide-scene.on { display: block; animation: fade 0.3s both; }
.guide-scene .guide-ws { min-height: 100%; }
.guide-ws .ws-top { position: static; }
.guide-flow .flow-top-in { padding: 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.guide-scene * { pointer-events: none !important; }
.guide-scene .is-focus { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 8px; transition: outline-color 0.3s; }
.guide-scene .pressed { transform: translateY(1px); background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.guide-scene .typing { border-color: var(--ink) !important; box-shadow: 0 0 0 3px var(--focus); }
.guide-scene .flash { animation: guide-flash 1.2s ease-out 1; }
@keyframes guide-flash { 0% { background: var(--accent-wash); box-shadow: 0 0 0 4px var(--accent-wash); } 100% { background: transparent; box-shadow: none; } }
.guide-cursor { position: absolute; left: 40px; top: 40px; width: 28px; height: 28px; z-index: 50; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); transition: left 0.9s var(--ease), top 0.9s var(--ease), transform 0.15s; pointer-events: none; }
.guide-cursor.click { transform: scale(0.8); }
.guide-pip { position: absolute; right: 12px; top: 12px; width: min(28%, 240px); aspect-ratio: 16 / 9; border-radius: 12px; box-shadow: var(--shadow-3); background: #000; z-index: 20; object-fit: cover; }
.guide-caption { min-height: 56px; margin-top: 14px; padding: 14px 18px; border-radius: var(--r); background: var(--ink); color: #fff; font-family: var(--font-display); font-size: 18px; line-height: 1.45; text-wrap: pretty; }
.guide-transport { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.guide-transport .ctrl { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.guide-transport .ctrl.main { width: 48px; height: 48px; background: var(--ink); border-color: var(--ink); color: #fff; }
.guide-transport .ctrl:hover { border-color: var(--ink); }
.guide-transport .ctrl.main:hover { background: var(--accent); border-color: var(--accent); }
.guide-bar { flex: 1 1 auto; display: flex; gap: 4px; }
.guide-bar span { flex: 1 1 0; height: 6px; border-radius: 99px; background: var(--panel-2); position: relative; overflow: hidden; }
.guide-bar span::after { content: ''; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: var(--accent); border-radius: 99px; }
.guide-lines { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.guide-lines li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; line-height: 1.5; color: var(--text-2); cursor: pointer; }
.guide-lines li:hover { background: var(--panel); }
.guide-lines li.on { background: var(--accent-wash); color: var(--ink); }
.guide-lines li .n { width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text-2); }
.guide-lines li.on .n { background: var(--accent); color: #fff; }
.guide-tile { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.guide-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: inherit; }
.guide-tile .thumb { background: var(--bg); border-bottom: 1px solid var(--line); }
.guide-tile .thumb svg { display: block; width: 100%; height: auto; }
.guide-tile-body { padding: 16px 18px 18px; }
.guide-tile.small { grid-template-rows: 1fr; }
.guide-link { display: inline-flex; align-items: center; gap: 6px; }
.guide-link .guide-ico { font-size: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-grid; place-items: center; padding-left: 1px; }
.dropzone { border: 2px dashed var(--line-strong); border-radius: var(--r); padding: 26px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dropzone.over { border-color: var(--accent); background: var(--accent-wash); }
.upload-log { margin: 14px 0 0; padding-left: 20px; font-size: 13px; color: var(--text-2); display: grid; gap: 4px; }
.upload-log .ok { color: var(--good); }
.upload-log .err { color: var(--bad); }
.table.recordings td { vertical-align: top; }
@media (max-width: 700px) { .guide-caption { font-size: 16px; } .guide-stage { aspect-ratio: 4 / 3; } }

/* Sound and full screen in the guide player */
.guide:focus { outline: none; }
.guide-audio { display: inline-flex; align-items: center; gap: 6px; }
.guide-audio .ctrl.off { color: var(--muted); }
.guide-audio .ctrl.off svg path:not(:first-child) { opacity: 0.25; }
.guide-volume { width: 80px; accent-color: var(--ink); cursor: pointer; }
.guide-transport .ctrl.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.guide:fullscreen, .guide:-webkit-full-screen { max-width: none; width: 100%; height: 100%; background: var(--bg); padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; overflow: auto; }
.guide:fullscreen .guide-stage, .guide:-webkit-full-screen .guide-stage { width: min(100%, calc((100vh - 190px) * 1.6)); margin: 0 auto; }
.guide:fullscreen .guide-caption, .guide:-webkit-full-screen .guide-caption { width: min(100%, calc((100vh - 190px) * 1.6)); margin-left: auto; margin-right: auto; font-size: 22px; }
.guide:fullscreen .guide-transport, .guide:-webkit-full-screen .guide-transport { width: min(100%, calc((100vh - 190px) * 1.6)); margin-left: auto; margin-right: auto; }
.guide:fullscreen .guide-lines, .guide:fullscreen .guide-script, .guide:-webkit-full-screen .guide-lines, .guide:-webkit-full-screen .guide-script { display: none; }
@media (max-width: 700px) { .guide-volume { display: none; } }

/* Sources and method, inside the app */
.method .soft { line-height: 1.7; }
.method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.method-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.method-item .thumb { background: var(--surface); border-radius: var(--r-sm); overflow: hidden; }
.method-item .thumb svg { display: block; width: 100%; height: auto; }
.method-item b { font-size: 14.5px; }
ol.sources { padding-left: 20px; margin: 0; display: grid; gap: 12px; }
ol.sources li { font-size: 14px; line-height: 1.6; color: var(--text-2); }
ol.sources li b { color: var(--ink); }
ol.sources .takes { display: block; margin-top: 3px; color: var(--ink); }

/* Film mode: the player alone, recorded by tools/guide-film.js */
body.film { background: var(--bg); overflow: hidden; }
body.film .demo-bar, body.film .toast-wrap, body.film .guide-transport, body.film .guide-lines { display: none !important; }
body.film .film-wrap { padding: 0; }
body.film .guide { max-width: none; }
body.film .guide-stage { border-radius: 0; border: 0; box-shadow: none; aspect-ratio: auto; height: calc(100vh - 92px); }
body.film .guide-caption { margin: 0; border-radius: 0; height: 92px; display: flex; align-items: center; padding: 0 28px; font-size: 20px; }