/* ═══════════════════════════════════════════════════════════════════
   TWF Onboarding Wizard - premium content typography (C473)
   M191 (2026-06-09) - pairs with refreshed step content. Chrome (.twf-ob-card,
   .twf-ob-header, .twf-ob-progress, .twf-ob-footer) is in twf-styles-surface.css.
   This file styles the BODY content per step (welcome / profile / goals /
   positions / policies / tour).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Welcome step ─────────────────────────────────────────────── */
.twf-ob-welcome {
  text-align: center;
  padding: 8px 0 4px;
  max-width: 480px;
  margin: 0 auto;
}
.twf-ob-welcome-shield {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
}
.twf-ob-welcome-shield img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 16px rgba(201, 168, 76, .28));
}
.twf-ob-welcome-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8A7530;
  font-weight: 700;
  margin-bottom: 8px;
}
.twf-ob-welcome-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: #0C1220;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 16px;
}
.twf-ob-welcome-body {
  font-size: 15px;
  color: #2a2a2a;
  line-height: 1.65;
  margin: 0 0 24px;
}
.twf-ob-welcome-body strong { color: #0C1220; font-weight: 700; }

.twf-ob-welcome-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 28px;
  padding: 20px 14px;
  background: linear-gradient(135deg, rgba(12, 18, 32, .025), rgba(201, 168, 76, .05));
  border: 1px solid rgba(201, 168, 76, .18);
  border-radius: 14px;
}
.twf-ob-stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: #0C1220;
  line-height: 1;
}
.twf-ob-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #6b7280;
  margin-top: 4px;
  font-weight: 600;
}

/* ── Shared step elements ─────────────────────────────────────── */
.twf-ob-step {
  padding: 8px 0;
}
.twf-ob-step-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8A7530;
  font-weight: 700;
  margin-bottom: 8px;
}
.twf-ob-step-help {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin: 0 0 20px;
}
.twf-ob-step-help strong { color: #0C1220; font-weight: 700; }

/* Form fields */
.twf-ob-field {
  margin-bottom: 16px;
}
.twf-ob-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0C1220;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.twf-ob-label-sub {
  font-weight: 400;
  color: #6b7280;
  font-size: 11px;
  letter-spacing: 0;
}
.twf-ob-input,
.twf-ob-textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #0C1220;
  background: #fff;
  border: 1.5px solid rgba(12, 18, 32, .12);
  border-radius: 10px;
  transition: all .18s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.twf-ob-textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.55;
}
.twf-ob-input::placeholder,
.twf-ob-textarea::placeholder {
  color: #9ca3af;
  font-style: italic;
}
.twf-ob-input:focus,
.twf-ob-textarea:focus {
  outline: none;
  border-color: #C9A84C;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .15);
  background: var(--pt-canvas);
}

/* Inline checkbox row (goals captain interest) */
.twf-ob-checkrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(201, 168, 76, .04);
  border: 1px solid rgba(201, 168, 76, .20);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  cursor: pointer;
  transition: all .18s ease;
  color: #2a2a2a;
}
.twf-ob-checkrow:hover {
  background: rgba(201, 168, 76, .08);
  border-color: rgba(201, 168, 76, .35);
}
.twf-ob-checkrow input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #C9A84C;
}
.twf-ob-checkrow strong { color: #0C1220; font-weight: 700; }

/* ── Policy cards (policies step) ─────────────────────────────── */
.twf-ob-policy-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.twf-ob-policy-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid rgba(12, 18, 32, .10);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.twf-ob-policy-card:hover {
  border-color: rgba(201, 168, 76, .35);
  background: rgba(201, 168, 76, .03);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(12, 18, 32, .05);
}
.twf-ob-policy-card input[type="checkbox"] {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #C9A84C;
  cursor: pointer;
}
.twf-ob-policy-card input[type="checkbox"]:checked + div strong {
  color: #047857;
}
.twf-ob-policy-card:has(input:checked) {
  background: linear-gradient(135deg, rgba(16, 185, 129, .04), rgba(16, 185, 129, .01));
  border-color: rgba(16, 185, 129, .35);
}
.twf-ob-policy-card > div {
  flex: 1;
  min-width: 0;
}
.twf-ob-policy-card strong {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0C1220;
  margin-bottom: 4px;
  letter-spacing: -.005em;
}
.twf-ob-policy-sub {
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.5;
}

/* ── Tour step ────────────────────────────────────────────────── */
.twf-ob-tour {
  text-align: center;
  padding: 12px 0 4px;
  max-width: 380px;
  margin: 0 auto;
}
.twf-ob-tour-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201, 168, 76, .15), rgba(201, 168, 76, .06));
  border: 1px solid rgba(201, 168, 76, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9A84C;
}
.twf-ob-tour-icon svg {
  width: 36px;
  height: 36px;
}
.twf-ob-tour-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: #0C1220;
  margin: 0 0 12px;
  letter-spacing: -.01em;
  line-height: 1.2;
}

