/* The Wrong Fix - the-wrong-fix.css
 * Tool styles for /things/the-wrong-fix/
 * Uses :root tokens from main.css. Skin driven by html[data-skin] attribute.
 * Office (dark, amber accent) is the primary design register, built and
 * verified first. Workshop (light, sage accent) is the override, following
 * the same token pattern as tell-me-about-a-time.css and voice-trainer.css.
 * All classes prefixed twf-.
 *
 * Readability pass: the original muted-text tokens measured under WCAG AA
 * for normal text (slate-muted on the workshop background comes out to
 * roughly 2.5:1, well short of the 4.5:1 minimum). Office swaps in a
 * brighter local mist tone and workshop swaps to slate-mid (an existing
 * main.css token), both landing at 6:1 or better. The smallest labels
 * (10 to 13px) are bumped a size up throughout.
 */

/* ── Skin tokens ────────────────────────────────────────────────────────────── */

/* Default: Office. Dark elevated surface, light text, amber accent. */
.twf-wrap {
  --twf-surface:      var(--slate);
  --twf-surface-2:    #263530;
  --twf-text:         var(--off-white);
  --twf-muted:        #a3bcb6;
  --twf-border:       rgba(248, 249, 247, 0.12);
  --twf-accent:       var(--amber);
  --twf-accent-bg:    rgba(181, 133, 58, 0.10);
  /* Not a main.css token (--clay is documented in the construct doc but
     was never defined there); a local warm-neutral for the "both" verdict,
     same value in both skins since it needs to sit apart from amber, rose,
     and sage rather than shift with them. */
  --twf-clay:         #c4896a;

  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px 64px;
  background: var(--office-bg);
  color: var(--off-white);
}

/* Workshop (light). Cream ground, white cards, sage accent. */
html[data-skin="workshop"] .twf-wrap {
  --twf-surface:      #ffffff;
  --twf-surface-2:    var(--off-white);
  --twf-text:         var(--slate);
  --twf-muted:        var(--slate-mid);
  --twf-border:       var(--rule);
  --twf-accent:       var(--sage);
  --twf-accent-bg:    rgba(92, 138, 122, 0.10);

  background: var(--off-white);
  color: var(--slate);
}

.thing-stage { justify-content: flex-start; }

/* ── Shell surface overrides ─────────────────────────────────────────────────── */

body.skin-office .thing-shell,
body.skin-office .thing-shell .footer { background: var(--office-bg); }

html[data-skin="workshop"] .thing-shell {
  background: var(--off-white);
  color: var(--slate);
}

html[data-skin="workshop"] .thing-shell .footer { background: var(--off-white); }

html[data-skin="workshop"] .nav          { background: var(--off-white); }
html[data-skin="workshop"] .nav-wordmark { color: var(--slate); }
html[data-skin="workshop"] .nav-back     { color: var(--slate-mid); }
html[data-skin="workshop"] .nav-back:hover { color: var(--slate); }

.nav .toggle-label--left  { color: #a3bcb6; }
.nav .toggle-label--right { color: var(--amber); }
html[data-skin="workshop"] .nav .toggle-label--left  { color: var(--sage); }
html[data-skin="workshop"] .nav .toggle-label--right { color: var(--slate-mid); }
.nav .toggle-thumb { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

/* Sign in plus the full-word skin toggle labels clip the nav at the
   390px standing minimum viewport. The toggle track and thumb alone
   still show which skin is active (position and colour), so only the
   words drop, keeping sign in visible everywhere. */
@media (max-width: 420px) {
  .nav--thing .toggle-label { display: none; }
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.twf-header {
  text-align: center;
  padding: 20px 0 12px;
}

.twf-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--twf-text);
  margin: 0 0 6px;
}

.twf-step-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--twf-muted);
  margin: 0;
  min-height: 14px;
}

/* ── Screens ────────────────────────────────────────────────────────────────── */

.twf-screen { padding-top: 8px; }

/* ── Fork screen intro: what you get, before the first question ────────────── */

.twf-intro {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--twf-border);
}

.twf-intro-lead {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--twf-text);
  line-height: 1.5;
  margin: 0 0 16px;
}

.twf-intro-body {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--twf-muted);
  line-height: 1.65;
  margin: 0 0 12px;
}

.twf-intro-body:last-child { margin-bottom: 0; }

.twf-q-text {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--twf-text);
  line-height: 1.25;
  margin: 0 0 10px;
}

.twf-q-sub {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--twf-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

.twf-framing {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--twf-muted);
  line-height: 1.6;
  border-left: 2px solid var(--twf-border);
  padding-left: 14px;
  margin: 0 0 28px;
}

.twf-back-btn {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--twf-muted);
  cursor: pointer;
  padding: 0;
  margin-bottom: 18px;
  transition: color 0.15s;
}

