/* ============================================================================
   SCOUT — stylesheet
   ----------------------------------------------------------------------------
   Design language ported from yamata.pm:
     · near-black #202020 ground, off-white #f7f5f4 ink
     · hot-pink #ff336d is the ONLY action colour (pill CTAs, glow)
     · teal #5fa9a7 is the instrument colour (data, dial, positive)
     · cream #d8cfcd inverted slabs with 33px radii (the "document" panels)
     · bold UPPERCASE display type with heavy negative tracking
     · 12px/600/ls-2px uppercase eyebrows
     · hairline borders (#f7f5f414) instead of heavy fills
     · cards lift with `skewY(-2deg) translateY(-4px)` on hover
   ----------------------------------------------------------------------------
   TWO CONTRACTS — do not break either:
   1. assets/app.js paints two things with literal CSS-var strings:
        TONE_COLOR = { potential:'var(--green)', neutral:'var(--amber)', avoid:'var(--red)' }
        sectionBar.style.background = sc>=75 ? 'var(--green)' : sc>=50 ? 'var(--amber)' : 'var(--red)'
      so --green / --amber / --red must ALWAYS resolve, in every scope.
      (.panel-paper re-declares them locally, which is how the cream slab gets
       dark-enough tones without a single line of JS changing.)
   2. Every class name below is also emitted by index.php or app.js.
   ============================================================================ */

/* ---------- tokens ------------------------------------------------------- */
:root{
  color-scheme: dark;

  /* surfaces */
  --bg-dark:      #202020;
  --bg-surface:   #2a2a2a;
  --bg-elevated:  #333333;
  --bg-muted:     #666666;
  --bg-well:      #181717;
  --near-black:   #2f2e2f;
  --dark-gray:    #464445;
  --panel:        #262626;

  /* ink */
  --text-primary:   #f7f5f4;
  --text-secondary: #d8cfcd;
  --text-muted:     #9f9598;
  --cream:          #d8cfcd;

  /* accents */
  --pink:       #ff336d;
  --pink-hover: #ff4d80;
  --pink-glow:  #ff336d40;
  --teal:       #5fa9a7;
  --teal-hover: #72b8b6;
  --teal-glow:  #5fa9a740;
  --gold:       #e0a33e;

  /* hairlines */
  --border:       #f7f5f414;
  --border-hover: #f7f5f426;

  /* elevation */
  --shadow-sm:   0 1px 3px #0006;
  --shadow-md:   0 4px 12px #00000080;
  --shadow-lg:   0 10px 24px #00000080;
  --shadow-xl:   0 20px 40px #0009;
  --shadow-pink: 0 0 20px #ff336d4d, 0 0 60px #ff336d1a;
  --shadow-teal: 0 0 20px #5fa9a74d, 0 0 60px #5fa9a71a;

  /* radii */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   33px;
  --r-full: 1000px;

  /* motion */
  --t-fast: .15s ease;
  --t-base: .25s ease;
  --t-slow: .4s ease;

  /* type */
  --sans: "Chakra Petch", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- legacy aliases: required by app.js, never remove ---- */
  --green: var(--teal);
  --amber: var(--gold);
  --red:   var(--pink);
  --blue:  var(--teal);
  --ink:        var(--text-primary);
  --muted:      var(--text-muted);
  --muted-2:    var(--text-muted);
  --green-deep: var(--text-secondary);
  --accent:     var(--teal);
  --clay:       var(--pink);
  --paper:      var(--bg-dark);
  --surface:    var(--bg-surface);
  --side:       var(--bg-elevated);
  --canvas:     var(--bg-dark);
  --panel-2:    var(--bg-surface);
  --field:      var(--bg-elevated);
  --line:       var(--border);
  --line-2:     var(--border-hover);
  --pass:       var(--teal);
  --warn:       var(--gold);
  --fail:       var(--pink);
  --none:       var(--text-muted);
  --r:          var(--r-md);
  --r-lg2:      var(--r-lg);
  --shadow:     var(--shadow-lg);
  --on-tone:    #202020;
  --green-dim:  #5fa9a71f;
  --amber-dim:  #e0a33e1f;
  --red-dim:    #ff336d1f;
}

