/* =========================================================
   kit — shell.css
   Design tokens, fonts, header, primitives.
   Shared by every page.

   ⚑ CANONICAL STYLE GUIDE: /docs/STYLE_GUIDE.md
   That doc is the source of truth for tokens, components,
   contracts, and conventions. Read it before adding patterns.
   The comments in this file are quick-reference summaries —
   when in doubt, the .md wins.
   ========================================================= */

/* ----- Diatype trial fonts ----- */
@font-face {
  font-family: "ABC Diatype";
  src: url("/fonts/ABCDiatypeTrial-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("/fonts/ABCDiatypeTrial-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype Mono";
  src: url("/fonts/ABCDiatypeMonoTrial-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype Mono";
  src: url("/fonts/ABCDiatypeMonoTrial-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ----- Tokens ----- */
:root {
  /* ============================================================
     COLOR TOKENS — semantic naming
     ============================================================ */
  --bg:        #f5f5f2;   /* page background */
  --surface:   #ebeae5;   /* cards, inputs, secondary surfaces */
  --surface-2: #e3e2dc;   /* deeper hover/focus state */
  --ink:       #111111;   /* primary text */
  --ink-2:     #555551;   /* secondary text */
  --ink-3:     #777773;   /* tertiary text, captions */
  --rule:      #d8d8d4;   /* hairlines, borders */
  --accent:    #2a4ed4;   /* french blue — hover, active, "yours" */
  --danger:    #c0392b;   /* destructive states */

  /* ============================================================
     TYPE
     ============================================================ */
  --sans: "ABC Diatype", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "ABC Diatype Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — 7 sizes, tiny → hero */
  --text-tiny:    11px;   /* mono captions, smallest labels */
  --text-small:   13px;   /* secondary body, helper text */
  --text-body:    15px;   /* default body, button labels (was 14, unified to 15) */
  --text-strong:  16px;   /* iOS-safe form inputs, emphasis */
  --text-medium:  18px;   /* subheads */
  --text-display: 22px;   /* page titles, h1 */
  --text-hero:    36px;   /* hero titles, big magazine type */

  /* ============================================================
     SPACING — 4-multiple scale
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 80px;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --gutter: 32px;
  --container: 1600px;

  /* ============================================================
     RADIUS — single source of truth for corner radii
     Edit these values to retune the entire UI in one place.

     Register: editorial-soft. NOT AirBnB-soft (16px+ pills),
     NOT brutalist-sharp (0-2px in everything). Middle ground.

     CONTRACT: do not hardcode border-radius values in component CSS.
     Always reference a token.
     ============================================================ */
  --r-tight:    2px;   /* sharp print-feel — overlay corners, tight inputs */
  --r-input:    4px;   /* standard inputs, textareas, search fields */
  --r-card:     6px;   /* cards, panels, modals, popovers */
  --r-button:   4px;   /* primary + secondary action buttons */
  --r-pill:   999px;   /* inline tappable pills (city, been, batch link) */
  --r-circle:   50%;   /* perfect circles — paired with locked square dims */

  /* ============================================================
     MOTION — canonical timings
     ============================================================ */
  --ease-quick:  140ms ease;                              /* color, bg, border */
  --ease-medium: 200ms ease;                              /* transform, position */
  --ease-sheet:  180ms cubic-bezier(0.2, 0.8, 0.2, 1);    /* sheets, modals */
}

/* ----- Dark mode (global) ----- */
html.dark,
body.dark {
  --bg:        #161614;
  --surface:   #1f1f1d;
  --surface-2: #262624;
  --ink:       #ebeae5;
  --ink-2:     #a8a8a3;
  --ink-3:     #8a8a85;
  --rule:      #2a2a27;
  /* --accent stays #2a4ed4 — French blue reads well on both modes */
  /* --danger stays #c0392b — same red both modes */
}
html.dark { background: var(--bg); }

@media (max-width: 720px) { :root { --gutter: 18px; } }

/* =====================================================================
   PAGE GRID — opt-in 12-column layout system

   Pages declare they use the grid via class="page-grid" on <main>.
   Modules opt into spans via .module--N classes (1-12, plus named sizes).

   Mobile (<=720px): grid collapses to single column, all spans ignored.

   Pages NOT using this system stay on flex/their existing layout.
   This is opt-in, not a global default — single-column lists
   (spots, travel, juice) shouldn't use it.
   ===================================================================== */
.page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-7);    /* 32px */
  row-gap: var(--space-7);
}

/* Module — generic block within a grid. Pages can extend with named
   classes (e.g., .module--day, .module--stream) for module-specific
   styling. By default a module is full-width; spans override. */
.module {
  grid-column: span 12;
  min-width: 0;   /* prevent grid blowout from long content */
}

/* Numeric spans — explicit, granular */
.module--span-1  { grid-column: span 1; }
.module--span-2  { grid-column: span 2; }
.module--span-3  { grid-column: span 3; }
.module--span-4  { grid-column: span 4; }
.module--span-5  { grid-column: span 5; }
.module--span-6  { grid-column: span 6; }
.module--span-7  { grid-column: span 7; }
.module--span-8  { grid-column: span 8; }
.module--span-9  { grid-column: span 9; }
.module--span-10 { grid-column: span 10; }
.module--span-11 { grid-column: span 11; }
.module--span-12 { grid-column: span 12; }

/* Named spans — semantic shortcuts. These are the most common widths. */
.module--quarter      { grid-column: span 3; }
.module--third        { grid-column: span 4; }
.module--half         { grid-column: span 6; }
.module--two-thirds   { grid-column: span 8; }
.module--three-quarters { grid-column: span 9; }
.module--full         { grid-column: span 12; }

/* Mobile — single column, all spans ignored */
@media (max-width: 720px) {
  .page-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--space-7);
  }
  /* All modules full-width on mobile */
  .module,
  .module--span-1, .module--span-2, .module--span-3, .module--span-4,
  .module--span-5, .module--span-6, .module--span-7, .module--span-8,
  .module--span-9, .module--span-10, .module--span-11, .module--span-12,
  .module--quarter, .module--third, .module--half,
  .module--two-thirds, .module--three-quarters, .module--full {
    grid-column: 1 / -1;
  }
}

