/* ==========================================================================
   GoKarigar design system
   --------------------------------------------------------------------------
   Deliberately a single hand-written stylesheet with NO BUILD STEP. It can be
   uploaded to shared hosting as-is, and there is no toolchain to break between
   your laptop and the server.

   Two constraints drove every choice here:

   1. The customer is on a cheap Android phone over patchy data. Body text uses
      the system font stack (zero download, and it already renders Bengali and
      Devanagari). Only the brand face is fetched, and only in two weights.
   2. The worker may be reading this in bright sunlight with tired eyes. Tap
      targets are 44px minimum, contrast is high, and nothing important is
      communicated by colour alone.
   ========================================================================== */

:root {
  /* Taken straight from the logo: the navy of "Go", the orange-to-amber of
     "Karigar", and the green of the tagline dots.

     Navy carries structure - headers, text, links. Orange is the accent that
     says "act here": the main buttons, highlights, the karigar side. The raw
     logo orange is too light for small white text, so --brass (the text-safe
     orange) is used wherever orange is read rather than just seen. */
  --brand:      #0A2856;
  --brand-dark: #061B3D;
  --brand-soft: #EAF0F8;

  --accent:      #F4580A;
  --accent-2:    #FC9F0A;
  --grad-accent: linear-gradient(135deg, #EE4D06 0%, #F6720A 52%, #FC9F0A 100%);
  --grad-navy:   linear-gradient(160deg, #0C2E66 0%, #071C43 100%);

  --brass:       #C2410C;
  --brass-soft:  #FFF1E7;
  --brass-rule:  #FBD3B6;

  --ink:      #121826;
  --ink-2:    #313A4B;
  --slate:    #5A6377;
  --slate-2:  #8A93A6;

  --paper:    #F8F6F2;
  --surface:  #FFFFFF;
  --surface-2:#F2F0EB;
  --rule:     #E2DFD8;
  --rule-soft:#EDEBE5;

  /* Semantic - separate from the accent, and never the only signal */
  --live:      #13874A;
  --live-soft: #EAF8F0;
  --warn:      #8A6410;
  --warn-soft: #F8EFD8;
  --danger:    #B42318;
  --danger-soft:#FDECEA;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow:    0 1px 2px rgba(10, 24, 56, .06), 0 4px 14px rgba(10, 24, 56, .06);
  --shadow-lg: 0 2px 4px rgba(10, 24, 56, .06), 0 16px 36px -8px rgba(10, 24, 56, .18);

  --font-brand: "Anek Latin", "Arial Narrow", system-ui, sans-serif;
  --font-body:  system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
                "Noto Sans Bengali", "Noto Sans Devanagari", Arial, sans-serif;

  --tap: 44px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

/* ------------------------------------------------------------------ layout */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.wrap-narrow { max-width: 660px; margin: 0 auto; padding: 0 16px; }

.stack > * + * { margin-top: 12px; }
.stack-lg > * + * { margin-top: 24px; }

.row { display: flex; gap: 12px; align-items: center; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.row-wrap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }

.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-icons { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }

.section { padding: 28px 0; }
/* .nav a sets display:inline-flex at specificity (0,1,1), which beat a bare
   .hide-sm at (0,1,0) - so the nav links never actually hid on phones. Match the
   specificity rather than reaching for !important. */
.hide-sm,
.nav a.hide-sm { display: none; }
@media (min-width: 720px) {
  .hide-sm { display: initial; }
  .nav a.hide-sm { display: inline-flex; }
}

/* --------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-family: var(--font-brand);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
h4 { font-size: .97rem; }

@media (min-width: 720px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.55rem; }
}

p { margin: 0 0 10px; }
.lede { font-size: 1.06rem; color: var(--ink-2); }
.muted { color: var(--slate); }
.small { font-size: .85rem; }
.tiny { font-size: .76rem; }
.strong { font-weight: 600; }

.eyebrow {
  font-family: var(--font-brand);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}

.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- header */

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
}
.brand {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  /* No uppercase: GOKARIGAR runs together, GoKarigar reads as Go + Karigar. */
}
.brand span { color: var(--brand); }

.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  padding: 8px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 500;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}
.nav a:hover { background: var(--surface-2); }
.nav a.on { color: var(--brand); background: var(--brand-soft); }

/* ------------------------------------------------------------------ surface */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.card-pad { padding: 16px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px;
}

.divider { height: 1px; background: var(--rule-soft); border: 0; margin: 16px 0; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn:hover { background: var(--brand-dark); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #8E3125; }

.btn-live { background: var(--live); }
.btn-live:hover { background: #0E6342; }

.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: .88rem; }
.btn-lg { min-height: 52px; font-size: 1.08rem; padding: 12px 24px; }

/* ------------------------------------------------------------------- forms */

label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }

.input, select.input, textarea.input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.input:focus { border-color: var(--brand); outline: 2px solid var(--brand-soft); }
textarea.input { min-height: 90px; resize: vertical; }

.input-lg { min-height: 52px; font-size: 1.1rem; }

/* A pincode is six digits and gets typed constantly - give it room and rhythm */
.input-pin {
  font-variant-numeric: tabular-nums;
  letter-spacing: .18em;
  font-size: 1.2rem;
  font-weight: 600;
}

.field-error { color: var(--danger); font-size: .85rem; margin-top: 4px; }
.hint { color: var(--slate); font-size: .84rem; margin-top: 4px; }

/* --------------------------------------------------------------- indicators */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: .74rem;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.badge-fact  { color: var(--brand); background: var(--brand-soft); border-color: #CFDAEC; }
.badge-live  { color: var(--live);   background: var(--live-soft);   border-color: #B5E4C8; }
.badge-warn  { color: var(--warn);   background: var(--warn-soft);   border-color: #EBD9A8; }
.badge-quiet { color: var(--slate);  background: var(--surface-2);   border-color: var(--rule); }
.badge-spon  { color: var(--brass);  background: var(--brass-soft);  border-color: var(--brass-rule); }

/* Presence gets a dot as well as colour, so it survives colour blindness
   and a sun-washed screen. */
.dot-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); flex: none;
  box-shadow: 0 0 0 3px var(--live-soft);
}

.stars { color: var(--brass); letter-spacing: 1px; font-size: .95rem; }

/* -------------------------------------------------------------- result card */

.result {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.result:hover { border-color: var(--slate-2); }
.result.is-sponsored { border-color: var(--brass-rule); background: #FFFAF5; }

.avatar {
  width: 54px; height: 54px; flex: none;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  border: 1px solid #CFDAEC;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.result-name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--ink);
  text-decoration: none;
}
.result-name:hover { color: var(--brand); }

.rate {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------- icon tiles */

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  min-height: 92px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.25;
}
.tile:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.tile.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.tile-glyph { font-size: 1.5rem; line-height: 1; }

/* ------------------------------------------------------------------ notices */

.notice {
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
  padding: 12px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice-warn   { border-left-color: var(--brass);  background: var(--brass-soft); }
.notice-danger { border-left-color: var(--danger); background: var(--danger-soft); }
.notice-live   { border-left-color: var(--live);   background: var(--live-soft); }

.notice p:last-child { margin-bottom: 0; }

/* The pre-contact notice is a legal surface. It is styled to be READ, not
   skimmed past - full width, high contrast, never collapsed behind a link. */
.legal-notice {
  border: 2px solid var(--brass);
  background: var(--brass-soft);
  padding: 16px;
  border-radius: var(--radius);
}
.legal-notice h3 { color: var(--brass); font-size: 1rem; margin-bottom: 8px; }
.legal-notice ul { margin: 0; padding-left: 18px; }
.legal-notice li { margin-bottom: 6px; font-size: .92rem; }

/* ----------------------------------------------------------------- presence */

.presence-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--surface);
}
.presence-bar.is-live { border-color: #B5E4C8; background: var(--live-soft); }

/* --------------------------------------------------------------------- misc */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 12px 14px; }
.stat-v { font-family: var(--font-brand); font-size: 1.5rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-l { font-size: .74rem; color: var(--slate); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th { text-align: left; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--rule); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

.flash {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: 16px;
  font-weight: 500;
}
.flash-ok    { background: var(--live-soft);   border-color: #B5E4C8; color: var(--live); }
.flash-error { background: var(--danger-soft); border-color: #E8BFB7; color: var(--danger); }

.footer {
  /* No top margin: sections already end with padding, and a full-bleed band
     above must butt straight against the footer rather than show a grey gap. */
  padding: 32px 0 40px;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  font-size: .87rem;
  color: var(--slate);
}
.footer a { color: var(--slate); text-decoration: underline; }
.footer a:hover { color: var(--brand); }

.pagination { display: flex; gap: 4px; flex-wrap: wrap; list-style: none; padding: 0; margin: 20px 0 0; }
.pagination a, .pagination span {
  min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; font-size: .9rem;
}
.pagination .active span { background: var(--brand); color: #fff; border-color: var(--brand); }
.pagination .disabled span { opacity: .4; }

/* Sticky bottom action bar for the profile page on phones - the call button
   should never be more than a thumb away. */
.action-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  z-index: 30;
}

@media print {
  .masthead, .action-bar, .footer { display: none; }
}

/* ==========================================================================
   Home page
   --------------------------------------------------------------------------
   The hero is a solid cobalt band rather than a gradient or a photograph. Two
   reasons: it is the visual language of an Indian trade signboard, which is the
   world this product lives in; and a flat colour costs nothing to download on
   the 3G connection most of our users are on.
   ========================================================================== */

.icon { flex: none; vertical-align: middle; }

.hero {
  background: var(--brand);
  color: #fff;
  padding: 40px 0 44px;
  position: relative;
}

/* A faint blueprint grid, drawn in CSS - no image request. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.hero-inner { position: relative; }

.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 7vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: 16ch;
}
.hero h1 em { font-style: normal; color: #FDBA4D; }

.hero-sub {
  color: rgba(255,255,255,.85);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  max-width: 46ch;
  margin: 14px 0 0;
}

.hero-proof {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 20px 0 0;
  color: rgba(255,255,255,.9);
  font-size: .88rem;
}
.hero-proof b { font-variant-numeric: tabular-nums; font-size: 1.05rem; }

/* The search card straddles the bottom edge of the band, so the eye lands on it. */
.search-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(4, 16, 44, .26);
  padding: 18px;
  margin-top: 26px;
  position: relative;
  /* The card sits INSIDE the cobalt band, which sets color:#fff - reset it or
     every label in the search form inherits white on white. */
  color: var(--ink);
}

/* Presence, stated as a live fact. The dot pulses because "right now" is the
   whole claim - but it holds still for anyone who asked for reduced motion. */
.live-strip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--live-soft);
  border: 1px solid #B5E4C8;
  color: var(--live);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: .9rem;
  font-weight: 600;
}
.live-strip .dot-live { animation: pulse 2s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--live-soft); }
  50%      { box-shadow: 0 0 0 7px rgba(21,128,61,.12); }
}
@media (prefers-reduced-motion: reduce) {
  .live-strip .dot-live { animation: none; }
}

/* Big, obvious entry points for "something is broken right now". */
.urgent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

.urgent-tile {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.25;
  min-height: 104px;
  transition: border-color .12s, transform .12s;
}
.urgent-tile .icon { color: var(--brand); }
.urgent-tile:hover { border-color: var(--brand); transform: translateY(-2px); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .urgent-tile { transition: none; } .urgent-tile:hover { transform: none; } }

/* How it works. Numbered because it genuinely is a sequence. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; counter-reset: step; }
.step { counter-increment: step; }
.step::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 10px;
}
.step h3 { margin-bottom: 4px; }
.step p { color: var(--slate); font-size: .92rem; margin: 0; }

/* The three claims that are actually structural, not marketing. */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.why-cell { background: var(--surface); padding: 20px 18px; }
.why-cell .icon { color: var(--brass); margin-bottom: 10px; }
.why-cell h3 { margin-bottom: 6px; }
.why-cell p { color: var(--slate); font-size: .9rem; margin: 0; }

/* Worker recruitment band - brass, so it reads as a different audience. */
.cta-band {
  background: var(--brass-soft);
  border-top: 2px solid var(--brass);
  border-bottom: 1px solid var(--rule);
  padding: 32px 0;
}
.cta-band h2 { color: var(--brass); }

.group-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; }
.group-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.group-card h3 .icon { color: var(--brand); }
.group-links { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .88rem; }
.group-links a { text-decoration: none; color: var(--ink-2); }
.group-links a:hover { color: var(--brand); text-decoration: underline; }

.area-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--surface);
  text-decoration: none;
  color: var(--ink-2);
  font-size: .87rem;
}
.area-chip:hover { border-color: var(--brand); color: var(--brand); }

/* Icon inside the small category tiles used elsewhere. */
.tile .icon { color: var(--brand); }
.tile:hover .icon, .tile.on .icon { color: var(--brand); }

/* ==========================================================================
   Hero, second pass
   --------------------------------------------------------------------------
   The first version was a flat colour block with all the content crammed left
   and half the band empty. This one is composed:

   LEFT   the promise and the search
   RIGHT  real workers who are free right now, drawn as physical visiting cards

   The card motif is not decoration. A free profile card the worker shares on
   WhatsApp, their shop shutter or their auto IS the supply-side growth loop, so
   showing it is showing the product. And the cards carry live data, which means
   the hero proves the directory is alive instead of claiming it.

   The texture behind them is built from the trade icon set at low opacity - it
   says "every trade" visually, and costs nothing because the glyphs are already
   inline.
   ========================================================================== */

.hero { padding: 0; }

.hero-grid { display: grid; gap: 28px; padding: 38px 0 44px; }
@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 44px;
    align-items: center;
    padding: 52px 0 60px;
  }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-brand);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #FDBA4D;
  margin-bottom: 14px;
}

/* Scattered trade glyphs. Purely atmospheric, so it is hidden from assistive
   tech and sits behind everything. */
.hero-texture {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: #fff;
}
.hero-texture .icon { position: absolute; opacity: .085; }

/* --- the card stack ---------------------------------------------------- */

.card-stack { position: relative; min-height: 392px; display: none; }
@media (min-width: 980px) { .card-stack { display: block; } }

.vcard {
  position: absolute;
  width: 300px;
  background: var(--surface);
  color: var(--ink);
  border-radius: 4px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(4, 16, 44, .32);
  border: 1px solid rgba(0,0,0,.06);
}
.vcard:nth-child(1) { top: 0;     left: 2%;  transform: rotate(-3.2deg); z-index: 1; }
.vcard:nth-child(2) { top: 132px; left: 22%; transform: rotate(2.2deg);  z-index: 2; }
.vcard:nth-child(3) { top: 264px; left: 6%;  transform: rotate(-1.4deg); z-index: 3; }

.vcard-top { display: flex; align-items: center; gap: 10px; }
.vcard-avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  font-family: var(--font-brand); font-weight: 700; font-size: 1.05rem;
}
.vcard-name { font-family: var(--font-brand); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.vcard-trade { font-size: .8rem; color: var(--slate); }
.vcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--rule);
  font-size: .78rem; color: var(--slate);
}
.vcard-rate { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.vcard-live {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--live); font-weight: 600; font-size: .74rem;
}

/* A brass rule along the bottom edge, the way a painted shop sign is bordered. */
.hero-rule { position: relative; z-index: 1; height: 4px; background: linear-gradient(90deg, #D9A65E, #9C6A1E 40%, #D9A65E); }

/* On phones the stack is hidden, so surface the same proof as a single line. */
.hero-live-mobile { margin-top: 18px; }
@media (min-width: 980px) { .hero-live-mobile { display: none; } }

/* ------------------------------------------------------------------ footer */

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 26px 32px;
  padding-bottom: 26px;
}

.footer-head {
  font-family: var(--font-brand);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 6px; line-height: 1.35; }
.footer-list a {
  color: var(--slate);
  text-decoration: none;
  font-size: .87rem;
}
.footer-list a:hover { color: var(--brand); text-decoration: underline; }

.footer-legal { border-top: 1px solid var(--rule-soft); padding-top: 18px; }

/* The standing disclaimer. It was inheriting the footer's muted slate, which made
   the sentence GoKarigar's whole liability position rests on look like boilerplate
   sitting next to the copyright. Brass here matches the pre-contact notice, so the
   colour consistently signals "a statement about what GoKarigar is not". */
.footer-disclaimer {
  max-width: 74ch;
  margin: 0;
  padding-left: 13px;
  border-left: 3px solid var(--brass);
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------- account menu */

/* x-cloak keeps the panel hidden until Alpine boots, otherwise it flashes open
   on a slow connection - which is most of them. */
[x-cloak] { display: none !important; }

.acct { position: relative; }

.acct-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 208px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(4, 16, 44, .18);
  padding: 6px;
  z-index: 60;
}

.acct-menu a,
.acct-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  min-height: var(--tap);
  border: 0;
  background: none;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
}
.acct-menu a:hover,
.acct-menu button:hover { background: var(--surface-2); color: var(--brand); }

.acct-menu form { margin: 0; border-top: 1px solid var(--rule-soft); margin-top: 4px; padding-top: 4px; }
.acct-menu form button { color: var(--danger); }

/* ------------------------------------------------- work photos & the card */

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-item { margin: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.photo-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-item figcaption { padding: 6px 8px; font-size: .78rem; color: var(--slate); }
.photo-item form { padding: 0 8px 8px; }

/* Public gallery on the listing: a horizontal strip, so it never pushes the
   contact button below the fold on a phone. */
.gallery { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gallery img {
  height: 132px; width: auto; flex: none;
  border-radius: var(--radius); border: 1px solid var(--rule); object-fit: cover;
}

/* The printable visiting card. Plain on purpose - it has to survive a cheap
   printer and a photocopier, which is how it will really be reproduced. */
.vcard-print {
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 20px;
  background: #fff;
  color: var(--ink);
}
.vcard-print-name { font-family: var(--font-brand); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.vcard-print-trade { font-size: .95rem; color: var(--ink-2); margin-top: 2px; }
.vcard-print-area { font-size: .85rem; color: var(--slate); margin-top: 2px; }
.vcard-print-phone { font-size: 1.2rem; font-weight: 700; margin-top: 10px; letter-spacing: .02em; }
.vcard-print-brand { font-family: var(--font-brand); font-weight: 800; font-size: .95rem; margin-top: 12px; color: var(--slate); }
.vcard-print-brand span { color: var(--brand); }
.vcard-print-qr { flex: none; text-align: center; }
.vcard-print-qr img { width: 150px; height: 150px; }

@media (max-width: 520px) {
  .vcard-print { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Printing gives you the card and nothing else. */
@media print {
  body * { visibility: hidden; }
  #card, #card * { visibility: visible; }
  #card { position: absolute; left: 0; top: 0; width: 100%; border-width: 1px; }
}

/* ------------------------------------------------------------ service areas */

/* A karigar can cover 100+ pincodes at 20km, so the list scrolls inside its own
   box rather than pushing the rest of the page away. */
.area-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 260px; overflow-y: auto;
  margin-top: 10px; padding: 2px;
}
.area-chip-form {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 4px 4px 4px 10px;
  border: 1px solid var(--rule); border-radius: 100px;
  background: var(--surface); font-size: .82rem;
}
.area-chip-form button {
  border: 0; background: none; cursor: pointer;
  min-width: 28px; min-height: 28px; border-radius: 100px;
  color: var(--slate); font-size: 1rem; line-height: 1;
}
.area-chip-form button:hover { background: var(--danger-soft); color: var(--danger); }
.area-chip-form.is-removed { opacity: .75; border-style: dashed; }
.area-chip-form.is-removed button { font-size: .78rem; color: var(--brand); padding: 0 8px; }
.area-chip-form.is-removed button:hover { background: var(--brand-soft); color: var(--brand); }

/* Distance on a result card. */
.distance { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ separate panels
   Customer, karigar and admin each get their own header, so nobody has to
   work out which side of the marketplace a screen belongs to. */

.acct-sep { height: 1px; background: var(--rule-soft); margin: 4px 0; }
.acct-menu a.acct-switch { color: var(--brand); font-weight: 600; }

.panel-tag {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--brass);
  color: #fff;
}

.masthead-worker { background: var(--brand); border-bottom: 3px solid var(--brass); }
.masthead-worker .brand,
.masthead-admin .brand { color: #fff; }
.masthead-worker .brand span { color: #E2B769; }

.masthead-admin { background: var(--ink); border-bottom: 3px solid var(--danger); }
.masthead-admin .brand span { color: #E2B769; }
.masthead-admin .panel-tag { background: var(--danger); }

.btn-on-dark {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
}
.btn-on-dark:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.masthead-worker .nav a,
.masthead-admin .nav a { color: rgba(255, 255, 255, .88); }
.masthead-worker .nav a:hover,
.masthead-admin .nav a:hover { background: rgba(255, 255, 255, .12); }
.masthead-worker .acct-menu a,
.masthead-admin .acct-menu a { color: var(--ink-2); }
.masthead-worker .acct-menu a.acct-switch { color: var(--brand); }

.panel-tabs { background: var(--surface); border-bottom: 1px solid var(--rule); }
.panel-tabs-inner {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.panel-tabs-inner::-webkit-scrollbar { display: none; }
.panel-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.panel-tabs a:hover { color: var(--brand); }
.panel-tabs a.on { color: var(--brand); border-bottom-color: var(--brass); font-weight: 700; }

.footer-slim { padding: 22px 0; }

.login-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.login-switch a {
  flex: 1 1 0;
  text-align: center;
  padding: 10px 8px;
  min-height: var(--tap);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-2);
  font-size: .9rem;
  background: var(--surface);
}
.login-switch a.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }

/* ------------------------------------------------------------ logo
   The wordmark image replaces the old text brand. Sized by height so the
   header never grows; the file is 84px tall, so it stays sharp up to ~2.3x. */

.brand-logo { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.brand-logo picture { display: block; line-height: 0; }
.brand-img { display: block; height: 30px; width: auto; }
@media (min-width: 720px) {
  .brand-img { height: 36px; }
}

.footer-logo { display: inline-block; margin-bottom: 20px; line-height: 0; }
.footer-logo img { display: block; width: 220px; height: auto; }

/* ==========================================================================
   Logo theme
   --------------------------------------------------------------------------
   Navy for structure, the logo's orange gradient for anything you should act
   on. Softer corners and a little depth so the site feels made, not
   scaffolded - all in CSS, still no image requests beyond the logo itself.
   ========================================================================== */

/* ---- base polish -------------------------------------------------------- */

::selection { background: #FFD8BF; color: var(--ink); }

.btn { border-radius: var(--radius); transition: background-color .15s, box-shadow .15s, transform .15s, filter .15s; }
.btn:active { transform: translateY(1px); }

/* The main call to action: the logo gradient. Bold, because white on orange
   needs the weight to stay readable in sunlight. */
.btn-accent {
  background: var(--grad-accent);
  color: #fff;
  font-weight: 700;
  border: 0;
  text-shadow: 0 1px 1px rgba(120, 40, 0, .28);
  box-shadow: 0 8px 18px -8px rgba(238, 77, 6, .75);
}
.btn-accent:hover { color: #fff; background: var(--grad-accent); filter: brightness(1.06) saturate(1.05); box-shadow: 0 10px 22px -8px rgba(238, 77, 6, .85); }

.btn-ghost:hover { border-color: var(--slate-2); }

.card, .panel { box-shadow: var(--shadow); border-color: var(--rule-soft); }

.input, select.input, textarea.input { border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(244, 88, 10, .14); }
:focus-visible { outline-color: var(--accent); }

.stars { color: #F59E0B; }

/* ---- customer header ---------------------------------------------------- */

/* A thin logo-gradient line along the very top of every customer page. */
.masthead { box-shadow: 0 1px 0 var(--rule), 0 6px 18px -14px rgba(10, 24, 56, .35); border-bottom: 0; }
.masthead:not(.masthead-worker):not(.masthead-admin)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-accent);
}
.nav a.on { color: var(--brass); background: var(--brass-soft); }

/* ---- karigar + admin headers -------------------------------------------- */

.masthead-worker { background: var(--grad-navy); border-bottom: 3px solid var(--accent); }
.panel-tag { background: var(--grad-accent); border-radius: 6px; text-shadow: 0 1px 1px rgba(120, 40, 0, .3); }
.masthead-admin .panel-tag { background: var(--danger); }
.panel-tabs a.on { color: var(--brass); border-bottom-color: var(--accent); }

/* ---- results ------------------------------------------------------------ */

.result {
  border-radius: 14px;
  border-color: var(--rule-soft);
  box-shadow: var(--shadow);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.result:hover { border-color: #F3C9A8; box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.result.is-sponsored { border-color: var(--brass-rule); }
.distance { color: var(--brass); font-weight: 600; }

/* ---- tiles & chips ------------------------------------------------------ */

.tile { border-radius: 12px; border-color: var(--rule-soft); transition: border-color .15s, background .15s; }
.tile:hover, .tile.on { border-color: var(--accent); background: var(--brass-soft); color: var(--brass); }
.tile .icon, .tile:hover .icon, .tile.on .icon { color: var(--brass); }

.area-chip { transition: border-color .15s, color .15s, background .15s; }
.area-chip:hover { border-color: var(--accent); color: var(--brass); background: var(--brass-soft); }

/* ==========================================================================
   Home
   ========================================================================== */

/* Navy with the logo orange glowing in from the right - depth without a
   photograph, and still zero bytes to download. */
.hero {
  background:
    radial-gradient(760px 460px at 88% 18%, rgba(246, 88, 10, .30), transparent 62%),
    radial-gradient(620px 420px at 0% 110%, rgba(252, 159, 10, .16), transparent 62%),
    var(--grad-navy);
  overflow: hidden;
}
.hero::before { background-size: 32px 32px; }

.hero h1 { font-weight: 800; }
.hero h1 em {
  background: linear-gradient(100deg, #FF7A1A, #FDB63A);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero-eyebrow {
  color: #FDBA4D;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 6px 12px 6px 10px;
  border-radius: 100px;
}
.hero-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #34D27B; box-shadow: 0 0 0 3px rgba(52, 210, 123, .22);
}

.hero-proof { gap: 10px; }
.hero-proof span {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 6px 12px;
}
.hero-proof b { color: #FDBA4D; }

.search-card {
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.search-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad-accent);
}

.hero-rule { height: 4px; background: var(--grad-accent); }

/* The visiting cards: an orange edge, like the colour band on a printed card. */
.vcard {
  border-radius: 14px;
  border: 0;
  border-left: 5px solid var(--accent);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55);
  transition: transform .2s;
}
.vcard:hover { transform: rotate(0deg) translateY(-4px) scale(1.02) !important; z-index: 5; }
.vcard-avatar { background: var(--grad-accent); color: #fff; text-shadow: 0 1px 1px rgba(120, 40, 0, .3); }

/* Section headings on the home page get a short logo-gradient underline. */
.after-hero > section h2::after,
.sec-title::after {
  content: ""; display: block;
  width: 40px; height: 4px; margin-top: 8px;
  border-radius: 4px;
  background: var(--grad-accent);
}

/* Emergency tiles: the icon sits in an orange chip. */
.urgent-tile {
  border-radius: 14px;
  border-color: var(--rule-soft);
  box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.urgent-tile .icon {
  box-sizing: content-box;
  padding: 9px;
  border-radius: 12px;
  background: var(--brass-soft);
  color: var(--brass);
}
.urgent-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.urgent-tile:hover .icon { background: var(--grad-accent); color: #fff; }

/* How it works: cards with a gradient number. */
.step {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}
.step::before {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--grad-accent);
  font-size: 1.15rem;
  box-shadow: 0 8px 16px -8px rgba(238, 77, 6, .8);
}

/* Why GoKarigar: separate cards, each icon in its own coloured chip. */
.why { background: none; border: 0; gap: 12px; overflow: visible; }
.why-cell {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.why-cell .icon {
  box-sizing: content-box;
  padding: 10px;
  border-radius: 12px;
  background: var(--brass-soft);
  color: var(--brass);
}
.why-cell:nth-child(2) .icon { background: var(--brand-soft); color: var(--brand); }
.why-cell:nth-child(3) .icon { background: var(--live-soft); color: var(--live); }

.group-card {
  border-color: var(--rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.group-card h3 .icon {
  box-sizing: content-box;
  padding: 7px;
  border-radius: 10px;
  background: var(--brass-soft);
  color: var(--brass);
}
.group-links a:hover { color: var(--brass); }

/* Karigar recruitment: the closing band, navy with the orange glow, so the
   page ends on the same note it starts on. */
.cta-band {
  background:
    radial-gradient(520px 300px at 92% 40%, rgba(246, 88, 10, .38), transparent 70%),
    var(--grad-navy);
  color: rgba(255, 255, 255, .86);
  border: 0;
  padding: 48px 0;
}
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.cta-band strong { color: #FDBA4D; }

/* ---- footer ------------------------------------------------------------- */

.footer { position: relative; border-top: 0; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-accent);
}
.footer-list a:hover { color: var(--brass); }

/* ---- karigar dashboard -------------------------------------------------- */

.presence-bar { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.stat-grid { border-radius: var(--radius-lg); box-shadow: var(--shadow); border-color: var(--rule-soft); background: var(--rule-soft); }

.login-switch a.on { border-color: var(--accent); background: var(--brass-soft); color: var(--brass); }

@media (prefers-reduced-motion: reduce) {
  .btn, .result, .tile, .urgent-tile, .vcard { transition: none; }
  .result:hover, .vcard:hover { transform: none; }
}

/* ---- public profile: cover band with the avatar overlapping it ---------- */

.profile-head { overflow: hidden; border-radius: var(--radius-lg); }
.profile-cover {
  height: 86px;
  background:
    radial-gradient(360px 160px at 88% 10%, rgba(246, 88, 10, .55), transparent 70%),
    var(--grad-navy);
  border-bottom: 3px solid var(--accent);
}
.profile-body { padding: 0 18px 18px; }
.profile-avatar {
  width: 88px; height: 88px;
  font-size: 1.9rem;
  margin-top: -44px;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-lg);
  background: var(--grad-accent);
  color: #fff;
}
.profile-body h1 { margin-top: 10px; }

/* ---- admin two-factor setup --------------------------------------------- */

.twofa-qr { width: 220px; max-width: 100%; padding: 10px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); }
.twofa-qr svg { display: block; width: 100%; height: auto; }
.twofa-secret { font-size: 1.05rem; font-weight: 700; letter-spacing: .08em; word-break: break-all; margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); }
.twofa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin: 0; padding-left: 22px; font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; }

/* ---- admin certificate review ------------------------------------------- */

.cert-row { display: flex; gap: 16px; align-items: flex-start; }
.cert-doc { flex: none; width: 150px; }
.cert-doc img { width: 150px; height: 110px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface-2); }
.cert-pdf, .cert-missing {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 150px; height: 110px;
  border-radius: var(--radius); border: 1px dashed var(--rule);
  background: var(--surface-2); text-align: center; text-decoration: none; font-size: .82rem;
}
.cert-missing { color: var(--slate); }
.cert-reject summary { list-style: none; }
.cert-reject summary::-webkit-details-marker { display: none; }
@media (max-width: 560px) { .cert-row { flex-direction: column; } }

/* ---- karigar: certificate list on the showcase page --------------------- */

.cert-list { list-style: none; margin: 0; padding: 0; }
.cert-list li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.cert-list li:last-child { border-bottom: 0; }

/* ---- page numbers ------------------------------------------------------ */
.pagination a, .pagination span { border-radius: var(--radius); color: var(--ink-2); font-weight: 600; transition: border-color .15s, background .15s, color .15s; }
.pagination a:hover { border-color: var(--accent); color: var(--brass); background: var(--brass-soft); }
.pagination .active span { background: var(--grad-accent); border-color: transparent; color: #fff; }
.pagination li { margin: 0; }

/* ==========================================================================
   Admin shell: grouped sidebar, top bar with search, queue and account.
   On a phone the sidebar slides in over the page.
   ========================================================================== */

.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; }

.adm { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.adm-side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0C2E66 0%, #071C43 100%);
  border-right: 3px solid var(--accent);
  color: #C9D3E6;
  padding: 16px 12px;
}
.adm-brand { display: flex; align-items: center; gap: 8px; padding: 2px 6px 16px; }
.adm-brand .brand-img { height: 28px; }
.masthead-admin .panel-tag, .adm-brand .panel-tag { background: var(--danger); }

.adm-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.adm-group {
  font-family: var(--font-brand); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #7F8EAE;
  padding: 14px 10px 4px;
}
.adm-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 0 10px; border-radius: 9px;
  color: #D6DEEE; text-decoration: none; font-size: .93rem; font-weight: 500;
}
.adm-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.adm-item.on { background: rgba(255,255,255,.1); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.adm-item:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.adm-count {
  min-width: 22px; text-align: center; font-size: .72rem; font-weight: 700;
  padding: 2px 7px; border-radius: 100px; background: var(--grad-accent); color: #fff;
}
.adm-me { border-top: 1px solid rgba(255,255,255,.1); margin-top: 14px; padding: 12px 10px 2px; color: #fff; }
.adm-me .tiny { color: #9FB0CF; }

.adm-main { display: flex; flex-direction: column; min-width: 0; }
.adm-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; background: var(--surface);
  box-shadow: 0 1px 0 var(--rule), 0 6px 18px -14px rgba(10,24,56,.35);
}
.adm-search { flex: 1; max-width: 560px; }
.adm-search input {
  width: 100%; min-height: 40px; padding: 8px 12px 8px 36px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  font: inherit; font-size: .93rem; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6377' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}
.adm-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(244,88,10,.14); background-color: var(--surface); }
.adm-queue {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--brass-rule); border-radius: var(--radius); background: var(--brass-soft);
  color: var(--brass); font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap;
}
.adm-avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--grad-accent); color: #fff; font-family: var(--font-brand); font-weight: 700; font-size: 1rem;
}
.adm-menu-who { padding: 8px 12px 10px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 4px; }
.adm-burger { display: none; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.adm-burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

.adm-content { flex: 1; padding: 24px 24px 40px; width: 100%; max-width: 1180px; }
.adm-content > .flash { margin-bottom: 16px; }
.adm-content .wrap { max-width: none; padding: 0; margin: 0; }
.adm-content .section { padding-top: 0; }
.adm-foot { padding: 16px 24px 24px; border-top: 1px solid var(--rule-soft); }
.admin-narrow { max-width: 620px; }

.adm-scrim { display: none; }

@media (max-width: 960px) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-side {
    position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: 272px; height: auto;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .adm-side.is-open { transform: none; }
  .adm-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(7,28,67,.45); }
  .adm-burger { display: inline-flex; }
  .adm-top { padding: 10px 14px; }
  .adm-content { padding: 18px 16px 32px; }
  .adm-queue { padding: 0 9px; }
}
@media (max-width: 520px) {
  .adm-queue { display: none; }
}
@media (prefers-reduced-motion: reduce) { .adm-side { transition: none; } }

/* Tables and forms used across the new admin pages */
.adm-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.adm-table th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.adm-table td { padding: 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-card { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.adm-card-pad { padding: 18px 20px; }
.adm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.adm-head h1 { font-size: 1.7rem; }
.adm-head p { margin: 4px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.chip-ok { background: var(--live-soft); color: var(--live); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-bad { background: var(--danger-soft); color: var(--danger); }
.chip-quiet { background: var(--surface-2); color: var(--slate); }
.chip-brand { background: var(--brand-soft); color: var(--brand); }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.perm-group h3 { font-size: .95rem; margin-bottom: 6px; }
.perm-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-weight: 500; font-size: .92rem; }
.perm-row input { margin-top: 4px; accent-color: var(--accent); }
.perm-row .soon { font-size: .7rem; font-weight: 700; color: var(--slate); background: var(--surface-2); border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.diff { font-size: .84rem; color: var(--ink-2); }
.diff del { color: var(--danger); text-decoration: line-through; }
.diff ins { color: var(--live); text-decoration: none; font-weight: 600; }

/* ---- SEO: breadcrumbs and the Google preview -------------------------- */
.crumbs { color: var(--slate); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--brass); text-decoration: underline; }
.serp-preview { margin-top: 10px; max-width: 620px; font-family: Arial, sans-serif; }
.serp-url { font-size: .8rem; color: #1E7D3A; }
.serp-title { font-size: 1.15rem; color: #1A0DAB; margin: 2px 0; line-height: 1.3; }
.serp-desc { font-size: .88rem; color: #4D5156; line-height: 1.45; }

/* ---- admin record pages -------------------------------------------------- */
.rec-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.rec-head h1 { font-size: 1.7rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rec-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--rule); margin-bottom: 18px; scrollbar-width: none; }
.rec-tabs::-webkit-scrollbar { display: none; }
.rec-tabs a { flex: none; padding: 10px 14px; text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: .92rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.rec-tabs a:hover { color: var(--brass); }
.rec-tabs a.on { color: var(--brass); border-bottom-color: var(--accent); font-weight: 700; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: .92rem; margin: 0; }
.kv dt { color: var(--slate); }
.kv dd { margin: 0; }
.action-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; min-width: 80px; }
.bar > span { display: block; height: 100%; background: var(--grad-accent); }

/* ---- admin dashboard queue -------------------------------------------------- */
.queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.queue-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.queue-tile:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
.queue-n { font-family: var(--font-brand); font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--brand); }
.queue-l { font-size: .84rem; color: var(--slate); line-height: 1.3; }
.queue-tile.is-waiting { border-left: 4px solid var(--accent); }
.queue-tile.is-waiting .queue-n { color: var(--brass); }
.queue-tile.is-urgent { border-left: 4px solid var(--danger); background: var(--danger-soft); }
.queue-tile.is-urgent .queue-n { color: var(--danger); }
.queue-tile.is-clear .queue-n { color: var(--live); }
@media (prefers-reduced-motion: reduce) { .queue-tile { transition: none; } .queue-tile:hover { transform: none; } }

/* ---- Phase 4: announcements, page text, landing intros, content admin ------- */
.announce { background: var(--brand-soft); color: var(--brand); border-bottom: 1px solid #CFDAEC; font-size: .92rem; }
.announce-warn { background: var(--warn-soft); color: var(--warn); border-bottom-color: #EBD9A8; }
.announce-inner { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
.announce a { color: inherit; font-weight: 700; }

.landing-intro { max-width: 70ch; color: var(--ink-2); }
.landing-intro p { margin: 0; }
.stack-sm > * + * { margin-top: 8px; }

.prose { line-height: 1.65; color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin: 1.4em 0 .5em; }
.prose h3 { margin: 1.2em 0 .4em; }
.prose p, .prose ul, .prose ol { margin: 0 0 .9em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .3em; }

.input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.55; }
.icon-preview { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius); background: var(--surface-2); color: var(--brand); flex: none; }
.suggest-row { padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.email-preview { margin-top: 10px; border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); }
.email-preview-body { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.health-bad { border-left: 4px solid var(--danger); }
.health-warn { border-left: 4px solid var(--warn); }

/* ---- Phase 5: insights funnel, daily bars, receipts ------------------------- */
.funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.funnel-step { position: relative; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border-left: 4px solid var(--accent); }
.funnel-n { font-size: 1.6rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
.funnel-l { font-weight: 600; font-size: .9rem; margin: 2px 0; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding-top: 6px; border-bottom: 1px solid var(--rule); }
.bar-day { flex: 1; min-width: 2px; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.bar-day span { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.bar-a, .key-a { background: var(--brand); }
.bar-b, .key-b { background: var(--accent); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.receipt-page { background: var(--surface-2); }
.receipt { max-width: 720px; margin: 24px auto; background: var(--surface); padding: 28px 32px; border-radius: var(--radius-lg); border: 1px solid var(--rule); }
.receipt-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.receipt-table th, .receipt-table td { padding: 10px 6px; border-bottom: 1px solid var(--rule-soft); text-align: left; }
.receipt-table th { font-size: .8rem; color: var(--slate); text-transform: uppercase; letter-spacing: .05em; }
.receipt-total td { font-weight: 800; border-bottom: 2px solid var(--ink-2); }
@media print {
  .receipt-page { background: #fff; }
  .receipt { border: 0; margin: 0; max-width: none; padding: 0; }
  .no-print { display: none; }
}