/* ==========================================================================
   Hengli web design code · v1.0 · 2026-10-15
   Canonical copy: hengli-crossover/static/hengli.css
   Rules and rationale: docs/DESIGN_CODE.md

   Other Hengli web apps (HP6V conversion, …) copy this file unchanged and keep
   their app-specific styles in a sheet of their own. Change it here first,
   bump the version line, then re-copy it into the other apps.
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --navy:          #003087;
  --navy-dark:     #00205C;
  --steel:         #1E5FAD;
  --steel-light:   #EAF1FB;
  --steel-border:  #C2D8F2;

  /* Neutrals */
  --ground:        #F4F6FA;   /* page background */
  --white:         #FFFFFF;   /* cards, inputs, modals */
  --border:        #D8E2EE;
  --text:          #131E2D;
  --text-mid:      #3D5168;
  --text-muted:    #6B7E93;

  /* Status: a solid tone (icons, bars, the score arc) and a soft bg / fg pair
     (pills, alerts). Match scores map onto these: 95+ ok, 80+ info, 60+ warn,
     below 60 danger. */
  --ok:            #16A34A;  --ok-bg:     #DCFCE7;  --ok-fg:     #166534;
  --info:          #2563EB;  --info-bg:   #DBEAFE;  --info-fg:   #1D4ED8;
  --warn:          #D97706;  --warn-bg:   #FEF3C7;  --warn-fg:   #B45309;
  --danger:        #DC2626;  --danger-bg: #FEE2E2;  --danger-fg: #991B1B;

  /* Type */
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Cascadia Code', Consolas, monospace;

  /* Control heights: buttons and inputs share them so they sit flush */
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;

  /* Radii */
  --r-sm:   6px;     /* buttons, inputs, small boxes */
  --r:      8px;     /* cards, alerts, tables */
  --r-lg:   12px;    /* modals, floating panels */
  --r-pill: 999px;   /* chips, pills, counts */

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(12,31,61,.06);
  --shadow:    0 1px 4px rgba(12,31,61,.08), 0 2px 12px rgba(12,31,61,.05);
  --shadow-lg: 0 12px 48px rgba(0,20,60,.30);
  --focus:     0 0 0 3px rgba(30,95,173,.22);

  --header-h: 56px;
}

/* ── 2. Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { min-height: 100vh; font: 14px/1.6 var(--font); color: var(--text); background: var(--ground); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--steel); }
h1, h2, h3 { line-height: 1.3; }
code, .mono { font-family: var(--mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

/* ── 3. Page layout ────────────────────────────────────────────────────────── */
.page      { max-width: 880px; margin: 0 auto; padding: 32px 24px 80px; }
.page-wide { max-width: 1120px; }
.page-head { margin-bottom: 24px; }
.page-title { font-size: 24px; font-weight: 700; color: var(--navy); }
.page-lead  { margin-top: 4px; max-width: 680px; font-size: 14px; color: var(--text-mid); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ── 4. Site header ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h); padding: 0 32px;
  display: flex; align-items: center;
  background: var(--navy); box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.site-logo { display: flex; flex-shrink: 0; }