.twf-back-btn:hover { color: var(--twf-text); }

/* ── Fork picker ────────────────────────────────────────────────────────────── */

.twf-fork-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 560px) {
  .twf-fork-options { grid-template-columns: 1fr 1fr; }
}

.twf-fork-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--twf-surface-2);
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 18px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.twf-fork-option:hover  { border-color: var(--twf-accent); }
.twf-fork-option.is-selected {
  border-color: var(--twf-accent);
  background: var(--twf-accent-bg);
}

.twf-fork-icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.twf-fork-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--twf-accent);
}

/* Rings scale from a small solo mark up to a wide enterprise mark, opacity
   fading outward so the outermost ring reads as context, not focus. */
.twf-fork-icon--1 .twf-fork-ring { width: 14px; height: 14px; opacity: 0.9; }

.twf-fork-icon--2 .twf-fork-ring:nth-child(1) { width: 26px; height: 26px; opacity: 0.9; }
.twf-fork-icon--2 .twf-fork-ring:nth-child(2) { width: 14px; height: 14px; opacity: 0.55; }

.twf-fork-icon--3 .twf-fork-ring:nth-child(1) { width: 40px; height: 40px; opacity: 0.4; }
.twf-fork-icon--3 .twf-fork-ring:nth-child(2) { width: 26px; height: 26px; opacity: 0.9; }
.twf-fork-icon--3 .twf-fork-ring:nth-child(3) { width: 12px; height: 12px; opacity: 0.55; }

.twf-fork-icon--4 .twf-fork-ring:nth-child(1) { width: 40px; height: 40px; opacity: 0.25; }
.twf-fork-icon--4 .twf-fork-ring:nth-child(2) { width: 28px; height: 28px; opacity: 0.55; }
.twf-fork-icon--4 .twf-fork-ring:nth-child(3) { width: 16px; height: 16px; opacity: 0.9; }
.twf-fork-icon--4 .twf-fork-ring:nth-child(4) { width: 6px;  height: 6px;  opacity: 0; }

.twf-fork-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rose);
}

.twf-fork-label {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--twf-accent);
}

.twf-fork-desc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--twf-muted);
  line-height: 1.5;
}

/* ── Options (questions) ───────────────────────────────────────────────────── */

.twf-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.twf-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--twf-surface-2);
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.twf-option:hover { border-color: var(--twf-accent); }
.twf-option.is-selected {
  border-color: var(--twf-accent);
  background: var(--twf-accent-bg);
}

.twf-option-letter {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--twf-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--twf-muted);
}

.twf-option.is-selected .twf-option-letter {
  border-color: var(--twf-accent);
  color: var(--twf-accent);
}

.twf-option-body { flex: 1; }

.twf-option-label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--twf-text);
  line-height: 1.45;
}

.twf-option-detail {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--twf-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Reflection ─────────────────────────────────────────────────────────────── */

.twf-reflection {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
}

.twf-reflection-text {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--twf-text);
  line-height: 1.5;
  max-width: 460px;
}

.twf-reflection-note {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--twf-muted);
}

/* ── Result: header ─────────────────────────────────────────────────────────── */

.twf-result-header { margin-bottom: 24px; }

.twf-result-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--twf-muted);
  margin: 0 0 10px;
}

.twf-result-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.twf-result-badge--healthy   { background: rgba(92, 138, 122, 0.16);  color: var(--sage); }
.twf-result-badge--process   { background: rgba(181, 133, 58, 0.16); color: var(--amber); }
.twf-result-badge--behaviour { background: rgba(181, 110, 110, 0.16); color: var(--rose); }
.twf-result-badge--both      { background: rgba(196, 137, 106, 0.18); color: var(--twf-clay); }

.twf-result-headline {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--twf-text);
  line-height: 1.2;
  margin: 0 0 14px;
}

.twf-result-summary {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--twf-text);
  line-height: 1.7;
  margin: 0 0 16px;
}

.twf-result-pattern {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--twf-text);
  line-height: 1.7;
  background: var(--twf-surface-2);
  border-left: 2px solid var(--twf-accent);
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 16px;
}

.twf-result-pattern strong { color: var(--twf-accent); font-weight: 500; }

.twf-result-subtext {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--twf-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Result: breakdown ──────────────────────────────────────────────────────── */

.twf-result-breakdown {
  background: var(--twf-surface-2);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 24px;
}

.twf-breakdown-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--twf-muted);
  margin: 0 0 12px;
}

.twf-breakdown-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--twf-text);
  line-height: 1.5;
  padding: 8px 0;
  border-top: 1px solid var(--twf-border);
}

.twf-breakdown-item:first-child { border-top: none; padding-top: 0; }

.twf-breakdown-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
}