/* ── CTAs ─────────────────────────────────────────────────────── */
.twf-ob-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  /* 2026-10-07: the one primary (navy). It was a gold gradient: gold is
     the brand's colour for the shield and for rank, not for press-me. */
  background: var(--action-primary);
  color: var(--action-primary-fg);
  border: none;
  border-radius: var(--control-radius);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17, 29, 59, .10), 0 6px 16px -8px rgba(17, 29, 59, .45);
  transition: background-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease-out), box-shadow var(--motion-base) var(--motion-ease-out);
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.twf-ob-cta-primary:hover { background: var(--action-primary-hover); }
.twf-ob-cta-primary:active {
  background: var(--action-primary-pressed);
  transform: scale(var(--press-scale));
  box-shadow: 0 1px 2px rgba(17, 29, 59, .12);
}
.twf-ob-cta-large {
  padding: 16px 40px;
  font-size: 15px;
  min-height: 52px;
}
.twf-ob-cta-ghost {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all .15s ease;
}
.twf-ob-cta-ghost:hover,
.twf-ob-cta-ghost:focus-visible {
  background: rgba(12, 18, 32, .04);
  color: #0C1220;
  outline: none;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .twf-ob-welcome-title { font-size: 26px; }
  .twf-ob-welcome-stats {
    padding: 14px 10px;
    gap: 8px;
  }
  .twf-ob-stat-num { font-size: 22px; }
  .twf-ob-stat-label { font-size: 9.5px; }
  .twf-ob-tour-title { font-size: 22px; }
  .twf-ob-cta-primary,
  .twf-ob-cta-large {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
  }
  .twf-ob-policy-card {
    padding: 14px;
    gap: 12px;
  }
  .twf-ob-policy-card strong { font-size: 14px; }
  .twf-ob-policy-sub { font-size: 12px; }
  /* iOS no-zoom inputs */
  .twf-ob-input,
  .twf-ob-textarea {
    font-size: 16px;
  }
}

/* 2026-08-21 design phase 1: tabular numerals, declared in the last-loaded
   sheet because an earlier body font shorthand resets font-variant. Every
   digit the same width; columns of hours and times align. */
html, body, input, button, table { font-variant-numeric: tabular-nums !important; }

/* ── ORIENTATION, CONTACT DETAILS, CALL-OUT, REPORT (2026-10-08, package O) ──
   One shell for the required orientation, the contact details gate, the
   call-out warning and the completion report (twf-orientation.js), on the
   tokens and the First Days type: DM Sans, with Playfair for the headings
   and the counter. The shield and ONE counter in the header, a segmented
   bar, the screen sliding in (still under reduced motion), and the footer
   pinned in the thumb zone over the safe area. One primary per screen, the
   navy pattern button; gold is the brand and never "press me". The wait
   before Continue is a ring filling on the primary, so it reads as nearly
   ready rather than broken. Every control is 44px or more. */
.twf-orientation{position:fixed;inset:0;z-index:2147483000;background:var(--pt-canvas);color:var(--pt-ink);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(14px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));box-sizing:border-box;font-family:var(--font-body);-webkit-font-smoothing:antialiased}
/* the shell's own footer carries the safe area, so the host stops at the edge */
.twf-orientation.twf-or-host{padding-bottom:0}
/* the report sits under the contact sheet its person chips open (21999); it
   has no footer, so the host keeps the safe area under its last rows */
.twf-orientation.is-report{z-index:20000;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.twf-orientation *{box-sizing:border-box}
.twf-orientation-card{max-width:520px;min-height:100%;margin:0 auto;display:flex;flex-direction:column;min-width:0}
.twf-orientation h1{font-family:var(--font-display);font-size:clamp(28px,7.6vw,36px);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0;color:var(--pt-ink)}
.twf-orientation h2{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.25;margin:0;color:var(--pt-ink)}
.twf-orientation p{margin:0;line-height:1.55;font-size:16px}
.twf-orientation button{font-family:var(--font-body)}
.twf-orientation :focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
/* Headings take focus for screen readers (tabindex -1); that is not a reason
   to draw a box around them. */
.twf-orientation [tabindex="-1"]:focus{outline:none !important;box-shadow:none !important}

/* the header: the shield, a kicker, the one counter, a close where there is one */
.twf-or-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.twf-or-brand{display:flex;align-items:center;gap:12px;min-width:0}
.twf-or-mark{width:30px;height:36px;flex-shrink:0;object-fit:contain}
.twf-or-brand-w{display:flex;flex-direction:column;gap:1px;min-width:0}
.twf-or-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pt-faint)}
.twf-or-count{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.2;color:var(--pt-ink)}
.twf-or-x{flex-shrink:0;width:44px;height:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--radius-pill);background:var(--surface-1);color:var(--pt-ink);box-shadow:var(--elev-1);cursor:pointer}
.twf-or-x:active{background:var(--surface-2)}

/* the bar: one segment a screen, gold behind, navy for this one */
.twf-or-bar{display:flex;gap:4px;margin:14px 0 2px}
.twf-or-bar span{flex:1 1 0;height:4px;border-radius:2px;background:var(--surface-2);transition:background-color var(--motion-base) var(--motion-ease)}
.twf-or-bar .is-done{background:var(--pt-gold-stripe)}
.twf-or-bar .is-now{background:var(--action-primary)}

/* the screen */
.twf-or-body{flex:1 0 auto;display:flex;flex-direction:column;gap:18px;padding:22px 0 8px;min-width:0}
.twf-or-screen{display:flex;flex-direction:column;gap:14px;min-width:0}
.twf-or-screen.is-in-fwd{animation:twfOrInFwd var(--motion-slow) var(--motion-ease-out) both}
.twf-or-screen.is-in-back{animation:twfOrInBack var(--motion-slow) var(--motion-ease-out) both}
@keyframes twfOrInFwd{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes twfOrInBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.twf-or-art{width:60px;height:60px;flex-shrink:0;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--surface-1);color:var(--pt-gold);box-shadow:inset 0 0 0 1px rgba(201,168,76,.38),var(--elev-1)}
.twf-or-art.is-warn{background:var(--pt-warn-bg);color:var(--pt-warn);box-shadow:none}
.twf-orientation .twf-orientation-focus{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pt-gold);margin:6px 0 -4px}
.twf-orientation .twf-or-lead{font-size:17px;color:var(--pt-ink)}
.twf-orientation .twf-or-fine{font-size:15px;color:var(--pt-mute)}
.twf-orientation .twf-or-loading{padding:48px 0;color:var(--pt-mute)}

