/* Kyte Power — interface styles
   Principles: native-feeling grouped surfaces, one bold element per screen (the big number),
   Kyte red only for the main action and the active tab, quiet everything else. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("fonts/Inter-Bold.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-display: swap; src: url("fonts/InterDisplay-Bold.woff") format("woff"); }

:root {
  color-scheme: light dark;
  /* Kyte brand */
  --kyte-red: #e53238;
  --kyte-red-press: #c9262c;
  --kyte-charcoal: #373435;
  /* Light surfaces */
  --canvas: #f2f2f0;
  --surface: #ffffff;
  --surface-2: #f6f6f5;
  --fill: #ebeae8;          /* inputs, secondary buttons */
  --ink: #1b1a1b;
  --ink-2: #6b6867;
  --ink-3: #9a9796;
  --hairline: rgba(27, 26, 27, .09);
  --bar: rgba(250, 250, 249, .82);
  --primary: #1b1a1b;      /* everyday buttons: graphite */
  --on-primary: #ffffff;
  /* Status */
  --good: #1d7f47; --good-tint: #e4f3ea;
  --warn: #9a5b00; --warn-tint: #fdf1d9;
  --bad: #c22a2f;  --bad-tint: #fce7e7;
  --info: #1f5fae; --info-tint: #e6eefa;
  --radius-l: 18px;
  --radius-m: 13px;
  --radius-s: 9px;
  --gutter: 16px;
  --tabbar-h: 64px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0d0d0e;
    --surface: #1b1b1d;
    --surface-2: #232325;
    --fill: #2c2c2f;
    --ink: #f4f4f5;
    --ink-2: #a3a1a2;
    --ink-3: #6f6d6e;
    --hairline: rgba(255, 255, 255, .09);
    --bar: rgba(22, 22, 24, .78);
    --primary: #f4f4f5;
    --on-primary: #111112;
    --good: #4cc27c; --good-tint: rgba(76, 194, 124, .14);
    --warn: #f0b04a; --warn-tint: rgba(240, 176, 74, .14);
    --bad: #ff6b6f;  --bad-tint: rgba(255, 107, 111, .14);
    --info: #6aa6f2; --info-tint: rgba(106, 166, 242, .14);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.006em;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
}
body.has-nav { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
[hidden] { display: none !important; }
img { max-width: 100%; }

a { color: var(--ink); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 1.9rem; letter-spacing: -0.03em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; letter-spacing: -0.01em; }
p { margin: .35rem 0 .8rem; }
b, strong { font-weight: 600; }
.muted { color: var(--ink-2); }
.small { font-size: .84rem; }
.center { text-align: center; }
.mt { margin-top: 14px; }
.pad { padding: 14px 16px; margin: 0; }
.neg, .neg b { color: var(--bad); }
.mono, .tnum { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.mono { font-feature-settings: "tnum", "ss01", "cv11"; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--kyte-red) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

/* ---------- Chrome ---------- */
.test-banner {
  background: #f5b800; color: #2a1d00; text-align: center; font-weight: 600; font-size: .75rem;
  padding: 5px 8px; letter-spacing: .01em;
}
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -0.02em; font-size: 1.02rem; }
.emblem { width: 30px; height: auto; display: block; }
.who { color: var(--ink-2); text-decoration: none; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.wordmark { width: min(280px, 78%); height: auto; display: block; margin: 0 auto; }
.wordmark.left { margin: 0 0 6px; width: 170px; }
.logo { display: none; }

.wrap { max-width: 720px; margin: 0 auto; padding: 18px var(--gutter) 24px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--hairline);
}
.tab {
  flex: 1; max-width: 140px; display: grid; justify-items: center; align-content: center; gap: 3px;
  color: var(--ink-3); text-decoration: none; font-size: .68rem; font-weight: 500; letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--kyte-red); font-weight: 600; }
.tab.on svg { stroke-width: 2.1; }

/* ---------- Page heads ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 2px 16px; }
.page-head h1 { margin: 0; }
.section { margin: 26px 4px 8px; color: var(--ink-2); font-size: .9rem; font-weight: 600; letter-spacing: -0.005em; }
.label-like { margin: 14px 0 8px; color: var(--ink-2); font-size: .86rem; }

/* ---------- Surfaces ---------- */
.card {
  background: var(--surface); border-radius: var(--radius-l);
  padding: 18px; margin: 0 0 14px;
}
.card.narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
.card.compact { padding: 14px 16px; }
.card.inset { background: var(--surface-2); padding: 16px; }
.card.highlight { box-shadow: inset 0 0 0 2px var(--kyte-red); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.card-head h1, .card-head h2, .card-head h3 { margin: 0; }
a.card { display: block; text-decoration: none; color: inherit; }
a.card:active { transform: scale(.99); }
details.card > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { margin: 0; }
details.card > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); margin-right: 4px; transition: transform .2s; }
details.card[open] > summary::after { transform: rotate(225deg); }
details.card[open] > summary { margin-bottom: 10px; }
details > summary.small { cursor: pointer; }

/* Grouped list (iOS-style inset rows) */
.list { background: var(--surface); border-radius: var(--radius-l); overflow: hidden; margin-bottom: 14px; }
.row-link {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 54px; padding: 12px 16px; color: var(--ink); text-decoration: none; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.row-link + .row-link::before, .person + .person::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--hairline);
}
.row-link:active, .person:active { background: var(--surface-2); }
.row-link > span:last-child:not(.badge):not(.count):not(.rl-main) { color: var(--ink-3); font-size: 1.3rem; line-height: 1; }
.row-link.inactive { opacity: .5; }