.twf-breakdown-dot--process   { background: var(--amber); }
.twf-breakdown-dot--behaviour { background: var(--rose); }
.twf-breakdown-dot--both      { background: var(--twf-clay); }

/* ── Personalized read ──────────────────────────────────────────────────────── */

.twf-personal-read {
  background: var(--twf-accent-bg);
  border: 1px solid var(--twf-accent);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}

.twf-personal-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--twf-accent);
  margin: 0 0 12px;
}

.twf-personal-loading,
.twf-personal-error {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--twf-muted);
  margin: 0;
}

.twf-personal-p {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--twf-text);
  line-height: 1.7;
  margin: 0 0 14px;
}

.twf-personal-p:last-child { margin-bottom: 0; }

.twf-personal-retry {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--twf-accent);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 8px;
}

/* ── Deeper read ────────────────────────────────────────────────────────────── */

.twf-read { margin-bottom: 20px; }

.twf-read-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--twf-accent);
  margin: 0 0 8px;
}

.twf-read-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--twf-text);
  line-height: 1.25;
  margin: 0 0 12px;
}

.twf-read-intro {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--twf-text);
  line-height: 1.7;
  margin: 0 0 8px;
}

.twf-read-body { margin-top: 18px; }

.twf-read-h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--twf-text);
  line-height: 1.3;
  margin: 28px 0 12px;
}

.twf-read-h2:first-child { margin-top: 0; }

.twf-read-p {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--twf-text);
  line-height: 1.75;
  margin: 0 0 14px;
}

.twf-read-p strong { color: var(--twf-accent); font-weight: 500; }

.twf-read-pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--twf-text);
  line-height: 1.5;
  border-left: 2px solid var(--twf-accent);
  padding: 2px 0 2px 16px;
  margin: 22px 0;
}

.twf-read-closing {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  color: var(--twf-muted);
  line-height: 1.7;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--twf-border);
}

/* ── Account gate ───────────────────────────────────────────────────────────── */

.twf-read-gate {
  margin-top: 18px;
  background: var(--twf-surface-2);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
}

.twf-gate-heading {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--twf-text);
  margin: 0 0 10px;
}

.twf-gate-body {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--twf-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}

.twf-gate-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.twf-gate-btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.twf-gate-btn--primary {
  background: var(--twf-accent);
  color: var(--slate);
  border: none;
}

.twf-gate-btn--secondary {
  background: transparent;
  color: var(--twf-text);
  border: 1px solid var(--twf-border);
}

.twf-gate-btn:hover { opacity: 0.82; }

/* ── Retake ─────────────────────────────────────────────────────────────────── */

.twf-retake {
  text-align: center;
  margin: 20px 0 8px;
}

.twf-retake-link {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--twf-muted);
  text-decoration: underline;
  cursor: pointer;
}

.twf-retake-link:hover { color: var(--twf-text); }

/* ── Feedback widget: hidden until a verdict renders ───────────────────────── */

#tool-feedback { display: none; }

/* ── Disclosure panel ───────────────────────────────────────────────────────── */

.twf-disclosure { margin: 20px 0; }

.twf-disclosure-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--twf-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.twf-disclosure-trigger:hover { color: var(--twf-text); }

.twf-disclosure-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.15s;
}

.twf-disclosure-arrow.is-open { transform: rotate(90deg); }

.twf-disclosure-panel {
  margin-top: 14px;
  padding: 16px;
  background: var(--twf-surface-2);
  border-radius: 8px;
}

.twf-disclosure-hdr {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--twf-accent);
  margin: 16px 0 8px;
}

.twf-disclosure-hdr:first-child { margin-top: 0; }

.twf-disclosure-body p {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--twf-muted);
  line-height: 1.6;
  margin: 0 0 10px;
}

.twf-disclosure-body p:last-child { margin-bottom: 0; }

.twf-scrub-area { margin-top: 18px; }

.twf-scrub-btn {
  background: none;
  border: 1px solid var(--rose);
  color: var(--rose);
  font-family: var(--sans);
  font-size: 13px;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}

.twf-scrub-confirm-msg {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--twf-text);
  line-height: 1.5;
  margin: 0 0 10px;
}

.twf-scrub-confirm-btns { display: flex; gap: 10px; }

.twf-scrub-confirm-yes {
  background: var(--rose);
  color: var(--white);
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}

.twf-scrub-cancel-btn {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--twf-muted);
  cursor: pointer;
}

.twf-scrub-done {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--sage);
}

/* ── Footer rule ────────────────────────────────────────────────────────────── */

.twf-rule {
  border: none;
  border-top: 1px solid var(--twf-border);
  margin: 24px 0 16px;
}

.twf-credit {
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
}

.twf-credit a {
  color: var(--twf-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--twf-border);
}

.twf-credit a:hover { color: var(--twf-text); }