/* ============================================================================
   Lab Operations - Intel Graphic Language
   Canonical, single-source-of-truth stylesheet for ALL generated output:
   presentations, brief summaries, questionnaires, reports, dashboards.

   Origin: extracted from research-presentation-intel.html +
   ramp-up-questionnaire-v2.html, which share this exact visual language.

   HOW TO USE
   ----------
   Generated artifacts in this repo are usually self-contained, portable HTML
   (a deck that opens standalone; a questionnaire that exports inside a ZIP and
   must work offline). External CSS links are therefore NOT reliable. Treat this
   file as the COPY SOURCE:

     1. Always inline the Google Fonts <link> + the ":root" token block (the
        "Tokens" layer below) into every artifact's <style>.
     2. Inline the "Base" + "Brand devices" layers. They define the repo's
        signature (rounded corners, side-rail, dot-grid, lockup, kicker).
     3. Copy only the component layers the artifact actually uses.

   Never hard-code hex values or font names in an artifact. Reference the
   tokens. If a new color or component is genuinely needed, add it HERE first,
   then use it, so the language stays single-source.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FONTS. Paste this <link> into <head> of every artifact:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   ---------------------------------------------------------------------------- */

/* ============================ TOKENS ===================================== */
:root {
  /* Core palette. The Intel-deck visual language. */
  --white:  #FFFFFF;
  --tint:   #EAF3FB;   /* pale blue surface: panels, soft fills */
  --blue:   #0071C5;   /* Intel blue: primary brand + accent */
  --deep:   #00285A;   /* deep navy: headings, dark surfaces */
  --energy: #00C7FD;   /* cyan: progress, hover-invert, friction markers */
  --ink:    #1A1A1A;   /* body text */
  --grey:   #5B6770;   /* muted text, captions */
  --rule:   #D6DEE6;   /* hairline borders, dividers */

  /* Complementary gold. RESERVED for recording / voice-capture affordances.
     Do not use gold for general accents; blue and energy own that role. */
  --gold:        #F4B400;
  --gold-soft:   #FFF4D4;
  --gold-strong: #CE9500;

  /* Status colors. Use sparingly, for validation and feedback only. */
  --danger:      #D6324B;
  --danger-soft: #FDE4E8;
  --success:     #2A8A4A;
  --warn:        #B8730B;

  /* Functional aliases. Semantic names map onto the palette so component
     rules read intent, not raw color. */
  --bg:            #F4F8FC;   /* app/page background (document chrome) */
  --surface:       #FFFFFF;
  --surface-2:     #EAF3FB;
  --text:          #1A1A1A;
  --text-muted:    #5B6770;
  --border:        #D6DEE6;
  --accent:        #0071C5;
  --accent-soft:   #EAF3FB;
  --accent-strong: #00285A;

  /* Shape. ROUNDED CORNERS are the signature. Everything is softened:
     surfaces use --radius, inputs and small controls use --radius-sm,
     buttons and badges are full pills (--radius-pill). */
  --radius:      14px;   /* cards, panels, dark bars, modals, section surfaces */
  --radius-sm:   8px;    /* inputs, chips, small controls, list rows */
  --radius-pill: 999px;  /* buttons, badges, fully-rounded affordances */
  --shadow: 0 1px 2px rgba(0,40,90,.05), 0 8px 26px rgba(0,40,90,.07);

  /* Brand device dimensions */
  --railw: 6px;                          /* side-rail width (5px on dense pages) */
  --pad:   clamp(40px, 5.5vw, 96px);     /* slide/page outer padding */

  /* Type families */
  --display: "Outfit", system-ui, sans-serif;          /* headings, numerals, brand */
  --body:    "Inter", system-ui, sans-serif;            /* body copy, UI */
  --mono:    "IBM Plex Mono", ui-monospace, monospace;  /* kickers, labels, meta */
}

/* ============================ BASE ====================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ====================== BRAND DEVICES (signature) ======================= */

/* Slim blue side-rail on the left edge of every slide, hero, or section card.
   Add class "lo-rail" to the element, or replicate the ::before. */
.lo-rail { position: relative; }
.lo-rail::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--railw);
  background: linear-gradient(var(--deep), var(--blue));
  border-radius: var(--radius-pill);
  z-index: 5; pointer-events: none;
}

/* Brand lockup: "intel" wordmark + divider + uppercase product name. */
.lockup { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lockup .brand {
  font-family: var(--display); font-weight: 700; font-size: 25px;
  letter-spacing: -.04em; color: var(--blue); line-height: 1;
}
.lockup .lk-div   { width: 1px; height: 22px; background: var(--rule); }
.lockup .lk-name  {
  font-family: var(--mono); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey);
}
.lockup .lk-spacer { flex: 1; }
.lockup .counter {
  font-family: var(--mono); font-size: 13px; letter-spacing: .16em;
  color: var(--deep); white-space: nowrap;
}
.lockup .counter .now { color: var(--blue); font-weight: 500; }