/* a screen's steps: navy numbers with the gold figure, on a white card */
.twf-or-steps{list-style:none;margin:0;padding:4px 18px;border-radius:var(--radius-xl);background:var(--surface-1);box-shadow:var(--elev-1)}
.twf-or-steps li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--pt-line);font-size:16px;line-height:1.45}
.twf-or-steps li:last-child{border-bottom:0}
.twf-or-num{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--action-primary);color:var(--pt-gold-stripe);font-size:13px;font-weight:700}
.twf-or-step-x{flex:1 1 0;min-width:0}
.twf-or-steps.is-small{margin:0 0 12px;padding:0 14px;background:var(--pt-canvas);box-shadow:none}
.twf-or-steps.is-small li{font-size:14px;padding:10px 0}

/* the install and alerts panels: this device's steps, and what can be done now */
.twf-or-act{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:var(--radius-xl);background:var(--surface-1);box-shadow:var(--elev-2);min-width:0}
.twf-orientation .twf-or-act-h{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pt-mute)}
.twf-or-act-h .twf-i{display:block;color:var(--pt-gold)}
.twf-or-act-t{display:block;font-size:17px;line-height:1.35}
.twf-orientation .twf-or-act-p{font-size:15px;color:var(--pt-mute)}
.twf-orientation .twf-or-act-note{padding:10px 12px;border-radius:var(--radius-md);background:var(--pt-info-bg);color:var(--pt-ink);font-size:15px}
.twf-orientation .twf-or-how-w .twf-or-act-note{margin-top:10px}
.twf-or-how{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.twf-or-how-row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--pt-line)}
.twf-or-how-row:first-child{padding-top:2px}
.twf-or-how-row:last-child{border-bottom:0;padding-bottom:2px}
.twf-or-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--pt-canvas);color:var(--action-primary)}
.twf-or-ico .twf-i{display:block}
.twf-or-ico.is-turned .twf-i{transform:rotate(90deg)}
.twf-or-ico-n{font-size:15px;font-weight:700}
.twf-or-how-w{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:0;padding-top:1px}
.twf-or-how-t{font-size:16px;font-weight:700;line-height:1.35}
.twf-or-how-s{font-size:14px;line-height:1.45;color:var(--pt-mute)}
.twf-or-how.is-steps .is-now .twf-or-ico{background:var(--action-primary);color:var(--action-primary-fg)}
.twf-or-how .is-done .twf-or-ico{background:var(--pt-ok-bg);color:var(--pt-ok)}
.twf-or-how .is-done .twf-or-how-t{font-weight:600;color:var(--pt-mute)}
.twf-or-how.is-steps .twf-or-how-row:not(.is-now):not(.is-done) .twf-or-how-t{font-weight:600;color:var(--pt-mute)}
.twf-orientation .twf-or-act-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin:10px 0 0;font-size:16px}
.twf-orientation .twf-or-act-alt{width:100%;min-height:48px;margin:8px 0 0}
.twf-orientation .twf-or-later{align-self:flex-start;min-height:44px;padding:0 2px;border:0;background:none;color:var(--pt-mute);font-size:14px;font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:4px}
.twf-orientation .twf-or-later:active{opacity:.7}
.twf-orientation .twf-or-later-note{font-size:15px;color:var(--pt-mute)}
.twf-or-ok{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--radius-lg);background:var(--pt-ok-bg);color:var(--pt-ok)}
.twf-or-ok strong{display:block;font-size:16px;line-height:1.35}
.twf-or-ok > div > span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--pt-ink)}

/* More detail: a chevron that turns, not a "+" */
.twf-or-detail{border-top:1px solid var(--pt-line);border-bottom:1px solid var(--pt-line)}
.twf-or-detail summary{list-style:none;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:15px;font-weight:700;color:var(--pt-ink)}
.twf-or-detail summary::-webkit-details-marker{display:none}
.twf-or-chev{display:flex;color:var(--pt-mute);transition:transform var(--motion-base) var(--motion-ease)}
.twf-or-detail[open] > summary .twf-or-chev{transform:rotate(180deg)}
.twf-orientation .twf-or-detail > p{padding:0 0 16px;font-size:15px;color:var(--pt-mute)}

/* the question: answers are cards, right or wrong is shown on the one chosen */
.twf-orientation fieldset{border:0;padding:0;margin:0;min-width:0}
.twf-orientation legend{padding:0;margin-bottom:12px;font-size:17px;font-weight:700;line-height:1.4}
.twf-orientation input[type=radio],.twf-orientation input[type=checkbox]{width:22px;height:22px;min-height:0;min-width:22px;flex-shrink:0;accent-color:var(--action-primary);margin:1px 0 0;padding:0;background:none;border:0;box-shadow:none}
/* 2026-10-07 (decision V1-onboarding). Under 480px a global rule sets every
   label to display:block !important, which put each radio button and the
   final tick on a line of its own above its words. The answers and the tick
   are rows. */
.twf-orientation fieldset label,.twf-orientation label.twf-orientation-ack{display:flex !important;width:auto}
.twf-orientation fieldset label{align-items:center;gap:12px;min-height:56px;padding:14px 16px;margin:0 0 10px;background:var(--surface-1);border:1.5px solid var(--border-1);border-radius:var(--radius-lg);font-size:16px;line-height:1.4;cursor:pointer;transition:border-color var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease)}
.twf-orientation fieldset label:has(input:checked){border-color:var(--action-primary);box-shadow:inset 0 0 0 1px var(--action-primary)}
.twf-orientation fieldset label.is-right:has(input:checked){border-color:var(--pt-ok-stripe);background:var(--pt-ok-bg);box-shadow:inset 0 0 0 1px var(--pt-ok-stripe)}
.twf-orientation fieldset label.is-wrong:has(input:checked){border-color:var(--pt-late-stripe);background:var(--pt-late-bg);box-shadow:inset 0 0 0 1px var(--pt-late-stripe)}
.twf-or-opt-t{flex:1 1 0;min-width:0}
.twf-or-opt-mark{display:flex;flex-shrink:0}
.is-right .twf-or-opt-mark{color:var(--pt-ok)}
.is-wrong .twf-or-opt-mark{color:var(--pt-late)}
.twf-orientation .twf-or-verdict{font-size:15px;font-weight:700;line-height:1.45}
.twf-orientation .twf-or-verdict:empty{display:none}
.twf-or-verdict.is-right{color:var(--pt-ok)}
.twf-or-verdict.is-wrong{color:var(--pt-late)}
.twf-orientation label.twf-orientation-ack{gap:12px;align-items:flex-start;min-height:56px;margin:0;padding:16px;border-radius:var(--radius-lg);background:var(--surface-1);border:1.5px solid var(--border-1);font-size:16px;font-weight:500;line-height:1.5;cursor:pointer}
.twf-orientation label.twf-orientation-ack:has(input:checked){border-color:var(--action-primary);box-shadow:inset 0 0 0 1px var(--action-primary)}

.twf-orientation .twf-orientation-message{color:var(--pt-late);font-size:15px;font-weight:600}
.twf-orientation .twf-orientation-message.is-note{color:var(--pt-mute);font-weight:500}
.twf-orientation .twf-orientation-message:empty{display:none}

/* Contact TWF and Sign out: quiet, at the end of the screen */
.twf-or-utils{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;padding-top:4px}
.twf-orientation .twf-or-util{min-height:44px;display:inline-flex;align-items:center;padding:0;border:0;background:none;color:var(--pt-mute);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
.twf-orientation .twf-or-util:active{opacity:.7}

/* the footer, pinned in the thumb zone with the safe area under it */
.twf-or-foot{position:sticky;bottom:0;z-index:1;display:flex;gap:10px;align-items:stretch;margin-top:8px;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,rgba(244,246,251,0),var(--pt-canvas) 16px)}
.twf-or-foot:empty{display:none}
.twf-orientation .twf-or-foot button[hidden]{display:none}
.twf-orientation .twf-or-foot .twf-pt-cta{flex:1 1 auto;width:auto;min-height:56px;margin:0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px}
.twf-orientation .twf-or-foot .twf-pt-quiet{flex:0 0 auto;width:auto;min-width:0;min-height:56px;margin:0;padding:0 18px 0 12px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:16px}
.twf-or-foot .twf-i{display:block}
/* the wait: the ring fills as the seconds go, the words sit back a little */
.twf-or-next-t{transition:opacity var(--motion-base) var(--motion-ease)}
.twf-or-go{display:inline-flex}
.twf-or-ring{position:relative;display:none;width:28px;height:28px;flex-shrink:0;align-items:center;justify-content:center}
.twf-or-next.is-waiting .twf-or-ring{display:inline-flex}
.twf-or-next.is-waiting .twf-or-go,.twf-or-next:disabled .twf-or-go{display:none}
.twf-or-next.is-waiting .twf-or-next-t{opacity:.72}
.twf-orientation .twf-or-next.is-waiting{cursor:progress}
.twf-or-ring svg{position:absolute;inset:0;width:28px;height:28px;fill:none;stroke-width:2.5}
.twf-or-ring .trk{stroke:rgba(255,255,255,.24)}
.twf-or-ring .arc{stroke:var(--pt-gold-stripe);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.twf-or-ring-n{position:relative;font-size:12px;font-weight:700;line-height:1}
.twf-or-next.quiet .twf-or-ring .trk{stroke:var(--border-1)}
.twf-or-next.quiet .twf-or-ring .arc{stroke:var(--action-primary)}
.twf-or-next.is-nudge .twf-or-ring{animation:twfOrNudge .45s var(--motion-ease-out)}
@keyframes twfOrNudge{0%,100%{transform:scale(1)}45%{transform:scale(1.2)}}

/* still clocked in: the one door that is never behind these screens */
.twf-orientation-clock{display:grid;gap:10px;padding:14px 16px;border-radius:var(--radius-lg);background:var(--pt-warn-bg);color:var(--pt-ink)}
.twf-orientation .twf-or-clock-h{display:flex;align-items:center;gap:8px;font-size:16px}
.twf-or-clock-h .twf-i{display:block;color:var(--pt-warn)}
.twf-orientation .twf-orientation-clock .twf-pt-cta{justify-self:start;margin:0}
.twf-orientation .twf-orientation-clock p:empty{display:none}

/* the contact details: the pattern field, labels tight on their boxes, state
   and ZIP on one row, the sign-in email a line of text */
.twf-or-fields{display:flex;flex-direction:column;gap:14px;min-width:0}
.twf-orientation .twf-or-label{display:block;margin:0 0 6px;padding:0;min-height:0;font-size:14px;font-weight:700;color:var(--pt-ink)}
.twf-orientation .twf-or-fields .twf-su-in{display:block;width:100%;min-height:52px;margin:0}
.twf-orientation .twf-contact-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.twf-orientation .twf-contact-who{margin:0;font-size:15px;color:var(--pt-mute);overflow-wrap:anywhere}
.twf-contact-who strong{color:var(--pt-ink)}

/* the completion report: the count, who is stuck by screen, then everybody */
.twf-or-report-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.twf-or-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:16px 18px;border-radius:var(--radius-xl);background:var(--surface-1);box-shadow:var(--elev-1)}
.twf-or-sum-n{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--pt-ink)}
.twf-orientation .twf-orientation-report-sum{font-size:15px;font-weight:500;color:var(--pt-mute)}
.twf-or-meter{flex:1 0 100%;width:100%;height:6px;margin-top:8px;-webkit-appearance:none;appearance:none;border:0;border-radius:3px;overflow:hidden;background:var(--surface-2)}
.twf-or-meter::-webkit-progress-bar{background:var(--surface-2)}
.twf-or-meter::-webkit-progress-value{background:var(--pt-gold-stripe)}
.twf-or-meter::-moz-progress-bar{background:var(--pt-gold-stripe)}
.twf-or-stalls{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.twf-orientation .twf-or-sub{font-size:14px;color:var(--pt-mute)}
.twf-or-stall{padding:14px 16px 6px;border-radius:var(--radius-xl);background:var(--surface-1);box-shadow:var(--elev-1)}
.twf-or-stall-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--pt-line)}
.twf-or-stall-w{display:flex;flex-direction:column;gap:2px;min-width:0}
.twf-or-stall-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pt-gold)}
.twf-or-stall-t{font-size:16px;line-height:1.35}
.twf-or-pill{flex-shrink:0;min-width:28px;padding:3px 9px;border-radius:var(--radius-pill);background:var(--pt-warn-bg);color:var(--pt-warn);font-size:13px;font-weight:700;text-align:center}
.twf-or-stall-people{display:flex;flex-direction:column}
.twf-or-stall-row{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:8px 0;border-bottom:1px solid var(--pt-line)}
.twf-or-stall-row:last-child{border-bottom:0}
.twf-or-stall-nm{font-size:15px}
.twf-or-stall-sub{font-size:13px;color:var(--pt-mute)}
.twf-or-list{display:flex;flex-direction:column}
.twf-orientation .twf-orientation-report-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--pt-line);font-size:15px}
.twf-orientation-report-row span:last-child{flex-shrink:0;color:var(--pt-mute);text-align:right}

