@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/*
 * main.css - Executive Influence Scorecard shared design system
 * ---------------------------------------------------------------
 * Extracted in Session 2 from the three approved mockups in reference/:
 *   - career-pitstop-survey-landing-v2.html
 *   - executive-influence-scorecard-assessment.html
 *   - executive-influence-scorecard-results.html
 *
 * Scope: ONLY cross-page design-system rules live here - tokens, fonts,
 * base typography, layout container, buttons, the brand lockup, the card
 * pattern, the progress/journey track, and the footer.
 *
 * Deliberately NOT here (page-specific - added with their pages in later
 * sessions): the results score-ring SVG, the assessment rating-button
 * (0-4) component, the landing fixed/scroll-state header, and every
 * single-page section layout (hero, why, spotlight, score-panel, etc.).
 *
 * Not yet wired into src/index.html - that happens in Session 4. The
 * @import above keeps this sheet usable standalone; Session 4 may instead
 * preload the same families with <link rel="preconnect"> + <link> in
 * index.html for a faster first paint.
 * ---------------------------------------------------------------
 */

/* ============================================================
   1. DESIGN TOKENS
   Colours were identical across all three mockups. Reconciled
   differences: --black-3 and --alert (present in some files,
   absent in others - both kept) and --max (1180 / 1080 / 720 -
   see note). No spacing scale was defined in the mockups, so
   none is invented here.
   ============================================================ */
:root{
  /* Neutrals / surfaces */
  --black:#0B0B0C;
  --black-2:#161618;
  --black-3:#1F1F22;
  --white:#FFFFFF;
  --paper:#F1F0EB;
  --ink:#131313;

  /* Brand */
  --gold:#FEC204;
  --gold-dark:#B88A00;

  /* Text / lines */
  --muted:#63636A;
  --muted-2:#8C8C92;
  --line:#2A2A2D;
  --line-light:#DFDDD4;

  /* Semantic */
  --alert:#E4572E;              /* bottleneck / warning - used on the results page */

  /* Layout */
  --max:1080px;                 /* default content width; pages override locally -
                                   landing used 1180px, the assessment 720px */

  /* Motion */
  --ease:cubic-bezier(.16,.8,.3,1);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);      /* landing overrides to var(--white) */
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
section{position:relative;}
input,textarea,select{font-family:'Inter',sans-serif;}

/* Scroll-reveal utility (landing drives this with an IntersectionObserver;
   harmless where unused). */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ============================================================
   3. TYPOGRAPHY
   Base only - every mockup sets its own heading sizes in context
   with clamp(), so those stay with their pages.
   ============================================================ */
h1,h2,h3{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;             /* assessment used 12px */
  letter-spacing:0.14em;        /* assessment used 0.13em */
  text-transform:uppercase;
  font-weight:500;
}

/* ============================================================
   4. LAYOUT
   ============================================================ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
@media (max-width:560px){ .wrap{padding:0 20px;} }

/* ============================================================
   5. BUTTONS
   Base + the three canonical variants (gold, ghost, dark) plus
   shared states. Reconciled sizing: font 13.5px / padding
   16px 26px / letter-spacing 0.08em (the assessment's 13px /
   15px 30px / .07em was the outlier). Granular transitions kept
   in preference to `transition:all`.
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:500;
  padding:16px 26px;
  border-radius:2px;
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .35s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
.btn:disabled{background:var(--line-light);border-color:var(--line-light);color:var(--muted-2);cursor:not-allowed;transform:none;}

.btn-gold{background:var(--gold);color:var(--black);border-color:var(--gold);}
.btn-gold:hover{background:#ffd23d;}

.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}

.btn-dark{background:transparent;color:var(--ink);border-color:var(--line-light);}
.btn-dark:hover{border-color:var(--ink);}

/* Fourth variant: the assessment's "Back" link in the step nav row.
   Promoted verbatim from executive-influence-scorecard-assessment.html.
   Kept named and narrowly scoped - one use case today. Note the disabled
   behaviour is deliberately different from the base .btn:disabled grey-out:
   .btn-back hides entirely (there is nowhere to go back to from step 1).
   Do not generalise this into a "subtle button" until a second real use
   case appears. */
.btn-back{background:transparent;color:var(--muted);border-color:transparent;padding:15px 8px;}
.btn-back:hover{color:var(--ink);}
.btn-back:disabled{visibility:hidden;}

/* Inline arrow that nudges forward on hover (landing CTAs). */
.btn-arrow{transition:transform .35s var(--ease);}
.btn:hover .btn-arrow{transform:translateX(4px);}

/* ============================================================
   6. BRAND LOCKUP  (byte-identical across all three mockups)
   ============================================================ */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand img{width:28px;height:28px;}
.brand span{
  font-family:'Anton',sans-serif;
  color:var(--white);
  font-size:15px;
  letter-spacing:.03em;
  text-transform:uppercase;
}

/* ============================================================
   7. CARD
   Canonical merge of the landing ".card-icon" and the results
   ".next-card" - the same pattern (bordered surface, tag +
   heading + copy) built twice. Add ".interactive" for the
   landing's hover-lift behaviour.
   ============================================================ */
