/* TeacherPuzzle staging site: shared brand tokens + site chrome. Brand board v1, light only.
   Every class here is prefixed tp- so it never collides with a game's own CSS. */
:root { color-scheme: light; }
:root {
  --paper: #FDF0E9;       /* Blush */
  --sheet: #FFFFFF;
  --ink: #3A3A3A;         /* Charcoal */
  --muted: #666666;
  --rule: #EBDDD6;
  --coral: #FE6968;
  --btn: #F25757;         /* Coral, a shade deeper so white text stays legible */
  --coral-ink: #C2372F;
  --petal: #FFE3E9;
  --mustard: #FEC450;
  --teal: #3B758B;
  --midnight: #252641;
  --on-accent: #FFFFFF;
  --bar: #F6C2C4;
  --switch-off: #8C817C;
  --display: Oswald, "Arial Narrow", Impact, sans-serif;
  --body: Roboto, Helvetica, Arial, sans-serif;
  --script: Allison, "Brush Script MT", "Segoe Script", cursive;
  --score: Quantico, ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; margin: 0; }
[hidden] { display: none !important; }

/* ---------- Header ---------- */
.tp-header { background: var(--sheet); border-bottom: 1px solid var(--rule); position: relative; z-index: 20; }
.tp-hd { max-width: 1080px; margin: 0 auto; padding: 10px 16px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mark acct" "games games"; gap: 8px 12px; align-items: center; }
.tp-wordmark { grid-area: mark; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--ink); text-decoration: none; justify-self: start; border-radius: 3px; }
.tp-wordmark span { color: var(--coral); }
.tp-acct { grid-area: acct; display: flex; align-items: center; gap: 8px; position: relative; }
.tp-hd-games { grid-area: games; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.tp-hd-games::-webkit-scrollbar { display: none; }
.tp-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; border-radius: 4px; background: var(--paper); color: var(--ink); text-decoration: none; white-space: nowrap; min-height: 34px; }
.tp-chip svg { color: var(--muted); }
.tp-chip:hover { background: var(--petal); }
.tp-chip.on { background: var(--g); color: var(--gi); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(58, 58, 58, 0.12); }
.tp-chip.on svg { color: currentColor; }
.tp-link { font: inherit; font-size: 15px; background: none; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 4px; min-height: 40px; border-radius: 3px; }
.tp-acct-btn { font-family: var(--display); font-size: 16px; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 22px; padding: 4px 12px 4px 4px; cursor: pointer; min-height: 40px; }
.tp-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--coral); color: var(--ink); display: grid; place-items: center; font-weight: 700; }
.tp-acct-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 0 12px 30px -14px rgba(58, 58, 58, 0.5); display: grid; min-width: 200px; padding: 4px; z-index: 30; }
.tp-acct-menu a, .tp-acct-menu button { font: inherit; font-size: 15px; text-align: left; color: var(--ink); text-decoration: none; background: none; border: 0; padding: 10px 12px; border-radius: 4px; cursor: pointer; min-height: 44px; }
.tp-acct-menu a:hover, .tp-acct-menu button:hover { background: var(--petal); }
.tp-acct-menu button { border-top: 1px solid var(--rule); border-radius: 0 0 4px 4px; }
@media (max-width: 420px) { .tp-wordmark { font-size: 22px; } .tp-acct .tp-btn-sm { font-size: 14px; padding: 7px 10px; } .tp-link { font-size: 14px; } }

