/* ==========================================================================
   Sarkhej.com
   One stylesheet, mobile first, touch optimised.

   Colours arrive as CSS custom properties written by the layout from
   tblSystem, so re-theming the site is a database edit rather than a code
   change:
       --c-back        page background
       --c-back-font   text on the page background
       --c-post        post / card surface
       --c-post-font   text on that surface
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  --c-back: #f8f8f8;
  --c-back-font: #2d2d2d;
  --c-post: #ffffff;
  --c-post-font: #2d2d2d;

  --c-accent: #1a6dff;
  --c-accent-ink: #ffffff;
  --c-ok: #0f7b46;
  --c-warn: #9a5b00;
  --c-danger: #b3261e;

  --line: color-mix(in srgb, var(--c-back-font) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--c-back-font) 26%, transparent);
  --muted: color-mix(in srgb, var(--c-back-font) 62%, transparent);
  --surface-2: color-mix(in srgb, var(--c-post) 92%, var(--c-back-font));

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .09);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .16);

  --header-h: 60px;
  --nav-h: 73px;                     /* the view bar, content-sized */
  --nav-w: 360px;                    /* the view bar, same on every device */
  --footer-h: 44px;                  /* one line of links, padding and rule */
  --tap: 44px;                       /* minimum comfortable touch target */
  --content-max: 620px;
  --side-w: 340px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", "Noto Sans Gujarati", Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-back-font);
  background: var(--c-back);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--sp-3); font-weight: 650; }
p { margin: 0 0 var(--sp-3); }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: var(--sp-3); z-index: 200;
  background: var(--c-post); color: var(--c-post-font);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  box-shadow: var(--shadow-2); transition: top .15s var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* --------------------------------------------------------------- header */
.site-header {
  /* One gutter, applied on every side, so the wordmark is inset from the
     top and left by exactly the same amount as the action on the right is
     inset from the top, right and bottom. */
  --header-gutter: var(--sp-2);

  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: var(--header-h);
  padding: var(--header-gutter);
  padding-top: calc(var(--header-gutter) + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--c-back) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex; align-items: center;
  min-width: 0; text-decoration: none; color: inherit;
  padding: 0; border-radius: 0;
}

/* Exactly the height of the gutter-inset content box, so the space above and
   below the wordmark matches the space above and below whatever sits
   opposite. Everything in the header is kept within this same height, which
   is why the header does not change size between signed out and signed in.
   object-position pins the artwork left whatever its aspect ratio. */
.brand__cover {
  display: block;
  height: calc(var(--header-h) - (var(--header-gutter) * 2));
  width: auto;
  max-width: 62vw;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
}

/* The cover image is a wordmark, so it already carries the site name. The
   text version is only a fallback for screens too narrow to fit it. */
.brand__name {
  display: none;
  align-self: center;
  padding-left: var(--sp-4);
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 359px) {
  .brand__cover { display: none; }
  .brand__name  { display: block; }
}

.site-header__action { display: flex; align-items: center; flex: none; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--c-back-font);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform .12s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* The primary action takes the theme's font colour as its background, and
   the page background as its text - so it always reads as the strongest
   thing on the page and stays in step whenever the Admin re-themes. */
.btn--primary {
  background: var(--c-back-font);
  color: var(--c-back);
  box-shadow: var(--shadow-1);
}
.btn--primary:hover { background: color-mix(in srgb, var(--c-back-font) 86%, var(--c-back)); }

.btn--ghost { background: transparent; border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); }

.btn--large { min-height: 52px; padding: 0 var(--sp-5); font-size: 1rem; }
.btn--small { min-height: 34px; padding: 0 var(--sp-3); font-size: .85rem; }

.icon-btn {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid transparent; border-radius: var(--r-full);
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color .15s var(--ease), transform .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(.92); }
.icon-btn--small { width: 34px; height: 34px; }

.link-btn {
  background: none; border: 0; padding: var(--sp-1) 0;
  color: var(--c-accent); font-size: .88rem; font-weight: 600;
  cursor: pointer; text-align: left; text-decoration: underline;
}

.inline-form { display: contents; }

/* ----------------------------------------------------------------- main */
.site-main { flex: 1 0 auto; width: 100%; }

/* ---------------------------------------------------------------- flash */
.flash-stack {
  position: sticky; top: var(--header-h); z-index: 45;
  display: grid; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 0;
  max-width: calc(var(--content-max) + var(--side-w) + var(--sp-5) * 3);
  margin-inline: auto;
}
.flash {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--c-post); color: var(--c-post-font);
  box-shadow: var(--shadow-1); font-size: .92rem;
}
.flash--success { border-left: 4px solid var(--c-ok); }
.flash--error   { border-left: 4px solid var(--c-danger); }
.flash--warning { border-left: 4px solid var(--c-warn); }
.flash--info    { border-left: 4px solid var(--c-accent); }
.flash__close {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--muted); padding: 0 var(--sp-1);
}

/* --------------------------------------------------------------- footer */
/* One compact line. Minimal vertical space, still a comfortable tap target
   on a phone thanks to the link padding. */
.site-footer {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
}
.site-footer__line {
  margin: 0;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  /* No separator marks, so the spacing has to do that job. */
  gap: var(--sp-2) var(--sp-4);
  line-height: 1.8;
}
.site-footer__line a { color: inherit; padding: 2px 0; }
/* Four items with no separators need every pixel on the narrowest phones. */
@media (max-width: 379px) {
  .site-footer { font-size: .72rem; }
  .site-footer__line { gap: var(--sp-1) var(--sp-3); }
}

/* ================================================================ WELCOME */
/* This page has no header bar, so the flash stack sticks to the very top and
   the content gets a little breathing room where the bar used to be. */
.page-home--welcome .flash-stack { top: 0; }

.welcome { padding: var(--sp-7) var(--sp-4) var(--sp-6); }
.welcome__inner {
  max-width: 560px; margin-inline: auto; text-align: center;
  /* Lets the tagline below size itself against the cover image's width. */
  container-type: inline-size;
}
/* The wordmark is the page's title, so it is given real presence: full
   container width, no frame, no shadow, nothing competing with it. */
.welcome__cover {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto var(--sp-5);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
/* The tagline sits at 80% of the cover image's width, in a regular weight.
   The cover is min( container width, 460px ), so 80% of it is
   min( 80cqw, 368px ) - and the font size is that measure divided by the
   tagline's own length in ems, which is what makes the line fill it.
   The block is capped at the same measure so a longer tagline set in Admin
   wraps inside it rather than running wider. */
.welcome__text {
  width: min(80%, 368px);
  margin-inline: auto;
  /* The divisor is the tagline's length in ems, rounded up a little so the
     line still fits on one row on system fonts a touch wider than Arial. */
  font-size: clamp(1rem, 4.6vw, 1.44rem);      /* fallback: no container units */
  font-size: calc(min(80cqw, 368px) / 16);
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-back-font);
  text-wrap: balance;
  /* 1.5 x the standard --sp-5 step: 36px of air before the sign-in button. */
  margin-bottom: calc(var(--sp-5) * 1.5);
}
.welcome__text p:last-child { margin-bottom: 0; }

/* ================================================================== VIEWS */
/* Three views behind one bar: People, Topics, Latest. Only one is in the
   document flow at a time, so there is no second scroll position to keep. */
.views {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-4)
           calc(var(--nav-h) + var(--footer-h) + var(--sp-5));
}
.view { display: none; }
.view.is-on { display: block; animation: view-in .18s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .view.is-on { animation: none; } }

/* A heading, not a toolbar - it scrolls away with the content. */
.viewhead { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-3); }
.viewhead h1, .viewhead h2 { font-size: 1.15rem; margin: 0; }
.viewhead span { font-size: .82rem; color: var(--muted); }
.viewhead__action { margin-left: auto; align-self: center; }

/* Posts grouped by post type. */
.topic { margin-bottom: var(--sp-5); }
.topic__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.topic__count {
  margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none;
  background: var(--surface-2); border-radius: var(--r-full); padding: 1px var(--sp-2);
}

/* ============================================================== VIEW BAR */
/* One bar at every width, fixed at the foot of the page where a thumb can
   reach it. A single gutter does three jobs: it insets each item from the
   bar, separates one item from the next, and pads the icon and label inside
   the highlight - so a selected item carries the same margin on all sides. */
.nav {
  --gutter: var(--sp-2);

  position: fixed; left: 50%; transform: translateX(-50%);
  /* Clears the footer and then one more gutter, so the bar sits above it by
     the same margin the highlight sits inside the bar. The --sp-2 is the
     footer's own bottom margin. */
  bottom: calc(var(--footer-h) + var(--sp-2) + var(--gutter) + env(safe-area-inset-bottom));
  z-index: 40;
  /* The same pill at every width - a desktop mouse gains nothing from a
     wider target, and one size keeps the control recognisable across
     devices. It only narrows when the screen cannot hold it. */
  width: min(var(--nav-w), calc(100% - var(--sp-6)));
  display: flex; gap: var(--gutter); padding: var(--gutter);
  background: var(--c-post); border: 1px solid var(--line);
  border-radius: var(--r-full); box-shadow: var(--shadow-2);
}
.nav__btn {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: var(--gutter); border: 0; border-radius: var(--r-full);
  background: none; color: var(--muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav__btn svg { flex: none; }
.nav__btn:hover { background: var(--surface-2); }
.nav__btn[aria-selected="true"] { color: var(--c-back-font); background: var(--surface-2); }
.nav__label {
  font-size: .66rem; font-weight: 600; letter-spacing: .01em;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The one action, in the theme's own colour - never a "selected" state,
   because it is a thing you do rather than a place you are. */
.nav__new { color: var(--c-back); background: var(--c-back-font); box-shadow: var(--shadow-1); }
.nav__new:hover { background: color-mix(in srgb, var(--c-back-font) 86%, var(--c-back)); color: var(--c-back); }

/* "New since you last looked", so it only ever shows on a view you are not
   currently in. */
.nav__dot {
  position: absolute; top: 4px; right: calc(50% - 18px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent); border: 2px solid var(--c-post);
  opacity: 0; transition: opacity .2s var(--ease);
}
.nav__btn.has-new .nav__dot { opacity: 1; }

/* =================================================================== FEED */
.feed { display: grid; gap: var(--sp-4); }

.post {
  background: var(--c-post);
  color: var(--c-post-font);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  animation: post-in .25s var(--ease) both;
}
@keyframes post-in { from { opacity: 0; transform: translateY(6px); } }

.post__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) 0;
}
.post__avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--surface-2);
}
.post__avatar--initials {
  display: grid; place-items: center;
  background: var(--c-accent); color: var(--c-accent-ink);
  font-weight: 700; font-size: .9rem;
}
.post__byline { min-width: 0; flex: 1; }
.post__author {
  display: block; font-weight: 650; font-size: .95rem; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.post__author { text-decoration: none; }
a.post__author:hover { text-decoration: underline; text-decoration-color: var(--c-accent); }
.post__meta {
  margin: 0; font-size: .78rem; color: var(--muted);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.post__occupation { font-weight: 600; color: var(--c-accent); }
.post__template-icon { width: 22px; height: 22px; opacity: .7; flex: none; }

.post__body { padding: var(--sp-3) var(--sp-4); }
.post__template-name {
  display: inline-block; margin: 0 0 var(--sp-2);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
  padding: 2px var(--sp-2); border-radius: var(--r-full);
}
.post__field { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.post__field--primary .post__field-value { font-size: 1.05rem; font-weight: 600; }
.post__field-label { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.post__locality {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin: var(--sp-2) 0 0; font-size: .82rem; color: var(--muted);
}

.post__actions {
  display: flex; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  border-top: 1px solid var(--line);
}
.post__action {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap);
  background: none; border: 0; border-radius: var(--r-md);
  color: var(--muted); font-size: .85rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.post__action:hover { background: var(--surface-2); color: var(--c-post-font); }
.post__action:active { transform: scale(.96); }
@media (max-width: 380px) { .post__action span { display: none; } }

.post__contact {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: grid; gap: var(--sp-2);
}
.post__contact[hidden] { display: none; }
.contact-row { display: flex; align-items: center; gap: var(--sp-2); font-size: .9rem; }
.contact-row a { overflow-wrap: anywhere; }
.contact-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.feed__foot { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-5) 0; }
.feed__end { color: var(--muted); font-size: .85rem; margin: 0; }

.empty {
  display: grid; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--muted);
  background: var(--c-post); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}
.empty__title { font-weight: 650; color: var(--c-post-font); margin: 0; }
.empty__text { margin: 0; font-size: .9rem; }

/* ============================================================= DIRECTORY */
.directory-search { padding: 0 0 var(--sp-3); }
.directory { display: grid; gap: var(--sp-4); }
.directory__group { display: grid; gap: var(--sp-2); }
.directory__heading {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.directory__count {
  margin-left: auto; font-variant-numeric: tabular-nums;
  background: var(--surface-2); border-radius: var(--r-full); padding: 0 var(--sp-2);
}
.directory__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }

.professional {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2); border-radius: var(--r-md);
  background: var(--c-post); color: var(--c-post-font);
  border: 1px solid var(--line);
}
@media (min-width: 900px) { .professional { border-color: transparent; } .professional:hover { background: var(--surface-2); } }
.professional__photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.professional__photo--initials {
  display: grid; place-items: center; background: var(--c-accent); color: var(--c-accent-ink);
  font-size: .78rem; font-weight: 700;
}
.professional__body { min-width: 0; flex: 1; display: grid; }
.professional__name {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: .92rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.professional__verified { color: var(--c-ok); flex: none; }
.professional__meta { font-size: .74rem; color: var(--muted); }
.professional[hidden] { display: none; }

/* ================================================================= SHEET */
.sheet {
  width: min(560px, 100%);
  max-height: 88dvh;
  margin: auto auto 0;
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--c-post); color: var(--c-post-font);
  box-shadow: var(--shadow-3);
  overflow-y: auto;
  animation: sheet-in .22s var(--ease);
}
.sheet::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); }
@keyframes sheet-in { from { transform: translateY(16px); opacity: 0; } }
@media (min-width: 700px) {
  .sheet { margin: auto; border-radius: var(--r-lg); }
}
.sheet__title { font-size: 1.2rem; margin-bottom: var(--sp-4); padding-right: var(--sp-6); }
.sheet__dismiss { position: absolute; top: var(--sp-3); right: var(--sp-3); margin: 0; }

/* Consent notice and its tick-box. Set apart from the form so it reads as
   terms rather than as another field, but kept short enough to be read. */
.consent-notice {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: .82rem; line-height: 1.5; color: var(--muted);
}
/* No paragraph gap: the three lines run on the same rhythm as the wrapped
   lines inside each of them, and the bold lead-ins do the separating. */
.consent-notice p { margin: 0; }
.consent-notice strong { color: var(--c-post-font); }

.consent-check {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: .85rem; line-height: 1.45;
  cursor: pointer;
  /* Sits tighter than a form field: pulls the surrounding grid gap from
     16px down to 4px on both sides. */
  margin-block: calc(var(--sp-1) - var(--sp-4));
}
.consent-check input {
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--c-accent); cursor: pointer;
}
.sheet__dismiss button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--surface-2); color: inherit;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}

/* ================================================================= FORMS */
.form { display: grid; gap: var(--sp-4); }
/* Intro text inside a form captions the field beneath it rather than standing
   apart from it, so it loses its paragraph margin and sits closer. */
.form > .card__hint { margin-bottom: calc(var(--sp-1) - var(--sp-4)); }
.form--inline { grid-auto-flow: column; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-3); }
@media (max-width: 520px) { .form--inline { grid-auto-flow: row; grid-template-columns: 1fr; align-items: stretch; } }

.field { display: grid; gap: var(--sp-1); min-width: 0; }
.field--grow { flex: 1; }
/* Pulls the form's 16px grid gap down to 4px below this field - used where
   the actions should sit as close as they do under the consent tick-box. */
.field--tight { margin-bottom: calc(var(--sp-1) - var(--sp-4)); }
.field__label { font-size: .85rem; font-weight: 600; }
.field__hint { font-size: .78rem; color: var(--muted); }
/* An aside carried inside a field label - same size and colour as a card
   hint, but inline so it costs no extra line. */
.field__note { font-size: .88rem; font-weight: 400; color: var(--muted); }
.field__optional, .field__req { font-weight: 400; font-size: .74rem; color: var(--muted); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--c-post);
  color: var(--c-post-font);
  font-size: 16px;                     /* 16px stops iOS zooming on focus */
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
  outline: none;
}
textarea.input { min-height: 88px; resize: vertical; line-height: 1.5; }
.input--tall { min-height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.input--small { min-height: 34px; padding: 2px var(--sp-2); font-size: .85rem; }
/* Matches the phone field: same 16px type, same 44px box. The tracking and
   centring are what still make it read as a code rather than a text field.
   The left padding offsets the trailing letter-space so the digits sit
   optically centred. */
.input--code {
  text-align: center;
  font-size: 16px;
  letter-spacing: .3em;
  padding-left: calc(var(--sp-3) + .3em);
  font-variant-numeric: tabular-nums;
}

/* Phone field: a fixed country-code prefix sitting inside the same box as the
   national number, so the two read as one control. The wrapper carries the
   border and shows the focus ring on behalf of the input inside it. */
.input--tel { display: flex; align-items: center; gap: var(--sp-2); padding-block: 0; }
.input--tel:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.input__prefix {
  flex: none; color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-right: var(--sp-2);
  border-right: 1px solid var(--line);
  user-select: none;
}
.input__bare {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none; padding: 0;
  min-height: calc(var(--tap) - 2px);
  color: inherit; font-size: 16px;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.input--hex { width: 96px; font-family: ui-monospace, monospace; }

.check { display: flex; align-items: center; gap: var(--sp-2); font-size: .92rem; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--c-accent); }

.form__actions { display: flex; gap: var(--sp-3); justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.form__actions--sticky {
  position: sticky; bottom: 0; z-index: 10;
  padding: var(--sp-3) 0; margin-top: var(--sp-3);
  background: linear-gradient(transparent, var(--c-back) 40%);
}
.form__status { margin-right: auto; font-size: .85rem; color: var(--muted); }
.form__note { font-size: .82rem; color: var(--muted); margin: 0; }
.form__error {
  margin: 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); font-size: .88rem;
  background: color-mix(in srgb, var(--c-danger) 10%, transparent);
  color: var(--c-danger);
}
.form__error[hidden] { display: none; }

.recaptcha-host { display: grid; justify-items: center; min-height: 0; }
.recaptcha-host:not(:empty) { min-height: 78px; }
/* The class sets display, which beats the browser's [hidden] { display:none }
   - so without this the box still occupies a row of the form grid, and its
   gaps, after profile.js hides it on the non-Firebase flow. */
.recaptcha-host[hidden] { display: none; }

/* ================================================================= CARDS */
.card {
  background: var(--c-post); color: var(--c-post-font);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--shadow-1);
  display: grid; gap: var(--sp-3); align-content: start;
}
.card__title { font-size: 1.05rem; margin: 0; }
.card__hint { font-size: .88rem; color: var(--muted); margin: 0; }

