/* The staff survey profile (survey-profile.js), in whichever page draws it.
 * Both hosts define their own tokens -- the app (style.css) --text, --card,
 * --text-dim; the desktop review (review/review.css) --ink, --surface,
 * --ink-2 -- and neither defines the other's, so each variable below reads
 * the review token first and falls back to the app's. One stylesheet, both
 * themes, review's dark mode included. */
.sp {
  --sp-ink: var(--ink, var(--text, #fff8f3));
  --sp-dim: var(--ink-2, var(--text-dim, #c6adb0));
  --sp-faint: var(--muted, #8d7a7d);
  --sp-bg: var(--page, var(--bg, #171416));
  --sp-card: var(--surface, var(--card, #241b20));
  --sp-card2: var(--surface-2, rgba(255,255,255,.05));
  --sp-line: var(--border, rgba(255,255,255,.08));
  --sp-track: var(--surface-3, rgba(255,255,255,.10));
  --sp-accent: var(--accent, #ff9168);
  --sp-accent-2: var(--accent-ink, var(--accent-2, #fd746c));
  --sp-soft: var(--accent-ink, var(--accent-3, #ffc1a2));
  --sp-wash: var(--accent-wash, rgba(253,116,108,.14));
  --sp-wash-b: var(--border-2, rgba(253,116,108,.28));
  --sp-ok: var(--good-ink, var(--good, #8fd9a3));
  --sp-warn: var(--warn-ink, #ffcf7a);
  --sp-radius: var(--radius, 12px);
  container-type: inline-size;
  color: var(--sp-ink);
  font-size: 15px;
  line-height: 1.45;
  user-select: text;
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }

/* status */
.sp-meter { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; margin: 2px 0 8px; }
.sp-meter i { height: 6px; border-radius: 3px; background: var(--sp-track); }
.sp-meter i.on { background: var(--sp-accent); }
.sp-status { display: flex; flex-direction: column; gap: 1px; margin-bottom: 16px; }
.sp-status strong { font-size: 13.5px; }
.sp-status.part strong { color: var(--sp-warn); }
.sp-status span { color: var(--sp-dim); font-size: 12px; }
.sp-status .sp-gap { color: var(--sp-ink); }
.sp-none { background: var(--sp-card); border-radius: var(--sp-radius); padding: 18px; margin-bottom: 12px; }
.sp-none-t { font-weight: 800; font-size: 16px; }
.sp-none-c { color: var(--sp-dim); font-size: 13px; margin-top: 4px; }

/* answers */
.sp-l { color: var(--sp-faint); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.sp-q { margin: 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--sp-wash-b); color: var(--sp-ink); font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chips span { background: var(--sp-wash); border: 1px solid var(--sp-wash-b); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: var(--sp-soft); }
.sp-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.sp-rank { margin: 0; padding: 0; list-style: none; counter-reset: r; display: flex; flex-direction: column; gap: 5px; }
.sp-rank li { counter-increment: r; display: flex; gap: 9px; align-items: baseline; font-size: 14px; }
.sp-rank li::before { content: counter(r); min-width: 20px; height: 20px; border-radius: 50%; background: var(--sp-card2); color: var(--sp-dim); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-1px); flex: 0 0 20px; }
.sp-rank li:first-child::before { background: var(--sp-accent); color: #fff; }
.sp-rank.tight li { font-size: 13px; }
.sp-rank.tight li::before { min-width: 17px; height: 17px; font-size: 10px; flex-basis: 17px; }
.sp-single { font-size: 15px; font-weight: 650; }
.sp-confirm { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.sp-confirm.ok { color: var(--sp-ok); background: color-mix(in srgb, var(--sp-ok) 14%, transparent); }
.sp-confirm.flag { color: var(--sp-warn); background: color-mix(in srgb, var(--sp-warn) 16%, transparent); }
.sp-fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.sp-fields dt { color: var(--sp-faint); font-size: 11px; }
.sp-fields dd { margin: 0; font-size: 14px; }
.sp-growth { display: flex; flex-direction: column; gap: 9px; }
.sp-g-row { display: grid; grid-template-columns: 112px 1fr 66px; gap: 10px; align-items: center; }
.sp-g-name { font-size: 13px; line-height: 1.25; min-width: 0; }
.sp-g-name small { display: block; color: var(--sp-faint); font-size: 10.5px; margin-top: 1px; }
.sp-g-row.unrated .sp-g-num { color: var(--sp-faint); font-size: 11.5px; }
.sp-g-row.unrated .sp-g-track::before { display: none; }
.sp-exp { padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--sp-line); }
.sp-exp-t { color: var(--sp-dim); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-g-num { font-size: 12.5px; color: var(--sp-dim); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-g-num em { font-style: normal; margin-left: 5px; font-weight: 700; color: var(--sp-faint); }
.sp-g-num em.up { color: var(--sp-ok); }
.sp-g-track { position: relative; height: 14px; }
.sp-g-track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--sp-track); border-radius: 1px; }
.sp-g-span { position: absolute; top: 5px; height: 4px; background: var(--sp-wash-b); border-radius: 2px; }
.sp-g-start, .sp-g-now { position: absolute; top: 2px; width: 10px; height: 10px; border-radius: 50%; margin-left: -5px; }
.sp-g-start { background: var(--sp-card); border: 2px solid var(--sp-faint); }
.sp-g-now { background: var(--sp-accent); }
.sp-g-key { display: flex; gap: 14px; color: var(--sp-faint); font-size: 11px; margin-top: 2px; }
.sp-g-key span { display: inline-flex; align-items: center; gap: 5px; }
.sp-g-key b { position: static; margin: 0; display: inline-block; }
/* Looking back: one card per week -- what the week was, their three words,
   and who they loved or wrote a note about. auto-fill, so the cards stack on
   a phone and sit two or three across on the desktop page. */
.sp-wcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.sp-wcard { background: var(--sp-card2); border: 1px solid var(--sp-line); border-radius: 14px; padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp-wcard-h { display: flex; flex-direction: column; gap: 1px; }
.sp-wk { color: var(--sp-faint); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sp-wcard-t { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.sp-wcard-s { color: var(--sp-dim); font-size: 12.5px; }
.sp-words { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 18px; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; }
/* the dot trails a word, so a wrapped line never opens with one */
.sp-words span:not(:last-child)::after { content: "·"; color: var(--sp-faint); margin-left: 10px; font-weight: 400; }
.sp-words.unchecked { font-weight: 500; font-size: 14.5px; color: var(--sp-dim); display: block; }
.sp-words small { color: var(--sp-faint); font-size: 11px; margin-left: 6px; white-space: nowrap; }
.sp-wcard-m { border-top: 1px solid var(--sp-line); padding-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.sp-tally { color: var(--sp-faint); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sp-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-marks li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.35; }
.sp-mark { flex: 0 0 14px; text-align: center; }
.sp-mark.heart { color: var(--sp-accent-2); }
.sp-mark.note { color: var(--sp-faint); }
.sp-mark-t { display: flex; flex-direction: column; min-width: 0; }
.sp-mark-t strong { font-weight: 650; }
.sp-what { color: var(--sp-dim); font-size: 12.5px; }
.sp-note { display: block; color: var(--sp-dim); font-size: 13px; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-entries { display: flex; flex-direction: column; gap: 9px; }
.sp-e-row { display: grid; grid-template-columns: 104px 1fr; gap: 10px; font-size: 13.5px; }
.sp-e-style { color: var(--sp-dim); font-weight: 600; }
.sp-e-names { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 12px; counter-reset: n; }
.sp-e-names li { counter-increment: n; }
.sp-e-names li::before { content: counter(n) " "; color: var(--sp-faint); font-size: 11px; font-weight: 700; }
.sp-e-skip { color: var(--sp-faint); font-style: italic; }

.sp-row { padding: 11px 0; border-top: 1px solid var(--sp-line); }

/* The main answers and their own words up top, then every step folded (the owner's pick, B). */
.sp-card { background: var(--sp-card); border-radius: var(--sp-radius); padding: 16px; margin-bottom: 12px; }
.sp-card-t { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
/* At a glance: one row per question, the question on the left, the answer
   (or the top three, in order) on the right. */
.sp-glance { display: flex; flex-direction: column; }
.sp-glance-row { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--sp-line); align-items: baseline; }
.sp-glance-row:first-child { border-top: 0; padding-top: 2px; }
.sp-glance-k { color: var(--sp-faint); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.35; }
.sp-glance-one { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.sp-glance-v .sp-rank { gap: 4px; }
.sp-said { padding: 10px 0; border-top: 1px solid var(--sp-line); }
.sp-said:first-of-type { border-top: 0; padding-top: 0; }
.sp-fold { border-top: 1px solid var(--sp-line); }
.sp-fold summary { list-style: none; display: grid; grid-template-columns: 28px 1fr auto 14px; gap: 8px; align-items: center; padding: 11px 0; cursor: pointer; }
.sp-earlier .sp-fold summary { grid-template-columns: 1fr auto 14px; }
.sp-fold summary::-webkit-details-marker { display: none; }
.sp-fold summary::after { content: "›"; color: var(--sp-faint); font-size: 18px; }
.sp-fold[open] summary::after { transform: rotate(90deg); }
.sp-fold-n { color: var(--sp-faint); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-fold-t strong { display: block; font-size: 14px; }
.sp-fold-t small { color: var(--sp-faint); font-size: 11px; }
.sp-fold-c { color: var(--sp-dim); font-size: 12px; }
.sp-fold .sp-row:last-child { padding-bottom: 14px; }

/* Wide: the desktop review page (a container query, so the app's 480px
 * column never takes it). */
@container (min-width: 760px) {
  .sp-fold .sp-row:not(.sp-row-weeks), .sp-earlier .sp-row { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
  .sp-fold .sp-row .sp-l { margin-top: 3px; }
  .sp-card:not(.sp-earlier) .sp-fold .sp-row { margin-left: 36px; }
  .sp-glance-row { grid-template-columns: 240px 1fr; gap: 24px; }
  .sp-glance-v .sp-rank { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
}