/* Hapster product theme for the factory lab: tokens, Sora, and the shared components (pills, chips, cards,
   switches, toggle groups, skill pies). Adapted from the Hapster Windows/web app; light only, like the product. */

/* Sora ships as the Google Fonts variable wght subset (400–800), declared like the app's sora.css. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Brand primary: gold */
  --hap-gold-100: #fff2da; --hap-gold-200: #ffe6b5; --hap-gold-300: #ffd98f;
  --hap-gold-400: #ffcd6a; --hap-gold-500: #ffc045; --hap-gold-600: #cc9a37;
  --hap-gold-700: #997329; --hap-gold-800: #664d1c;
  --hap-gold-dark: #e0a024;
  --hap-gold-text: #8a6a1f;

  /* Secondary: teal */
  --hap-teal-100: #d6e3e7; --hap-teal-200: #acc7d0; --hap-teal-300: #83aab8;
  --hap-teal-400: #598ea1; --hap-teal-500: #307289; --hap-teal-600: #265b6e;
  --hap-teal-700: #1d4452; --hap-teal-800: #132e37; --hap-teal-900: #0a171b;
  --hap-steel: #559bb4;

  /* Tertiary: sage */
  --hap-sage: #a3c5a4; --hap-sage-meter: #a3c6a1; --hap-sage-dark: #6f9d72; --hap-sage-tint: #f0f6ef;

  /* Logo accents: decorative only */
  --hap-cyan: #77c6dd; --hap-dot-yellow: #f5d55b; --hap-dot-sage: #bad9ba;
  --hap-butter: #f9eaaa; --hap-mark: #020203;

  /* Ink, surfaces, lines */
  --hap-ink: #171717; --hap-ink-soft: #44494d; --hap-ink-mute: #6b7177; --hap-grey-icon: #707070;
  --hap-paper: #ffffff; --hap-paper-2: #fbfbfa; --hap-paper-3: #f5f6f6;
  --hap-line: #e7e9ea; --hap-line-soft: #f0f1f2; --hap-outline: #e0e0e0; --hap-meter-empty: #dedede;
  --hap-error: #a23a00;

  /* Key point types, app set (SkillPDF icons). Inks are darkened so chip labels clear 4.5:1 on their tints. */
  --kp-safety: #307289; --kp-quality: #f8bb43; --kp-ease: #a4c6a4;
  --kp-safety-tint: #e4eef1; --kp-quality-tint: #fff4dc; --kp-ease-tint: #eef5ee;
  --kp-safety-ink: #1d4452; --kp-quality-ink: #7a5a1d; --kp-ease-ink: #467249;

  /* Skill levels 0–4 */
  --lvl-0: #dedede;
  --lvl-1: #acc7d0;
  --lvl-2: #598ea1;
  --lvl-3: #307289;
  --lvl-4: #ffc045;

  /* Machine status */
  --status-covered: #307289;
  --status-training: #ffc045;
  --status-gap: #a23a00;
  --status-neutral: #afafaf;

  /* Background wash */
  --hap-wash: linear-gradient(148deg, #f2eede 0%, #f0e9ce 20%, #e1e9e4 45%, #dde9ec 62%, #e2ede1 82%, #eaf0e9 100%);
  --hap-sidebar: linear-gradient(180deg, rgba(241,236,214,1) 0%, rgba(121,170,181,.3) 100%);

  /* Shape, elevation, motion */
  --r-dense: 12px; --r-card: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(19,46,55,.05);
  --sh-2: 0 2px 6px rgba(19,46,55,.06), 0 4px 14px rgba(19,46,55,.06);
  --sh-3: 0 6px 18px rgba(19,46,55,.08), 0 14px 40px rgba(19,46,55,.10);
  --glow-gold: 0 8px 22px rgba(255,192,69,.42);
  --focus-ring: 0 0 0 3px rgba(48,114,137,.45), 0 0 0 6px rgba(255,192,69,.30);
  --ease-out: cubic-bezier(.22,.61,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .14s; --dur: .26s; --dur-slow: .5s;
  --font: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
  --tap: 44px;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
/* Components set display; the hidden attribute must still win. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.hf-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hap-ink);
  background: var(--hap-paper-2);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
img, svg { display: block; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hf-num { font-weight: 600; font-variant-numeric: tabular-nums; }

.hf-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One focus treatment everywhere; the ring is the brand's teal + gold halo. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Eyebrow: uppercase label with a 3 × 12 px coloured bar ── */
.hf-eyebrow {
  --bar: var(--hap-gold-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hap-ink-mute);
}
.hf-eyebrow::before { content: ''; flex: none; width: 3px; height: 12px; border-radius: 2px; background: var(--bar); }
.hf-eyebrow--teal { --bar: var(--hap-teal-500); }
.hf-eyebrow--sage { --bar: var(--hap-sage); }

/* ── Cards ── */
.hf-card {
  position: relative;
  min-width: 0;
  background: var(--hap-paper);
  border: 1px solid var(--hap-line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--sh-2);
}

/* ── Buttons: 45 px pills, no uppercase, no ripple, no shadow ── */
.hf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 45px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hf-btn svg { width: 16px; height: 16px; flex: none; }
.hf-btn--primary { background: var(--hap-gold-500); color: var(--hap-ink); }
.hf-btn--primary:hover:not(:disabled) { background: var(--hap-gold-dark); }
.hf-btn--secondary { background: var(--hap-teal-500); color: #fff; }
.hf-btn--secondary:hover:not(:disabled) { background: var(--hap-teal-600); }
.hf-btn--outlined { background: var(--hap-paper); color: var(--hap-teal-600); border: 1px solid var(--hap-teal-400); }
.hf-btn--outlined:hover:not(:disabled) { background: var(--hap-teal-100); }
.hf-btn:disabled, .hf-btn[aria-disabled="true"] { opacity: .5; }
.hf-btn--block { width: 100%; }

.hf-icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  color: var(--hap-grey-icon);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.hf-icon-btn svg { width: 18px; height: 18px; }
.hf-icon-btn:hover:not(:disabled) { background: var(--hap-paper-3); color: var(--hap-ink-soft); }
.hf-icon-btn--dark { background: var(--hap-teal-800); color: #fff; }
.hf-icon-btn--dark:hover:not(:disabled) { background: var(--hap-teal-700); color: #fff; }
.hf-icon-btn--outlined { border: 1px solid var(--hap-outline); color: var(--hap-teal-600); background: var(--hap-paper); }
.hf-icon-btn--outlined:hover:not(:disabled) { background: var(--hap-teal-100); color: var(--hap-teal-700); }
.hf-icon-btn:disabled { opacity: .5; }

/* ── Chips: 24 px pills, Sora 600 12 px ── */
.hf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--hap-ink-soft);
  background: var(--hap-paper-3);
}
.hf-chip--outline { background: var(--hap-paper); box-shadow: inset 0 0 0 1px var(--hap-line); }
.hf-chip--lab { color: var(--hap-gold-text); background: var(--hap-gold-100); }
.hf-chip--type { gap: 4px; min-height: 20px; padding: 0 7px; font-size: 10.5px; letter-spacing: .02em; color: var(--hap-teal-600); background: var(--hap-teal-100); }
.hf-chip--type svg { flex: none; width: 10px; height: 10px; }
.hf-chip--type[data-type="SUPPLEMENTARY"] { color: var(--hap-ink-soft); background: var(--hap-paper-3); }
.hf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Status chips and dots share one colour key: data-status = covered | training | capture | gap | neutral */
.hf-status { --c: var(--status-neutral); --tint: var(--hap-paper-3); --ink: var(--hap-ink-soft); }
.hf-status[data-status="covered"] { --c: var(--status-covered); --tint: var(--hap-teal-100); --ink: var(--hap-teal-700); }
.hf-status[data-status="training"], .hf-status[data-status="capture"] { --c: var(--status-training); --tint: var(--hap-gold-100); --ink: var(--hap-gold-text); }
.hf-status[data-status="gap"] { --c: var(--status-gap); --tint: #fbe9e1; --ink: #8a3200; }
.hf-chip.hf-status { color: var(--ink); background: var(--tint); }
.hf-status .hf-dot { background: var(--c); }
.hf-status[data-status="capture"] .hf-dot { animation: hf-breathe 2s ease-in-out infinite; }
.hf-status[data-status="gap"] .hf-dot { animation: hf-blink 1s steps(1, end) infinite; }
@keyframes hf-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.82); } }
@keyframes hf-blink { 50% { opacity: .25; } }

/* Key point chips: tinted fill, type-colour dot, S / Q / E */
.hf-kp { --c: var(--kp-safety); --tint: var(--kp-safety-tint); --ink: var(--kp-safety-ink); color: var(--ink); background: var(--tint); }
.hf-kp[data-kp="quality"] { --c: var(--kp-quality); --tint: var(--kp-quality-tint); --ink: var(--kp-quality-ink); }
.hf-kp[data-kp="ease"] { --c: var(--kp-ease); --tint: var(--kp-ease-tint); --ink: var(--kp-ease-ink); }
.hf-kp .hf-dot { background: var(--c); }
.hf-kp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kp-safety); }
.hf-kp-dot[data-kp="quality"] { background: var(--kp-quality); }
.hf-kp-dot[data-kp="ease"] { background: var(--kp-ease); }

