/* ============================================================
   Swiftpoint Hub — .spcf checker (/swiftpoint/check)

   Local-only profile viewer: parses the file in the browser,
   nothing is uploaded or stored.

   Tokens, the reset and the header come from the shared layers
   (tokens.css, base.css, hdr.css), loaded before this file.
   ============================================================ */

/* ============ Header ============ */
/* Entirely owned by css/hdr.css. The checker used to narrow the bar to
   1080px, which meant the nav sat a different distance from the edge here
   than on every other page; the bar is now the same everywhere and the
   page is the thing that adapts to it. */

/* ============ Intro / dropzone ============ */

.shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.intro { max-width: 640px; margin: 0 auto 56px; text-align: center; }

.kicker {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 12px;
}

.intro h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.accent { color: var(--lime); }

.intro-sub {
  color: var(--text-dim);
  font-size: 15.5px;
  margin: 0 0 30px;
}

.intro-note {
  margin: 0 0 30px;
  padding: 12px 18px;
  border: 1px solid rgba(198, 245, 66, 0.28);
  border-radius: var(--r-pill);
  background: var(--lime-dim);
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.intro-note strong { color: var(--lime); font-weight: 600; }
.intro-note em { color: var(--text); font-style: normal; }
.intro-note .mono { color: var(--text); }

.drop {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: 40px 24px;
  background: var(--bg-raise);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.drop.dragover {
  border-color: var(--lime);
  background: var(--lime-dim);
  transform: translateY(-2px);
}

.drop-icon {
  font-size: 34px;
  color: var(--lime);
  line-height: 1;
  margin-bottom: 6px;
}

.drop-main { font-size: 17px; font-weight: 600; margin: 0; }
.drop-sub { color: var(--text-faint); font-size: 13.5px; margin: 0; }

.error {
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px solid var(--red);
  background: var(--red-dim);
  border-radius: var(--r-sm);
  color: var(--red);
  font-size: 14px;
}

.example { color: var(--text-faint); font-size: 13.5px; margin: 16px 0 0; }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--lime);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--lime-hi); }

/* ============ Results ============ */

.results {
  display: flex;
  flex-direction: column;
  gap: 26px;
  animation: fadeUp 0.4s var(--ease);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* summary */

.summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-raise);
}

.sum-chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}

.sum-chip b { color: var(--text); font-weight: 600; }
.sum-chip .fname { color: var(--text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The "jump to sub-profile import" button used to live here, floating
   between the summary and the warnings. It is the header tool strip's
   "Sub-profile import" button now (#ck-merge) — one control, always in
   the same place, instead of one that appears and disappears. */

/* warnings */

.warnings { display: flex; flex-direction: column; gap: 12px; }

.alert {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.5;
}

.alert-icon { flex: 0 0 auto; }

.alert-danger {
  background: var(--red-dim);
  border: 1px solid var(--red);
  color: var(--red);
}

.alert-warn {
  background: var(--orange-dim);
  border: 1px solid var(--orange);
  color: var(--orange);
}

.alert strong { color: inherit; }

/* chapters */

.nav-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.chapter {
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.chapter:hover { color: var(--text); border-color: var(--line-strong); }

/* ============ Group card ============ */

.groups { display: flex; flex-direction: column; gap: 26px; }

.group-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raise);
  overflow: hidden;
}

.group-card.sub { margin-left: 0; }
.group-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.group-title { margin: 0; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; }

.group-sub {
  color: var(--text-faint);
  font-size: 13px;
}

.badge-layer {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet);
  border: 1px solid rgba(182, 155, 255, 0.3);
  background: rgba(182, 155, 255, 0.08);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}

.app-chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--teal);
  border: 1px solid rgba(79, 216, 196, 0.28);
  background: rgba(79, 216, 196, 0.08);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}

.group-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 26px; }

.h2-sub {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 10px;
}

/* spec grid */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.spec-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
}

.spec-card .label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
}

.spec-card .value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}

/* on-load outputs */

.onload {
  border: 1px solid rgba(255, 159, 69, 0.28);
  background: rgba(255, 159, 69, 0.05);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onload-title { margin: 0; font-weight: 600; font-size: 14.5px; color: var(--orange); }
.onload-desc { margin: 0; color: var(--text-dim); font-size: 13px; }

.key-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============ Badges ============ */

.key-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lime-hi);
  background: var(--lime-dim);
  border: 1px solid rgba(198, 245, 66, 0.22);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  white-space: nowrap;
  display: inline-block;
}

.key-badge.loop { color: var(--pink); background: rgba(255, 110, 169, 0.1); border-color: rgba(255, 110, 169, 0.3); }
.key-badge.dim { color: var(--text-dim); background: transparent; border-color: var(--line); }

/* ============ Button mappings ============ */

.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.map-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.map-name { margin: 0; font-size: 15px; font-weight: 600; }

.map-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

.map-row {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.map-row:last-child { border-bottom: none; }
.map-row.deep { background: rgba(182, 155, 255, 0.05); }

.trig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13px;
}

/* The trigger's own name, next to the depth and the "requires" pills.
   It had no rule, so it inherited the chip's weight and read as an
   annotation rather than as the thing the chip is about. */
.trig-label {
  color: var(--text);
  font-weight: 600;
}

.trig .depth {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}

.map-out { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.map-label { color: var(--text-faint); font-size: 12.5px; }

.deact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}