/* ---------- Buttons + shared bits ---------- */
.tp-btn { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 0.02em; border: 0; border-radius: 4px; padding: 11px 22px; min-height: 46px; background: var(--btn); color: var(--on-accent); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; text-align: center; }
.tp-btn:hover { background: var(--coral-ink); }
.tp-btn-alt { background: var(--mustard); color: #3A3A3A; }
.tp-btn-alt:hover { background: #F5B530; }
.tp-btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 9px 20px; }
.tp-btn-ghost:hover { background: var(--ink); color: var(--sheet); }
.tp-btn-sm { font-size: 16px; min-height: 40px; padding: 7px 14px; }
.tp-btn-ghost.tp-btn-sm { padding: 5px 12px; }
.tp-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.tp-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tp-small { font-size: 14px; }
.tp-muted { color: var(--muted); }
.tp-header a:focus-visible, .tp-header button:focus-visible, .tp-btn:focus-visible, .tp-link:focus-visible, .tp-staging button:focus-visible, .tp-staging a:focus-visible, .tp-staging input:focus-visible,
.tp-modal button:focus-visible, .tp-modal a:focus-visible, .tp-toast button:focus-visible, .tp-main a:focus-visible, .tp-main button:focus-visible, .tp-main input:focus-visible, .tp-main select:focus-visible, .tp-main textarea:focus-visible, .tp-main summary:focus-visible, .tp-main [tabindex]:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ---------- Rank card (revealed + locked) ---------- */
.tp-rank { display: grid; gap: 8px; background: var(--paper); border-radius: 8px; padding: 20px; }
.tp-rank-big { font-family: var(--score); font-weight: 700; font-size: clamp(44px, 12vw, 64px); line-height: 1; color: var(--coral-ink); font-variant-numeric: tabular-nums; }
.tp-rank-line { font-family: var(--display); font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; }
.tp-rank-line b { font-family: var(--score); color: var(--coral-ink); }
.tp-rank-detail { font-size: 15px; border-top: 1px solid var(--rule); padding-top: 8px; }
.tp-rank-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tp-rank-grade { font-family: var(--score); font-weight: 700; font-size: 26px; line-height: 1; color: var(--ink); border: 2px solid var(--coral-ink); border-radius: 8px; padding: 6px 10px; }
.tp-rank-note { font-size: 15px; color: var(--ink); }
.tp-rank-first { font-size: 20px; }
.tp-rank-peers { display: grid; gap: 2px; }
.tp-rank-peers .tp-eyebrow { font-size: 12px; }
/* Early bird: the first 10 teachers to finish a puzzle on its day (first bell). */
.tp-earlybird { display: inline-flex; align-items: center; gap: 6px; background: var(--mustard); color: var(--ink); font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px 4px 10px; line-height: 1.2; white-space: nowrap; }
.tp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tp-lockcard { display: grid; border-radius: 8px; overflow: hidden; background: var(--paper); border: 1.5px solid var(--rule); }
.tp-lockcard > * { grid-area: 1 / 1; min-width: 0; }
.tp-blurred { filter: blur(7px); opacity: 0.75; padding: 20px; display: grid; gap: 12px; user-select: none; pointer-events: none; }
.tp-lockover { position: relative; z-index: 1; display: grid; gap: 12px; padding: 24px 20px; justify-items: start; align-content: center; background: rgba(255, 255, 255, 0.6); }
.tp-lockover h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; margin: 0; font-size: clamp(22px, 5.6vw, 28px); line-height: 1.1; }
.tp-lockover p { margin: 0; }
.tp-lock { width: 40px; height: 40px; border-radius: 50%; background: var(--coral); color: var(--ink); display: grid; place-items: center; }

/* ---------- Modal ---------- */
.tp-modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(37, 38, 65, 0.45); display: grid; place-items: center; padding: 16px; }
.tp-modal { position: relative; background: var(--sheet); border-radius: 8px; border-top: 5px solid var(--coral); width: min(460px, 100%); padding: 26px 22px 22px; display: grid; gap: 14px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5); max-height: calc(100vh - 32px); overflow: auto; }
.tp-modal-h { font-family: var(--display); font-weight: 700; text-transform: uppercase; margin: 0; font-size: 26px; line-height: 1.1; padding-right: 30px; }
.tp-modal-b p { margin: 0 0 8px; }
.tp-modal-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); border-radius: 4px; }

