/* Hallmark · genre: playful · macrostructure: Workbench (one question at a time) · theme: Hum in KidharMilega blue (hex colours for older phone browsers)
 * Shares kidharmilega.in's Hum tokens. Works standalone and inside the site (site nav/footer + /assets/style.css). */
:root {
  --q-paper: #f7f5ec;
  --q-paper-2: #eeebdf;
  --q-paper-3: #e5e1d3;
  --q-ink: #12171b;
  --q-ink-2: #242a30;
  --q-neutral: #44433a;
  --q-muted: #6c6960;
  --q-rule: #d4d1c7;
  --q-rule-2: #a49e92;
  --q-pear: #00B4D8;
  --q-pear-deep: #0096B8;
  --q-cyan: #0077A8;
  --q-cyan-deep: #005E85;
  --q-coral: #ff3a5d;
  --q-link: #0077A8;
  --q-good: #006b2d;
  --q-tint-pear: rgba(0, 180, 216, 0.13);
  --q-tint-cyan: rgba(246, 206, 0, 0.16);
  --q-tint-mint: rgba(102,218,133,0.18);
  --q-font: "Plus Jakarta Sans", "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --q-label: "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
  --q-radius: 20px;
  --q-radius-input: 14px;
  --q-shadow: 0 12px 32px -16px rgba(18,23,27,0.14), 0 1px 2px rgba(18,23,27,0.06);
  --q-press: cubic-bezier(0.2, 0.7, 0.3, 1);
  --q-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --q-snap: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--q-paper); color: var(--q-ink);
  font: 16px/1.6 var(--q-font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
#app { max-width: 660px; margin: 0 auto; padding: 32px 16px 48px; }
#app p { margin: 0 0 12px; color: var(--q-neutral); }
#app ul { margin: 0; padding-left: 18px; }
#app li { margin: 4px 0; }
.screen { animation: q-in 320ms var(--q-snap); }
@keyframes q-in { from { opacity: 0; transform: translateY(8px); } }

#app h1, #app h2, #app h3 { font-family: var(--q-font); font-weight: 600; font-style: normal; color: var(--q-ink); text-wrap: balance; overflow-wrap: anywhere; }
#app h1 { font-size: clamp(32px, 7vw, 48px); letter-spacing: -0.025em; line-height: 1.05; margin: 10px 0 14px; }
#app h1 em { font-style: normal; background-image: linear-gradient(rgba(0, 180, 216, 0.35) 0 0); background-repeat: no-repeat; background-size: 100% 0.3em; background-position: 0 85%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#app h2 { font-size: clamp(22px, 4vw, 28px); letter-spacing: -0.018em; line-height: 1.25; margin: 6px 0 20px; }
#app h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.014em; }
.eyebrow { font-family: var(--q-label); color: var(--q-neutral); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; margin: 0; }
#app .lede { font-size: 18px; color: var(--q-neutral); }
#app .fine { font-size: 14px; color: var(--q-muted); }
#start + .fine { margin-top: 16px; }
#app .prompt { color: var(--q-neutral); margin: 16px 0 0; font-size: 15px; }

/* Buttons: Hum push system (the press is the feedback) */
#app .btn {
  --face: var(--q-paper); --edge: var(--q-rule-2); --cast: rgba(18,23,27,0.12);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font: 600 16px/1.2 var(--q-font); border: 0; border-radius: 999px; padding: 0.85rem 1.45rem; cursor: pointer;
  color: var(--q-ink); background: var(--face); text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 0 0 var(--edge), 0 6px 12px -3px var(--cast);
  transition: transform 140ms var(--q-press), box-shadow 140ms var(--q-press), background-color 160ms;
}
#app .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--edge), 0 12px 22px -4px var(--cast); }
#app .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--edge), 0 2px 6px -2px var(--cast); transition-duration: 70ms; }
#app .btn.primary { --face: var(--q-pear); --edge: var(--q-pear-deep); --cast: rgba(0, 150, 184, 0.35); }
#app .btn.ghost { --face: transparent; --edge: transparent; --cast: transparent; color: var(--q-neutral); padding-left: 0.4rem; margin-top: 18px; }
#app .btn.ghost:hover { color: var(--q-ink); transform: none; }
#app .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
#app .btn:focus-visible, #app .opt:focus-visible, #app a:focus-visible, #app select:focus-visible { outline: 3px solid var(--q-cyan); outline-offset: 3px; }

.progress { height: 10px; background: var(--q-paper-3); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
#bar { height: 100%; width: 0; background: var(--q-cyan); border-radius: inherit; transition: width 320ms var(--q-snap); }

.options { display: grid; gap: 10px; }
#app .opt {
  font: 500 16px/1.4 var(--q-font); text-align: left; padding: 15px 18px; border-radius: var(--q-radius-input);
  border: 1.5px solid var(--q-rule); background: var(--q-paper); color: var(--q-ink); cursor: pointer;
  transition: transform 220ms var(--q-spring), border-color 160ms, background-color 160ms;
}
#app .opt:hover { border-color: var(--q-ink); transform: translateX(3px); }
#app .opt.selected { border-color: var(--q-pear-deep); background: var(--q-tint-pear); font-weight: 600; }

/* Result cards: each holds its own accent tint; top card carries the ink edge */
#app .card {
  background: var(--q-paper-2); border: 0; border-radius: var(--q-radius);
  padding: 22px; margin: 16px 0; box-shadow: none; transform: none;
}
#app .card.top { background: var(--q-paper); border: 1.5px solid var(--q-ink); box-shadow: 0 4px 0 0 var(--q-ink), var(--q-shadow); }
#app .card:nth-of-type(3n+2):not(.top):not(.odop) { background: var(--q-tint-cyan); }
#app .card:hover { transform: none; }
.type-badge {
  display: inline-block; background: var(--q-pear); color: var(--q-ink);
  font-weight: 700; border-radius: 12px; padding: 2px 12px; margin-right: 6px; box-shadow: 0 3px 0 0 var(--q-pear-deep);
}
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip { font-size: 13px; font-weight: 500; background: var(--q-paper); border-radius: 999px; padding: 3px 11px; color: var(--q-neutral); white-space: nowrap; }
#app .why { margin: 10px 0 0; color: var(--q-ink-2); }
.shark { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--q-rule-2); font-size: 14px; }
#app .shark-head { margin: 0 0 6px; font-weight: 600; color: var(--q-ink); }
#app .shark ul { color: var(--q-neutral); }
.shark strong { color: var(--q-ink); }
.muted { color: var(--q-muted); }
#app .odop-line { font-size: 14px; margin: 12px 0 0; }
.odop-line a, .card.odop a:not(.btn) { color: var(--q-link); }
#app .card.odop { background: var(--q-tint-mint); }
.card.odop .btn, .fit-check .btn, .guide-link { margin-top: 12px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.field { display: grid; gap: 6px; font-size: 14px; color: var(--q-neutral); margin-bottom: 12px; }
.field select {
  font: 16px var(--q-font); color: var(--q-ink); background: var(--q-paper);
  border: 1.5px solid var(--q-rule-2); border-radius: var(--q-radius-input); padding: 13px 14px;
}
#app .notice { font-size: 14px; color: var(--q-ink-2); background: var(--q-tint-pear); padding: 12px 16px; border-radius: var(--q-radius-input); }

.bars { display: grid; gap: 9px; margin: 14px 0 8px; }
.bar-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; color: var(--q-neutral); }
.bar-track { height: 10px; background: var(--q-paper-3); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--q-cyan); border-radius: inherit; }
.bar-row:first-child .bar-fill, .bar-row:nth-child(2) .bar-fill { background: var(--q-pear-deep); }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.quiz-credit { max-width: 660px; margin: 0 auto; padding: 0 16px 32px; font-size: 13px; color: var(--q-muted); }
.quiz-credit a { color: inherit; text-decoration: underline; }

/* Fit-check mode (?idea=…) */
.section-head { font-size: 20px; margin: 30px 0 4px; }
#app .fit-check { background: var(--q-paper); }

@media (max-width: 480px) {
  #app .actions .btn, #app .card-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 150ms !important; }
  #app .btn:hover, #app .btn:active, #app .opt:hover { transform: none; }
}
#app p a, #app li a { color: var(--q-link); text-decoration: underline; }
#app .actions + .fine { margin-top: 16px; }