/* the narrowest phones: Back keeps its word for a screen reader and shows the
   chevron, so the primary keeps its line */
@media (max-width:360px){
  .twf-orientation .twf-or-foot .twf-or-back{padding:0 16px}
  .twf-or-back span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .twf-orientation .twf-or-foot .twf-pt-cta{font-size:16px}
}
@media (min-width:769px){
  .twf-orientation{padding-left:32px;padding-right:32px}
  .twf-or-body{padding-top:30px}
}
@media (prefers-reduced-motion:reduce){
  .twf-or-screen.is-in-fwd,.twf-or-screen.is-in-back,.twf-or-next.is-nudge .twf-or-ring{animation:none}
  .twf-or-ring .arc,.twf-or-chev,.twf-or-bar span,.twf-or-next-t{transition:none}
}
.twf-push-readiness button.is-quiet{background:transparent;color:var(--action-secondary-fg);box-shadow:inset 0 0 0 1.5px var(--action-secondary-border)}
.twf-push-report h3,.twf-push-report summary{font-size:14px;font-weight:700;margin:14px 0 4px;cursor:pointer}
.twf-push-report .twf-push-report-row{margin:0;padding:8px 0;border-bottom:1px solid #e9dfc4}
.twf-push-report .twf-push-report-note{font-size:13px;color:#5f6470;margin-top:14px}
.twf-push-readiness{background:#f6efdc;color:#111d3b;border-radius:16px;padding:16px;margin:0 0 18px;min-width:0;overflow-wrap:anywhere}
.twf-push-readiness strong{display:block;font-size:16px;line-height:1.35}
.twf-push-readiness p{font-size:14px;line-height:1.5;margin:8px 0 12px}
.twf-push-readiness button{display:block;min-height:48px;max-width:100%;border:0;border-radius:var(--control-radius);background:var(--action-primary);color:var(--action-primary-fg);padding:12px 20px;font:700 15px var(--font-body);margin-top:8px;cursor:pointer;transition:background-color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease-out)}
.twf-push-readiness button:active:not(:disabled){transform:scale(var(--press-scale));background:var(--action-primary-pressed)}
.twf-push-readiness button.is-quiet:active:not(:disabled){background:var(--action-secondary-pressed)}
.twf-push-readiness button:disabled{opacity:.55}

/* ── WHAT'S NEW (2026-10-08) ──────────────────────────────────────────
   The release note sheet (twf-whats-new.js): once after an update, from
   Settings > What's new, from the header build chip, and from the update
   banner's "See what changed". A bottom sheet on a phone and a centred card
   above 768px, drawn on the pattern rows (.twf-pt-row, .rail, .twf-pt-sh,
   .twf-pt-cta) so it changes when they do. Above the install nudge (10400)
   and the tour (20000), under orientation and the agreements.
   .twf-wn-c is the content, .twf-wn-card the same node once it is the sheet.
   On a phone the footer stacks like the shared sheet's actions: the primary
   full width, a second action as a quiet line beneath it. */
/* 2026-10-08: the raised sheet, the same as twfSheet (twf-premium.css): a
   frosted dim, the card 8px in from the sides and the bottom with a 30px
   radius, a Playfair heading, the primary a 56px navy gradient and the
   second action a plain line of text under it, at every width. */
.twf-wn{position:fixed;inset:0;z-index:var(--z-sheet);display:flex;align-items:flex-end;justify-content:center;box-sizing:border-box;
  padding:0 8px calc(8px + env(safe-area-inset-bottom,0px))}
.twf-wn-bd{position:absolute;inset:0;background:var(--sheet-dim);-webkit-backdrop-filter:blur(var(--sheet-blur));backdrop-filter:blur(var(--sheet-blur));opacity:0;transition:opacity .22s ease}
.twf-wn.open .twf-wn-bd{opacity:1}
.twf-wn.closing{pointer-events:none}
.twf-wn-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:calc(100% - 16px - env(safe-area-inset-top,0px));box-sizing:border-box;
  background:var(--surface-1);color:var(--pt-ink);border-radius:30px;box-shadow:var(--sheet-shadow);
  opacity:0;translate:0 28px;transition:translate .28s cubic-bezier(.22,1,.36,1),opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1);outline:none;overflow:hidden}
