/* =====================================================================
   Map Your Edge + AI Value Map: unified brand palette
   Source of truth: mapyouredge/css/brand.css. ai-value-map/css/brand.css is a
   copy; the deploy workflow fails if they differ.
   Master brand: tabithacreighton.com (Seeing Around Corners)
   Rule: core colours come from the master brand. Role colours are
   product-only and appear ONLY where they mark a role toward AI.
   All text colours below meet WCAG AA (4.5:1) on white unless noted.
   Served with a ?v= query: /css/*.css is cached immutable for a year.
   ===================================================================== */

:root {
  /* ---------- 1. Core brand (shared with tabithacreighton.com) ---------- */
  --slate-teal:   #5A7A81;  /* brand colour: links, nav accents (4.6:1 on white) */
  --deep-slate:   #43585F;  /* link hover, dark panels, small link text (7.5:1) */
  --espresso:     #664E30;  /* labels, current nav item, warm accent (7.7:1) */
  --linen:        #DED7CF;  /* brand tile, secondary panels, chips */

  /* ---------- 2. Neutrals (shared with tabithacreighton.com) ---------- */
  --ink:          #1A1A1A;  /* main text, ink buttons, borders */
  --graphite:     #6E6E6E;  /* secondary text, fine print, dividers (5.1:1) */
  --silver:       #C7C7C7;  /* lines and borders ONLY, never text (1.7:1) */
  --mist:         #F2F2F2;  /* secondary background, loading shimmer */
  --paper:        #FFFFFF;  /* page background, content tiles */

  /* ---------- 3. Role colours (Map Your Edge only, unchanged) ---------- */
  /* Fill = backgrounds, bars, badges. Text = words in that role.        */
  --own-fill:       #2443E8;  /* Own the automation */
  --own-text:       #2443E8;  /* readable as is (6.9:1) */
  --own-hover:      #1A33B8;
  --own-tint:       rgba(36, 67, 232, 0.06);  /* selected occupation card */

  --multiply-fill:  #F5B700;  /* Multiply with AI */
  --multiply-text:  #7A5A00;  /* text-safe version */

  --deepen-fill:    #1FB394;  /* Deepen your edge */
  --deepen-text:    #0B6B58;  /* text-safe version */

  /* ---------- 4. States ---------- */
  --ink-hover:      #000000;  /* ink button hover */
  --error-text:     #A1281F;  /* error messages only */
  --error-tint:     rgba(161, 40, 31, 0.08);
  --step-inactive:  var(--graphite); /* was #9A948E, which failed contrast */

  /* ---------- 5. Legacy aliases ----------
     Old Map Your Edge names point at the new master values, so any
     existing var(--stone), var(--brown), var(--muted) keeps working.
     Remove once every reference uses the new names. */
  --stone:  var(--linen);     /* was #DED8D2 */
  --brown:  var(--espresso);  /* was #5B4636 */
  --muted:  var(--graphite);  /* was #5C5752 */
  --own:          var(--own-fill);
  --multiply:     var(--multiply-fill);
  --edge:         var(--deepen-fill);
  --edge-text:    var(--deepen-text);

  --gap: 6px;
}

/* ---------- Typography (matches tabithacreighton.com) ----------
   Futura is a licensed font. Jost (free, Google Fonts) is the
   closest open match and is listed as the fallback. */
:root {
  --font-heading: "Futura", "Futura PT", "Jost", "Century Gothic", sans-serif;
  --font-body:    "Futura Light", "Futura PT Light", "Jost", "Century Gothic", sans-serif;
  --font: var(--font-body);  /* legacy alias */
}

body{font-family:var(--font-body);color:var(--ink);background:var(--paper);}
h1,h2,h3,.q-text,blockquote,.brand-name{font-family:var(--font-heading);}
a{color:var(--slate-teal);}
a:hover{color:var(--deep-slate);}
em{color:var(--slate-teal);font-style:normal;font-weight:500;}

