/* ===========================================================================
   Privacy Center — Design System (Swiss / International Typographic Style)
   Shared by the public form and the staff dashboard (served at /css/tokens.css).
   - Typeface: IBM Plex Sans (self-hosted; IBM Plex Mono for code/reference IDs)
   - Spacing : 8px base, scaling both ways
   - Type    : 18px standard
   - Layout  : strict 12-column grid, flush-left, generous whitespace
   =========================================================================== */

/* ---- Fonts (self-hosted — no third-party requests) ---- */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/fonts/ibm-plex-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
}

:root {
  /* ---- Spacing scale (8px base) ---- */
  --s-1: 1px;   --s-2: 2px;   --s-4: 4px;   --s-8: 8px;
  --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px;
  --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;
  --s-192: 192px; --s-256: 256px; --s-384: 384px; --s-512: 512px;

  /* ---- Type scale (18px standard) ---- */
  --fs-12: 12px; --fs-15: 15px; --fs-18: 18px; --fs-21: 21px;
  --fs-24: 24px; --fs-27: 27px; --fs-30: 30px; --fs-33: 33px; --fs-36: 36px;

  --lh-tight: 1.15;
  --lh-base: 1.45;

  /* ---- Palette (restrained, Swiss) ---- */
  --ink: #161616;          /* near-black text */
  --ink-2: #525252;        /* secondary text */
  --ink-3: #6f6f6f;        /* tertiary / hints */
  --paper: #ffffff;
  --paper-2: #f4f4f4;      /* page background */
  --line: #c6c6c6;         /* hairlines */
  --line-2: #e0e0e0;       /* lighter dividers */
  --accent: #0f3d63;       /* SureSwift deep blue */
  --accent-ink: #ffffff;
  --focus: #0f62fe;        /* focus ring */
  --error: #da1e28;
  --error-bg: #fff1f1;
  --ok: #198038;
  --warn-bg: #fcf4d6;

  --grid-gap: var(--s-16);
  --maxw: 1152px;          /* 12 × 96 */
}

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

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, Arial, sans-serif;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--paper-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }

a { color: var(--accent); text-underline-offset: 2px; }

code, kbd, samp, .mono {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* ---- Typographic primitives ---- */
.display {
  font-size: var(--fs-36); line-height: var(--lh-tight); font-weight: 600;
  letter-spacing: -0.01em;
}
.title { font-size: var(--fs-30); line-height: var(--lh-tight); font-weight: 600; }
.heading { font-size: var(--fs-24); line-height: var(--lh-tight); font-weight: 600; }
.subhead { font-size: var(--fs-21); font-weight: 600; }
.body { font-size: var(--fs-18); }
.small { font-size: var(--fs-15); }
.micro { font-size: var(--fs-12); }

/* Swiss-style overline label: uppercase, tracked-out, small */
.overline {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- 12-column grid ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}

@media (max-width: 720px) {
  [class*="col-"] { grid-column: span 12; }
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-24); }

/* ---- Form controls (shared, Swiss: square, hairline, blue focus) ---- */
.label {
  display: block;
  font-size: var(--fs-15);
  font-weight: 600;
  margin-bottom: var(--s-8);
}
.req { color: var(--error); }
.optional { color: var(--ink-3); font-weight: 400; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-18);
  color: var(--ink);
  background: var(--paper);
  border: var(--s-1) solid var(--ink);
  border-radius: 0;
  padding: var(--s-12) var(--s-16);
  appearance: none;
  -webkit-appearance: none;
}
/* Strip the WebKit search affordances so it matches other controls exactly. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 0;
  border-color: var(--ink);
}
input.invalid, select.invalid, textarea.invalid { border-color: var(--error); outline-color: var(--error); }

select {
  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 fill='%23161616' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-16) center;
  padding-right: var(--s-48);
}

.hint { color: var(--ink-3); font-size: var(--fs-15); margin-top: var(--s-8); }
.error-text { color: var(--error); font-size: var(--fs-15); margin-top: var(--s-8); }

.checkbox { display: flex; align-items: flex-start; gap: var(--s-12); cursor: pointer; font-size: var(--fs-15); }
.checkbox input { width: var(--s-24); height: var(--s-24); margin: 0; flex: 0 0 auto; accent-color: var(--accent); }

/* ---- Buttons (square, solid; Swiss) ---- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 1;
  padding: var(--s-16) var(--s-24);
  border: var(--s-1) solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  background: var(--accent);
  color: var(--accent-ink);
}
.btn:hover { background: #0c3050; border-color: #0c3050; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color: var(--accent-ink); }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---- Notices ---- */
.notice { padding: var(--s-16); font-size: var(--fs-15); border-left: var(--s-4) solid var(--ink); background: var(--paper); }
.notice--info { border-left-color: var(--focus); background: #d0e2ff; }
.notice--warn { border-left-color: #b28600; background: var(--warn-bg); }
.notice--error { border-left-color: var(--error); background: var(--error-bg); color: var(--error); }