/* Design-system layer. Loads AFTER style.css and tokens.css.
   2026-09-28: One Platform (YOKU ONE's system, Documents/YokuOne/one-platform-design-system.zip).
   tokens.css is YOKU ONE's own static/tokens.css copied as-is: One Platform's values under the
   Harbor Mist variable names, so every rule below re-themed without renaming. The One Platform
   specifics are marked "One Platform" below. It began 2026-09-24 as Harbor Mist.

   SCOPE, for now: only templates/delivery_form.html loads this file (through its own
   extra_head block), so every rule here is free to target shared class names (.btn, .card,
   .field ...) without touching any other page. When the rest of the app moves over, link it
   from base.html instead and delete that page's own <link>s.

   Head order: style.css -> tokens.css -> harbor.css (the package's Last-Wins Rule).
   Verify: --border reads #dbe3ec light / #0b2a4a dark. */

/* ── Legacy variable aliases ──────────────────────────────────────────────
   style.css's own names re-pointed at tokens. --border, --danger, --success and --warning
   exist under the SAME names in tokens.css and win on load order, so they are not redeclared. */
:root {
  --primary: var(--primary-500);
  --primary-dark: var(--primary-600);
  /* Not --primary-100: that token equals --card, so a tint on a card would vanish. */
  --primary-light: color-mix(in srgb, var(--primary-500) 16%, var(--card));
  --bg: var(--surface);
  --card: var(--surface-raised);
  --text: var(--ink);
  --muted: var(--ink-secondary);
  --danger-bg: var(--danger-tint);
  --warning-bg: var(--warning-tint);
  --radius: var(--radius-md);
  /* One Platform's two elevation levels (shadow-card, shadow-raised); never stacked. */
  --shadow-card: 0 1px 2px rgba(15,27,45,0.04), 0 4px 16px rgba(15,27,45,0.06);
  --shadow-raised: 0 8px 24px rgba(13,102,249,0.18);
}
[data-theme="dark"] {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.32);
  --shadow-raised: 0 8px 24px rgba(0,0,0,0.50);
}
:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* ── Typography: Prompt (Thai + Latin) for everything since 2026-10-01, YOKU ONE's typeface; titles set
   apart by weight (600), body 400. --font-mitr is a
   historical name; tokens.css points it at Prompt. Headings are ink - blue is kept for the one
   action ("one blue, one job"). */
.page-header h1,
.section-title,
.svc-group-title,
.delivery-block-title,
.sum-head,
.wiz-name,
.btn {
  font-family: var(--font-mitr);
  font-weight: 600;
}
.section-title, .delivery-block-title, .sum-head { color: var(--ink); }
a { color: var(--brand-text); }

/* ── Header band: gradient sheen + wave edge (required on every app in this system).
   It stays position: sticky from style.css - a sticky box is already the containing block
   for the ::after wave, so overriding it to relative would silently stop it sticking. */
.page-header {
  background:
    radial-gradient(115% 135% at 100% 0%, color-mix(in srgb, var(--on-brand-deep) 40%, transparent) 0%, transparent 58%),
    var(--brand-deep);
  color: var(--on-brand-deep);
  padding-bottom: 2.1rem;
  --wave-height: 30px;
  --wave-fill: var(--bg);
}

/* ── Wave divider (fleet component) ────────────────────────────────────────
   The layered wave edge between a brand-coloured band and whatever sits
   directly below it. Drawn as a MASK over a plain background-colour, not as
   a filled SVG background: the shape is one data-URI and the COLOUR is a
   token, so dark mode needs no second copy and a baked hex can no longer
   drift from the surface it is supposed to match (the old wave still said
   #e3eaf2 long after --surface-raised had moved).

   Three paths, all black — the mask reads their ALPHA, so the two low-alpha
   ones show as lighter ribbons over the band and the opaque one is the cut.

   Per use, set on the BAND (custom properties inherit into ::after):
     --wave-fill    whatever is directly below it — var(--surface) for a page
                    header, var(--card) for a sidebar or card-backed one.
     --wave-height  ~52px full-width, ~36px in a sidebar.
   preserveAspectRatio="none" squashes the shape, so amplitude only reads at
   the real height — judge it there, never in the viewBox. Give the band
   enough padding-bottom to clear the wave, or it eats its own text. Any new
   element can opt in with class="wave-divider"; the pseudo-element hooks are
   listed so every app's existing band picks it up unchanged. */
:root {
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='.18' d='M0 18c240 74 470 60 720 8s470-30 720 44V120H0Z'/%3E%3Cpath fill='%23000' fill-opacity='.3' d='M0 48c220-34 450 60 700 46s520-70 740 6V120H0Z'/%3E%3Cpath fill='%23000' d='M0 66c230 54 450-40 700-20s540 66 740 28V120H0Z'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
}

.wave-divider,
.page-header::after,
.app-brand::after,
.app-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  pointer-events: none;
  height: var(--wave-height, 52px);
  background: var(--wave-fill, var(--surface));
  -webkit-mask: var(--wave-mask);
  mask: var(--wave-mask);
}

/* ── Page width: the fleet ladder below 1024px; from there style.css's own wide column. */
@media (max-width: 1023px) {
  .page { max-width: var(--page-max); }
}

/* ── Cards: no shadow, one radius step. */
.card {
  box-shadow: var(--shadow-card);   /* One Platform: white cards floating on the tinted page */
  border-radius: var(--radius-md);
}

/* ── Field spacing. style.css's `.field:last-child { margin-bottom: 0 }` also hits the second
   field of every .field-row, so once a row stacks to one column that field's label-to-next-label
   gap collapsed while its neighbour kept 1rem. The row now spaces its own fields with row-gap and
   carries the 1rem below itself; a row that ends its card or address block adds nothing. */
.field-row { row-gap: 1rem; margin-bottom: 1rem; }
.field-row > .field { margin-bottom: 0; }
.field-row:last-child { margin-bottom: 0; }

/* style.css sizes text/password/date inputs but never listed email, so the email box rendered at
   the browser's default ~20ch. Same box as its neighbours. (Kept here, not added to style.css,
   so no other page's email field changes.) */
.field input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
}

/* ── Fields: their own --surface, a step off the card, with a border that reads as a
   control (the blend the package landed on) rather than style.css's 2px hairline. */
.field select,
.field input[type="text"],
.field input[type="email"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="password"],
.field textarea {
  border: 1px solid var(--border-strong);   /* One Platform: a control's edge is border-strong (3:1) */
  border-radius: var(--radius-sm);
  background: var(--surface-raised);        /* fields are white, like the card */
  color: var(--ink);
}
.field input[type="file"] {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink-secondary);
}
/* The native file button, styled like YOKU ONE's under One Platform instead of the browser grey. */
.field input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  color: var(--brand-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: var(--primary-100); }

.field select:focus,
.field input:focus,
.field textarea:focus {
  border-color: var(--primary);
  background: var(--surface-raised);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── Choice pills (services, applicant, VAT, consent). */
.checkbox-pill {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.checkbox-pill:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
}
.checkbox-pill input { accent-color: var(--primary); }

/* ── Buttons: small-cut corners, text colours that follow the fill in both themes. */
.btn { border-radius: var(--radius-sm); line-height: 1.2; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { border-width: 1px; }
.btn-outline:hover { background: var(--primary-light); }
.btn-ghost { border: 1px solid var(--border-blend); border-radius: var(--radius-sm); }
/* One Platform: the primary button is the one raised thing on the screen (shadow-raised); a
   pressed fill goes to brand-700. (The gold submit button went with Harbor Mist.) */
.btn-primary { box-shadow: var(--shadow-raised); }
.btn-primary:active { background: var(--primary-600); }
.btn-outline { border-color: var(--border-strong); color: var(--brand-text); }

/* ── The done page (delivery_done.html): the same blue primary button as the form, and the
   wrapper's background from the page token so it follows the theme. */
.success-wrapper { background: var(--bg); }
.success-title { font-family: var(--font-mitr); font-weight: 500; color: var(--success); }
.success-sub { color: var(--ink-secondary); }
[data-theme="dark"] .success-title { color: var(--on-success); }

/* ── Alerts: tint + matching text + a full border, never a coloured edge alone. */
.alert { border-radius: var(--radius-sm); }
.alert-danger { background: var(--danger-tint); color: var(--on-danger); border: 1px solid var(--danger); }
.alert-info { background: var(--primary-light); color: var(--ink); border: 1px solid var(--primary); }
.alert-info a { color: var(--primary); font-weight: 600; }

/* ── nav.js's loading bar, re-tinted from the old green. */
.nav-progress { background: color-mix(in srgb, var(--primary-500) 16%, transparent); }

/* ── Light / dark toggle: in the header's top-right, not floating - a fixed corner button sat
   on top of the form's own text and buttons on a phone. The sun/moon swap is CSS on
   [data-theme], never a textContent swap in JS. */
.theme-toggle-btn {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--on-brand-deep) 45%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--on-brand-deep);
  cursor: pointer;
}
.theme-toggle-btn:hover { background: color-mix(in srgb, var(--on-brand-deep) 15%, transparent); }
.theme-toggle-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.theme-toggle-btn .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }

@media print {
  .theme-toggle-btn, .page-header::after { display: none !important; }
}