.deact .deact-cap { font-size: 11px; color: var(--text-faint); }

/* ============ Force stages ============ */

.force-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 14px;
}

.force-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.force-button { font-weight: 600; font-size: 14.5px; }
.force-count { font-family: var(--font-mono); font-size: 12px; color: var(--violet); }

.spec-sub {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.force-track {
  position: relative;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: 6px;
}

.force-band { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; }
.force-band.light { background: linear-gradient(90deg, rgba(79, 216, 196, 0.16), rgba(79, 216, 196, 0.1)); }
.force-band.deep {
  background: linear-gradient(90deg, var(--violet), var(--violet-dim));
  color: var(--on-solid);
  font-size: 11px;
  padding-left: 8px;
  letter-spacing: 0.04em;
}

.force-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.rung {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rung:last-child { margin-bottom: 0; }

.rung-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rung-tag { font-size: 12.5px; font-weight: 600; }
.rung-tag.light { color: var(--teal); }
.rung-tag.deep { color: var(--violet); }
.rung-range { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }

.rung-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.rung-fill { position: absolute; inset: 0 auto 0 0; }
.rung-fill.light { background: var(--teal); }
.rung-fill.deep { background: var(--violet); }

.rung-out { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rung-label { color: var(--text-faint); font-size: 12px; }

/* ============ Sequences ============ */

.seq-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  overflow: hidden;
}

.seq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.seq-title { margin: 0; font-size: 14.5px; font-weight: 600; }
.seq-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }

.seq-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.seq-step:last-child { border-bottom: none; }

.step-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime-dim);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seq-input {
  flex: 0 0 auto;
  min-width: 150px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
}

.seq-out { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============ Tilt ============ */

.tilt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tilt-title { margin: 0; font-size: 14px; font-weight: 600; }

.tilt-gauge { position: relative; padding-left: 22px; }

.tilt-axis {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  display: flex;
}

.tilt-gauge svg { width: 16px; height: 16px; }

.tilt-track {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.tilt-level {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.28);
}

.tilt-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  border-radius: var(--r-pill);
}

.tilt-out { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ============ OLED ============ */

.oled-inline { display: flex; flex-wrap: wrap; gap: 10px; }

.oled-card {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  background: #060a0e;
  border: 1px solid rgba(79, 216, 196, 0.18);
  border-radius: var(--r-sm);
  padding: 8px;
}

.oled-canvas {
  width: 128px;
  height: 64px;
  image-rendering: pixelated;
  background: #060a0e;
  border-radius: 4px;
  display: block;
}

.oled-cap {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  text-align: center;
}

.oled-block { display: flex; flex-direction: column; gap: 8px; }

.oled-anim { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 10px; background: #060a0e; border: 1px solid rgba(79, 216, 196, 0.18); border-radius: var(--r-sm); }

.oled-anim-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.oled-anim-play {
  background: var(--lime-dim);
  border: 1px solid rgba(198, 245, 66, 0.3);
  color: var(--lime);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oled-anim-play.playing { background: var(--pink); border-color: var(--pink); }

.oled-anim-count, .oled-anim-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }

.oled-frames { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============ Sub-profile import (merge) ============ */

.merge {
  border: 1.5px solid var(--line-strong);
  border-left: 3px solid var(--lime);
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 240px at 90% -20%, rgba(198, 245, 66, 0.06), transparent 60%),
    var(--bg-raise);
  padding: 26px 28px 30px;
}

.merge-head { margin-bottom: 20px; }

.merge-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.01em;
}

.merge-sub {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
  max-width: 72ch;
}

.merge-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 20px;
  align-items: start;
}

.merge-col { display: flex; flex-direction: column; gap: 16px; }

.merge-label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.merge-label .mono { text-transform: none; letter-spacing: 0; }

.drop-sm {
  padding: 22px 18px;
  gap: 3px;
  cursor: pointer;
  justify-content: center;
  text-align: center;
}

.drop-sm .drop-icon { font-size: 26px; margin-bottom: 2px; }
.drop-sm .drop-main { font-size: 14.5px; }
.drop-sm .drop-sub { font-size: 12.5px; }

.merge-status {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-dim);
  min-height: 20px;
}

.merge-opt { display: flex; flex-direction: column; gap: 8px; }

.merge-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
}
.merge-select:focus { border-color: var(--lime); outline: none; }

.merge-pos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.merge-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-dim);
  cursor: pointer;
}

.merge-radio input { accent-color: var(--lime); width: 14px; height: 14px; cursor: pointer; }

.merge-btn {
  align-self: flex-start;
  border: 0;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--lime);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.merge-btn:hover:not(:disabled) { background: var(--lime-hi); transform: translateY(-1px); }
.merge-btn:active:not(:disabled) { transform: translateY(0); }
.merge-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.merge-preview {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--text-dim);
}

.merge .error { margin-top: 14px; }

/* ============ Raw JSON ============ */

.raw-box {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raise);
  overflow: hidden;
}

.raw-box summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  user-select: none;
}

.raw-box pre {
  margin: 0;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  overflow: auto;
  max-height: 520px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============ Responsive ============ */

@media (max-width: 640px) {
  .merge-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .shell { padding: 36px 16px 56px; }
  .map-grid { grid-template-columns: 1fr; }
  .seq-input { min-width: 0; width: 100%; }
  .seq-step { flex-wrap: wrap; }
}