/* ---------- Forms ---------- */
label { display: block; font-size: .84rem; color: var(--ink-2); margin: 0 0 14px; font-weight: 500; }
input, select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 0 14px; height: 50px;
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink); letter-spacing: -0.005em;
  background: var(--fill); border: 0; border-radius: var(--radius-m);
  -webkit-appearance: none; appearance: none; transition: box-shadow .15s;
}
textarea { padding: 12px 14px; height: auto; }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px;
}
input[type="file"] { padding: 13px 14px; height: auto; font-size: .9rem; }
input[type="date"], input[type="time"] { min-height: 50px; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--kyte-red) 30%, transparent); }
input::placeholder { color: var(--ink-3); }
input:disabled, select:disabled { opacity: .55; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled label { opacity: .7; }

label.check {
  display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: .97rem; font-weight: 400;
  margin: 0 0 4px; min-height: 44px;
}
label.check input {
  flex: none; width: 26px; height: 26px; margin: 0; padding: 0; border-radius: 8px; background: var(--fill);
  display: grid; place-items: center; cursor: pointer;
}
label.check input::after { content: ""; width: 7px; height: 13px; border: solid transparent; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
label.check input:checked { background: var(--good); }
label.check input:checked::after { border-color: #fff; }
label.check.tick { padding: 6px 0; border-bottom: 0.5px solid var(--hairline); margin: 0; }
label.check.tick:last-of-type { border-bottom: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 8px; }
.checks.stations label.check { flex: 1 1 46%; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px; }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; }
@media (max-width: 440px) {
  .grid2 { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .span3 { grid-column: span 2; }
}
.inline-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline-grid label { flex: 1 1 140px; margin: 0; }
.inline-select { width: auto; height: 38px; margin: 0; font-size: .9rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px; border: 0; border-radius: var(--radius-m);
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  background: var(--primary); color: var(--on-primary);
  transition: transform .12s ease, opacity .12s, background-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.975); }
.btn.full { width: 100%; }
.btn.big { min-height: 60px; font-size: 1.08rem; border-radius: 16px; background: var(--kyte-red); color: #fff; }
.btn.big:active { background: var(--kyte-red-press); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: .9rem; border-radius: 11px; }
.btn.ghost { background: var(--fill); color: var(--ink); }
.btn.danger { background: var(--bad-tint); color: var(--bad); }
.btn[disabled] { opacity: .5; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-row form { display: contents; }
.btn-col { display: grid; gap: 10px; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--info); font: inherit; font-size: .9rem; cursor: pointer; }
form.inline { display: inline; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .btn:active, a.card:active { transform: none; } }

/* ---------- Messages ---------- */
.flash { padding: 13px 15px; border-radius: var(--radius-m); margin: 0 0 14px; background: var(--info-tint); color: var(--info); font-size: .95rem; }
.flash-ok { background: var(--good-tint); color: var(--good); }
.flash-warn { background: var(--warn-tint); color: var(--warn); }
.flash-bad { background: var(--bad-tint); color: var(--bad); }
.flash ul { margin: 6px 0 0; padding-left: 18px; }
.alert-link {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--warn-tint); color: var(--warn); padding: 14px 16px; border-radius: var(--radius-m);
  margin-bottom: 14px; text-decoration: none; font-weight: 600; font-size: .95rem;
}
.hint { font-weight: 500; padding: 12px 14px; border-radius: var(--radius-m); background: var(--surface-2); color: var(--ink-2); font-size: .95rem; }
.hint.good { background: var(--good-tint); color: var(--good); }
.hint.warn { background: var(--warn-tint); color: var(--warn); }
.hint.bad { background: var(--bad-tint); color: var(--bad); }

.badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; line-height: 1.35; background: var(--fill); color: var(--ink-2); vertical-align: middle; white-space: nowrap;
}
.b-good { background: var(--good-tint); color: var(--good); }
.b-warn { background: var(--warn-tint); color: var(--warn); }
.b-bad { background: var(--bad-tint); color: var(--bad); }
.b-info { background: var(--info-tint); color: var(--info); }
.chip { display: inline-flex; gap: 4px; align-items: baseline; padding: 4px 9px; margin: 0 4px 4px 0; border-radius: 8px; background: var(--fill); color: var(--ink); font-weight: 600; font-size: .85rem; }
.chip small { color: var(--ink-3); font-weight: 500; font-size: .72rem; }

/* ---------- The big number (one bold element per screen) ---------- */
.att-card .clock, .unit-no, .big-no, .hero-no {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.att-card .clock { font-size: clamp(3.4rem, 17vw, 4.6rem); margin: 6px 0 14px; }
.att-head { display: flex; justify-content: space-between; align-items: flex-start; }
.att-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.att-times > div { display: grid; gap: 6px; align-content: start; justify-items: start; background: var(--surface-2); border-radius: var(--radius-m); padding: 12px 14px; }
.att-times strong { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.camera { margin-top: 14px; }
.camera video, .camera img { width: 100%; aspect-ratio: 3 / 4; max-height: 62vh; object-fit: cover; border-radius: var(--radius-l); background: #000; transform: scaleX(-1); display: block; }
.camera img { transform: none; }
.cam-actions { display: flex; gap: 10px; margin-top: 12px; }
.cam-actions .btn { flex: 1; }
.cam-actions #btnSnap, .cam-actions #btnSend { background: var(--kyte-red); color: #fff; }

.unit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.unit-no { font-size: clamp(2.6rem, 12vw, 3.4rem); margin-top: 4px; }
.done-card { text-align: center; padding: 26px 18px; background: var(--good-tint); }
.done-card p { color: var(--good); font-weight: 500; margin: 0 auto 6px; max-width: 30ch; }
.done-card .big-no { font-size: clamp(4rem, 24vw, 6.5rem); margin: 10px 0 12px; color: var(--ink); }
.done-card p.muted { color: var(--ink-2); }
.hero { text-align: center; padding: 24px 18px; }
.hero-no { font-size: clamp(3rem, 16vw, 4.4rem); margin: 6px 0 6px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.stats > div { background: var(--surface-2); border-radius: var(--radius-m); padding: 12px; display: grid; gap: 2px; }
.stats b { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stats span { font-size: .76rem; color: var(--ink-2); }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(6, 1fr); } }

.spec-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.spec-row > div { display: grid; gap: 2px; background: var(--surface-2); border-radius: var(--radius-m); padding: 10px 12px; }
.spec-row b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.job-spec { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0; }
progress.bar { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 99px; overflow: hidden; background: var(--fill); margin: 12px 0 6px; display: block; }
progress.bar::-webkit-progress-bar { background: var(--fill); }
progress.bar::-webkit-progress-value { background: var(--good); border-radius: 99px; }
progress.bar::-moz-progress-bar { background: var(--good); border-radius: 99px; }

.seg { display: flex; padding: 3px; background: var(--fill); border-radius: 11px; margin: 0 0 14px; }
.seg a { flex: 1; text-align: center; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .9rem; }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.picker-row { display: flex; gap: 8px; margin-top: 6px; }
.picker-row input { margin: 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.picker-row .btn { flex: none; }
.picker label { margin: 0; }
.search-card label { margin: 0; }

/* Sensing voltages: a numbered grid like the paper sheet */
.volts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 12px; }
.volts label { margin: 0; position: relative; }
.volts label span { position: absolute; left: 9px; top: 6px; font-size: .68rem; color: var(--ink-3); font-weight: 600; z-index: 1; }
.volts input { margin: 0; height: 54px; padding: 14px 6px 0; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .98rem; }
.volts input.hi { box-shadow: inset 0 0 0 2px var(--warn); }
.volts input.lo { box-shadow: inset 0 0 0 2px var(--info); }
@media (min-width: 560px) { .volts { grid-template-columns: repeat(6, 1fr); } }

.smart-row { display: grid; grid-template-columns: 1fr 110px; gap: 10px; align-items: center; border-bottom: 0.5px solid var(--hairline); }
.smart-row label.check { margin: 0; }
.smart-row input:not([type=checkbox]) { margin: 0; height: 40px; }

.engrave { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--surface-2); border-radius: var(--radius-m); padding: 14px 14px 14px 16px; margin: 6px 0 8px; }
.engrave span { font-size: 1.08rem; font-weight: 700; letter-spacing: .02em; word-break: break-all; }
.secret { font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700; letter-spacing: .03em; background: var(--surface-2); padding: 14px; border-radius: var(--radius-m); text-align: center; word-break: break-all; }

/* ---------- Tables ---------- */
table { border-collapse: collapse; width: 100%; }
.card { overflow-x: auto; }
.tbl th, .tbl td { padding: 10px 8px; border-bottom: 0.5px solid var(--hairline); text-align: left; font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl thead th { color: var(--ink-2); font-weight: 500; font-size: .76rem; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl td.details { white-space: normal; min-width: 180px; color: var(--ink-2); }
.tbl.small td { font-size: .8rem; }
.tbl tr.total td { font-weight: 700; border-top: 0.5px solid var(--hairline); }
.tbl tr.row-neck td { color: var(--bad); font-weight: 600; }
.scroll-x { overflow-x: auto; }
.rules th, .rules td, .sum th, .sum td { text-align: left; padding: 11px 2px; border-bottom: 0.5px solid var(--hairline); vertical-align: top; font-size: .92rem; }
.rules tr:last-child th, .rules tr:last-child td, .sum tr:last-child th, .sum tr:last-child td { border-bottom: 0; }
.rules th { font-weight: 500; width: 46%; color: var(--ink-2); padding-right: 12px; }
.sum th { font-weight: 400; color: var(--ink-2); }
.sum td { text-align: right; font-variant-numeric: tabular-nums; }
.sum tr.total th, .sum tr.total td { font-weight: 700; font-size: 1.08rem; color: var(--ink); padding-top: 14px; }

/* ---------- Day lists, people ---------- */
.days { display: grid; }
.day { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 12px 0; border-bottom: 0.5px solid var(--hairline); }
.day:last-child { border-bottom: 0; }
.day.is-off { opacity: .45; }
.day-date { font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.day-body { display: grid; gap: 4px; justify-items: start; }
.person { display: flex; gap: 14px; align-items: center; padding: 12px 16px; color: var(--ink); text-decoration: none; position: relative; }
.person.is-early { background: var(--bad-tint); }
.p-main { display: grid; gap: 4px; min-width: 0; }
.thumb { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--fill); }
.thumb.big { width: 88px; height: 88px; border-radius: 16px; }
.thumb.empty { display: grid; place-items: center; font-weight: 700; color: var(--ink-2); }
.review-top { display: flex; gap: 14px; margin-bottom: 10px; }
.decide input { margin-bottom: 4px; }
.monthbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; }
.monthbar strong { font-size: 1.05rem; letter-spacing: -0.015em; }
.monthbar .btn { width: 44px; padding: 0; }
.cal-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 8px; align-items: center; min-height: 52px; border-bottom: 0.5px solid var(--hairline); }
.cal-row:last-child { border-bottom: 0; }
.cal-row.is-off .cal-date { color: var(--ink-3); }
.cal-date { font-weight: 600; font-size: .9rem; }

/* Line status */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.flow-step { background: var(--surface-2); border-radius: var(--radius-m); padding: 12px; display: grid; gap: 2px; }
.flow-step b { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.flow-step span { font-size: .76rem; color: var(--ink-2); }
.flow-step.is-neck { box-shadow: inset 0 0 0 2px var(--kyte-red); }
.flow-step.bad b { color: var(--bad); }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 14px 22px; display: grid; gap: 2px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.timeline li::after { content: ""; position: absolute; left: 7.5px; top: 18px; bottom: 0; width: 1px; background: var(--hairline); }
.timeline li:last-child::after { display: none; }
.timeline li.bad::before { background: var(--bad); }
.timeline li b { font-size: .92rem; }
.timeline li span { font-size: .82rem; color: var(--ink-2); }

/* ---------- Auth ---------- */
.auth { max-width: 420px; margin: 6vh auto 0; }
.auth-head { text-align: center; margin-bottom: 28px; }
.auth-head h1 { margin: 22px 0 4px; font-size: 1.6rem; }
.auth-head p { margin: 0; }
.dark-only { display: none; }
@media (prefers-color-scheme: dark) { .light-only { display: none; } .dark-only { display: block; } }

.steps { padding-left: 20px; }
.plain { list-style: none; padding: 0; margin: 0 0 12px; }
.plain li { padding: 10px 0; border-bottom: 0.5px solid var(--hairline); }

/* ---------- Paper documents (production sheet, challan): always light ---------- */
.paper, .sheet, .challan {
  --surface: #ffffff; --surface-2: #f6f6f5; --ink: #1b1a1b; --ink-2: #6b6867; --ink-3: #9a9796; --hairline: rgba(27, 26, 27, .12); --fill: #ebeae8;
  background: #fff; color: #1b1a1b; color-scheme: light;
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.sheet-head h2 { margin: 0; }
.kv { margin-bottom: 12px; }
.kv th, .kv td { border-bottom: 0.5px solid var(--hairline); padding: 8px 6px 8px 0; font-size: .86rem; text-align: left; vertical-align: top; }
.kv th { font-weight: 500; color: var(--ink-2); }
.steps-tbl th { width: 26px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 6px 0 14px; }
.vgrid span { background: var(--surface-2); border-radius: 8px; padding: 6px 4px; text-align: center; font-size: .82rem; font-variant-numeric: tabular-nums; }
.vgrid i { display: block; font-style: normal; font-size: .64rem; color: var(--ink-3); }
.print-only { display: none; }
.sign-row { display: none; }

@media print {
  @page { margin: 12mm; }
  :root { color-scheme: light; }
  body { background: #fff !important; color: #000; padding: 0 !important; font-size: 11pt; }
  .topbar, .tabbar, .no-print, .test-banner { display: none !important; }
  .print-only { display: block !important; }
  .sign-row { display: flex !important; justify-content: space-between; margin-top: 48px; }
  .sign-row span { border-top: 1px solid #000; padding-top: 4px; width: 30%; text-align: center; font-size: 9pt; }
  .wrap { max-width: none; padding: 0; }
  .card { background: #fff !important; padding: 0 0 10px; break-inside: avoid; }
  .card { overflow: visible; }
}

/* Two-line rows with a count */
.rl-main { display: grid; gap: 1px; min-width: 0; }
.rl-main b { font-weight: 600; }
.count { min-width: 34px; height: 30px; padding: 0 10px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--ink); color: var(--canvas); font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; }
.count.bad { background: var(--bad); color: #fff; }
h2.section { font-size: .9rem; }
/* Plant snapshot on the owner's Today */
.snapshot .big { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 16px; }
.snapshot .big b { font-family: var(--font-display); font-size: clamp(3.6rem, 19vw, 5rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.snapshot .big span { color: var(--ink-2); font-size: 1rem; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0 0 14px; }
.facts div { display: grid; gap: 2px; min-width: 0; }
.facts dt { font-size: .74rem; color: var(--ink-2); }
.facts dd { margin: 0; font-size: .92rem; font-weight: 600; word-break: break-word; font-variant-numeric: tabular-nums; }
.facts .wide { grid-column: 1 / -1; }

/* =========================================================================
   2.1 — Work-first home, progress and performance
   ========================================================================= */
.sub { margin: 2px 0 0; }
.greet { margin: 2px 2px 14px; }
.greet p { margin: 0; color: var(--ink-2); font-size: .86rem; font-weight: 500; }
.greet h1 { margin: 2px 0 0; font-size: 1.75rem; text-wrap: balance; }

/* Attendance once checked in: one slim line */
.att-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; background: var(--surface); border-radius: var(--radius-m); padding: 10px 12px 10px 16px; margin: 0 0 14px; }
.att-strip .att-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.att-strip .att-time { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.att-strip .btn.small { min-height: 36px; }
.att-strip #liveHint, .att-strip #attMsg { flex-basis: 100%; margin: 0; }
.att-strip #liveHint:empty { display: none; }
.att-strip #liveHint.hint { padding: 8px 12px; font-size: .86rem; }

/* My work today */
.mywork .mw-body { display: flex; align-items: center; gap: 18px; margin: 10px 0 14px; }
.mw-side { min-width: 0; display: grid; gap: 6px; }
.cheer { margin: 0; font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; text-wrap: balance; }
.done-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--ink-2); font-size: .88rem; font-variant-numeric: tabular-nums; }
.ring { position: relative; width: 124px; height: 124px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring .ring-bg { stroke: var(--fill); }
.ring .ring-fg { stroke: var(--kyte-red); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.ring.full .ring-fg { stroke: var(--good); }
.ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-c b { font-family: var(--font-display); font-size: 2.3rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ring-c span { font-size: .72rem; color: var(--ink-2); margin-top: 3px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--surface-2); font-size: .8rem; color: var(--ink-2); }
.pill b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Work waiting: big tappable station tiles */
.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.q-card { display: grid; grid-template-rows: auto auto auto 1fr; gap: 2px; background: var(--surface); border-radius: var(--radius-l); padding: 14px 14px 12px; text-decoration: none; color: var(--ink); min-height: 132px; -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.q-card:active { transform: scale(.98); }
.q-name { font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.q-n { font-family: var(--font-display); font-size: 2.3rem; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.q-card.has .q-n { color: var(--ink); }
.q-sub { font-size: .78rem; color: var(--ink-2); }
.q-go { align-self: end; justify-self: start; margin-top: 8px; font-weight: 600; font-size: .86rem; color: var(--ink-2); }
.q-card.has .q-go { color: var(--ink); }
.q-card.first { background: var(--kyte-red); color: #fff; }
.q-card.first .q-name, .q-card.first .q-sub, .q-card.first .q-n, .q-card.first .q-go { color: #fff; }
.q-card.first .q-sub { opacity: .85; }

/* Day bars (SVG) */
.bars { display: block; width: 100%; height: auto; margin: 4px 0 6px; overflow: visible; }
.bars .b-day { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.bars .b-today { fill: var(--kyte-red); }
.bars .b-zero { fill: var(--fill); }
.bars .b-axis { stroke: var(--hairline); stroke-width: 1; }
.bars text { font-family: var(--font); fill: var(--ink-3); font-size: 8.5px; font-variant-numeric: tabular-nums; }
.bars .b-val { fill: var(--ink); font-weight: 700; font-size: 9px; }
.bars .b-lbl.t { fill: var(--ink); font-weight: 600; }

/* Thin progress bars and colour variants */
progress.bar.thin { height: 4px; margin: 6px 0 0; }
progress.bar.pl-good::-webkit-progress-value { background: var(--good); } progress.bar.pl-good::-moz-progress-bar { background: var(--good); }
progress.bar.pl-warn::-webkit-progress-value { background: var(--warn); } progress.bar.pl-warn::-moz-progress-bar { background: var(--warn); }
progress.bar.pl-bad::-webkit-progress-value { background: var(--bad); } progress.bar.pl-bad::-moz-progress-bar { background: var(--bad); }
progress.bar.pl-muted::-webkit-progress-value { background: var(--ink-3); } progress.bar.pl-muted::-moz-progress-bar { background: var(--ink-3); }

/* Who did what today */
.row-link.lb .rl-main { flex: 1; }
.lb-n { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink) !important; min-width: 2ch; text-align: right; }
.stats.three { grid-template-columns: repeat(3, 1fr) !important; }

/* Row-shaped card links */
.row-card { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; }
.row-card > span:first-child { display: grid; gap: 2px; min-width: 0; }
.chev { color: var(--ink-3); font-size: 1.3rem; line-height: 1; }

/* Station screens: today's count stays in view */
.work-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; background: var(--surface); border-radius: var(--radius-m); padding: 10px 14px; margin: 0 0 14px; text-decoration: none; color: var(--ink); font-size: .88rem; }
.work-strip b { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.work-strip progress { flex-basis: 100%; order: 3; }

/* Progress page */
.score-card .score-main { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.score-no { font-family: var(--font-display); font-size: clamp(3.6rem, 18vw, 4.8rem); letter-spacing: -0.045em; line-height: .95; font-variant-numeric: tabular-nums; }
.score-main .badge { margin-top: 6px; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pillar { background: var(--surface-2); border-radius: var(--radius-m); padding: 12px 13px; min-width: 0; }
.pl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pl-top span { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.pl-top b { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pillar progress.bar { height: 5px; margin: 8px 0 6px; }
.pillar p { margin: 0; font-size: .76rem; color: var(--ink-2); line-height: 1.35; }
.p-good .pl-top b { color: var(--good); } .p-warn .pl-top b { color: var(--warn); } .p-bad .pl-top b { color: var(--bad); } .p-muted .pl-top b { color: var(--ink-3); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.medal { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: var(--radius-m); background: var(--surface-2); color: var(--ink-3); text-align: center; }
.medal b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.medal span { font-size: .7rem; line-height: 1.2; }
.medal.got { background: color-mix(in srgb, var(--kyte-red) 11%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--kyte-red) 45%, transparent); }
.medal.got span { color: var(--ink-2); }
.next-ms { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; }

/* Performance matrix */
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix td:first-child a { text-decoration: none; }
.matrix .hm { font-weight: 700; border-radius: 0; }
.hm-good { background: var(--good-tint); color: var(--good); }
.hm-warn { background: var(--warn-tint); color: var(--warn); }
.hm-bad { background: var(--bad-tint); color: var(--bad); }
.hm-none { color: var(--ink-3); }
.score-sm { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -0.02em; }
.goals .goal-in { width: 96px; height: 44px; margin: 0; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 380px) {
  .ring { width: 108px; height: 108px; }
  .ring-c b { font-size: 2rem; }
  .mywork .mw-body { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ring .ring-fg { transition: none; } }
.q-card.empty { min-height: 0; grid-template-rows: auto auto 1fr; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.q-card.empty .q-name { color: var(--ink-2); }
.q-card.empty .q-go { margin-top: 6px; }
/* Performance matrix rows */
.mx-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 14px 16px; color: var(--ink); text-decoration: none; position: relative; }
.mx-row + .mx-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--hairline); }
.mx-row:active { background: var(--surface-2); }
.mx-who { display: grid; gap: 1px; min-width: 0; }
.mx-score { display: grid; justify-items: end; align-content: start; gap: 4px; }
.mx-score b { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.mx-cells { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hm { display: grid; justify-items: center; gap: 0; padding: 7px 4px 6px; border-radius: 10px; }
.hm b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.hm i { font-style: normal; font-size: .68rem; font-weight: 500; opacity: .85; }
.hm-none { background: var(--surface-2); color: var(--ink-3); }
.alert-link.bad { background: var(--bad-tint); color: var(--bad); }

/* =========================================================================
   2.2 — Dashboards and charts
   Chart palette: validated categorical order (colour-blind safe on adjacent pairs),
   with its own dark-mode steps. Every chart also has a Table view and labels.
   ========================================================================= */
:root {
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --ch-grid: #ecebe7; --ch-base: #c9c7c0; --ch-ax: #8a8781; --ch-band: rgba(27, 26, 27, .045);
}
@media (prefers-color-scheme: dark) {
  :root {
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --ch-grid: #2a2a2c; --ch-base: #3c3c3f; --ch-ax: #8e8b8a; --ch-band: rgba(255, 255, 255, .05);
  }
}
.f1 { fill: var(--s1); } .f2 { fill: var(--s2); } .f3 { fill: var(--s3); } .f4 { fill: var(--s4); }
.f5 { fill: var(--s5); } .f6 { fill: var(--s6); } .f7 { fill: var(--s7); } .f8 { fill: var(--s8); }
.k1 { stroke: var(--s1); } .k2 { stroke: var(--s2); } .k3 { stroke: var(--s3); } .k4 { stroke: var(--s4); }
.k5 { stroke: var(--s5); } .k6 { stroke: var(--s6); } .k7 { stroke: var(--s7); } .k8 { stroke: var(--s8); }
i.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
i.sw.f1 { background: var(--s1); } i.sw.f2 { background: var(--s2); } i.sw.f3 { background: var(--s3); } i.sw.f4 { background: var(--s4); }
i.sw.f5 { background: var(--s5); } i.sw.f6 { background: var(--s6); } i.sw.f7 { background: var(--s7); } i.sw.f8 { background: var(--s8); }

.chart { position: relative; min-width: 0; }
.ch-plot { width: 100%; min-height: 40px; }
.ch-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.ch-svg text { font-family: var(--font); font-variant-numeric: tabular-nums; }
.ch-ax { fill: var(--ch-ax); font-size: 10px; }
.ch-lbl { fill: var(--ink-2); font-size: 11.5px; }
.ch-val { fill: var(--ink); font-size: 10.5px; font-weight: 600; text-anchor: middle; }
.ch-hbar .ch-val, svg .ch-val[text-anchor="start"] { text-anchor: start; }
.ch-grid { stroke: var(--ch-grid); stroke-width: 1; }
.ch-base { stroke: var(--ch-base); stroke-width: 1; }
.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { opacity: .12; }
.ch-pt { stroke: var(--surface); stroke-width: 1.5; }
.ch-dot { stroke: var(--surface); stroke-width: 2; }
.ch-cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-band { fill: var(--ch-band); }
.ch-bar { stroke: var(--surface); stroke-width: 1; }
.ch-bar.ch-hl { fill: var(--kyte-red); }
.ch-hit { fill: transparent; cursor: crosshair; }
.ch-ref { stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 4 3; }
.ch-reflbl { fill: var(--ink); font-size: 10px; font-weight: 600; }
.ch-grow .ch-bar { transform-box: fill-box; transform-origin: bottom; animation: ch-grow .7s cubic-bezier(.2, .8, .2, 1) both; }
.ch-growx .ch-bar { transform-box: fill-box; transform-origin: left; animation: ch-growx .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ch-grow { from { transform: scaleY(0); } }
@keyframes ch-growx { from { transform: scaleX(0); } }

.ch-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; }
.ch-key { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 3px 0; font: inherit; font-size: .8rem; color: var(--ink-2); cursor: pointer; }
.ch-key.off { opacity: .4; text-decoration: line-through; }
.ch-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: var(--canvas); border-radius: 10px; padding: 8px 10px; font-size: .78rem; display: grid; gap: 3px; min-width: 120px; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45); }
.ch-tip b { font-weight: 600; margin-bottom: 1px; }
.ch-tip span { display: flex; align-items: center; gap: 6px; }
.ch-tip em { font-style: normal; margin-left: auto; padding-left: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-tip .tot { border-top: 1px solid color-mix(in srgb, var(--canvas) 25%, transparent); padding-top: 3px; }
.ch-top { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; }
.ch-top .ch-legend { flex: 1; margin: 0; }
.ch-tbtn { margin-left: auto; flex: none; border: 0; background: var(--fill); color: var(--ink-2); font: inherit; font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 8px; cursor: pointer; }
.ch-table { margin-top: 10px; max-height: 260px; overflow: auto; }
.ch-table table { font-size: .8rem; font-variant-numeric: tabular-nums; }
.ch-table th, .ch-table td { padding: 5px 8px 5px 0; border-bottom: 0.5px solid var(--hairline); text-align: left; white-space: nowrap; }
.ch-table th { color: var(--ink-2); font-weight: 500; }

.ch-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ch-dsvg { width: 170px; height: 170px; flex: none; }
.ch-arc { stroke: var(--surface); stroke-width: 1.5; transition: transform .15s; transform-origin: 85px 85px; cursor: pointer; }
.ch-arc.on { transform: scale(1.04); }
.ch-empty { fill: none; stroke: var(--fill); }
.ch-dtot { fill: var(--ink); font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.ch-dsub { fill: var(--ink-2); font-size: 10.5px; }
.ch-dleg { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; min-width: 160px; }
.ch-dleg li { display: grid; grid-template-columns: auto 1fr auto 3.2em; align-items: center; gap: 8px; font-size: .84rem; }
.ch-dleg span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-dleg b { font-variant-numeric: tabular-nums; }
.ch-dleg em { font-style: normal; color: var(--ink-3); font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }

.ch-spark { display: block; width: 100%; height: 30px; }
.sp-line { fill: none; stroke: var(--s1); stroke-width: 1.6; stroke-linejoin: round; }
.sp-area { fill: var(--s1); opacity: .1; }
.sp-end { fill: var(--s1); }

/* Dashboard layout */
.dash-head { align-items: flex-start; flex-wrap: wrap; }
.seg.period { margin: 6px 0 0; min-width: 240px; }
.seg.views { overflow-x: auto; scrollbar-width: none; }
.seg.views a { white-space: nowrap; }
.trial-note { background: var(--warn-tint); color: var(--warn); border-radius: var(--radius-m); padding: 10px 14px; font-size: .86rem; margin: 0 0 14px; }
.trial-note a { color: inherit; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: grid; align-content: start; gap: 2px; background: var(--surface); border-radius: var(--radius-l); padding: 14px 14px 12px; color: var(--ink); text-decoration: none; min-width: 0; }
a.kpi:active { transform: scale(.985); }
.kpi-l { font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.kpi-v { font-family: var(--font-display); font-size: 1.85rem; letter-spacing: -0.035em; line-height: 1.1; overflow-wrap: anywhere; }
.kpi-d { font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-d i { font-style: normal; font-weight: 500; color: var(--ink-3); }
.d-up { color: var(--good); } .d-down { color: var(--bad); } .d-flat { color: var(--ink-3); }
.kpi .chart { margin: 4px 0 0; }
.kpi-n { font-size: .74rem; color: var(--ink-3); line-height: 1.3; margin-top: 2px; }
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
@media (min-width: 900px) {
  .wrap:has(.dgrid) { max-width: 1120px; }
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dgrid .wide { grid-column: 1 / -1; }
}
.dcard { overflow: visible; }
.dcard .card-head { margin-bottom: 12px; }
.dcard > p.muted.small { margin: 8px 0 0; }
.jp { display: grid; gap: 2px; min-width: 130px; }
.jobs-tbl td { vertical-align: middle; }
tr.inactive td { opacity: .55; }
.mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 2px 0 14px; }
.mini-stats > div { background: var(--surface-2); border-radius: var(--radius-m); padding: 10px 10px 9px; display: grid; gap: 1px; min-width: 0; }
.mini-stats b { font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-stats span { font-size: .7rem; color: var(--ink-2); }
.mini-stats .warn b { color: var(--warn); } .mini-stats .neg b { color: var(--bad); }
@media (max-width: 420px) { .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- v2.3: brand mark ---------- */
.wm { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.wm-emblem { width: 34px; height: auto; display: block; }
.wm-name { font-family: var(--font-display); font-weight: 700; font-style: italic; letter-spacing: .02em; font-size: 1.15rem; line-height: 1; }
.wm-name b { color: var(--ink); }
.wm.big { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto 6px; }
.wm.big .wm-emblem { width: 72px; }
.wm.big .wm-name { font-size: 1.85rem; }
.wm.left { margin: 0 0 6px; }

/* ---------- v2.3: stock, cells ---------- */
.kpis.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpis.three-up .kpi { padding: 12px 10px 10px; }
.kpis.three-up .kpi-v { font-size: 1.45rem; }
@media (min-width: 700px) { .kpis.three-up .kpi-v { font-size: 1.85rem; } }
.model-card .sub { margin: 2px 0 0; }
.cell-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
@media (min-width: 640px) { .cell-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cf { background: var(--surface-2); border-radius: var(--radius-m); padding: 10px 10px 9px; display: grid; gap: 1px; position: relative; }
.cf b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cf span { font-size: .72rem; color: var(--ink-2); font-weight: 600; }
.cf.muted-cf b { color: var(--ink-2); }
.cf.neg b, .bin.neg b, td.neg, .ug.neg b { color: var(--bad); }
.sub-h { font-size: .8rem; color: var(--ink-2); font-weight: 600; margin: 14px 0 6px; }
.bins { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.bin { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--info-tint); }
.bin span { font-size: .7rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bin b { font-variant-numeric: tabular-nums; }
.bin.empty { background: var(--surface-2); }
.bin.empty b { color: var(--ink-3); }
.mini-details { margin-top: 12px; }
.mini-details > summary { cursor: pointer; font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.mini-details .sum { margin-top: 8px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-link { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--fill); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .84rem; }
.chip-link.on { background: var(--primary); color: var(--on-primary); }
.range-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.range-form label { flex: 1 1 130px; margin: 0; }
.range-form .btn { flex: none; }
.pipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.pipe-step { display: grid; gap: 2px; padding: 10px; border-radius: var(--radius-m); background: var(--surface-2); color: var(--ink-2); text-decoration: none; position: relative; }
.pipe-step b { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pipe-step span { font-size: .72rem; font-weight: 600; line-height: 1.25; }
.pipe-step .ico { width: 18px; height: 18px; }
.pipe-step.has b { color: var(--ink); }
.pipe-step.has.bad { background: var(--bad-tint); } .pipe-step.has.bad b { color: var(--bad); }
.pipe-step.has.ok { background: var(--good-tint); } .pipe-step.has.ok b { color: var(--good); }
.models-tbl th.grp { text-align: center; border-bottom: 0.5px solid var(--hairline); color: var(--ink-2); }
.models-tbl td { text-align: right; } .models-tbl td:first-child { text-align: left; }
.pad { padding: 0 4px; }
.model-edit > summary { cursor: pointer; }
.ungraded-row { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 10px; }
.ug { flex: 1 0 140px; display: grid; gap: 1px; background: var(--surface); border-radius: var(--radius-m); padding: 10px 12px; color: var(--ink); text-decoration: none; }
.ug b { font-family: var(--font-display); font-size: 1.3rem; }
.ug span { font-size: .72rem; color: var(--ink-2); }
.ug.low { box-shadow: inset 0 0 0 1.5px var(--warn); }

/* ---------- v2.3: photos ---------- */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.photo-in { display: grid; gap: 6px; margin: 0; position: relative; }
.photo-in input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }
.ph-label { font-weight: 600; font-size: .85rem; }
.ph-box { position: relative; display: grid; place-items: center; gap: 6px; min-height: 120px; border-radius: var(--radius-m); border: 1.5px dashed var(--ink-3); background: var(--surface-2); color: var(--ink-2); text-align: center; padding: 10px; overflow: hidden; }
.photo-in.has .ph-box { border-style: solid; border-color: var(--good); background: var(--good-tint); color: var(--good); }
.photo-in:focus-within .ph-box { outline: 2px solid var(--info); outline-offset: 2px; }
.ph-icon { width: 30px; height: 24px; border: 2px solid currentColor; border-radius: 6px; position: relative; }
.ph-icon::before { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; left: 8px; top: 5px; box-sizing: border-box; }
.ph-icon::after { content: ""; position: absolute; width: 8px; height: 4px; background: currentColor; left: 4px; top: -5px; border-radius: 2px 2px 0 0; }
.ph-text { font-size: .78rem; font-weight: 600; }
.ph-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-in.picked .ph-icon, .photo-in.picked .ph-text { display: none; }
.fail-box { margin-top: 14px; border-top: 0.5px solid var(--hairline); padding-top: 12px; }
.fail-box > summary { cursor: pointer; color: var(--bad); font-weight: 600; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.photos a { display: grid; gap: 4px; text-decoration: none; color: var(--ink-2); font-size: .74rem; }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--surface-2); }

/* ---------- v2.3: production illustrations ---------- */
:root {
  --v-wrap: #2f74c0; --v-wrap2: #1f5a9a; --v-cap: #e3e5e8; --v-neg: #b8bcc2; --v-ins: #f2e7c4;
  --v-holder: #2a2a2d; --v-hole: #151517; --v-ni: #cfd3d8; --v-weld: #6d7178; --v-copper: #c27a3a;
  --v-pcb: #1f6b3a; --v-chip: #151517; --v-frp: rgba(232, 214, 150, .45); --v-case: #373435; --v-case-face: #4a4647;
  --v-machine: #e8e8e6; --v-screen: #12261c; --v-lcd: #7cf0a8; --v-red: #e53238; --v-blk: #1b1a1b;
}
@media (prefers-color-scheme: dark) {
  :root { --v-machine: #39393c; --v-holder: #0b0b0c; --v-hole: #000; --v-case: #2b2829; --v-case-face: #3b3738; }
}
.vz { display: block; width: 100%; height: auto; font-family: var(--font); }
.vz-t { fill: var(--ink-2); font-size: 9px; font-weight: 600; }
.vz-t-b { fill: var(--ink); font-size: 11px; font-weight: 700; }
.vz-t-m { font-size: 9.5px; }
.vz-t-s { font-size: 8.5px; }
.vz-t-xs { font-size: 7px; }
.vz-on-dark { fill: #f4f4f5; }
.vz-wrap { fill: var(--v-wrap); } .vz-wrap2 { fill: var(--v-wrap2); }
.vz-cap { fill: var(--v-cap); stroke: rgba(0, 0, 0, .25); stroke-width: .5; }
.vz-neg { fill: var(--v-neg); }
.vz-ins { fill: var(--v-ins); }
.vz-shine { fill: #fff; opacity: .22; }
.vz-holder { fill: var(--v-holder); }
.vz-hole { fill: var(--v-hole); stroke: #3a3a3e; stroke-width: .8; }
.vz-ni { stroke: var(--v-ni); stroke-width: 5; stroke-linecap: round; opacity: .8; }
.vz-ni-pad { fill: var(--v-ni); opacity: .55; }
.vz-ni-band { fill: var(--v-ni); opacity: .85; }
.vz-weld { fill: var(--v-weld); }
.vz-copper { fill: var(--v-copper); }
.vz-spark { stroke: #ffb21e; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.vz-bus { fill: var(--v-copper); }
.vz-wire { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.vz-wire-red { stroke: var(--v-red); } .vz-wire-blk { stroke: var(--v-blk); }
@media (prefers-color-scheme: dark) { .vz-wire-blk { stroke: #8a8789; } }
.vz-red { fill: var(--v-red); } .vz-blk { fill: var(--v-blk); }
.vz-bal { fill: none; stroke: #f0c419; stroke-width: 1; opacity: .9; }
.vz-pcb { fill: var(--v-pcb); }
.vz-chip { fill: var(--v-chip); }
.vz-fet { fill: #2b2b2e; stroke: #9aa0a6; stroke-width: .5; }
.vz-ntc { fill: #f5d90a; stroke: #6b5d00; stroke-width: .6; }
.vz-frp { fill: var(--v-frp); stroke: rgba(180, 150, 60, .6); stroke-width: 1; }
.vz-case { fill: var(--v-case); }
.vz-case-face { fill: var(--v-case-face); }
.vz-engrave { fill: #d9d6d6; letter-spacing: .08em; }
.vz-conn { fill: #1b1a1b; }
.vz-machine { fill: var(--v-machine); stroke: var(--hairline); }
.vz-screen { fill: var(--v-screen); }
.vz-lcd { fill: var(--v-lcd); font-family: ui-monospace, Menlo, monospace; font-size: 9px; }
.vz-led { fill: #f0a02a; } .vz-led-ok { fill: #33c26b; }
.vz-slot { fill: #1f1f22; }
.vz-bin { fill: var(--surface-2); stroke: var(--hairline); }
.vz-arrow { stroke: var(--ink-3); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.vz-arrow-h { stroke: var(--ink-3); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vz-lens { fill: rgba(106, 166, 242, .18); stroke: var(--ink); stroke-width: 3; }
.vz-lens-h { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.vz-phone { fill: var(--ink); }
.vz-shutter { fill: #fff; }
.vz-meter { fill: #f0b04a; }
.vz-laser { stroke: var(--v-red); stroke-width: 1.4; }
.vz-laser-dot { fill: #fff; stroke: var(--v-red); stroke-width: 1.5; }
.vz-truck { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1; }
.vz-truck-cab { fill: var(--kyte-red); }
.vz-box { fill: #c9a26b; } .vz-tape { fill: #a8834f; }
.vz-wheel { fill: var(--ink); stroke: var(--surface); stroke-width: 3; }
.vz-grid { stroke: var(--hairline); stroke-width: 1; }
.vz-curve { fill: none; stroke: var(--s1); stroke-width: 2.2; stroke-linejoin: round; }
.vz-curve-lcd { stroke: var(--v-lcd); }
.vz-band-dis { fill: var(--s1); opacity: .07; }
.vz-dot { fill: var(--s1); stroke: var(--surface); stroke-width: 1.5; }
.vz-check circle { fill: var(--good); } .vz-check path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.st-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: center; background: var(--surface); border-radius: var(--radius-l); padding: 14px 16px; margin: 0 0 14px; }
.st-art .vz { max-height: 140px; }
.st-copy { display: grid; gap: 4px; }
.st-copy p { margin: 0; font-size: .88rem; line-height: 1.4; }
.st-step { font-size: .72rem; font-weight: 700; color: var(--kyte-red); letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 420px) { .st-hero { grid-template-columns: 1fr; } .st-art .vz { max-height: 150px; margin: 0 auto; } }
.vz-fig { margin: 8px 0 14px; }
.vz-fig figcaption { margin-top: 6px; }
.vz-stack { max-width: 520px; margin: 0 auto; }
.vz-pair { display: grid; gap: 10px; margin: 8px 0 14px; }
@media (min-width: 700px) { .vz-pair { grid-template-columns: 1fr 1fr; } }
.vz-pack { max-width: 460px; margin: 0 auto; }
.vz-test { max-width: 460px; margin: 4px auto 12px; }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.row-link .ico { color: var(--ink-2); margin-right: 10px; }
.rl-ico { display: flex; align-items: center; min-width: 0; }

.build-strip { list-style: none; margin: 0 0 14px; padding: 12px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 2px; overflow-x: auto; background: var(--surface); border-radius: var(--radius-l); }
.build-strip li { display: grid; justify-items: center; gap: 3px; text-align: center; position: relative; padding: 0 2px; }
.build-strip li + li::before { content: ""; position: absolute; top: 17px; right: calc(50% + 19px); width: calc(100% - 38px); height: 2px; background: var(--fill); }
.build-strip li.bs-done + li::before { background: var(--good); }
.bs-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--ink-3); }
.bs-ico .ico { width: 19px; height: 19px; }
.bs-done .bs-ico { background: var(--good-tint); color: var(--good); }
.bs-now .bs-ico { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 4px var(--info-tint); }
.bs-bad .bs-ico { background: var(--bad-tint); color: var(--bad); }
.bs-l { font-size: .7rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.bs-todo .bs-l { color: var(--ink-3); }
.bs-m, .bs-w { font-size: .66rem; color: var(--ink-2); white-space: nowrap; }
@media print { .st-hero, .build-strip { display: none; } }
.emp-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.emp-now .ico { width: 15px; height: 15px; vertical-align: -3px; margin: 0; }
.range-box { margin: 0 0 12px; }
.range-box > summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--ink-2); padding: 2px 4px 8px; }
.model-cards { display: grid; gap: 8px; }
.mcard { background: var(--surface-2); border-radius: var(--radius-m); padding: 12px; display: grid; gap: 8px; }
.mcard > b { font-size: .9rem; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mgrid span { display: grid; gap: 1px; }
.mgrid i { font-style: normal; font-size: .7rem; color: var(--ink-2); font-weight: 600; }
.mgrid b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mgrid small { font-size: .7rem; color: var(--ink-3); }
.wide-only { display: none; }
@media (min-width: 760px) { .model-cards, .mobile-only { display: none; } .wide-only { display: block; } }
.section-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 26px 4px 8px; }
.section-row .section { margin: 0; }

/* ---------- v2.3: station motion (transform and opacity only, so it stays smooth;
   runs only while the picture is on screen, and never for people who turn motion off) ---------- */
.vz-scene .vz-drop, .vz-scene .vz-press, .vz-scene .vz-scan, .vz-scene .vz-sweep, .vz-scene .vz-spin, .vz-scene .vz-drive, .vz-scene .vz-nudge { transform-box: fill-box; transform-origin: center; }
.vz-spoke { stroke: var(--surface); stroke-width: 1.6; stroke-linecap: round; }
.vz-bal.vz-flow { stroke-dasharray: 3 3; }
.vz-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .st-hero.play .vz-drop  { animation: vzDrop 2.4s cubic-bezier(.5, 0, .3, 1) infinite; }
  .st-hero.play .vz-press { animation: vzPress 1.2s ease-in-out infinite; }
  .st-hero.play .vz-flash { animation: vzFlash 1.2s steps(1) infinite; }
  .st-hero.play .vz-scan  { animation: vzScan 3.6s ease-in-out infinite alternate; }
  .st-hero.play .vz-sweep { animation: vzSweep 2.8s ease-in-out infinite alternate; }
  .st-hero.play .vz-blink { animation: vzBlink 1.6s ease-in-out infinite; }
  .st-hero.play .vz-d1 { animation-delay: .5s; } .st-hero.play .vz-d2 { animation-delay: 1s; }
  .st-hero.play .vz-flow  { animation: vzFlow 1s linear infinite; }
  .st-hero.play .vz-draw  { animation: vzDraw 3.2s ease-in-out infinite; }
  .st-hero.play .vz-spin  { animation: vzSpin 1.1s linear infinite; }
  .st-hero.play .vz-drive { animation: vzDrive 3s ease-in-out infinite alternate; }
  .st-hero.play .vz-nudge { animation: vzNudge 1.6s ease-in-out infinite; }
}
@keyframes vzDrop  { 0% { transform: translateY(-8px); opacity: 0; } 25% { opacity: 1; } 60%, 80% { transform: translateY(14px); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes vzPress { 0%, 100% { transform: translateY(0); } 45%, 55% { transform: translateY(4px); } }
@keyframes vzFlash { 0%, 40% { opacity: 0; } 45%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes vzScan  { from { transform: translate(-40px, -6px); } to { transform: translate(18px, 6px); } }
@keyframes vzSweep { from { transform: translateX(-34px); } to { transform: translateX(14px); } }
@keyframes vzBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes vzFlow  { to { stroke-dashoffset: -6; } }
@keyframes vzDraw  { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes vzSpin  { to { transform: rotate(360deg); } }
@keyframes vzDrive { from { transform: translateX(-3px); } to { transform: translateX(5px); } }
@keyframes vzNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* ---------- v2.3: the shared mission ---------- */
.mission { position: relative; overflow: hidden; border-radius: var(--radius-l); padding: 18px 18px 16px; margin: 0 0 14px; color: #f4f4f5;
  background: radial-gradient(120% 140% at 100% 0%, rgba(229, 50, 56, .55) 0%, rgba(229, 50, 56, 0) 55%), linear-gradient(160deg, #1d1b1c 0%, #2b2627 60%, #3a2324 100%); }
.mission > * { position: relative; }
.mission-wave { position: absolute; inset: auto 0 0 0; width: 100%; height: 70%; opacity: .5; }
.mission-wave path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.mw-1 { stroke: rgba(255, 107, 111, .7); stroke-dasharray: 6 10; }
.mw-2 { stroke: rgba(255, 255, 255, .25); stroke-dasharray: 2 8; }
@media (prefers-reduced-motion: no-preference) {
  .mw-1 { animation: mwFlow 6s linear infinite; }
  .mw-2 { animation: mwFlow 9s linear infinite reverse; }
}
@keyframes mwFlow { to { stroke-dashoffset: -160; } }
.mission-kicker { margin: 0 0 10px; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #ff8a8d; }
.mission-big { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 6px; }
.mission-sub { margin: 0; color: rgba(244, 244, 245, .7); font-size: .88rem; }
.mission-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mission-row div { display: grid; gap: 2px; }
.mission-row b { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mission-row span { font-size: .7rem; color: rgba(244, 244, 245, .68); line-height: 1.25; }
.mission-goal { margin-top: 14px; display: grid; gap: 6px; font-size: .78rem; color: rgba(244, 244, 245, .78); }
.mission-goal b { color: #fff; }
.mission-goal progress { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.mission-goal progress::-webkit-progress-bar { background: rgba(255, 255, 255, .14); border-radius: 99px; }
.mission-goal progress::-webkit-progress-value { background: linear-gradient(90deg, #e53238, #ff8a5b); border-radius: 99px; }
.mission-goal progress::-moz-progress-bar { background: linear-gradient(90deg, #e53238, #ff8a5b); border-radius: 99px; }
.mission-you { margin: 12px 0 0; font-size: .86rem; color: rgba(244, 244, 245, .85); }
.mission-you b { color: #fff; font-size: 1rem; }
.auth-tag { margin: 14px 0 0 !important; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }