/* =============================================================================
   BASE-LAYOUT.CSS  —  Shell, nav, footer, global reset & buttons
   Loaded by base.html on all non-tools pages.
   Token names (--ink, --paper) intentionally preserved for backward compatibility
   until Phase 3 token naming unification.
   ============================================================================= */

@layer layout {

/* =========================================================
   FULL ELDIUM — unified CSS (cleaned)
   - Shared tokens + reset + layout
   - Buttons / forms
   - Watchlist
   - Planning Checker
   - Landing: Hero + Tools (final “3 cards” version)
   - Toasts
   - Add-alert UI + table polish
   ========================================================= */

/* All tokens are defined in tokens.css — loaded before this file. */

/* --------------------------------
   Reset / Base
   --------------------------------

   This universal reset was dead for a long stretch: an edit had dropped the
   opening marker of this banner, orphaning the heading text, and a CSS parser
   recovering from that garbage consumes forward to the next brace — which
   swallowed the rule below whole. PR 350 repaired the comment but deliberately
   left the rule disabled, because switching the whole public shell from
   content-box to border-box is a real reflow that needed its own verified
   before/after rather than riding along with a settings refactor.

   This is that change. Every public-shell page (home, login, signup, pricing,
   terms, privacy, check) was rendered at 1440px and 375px with the rule off,
   then again with it on, and the pairs compared. See the PR for the diff.

   Keep it: box-sizing: border-box is what every component in this codebase is
   written against, and --radius (0) is the §3 global-radius invariant.
   -------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: var(--radius);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--c-bone);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-feature-settings: "liga" 1, "kern" 1;
  letter-spacing: 0.001em;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.16em;
}
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(14, 20, 27, 0.34);
}

/* =========================================================
   BUTTONS — shared
   ========================================================= */
.btn,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  cursor: pointer;
  user-select: none;

  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;

  background: var(--mkt-ink-darkest);
  border: 1px solid var(--mkt-ink-darkest);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 3px 3px rgba(17, 24, 39, 0.25);

  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.btn:hover,
.primary-btn:hover {
  background: var(--mkt-ink-darkest-alt);
  border-color: var(--mkt-ink-darkest-alt);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.32);
}

.btn:focus-visible,
.primary-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(27, 58, 64, 0.28),
    0 8px 22px rgba(17, 24, 39, 0.22);
}

.btn:active,
.primary-btn:active {
  transform: translateY(0);
}

.btn:disabled,
.primary-btn:disabled {
  background: rgba(17, 24, 39, 0.35);
  border-color: rgba(17, 24, 39, 0.35);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Variants */
.btn--primary {
  background: rgba(14, 20, 27, 0.92);
  border-color: rgba(14, 20, 27, 0.92);
  color: rgba(255, 255, 255, 0.96);
}
.btn--primary:hover {
  background: rgba(14, 20, 27, 1);
  border-color: rgba(14, 20, 27, 1);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--c-muted);
  box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.38);
  border-color: transparent;
  box-shadow: none;
}

.btn--wide { width: 100%; }

/* Table-level small button */
.table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 6px 12px;
  border: 1px solid rgba(0,0,0,0.14);
  background: var(--c-white);
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
}
.table-btn:hover { background: rgba(0,0,0,0.04); }
.table-btn--muted { color: rgba(0,0,0,0.65); }

/* Special: watchlist create alert button (inherits primary styles) */
#watchlist-create-alert-btn.watchlist-submit-btn {
  /* Nothing needed if you can add class="primary-btn" in HTML.
     If you cannot, keep this minimal alias. */
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  cursor: pointer;
  user-select: none;

  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;

  background: var(--mkt-ink-darkest);
  border: 1px solid var(--mkt-ink-darkest);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 3px 3px rgba(17, 24, 39, 0.25);

  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
#watchlist-create-alert-btn.watchlist-submit-btn:hover:not(:disabled) {
  background: var(--mkt-ink-darkest-alt);
  border-color: var(--mkt-ink-darkest-alt);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.32);
}
#watchlist-create-alert-btn.watchlist-submit-btn:focus-visible:not(:disabled) {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(27, 58, 64, 0.28),
    0 8px 22px rgba(17, 24, 39, 0.22);
}
#watchlist-create-alert-btn.watchlist-submit-btn:disabled {
  background: rgba(17, 24, 39, 0.35);
  border-color: rgba(17, 24, 39, 0.35);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  cursor: not-allowed;
}