/* Tablet (721-1100px) — optionally collapse to 2 columns.
   Modules may opt into 2-col behavior via specific media query overrides
   in their own CSS. Default: keep 12-col but with reduced gap.
   This middle range is the trickiest — modules need to declare how they
   collapse (some span 6 on tablet, others span 12). Per-module decision. */
@media (max-width: 1100px) and (min-width: 721px) {
  .page-grid {
    column-gap: var(--space-6);   /* 24px — slightly tighter */
  }
}

/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.011em;
  min-height: 100vh;
  padding-bottom: 64px;
}
a { color: inherit; text-decoration: none; transition: color var(--ease-quick); }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; }
::selection { background: rgba(42, 78, 212, 0.18); }

/* =========================================================
   HEADER
   ========================================================= */
.head {
  padding: 26px var(--gutter) 22px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}
.head__left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}
.logo {
  font-family: var(--mono);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-transform: lowercase;
}
.nav {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  justify-self: center;
}
.nav a {
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}
.nav a:hover { color: var(--accent); }
.nav a.is-active { color: var(--ink); font-weight: 500; }

.menu-btn {
  display: none;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); transition: color var(--ease-quick);
}
.menu-btn:hover { color: var(--accent); }
.menu-btn__icon { width: 18px; height: 12px; position: relative; display: block; }
.menu-btn__bar {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor;
  transition: transform var(--ease-medium), top var(--ease-medium), bottom var(--ease-medium);
}
.menu-btn__bar--top { top: 0; }
.menu-btn__bar--bottom { bottom: 0; }
.menu-btn.is-open .menu-btn__bar--top { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-btn.is-open .menu-btn__bar--bottom { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

.head__right {
  font-size: var(--text-small);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  justify-self: end;
}
.head__right .where { display: none; }
.head__right .signin {
  color: var(--ink-2);
}
.head__right .signin:hover { color: var(--accent); }

@media (max-width: 760px) {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ----- Mobile menu overlay ----- */
.menu-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 100;
  display: none;
  padding-top: 70px;
}
.menu-overlay.is-open { display: block; }
.menu-overlay__inner {
  padding: 40px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-overlay__inner a {
  font-size: var(--text-hero);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  padding: 12px 0;
}
.menu-overlay__inner a.is-active { color: var(--ink); }
.menu-overlay__inner a:hover { color: var(--accent); }
.menu-overlay__signout {
  font-size: var(--text-body) !important;
  color: var(--ink-3) !important;
  font-weight: 400 !important;
  margin-top: 32px;
}

/* ===== Menu shortcuts (top of menu overlay, mobile only) =====
   Tappable tiles that link to overlays on the home page.
   Visually distinct from the main nav links — smaller, with a subtle
   bottom rule separating them from the main navigation. */
.menu-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.menu-shortcut {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: var(--text-strong) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--ink) !important;
  padding: 14px 0 !important;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: color var(--ease-quick);
}
.menu-shortcut:hover {
  color: var(--accent) !important;
}
.menu-shortcut__label {
  flex: 0 0 auto;
}
.menu-shortcut__count {
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--ink-3);
  min-width: 20px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.menu-shortcut__arrow {
  margin-left: auto;
  color: var(--ink-3);
  font-size: var(--text-medium);
  line-height: 1;
}
.menu-shortcut:hover .menu-shortcut__count,
.menu-shortcut:hover .menu-shortcut__arrow {
  color: var(--accent);
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  z-index: 40;
}
.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  width: 100%;
  font-size: var(--text-small);
  color: var(--ink-3);
}
.foot__left, .foot__right { display: flex; gap: 18px; align-items: center; }
.foot .ver { color: var(--ink-2); font-family: var(--mono); font-size: var(--text-tiny); }
.foot a:hover { color: var(--accent); }
@media (max-width: 720px) {
  .foot__bar { padding: 12px 14px; font-size: var(--text-tiny); }
  .foot .hide-sm { display: none !important; }
}

/* =========================================================
   COMMON UTILITIES
   ========================================================= */
.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-label {
  font-size: var(--text-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* Toast — quiet bottom feedback */
.toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  font-size: var(--text-small);
  font-family: var(--sans);
  letter-spacing: -0.005em;
  z-index: 200;
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--ease-medium), transform var(--ease-medium);
  pointer-events: none;
}
.toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Modal — generic full-screen overlay editor (journal, trip add, place add) */
.modal {
  position: fixed; inset: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  z-index: 110;
  display: none;
  flex-direction: column;
}
.modal.is-open { display: flex; }
.modal__head {
  padding: 26px var(--gutter) 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.modal__title {
  font-size: var(--text-body);
  color: var(--ink-3);
  letter-spacing: -0.005em;
  margin: 0;
  font-weight: 400;
}
.modal__title strong {
  color: var(--ink);
  font-weight: 500;
}
.modal__close {
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--ink-3);
  padding: 8px 12px;
  margin: -8px -12px;
  letter-spacing: -0.005em;
  cursor: pointer;
  background: none;
  border: 0;
  transition: color var(--ease-quick);
}
.modal__close:hover { color: var(--ink); }

.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px var(--gutter) 120px;
}
.modal__body__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.modal__foot {
  position: relative;
  flex-shrink: 0;
  padding: 14px var(--gutter);
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-small);
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--rule);
  min-height: 56px;
}
.modal__foot .save-btn {
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.008em;
  padding: 10px 16px;
  margin: -10px -16px;
  cursor: pointer;
  background: none;
  border: 0;
  transition: color var(--ease-quick), opacity var(--ease-quick);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.modal__foot .save-btn:hover { color: var(--ink); }
.modal__foot .save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Keyboard shortcut hint inside save button */
.kbd {
  font-family: var(--mono);
  font-size: var(--text-tiny);
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.save-btn:hover .kbd { color: var(--ink-2); border-color: var(--ink-3); }

@media (max-width: 720px) {
  .modal__foot {
    padding: 12px var(--gutter);
    min-height: 60px;
  }
  .modal__foot .save-btn {
    font-size: var(--text-body);
    padding: 12px 16px;
    margin: -12px -16px;
  }
  .modal__close {
    font-size: var(--text-body);
    padding: 10px 12px;
    margin: -10px -12px;
  }
  /* On narrow screens, hide kbd hint */
  .kbd { display: none; }
}

/* Form fields — used in modals and admin forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}
.field__label {
  font-size: var(--text-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.field__input,
.field__textarea,
.field__select {
  background: var(--surface);
  padding: 12px 16px;
  border-radius: 2px;
  border: 0;
  font-family: var(--sans);
  font-size: var(--text-body);
  color: var(--ink);
  letter-spacing: -0.005em;
  outline: none;
  width: 100%;
  transition: background var(--ease-medium);
}
.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  background: var(--surface-2);
}
.field__textarea {
  resize: vertical;
  min-height: 90px;
  font-family: var(--sans);
}
.field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .field__row { grid-template-columns: 1fr; }
}

/* Primary action button — used sparingly */
/* =====================================================================
   BUTTON SYSTEM — kit-wide standard

   .btn              Primary filled action (Save, Submit, Confirm)
   .btn--secondary   Outlined ghost action (same shape, same size, no fill)
                     Use when paired with primary: side by side, equal weight
   .btn--danger      Destructive variant (red on hover)
   .btn-close-circle Outlined circle close button — top-left of any overlay
                     32×32 (mobile-locked), × glyph centered. Universal
                     "dismiss" affordance for FULLSCREEN overlays/modals.

   CLOSE-AFFORDANCE STANDARDS:
   - Overlay/modal dismiss:  top-left, .btn-close-circle (32×32)
   - Inline list-row remove: 28×28 circle, transparent bg, --rule border,
                             color --ink-3 → red on hover. See .time-card__remove
                             and .ph-pill__delete for examples. ALWAYS perfectly
                             round (uses border-radius: 50% + locked square dims).

   OVERLAY ACTION CONTRACT:
   - Close button (×):      top-left, .btn-close-circle
   - Primary action:        bottom-right of foot, .btn
   - Secondary action:      to LEFT of primary in foot, .btn .btn--secondary
   ===================================================================== */
/* =====================================================================
   BUTTON SYSTEM

   Anatomy:
   - .btn                      base — medium size, primary (filled ink) by default
   - .btn--small               compact variant (less padding, smaller text)
   - .btn--large               prominent variant (more padding, larger text)
   - .btn--secondary           outlined ghost (transparent fill, rule border)
   - .btn--ghost               text-only (no border, no fill)
   - .btn--danger              modifier — red on hover (works on any size/variant)
   - .btn--published           modifier — accent-filled (active state indicator)
   - .btn-close-circle         overlay dismiss × — 32×32 always-circle
   - .btn-remove-circle        inline-row remove × — 28×28 always-circle

   Sizing reference:
                 padding         font-size           min-height (mobile)
   small         8px 14px        --text-small (13)   44px (touch floor)
   medium        12px 22px       --text-body  (15)   44px
   large         14px 28px       --text-medium (18)  48px

   Mobile: all buttons get min-height: 44px from the global rule.
   Close circles and inline-row removes are exempt (locked square dims).

   OVERLAY ACTION CONTRACT:
   - Close button (×):      top-left, .btn-close-circle
   - Primary action:        bottom-right of foot, .btn
   - Secondary action:      to LEFT of primary, .btn--secondary
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--r-button);
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--ease-quick), color var(--ease-quick), border-color var(--ease-quick);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* Size variants */
.btn--small {
  padding: 8px 14px;
  font-size: var(--text-small);
  gap: 6px;
}
.btn--large {
  padding: 14px 28px;
  font-size: var(--text-medium);
  gap: 10px;
}

/* Style variants */
.btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn--secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}
.btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid transparent;
}
.btn--ghost:hover {
  color: var(--accent);
  background: transparent;
  border-color: transparent;
}
.btn--published {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn--published:hover {
  background: var(--accent);
  color: white;
  filter: brightness(0.92);
}

/* Danger modifier — works on any variant */
.btn--danger:hover { background: var(--danger); border-color: var(--danger); }
.btn--secondary.btn--danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}
.btn--ghost.btn--danger:hover {
  color: var(--danger);
  background: transparent;
}

/* Outlined circle close button — universal overlay close affordance.
   32×32, always circle, top-LEFT of overlays/modals. */
.btn-close-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--text-medium);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-decoration: none;
  transition: color var(--ease-quick), border-color var(--ease-quick);
  flex-shrink: 0;
  box-sizing: border-box;
}
.btn-close-circle:hover {
  color: var(--ink);
  border-color: var(--ink-2);
}

/* Inline-row remove circle — canonical 28×28 inline close affordance.
   Used inside list rows where the close-circle (32) would be too prominent.
   Same shape as .btn-close-circle, smaller dims, ink-3 → danger on hover. */
.btn-remove-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: color var(--ease-quick), border-color var(--ease-quick);
  align-self: center;
}
.btn-remove-circle:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ===== iOS zoom-on-focus fix =====
   iOS Safari auto-zooms any input under 16px when focused, then sometimes
   fails to reset zoom on blur. Setting min font-size 16px on all form
   elements at mobile breakpoints prevents the zoom entirely. */
@media (max-width: 720px) {
  input,
  textarea,
  select {
    font-size: var(--text-strong) !important;
  }
  /* Special case: contenteditable elements behave the same */
  [contenteditable="true"] {
    font-size: var(--text-strong) !important;
  }
}

/* =====================================================================
   FORM PRIMITIVES — .input, .textarea, .select

   Single shared base for form fields. Each page can extend with its own
   class for layout (width, position) but should NOT reinvent visual style.

   Anatomy:
   - Surface bg (--surface), rule border (--rule)
   - Body type (--text-strong on mobile via global iOS zoom rule)
   - --r-input radius (4px — small, reads as "field" in editorial register)
   - Focus border accent
   ===================================================================== */
