:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #1c1f2b;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --border: #e5e7eb;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
main.container { padding-top: 24px; padding-bottom: 64px; }

/* --- top nav -------------------------------------------------------------
   One list, two presentations: a row on a wide screen, a panel behind a
   button below 861px. The breakpoint is where this app's longest menu (owner
   on enterprise: six items plus the brand) stops fitting on one line. */

.topnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.topnav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--text);
  letter-spacing: -0.01em;
}

.navlinks {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navlinks a {
  display: block;
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 7px;
}

.navlinks a:hover { color: var(--text); background: #f3f4f6; }

/* Where you are, without a second glance. */
.navlinks a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  background: #eef2ff;
}

/* The button is hidden until the breakpoint, where the panel takes over. */
.navtoggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.navtoggle-bars,
.navtoggle-bars::before,
.navtoggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .18s ease, opacity .18s ease;
}

.navtoggle-bars {
  position: relative;
  margin: 0 auto;
}

.navtoggle-bars::before,
.navtoggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.navtoggle-bars::before { top: -6px; }
.navtoggle-bars::after  { top: 6px; }

/* Bars fold into a cross while open, so the button reads as "close". */
.navtoggle[aria-expanded="true"] .navtoggle-bars { background: transparent; }
.navtoggle[aria-expanded="true"] .navtoggle-bars::before { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Headings */
h1, h2, h3 { margin: 0 0 12px; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }

/* Cards / forms */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.form-row label { font-size: 13px; color: var(--muted); }
/* Every text-entry control, defined by exclusion rather than by listing the
   types we happened to think of. The list form missed input[type=number],
   select and textarea, so the six number fields on Settings and every dropdown
   in the product rendered as raw browser defaults next to styled text inputs —
   which is most of why that page looked unfinished. Checkbox, radio, color and
   the button types keep their native rendering deliberately. */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=submit]):not([type=button]):not([type=file]),
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}

textarea { resize: vertical; min-height: 4.5rem; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
}

/* Buttons */
.btn { display: inline-block; padding: 9px 14px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: #f3f4f6; }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
th { background: #f9fafb; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }
td code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

/* Anything that is a quantity lines up column-wise rather than jittering as
   the digits change — these tables update every five seconds. */
time, .accuracy, td code, .tabular { font-variant-numeric: tabular-nums; }

/* Keyboard focus must be visible on every control, not only inputs. A
   dispatcher tabbing through a row is the fastest way to use this page. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Motion here is informational (a countdown, a row opening), so it degrades to
   an instant state change rather than disappearing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Status pills */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-muted { background: #f3f4f6; color: var(--muted); }
.pill-info { background: #dbeafe; color: #1d4ed8; }
.pill-success { background: #dcfce7; color: var(--success); }
.pill-warning { background: #fef3c7; color: var(--warning); }
.pill-danger { background: #fee2e2; color: var(--danger); }

/* Flash */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.flash-success { background: #dcfce7; color: var(--success); border: 1px solid #bbf7d0; }
.flash-error { background: #fee2e2; color: var(--danger); border: 1px solid #fecaca; }
.flash-warning { background: #fef3c7; color: var(--warning); border: 1px solid #fde68a; }
.flash-info { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 50; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface); border-radius: 12px; padding: 24px; max-width: 440px; width: 92%; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.modal h2 { margin-bottom: 16px; }

/* Footer */
.footer { color: var(--muted); padding: 32px 16px; text-align: center; }

/* Auth page */
.auth-card { max-width: 380px; margin: 40px auto 0; }

/* --- landing ----------------------------------------------------------- */

.landing {
  text-align: center;
  padding: 3rem 1.5rem;
}

.landing-lead {
  color: var(--muted);
  max-width: 32rem;
  margin: .5rem auto 1.5rem;
}

.landing-actions { justify-content: center; }

/* --- responsive shell ---------------------------------------------------
   The admin is used on a phone in a van, not only at a desk. Nothing may
   overflow the viewport horizontally: wide content scrolls inside its own
   container, or it stacks. */

body { overflow-x: hidden; }

/* Long link tokens and URLs must wrap rather than push the page wider. */
code, .cell-link input { overflow-wrap: anywhere; }

/* Any table wide enough to overflow scrolls inside this, not the page. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}

.table-wrap table { margin-bottom: 0; }

/* The menu collapses before the content does: six items plus a brand stop
   fitting well before a phone width, and a wrapped two-line nav was most of
   what made every page feel crowded at the top. */
@media (max-width: 860px) {
  .navtoggle { display: block; }

  .navlinks {
    display: none;
    position: absolute;
    top: 100%;
    right: 12px;
    left: 12px;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
  }

  .navlinks.open { display: flex; }

  .navlinks a {
    padding: 11px 12px;
    font-size: 15px;
  }

  .topnav-inner { position: relative; }
}

@media (max-width: 720px) {
  .container { padding: 0 12px; }
  main.container { padding-top: 16px; padding-bottom: 40px; }

  h1 { font-size: 22px; }
  h2 { font-size: 18px; }

  .topnav-inner { padding: 10px 12px; }

  .card { padding: 16px; }

  /* 16px is the threshold below which iOS zooms the page on focus — that zoom
     is itself an overflow.

     THIS SELECTOR MUST STAY IDENTICAL TO THE BASE RULE'S. It was previously a
     list of types, and when the base rule was rewritten by exclusion its
     specificity went from 0,1,1 to 0,6,1 — so the base rule's 14px started
     beating this one for every input, in every viewport. A media query adds no
     specificity. Measured at 390px: text, tel, number, search and date all
     computed 14px, i.e. every input in the product zoomed on a phone, while
     select and textarea were fine because they are element selectors in both
     rules.

     Identical selectors tie on specificity and this one wins by source order,
     and the pair cannot drift again without someone editing one of two
     identical strings and not the other. */
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=submit]):not([type=button]):not([type=file]),
  select,
  textarea { font-size: 16px; }

  .btn { padding: 10px 14px; }
  .btn-row > .btn { flex: 1 1 auto; text-align: center; }

  .modal {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 12px 12px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    max-height: 92vh;
    overflow-y: auto;
  }
  /* Sheet from the bottom: reachable with a thumb. */
  .modal-backdrop.open { align-items: flex-end; }
}

/* The hidden attribute must actually hide.
   `[hidden]` is a user-agent rule, so ANY author rule that sets display beats
   it — `.btn-block { display: block }` was enough to keep every button the
   capture page had marked hidden on screen, which is why that screen appeared
   to offer five actions at once. Any utility class that sets display can do
   this, so the guard belongs here rather than on the one class that tripped
   it. This is the one !important in the stylesheet and it earns it. */
[hidden] { display: none !important; }

/* Full-width action button. Lives here, not in a page stylesheet: it is used by
   the consent, capture, thanks and branding pages, and each of those loads a
   different second sheet — a copy per page is how the capture screen ended up
   with buttons that were not full width at all. */
.btn-block { display: block; width: 100%; text-align: center; margin-bottom: .5rem; }