/* =========================================================
   FORMS — shared
   =========================================================

   Same defect as the Reset banner above: this heading had lost its opening
   marker, so the orphaned text made the parser consume forward to the next
   brace and swallow the .field-label rule below. PR 350 repaired the comment
   and left the rule disabled pending a verified before/after; this change is
   that verification. .field-label is used by signup, guest_login and
   guest_set_password — all rendered at 1440px and 375px either side of the
   revival. (Tools pages are unaffected either way: app.css styles
   `label, .field-label` itself.)
   ========================================================= */
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-pale);
}

/* BASE form-field look — wrapped in :where() so it carries ZERO specificity and
   any component rule can override it. Unwrapped, `input[type="text"]` is (0,1,1)
   and silently outranks single-class component rules, killing their styles with
   no visible trace outside computed styles. See app.css §7 and Audit G. */
:where(.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select) {
  width: 100%;
  padding: 14px 12px;
  font-size: 0.95rem;
  border: none;
  border-bottom: 1px solid var(--c-rule);
  background: rgba(255, 255, 255, 0.34);
  color: var(--c-ink);
  font-family: var(--font-sans);
}

input::placeholder,
textarea::placeholder { color: var(--c-pale); }

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-bottom-color: rgba(27, 58, 64, 0.85);
  background: rgba(255, 255, 255, 0.54);
}

.hint,
.results-count {
  font-size: 0.78rem;
  color: var(--c-muted);
  line-height: 1.65;
  margin-top: 8px;
  opacity: 0.85;
}

.error,
.success {
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.45);
  border-left: 2px solid;
}

.error {
  border-left-color: rgba(163, 51, 51, 0.85);
  background: rgba(163, 51, 51, 0.06);
  color: rgba(120, 25, 25, 1);
}

.success {
  border-left-color: rgba(28, 120, 66, 0.75);
  background: rgba(28, 120, 66, 0.06);
  color: rgba(16, 86, 45, 1);
}

.divider {
  height: 1px;
  background: var(--c-hairline);
  border: none;
  margin: 20px 0;
}


/* =========================================================
   SITE LAYOUT + NAV
   ========================================================= */

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1; }

/* ── Site nav chrome — MOVED ──
   .site-nav / .site-brand / .site-nav-links / .site-nav .btn / .nav-hamburger /
   .nav-overlay / .nav-dropdown* / .nav-avatar now live in ONE shared file,
   static/planning/nav.css, loaded by base.html outside {% block base_styles %}
   so the app shell (base_tools.html → app.css) gets identical nav CSS.
   Do not re-add them here — that duplication is what drifted. */

/* ── Mobile navigation — sheets, backdrop, tab bar ── */
/* All hidden by default; activated at ≤768px or via JS .is-open */

.mobile-tab-bar        { display: none; }
.mobile-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 996; }
.mobile-sheet-backdrop.is-open { display: block; }
.mobile-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 997;
  background: var(--c-bone);
  border-top: 1px solid var(--c-rule);
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 72vh;
  overflow-y: auto;
}
.mobile-sheet.is-open { transform: translateY(0); }
.mobile-sheet-handle { width: 36px; height: 4px; background: var(--c-rule); border-radius: 0; margin: 12px auto 8px; }
.mobile-sheet-section { padding: 12px 20px; border-bottom: 1px solid var(--c-rule); }
.mobile-sheet-section:last-child { border-bottom: none; }
.mobile-sheet-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }
.mobile-sheet-link { display: block; padding: 10px 0; font-size: 0.9rem; font-weight: 500; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-rule); }
.mobile-sheet-link:last-child { border-bottom: none; }
.mobile-sheet-link.is-active { font-weight: 700; }
.mobile-sheet-btn { background: none; border: none; font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--status-err); padding: 10px 0; cursor: pointer; }

@media (max-width: 768px) {
  .mobile-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--c-bone);
    border-top: 1px solid var(--c-rule);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

.mobile-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 8px;
  text-decoration: none;
  color: var(--c-muted);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
  background: none;
  border: none;
  min-height: 54px;
  cursor: pointer;
}
.mobile-tab-item.is-active { color: var(--c-ink); }
.mobile-tab-icon { flex-shrink: 0; }

/* ── Upgrade CTA button — MOVED to nav.css ──
   Was amber (--status-warn-*), which §2 forbids outside a warning, and which
   home.css already overrode to ink with !important on every page that could
   see it. Single ink definition now lives in nav.css alongside the nav. */


.site-footer { border-top: 1px solid var(--c-rule); background: transparent; }
.site-footer-inner { max-width: 1100px; margin: 0 auto; padding: 28px 18px 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.site-footer-left { display: flex; flex-direction: column; gap: 5px; }
.site-footer-brand { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.site-footer-brand-name { font-size: 0.80rem; font-weight: 700; letter-spacing: 0.02em; color: var(--c-ink); }
.site-footer-brand-sep { color: var(--c-muted); font-size: 0.80rem; }
.site-footer-brand-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--c-muted); }
.site-footer-email { font-size: 0.78rem; color: var(--c-muted); text-decoration: none; }
.site-footer-email:hover { color: var(--c-ink); text-decoration: underline; }
.site-footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.site-footer-links { display: flex; align-items: center; gap: 10px; }
.site-footer-link { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); text-decoration: none; }
.site-footer-link:hover { color: var(--c-ink); }
.site-footer-link-sep { color: var(--c-pale); font-size: 0.78rem; }
.site-footer-copy { margin: 0; font-size: 0.70rem; color: var(--c-pale); letter-spacing: 0.03em; }
.site-footer-base { border-top: 1px solid var(--c-rule); }
.site-footer-base-inner { max-width: 1100px; margin: 0 auto; padding: 9px 18px 10px; font-size: 0.68rem; color: var(--c-pale); line-height: 1.6; }
@media (max-width: 600px) {
  .site-footer-inner { flex-direction: column; gap: 18px; padding: 22px 18px 18px; }
  .site-footer-right { align-items: flex-start; }
}

/* Legacy alias — no longer used in new templates */
.site-footer-muted { color: var(--c-muted); font-size: 0.86rem; }

/* =========================================================
   SHARED PAGE WRAPPERS
   ========================================================= */
.page,
.planning-shell {
  /* border-box is load-bearing, not cosmetic: with content-box these are
     `width:100%` PLUS 2×18px padding, i.e. always viewport+36px, so every page
     built on this wrapper scrolled sideways at any width (measured 407px at a
     375px viewport). Verified: 407 → 375 on /check/ and both settings pages. */
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page { padding: 36px 18px 60px; }
.planning-shell { padding: 28px 18px 64px; }

/* Planning Checker shell — centering guaranteed here so it works
   even if search.css hasn't been collected by whitenoise yet */
.pck-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 80px;
  position: relative;
  z-index: 1;
}

.pck-hero { padding: 52px 0 32px; text-align: center; }

.card,
.pc-card {
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
}

.card { padding: 28px 28px 32px; }
.pc-card { padding: 22px 22px 26px; }

.pc-card--primary { background: rgba(255, 255, 255, 0.70); }



/* ── Watchlist shell — brand header, badge, results, table wrapper (from style.css) ── */
/* =========================================================
   WATCHLIST SYSTEM
   ========================================================= */
.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.brand-subtitle {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-pale);
  font-weight: 650;
}

.brand-title {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.2vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-top: 8px;
}

.badge {
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  border: 1px solid var(--c-hairline);
  background: rgba(255, 255, 255, 0.38);
  padding: 10px 12px;
  white-space: nowrap;
}

.watchlist-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

.watchlist-text {
  margin: 0;
  color: var(--c-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 70ch;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}

.results-title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.results-count {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pale);
  margin-top: 0;
}

/* Table wrapper */
.watch-table-wrapper { margin-top: 14px; overflow-x: auto; }
.watch-table-wrapper--boxed {
  border: 1px solid rgba(0,0,0,0.12);
  background: var(--c-white);
  padding: 12px;
}

.watch-table-scroll { overflow-y: auto; border: 1px solid rgba(0, 0, 0, 0.06) }
.watch-table-scroll--fixed5 { max-height: 330px; overflow: auto}
/* Was an inline `max-height:640px` on insights_dashboard.html, which no media
   query can reach (MOBILE_CSS_ROLLOUT §1.3) — so it was a nested vertical
   scroller inside the page's own on every phone. Class-based, and dropped at
   the phone line: the page owns vertical scrolling (MOBILE_UX §5.1). */
.watch-table-scroll--tall { max-height: 640px; }
@media (max-width: 768px) {
  .watch-table-scroll,
  .watch-table-scroll--fixed5,
  .watch-table-scroll--tall { max-height: none; overflow-y: hidden; }
}

.watch-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}

.watch-table thead { background: rgba(255, 255, 255, 0.30); }

.watch-table th,
.watch-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--c-hairline);
  text-align: left;
  vertical-align: middle;
}