.notice {
  margin: 0; padding: var(--sp-3);
  border-radius: var(--r-md); font-size: .9rem;
  border-left: 4px solid var(--line-strong); background: var(--surface-2);
}
.notice--ok   { border-left-color: var(--c-ok); }
.notice--warn { border-left-color: var(--c-warn); }
.notice--info { border-left-color: var(--c-accent); }

.badge-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 1px var(--sp-2); border-radius: var(--r-full);
  font-size: .74rem; font-weight: 650; white-space: nowrap;
  background: var(--surface-2); color: var(--muted);
}
.badge--ok    { background: color-mix(in srgb, var(--c-ok) 14%, transparent); color: var(--c-ok); }
.badge--warn  { background: color-mix(in srgb, var(--c-warn) 16%, transparent); color: var(--c-warn); }
.badge--info  { background: color-mix(in srgb, var(--c-accent) 13%, transparent); color: var(--c-accent); }
.badge--admin { background: color-mix(in srgb, #7c3aed 15%, transparent); color: #6d28d9; }
.badge--muted { background: var(--surface-2); color: var(--muted); }

/* =============================================================== PROFILE */
.profile {
  display: grid; gap: var(--sp-4);
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-7);
}
.profile__identity { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-4); }
.profile__photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.profile__photo--initials {
  display: grid; place-items: center; background: var(--c-accent); color: var(--c-accent-ink);
  font-size: 1.6rem; font-weight: 700;
}
.profile__identity-body { display: grid; gap: var(--sp-1); justify-items: start; min-width: 0; }
.profile__name { font-size: 1.3rem; margin: 0; overflow-wrap: anywhere; }
.profile__email { margin: 0; font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.profile__phone { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: 1.05rem; }

/* Email, mobile number and occupation. One list so the three sit on an even
   rhythm, all in the same quiet size and colour; the pencil is kept to the
   row height so a row with one is no taller than a row without. */
.profile__facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-1); justify-items: start; width: 100%;
}
.profile__fact {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 24px; max-width: 100%;
}
.profile__fact-icon { width: 15px; height: 15px; flex: none; color: var(--muted); }
.profile__fact-value {
  font-size: .88rem; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A text row is shorter than its 24px box, so the space you see below it is
   the list gap plus that slack - 9px. Two button rows have no slack, so they
   would sit 4px apart and read as tighter than the rows above. This tops the
   difference up so every visible gap in the card matches. */
.profile__fact:has(.btn) + .profile__fact:has(.btn) { margin-top: 5px; }

/* Unlink is a withdrawal, not a primary action - quiet by default, and it
   only shows its intent on hover. */
.profile__unlink {
  min-height: 26px; padding: 0 var(--sp-3);
  font-size: .78rem; font-weight: 600;
  color: var(--muted); border-color: var(--line);
}
.profile__unlink:hover {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 40%, transparent);
  background: color-mix(in srgb, var(--c-danger) 8%, transparent);
}

/* The call-to-action that stands in for a missing value can be a long label,
   so let it wrap inside the card instead of running past its edge. */
.profile__fact .btn {
  max-width: 100%;
  white-space: normal; text-align: center; line-height: 1.25;
  padding-block: var(--sp-1);
}
.profile__fact .icon-btn {
  width: 24px; height: 24px; color: var(--muted);
}
.profile__fact .icon-btn:hover { color: var(--c-back-font); }

.history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.history__item { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); }
.history__item--retired { opacity: .62; }
.history__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.history__template { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-accent); }
.history__field { margin: 0 0 var(--sp-1); overflow-wrap: anywhere; }
.history__field--muted { color: var(--muted); font-size: .9rem; }
.history__meta { margin: var(--sp-2) 0 0; font-size: .78rem; color: var(--muted); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.history__note { font-style: italic; }

/* ================================================================ CONTENT */
.content {
  max-width: 720px; margin-inline: auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}
.content__title { font-size: clamp(1.6rem, 5vw, 2.1rem); margin-bottom: var(--sp-5); }
.content__body { font-size: 1.02rem; }
.content__body h2 { font-size: 1.25rem; margin: var(--sp-6) 0 var(--sp-3); }
.content__body h3 { font-size: 1.05rem; margin: var(--sp-5) 0 var(--sp-2); }
.content__body ul, .content__body ol { padding-left: 1.3em; display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-4); }
.content__body p { line-height: 1.7; }