/* ---------- reset -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  background:var(--bg-dark);
  color:var(--text-primary);
  font-family:var(--sans);
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{ background:#ff336d4d; color:var(--text-primary); }

h1,h2,h3{ margin:0; font-weight:700; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; }
input{ font:inherit; color:inherit; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--teal-hover); }

*{ scrollbar-width:thin; scrollbar-color:var(--dark-gray) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--dark-gray);
  border-radius:var(--r-full);
  border:2px solid var(--bg-dark);
}
::-webkit-scrollbar-thumb:hover{ background:var(--bg-muted); }

/* ---------- shared atoms ------------------------------------------------- */
.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 28px; }

.muted{ color:var(--text-muted); }
.small{ font-size:12px; letter-spacing:.02em; }

/* yamata's gradient hairline */
.divider,
.hero::after{
  height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
}

/* ---------- topbar ------------------------------------------------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(24,22,22,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:68px;
}

.brand{ display:flex; align-items:center; gap:13px; min-width:0; }

/* pink tile with a scan line — the whole identity */
.brand-mark{
  position:relative;
  flex:none;
  width:30px; height:30px;
  border-radius:var(--r-sm);
  background:var(--pink);
  box-shadow:var(--shadow-pink);
}
.brand-mark::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:15px; height:3px;
  transform:translate(-50%,-50%);
  background:var(--bg-dark);
  border-radius:1px;
}

.brand-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-text strong{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:uppercase;
  line-height:1;
  color:var(--text-primary);
}
.brand-text small{
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  line-height:1.2;
}

.topbar-right{ display:flex; align-items:center; gap:8px; flex:none; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px;
  border-radius:var(--r-full);
  border:1px solid var(--border);
  background:var(--bg-surface);
  color:var(--text-secondary);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.chip .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 8px var(--teal-glow);
  flex:none;
}
.chip-token{ color:var(--pink); border-color:#ff336d33; }
.chip-link{ transition:border-color var(--t-base), color var(--t-base); }
.chip-link:hover{ border-color:var(--teal); color:var(--teal); }

/* ---------- hero --------------------------------------------------------- */
.hero{
  position:relative;
  padding:96px 0 56px;
}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
}

.hero h1{
  font-size:clamp(36px,6vw,72px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--text-primary);
  text-wrap:balance;
}
.hero h1 span{ color:var(--pink); }

.hero-sub{
  margin-top:22px;
  max-width:56ch;
  font-size:clamp(15px,1.5vw,19px);
  font-weight:500;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--text-secondary);
}

/* ---------- scanbar ------------------------------------------------------ */
.scanbar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:34px;
  max-width:660px;
  padding:8px 8px 8px 26px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.scanbar:focus-within{
  border-color:#ff336d66;
  box-shadow:0 0 0 4px #ff336d1a;
}

.scanbar-field{ flex:1; min-width:0; }
.scanbar-field input{
  width:100%;
  padding:12px 0;
  border:0;
  outline:0;
  background:none;
  color:var(--text-primary);
  font-family:var(--mono);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.01em;
}
.scanbar-field input::placeholder{ color:rgba(216,207,205,.25); }