.watch-table thead th {
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-pale);
  font-weight: 650;
  border-bottom: 1px solid rgba(0,0,0,0.14);
}

.watch-table tbody tr { transition: background 120ms ease; }
.watch-table tbody tr:hover { background: rgba(0,0,0,0.03); }

.watch-table td.watch-details-col { position: relative; }
.watch-table td.watch-details-col::after {
  content: "›";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 120ms ease;
  color: rgba(0,0,0,0.35);
}
.watch-table tbody tr:hover td.watch-details-col::after { opacity: 1; }

/* Status pill (single source of truth) */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.status-active { color: rgba(16, 86, 45, 1); }
.status-inactive { color: rgba(71, 85, 105, 1); }

#watch-map {
  border: 1px solid var(--c-hairline);
  background: rgba(255, 255, 255, 0.30);
}

/* Address link polish */
.watch-link {
  display: inline-block;
  font-weight: 650;
  text-decoration: none;
}
.watch-link:hover { text-decoration: underline; }

.watch-postcode {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

/* ── Planning Checker shell (pc-*) (from style.css) ── */
/* =========================================================
   PLANNING CHECKER SYSTEM
   ========================================================= */
.pc-header { margin-bottom: 26px; }
.pc-title { max-width: 80ch; }

.pc-h1 {
  font-family: var(--font-serif);
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0;
}

.pc-lede {
  margin: 10px 0 0;
  font-size: var(--lead);
  line-height: 1.65;
  color: var(--c-muted);
}

.pc-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  align-items: start;
}

.pc-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 84px;
  align-self: start;
}

.pc-main { min-width: 0; }
.pc-card--results { background: var(--c-white); }

.pc-card-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.pc-h2 {
  font-family: var(--font-serif);
  margin: 0;
  font-size: var(--h2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pc-sub {
  margin: 8px 0 0;
  color: var(--c-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.pc-badge {
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  border: 1px solid var(--c-hairline);
  background: rgba(255, 255, 255, 0.38);
  padding: 10px 12px;
  white-space: nowrap;
}
.pc-badge--muted { opacity: 0.85; }

.pc-form { margin-top: 10px; }

.pc-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.pc-search-btn { height: 44px; }

.pc-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.pc-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 18px;
}

.pc-pill {
  flex: 1 1 240px;
  border: 1px solid var(--c-hairline);
  background: rgba(255, 255, 255, 0.38);
  padding: 10px 12px;
  min-width: 0;
}
.pc-pill--wide { flex: 2 1 320px; }

.pc-pill-k {
  display: block;
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-pale);
  margin-bottom: 5px;
}

.pc-pill-v {
  display: block;
  font-size: 0.93rem;
  color: rgba(14, 20, 27, 0.88);
  font-weight: 600;
}

.pc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pc-results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-hairline);
  margin-bottom: 10px;
}

.pc-results { list-style: none; margin: 0; padding: 0; }

.pc-result {
  padding: 14px 2px;
  border-bottom: 1px solid var(--c-hairline);
}

.pc-result-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: rgba(14, 20, 27, 0.92);
}

.pc-result-title { font-weight: 600; line-height: 1.45; }
.pc-result-cta { opacity: 0.40; font-size: 0.95rem; }

.pc-result-meta {
  margin-top: 6px;
  color: var(--c-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.pc-empty { padding: 22px 4px 10px; }

.pc-empty-kicker {
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-pale);
  margin-bottom: 10px;
}

.pc-empty-title {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.pc-empty-text { color: var(--c-muted); line-height: 1.65; }

.pagination {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-link,
.page-current {
  padding: 6px 10px;
  font-size: 0.70rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--c-muted);
}

.page-link:hover {
  color: rgba(14, 20, 27, 0.86);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(14, 20, 27, 0.28);
}

.page-current {
  color: rgba(14, 20, 27, 0.92);
  border-bottom: 1px solid rgba(14, 20, 27, 0.65);
}

/* =========================================================
   MOBILE BASELINE — global ≤768px adjustments
   ========================================================= */
@media (max-width: 768px) {
  /* iOS Safari zooms the viewport whenever a focused input has a
     computed font-size below 16px. The desktop default (0.95rem ≈
     15.2px) trips this. Lift to 16px on mobile only. */
  .input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px;
  }

  /* Page side padding aligns with .ql-page (16px) for a consistent gutter
     between marketing shell and tools shell on phones. */
  .page,
  .planning-shell { padding-left: 16px; padding-right: 16px; }
}

} /* end @layer layout */