/* ==========================================================================
   base.css — design tokens + shared components used on every page.
   Day/Night palettes ride on CSS variables; body.night switches the theme.
   ========================================================================== */

/* Instrument Sans, self-hosted (was Google Fonts): one variable file covers 400-700 */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.e2385a017626.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/instrument-sans-latin.e35fad09c70b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html, body { margin: 0; padding: 0; }

/* native-app feel on phones: no gray flash when tapping, and no 300ms
   double-tap-zoom delay on every button press */
* { -webkit-tap-highlight-color: transparent; }
body { touch-action: manipulation; }

body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color .25s, color .25s;

  /* Day palette */
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel2: #eceef2;
  --text: #181b22;
  --muted: #667085;
  --border: #e3e6ec;
  --accent: #3d63dd;
  --ok: #178a52;
  --warn: #b07b14;
  --bad: #d64545;
  --shadow: 0 1px 2px rgba(16, 24, 40, .07);

  /* Derived */
  --accent2: color-mix(in oklab, var(--accent) 12%, var(--panel));
  --accentText: color-mix(in oklab, var(--accent) 80%, var(--text));
  --ok2: color-mix(in oklab, var(--ok) 12%, var(--panel));
  --warn2: color-mix(in oklab, var(--warn) 14%, var(--panel));
  --bad2: color-mix(in oklab, var(--bad) 12%, var(--panel));
}

body.night {
  --bg: #0d0f14;
  --panel: #151821;
  --panel2: #1d212c;
  --text: #edeff4;
  --muted: #8b93a7;
  --border: #272c3a;
  --accent: #6e8ef5;
  --ok: #3fbf7f;
  --warn: #d9a83f;
  --bad: #e57373;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accentText); }

input, textarea, select, button { font: inherit; color: inherit; }

input, textarea, select {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }

button { cursor: pointer; }

/* ---- logo mark ---- */
.logo-mark {
  border-radius: 9px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- buttons ---- */
.btn {
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  text-align: center;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); color: #fff; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.btn-ghost:hover { color: var(--text); }
.btn-soft { background: var(--panel2); border: none; }
.btn-accent-soft {
  background: var(--accent2);
  border: 1px solid var(--border);
  color: var(--accentText);
}
.btn-danger-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--bad);
}
.btn-danger { background: var(--bad); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 7px; }

/* ---- pills / chips ---- */
.pill {
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 11px;
  display: inline-block;
  white-space: nowrap;
}
.pill-ok { color: var(--ok); background: var(--ok2); }
.pill-warn { color: var(--warn); background: var(--warn2); }
.pill-bad { color: var(--bad); background: var(--bad2); }
.pill-muted { color: var(--muted); background: var(--panel2); }
.pill-accent { color: var(--accentText); background: var(--accent2); }

.chip {
  background: var(--panel2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.chip.on {
  background: var(--accent2);
  color: var(--accentText);
  border-color: var(--accent);
}

/* chip with a small × delete button attached */
.chip-group { display: inline-flex; align-items: stretch; }
.chip-in-group { border-radius: 999px 0 0 999px; border-right: none; }
.chip-x {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 999px 999px 0;
  padding: 0 10px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.chip-x:hover { color: var(--bad); }

/* merge-field code buttons in the personalization reference */
.merge-code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accentText);
  flex-shrink: 0;
}
.merge-code:hover { border-color: var(--accent); }

/* ---- cards ---- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.card-pad { padding: 20px; }
.card-lg { border-radius: 14px; padding: 24px; }

.empty-state {
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  padding: 56px 24px;
  text-align: center;
}
.empty-state h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.empty-state p { font-size: 13px; color: var(--muted); margin: 0 0 18px; }

/* ---- typography helpers ---- */
.label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}
.label-upper {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--muted);
}
.muted { color: var(--muted); }
.mono { font-family: monospace; }
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

/* ---- stacked field ---- */
.field { display: flex; flex-direction: column; }
.field + .field { margin-top: 12px; }

/* ---- modals ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, .5);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
  /* keep the scrollbar off the content and inside the rounded corners */
  scrollbar-gutter: stable;
}

/* ---- themed scrollbars (everywhere) — thin, subtle, no overlap ---- */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
.modal h3 { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
[hidden] { display: none !important; }

/* ---- toast ---- */
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  z-index: 60;
  animation: toastIn .2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  max-width: 80vw;
}

/* ---- misc ---- */
.usage-track { height: 8px; background: var(--panel2); border-radius: 99px; }
.usage-fill { height: 8px; border-radius: 99px; background: var(--accent); transition: width .3s; }

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flex { display: flex; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.wrap { flex-wrap: wrap; }

/* no-zoom-on-focus: iPhone zooms into any field under 16px when you tap it,
   which throws the whole layout off. 16px on phones stops that. */
@media (max-width: 720px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Oct 28 2026 (Omar: "see how it dies down"): on phones a pop-up sits at the top instead of the
   middle, so it does not jump when the keyboard opens, and it is one scrolling sheet sized to the
   space above the keyboard, so Save stays reachable. */
@media (max-width: 720px) {
  .modal-overlay { align-items: flex-start; padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px 10px; }
  .modal { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 20px); padding: 20px 18px; }
  .modal > div[style*="max-height"] { max-height: none !important; overflow: visible !important; }
}