.input,
.textarea,
.select {
  font-family: var(--sans);
  font-size: var(--text-strong);
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-input);
  padding: 14px 16px;
  outline: none;
  box-sizing: border-box;
  width: 100%;
  transition: border-color var(--ease-quick), background var(--ease-quick);
}
.input:hover,
.textarea:hover,
.select:hover {
  background: var(--surface-2);
}
.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.input::placeholder,
.textarea::placeholder {
  color: var(--ink-3);
}
.input:disabled,
.textarea:disabled,
.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Textarea-specific */
.textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--sans);
  line-height: 1.5;
}

/* Select-specific — custom chevron */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2399988f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
}

/* Size variant — compact input for tight rows */
.input--small,
.select--small {
  font-size: var(--text-small);
  padding: 8px 12px;
}
.select--small {
  padding-right: 30px;
  background-position: right 10px center;
}

/* =====================================================================
   .card — surface primitive

   Use for any container that should read as a "card" (panel, list item,
   modal section). Pages can layer their own padding/layout on top.
   ===================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--space-5);
  box-sizing: border-box;
}
.card--interactive {
  cursor: pointer;
  transition: border-color var(--ease-quick), background var(--ease-quick);
}
.card--interactive:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
/* Tight variant — less padding, for dense lists */
.card--tight {
  padding: var(--space-3);
}

/* =====================================================================
   .caption — tiny mono uppercase labels

   Used everywhere there's a small "DPS → TPE", "Updated 2h ago",
   section header, or any tiny uppercase mono caption.
   ===================================================================== */
.caption {
  font-family: var(--mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.caption--ink {
  color: var(--ink);
}
.caption--accent {
  color: var(--accent);
}

/* =====================================================================
   Mobile-only avatar circle (in header__right)
   - Hidden on desktop (where Bali / time take its place)
   - Shown on mobile via @media block below
   ===================================================================== */
/* =====================================================================
   TIME TRIGGER (header) — clickable container that opens time popover
   ===================================================================== */
.time-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-small);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--ease-quick);
  font-variant-numeric: tabular-nums;
}
.time-trigger:hover { color: var(--accent); }
.time-trigger .where { display: none; } /* time-only in header; city is implicit */

/* =====================================================================
   TIME POPOVER — mini clocks view
   Desktop: anchored top-right under the time trigger
   Mobile: not used (mobile users go to /clocks/ via the menu)
   ===================================================================== */
.time-popover {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
}
.time-popover[hidden] { display: none; }
.time-popover.is-open { pointer-events: auto; }

.time-popover__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  pointer-events: none;
}
.time-popover.is-open .time-popover__scrim {
  pointer-events: auto;
}

.time-popover__sheet {
  position: absolute;
  z-index: 2;
  background: var(--bg);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

@media (min-width: 721px) {
  .time-popover__sheet {
    top: 64px;
    right: calc(var(--gutter) - 4px + 44px);
    width: 260px;
    border: 1px solid var(--rule);
    border-radius: var(--r-card);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-6px);
    opacity: 0;
    transition: transform var(--ease-sheet), opacity 160ms ease;
  }
  .time-popover.is-open .time-popover__sheet {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 720px) {
  .time-popover { display: none; }
}

.time-popover__list {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.time-popover__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
  min-height: 52px;
  box-sizing: border-box;
}
.time-popover__row + .time-popover__row {
  border-top: 1px solid var(--rule);
}
.time-popover__row-lhs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.time-popover__city {
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time-popover__off {
  font-family: var(--sans);
  font-size: var(--text-tiny);
  color: var(--ink-3);
  letter-spacing: -0.005em;
  min-height: 14px; /* reserve line for empty home-city slot */
}
.time-popover__time {
  font-family: var(--sans);
  font-size: var(--text-small);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.time-popover__loading,
.time-popover__empty {
  padding: 16px;
  font-size: var(--text-small);
  color: var(--ink-3);
  text-align: center;
}
.time-popover__empty a {
  color: var(--accent);
  text-decoration: none;
}
.time-popover__open {
  display: block;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-small);
  color: var(--ink-2);
  text-decoration: none;
  text-align: right;
  transition: color var(--ease-quick), background var(--ease-quick);
}
.time-popover__open:hover {
  background: var(--surface);
  color: var(--accent);
}

/* =====================================================================
   AVATAR — two surfaces

   Desktop: lives in header__right (next to time). Outlined circle button.
   Mobile:  hidden in header; .floating-avatar takes over, fixed bottom-right.

   Both surfaces invoke the same #user-panel when tapped.
   ===================================================================== */

/* Desktop avatar: shown in header */
.slim-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  margin-left: 12px;
  transition: border-color var(--ease-quick), color var(--ease-quick);
  flex-shrink: 0;
}
.slim-avatar:hover {
  border-color: var(--ink-2);
  color: var(--accent);
}

/* Floating avatar: mobile only, fixed bottom-right */
.floating-avatar { display: none; }

@media (max-width: 720px) {
  /* Allow header to grow vertically */
  .head { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; row-gap: 14px; }
  .head__left, .head__right { flex: 0 0 auto; }
  /* Hide the existing top-nav links on mobile (replaced by hamburger overlay) */
  .head .nav { display: none; }
  /* Hide desktop where/time/avatar on mobile */
  .head__right .where, .head__right #hdr-time { display: none; }
  .slim-avatar { display: none; }

  /* Floating avatar — bottom-right, thumb-reach, safe-area aware */
  .floating-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: border-color var(--ease-quick), transform var(--ease-quick);
    /* Override the global mobile button min-height: avatar is 48 not 44 */
    min-height: 48px !important;
    min-width: 48px !important;
  }
  .floating-avatar:hover,
  .floating-avatar:active {
    border-color: var(--ink-2);
    transform: scale(0.96);
  }
}

/* =====================================================================
   USER PANEL — popover (desktop) + bottom sheet (mobile)
   ===================================================================== */
.user-panel {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
}
.user-panel[hidden] { display: none; }
.user-panel.is-open { pointer-events: auto; }

.user-panel__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.user-panel.is-open .user-panel__scrim {
  opacity: 1;
  pointer-events: auto;
}

.user-panel__sheet {
  position: absolute;
  z-index: 2;
  background: var(--bg);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

/* Desktop: popover anchored top-right under the avatar */
@media (min-width: 721px) {
  .user-panel__scrim { background: transparent; }
  .user-panel__sheet {
    top: 64px;
    right: calc(var(--gutter) - 4px);
    width: 280px;
    border: 1px solid var(--rule);
    border-radius: var(--r-card);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-6px);
    opacity: 0;
    transition: transform var(--ease-sheet), opacity 160ms ease;
  }
  .user-panel.is-open .user-panel__sheet {
    transform: translateY(0);
    opacity: 1;
  }
  .user-panel__handle { display: none; }
}

/* Mobile: bottom sheet, slides up, ~70% max height */
@media (max-width: 720px) {
  .user-panel__sheet {
    left: 0;
    right: 0;
    bottom: 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
  }
  .user-panel.is-open .user-panel__sheet {
    transform: translateY(0);
  }
  .user-panel__handle {
    display: block;
    width: 36px;
    height: 4px;
    background: var(--ink-3);
    border-radius: 999px;
    margin: 12px auto 0;
    opacity: 0.5;
  }
  /* Mobile: more comfortable tap targets on links */
  .user-panel__link,
  .user-panel__signout {
    min-height: 48px;
    padding: 14px 24px;
    font-size: var(--text-body);
  }
}

/* Sheet content */
.user-panel__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 24px 20px;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
}
.user-panel__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-display);
  font-weight: 500;
  color: var(--ink);
}
.user-panel__name {
  font-family: var(--sans);
  font-size: var(--text-strong);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.user-panel__nav {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.user-panel__link,
.user-panel__signout {
  display: block;
  padding: 10px 24px;
  font-family: var(--sans);
  font-size: var(--text-body);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: color var(--ease-quick), background var(--ease-quick);
  width: 100%;
}
.user-panel__link:hover,
.user-panel__signout:hover {
  background: var(--surface);
  color: var(--accent);
}
.user-panel__signout {
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  margin-top: 6px;
}
.user-panel__signout:hover {
  color: var(--danger);
}

.user-panel__foot {
  padding: 12px 24px 16px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.user-panel__ver {
  font-family: var(--mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* =====================================================================
   Mobile global: enforce 44px tap targets on links and buttons
   Visual size unchanged — invisible padding to reach the floor.
   Excludes inline links inside prose, where this would break flow.

   EXEMPTIONS: any element that is intentionally smaller than 44px and
   must stay perfectly round (close circles, avatars). Add new exemptions
   to the block below with explicit !important sizing. The rule of thumb:
   if it's a circle or square shape that needs to keep its proportions,
   exempt it. If it's a normal button, let the 44px floor apply.
   ===================================================================== */
@media (max-width: 720px) {
  button,
  a.btn, a.btn--secondary,
  .menu-overlay__inner a {
    min-height: 44px;
  }
  /* Close circle is intentionally smaller (32x32) and must stay perfectly round.
     The whole circle is the tap target — well above 30px guideline floor. */
  button.btn-close-circle,
  a.btn-close-circle {
    min-height: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    width: 32px !important;
  }
  /* Floating avatar is its own size (48x48), already meets touch floor */
  button.floating-avatar {
    min-height: 48px !important;
    min-width: 48px !important;
  }
  /* Inline list-row close (28×28). Used by .btn-remove-circle, and the
     legacy .time-card__remove + .ph-pill__delete which will migrate to
     it. All must stay perfectly round on mobile (overrides 44px floor). */
  button.btn-remove-circle,
  button.time-card__remove,
  button.ph-pill__delete {
    min-height: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    width: 28px !important;
  }
  /* Ensure pages have buffer at bottom so floating avatar doesn't overlap
     the last visible item. ~80px = avatar 48 + safe-area + visual breathing. */
  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}