/* ================================================================== 404 */
.error-page { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-7) var(--sp-4); }
.error-page__code { font-size: 4rem; font-weight: 800; margin: 0; color: var(--line-strong); line-height: 1; }
.error-page__title { margin: 0; }
.error-page__text { color: var(--muted); margin: 0 0 var(--sp-3); }

/* ================================================================= ADMIN */
.admin { max-width: 1180px; margin-inline: auto; padding: var(--sp-4) var(--sp-4) var(--sp-7); }
.admin__head { margin-bottom: var(--sp-4); }
.admin__title { margin: 0; font-size: 1.5rem; }
.admin__subtitle { font-size: .85rem; color: var(--muted); margin: var(--sp-1) 0 var(--sp-4); }
.admin__subtitle code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }

.stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.stat {
  display: grid; min-width: 96px; padding: var(--sp-2) var(--sp-3);
  background: var(--c-post); border: 1px solid var(--line); border-radius: var(--r-md);
}
.stat__n { font-size: 1.4rem; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__l { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.tabs {
  display: flex; gap: var(--sp-1); overflow-x: auto;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.tab {
  flex: none; min-height: 40px; padding: 0 var(--sp-3);
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--muted); font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.tab.is-active { color: var(--c-back-font); border-bottom-color: var(--c-accent); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fade-in .2s var(--ease); }
@keyframes fade-in { from { opacity: 0; } }

.admin-form {
  background: var(--c-post); color: var(--c-post-font);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.admin-split { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 1000px) { .admin-split { grid-template-columns: 360px minmax(0, 1fr); } }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-4); }
.fieldset legend {
  padding: 0; margin-bottom: var(--sp-2);
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}

.color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.color-input { display: flex; align-items: center; gap: var(--sp-2); }
.color-input input[type="color"] {
  width: 44px; height: 40px; padding: 2px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: none;
}

.admin-toolbar { display: flex; align-items: end; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.admin-toolbar__count { font-size: .82rem; color: var(--muted); }

.table-wrap {
  background: var(--c-post); color: var(--c-post-font);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
.table th, .table td { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: middle; }
.table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.table tbody tr { border-top: 1px solid var(--line); }
.table tbody tr:hover { background: var(--surface-2); }
.table__muted { color: var(--muted); font-size: .82rem; display: block; }
.table__name { display: block; font-weight: 600; }
.table__icon { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.table__json {
  margin: 0; font-family: ui-monospace, monospace; font-size: .74rem;
  max-width: 460px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted);
}

.table-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-3); }
.table-pager__label { font-size: .82rem; color: var(--muted); }

/* ================================================================ TOASTS */
.toast-stack {
  position: fixed; z-index: 100;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  display: grid; gap: var(--sp-2); width: min(440px, calc(100vw - var(--sp-6)));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: #1c1c1e; color: #fff;
  box-shadow: var(--shadow-3); font-size: .9rem;
  animation: toast-in .2s var(--ease);
}
.toast--error { background: var(--c-danger); }
.toast--success { background: var(--c-ok); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* -------------------------------------------------------------- loading */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--c-post) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.is-busy { opacity: .6; pointer-events: none; }

/* ---------------------------------------------------------- dark scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .55);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .6);
  }
}

/* ------------------------------------------------------------ print */
@media print {
  .site-header, .site-footer, .nav, .post__actions, .tabs, .toast-stack { display: none !important; }
  body { background: #fff; color: #000; }
  .post, .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}