/* Abstract blue dot-grid: top-right corner ornament with a diagonal fade. */
.dotgrid {
  position: absolute; right: var(--pad); top: clamp(34px,4.2vh,56px);
  width: clamp(120px,13vw,190px); height: clamp(120px,13vw,190px);
  background-image: radial-gradient(var(--blue) 2px, transparent 2.4px);
  background-size: 22px 22px; opacity: .16; pointer-events: none;
  -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 78%);
          mask-image: linear-gradient(135deg, #000 30%, transparent 78%);
}

/* Kicker / eyebrow: mono uppercase label with a short blue lead-dash. */
.kicker, .eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--blue);
  display: flex; align-items: center; gap: 12px;
}
.kicker::before, .eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--blue);
  border-radius: var(--radius-pill); display: inline-block;
}

/* ============================ TYPE ====================================== */
h1 {
  font-family: var(--display); font-weight: 700; color: var(--deep);
  letter-spacing: -.025em; line-height: 1.02;
  font-size: clamp(38px, 5.4vw, 76px);
}
h2 {
  font-family: var(--display); font-weight: 600; color: var(--deep);
  letter-spacing: -.02em; line-height: 1.06;
  font-size: clamp(28px, 3.5vw, 50px);
}
h3 {
  font-family: var(--display); font-weight: 600; color: var(--deep);
  letter-spacing: -.01em; line-height: 1.2;
}
.accent { color: var(--blue); }   /* highlight word inside a heading */

.lead {
  font-size: clamp(19px, 1.5vw, 23px); line-height: 1.5;
  color: var(--ink); font-weight: 400; max-width: 60ch;
}
.lead.cool { color: var(--grey); }

/* ======================= COMPONENTS: SURFACES =========================== */

/* Panel. Pale-blue card with a 2px blue top-edge. The repo's default card. */
.panel {
  background: var(--tint); border-top: 2px solid var(--blue);
  border-radius: var(--radius); overflow: hidden;
  padding: 26px 24px 28px;
}
.panel .pnum {
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em;
  color: var(--blue); margin-bottom: 14px;
}
.panel h3 { font-size: 24px; margin-bottom: 10px; }
.panel p  { font-size: 18px; line-height: 1.5; color: var(--ink); }

/* Dark bar. Deep-navy strip with an energy-cyan top-edge. Scope/summary/CTA. */
.darkbar {
  background: var(--deep); color: #fff;
  border-top: 2px solid var(--energy);
  border-radius: var(--radius); overflow: hidden;
  padding: 20px 26px;
}

/* Section card. Bordered white surface with side-rail (pair with .lo-rail). */
.section-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}

/* Pull-quote. Heavy blue left-bar, display type. Hero questions / key claims. */
.pullq {
  border-left: 8px solid var(--blue); border-radius: var(--radius-sm);
  padding-left: clamp(22px,2.6vw,40px);
}
.pullq p {
  font-family: var(--display); font-weight: 600; color: var(--deep);
  letter-spacing: -.02em; line-height: 1.2; font-size: clamp(26px,3vw,40px);
}

/* Tag / chip. Outlined mono uppercase pill. */
.tag {
  border: 1.5px solid var(--blue); color: var(--blue);
  border-radius: var(--radius-pill);
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; padding: 9px 16px; white-space: nowrap;
}

/* Big outline numeral. Energy fill with a thin blue stroke. Step/spec indices. */
.numeral {
  font-family: var(--display); font-weight: 700; color: var(--energy);
  -webkit-text-stroke: .5px var(--blue); line-height: 1;
}

/* ======================= COMPONENTS: CONTROLS =========================== */

/* Buttons are full rounded pills, sentence-case (not mono uppercase).
   This is the canonical button (matches the questionnaire instrument). */

/* Primary button. Accent fill, white text, deepens to navy on hover. */
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 9px 18px; border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--body); font-size: 14px; font-weight: 500;
  transition: background .12s ease;
}
.btn-primary:hover { background: var(--accent-strong); }

/* Secondary / ghost button. For dark surfaces (e.g. the dark footer bar):
   transparent with a translucent white border and white text. */
.btn-secondary {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--body); font-size: 13px;
  transition: background .12s ease;
}
.btn-secondary:hover { background: rgba(255,255,255,.1); }

/* Mini button. Compact neutral action (inline tool affordances). */
.btn-mini {
  background: var(--surface); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12px; color: var(--text);
}
.btn-mini:hover { background: var(--surface-2); border-color: #cdd3da; }
.btn-mini.danger { color: var(--danger); }
.btn-mini.danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* Form inputs. Hairline border, blue focus ring. */
input[type="text"], input[type="number"], textarea, select {
  width: 100%; font-family: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Progress track. Energy-cyan fill on a hairline track. */
.progress-track { height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill  { height: 100%; width: 0%; background: var(--energy); transition: width .3s ease; }

/* ======================= STATUS / FEEDBACK ============================== */
.notice {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--gold-soft); border: 1px solid var(--gold); color: #6d4c00;
  font-size: 13px;
}
.notice.info { background: var(--accent-soft); border-color: #bcd9f2; color: var(--accent-strong); }

/* Completion dot. Neutral, then warn (partial), then success (complete). */
.completion-dot          { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.completion-dot.partial  { background: var(--warn); }
.completion-dot.complete { background: var(--success); }