.card{
  background:var(--white);
  border:1px solid var(--line-light);
  border-radius:6px;
  padding:32px 28px;
}
.card.interactive{
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card.interactive:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 16px 32px -20px rgba(0,0,0,.4);
}
.card .tag{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin-bottom:14px;
}
.card h4{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--ink);
  margin:0 0 10px;
}
.card p{font-size:14px;color:var(--muted);margin:0;line-height:1.55;}

/* ============================================================
   8. PROGRESS / JOURNEY TRACK
   One component reconciling the landing "pit lane"
   (.pitlane-track - a static overview of survey sections) and the
   assessment "progress track" (.progress-track - live step
   progress). Both forms share the same dots and connecting line.

   Minimal (progress):
     <div class="track">
       <div class="track-fill" style="width:42%"></div>
       <span class="track-dot done"></span>
       <span class="track-dot current"></span>
       <span class="track-dot"></span>
     </div>

   Labelled (journey overview): add .labelled and wrap each stop:
     <div class="track labelled" style="--track-steps:6">
       <div class="track-step">
         <span class="track-dot"></span>
         <span class="track-num">01</span>
         <h3 class="track-label">Where you are today</h3>
         <p class="track-desc">...</p>
       </div>
       ...
     </div>
   ============================================================ */
.track{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.track::before{
  content:'';
  position:absolute;
  top:5px;left:0;right:0;
  height:2px;
  background:var(--line);
}
.track-fill{
  position:absolute;
  top:5px;left:0;
  width:0;
  height:2px;
  background:var(--gold);
  transition:width .5s var(--ease);
}
.track-dot{
  position:relative;
  flex:none;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--black);
  border:2px solid var(--line);
  z-index:1;
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.track-dot.done{background:var(--gold);border-color:var(--gold);}
.track-dot.current{
  width:14px;height:14px;
  background:var(--black);
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(254,194,4,.18);
}

/* Labelled / journey form */
.track.labelled{
  display:grid;
  grid-template-columns:repeat(var(--track-steps,6),1fr);
  gap:26px;
  padding-top:34px;
}
.track.labelled::before{
  top:6px;
  background:linear-gradient(90deg, var(--gold), var(--gold) 92%, transparent);
}
.track.labelled .track-fill{top:6px;}
.track-step{position:relative;padding-top:2px;}
.track-step .track-dot{
  position:absolute;
  top:-34px;left:0;
  width:13px;height:13px;
  border-width:2.5px;
}
.track.labelled .track-step:last-child .track-dot{background:var(--gold);}
.track-num{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--gold);
  letter-spacing:.08em;
  margin-bottom:10px;
}
.track-label{
  font-family:'Inter',sans-serif;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  font-size:14.5px;
  color:var(--white);
  margin:0 0 8px;
  line-height:1.3;
}
.track-desc{font-size:13.5px;color:#9E9EA6;margin:0;line-height:1.5;}

@media (max-width:860px){
  .track.labelled{grid-template-columns:1fr;gap:0;padding-top:0;}
  .track.labelled::before{
    top:0;bottom:0;left:6px;right:auto;
    width:2px;height:auto;
    background:linear-gradient(180deg, var(--gold), var(--gold) 92%, transparent);
  }
  .track.labelled .track-fill{top:0;left:6px;width:2px !important;height:auto;}
  .track-step{padding:0 0 34px 34px;}
  .track-step:last-child{padding-bottom:0;}
  .track-step .track-dot{top:2px;left:0;}
}

/* ============================================================
   9. FOOTER  (near-identical across the mockups)
   ============================================================ */
footer{background:var(--black);color:var(--muted-2);padding:40px 0;}
.foot-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
footer p{
  margin:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  color:#6E6E74;
}

/* ============================================================
   10. SYNC-STATUS TOAST
   Shown by sync-status.js when webhook.js can't reach Zoho Flow
   after its automatic retry. Shared chrome: it can appear over
   either #assessment or #results, so it lives here, not in a
   page-specific stylesheet.

   Fixed to the top-right (full-width at the top on small screens)
   so it clears every interactive control - the rating buttons and
   Back/Continue in the assessment, the CTAs on the results screen.
   Dark surface with a gold accent: this is a "still trying" notice,
   not bottleneck-severity, so it deliberately does NOT use --alert.
   ============================================================ */
.sync-toast{
  position:fixed;
  top:16px;
  right:16px;
  z-index:1000;
  max-width:340px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:15px 16px;
  background:var(--black-2);
  color:#E4E4E8;
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:6px;
  box-shadow:0 18px 42px -18px rgba(0,0,0,.6);
}
.sync-toast[hidden]{display:none;}
.sync-toast-msg{
  margin:0;
  font-size:13px;
  line-height:1.5;
}
.sync-toast-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.sync-toast-retry{
  padding:9px 16px;
  font-size:11px;
}
.sync-toast-dismiss{
  margin-left:auto;
  flex:none;
  width:26px;
  height:26px;
  border:none;
  border-radius:4px;
  background:transparent;
  color:var(--muted-2);
  font-family:'IBM Plex Mono',monospace;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.sync-toast-dismiss:hover{color:var(--white);background:var(--black-3);}
.sync-toast-dismiss:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

@media (max-width:480px){
  .sync-toast{top:12px;left:12px;right:12px;max-width:none;}
}