/* Nocket base styles. Light/dark follows the system, no manual toggle.
   Every colour here resolves through a token in tokens.css — no literals. */

:root {
  --radius: 14px;
  --radius-btn: 11px;

  /* Derived, not raw literals: the shadow is a tint of the text colour and
     the focus ring a tint of the brand, so both follow the theme. */
  --shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent),
    0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
  --ring: color-mix(in srgb, var(--brand) 28%, transparent);

  --font-display: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow: 0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent),
      0 2px 10px color-mix(in srgb, var(--bg) 50%, transparent);
    --ring: color-mix(in srgb, var(--brand-2) 38%, transparent);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* dvh, not vh. iOS Safari resolves 100vh against the viewport with the
     toolbars HIDDEN, so while they are showing this box is taller than the
     visible area and the page drags vertically even when the content fits.
     100dvh tracks the actual visible height. */
  min-height: 100dvh;
}

/* Applied per screen, never globally — only where the content is known to
   fit. The lead card, the ION reply list and anything long must still
   scroll, so the router clears these on every render and only the screens
   that opt in put them back.

   position:fixed, not just overflow:hidden. overflow:hidden stops scrolling
   but iOS Safari's rubber-band pan is handled outside the scroll model, so
   the page still drags. Taking body out of flow leaves no scroll container
   to rubber-band. No touch-action:none — it breaks input focus. */
.is-locked {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
html.is-locked-root {
  overflow: hidden;
  overscroll-behavior-y: none;
  height: 100%;
}
/* With body pinned, anything taller than the viewport would be unreachable
   — a small phone, large accessibility text, or landscape. The inner
   container scrolls instead, so the content stays reachable while the body
   itself never moves. */
.is-locked #app {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#app {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  margin: 0 0 8px;
  line-height: 1.15;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.5rem; font-weight: 900; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 12px; }
strong { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Scores, counters and timestamps. Tabular figures so digits do not jitter
   as a count ticks down. */
.mono, .num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.mono-bold { font-weight: 700; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 12px;
}

.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.center { text-align: center; }

/* ---- Buttons -------------------------------------------------------
   The button body is skewed; the inner .btn-t span counter-skews so the
   label stays upright. Markup is always
   <button><span class="btn-t">Label</span></button>.
   .tabs button opts out below — a segmented control reads as a track of
   pills, and skewing them fights the container it sits in.
   -------------------------------------------------------------------- */
button, .btn {
  appearance: none;
  border: 1px solid var(--line-ui);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-radius: var(--radius-btn);
  padding: 12px 18px;
  cursor: pointer;
  touch-action: manipulation;
  transform: skewX(-8deg);
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-t {
  display: inline-block;
  transform: skewX(8deg);
}
button:hover:not(:disabled) { border-color: var(--text); }
button:active:not(:disabled) { transform: skewX(-8deg) translateY(1px); }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* Flat parrot red; wine on hover and press (no lighter gradient stop, so
   the button is the same red as the logo). */
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.btn-primary:active:not(:disabled) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.btn-danger {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.btn-ok {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok);
}
/* The skew pushes the top and bottom corners sideways by roughly half the
   button height x tan(8deg). A full-bleed button needs that much inset or
   it overhangs its container and can force a horizontal scrollbar. */
.btn-block {
  display: block;
  width: calc(100% - 14px);
  margin-inline: 7px;
}

input, textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-ui);
  border-radius: 10px;
  padding: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px var(--ring);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.field { margin-bottom: 14px; }

/* A checkbox needs to opt out of the width:100% and display:block rules
   above, or the box stretches the full form width and its label wraps to
   the next line. Same treatment as .checklist-item's checkbox. */
.field-check { display: flex; align-items: center; gap: 10px; }
.field-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  padding: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.field-check label { margin-bottom: 0; font-weight: 500; cursor: pointer; }

.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--muted);
}
.badge-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge-warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.badge-accent {
  background: var(--brand);
  color: var(--on-brand);
  border-color: transparent;
}
/* A score is a number first. Mono keeps 7/10 and 10/10 the same width. */
.badge.num { font-family: var(--font-mono); font-weight: 700; }