/* ---------- Toast ---------- */
.tp-toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); z-index: 90; background: var(--midnight); color: #FFFFFF; border-radius: 8px; padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); transition: transform 0.25s ease; font-size: 15px; }
.tp-toast.on { transform: translate(-50%, 0); }
.tp-toast-x { background: none; border: 0; color: #FFFFFF; font-size: 22px; cursor: pointer; width: 36px; height: 36px; border-radius: 4px; flex: none; }

/* ---------- Staging drawer ---------- */
.tp-staging { position: fixed; left: 0; bottom: 0; z-index: 80; font-size: 14px; }
.tp-staging-tab { font-family: var(--display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--midnight); color: #FFFFFF; border: 0; border-radius: 0 6px 0 0; padding: 7px 12px; cursor: pointer; min-height: 34px; }
.tp-staging-panel { position: absolute; left: 8px; bottom: 42px; width: min(360px, calc(100vw - 16px)); max-height: calc(100vh - 60px); overflow: auto; background: var(--sheet); border: 2px dashed var(--midnight); border-radius: 8px; padding: 14px; display: grid; gap: 10px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.5); }
.tp-staging-panel p { margin: 0; }
.tp-staging-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--midnight); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-staging-top .tp-modal-x { position: static; }
.tp-st-today { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tp-st-today label { font-weight: 700; }
.tp-st-today input { font: inherit; padding: 6px 8px; border: 1.5px solid #CDBFB8; border-radius: 4px; min-height: 36px; background: var(--sheet); color: var(--ink); }
.tp-st-warn { background: var(--petal); border-radius: 4px; padding: 4px 8px; }
.tp-st-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-mini { font: inherit; font-size: 14px; background: var(--paper); border: 1px solid #CDBFB8; color: var(--ink); border-radius: 4px; padding: 6px 10px; min-height: 36px; cursor: pointer; }
.tp-mini:hover:not([disabled]) { background: var(--petal); }
.tp-mini[disabled] { opacity: 0.5; cursor: not-allowed; }
.tp-mini-danger { border-color: var(--coral-ink); color: var(--coral-ink); }
.tp-st-links { display: flex; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid var(--rule); padding-top: 8px; }
.tp-st-links a { color: var(--teal); }

/* ---------- Page kit for the core pages (home, archive, stats, account, challenge) ---------- */
.tp-main { max-width: 1080px; margin: 0 auto; padding: 22px 16px 72px; display: grid; gap: 20px; min-width: 0; }
.tp-main.tp-narrow { max-width: 712px; }
.tp-main h1, .tp-main h2, .tp-main h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; margin: 0; line-height: 1.05; text-wrap: balance; }
.tp-main h1 { font-size: clamp(36px, 8vw, 56px); }
.tp-main h1:focus { outline: none; }
.tp-main h2 { font-size: 26px; }
.tp-main h3 { font-size: 20px; letter-spacing: 0.02em; }
.tp-main p { margin: 0; }
.tp-main a:where(:not(.tp-btn):not(.tp-card)) { color: var(--coral-ink); }
.tp-eyebrow { font-family: var(--display); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.tp-script { font-family: var(--script); font-size: 44px; line-height: 1; color: var(--coral-ink); margin: 0; }
.tp-lede { font-family: var(--display); font-weight: 300; font-size: 21px; line-height: 1.35; max-width: 34em; }
.tp-lede b { font-weight: 700; overflow-wrap: anywhere; }
.tp-card { background: var(--sheet); border-radius: 8px; box-shadow: 0 1px 0 var(--rule), 0 10px 30px -18px rgba(58, 58, 58, 0.35); min-width: 0; }
.tp-card.tp-acctcard { border-top: 5px solid var(--coral); overflow: hidden; }
.tp-sheet { padding: 28px; display: grid; gap: 20px; min-width: 0; }
@media (max-width: 480px) { .tp-sheet { padding: 22px 18px; } }
.tp-cardbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 28px; border-bottom: 1px solid var(--rule); font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.04em; }
.tp-cardbar .tp-num { font-family: var(--score); font-weight: 700; font-size: 14px; color: var(--muted); }
@media (max-width: 480px) { .tp-cardbar { padding-inline: 18px; } }
.tp-stack { display: grid; gap: 12px; }
.tp-note { background: var(--paper); border-radius: 6px; padding: 12px 14px; font-size: 15px; }
.tp-tlink { font: inherit; background: none; border: 0; padding: 8px 2px; margin: -8px 0; color: var(--coral-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; border-radius: 3px; }
.tp-msg { font-size: 14px; min-height: 1.4em; }
.tp-msg:empty { min-height: 0; }
.tp-proto { border: 1.5px dashed var(--muted); border-radius: 6px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 14px; color: var(--muted); }
.tp-reason { display: flex; gap: 10px; align-items: center; background: var(--petal); border-radius: 6px; padding: 10px 14px; font-family: var(--display); font-size: 18px; letter-spacing: 0.01em; }
.tp-reason svg { flex: none; color: var(--coral-ink); }

/* Forms (account pages) */
.tp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tp-form .tp-full { grid-column: 1 / -1; }
@media (max-width: 480px) { .tp-form { grid-template-columns: 1fr; } }
.tp-fld { display: grid; gap: 4px; align-content: start; min-width: 0; position: relative; }
.tp-fld > label, .tp-fld legend, .tp-single label { font-size: 14px; font-weight: 700; }
.tp-opt { font-weight: 400; color: var(--muted); }
.tp-hint { font-size: 13px; color: var(--muted); }
.tp-input, .tp-main select.tp-input { font: inherit; font-weight: 400; font-size: 16px; padding: 10px 12px; min-height: 48px; border: 1.5px solid #CDBFB8; border-radius: 4px; background: var(--sheet); color: var(--ink); width: 100%; }
.tp-single { display: grid; gap: 6px; max-width: 420px; }
.tp-main [aria-invalid="true"] { border-color: var(--coral-ink) !important; border-width: 2px !important; }
.tp-err { color: var(--coral-ink); font-size: 14px; font-weight: 700; }
.tp-err:empty { display: none; }
.tp-main fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tp-seg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tp-seg label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border: 1.5px solid #CDBFB8; border-radius: 4px; cursor: pointer; font-size: 15px; }
.tp-seg input { width: 20px; height: 20px; accent-color: var(--coral-ink); margin: 0; }
.tp-why { display: flex; gap: 10px; align-items: flex-start; background: var(--petal); border-radius: 6px; padding: 10px 14px; font-size: 15px; }
.tp-why svg { flex: none; margin-top: 2px; color: var(--coral-ink); }
.tp-wide { width: 100%; max-width: 420px; }
.tp-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; max-width: 420px; }
.tp-or::before, .tp-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.tp-ac { list-style: none; margin: 2px 0 0; padding: 4px; position: absolute; top: 100%; left: 0; right: 0; z-index: 5; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: 0 10px 24px -12px rgba(58, 58, 58, 0.5); display: grid; gap: 2px; }
.tp-ac li { padding: 9px 10px; min-height: 44px; border-radius: 3px; cursor: pointer; display: grid; line-height: 1.3; }
.tp-ac li small { color: var(--muted); font-size: 13px; }
.tp-ac li.active, .tp-ac li:hover { background: var(--petal); }

/* Consent controls */
.tp-check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1.5px solid var(--rule); border-radius: 6px; background: var(--sheet); cursor: pointer; }
.tp-check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--coral-ink); cursor: pointer; }
.tp-check.bad { border: 2px solid var(--coral-ink); }
.tp-check .t { font-weight: 700; }
.tp-req { font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-ink); margin-left: 4px; }
.tp-opttag { font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }
.tp-consentrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border: 1.5px solid var(--rule); border-radius: 6px; }
.tp-consentrow label { font-weight: 700; cursor: pointer; }
.tp-pref { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.tp-pref:first-child { border-top: 1px solid var(--rule); }
.tp-pref .t { font-family: var(--display); font-size: 19px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.2; }
.tp-pref .d { font-size: 15px; }
.tp-pref .stamp { font-size: 13px; color: var(--muted); }
.tp-pref .stamp b { font-family: var(--score); font-weight: 700; color: var(--ink); }
.tp-swwrap { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; min-height: 44px; }
.tp-switch { appearance: none; -webkit-appearance: none; flex: none; width: 56px; height: 32px; border-radius: 16px; background: var(--switch-off); position: relative; cursor: pointer; margin: 0; transition: background 0.15s; }
.tp-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.tp-switch:checked { background: var(--coral-ink); }
.tp-switch:checked::before { transform: translateX(24px); }
.tp-switch:disabled { opacity: 0.55; cursor: not-allowed; }
.tp-switch:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
/* Text messages (account/settings.html): "+1" prefix + national number, confirmed-number row */
.tp-phone { display: flex; gap: 8px; align-items: stretch; max-width: 420px; }
.tp-phone .tp-cc { flex: none; display: grid; place-items: center; padding: 0 12px; min-height: 48px; border: 1.5px solid #CDBFB8; border-radius: 4px; background: var(--paper); font-family: var(--score); font-weight: 700; font-size: 16px; color: var(--muted); }
.tp-phone .tp-input { font-family: var(--score); font-size: 17px; letter-spacing: 0.02em; }
.tp-phone-ok { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; background: var(--paper); border-radius: 6px; padding: 12px 14px; }
.tp-phone-ok svg { flex: none; color: var(--teal); }
.tp-phone-ok b { font-family: var(--score); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; }
.tp-phone-ok .tp-row { margin-left: auto; gap: 4px 10px; }
.tp-check .d { display: block; font-weight: 400; font-size: 15px; margin-top: 2px; }
.tp-check .stamp { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.tp-check .stamp b { font-family: var(--score); font-weight: 700; color: var(--ink); }
.tp-main details { font-size: 14px; }
.tp-main summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.tp-hist { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); }
.tp-hist b { color: var(--ink); }
.tp-danger { border: 1.5px solid var(--coral-ink); border-radius: 8px; padding: 16px; display: grid; gap: 10px; }
.tp-danger h2 { font-size: 20px; color: var(--coral-ink); }
.tp-btn-danger { background: var(--coral-ink); }
.tp-btn-danger:hover { background: #9E2A23; }

/* Footer */
.tp-footer { max-width: 1080px; margin: 0 auto; padding: 18px 16px 64px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; border-top: 1px solid var(--rule); }
.tp-footer nav { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.tp-footer a { color: var(--muted); }
.tp-footer a:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .tp-toast, .tp-switch, .tp-switch::before { transition: none; } }

/* ---- social sign-in (Google / Microsoft; buttons appear only when the backend enables a provider) ---- */
.tp-social-group { display: grid; gap: 10px; margin: 8px 0 14px; }
.tp-social { background: var(--sheet); color: var(--ink); border: 1.5px solid var(--ink); gap: 12px; }
.tp-social:hover { background: var(--paper); }
.tp-social svg { flex: none; }
.tp-or { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.tp-or::before, .tp-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }