/* ==========================================================================
 * product.css — shared chrome for the three product pages.
 *
 * saaph.html / swachh.html / suraksha.html are SIBLINGS, not variants of the
 * dashboard. Each is a full page with one job, reached by clicking its card on
 * dashboard-v2. Keeping their shell in one stylesheet is what stops the three
 * drifting apart the way the nav and footer did — one file to change, three
 * pages that stay identical.
 *
 * Built on the house tokens in main.css. No new colours are invented here;
 * each product only picks a different accent from what already exists.
 * ========================================================================== */

:root {
  --p-hair: var(--border-subtle);
  --p-pad: clamp(16px, 4vw, 28px);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.phead {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--p-pad);
  background: var(--bg-base);
  border-bottom: 1px solid var(--p-hair);
}
.pback {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;      /* tap-target floor */
  border-radius: 10px; text-decoration: none;
  color: var(--text-secondary); font-size: 20px; line-height: 1;
  border: 1px solid var(--border-default); background: var(--bg-surface);
}
.pback:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pmark {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  letter-spacing: -.02em;
}
.pmark img { display: block; border-radius: 7px; }
.psp { flex: 1; }
.phead .langsel {
  min-height: 44px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-primary); font-weight: 600; font-size: 13.5px;
  /* Same cap as the dashboard: a <select> sizes to its widest option, and the
     Indic option labels blew this across the header on iOS before the font
     stack covered them. The cap outlives the font fix. */
  max-width: 96px; width: auto; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .phead { gap: 8px; padding: 10px 12px; }
  .pmark span { display: none; }          /* mark only — the back arrow needs the room */
}

/* ── Shell ──────────────────────────────────────────────────────────────── */
.pshell { max-width: 1000px; margin: 0 auto; padding: 0 var(--p-pad) 80px; }

/* ── Product hero ───────────────────────────────────────────────────────── */
/* A CARD, not a full-bleed band.
   It was border-bottom only, with border-radius on the bottom two corners and
   zero horizontal padding — so the Devanagari watermark, which is positioned
   to bleed past the edge on purpose, had no edge to bleed against and simply
   looked chopped off. Owner: "the card itself is cut off."
   The dashboard tile this page is opened from is a contained card
   (border-radius:16px, 1px border, surface fill, 18px padding) and the bleed
   reads as intended there. Matching that shape here fixes the clipping AND
   makes the two the same object, which is what lets the view transition below
   morph one into the other instead of cross-fading two unrelated things. */
.phero {
  position: relative; overflow: hidden;
  padding: clamp(24px, 5vw, 40px) clamp(20px, 4vw, 32px) clamp(20px, 3.5vw, 28px);
  border: 1px solid var(--p-hair);
  border-radius: 18px;
  background: var(--bg-surface);
  margin-bottom: clamp(22px, 4vw, 34px);
}
/* The Devanagari watermark is identity, not decoration: it is how a user knows
   at a glance which of the three rooms they are standing in. */
.pdev {
  /* Anchored INSIDE the bottom-right corner, matching the dashboard pillars'
     .dev marks. The old placement (right:-10px, vertically centred, up to
     170px) left the glyph straddling the hero's edges — cropped mid-letter on
     the right and visually spilling past the wash's fade, which the owner
     read as "not well placed". A watermark sits in the corner of the room;
     it does not lean out of the window. */
  position: absolute; right: clamp(12px, 3vw, 28px); bottom: clamp(4px, 1.5vw, 12px);
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(64px, 12vw, 118px); line-height: 1;
  opacity: .07; pointer-events: none; user-select: none;
}
.peyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.pdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-dim);
}
.ph1 {
  margin: 0 0 10px; font-family: var(--font-heading); font-weight: 700;
  letter-spacing: -.03em; font-size: clamp(28px, 6vw, 44px); line-height: 1.05;
}
.plead {
  margin: 0; color: var(--text-secondary); max-width: 62ch;
  font-size: clamp(15px, 2vw, 17px); line-height: 1.6;
}

/* ── Stats ──────────────────────────────────────────────────────────────── */
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
@media (max-width: 560px) { .stat3 { grid-template-columns: 1fr 1fr; } }
.stat {
  border: 1px solid var(--p-hair); border-radius: 14px;
  background: var(--bg-surface); padding: 14px 16px;
}
.stat b {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(24px, 5vw, 34px); letter-spacing: -.02em;
}
.mono {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ── Section heads ──────────────────────────────────────────────────────── */
.secthead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; }
.secthead h2 {
  margin: 0; font-family: var(--font-heading); letter-spacing: -.02em;
  font-size: clamp(19px, 3.4vw, 25px);
}
.sectsub { margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; }

/* ── Filters ────────────────────────────────────────────────────────────── */
.rfilters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rfilter {
  min-height: 44px; padding: 0 15px; border-radius: 999px; cursor: pointer;   /* tap-target floor */
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-secondary); font: inherit; font-size: 13.5px; font-weight: 600;
}
.rfilter:hover { border-color: var(--border-strong); color: var(--text-primary); }
.rfilter.is-on {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

/* ── Result rows ────────────────────────────────────────────────────────── */
.rlist { display: grid; gap: 8px; }
.rrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 15px; border: 1px solid var(--p-hair); border-radius: 12px;
  background: var(--bg-surface);
}
/* A found row is the one that needs action — it earns the accent edge. */
.rrow.is-found { border-left: 3px solid var(--color-danger); }
.rrow .nm { font-family: var(--font-heading); font-weight: 700; font-size: 15px; min-width: 9ch; }
.badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  padding: 4px 9px; border-radius: 7px;
}
.badge.f { background: var(--color-danger-dim); color: var(--color-danger); }
.badge.s { background: var(--color-success-dim);   color: var(--color-success); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip {
  font-size: 11.5px; padding: 4px 9px; border-radius: 6px;
  background: var(--bg-base); border: 1px solid var(--border-default);
  color: var(--text-secondary);
}
.rnone { color: var(--text-muted); font-size: 14px; padding: 18px 2px; }

/* ── Actions ────────────────────────────────────────────────────────────── */
.pactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-weight: 800;
  font-size: 15px; text-decoration: none; border: none;
}
.cta:hover { filter: brightness(1.06); }
.btn-g {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--border-default); background: none;
  color: var(--text-secondary); font-weight: 600; font-size: 14.5px;
  text-decoration: none;
}
.btn-g:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty {
  border: 1.5px dashed var(--border-strong); border-radius: 16px;
  padding: 40px var(--p-pad); text-align: center;
  display: grid; gap: 10px; justify-items: center;
}
.empty h3 { margin: 0; font-family: var(--font-heading); font-size: 21px; }
.empty p { margin: 0; color: var(--text-secondary); max-width: 46ch; line-height: 1.6; }

/* ── Sibling product links ──────────────────────────────────────────────── */
.psib {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: clamp(38px, 7vw, 60px);
  padding-top: clamp(22px, 4vw, 30px); border-top: 1px solid var(--p-hair);
}
@media (max-width: 600px) { .psib { grid-template-columns: 1fr; } }
.psibcard {
  position: relative; overflow: hidden;
  display: grid; gap: 3px; padding: 16px 18px;
  border: 1px solid var(--p-hair); border-radius: 16px;
  background: var(--bg-surface); text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.psibcard:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.psibcard b { font-family: var(--font-heading); font-size: 16.5px; }
.psibcard small { color: var(--text-secondary); font-size: 13px; }
.psibdev {
  position: absolute; right: -4px; bottom: -20px;
  font-family: var(--font-heading); font-weight: 800; font-size: 64px;
  line-height: 1; opacity: .055; pointer-events: none;
}

/* ── Status dot variants ────────────────────────────────────────────────
   Each product wears its readiness on its face. A "PREVIEW" badge that looks
   identical to "LIVE" is how a user ends up trusting a screen that cannot yet
   act for them. */
.pdot--soon    { background: var(--text-muted);     box-shadow: 0 0 0 3px var(--bg-raised); }
.pdot--preview { background: var(--color-warning);  box-shadow: 0 0 0 3px var(--color-warning-dim); }

/* ── Numbered steps (Swachh) ────────────────────────────────────────────── */
.steps {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }
.step {
  border: 1px solid var(--p-hair); border-radius: 16px;
  background: var(--bg-surface); padding: 18px;
}
.step h3 { margin: 8px 0 6px; font-family: var(--font-heading); font-size: 17px; }
.step p  { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }

/* ── Evidence explorer (Swachh) ─────────────────────────────────────────── */
.evbox { margin-bottom: 30px; }
.evtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.evout { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .evout { grid-template-columns: 1fr; } }
.evcard {
  border: 1px solid var(--p-hair); border-radius: 16px;
  background: var(--bg-surface); padding: 16px 18px;
}
.evcard--ok { border-left: 3px solid var(--color-success); }
.evcard--no { border-left: 3px solid var(--color-danger); }
.evcard h4 { margin: 8px 0 6px; font-family: var(--font-heading); font-size: 16px; }
.evcard p  { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.evreason  { color: var(--color-danger) !important; margin-top: 8px !important; }
.doclist { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.doclist li { font-size: 14px; color: var(--text-primary); }
.doclist em {
  font-family: var(--font-mono); font-style: normal; font-size: 11px;
  color: var(--color-warning); letter-spacing: .04em;
}

/* ── The load-bearing rule, stated plainly on each page ─────────────────── */
.prule {
  margin: 26px 0 0; padding: 16px 18px;
  border: 1px dashed var(--border-strong); border-radius: 14px;
  color: var(--text-secondary); font-size: 14px; line-height: 1.65; max-width: 76ch;
}

/* ── Consent cards (Suraksha) ───────────────────────────────────────────── */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.ccard {
  border: 1px solid var(--p-hair); border-radius: 18px;
  background: var(--bg-surface); padding: 18px; align-content: start;
}
.ccard > header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ccard h4 { margin: 0; flex: 1; font-family: var(--font-heading); font-size: 17px; }
.risk {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 7px;
  background: var(--bg-raised); color: var(--text-secondary);
}
.risk--high, .risk--severe { background: var(--color-danger-dim);  color: var(--color-danger); }
.risk--medium             { background: var(--color-warning-dim); color: var(--color-warning); }
.risk--low                { background: var(--color-success-dim);    color: var(--color-success); }
.ctldr { margin: 0 0 12px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; }

.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.prow {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--p-hair);
}
.prow.is-off .ptext b { text-decoration: line-through; color: var(--text-muted); }
.prow.is-locked { opacity: .72; }
.ptext { flex: 1; min-width: 0; }
.ptext b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.ptext p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.pquote {
  margin: 8px 0 0; padding: 8px 10px; border-left: 2px solid var(--border-strong);
  background: var(--bg-base); border-radius: 0 8px 8px 0;
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}
.pquote .mono { display: block; margin-bottom: 3px; }
.pctl { display: grid; gap: 5px; justify-items: center; flex-shrink: 0; }
.pstate { font-size: 9.5px; }

/* The switch is the whole product in one control — it gets a real 44px target. */
.sw {
  width: 52px; height: 30px; padding: 3px; border-radius: 999px; border: none;
  background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--border-default);
  display: flex; justify-content: flex-end; cursor: pointer;
  transition: background .18s ease;
}
.sw:not(.is-on) { justify-content: flex-start; background: var(--color-danger-dim); }
.sw.is-on { background: var(--color-success); }
.swdot {
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.lockpill {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  text-align: center; max-width: 9ch; line-height: 1.3;
  padding: 6px 8px; border-radius: 8px;
  background: var(--bg-raised); color: var(--text-muted);
}
.csrc {
  display: inline-block; margin-top: 12px; text-decoration: none;
  color: var(--text-muted); font-size: 10.5px;
}
.csrc:hover { color: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
  .psibcard, .cta, .sw { transition: none; }
  .psibcard:hover { transform: none; }
}
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }

/* ── Per-product hero tint ──────────────────────────────────────────────
   The three heroes carry .phero--saaph / --swachh / --suraksha but nothing
   defined them, so all three rendered identically and the watermark was the
   only thing telling the rooms apart. Each product now gets a faint wash in
   its own accent — the same accent its status dot already uses. */
.phero--saaph    { background: linear-gradient(180deg, var(--color-success-dim) 0%, transparent 72%); }
.phero--swachh   { background: linear-gradient(180deg, var(--bg-raised)         0%, transparent 72%); }
.phero--suraksha { background: linear-gradient(180deg, var(--color-warning-dim) 0%, transparent 72%); }
/* The tint sits ON the card now, so it needs the card's own radius — the old
   `border-radius: 0 0 18px 18px` was shaping a band and squared off the top
   two corners of what is now a card. */
.phero[class*="phero--"] { border-radius: 18px; }

/* ── Shared-element transition: the dashboard tile IS this hero ────────────
   dashboard.html gives .pillar.is-live the same view-transition-name, so a
   click morphs that card into this one across the navigation rather than
   blanking the screen and redrawing. Owner: "when someone clicks on it, it
   should flip around, do some animation and go into that page."
   The name must be unique per document at any moment — only this one element
   carries it here, and only the live tile carries it there. */
.phero--saaph { view-transition-name: saaph-card; }