/* ── Skill level pie (SkillLevelCircle): four quadrants filling clockwise from the top right ── */
.hf-pie { width: 18px; height: 18px; flex: none; }
.hf-pie path { fill: var(--hap-meter-empty); stroke: var(--hap-paper); stroke-width: 1; }
.hf-pie path.is-on { fill: var(--hap-steel); }

/* ── Switch (button role="switch") ── */
.hf-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--tap);
  padding: 0 4px 0 2px;
  border-radius: var(--r-dense);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--hap-ink);
}
.hf-switch-track {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--hap-meter-empty);
  transition: background-color var(--dur) var(--ease-out);
}
.hf-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(19,46,55,.25);
  transition: transform var(--dur) var(--ease-out);
}
.hf-switch[aria-checked="true"] .hf-switch-track { background: var(--hap-teal-500); }
.hf-switch[aria-checked="true"] .hf-switch-track::after { transform: translateX(16px); }
.hf-switch:disabled { color: var(--hap-ink-mute); }
.hf-switch:disabled .hf-switch-track { opacity: .55; }

/* ── Toggle group: native radios in a 45 px pill; the selected segment is teal-500 ── */
.hf-toggle {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  min-height: 45px;
  padding: 4px;
  border: 1px solid var(--hap-outline);
  border-radius: var(--r-pill);
  background: var(--hap-paper);
}
.hf-toggle label { position: relative; display: block; min-width: 0; margin: 0; cursor: pointer; }
/* The input reaches over the container padding so each segment is a 44 px tall target. */
.hf-toggle input { position: absolute; inset: -5px -1px; width: calc(100% + 2px); height: calc(100% + 10px); margin: 0; opacity: 0; cursor: pointer; }
.hf-toggle span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hap-ink-soft);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.hf-toggle label:hover span { color: var(--hap-teal-600); }
.hf-toggle input:checked + span { background: var(--hap-teal-500); color: #fff; }
.hf-toggle input:focus-visible + span { box-shadow: var(--focus-ring); }
fieldset:disabled .hf-toggle, fieldset:disabled.hf-toggle { opacity: .5; }
fieldset:disabled label, fieldset:disabled input { cursor: not-allowed; }

.hf-select {
  width: 100%;
  min-height: 45px;
  padding: 0 40px 0 18px;
  border: 1px solid var(--hap-outline);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  background: var(--hap-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 6.1a1 1 0 0 1 1.4 0L8 9l3-2.9a1 1 0 1 1 1.4 1.4L8.7 11.2a1 1 0 0 1-1.4 0L3.6 7.5a1 1 0 0 1 0-1.4Z' fill='%23707070'/%3E%3C/svg%3E") no-repeat right 16px center / 14px;
  appearance: none;
  -webkit-appearance: none;
}
.hf-select:disabled { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}