/* ── Header: brand tile + nav tile on ink ─────────────────────────────── */
.brand-header{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);background:var(--ink);padding-bottom:var(--gap);}
.brand-tile{background:var(--linen);padding:24px 32px;display:flex;flex-direction:column;justify-content:center;text-decoration:none;color:var(--ink);}
.brand-name{font-size:28px;font-weight:400;line-height:1.15;}
.brand-sub{font-size:14px;font-weight:300;margin-top:4px;}
.brand-nav{background:var(--paper);padding:18px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 32px;font-size:17px;font-weight:300;}
.brand-nav a{color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;}
.brand-nav a[aria-current="page"]{color:var(--espresso);font-weight:400;}
.brand-nav a:hover{color:var(--slate-teal);text-decoration:underline;}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{font-family:var(--font-body);font-size:15px;font-weight:500;letter-spacing:.02em;text-transform:none;min-height:48px;padding:0 22px;border-radius:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;}
.btn-primary{background:var(--ink);color:var(--paper);border:2px solid var(--ink);}
.btn-primary:hover{background:var(--ink-hover);color:var(--paper);}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;}
.btn-secondary{background:var(--paper);color:var(--ink);border:2px solid var(--ink);}
.btn-secondary:hover{background:var(--linen);color:var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);border:none;text-decoration:underline;padding:0 8px;}
/* Brand call-to-action (e.g. the course). Not a role, so not a role colour. */
.btn-brand,.btn-own{background:var(--deep-slate);color:var(--paper);border:2px solid var(--deep-slate);}
.btn-brand:hover,.btn-own:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* ── Chips and labels ────────────────────────────────────────────────── */
.chip{display:inline-flex;align-self:flex-start;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;background:var(--linen);color:var(--ink);padding:6px 12px;}
.label,.step-label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--espresso);}

/* ── Overrides for the form pages (index, tasks) ─────────────────────── */
.label.gold,.gold{color:var(--espresso);}
h2{font-weight:400;}
.progress-bar div{height:6px;background:var(--silver);}
.progress-bar div.done{background:var(--slate-teal);}
.field input,.field textarea,.q-field textarea{border:2px solid var(--silver);border-radius:0;font-family:var(--font-body);font-size:16px;background:var(--paper);}
.field input:focus,.field textarea:focus,.q-field textarea:focus{border-color:var(--slate-teal);outline:none;}
.field-label{color:var(--graphite);font-weight:500;}
.searching-dot{background:var(--slate-teal);}
.occ-card{border:2px solid var(--silver);border-radius:0;min-height:56px;}
.occ-card:hover{border-color:var(--ink);background:var(--paper);}
.occ-card.selected{border:2px solid var(--own-fill);background:var(--own-tint);box-shadow:inset 6px 0 0 var(--own-fill);}
.occ-title{font-size:17px;font-weight:500;}
.task-check{border:2px solid var(--ink);border-radius:0;}
.task-item.selected .task-check{background:var(--slate-teal);border-color:var(--slate-teal);}
.counter{font-family:var(--font-heading);color:var(--slate-teal);font-weight:500;}
.task-group-label{color:var(--espresso);font-size:13px;font-weight:500;border-bottom:2px solid var(--ink);}
.why-box{border-left:none;border:2px solid var(--ink);background:var(--linen);color:var(--ink);}
.q-text{font-size:22px;font-weight:400;}
.q-hint.good{color:var(--deep-slate);}
.consent-row{border:2px solid var(--silver);background:var(--paper);}
.consent-row input,.marketing-row input{accent-color:var(--slate-teal);}
.sticky-header{border-bottom:2px solid var(--ink);}
.bottom-nav{border-top:2px solid var(--ink);}
.error-box{background:var(--error-tint);border:1px solid var(--error-text);color:var(--error-text);}

@media (max-width:560px){
  .brand-tile,.brand-nav{padding:18px 20px;}
  .brand-nav{justify-content:flex-start;gap:4px 24px;}
}