.site-logo img { height: 32px; width: auto; display: block; }
.header-divider { flex-shrink: 0; width: 1px; height: 24px; margin: 0 20px; background: rgba(255,255,255,.18); }
.site-nav { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: stretch; gap: 2px; }
.nav-tab {
  display: flex; align-items: center; gap: 6px; padding: 0 16px;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  color: rgba(255,255,255,.6); font-size: 13.5px; font-weight: 600;
  white-space: nowrap; text-decoration: none; transition: color .15s, border-color .15s;
}
.nav-tab:hover, .nav-tab.pulse { color: rgba(255,255,255,.95); }
.nav-tab.active { color: #fff; border-bottom-color: #fff; }
.nav-group { display: flex; align-items: stretch; gap: 2px; }
.nav-sep { flex-shrink: 0; align-self: center; width: 1px; height: 22px; margin: 0 10px 0 14px; background: rgba(255,255,255,.2); }
.nav-group-label { align-self: center; margin-right: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); white-space: nowrap; }
.nav-count { min-width: 18px; padding: 0 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.25); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.header-auth { margin-left: auto; padding-left: 16px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: 12.5px; white-space: nowrap; }
.header-user { color: #fff; font-weight: 600; }

/* ── 5. Buttons ────────────────────────────────────────────────────────────────
   One base class, one variant, at most one size:
     <button class="btn btn-primary">        md 40 px, the default
     <button class="btn btn-secondary btn-sm"> sm 32 px: table rows, header, inline
     <button class="btn btn-primary btn-lg">   lg 48 px: the page's one main action */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-md); padding: 0 16px;
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: var(--h-sm); padding: 0 12px; font-size: 12.5px; }
.btn-lg { height: var(--h-lg); padding: 0 24px; font-size: 14.5px; font-weight: 700; }
.btn-block { width: 100%; }
.btn-icon { width: var(--h-md); padding: 0; font-size: 15px; }
.btn-icon.btn-sm { width: var(--h-sm); }

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--navy-dark); }
.btn-secondary { background: var(--white); border-color: var(--border); color: var(--text-mid); }
.btn-secondary:hover:not(:disabled) { background: var(--steel-light); border-color: var(--steel); color: var(--steel); }
.btn-ghost { background: transparent; color: var(--steel); }
.btn-ghost:hover:not(:disabled) { background: var(--steel-light); }
.btn-ghost.btn-quiet { color: var(--text-muted); }
.btn-danger { background: var(--white); border-color: var(--border); color: var(--danger-fg); }
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger); }
.btn-ghost.btn-danger { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost.btn-danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
/* On the navy header only */
.btn-on-dark { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.btn-on-dark:hover:not(:disabled) { background: rgba(255,255,255,.24); }
.btn.is-done { border-color: var(--ok); color: var(--ok-fg); }

/* ── 6. Form controls ─────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-mid); }
.field-hint  { font-size: 12px; color: var(--text-muted); }
.input {
  width: 100%; height: var(--h-md); padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); color: var(--text); font-size: 13.5px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--text-muted); }
.input:focus { border-color: var(--steel); box-shadow: var(--focus); }
.input:disabled { background: var(--ground); color: var(--text-muted); }
.input-sm { height: var(--h-sm); padding: 0 8px; font-size: 12.5px; }
.input-lg { height: var(--h-lg); padding: 0 16px; font-size: 15px; }
.input-mono { font-family: var(--mono); font-weight: 600; letter-spacing: .03em; }
.input-mono::placeholder { font-family: var(--font); font-weight: 400; letter-spacing: 0; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7E93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
textarea.input { height: auto; min-height: 80px; padding: 8px 12px; line-height: 1.45; resize: vertical; }
textarea.input-mono { font-size: 12.5px; font-weight: 400; letter-spacing: 0; white-space: pre-wrap; tab-size: 4; }
/* A line of fields and buttons, bottoms aligned so a button sits flush with
   the inputs beside it. Widths come from the w-* classes on each .field. */
.form-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.w-xs { width: 90px; }  .w-sm { width: 140px; }  .w-md { width: 200px; }  .w-lg { width: 280px; }
.grow { flex: 1 1 240px; }

/* ── 7. Cards and section labels ──────────────────────────────────────────── */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.card-pad { padding: 24px; }
.card-raised { box-shadow: var(--shadow); }
.card-body { padding: 20px 22px; }
/* Collapsible card: <section class="card collapsible is-open">
   <button class="card-head">Title <span class="card-caret">▼</span></button>
   <div class="card-body">…</div></section>. site.js toggles .is-open. */
.card-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  font-size: 13px; font-weight: 700; color: var(--text); text-align: left;
  border-radius: var(--r); transition: background .12s;
}
.card-head:hover { background: var(--ground); }
.card-caret { margin-left: auto; font-size: 11px; color: var(--text-muted); transition: transform .2s; }
.collapsible { overflow: hidden; }
.collapsible.is-open > .card-head { border-bottom: 1px solid var(--border); border-radius: var(--r) var(--r) 0 0; }
.collapsible.is-open > .card-head .card-caret { transform: rotate(180deg); }
.collapsible:not(.is-open) > .card-body { display: none; }
.card-warn > .card-head { color: var(--warn-fg); box-shadow: inset 4px 0 0 var(--warn); }

/* Small uppercase label above a group of content */
.eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
/* Heading that divides a long page into sections */
.section-title { margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }

/* ── 8. Chips, pills ──────────────────────────────────────────────────────── */
/* Chip: a clickable sample value (example codes) */
.chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border: 1px solid var(--steel-border); border-radius: var(--r-pill); background: var(--steel-light);
  color: var(--steel); font-family: var(--mono); font-size: 11.5px; font-weight: 600; transition: background .12s;
}
.chip:hover { background: #D4E8F8; }
/* Pill: a read-only score or status */
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 1px 8px;
  border-radius: var(--r-pill); background: var(--ground); color: var(--text-mid);
  font-size: 11px; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill-ok     { background: var(--ok-bg);     color: var(--ok-fg); }
.pill-info   { background: var(--info-bg);   color: var(--info-fg); }
.pill-warn   { background: var(--warn-bg);   color: var(--warn-fg); }
.pill-danger { background: var(--danger-bg); color: var(--danger-fg); }
.pill-stop   { background: var(--danger-fg); color: #fff; letter-spacing: .06em; }
.pill-label  { min-width: 0; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* ── 9. Alerts and locked content ─────────────────────────────────────────── */
.alert { padding: 12px 16px; border: 1px solid; border-left-width: 4px; border-radius: var(--r); font-size: 13.5px; }
.alert-danger { background: var(--danger-bg); border-color: #FECACA; border-left-color: var(--danger); color: var(--danger-fg); }
.alert-warn   { background: var(--warn-bg);   border-color: #FDE68A; border-left-color: var(--warn);   color: var(--warn-fg); }
.alert-info   { background: var(--steel-light); border-color: var(--steel-border); border-left-color: var(--steel); color: var(--text-mid); }
.alert-ok     { background: var(--ok-bg);     border-color: #BBF7D0; border-left-color: var(--ok);     color: var(--ok-fg); }
/* Staff-only content shown to a signed-out visitor: what it is + Sign in */
.locked {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px;
  background: var(--steel-light); border: 1px solid var(--steel-border); border-radius: var(--r);
  font-size: 13px; color: var(--text-mid);
}
.locked-icon { font-size: 20px; line-height: 1; }
.locked-text { flex: 1; min-width: 220px; }
.locked-text b { display: block; font-size: 13.5px; color: var(--navy); }
.locked-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }

/* ── 10. Tables ───────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table-compact th, .table-compact td { padding: 5px 8px; font-size: 12.5px; }
.table-compact th { font-size: 11px; }
.table .num { text-align: center; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap.bordered { border: 1px solid var(--border); border-radius: var(--r); }
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); }

/* ── 11. Modal and the staff sign-in box (built by site.js) ───────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,16,38,.55); }
.modal { position: relative; width: 100%; max-width: 400px; padding: 28px 28px 24px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-close { position: absolute; top: 10px; right: 10px; }
.modal-title { font-size: 18px; font-weight: 700; color: var(--navy); }
.modal-sub { margin: 4px 0 20px; font-size: 13px; color: var(--text-mid); }
.modal .field + .btn, .modal .field + .field { margin-top: 16px; }
.si-email { display: flex; gap: 8px; }
.si-email .input:last-child { flex: 0 0 190px; }
.si-code { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.si-msg { margin-top: 12px; font-size: 12.5px; color: var(--text-mid); }
.si-msg:empty { display: none; }

/* ── 12. Small helpers ────────────────────────────────────────────────────── */
.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }
.text-ok { color: var(--ok-fg); }
.text-danger { color: var(--danger); }
.mt-2 { margin-top: 8px; }  .mt-3 { margin-top: 12px; }  .mt-4 { margin-top: 16px; }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--steel-border); border-top-color: var(--steel); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 13. Responsive ───────────────────────────────────────────────────────── */
/* The header drops its tabs to their own row once logo, tabs and sign-in no
   longer fit one line, and stops being sticky so it doesn't eat a phone's
   screen. */
@media (max-width: 820px) {
  html { scroll-padding-top: 16px; }
  .site-header { position: static; flex-wrap: wrap; height: auto; padding: 8px 16px 0; row-gap: 4px; }
  .header-divider { display: none; }
  .site-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; margin: 0 -10px; }
  .nav-group { flex-wrap: wrap; }
  .nav-sep { margin-left: 6px; }
  .nav-tab { height: 42px; padding: 0 10px; }
}
@media (max-width: 600px) {
  .page { padding: 20px 16px 60px; }
  .page-title { font-size: 21px; }
  .card-pad { padding: 18px 16px; }
  .card-body { padding: 16px 14px; }
  .header-user { display: none; }
  .form-row > .field, .form-row > .btn { width: 100%; flex-basis: 100%; }
  .si-email { flex-direction: column; }
  .si-email .input:last-child { flex-basis: auto; }
}