/* Shared Postal UI grammar: pills, panels, rows, fields. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(255, 255, 255, 0.92); color: #000; }
* { scrollbar-width: thin; scrollbar-color: var(--nested-hover) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--nested); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; }

.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }

/* The Postal mark: two dots on top, one below left. */
.mark { display: block; width: 36px; height: 36px; color: var(--fg); }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--r-pill);
  background: var(--raised); color: var(--fg);
  font-size: 17px; font-weight: var(--w-strong); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.pill:hover { background: var(--raised-hover); }
.pill:active { transform: scale(0.98); }
.pill.primary { background: var(--primary); color: var(--on-primary); }
.pill.primary:hover { background: var(--primary-hover); }
.pill.ghost { background: transparent; }
.pill.ghost:hover { background: var(--raised); }
.pill.small { height: 38px; padding: 0 16px; font-size: 15px; }
.pill.icon-only { width: 48px; padding: 0; }
.pill.small.icon-only { width: 38px; }
.pill[disabled], .pill[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; transform: none; }
.pill.primary[disabled]:hover { background: var(--primary); }

/* ---------- surfaces ---------- */
.panel { background: var(--panel); border-radius: var(--r-panel); }
.card { background: var(--raised); border-radius: var(--r-card); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: var(--w-strong); color: var(--fg-2); background: var(--raised);
}
.badge.live { color: var(--live-ink); background: var(--live-tint); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); flex: none; }
.dot.live { background: var(--live); }
.dot.attention { background: var(--attention); }

/* ---------- fields ---------- */
.field-label { display: block; font-size: 15px; font-weight: var(--w-strong); margin-bottom: 8px; }
.field-hint { color: var(--fg-2); font-size: 14px; margin-top: 6px; }
.input, .textarea {
  width: 100%;
  background: var(--raised); border: 1px solid transparent; border-radius: var(--r-input);
  padding: 13px 16px; font-size: 17px; line-height: 1.45; color: var(--fg);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
  caret-color: var(--fg);
}
.textarea { resize: none; min-height: 120px; }
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:hover, .textarea:hover { background: var(--input-hover); }
.input:focus, .textarea:focus { outline: none; border-color: var(--line-strong); background: var(--input-hover); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- colour field (the store-header wash) ---------- */
.field { position: relative; overflow: hidden; isolation: isolate; background: var(--panel); }
.field::before {
  content: ""; position: absolute; inset: -25%; z-index: -2;
  background:
    radial-gradient(38% 46% at var(--f1-at, 8% 12%), var(--field-1), transparent 70%),
    radial-gradient(42% 52% at var(--f2-at, 38% 30%), var(--field-2), transparent 70%),
    radial-gradient(40% 50% at var(--f3-at, 62% 22%), var(--field-3), transparent 70%),
    radial-gradient(36% 56% at var(--f4-at, 84% 48%), var(--field-4), transparent 72%),
    radial-gradient(30% 60% at var(--f5-at, 98% 30%), var(--field-5), transparent 72%),
    var(--field-base);
  filter: blur(48px) saturate(1.1) hue-rotate(var(--field-rotate, 0deg));
  transform: translateZ(0);
}
.field::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.35) 45%, var(--panel) 92%);
}

.field.flat::after { display: none; }
.field.flat::before { inset: -40%; filter: blur(6px) saturate(1.15) hue-rotate(var(--field-rotate, 0deg)); }
.field.flat { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(112px + env(safe-area-inset-bottom)); z-index: 50;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: #fff; color: #000; border-radius: var(--r-pill);
  padding: 12px 20px; font-size: 15px; font-weight: var(--w-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}