/* ---------- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 26px;
  border:1px solid transparent;
  border-radius:var(--r-full);
  background:transparent;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.2;
  white-space:nowrap;
  transition:background var(--t-base), color var(--t-base),
             border-color var(--t-base), box-shadow var(--t-base),
             transform var(--t-fast);
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--pink);
  color:#fff;
  box-shadow:none;
}
.btn-primary:hover{ background:var(--pink-hover); box-shadow:var(--shadow-pink); }
.btn-primary:disabled{
  background:var(--dark-gray);
  color:var(--text-muted);
  box-shadow:none;
  cursor:default;
  transform:none;
}

.btn-ghost{
  border-color:var(--border-hover);
  color:var(--text-secondary);
  background:transparent;
}
.btn-ghost:hover{
  border-color:var(--teal);
  color:var(--text-primary);
  box-shadow:var(--shadow-teal);
}

.btn-sm{ padding:8px 17px; font-size:11.5px; }

/* ---------- mode switch -------------------------------------------------- */
.mode-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:26px;
  flex-wrap:wrap;
}
.mode-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.seg{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:var(--r-full);
  background:var(--bg-surface);
}
.seg-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  padding:8px 20px;
  border:0;
  border-radius:var(--r-full);
  background:transparent;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.15;
  transition:background var(--t-base), color var(--t-base);
}
.seg-btn em{
  font-style:normal;
  font-size:10px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:none;
  color:var(--text-muted);
  transition:color var(--t-base);
}
.seg-btn:hover{ color:var(--text-primary); }
.seg-btn.is-on{
  background:var(--text-primary);
  color:var(--bg-dark);
}
.seg-btn.is-on em{ color:rgba(32,32,32,.6); }

/* ---------- panels ------------------------------------------------------- */
.panel{
  margin-top:22px;
  padding:26px 28px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}

.panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.panel-head h2{
  font-size:clamp(16px,2vw,22px);
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:1.1;
  color:var(--text-primary);
}
.panel-head .muted.small{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:none;
}
.panel-head.sub{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.panel-head.sub h2{ font-size:clamp(13px,1.5vw,15px); letter-spacing:.01em; }

.count{
  flex:none;
  min-width:28px;
  padding:4px 9px;
  border:1px solid var(--border-hover);
  border-radius:var(--r-full);
  background:var(--bg-surface);
  color:var(--text-secondary);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  text-align:center;
}

.panel-progress .steps{ margin-bottom:22px; }

.panel-error{ border-color:#ff336d40; }
.panel-error #errorMsg{ color:var(--text-primary); font-size:15px; }
.panel-error #errorHint{ margin-top:8px; }

/* ---------- steps -------------------------------------------------------- */
.steps li{
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 0;
  border-top:1px solid var(--border);
  font-size:14px;
  color:var(--text-secondary);
}
.steps li:first-child{ border-top:0; }

.steps li .sp{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:15px; height:15px;
  border-radius:50%;
  border:1.5px solid var(--border-hover);
  border-top-color:var(--pink);
  font-size:10px;
  font-weight:700;
  line-height:1;
  animation:spin .7s linear infinite;
}
.steps li.ok .sp,
.steps li.fail .sp{ animation:none; border-color:transparent; }
.steps li.ok .sp{ color:var(--teal); background:#5fa9a71f; }
.steps li.ok .sp::after{ content:"\2713"; }
.steps li.fail .sp{ color:var(--pink); background:#ff336d1f; }
.steps li.fail .sp::after{ content:"!"; }

.steps li.ok{ color:var(--text-primary); }
.steps li.fail{ color:var(--pink); }

/* ---------- data chips --------------------------------------------------- */
.datachips{ display:flex; flex-wrap:wrap; gap:7px; }
.dchip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px;
  border:1px solid var(--border);
  border-radius:var(--r-full);
  background:var(--bg-surface);
  color:var(--text-muted);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.dchip .st{
  flex:none;
  width:6px; height:6px;
  border-radius:50%;
  background:currentColor;
}
.dchip.ok{ color:var(--teal); border-color:#5fa9a740; background:#5fa9a714; }
.dchip.cached{ color:var(--text-secondary); }
.dchip.fail{ color:var(--pink); border-color:#ff336d40; background:#ff336d14; }

/* ---------- verdict ------------------------------------------------------ */
#result{ display:block; }

.verdict-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.verdict-grid > .panel{ margin-top:22px; }

.verdict-main{
  background:var(--bg-surface);
  transition:border-color var(--t-slow), box-shadow var(--t-slow);
}
.verdict-main:has(.badge.potential){ border-color:#5fa9a740; box-shadow:0 0 0 1px #5fa9a71a; }
.verdict-main:has(.badge.neutral){ border-color:#e0a33e40; }
.verdict-main:has(.badge.avoid){ border-color:#ff336d4d; box-shadow:0 0 0 1px #ff336d1a; }

.verdict-top{
  display:flex;
  align-items:center;
  gap:30px;
}

/* dial */
.dial{
  position:relative;
  flex:none;
  width:152px; height:152px;
}
.dial svg{
  width:100%; height:100%;
  transform:rotate(-90deg);
  overflow:visible;
}
.dial-track{
  fill:none;
  stroke:#f7f5f414;
  stroke-width:7;
}
.dial-fill{
  fill:none;
  stroke:var(--green);
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:327;
  stroke-dashoffset:327;
  transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1), stroke var(--t-slow);
}
/* tone-matched bloom — :has() keeps app.js untouched */
.verdict-main:has(.badge.potential) .dial-fill{ filter:drop-shadow(0 0 14px var(--teal-glow)); }
.verdict-main:has(.badge.neutral)   .dial-fill{ filter:drop-shadow(0 0 14px #e0a33e40); }
.verdict-main:has(.badge.avoid)     .dial-fill{ filter:drop-shadow(0 0 14px var(--pink-glow)); }

.dial-num{
  position:absolute;
  inset:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
  padding-top:54px;
}
.dial-num b{
  font-size:46px;
  font-weight:700;
  letter-spacing:-.055em;
  line-height:1;
  color:var(--text-primary);
}
.dial-num small{
  font-size:12px;
  font-weight:500;
  letter-spacing:.05em;
  color:var(--text-muted);
}

/* head */
.verdict-head{ min-width:0; flex:1; }

.badge{
  display:inline-block;
  padding:6px 15px;
  border:1px solid var(--border-hover);
  border-radius:var(--r-full);
  background:var(--bg-elevated);
  color:var(--text-secondary);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.3;
}
.badge.potential{
  color:var(--teal);
  background:#5fa9a71f;
  border-color:#5fa9a740;
}
.badge.neutral{
  color:var(--gold);
  background:#e0a33e1f;
  border-color:#e0a33e40;
}
.badge.avoid{
  color:var(--pink);
  background:#ff336d1f;
  border-color:#ff336d4d;
  box-shadow:var(--shadow-pink);
}

.verdict-head h2{
  margin-top:16px;
  font-size:clamp(20px,2.6vw,31px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--text-primary);
  text-wrap:balance;
}

.verdict-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px 22px;
  margin-top:18px;
}
.meta-item{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.meta-item b{
  font-weight:600;
  color:var(--text-primary);
}

.token-line{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:18px;
  font-size:14px;
}
.token-line img{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--border-hover);
  object-fit:cover;
  flex:none;
}
.token-line b{ font-weight:600; letter-spacing:.02em; }

.thesis{
  position:relative;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--border);
  font-size:clamp(15px,1.6vw,18px);
  font-weight:500;
  line-height:1.55;
  letter-spacing:.012em;
  color:var(--text-secondary);
}

.tools-used{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.tools-label{
  margin-right:6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.tchip{
  display:inline-block;
  padding:5px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-full);
  background:var(--bg-dark);
  color:var(--text-secondary);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.03em;
}

/* ---------- flags -------------------------------------------------------- */
.flags-panel{ background:var(--panel); }

.flags li{
  padding:12px 0;
  border-top:1px solid var(--border);
  font-size:14px;
  line-height:1.5;
  color:var(--text-secondary);
}
.flags li:first-child{ border-top:0; padding-top:0; }
.flags li:last-child{ padding-bottom:0; }

.flags-gap li{ color:var(--text-muted); font-size:13px; }

.flags li.empty{
  display:block;
  padding:0;
  border-top:0;
  color:var(--text-muted);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.03em;
}

/* ---------- reasons ------------------------------------------------------ */
.reasons li{
  display:flex;
  gap:14px;
  padding:15px 0;
  border-top:1px solid var(--border);
}
.reasons li:first-child{ border-top-color:var(--border-hover); }
.reasons li:last-child{ padding-bottom:0; }

.reasons .mark{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  margin-top:2px;
  border-radius:50%;
  font-size:11px;
  font-weight:700;
  line-height:1;
}
.reasons li.supports .mark{ color:var(--teal); background:#5fa9a71f; }
.reasons li.against .mark{ color:var(--pink); background:#ff336d1f; }

.reasons .point{
  font-size:14.5px;
  font-weight:500;
  line-height:1.5;
  color:var(--text-primary);
}
.reasons .fieldline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.03em;
}
.reasons .fname{
  padding:3px 9px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-dark);
  color:var(--text-muted);
}
.reasons .fval{ color:var(--teal); }

.reasons li.empty{
  display:block;
  border-top:0;
  padding:0;
  color:var(--text-muted);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.03em;
}

/* ---------- rubric — the cream "document" slab --------------------------- */
.panel-paper{
  /* local palette inversion; app.js's var(--green|--amber|--red) follow along */
  --bg-dark:      #d8cfcd;
  --bg-surface:   rgba(32,32,32,.06);
  --bg-elevated:  rgba(32,32,32,.1);
  --bg-well:      #cdc3c1;
  --panel:        #d8cfcd;
  --text-primary:   #202020;
  --text-secondary: #3a3634;
  --text-muted:     rgba(32,32,32,.58);
  --cream:          #202020;
  --border:       rgba(32,32,32,.14);
  --border-hover: rgba(32,32,32,.28);
  --dark-gray:    rgba(32,32,32,.3);
  --teal:  #2f6b69;
  --gold:  #8a5a12;
  --pink:  #c41f4d;
  --green: #2f6b69;
  --amber: #8a5a12;
  --red:   #c41f4d;
  --blue:  #2f6b69;
  --pass:  #2f6b69;
  --warn:  #8a5a12;
  --fail:  #c41f4d;
  --on-tone: #f7f5f4;
  --green-dim: rgba(47,107,105,.14);
  --amber-dim: rgba(138,90,18,.14);
  --red-dim:   rgba(196,31,77,.14);

  background:#d8cfcd;
  color:#202020;
  border-color:transparent;
  border-radius:var(--r-xl);
  padding:30px 32px;
}

.sections{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:26px;
}
.sect{
  padding:18px 18px 16px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--bg-surface);
  transition:transform .3s ease-out, border-color var(--t-base);
}
/* yamata's signature card hover */
.sect:hover{ transform:skewY(-2deg) translateY(-4px); border-color:var(--border-hover); }
.sect.off{ opacity:.45; }

.sect .sn{
  font-size:11px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.sect .sv{
  margin-top:8px;
  font-size:34px;
  font-weight:700;
  letter-spacing:-.05em;
  line-height:1;
  color:var(--text-primary);
}
.sect .sw{
  margin-top:8px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.05em;
  color:var(--text-muted);
}
.sect .bar{
  height:3px;
  margin-top:14px;
  border-radius:var(--r-full);
  background:rgba(32,32,32,.16);
  overflow:hidden;
}
.sect .bar i{
  display:block;
  height:100%;
  width:0;
  border-radius:var(--r-full);
  background:var(--green);
  transition:width .6s cubic-bezier(.22,1,.36,1);
}

/* table */
.table-wrap{
  overflow-x:auto;
  border-radius:var(--r-md);
}
table.checks{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
table.checks th{
  padding:0 12px 11px;
  border-bottom:1px solid var(--border-hover);
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-align:left;
  color:var(--text-muted);
  white-space:nowrap;
}
table.checks th.num{ text-align:right; }
table.checks td{
  padding:12px;
  border-top:1px solid var(--border);
  vertical-align:top;
  color:var(--text-primary);
}
table.checks tr:first-child td{ border-top:0; }

table.checks .ck{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
table.checks .pill{
  flex:none;
  display:inline-block;
  min-width:62px;
  padding:4px 10px;
  border-radius:var(--r-full);
  background:var(--green);
  color:var(--on-tone);
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.5;
}
tr.pass .pill{ background:var(--pass); }
tr.warn .pill{ background:var(--warn); }
tr.fail .pill{ background:var(--fail); }
tr.unavailable .pill{
  background:transparent;
  border:1px solid var(--border-hover);
  color:var(--text-muted);
}
tr.hardstop .pill{ background:var(--fail); box-shadow:0 0 0 3px var(--red-dim); }

tr.unavailable td{ opacity:.5; }
tr.hardstop td{ background:var(--red-dim); }

.ck .note{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
}
/* NOTE: these must stay scoped as `table.checks td.*` — the bare `td.field`
   form is (0,1,1) and loses to `table.checks td` (0,1,2), silently killing
   the muted/secondary colour on the two mono columns. */
table.checks td.field{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}
table.checks td.val{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--text-secondary);
}
table.checks td.num{
  font-family:var(--mono);
  font-size:12px;
  text-align:right;
  white-space:nowrap;
}
.ded{ font-weight:600; color:var(--fail); }
.ded.amber{ color:var(--warn); }
.ded.zero{ font-weight:400; color:var(--text-muted); }

/* ---------- raw evidence ------------------------------------------------- */
.raw{
  margin:0;
  max-height:340px;
  overflow:auto;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-well);
  color:var(--text-secondary);
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.65;
  letter-spacing:.01em;
  white-space:pre-wrap;
  word-break:break-word;
}

/* ---------- disclaimer + footer ------------------------------------------ */
.disclaimer{
  position:relative;
  margin-top:38px;
  padding-top:26px;
  border-top:1px solid var(--border);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--text-muted);
}

.footer{
  margin-top:56px;
  border-top:1px solid var(--border);
  background:#191919;
}
.footer-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:26px;
  padding-bottom:26px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.footer-in .muted{ color:var(--text-muted); }

/* ---------- motion ------------------------------------------------------- */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

#progress:not([hidden]),
#errorPanel:not([hidden]),
#result:not([hidden]){ animation:fade .35s ease both; }

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

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 900px){
  .wrap{ padding:0 20px; }
  .hero{ padding:68px 0 44px; }
  .verdict-grid{ grid-template-columns:minmax(0,1fr); }
  .sections{ grid-template-columns:minmax(0,1fr); }
  .sect:hover{ transform:none; }
  .panel{ padding:22px 20px; }
  .panel-paper{ padding:24px 20px; }
}

@media (max-width: 640px){
  .topbar-in{ min-height:60px; }
  .brand-text small{ display:none; }
  .chip-chain{ display:none; }

  .hero{ padding:52px 0 36px; }
  .hero h1{ letter-spacing:-.035em; }

  .scanbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:16px;
    border-radius:var(--r-lg);
  }
  .scanbar-field input{ padding:6px 0; }
  .scanbar .btn{ width:100%; }

  .mode-row{ gap:12px; }
  .seg{ width:100%; }
  .seg-btn{ flex:1; align-items:center; text-align:center; padding:9px 12px; }

  .verdict-top{ flex-direction:column; align-items:center; text-align:center; }
  .verdict-head{ text-align:center; }
  .verdict-meta{ justify-content:center; }
  .token-line{ justify-content:center; }
  .panel-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .footer-in{ justify-content:flex-start; }
}