.twf-wn.open .twf-wn-card{opacity:1;translate:0 0}
/* the card follows the thumb while the top strip is dragged */
.twf-wn.dragging .twf-wn-card{transition:none}
/* the card takes focus when it opens; the app-wide focus ring is for controls */
.twf-wn-card:focus,.twf-wn-card:focus-visible{outline:none !important;box-shadow:var(--sheet-shadow) !important}
.twf-wn-c{font-family:var(--font-body,'DM Sans',system-ui,sans-serif);color:var(--pt-ink)}
/* grab and close sit in a strip of their own, so nothing scrolls under the
   close; on a phone the whole strip is the drag handle (twf-whats-new.js) */
.twf-wn-top{position:relative;flex-shrink:0;height:44px;touch-action:none;cursor:grab}
.twf-wn.dragging .twf-wn-top{cursor:grabbing}
.twf-wn-grab{position:absolute;top:10px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--sheet-grab)}
.twf-wn-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 22px 8px}
.twf-wn-foot{flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:14px 22px 22px;background:var(--surface-1)}
.twf-wn-foot .twf-pt-cta{flex:none;width:100%;margin-top:0;min-height:var(--control-h-lg);padding:12px;border:0;border-radius:18px;
  background:var(--sheet-cta);color:var(--action-primary-fg);font-size:17px;font-weight:700;box-shadow:var(--sheet-cta-shadow)}
.twf-wn-foot .twf-pt-cta.quiet{min-height:var(--control-h-md);border-radius:16px;background:transparent;color:var(--pt-ink);font-size:16px;font-weight:600;box-shadow:none}

.twf-wn-eyebrow{display:flex;align-items:center;margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pt-gold)}
.twf-wn-date{display:inline-flex;align-items:center;color:var(--pt-faint);letter-spacing:.06em}
.twf-wn-date:not(:empty)::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--pt-gold-stripe);margin:0 8px}
.twf-wn-h{margin:0 0 6px;font-family:var(--font-display,'Playfair Display',Georgia,serif);font-size:24px;font-weight:700;line-height:1.2;color:var(--pt-ink)}
.twf-wn-sum{margin:0 0 16px;font-size:15px;line-height:1.45;color:var(--sheet-body)}
/* the gold stripe is a bar of its own, inset from the corners, so the
   rounded box does not bend it */
.twf-wn-why{position:relative;margin:0 0 6px;padding:14px 16px 14px 19px;border-radius:var(--radius-lg);background:rgba(201,168,76,.10)}
.twf-wn-why::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--pt-gold-stripe)}
.twf-wn-why-k{display:block;margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pt-gold)}
.twf-wn-why p{margin:0;font-size:15px;line-height:1.5;color:var(--pt-ink)}
.twf-wn-c .twf-wn-sh{align-items:center;margin:20px 0 0}
.twf-wn-c .twf-wn-sh .a{min-height:0;padding:2px 9px;border-radius:var(--radius-pill);background:var(--pt-canvas);color:var(--pt-mute);font-size:12px;cursor:default}
.twf-wn-list{list-style:none;margin:0;padding:0}
.twf-wn-c .twf-wn-item{align-items:flex-start;padding:12px 0}
.twf-wn-c .twf-wn-item .l1,.twf-wn-c .twf-wn-hrow .l1{font-size:15px;line-height:1.35}
.twf-wn-c .twf-wn-item .l2,.twf-wn-c .twf-wn-hrow .l2{font-size:13px;line-height:1.45;color:var(--pt-mute);margin-top:3px}
.twf-wn-show,.twf-wn-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;border:0;background:none;
  color:var(--pt-info);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.twf-wn-show{margin:0 0 -10px}
.twf-wn-back{margin:-8px 0 2px}
.twf-wn-show:active,.twf-wn-back:active,.twf-wn-c .twf-wn-hrow:active{opacity:.7}
.twf-wn-hist{margin-top:4px}
.twf-wn-c .twf-wn-hrow{align-items:flex-start}
.twf-wn-c .twf-wn-hrow .l2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.twf-wn-c .twf-wn-hrow .chev{align-self:center}
.twf-wn-empty{margin:16px 0;font-size:15px;line-height:1.5;color:var(--pt-mute)}
.twf-wn-build{margin:18px 0 6px;font-size:12px;color:var(--pt-faint)}
@media (min-width:769px){
  .twf-wn{align-items:center;padding:24px}
  .twf-wn-card{max-width:480px;max-height:84vh}
  .twf-wn-grab{display:none}
  .twf-wn-top{touch-action:auto;cursor:default}
}
@media (prefers-reduced-motion:reduce){
  .twf-wn-bd,.twf-wn-card{transition:none}
  .twf-wn-card{translate:none}
}
/* the header build chip is a door to it: a tint under a pointer, a press
   under a thumb. A tint by inset shadow, because the chip's own background is
   an inline style that a stylesheet rule cannot outrank without !important. */
[data-twf-action="whats-new"][role="button"]{cursor:pointer;transition:box-shadow .15s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
@media (hover:hover){[data-twf-action="whats-new"][role="button"]:hover{box-shadow:inset 0 0 0 99px rgba(201,168,76,.14)}}
[data-twf-action="whats-new"][role="button"]:active{box-shadow:inset 0 0 0 99px rgba(201,168,76,.26);transform:scale(.96)}
/* the update banner, when the waiting build carries a note: the name and the
   note's title are one tap target; Update and the close stay as they were */
#twfBuildBanner .twf-bb-more{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
  padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
#twfBuildBanner .twf-bb-more .twf-bb-txt{flex:none;max-width:100%}
#twfBuildBanner .twf-bb-sub{display:flex;align-items:baseline;gap:8px;max-width:100%;font-size:13px;font-weight:500;color:rgba(255,255,255,.78)}
#twfBuildBanner .twf-bb-head{display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:520px){#twfBuildBanner .twf-bb-head{display:block}}
#twfBuildBanner .twf-bb-see{flex-shrink:0;color:var(--gold);font-weight:700}
#twfBuildBanner .twf-bb-more:active{opacity:.8}
/* ── THE TOUR (2026-10-08, twf-tour.js) ────────────────────────────────
   One layer at --z-spotlight (20000): over the bar, the header and the
   toasts, under every sheet (--z-sheet), orientation and the agreements,
   none of which it ever starts over. The dim is an SVG mask with a rounded
   cut-out over the target, the gold ring sits on the cut-out with a halo
   round it, and the card is a dialog: above a target in the bottom half of
   the screen (the bar), below one in the top half. The whole layer takes
   the taps, so nothing under it is pressed mid-tour; so a move that takes a
   while (.is-slow) brings the card back with Skip, the way out on a phone.
   The card is TourDark (approved): a navy gradient with a gold hairline,
   TourLight's illustration panel at its top (.ta-* parts, in the gold tint:
   the light panel reads as a picture on the dark card, where a navy one
   sank into it), a gold "Step N of M" with Skip tour beside it, a segmented
   gold bar, a Playfair title, Back outlined and Next in gold. Its "N of M"
   is .sr-only; the eyebrow and the bar are the counter. The layer, the dim,
   the glow and every colour are tokens (twf-premium.css).
   With reduced motion (or .is-still) nothing pulses or slides. */
.twf-tour{position:fixed;inset:0;z-index:var(--z-spotlight);pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease}
.twf-tour.is-leaving{opacity:0;pointer-events:none}
.twf-tour-dim{position:absolute;inset:0;width:100%;height:100%;display:block}
.twf-tour-scrim{fill:var(--pt-scrim)}
.twf-tour-ring{position:absolute;box-sizing:border-box;border:2.5px solid var(--pt-gold-hi);border-radius:16px;pointer-events:none;
  outline:6px solid var(--tour-ring-halo);outline-offset:3px;
  box-shadow:0 0 0 4px var(--pt-gold-glow),0 0 22px var(--pt-gold-halo);
  animation:twfTourRing 2s ease-in-out infinite;
  transition:left var(--motion-base,220ms) var(--motion-ease-out,ease),top var(--motion-base,220ms) var(--motion-ease-out,ease),
    width var(--motion-base,220ms) var(--motion-ease-out,ease),height var(--motion-base,220ms) var(--motion-ease-out,ease),opacity .15s ease}
@keyframes twfTourRing{0%,100%{box-shadow:0 0 0 4px var(--pt-gold-glow),0 0 22px var(--pt-gold-halo)}50%{box-shadow:0 0 0 7px var(--pt-gold-glow),0 0 30px var(--pt-gold-glow)}}
.twf-tour-card{position:absolute;top:0;left:0;box-sizing:border-box;width:min(360px,calc(100vw - 32px));padding:22px;border-radius:28px;
  background:var(--tour-card);color:var(--action-primary-fg);box-shadow:var(--tour-card-shadow);outline:none;font-family:var(--font-body,'DM Sans',system-ui,sans-serif);
  transition:opacity var(--motion-fast,160ms) var(--motion-ease,ease),transform var(--motion-base,220ms) var(--motion-ease-out,ease)}
.twf-tour-card:focus,.twf-tour-card:focus-visible{outline:none !important;box-shadow:var(--tour-card-shadow) !important}
.twf-tour-card button:focus-visible{outline-color:var(--action-primary-fg)}
.twf-tour-top{display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-top:-8px}
.twf-tour-step{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pt-gold-hi)}
.twf-tour-skip{min-height:44px;min-width:44px;padding:0 6px;margin-right:-6px;border:0;background:transparent;color:var(--tour-mute);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.twf-tour-bar{display:flex;gap:6px;margin-top:2px}
.twf-tour-seg{flex:1;height:4px;border-radius:2px;background:var(--tour-track);transition:background-color var(--motion-base,220ms) var(--motion-ease,ease)}
.twf-tour-seg.is-done,.twf-tour-seg.is-on{background:var(--pt-gold-hi)}
.twf-tour-t{margin:18px 0 0;font-family:var(--font-display,'Playfair Display',Georgia,serif);font-size:26px;font-weight:700;line-height:1.2;letter-spacing:0;color:var(--action-primary-fg)}
.twf-tour-p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--tour-text)}
.twf-tour-acts{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:20px}
.twf-tour-acts.is-first{grid-template-columns:1fr}
.twf-tour-card .twf-tour-acts .twf-pt-quiet{min-height:52px;width:100%;margin:0;padding:0 12px;border:1px solid var(--tour-line);border-radius:16px;background:transparent;color:var(--action-primary-fg);font-size:16px;font-weight:600}
.twf-tour-card .twf-tour-acts .twf-pt-cta{min-height:52px;width:100%;margin:0;padding:0 12px;border:0;border-radius:16px;background:var(--tour-go);color:var(--pt-night);font-size:16px;font-weight:700;box-shadow:var(--tour-go-shadow)}
/* the illustration: a 120px gold-tint panel, framed 8px inside the card */
.twf-tour-art{position:relative;height:120px;margin:-14px -14px 14px;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--tour-art);overflow:hidden}
.twf-tour-art span{display:block;box-sizing:border-box}
/* no room on either side of the target: the card drops its picture */
.twf-tour-card.is-compact .twf-tour-art{display:none}
.twf-tour-art .ta-card{display:flex;flex-direction:column;width:92px;height:64px;padding:10px;border-radius:14px;background:var(--surface-1);box-shadow:var(--tour-art-shadow);flex:none}
.twf-tour-art .ta-l1{height:8px;width:60%;border-radius:4px;background:var(--pt-night)}
.twf-tour-art .ta-l2{height:6px;width:85%;border-radius:3px;background:var(--sheet-grab);margin-top:6px}
.twf-tour-art .ta-l2.is-short{width:50%}
.twf-tour-art .ta-pill{height:14px;width:50%;border-radius:6px;background:var(--pt-gold-stripe);margin-top:8px}
.twf-tour-art .ta-arrow{display:flex;color:var(--pt-gold-deep);flex:none}
.twf-tour-art .ta-arrow svg{width:24px;height:24px}
.twf-tour-art .ta-disc{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--pt-night);color:var(--pt-gold-hi);box-shadow:var(--sheet-tile-shadow);flex:none}
.twf-tour-art .ta-disc svg{width:24px;height:24px}
.twf-tour-art .ta-disc.has-dot::after{content:'';position:absolute;top:5px;right:5px;width:13px;height:13px;box-sizing:border-box;border-radius:50%;background:var(--pt-late-stripe);border:2px solid var(--pt-night)}
.twf-tour-art .ta-row{display:flex;gap:6px;margin-top:8px}
.twf-tour-art .ta-chip{height:14px;flex:1;border-radius:6px;background:var(--sheet-grab)}
.twf-tour-art .ta-chip.is-gold{background:var(--pt-gold-stripe)}
.twf-tour-art .ta-card.is-cal{padding:0;overflow:hidden}
.twf-tour-art .ta-cal-h{height:14px;background:var(--pt-night)}
.twf-tour-art .ta-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px}
.twf-tour-art .ta-cell{height:9px;border-radius:2px;background:var(--sheet-grab)}
.twf-tour-art .ta-cell.is-on{background:var(--pt-gold-stripe)}
.twf-tour-art .ta-meter{height:10px;border-radius:5px;background:var(--sheet-grab);margin-top:8px;overflow:hidden}
.twf-tour-art .ta-meter-f{height:100%;width:72%;border-radius:5px;background:var(--pt-gold-stripe)}
.twf-tour-art .ta-card.is-chat{gap:5px;padding:9px 10px}
.twf-tour-art .ta-bub{height:12px;width:70%;border-radius:7px 7px 7px 3px;background:var(--sheet-grab)}
.twf-tour-art .ta-bub.is-me{align-self:flex-end;border-radius:7px 7px 3px 7px;background:var(--pt-night)}
.twf-tour-art .ta-bub.is-short{width:46%}
.twf-tour-art .ta-stack{position:relative;width:96px;height:66px;flex:none}
.twf-tour-art .ta-card.is-sm{position:absolute;left:0;top:18px;width:96px;height:46px;padding:9px 10px}
.twf-tour-art .ta-card.is-back{top:0;transform:scale(.88);opacity:.7}
.twf-tour-art .ta-card.is-person{flex-direction:row;align-items:center;gap:8px;width:112px}
.twf-tour-art .ta-col{flex:1;min-width:0}
.twf-tour-art .ta-av{width:28px;height:28px;border-radius:50%;background:var(--pt-night);flex:none}
.twf-tour-art .ta-av.is-gold{background:var(--pt-gold-stripe)}
.twf-tour-art .ta-chk{display:flex;align-items:center;gap:6px}
.twf-tour-art .ta-chk+.ta-chk{margin-top:5px}
.twf-tour-art .ta-chk .ta-l2{flex:1;margin-top:0}
.twf-tour-art .ta-box{width:10px;height:10px;border-radius:3px;border:2px solid var(--sheet-grab);flex:none}
.twf-tour-art .ta-box.is-on{border-color:var(--pt-gold-stripe);background:var(--pt-gold-stripe)}
.twf-tour-art .ta-avs{display:flex;flex:none}
.twf-tour-art .ta-avs .ta-av{width:40px;height:40px;border:3px solid var(--tour-art-edge)}
.twf-tour-art .ta-avs .ta-av+.ta-av{margin-left:-12px}
.twf-tour.is-moving .twf-tour-ring,.twf-tour.is-moving .twf-tour-card{opacity:0;pointer-events:none}
.twf-tour.is-moving .twf-tour-card{transform:translateY(6px)}
.twf-tour.is-moving.is-slow .twf-tour-card{opacity:1;pointer-events:auto;transform:none}
.twf-tour.is-still,.twf-tour.is-still .twf-tour-ring,.twf-tour.is-still .twf-tour-card,.twf-tour.is-still .twf-tour-seg{animation:none;transition:none}
.twf-tour.is-still.is-moving .twf-tour-card{transform:none}
@media (prefers-reduced-motion:reduce){
  .twf-tour,.twf-tour-ring,.twf-tour-card,.twf-tour-seg{animation:none;transition:none}
  .twf-tour.is-moving .twf-tour-card{transform:none}
}

/* the First Days journey steps aside while its tour chapter runs the tour
   (twf-journey.js startTour), and comes back when the tour ends */
.twf-jr-overlay.is-touring{display:none !important}