.tabs {
  display: flex;
  gap: 6px;
  background: var(--bg-2);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 16px;
}
.tabs button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 10px;
  border-radius: 9px;
  font-weight: 800;
  transform: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.tabs button:active:not(:disabled) { transform: none; }
.tabs .btn-t { transform: none; }
.tabs button:hover:not(.active) { color: var(--text); }
.tabs button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* A topbar holding nothing but the lockup centres it. The dashboard's
   topbar keeps space-between, since the wordmark shares that row with the
   account controls. */
.topbar-center { justify-content: center; }

/* ---- Brand lockup --------------------------------------------------
   The wordmark is drawn SVG, not set type — same monoline construction as
   the mark, so it themes through the tokens with no font dependency. Size
   it by height only; scaling with transform would thin the strokes.
   -------------------------------------------------------------------- */
.brand-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Parrot mark beside the wordmark. Size comes from the width/height
   attributes brandLock sets (26 or 40); rounded corners are in the file. */
.brand-mark { display: block; flex: none; }
.wordmark {
  height: 26px;
  width: auto;
  display: block;
  margin-inline: 0;
}
/* Per-context sizes. Height only, never transform. */
.wordmark-lg { height: 40px; }

/* ION keeps a set-type lockup; it is a different product wordmark. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
}
.brand .dot { color: var(--brand-2); }

.notice {
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
  margin-bottom: 12px;
}
.notice-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.notice-warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }

.empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
}
.empty .glyph { font-size: 2.4rem; margin-bottom: 8px; }

.divider { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex: none;
  accent-color: var(--brand);
  cursor: pointer;
}
.checklist-item .txt { cursor: pointer; }
.checklist-item.done .txt { text-decoration: line-through; color: var(--muted); }

.steps { margin: 0; padding-left: 20px; }
.steps li { margin-bottom: 10px; }

.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }

a { color: var(--brand-text); }

/* ---- App menu (static/js/menu.js) ----------------------------------
   ☰ in the dashboard header opens a panel from the right. Mobile-first:
   full height, up to 320px wide. Items are flat rows, not skewed buttons.
   -------------------------------------------------------------------- */
.menu-host { position: relative; }
.menu-btn,
.menu-close {
  transform: none;
  padding: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 12px;
}
.menu-btn:active:not(:disabled),
.menu-close:active:not(:disabled) { transform: translateY(1px); }
.menu-close { border-color: transparent; background: transparent; }
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 21, 0.45);
  z-index: 40;
}
.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--panel);
  color: var(--text);
  border-left: 4px solid var(--brand);
  box-shadow: -8px 0 24px rgba(26, 24, 21, 0.18);
  z-index: 41;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  animation: menu-in 0.18s ease-out;
}
.menu-panel[hidden], .menu-backdrop[hidden] { display: none; }
@keyframes menu-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }
.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 12px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  margin: 2px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  transform: none;
}
.menu-item:hover:not(:disabled),
.menu-item:focus-visible { background: var(--brand-tint); color: var(--brand-deep); }
.menu-item:active:not(:disabled) { transform: none; background: var(--brand-tint); }
.menu-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.menu-item.is-current { color: var(--brand-text); box-shadow: inset 4px 0 0 var(--brand); }
.menu-status { color: var(--muted); font-weight: 600; }

/* Desktop "Install app" hint (main.js). Small, dismissible, never blocking. */
.install-hint {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: 14px;
}
.install-hint button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 8px;
}
.install-hint-go { font-weight: 700; color: var(--brand); }
.install-hint-x { font-size: 18px; line-height: 1; opacity: 0.7; }

/* Address suggestions under the connect screen's address field. */
.addr-suggest { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.addr-suggest[hidden], .addr-credit[hidden] { display: none; }
.addr-suggest li { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.addr-suggest li:last-child { border-bottom: none; }
.addr-suggest li[aria-selected="true"], .addr-suggest li:hover { background: var(--bg-2); }
.addr-credit { margin: 4px 0 0; font-size: 0.75rem; }
.addr-credit a { color: inherit; }