/* ============================================================================
   TOTSNAME — NAME DETAIL PAGE
   ----------------------------------------------------------------------------
   Loaded ONLY on /name/:slug/ (pageController sends pageCss:'name-detail').

   Scoped under .ndp so nothing here can reach another page and style.css needs
   no edit. The legacy .nd-* rules in style.css are left in place untouched —
   views/celebrity-detail.ejs still uses them.

   ON !important
   style.css ends with a global sweep:
       h1,h2,h3,... { background:none !important;
                      -webkit-text-fill-color:#D6005E !important }
   which would repaint every heading on this page brand-pink. The approved
   design puts headings in navy #102A6B, so the heading rules below restate the
   colour at equal weight (.ndp h2 outranks a bare h2). !important appears only
   where a global rule has to be defeated — nowhere else.

   NO images. No PNG, JPG, background-image or external SVG file. Every icon is
   inline SVG emitted by views/name.ejs. Decoration is CSS only.
   ========================================================================== */

.ndp{
  /* ---- Core palette (spec §4) ---- */
  --c-navy:#102A6B;
  --c-navy-dk:#0B225C;
  --c-blue:#1677D2;
  --c-pink:#E7207B;
  --c-pink-hover:#D9186D;
  --c-pink-light:#FCEAF3;
  --c-pink-soft:#FFF4F9;
  --c-blue-light:#EEF7FF;
  --c-blue-soft:#F3F9FE;
  --c-green:#24A66A;
  --c-green-light:#F0FBF5;
  --c-lavender:#F3F0FF;
  --c-lavender-soft:#F8F6FF;
  --c-peach:#FFF3E5;
  --c-peach-light:#FFFAF0;
  --c-yellow:#F5B83D;
  --c-text:#102A6B;
  --c-text-2:#334B78;
  --c-text-3:#64748B;
  --c-crumb:#52678F;
  --c-border:#E4EAF3;
  --c-white:#FFFFFF;
  --c-page:#FFFFFF;

  /* ---- Component surfaces ---- */
  --s-meaning-bg:#FFFAF0;      --s-meaning-bd:#F5E7D0;
  --s-meaning-ico-bg:#FFF0D6;  --s-meaning-ico:#A86B00;
  --s-tile-bg:#F5F9FE;
  --s-signif-bg:#FFF5FA;       --s-signif-bd:#F5DDE9;
  --s-signif-ico-bg:#FCEAF3;   --s-signif-ico:#B91F4D;
  --s-nak-bg:#F3FBF6;          --s-nak-bd:#DCEFE4;
  --s-nak-ico-bg:#E3F6EC;      --s-nak-ico:#24A66A;
  --s-opt-bg:#E9F6FF;          --s-opt-fg:#1677D2;
  --s-faq-bg:#FFF7FA;          --s-faq-bd:#F3DDE8;
  --s-faq-row:#FFFFFF;         --s-faq-row-bd:#E5EAF2;
  --s-know-bg:#F2FBF6;         --s-know-bd:#DCEFE4;
  --s-arrow:#7A91B8;
  --s-divider:#E8EDF4;
  --s-band-bg:#F3F1FE;         --s-band-bd:#5965D8;

  /* ---- Tag palette, by SLOT not by value, so Peter and Mukund
         get identical colour positions (spec §11 / §32) ---- */
  --t-gender-bg:#EAF6FF;   --t-gender-fg:#1677D2;
  --t-girl-bg:#FFF0F6;     --t-girl-fg:#B91F6B;
  --t-origin-bg:#FFF4E8;   --t-origin-fg:#A84B22;
  --t-relig-bg:#FFF0F3;    --t-relig-fg:#B91F4D;
  --t-style-bg:#E9F8EE;    --t-style-fg:#198754;

  /* ---- Similar-name pill washes (spec §21) ---- */
  --p0:#EFF6FF; --p1:#FFF5E8; --p2:#FFF0F4; --p3:#EFFAF4; --p4:#FFF7E8;

  --r-card:16px;
  --r-sm:10px;
  --r-md:12px;
  --shadow:0 2px 10px rgba(16,42,107,0.04);

  background:var(--c-page);
  color:var(--c-text-2);
  font-family:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:20px 0 0;
}
.ndp *{ box-sizing:border-box; }
.ndp img{ display:none; } /* belt and braces: this page ships no images */

/* ---- Container (spec §8, §30) ------------------------------------------ */
.ndp-wrap{ max-width:960px; margin:0 auto; padding:0 32px; }

/* ---- Breadcrumbs (spec §9) --------------------------------------------- */
.ndp-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  min-height:24px; font-size:12px; font-weight:500; color:var(--c-crumb); margin:0 0 12px;
}
.ndp-crumb a{ color:var(--c-crumb); text-decoration:none; }
.ndp-crumb a:hover{ color:var(--c-pink); text-decoration:underline; }
.ndp-crumb svg{ width:12px; height:12px; flex:0 0 auto; color:#9BAAC6; }
.ndp-crumb strong{ color:var(--c-text-2); font-weight:600; }

/* ---- Layout (spec §27) ------------------------------------------------- */
.ndp-grid{ display:grid; grid-template-columns:62% 1fr; gap:20px; align-items:start; }
.ndp-main, .ndp-side{ min-width:0; display:flex; flex-direction:column; gap:16px; }

/* ---- Name hero (spec §10) ---------------------------------------------- */
.ndp-hero{ margin-bottom:2px; }
.ndp-hero-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ndp h1.ndp-name{
  font-family:inherit; font-size:56px; line-height:1.05; font-weight:700;
  letter-spacing:-1px; margin:0 0 10px;
  color:var(--c-navy) !important; -webkit-text-fill-color:var(--c-navy) !important;
  background:none !important;
}
.ndp-deva{ font-size:20px; font-weight:500; color:var(--c-text-2); margin:0 0 10px; }
/* The old 40x40 heart button that used to sit beside the H1 was removed in
   Phase 3 Step 6, when Save moved into the metadata/action row. Its rule block
   lived here and was left behind: because the button still carries the
   `ndp-fav` class (the save script selects on it), `width:40px` kept applying,
   and since `.ndp-act` never declares a width there was nothing to override it.
   The capsule stayed 40px wide while its contents — icon, gap, the word "Save"
   and 26px of padding, about 85px in total — spilled outside the border.

   `.ndp-act` now supplies the whole appearance, and the saved and hover states
   are covered by `.ndp-act:hover` and `.ndp-act.ndp-fav.is-on` further down. */

/* ---- Tags (spec §11) --------------------------------------------------- */
.ndp-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ndp-tag{
  display:inline-flex; align-items:center; height:30px; padding:0 15px;
  border-radius:15px; font-size:13px; font-weight:600; text-decoration:none;
  background:var(--t-gender-bg); color:var(--t-gender-fg);
}
.ndp-tag:hover{ filter:brightness(.97); }
.ndp-tag.is-girl { background:var(--t-girl-bg);   color:var(--t-girl-fg); }
.ndp-tag.t-origin{ background:var(--t-origin-bg); color:var(--t-origin-fg); }
.ndp-tag.t-relig { background:var(--t-relig-bg);  color:var(--t-relig-fg); }
.ndp-tag.t-style { background:var(--t-style-bg);  color:var(--t-style-fg); }

/* ---- Action row: Pronounce / Save / Share (spec §6, §9) ------------------
   These live in the SAME flex row as the metadata chips, so they inherit its
   wrapping: a break can only fall between controls, never inside a label.
   Sized and shaped like a chip (30px, 15px radius, 13px/600) but rendered as
   secondary — outlined rather than filled — so the chips stay the louder
   element and these read as actions.                                        */
.ndp-act{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:30px; padding:0 13px; border-radius:15px;
  border:1px solid var(--c-border); background:var(--c-white);
  color:var(--c-text-2); font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap;      /* labels never break mid-word */
  transition:color .18s, border-color .18s, background .18s;
}
.ndp-act svg{ width:15px; height:15px; flex:0 0 auto; }
.ndp-act:hover{ color:var(--c-navy); border-color:#C9D6EA; }
/* A small separator so the actions read as a distinct group from the chips.
   margin-left on the first one only; it collapses harmlessly when the row wraps. */
.ndp-act.ndp-say{ margin-left:4px; }

/* Saved state — colour is not the only signal: the label also changes to
   "Saved" and aria-pressed flips. */
.ndp-act.ndp-fav.is-on{
  color:var(--c-pink); border-color:#F3C4DB; background:var(--c-pink-light);
}
.ndp-act.ndp-fav.is-on svg{ fill:currentColor; }

/* Speaking state. The global .is-speaking rules in style.css set a yellow fill
   and a grey text colour with !important, which would fight this component, so
   the scoped selector restates both at equal weight. */
.ndp .ndp-act.ndp-say.is-speaking{
  color:var(--c-blue) !important; -webkit-text-fill-color:var(--c-blue) !important;
  background:var(--c-blue-light) !important; border-color:#BBD9F7 !important;
}

/* Toast used by the Share fallback. Matches the site's existing #tn-toast id so
   only one toast element can ever exist. */
#tn-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  z-index:9999; max-width:88vw; padding:11px 20px; border-radius:100px;
  background:#102A6B; color:#fff; font:600 14px/1.3 "Poppins","Inter",system-ui,sans-serif;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
#tn-toast.is-show{ opacity:1; transform:translate(-50%,0); }

@media (max-width:599px){
  /* Slightly tighter so four chips + three actions still wrap cleanly on a
     360px screen without any control shrinking below a tappable size. */
  .ndp-act{ padding:0 11px; gap:5px; }
  .ndp-act.ndp-say{ margin-left:0; }
}

/* ---- Card system (spec §28) -------------------------------------------- */
.ndp-card{
  background:var(--c-white); border:1px solid var(--c-border);
  border-radius:var(--r-card); padding:20px; box-shadow:var(--shadow);
}
.ndp-card-h{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.ndp-ico{
  width:46px; height:46px; flex:0 0 auto; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-blue-light); color:var(--c-blue);
}
.ndp-ico svg{ width:24px; height:24px; }
.ndp-ico.ic-book  { background:var(--s-meaning-ico-bg); color:var(--s-meaning-ico); }
.ndp-ico.ic-detail{ background:var(--c-lavender);   color:#6B4BD6; }
.ndp-ico.ic-signif{ background:var(--s-signif-ico-bg); color:var(--s-signif-ico); }
.ndp-ico.ic-nak   { background:var(--s-nak-ico-bg);  color:var(--s-nak-ico); }
.ndp-ico.ic-green { background:var(--c-green-light); color:var(--c-green); }
.ndp-ico.ic-peach { background:var(--c-peach);       color:#A84B22; }
.ndp-ico.ic-yellow{ background:#FFF3D6;              color:#A86B00; }
.ndp-ico.ic-pink  { background:var(--c-pink-light);  color:var(--c-pink); }
.ndp-ico.ic-solid { background:var(--c-pink);        color:#fff; width:42px; height:42px; }
.ndp-ico.ic-solid svg{ width:22px; height:22px; }

.ndp .ndp-card-h h2, .ndp .ndp-card-h h3{
  font-family:inherit; font-size:20px; font-weight:700; margin:0; line-height:1.25;
  color:var(--c-navy) !important; -webkit-text-fill-color:var(--c-navy) !important;
  background:none !important;
}
.ndp .ndp-card-h h2.is-lg{ font-size:21px; }
.ndp-card-h .ndp-more{
  margin-left:auto; font-size:13px; font-weight:600; color:var(--c-pink);
  text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
}
.ndp-card-h .ndp-more:hover{ text-decoration:underline; }
.ndp-card-h .ndp-more svg{ width:14px; height:14px; }
.ndp-badge-opt{
  margin-left:auto; display:inline-flex; align-items:center; height:28px; padding:0 14px;
  border-radius:14px; font-size:12px; font-weight:600;
  background:var(--s-opt-bg); color:var(--s-opt-fg); white-space:nowrap;
}
.ndp-p{ font-size:15px; line-height:1.55; color:var(--c-text-2); margin:0; max-width:560px; }
.ndp-p + .ndp-p{ margin-top:10px; }

/* ---- Meaning card (spec §12) ------------------------------------------- */
.ndp-meaning{ background:var(--s-meaning-bg); border-color:var(--s-meaning-bd); padding:22px; }
.ndp .ndp-meaning .ndp-card-h h2{ font-size:22px; }
.ndp-meaning-primary{
  font-size:28px; font-weight:700; line-height:1.2; letter-spacing:-.4px;
  color:var(--c-navy); margin:2px 0 0;
}
.ndp-meaning-sub{ font-size:16px; font-weight:500; color:#233E72; margin:6px 0 0; }
.ndp-meaning .ndp-p{ margin-top:14px; color:#233E72; font-size:15px; }

/* ---- Name details (spec §13) ------------------------------------------- */
.ndp-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ndp-tile{
  display:flex; align-items:center; gap:10px; min-height:72px; padding:12px;
  background:var(--s-tile-bg); border-radius:var(--r-md); min-width:0;
}
.ndp-tile .ndp-ico{ width:34px; height:34px; border-radius:var(--r-sm); background:var(--c-white); }
.ndp-tile .ndp-ico svg{ width:18px; height:18px; }
.ndp-tile-k{ font-size:12px; font-weight:500; color:var(--c-crumb); line-height:1.3; }
.ndp-tile-v{ font-size:16px; font-weight:600; color:var(--c-navy); line-height:1.3; margin-top:2px; word-break:break-word; }

/* ---- Significance (spec §15) ------------------------------------------- */
.ndp-signif{ background:var(--s-signif-bg); border-color:var(--s-signif-bd); padding:20px; }

/* ---- Traditional naming (spec §16–18) ---------------------------------- */
.ndp-nak{ background:var(--s-nak-bg); border-color:var(--s-nak-bd); padding:20px; }
.ndp-nak .ndp-p{ font-size:14px; }
.ndp-flow{ display:flex; align-items:flex-start; gap:12px; margin:18px 0; }
.ndp-step{ flex:1 1 0; min-width:0; text-align:center; }
.ndp-step .ndp-ico{ width:56px; height:56px; margin:0 auto 8px; }
.ndp-step-t{ font-size:13px; font-weight:600; color:var(--c-navy); line-height:1.3; }
.ndp-step-s{ font-size:12px; font-weight:400; color:var(--c-crumb); line-height:1.35; margin-top:2px; }
.ndp-flow-arrow{ flex:0 0 auto; align-self:center; margin-top:-26px; color:var(--s-arrow); display:flex; }
.ndp-flow-arrow svg{ width:18px; height:18px; }
.ndp-cta-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ndp-btn{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 22px;
  border:none; border-radius:21px; cursor:pointer; text-decoration:none;
  background:var(--c-pink); color:#fff !important;
  font-family:inherit; font-size:14px; font-weight:600;
  transition:background .18s;
}
.ndp-btn:hover{ background:var(--c-pink-hover); }
.ndp-btn svg{ width:18px; height:18px; }
.ndp-learn{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:14px; font-weight:600; color:var(--c-navy);
}
.ndp-learn:hover{ color:var(--c-pink); }
.ndp-learn svg{ width:16px; height:16px; }

/* ---- Similar names (spec §21) ------------------------------------------ */
.ndp-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.ndp-pill{
  display:inline-flex; align-items:center; height:40px; padding:0 18px;
  border-radius:var(--r-sm); text-decoration:none;
  font-size:14px; font-weight:600; color:var(--c-navy);
  background:var(--p0); transition:transform .16s;
}
.ndp-pill:hover{ transform:translateY(-2px); }
.ndp-pill.w1{ background:var(--p1); }
.ndp-pill.w2{ background:var(--p2); }
.ndp-pill.w3{ background:var(--p3); }
.ndp-pill.w4{ background:var(--p4); }

/* ---- Phase 6.2: recommendation explanations ----------------------------
   .ndp-pill is a fixed-height (40px), single-line, inline-flex component used
   in exactly one place on the page. Rather than change that base rule (which
   would move every pill, reasoned or not), only a pill that actually carries
   a reason gets .has-reason, switching it to a column layout with room for a
   second line. A pill with no reason (the pure-fallback case) is completely
   untouched — same 40px, same single line, same everything. */
.ndp-pill.has-reason{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:auto; min-height:40px; padding:8px 16px; gap:2px;
}
.ndp-reason{
  font-style:normal; font-size:10.5px; font-weight:500; color:var(--c-crumb);
  line-height:1.3; text-align:center;
}
/* .ndp-pair already stacks name + an optional gender line inside a fixed
   60px; a reason is a possible THIRD line, so it gets the same treatment as
   above — only pairs that actually have a reason grow past the fixed height. */
.ndp-pair.has-reason{ height:auto; padding:8px 12px; gap:1px; }

/* ---- Names that pair well (spec §22) ----------------------------------- */
.ndp-pairs{ display:flex; flex-wrap:wrap; gap:10px; }
.ndp-pair{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:85px; height:60px; padding:0 12px; border-radius:var(--r-sm);
  text-decoration:none; background:var(--p0); transition:transform .16s;
}
.ndp-pair:hover{ transform:translateY(-2px); }
.ndp-pair b{ font-size:14px; font-weight:600; color:var(--c-navy); line-height:1.2; }
.ndp-pair span{ font-size:11px; font-weight:400; color:var(--c-crumb); margin-top:3px; }
.ndp-pair.w1{ background:var(--p1); }
.ndp-pair.w2{ background:var(--p2); }
.ndp-pair.w3{ background:var(--p3); }
.ndp-pair.w4{ background:var(--p4); }

/* ---- Phase 6.1: Mythology / Celebrity cross-links ----------------------
   Deliberately a distinct class from .ndp-pill/.ndp-pair: those two are the
   exact selectors public/js/totsname.js's delegate() binds the frozen
   similar_name_click / pair_name_click analytics events to. Reusing them here
   would risk a future refactor conflating an unrelated click with that
   established, regression-tested event — so this gets its own name even
   though the visual language (a small rounded row, hover lift) is intentionally
   the same family as the rest of the page. */
.ndp-xlinks{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.ndp-xlink{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:var(--r-sm); background:var(--p0);
  text-decoration:none; color:var(--c-navy); font-size:14px; font-weight:600;
  transition:transform .16s;
}
.ndp-xlink:hover, .ndp-xlink:focus-visible{ transform:translateY(-2px); }
.ndp-xlink svg{ width:16px; height:16px; flex:0 0 auto; opacity:.6; }

/* ---- Quick facts (spec §14) -------------------------------------------- */
.ndp-qf{ padding:16px; }
.ndp-qf-row{
  display:flex; align-items:center; gap:10px; min-height:42px;
  padding:6px 0; border-bottom:1px solid var(--s-divider);
}
.ndp-qf-row:last-child{ border-bottom:none; }
.ndp-qf-row .ndp-ico{ width:24px; height:24px; border-radius:0; background:none; }
.ndp-qf-row .ndp-ico svg{ width:24px; height:24px; }
.ndp-qf-k{ font-size:13px; font-weight:500; color:var(--c-crumb); flex:0 0 auto; }
.ndp-qf-v{ font-size:13px; font-weight:600; color:var(--c-navy); margin-left:auto; text-align:right; }

/* ---- Promo (sidebar top) ----------------------------------------------- */
.ndp-promo{ background:var(--c-blue-soft); border-color:#DCE9FA; }
.ndp .ndp-promo h2{ font-size:19px; line-height:1.3; }
.ndp-promo .ndp-p{ font-size:14px; }
.ndp-promo-row{ display:flex; gap:10px; margin-top:16px; }
.ndp-promo-item{ flex:1; text-align:center; min-width:0; }
.ndp-promo-item .ndp-ico{ margin:0 auto 6px; background:var(--c-white); }
.ndp-promo-item span{ display:block; font-size:12px; font-weight:500; color:var(--c-text-2); line-height:1.3; }

/* ---- FAQ (spec §19) ---------------------------------------------------- */
.ndp-faq{ background:var(--s-faq-bg); border-color:var(--s-faq-bd); }
.ndp-faq-list{ display:flex; flex-direction:column; gap:8px; }
.ndp-faq details{
  background:var(--s-faq-row); border:1px solid var(--s-faq-row-bd);
  border-radius:var(--r-sm); overflow:hidden;
}
.ndp-faq summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  min-height:42px; padding:12px; font-size:13px; font-weight:500;
  color:var(--c-navy); line-height:1.4;
}
.ndp-faq summary::-webkit-details-marker{ display:none; }
.ndp-faq summary svg{ width:16px; height:16px; margin-left:auto; flex:0 0 auto; color:#8CA0C2; transition:transform .2s; }
.ndp-faq details[open] summary svg{ transform:rotate(180deg); }
.ndp-faq details p{ margin:0; padding:0 12px 12px; font-size:13px; line-height:1.6; color:var(--c-text-2); }
.ndp-faq details p a{ color:var(--c-pink); font-weight:600; }

/* ---- Important to know (spec §20) -------------------------------------- */
.ndp-know{ background:var(--s-know-bg); border-color:var(--s-know-bd); }
.ndp .ndp-know .ndp-card-h h3{ font-size:19px; }
.ndp-know .ndp-p{ font-size:14px; }

/* ---- Footer CTA band (spec §23) — page-scoped, not the global footer --- */
.ndp-band{ margin-top:24px; background:var(--s-band-bg); }
.ndp-band-in{
  max-width:960px; margin:0 auto; padding:28px 32px;
  min-height:120px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.ndp-band .ndp-ico{ width:56px; height:56px; background:var(--c-white); color:var(--c-green); }
.ndp-band-txt{ flex:1; min-width:240px; }
.ndp .ndp-band-txt h2{
  font-size:17px; font-weight:700; margin:0 0 3px;
  color:var(--c-navy) !important; -webkit-text-fill-color:var(--c-navy) !important; background:none !important;
}
.ndp-band-txt p{ font-size:14px; margin:0; color:var(--c-text-2); }
.ndp-band-cta{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 22px;
  border:1px solid var(--s-band-bd); border-radius:21px; background:transparent;
  color:var(--c-navy) !important; text-decoration:none; font-size:14px; font-weight:600;
}
.ndp-band-cta:hover{ background:var(--c-white); }
.ndp-band-cta svg{ width:16px; height:16px; }

/* ---- Search ------------------------------------------------------------ */
.ndp-search{ display:flex; gap:10px; }
.ndp-search input{
  flex:1; min-width:0; height:42px; padding:0 18px; font-family:inherit; font-size:14px;
  border:1px solid var(--c-border); border-radius:21px; background:var(--c-white); color:var(--c-navy);
}
.ndp-search input:focus{ outline:none; border-color:var(--c-pink); }
.ndp-search button{
  height:42px; padding:0 22px; border:none; border-radius:21px; cursor:pointer;
  background:var(--c-navy); color:#fff; font-family:inherit; font-size:14px; font-weight:600;
}
.ndp-search button:hover{ background:var(--c-navy-dk); }

/* ---- Focus ------------------------------------------------------------- */
.ndp a:focus-visible, .ndp button:focus-visible,
.ndp summary:focus-visible, .ndp input:focus-visible{
  outline:2px solid var(--c-pink); outline-offset:2px;
}

/* ---- Responsive (spec §27) --------------------------------------------- */
@media (max-width:899px){
  .ndp-grid{ grid-template-columns:1fr; }
  .ndp h1.ndp-name{ font-size:40px; }
}
@media (max-width:599px){
  .ndp-wrap{ padding:0 16px; }
  .ndp h1.ndp-name{ font-size:36px; }
  .ndp-card{ padding:16px; }
  .ndp-meaning{ padding:18px; }
  .ndp-meaning-primary{ font-size:24px; }
  .ndp-tiles{ grid-template-columns:1fr 1fr; }
  /* Flow becomes 2x2: the arrows would point the wrong way once wrapped,
     so they are removed rather than left misleading. */
  .ndp-flow{ flex-wrap:wrap; gap:14px 10px; }
  .ndp-step{ flex:0 0 calc(50% - 5px); }
  .ndp-flow-arrow{ display:none; }
  .ndp-btn{ width:100%; justify-content:center; }
  .ndp-cta-row{ gap:14px; }
  .ndp-band-in{ padding:22px 16px; flex-direction:column; align-items:flex-start; }
  .ndp-band-cta{ width:100%; justify-content:center; }
}
@media (max-width:400px){
  .ndp-tiles{ grid-template-columns:1fr; }
  .ndp-step{ flex:0 0 100%; }
}
@media (prefers-reduced-motion:reduce){
  .ndp *{ transition:none !important; }
}

/* ============================================================================
   DARK MODE
   Reuses the site's existing mechanism ([data-theme="dark"] set from
   localStorage['tn-theme'] by the boot script in head.ejs). No second theme
   system, and the global boot logic is not touched.

   Only colour tokens change. Every dimension, radius, weight, icon size and
   breakpoint above is shared, so nothing moves when the theme flips.
   ========================================================================== */
[data-theme="dark"] .ndp{
  --c-navy:#DCE7FF;
  --c-navy-dk:#C3D4F7;
  --c-blue:#4DA3FF;
  --c-pink:#F02A83;
  --c-pink-hover:#FF3D91;
  --c-pink-light:#351C29;
  --c-pink-soft:#211720;
  --c-blue-light:#142A42;
  --c-blue-soft:#121C2E;
  --c-green:#42C98A;
  --c-green-light:#12231D;
  --c-lavender:#1D2138;
  --c-lavender-soft:#151C2E;
  --c-peach:#332719;
  --c-yellow:#F5C45B;
  --c-text:#F1F5FF;
  --c-text-2:#B9C6DF;
  --c-text-3:#8FA1BF;
  --c-crumb:#8FA1BF;
  --c-border:#26344D;
  --c-white:#121C2E;
  --c-page:#0B1220;

  --s-meaning-bg:#211D18;      --s-meaning-bd:#3A3328;
  --s-meaning-ico-bg:#332A19;  --s-meaning-ico:#F5C45B;
  --s-tile-bg:#162238;
  --s-signif-bg:#211722;       --s-signif-bd:#3B2935;
  --s-signif-ico-bg:#34202D;   --s-signif-ico:#F05A8D;
  --s-nak-bg:#12231D;          --s-nak-bd:#254337;
  --s-nak-ico-bg:#19352B;      --s-nak-ico:#42C98A;
  --s-opt-bg:#142A42;          --s-opt-fg:#63B4FF;
  --s-faq-bg:#211720;          --s-faq-bd:#3B2935;
  --s-faq-row:#151F31;         --s-faq-row-bd:#293852;
  --s-know-bg:#12231D;         --s-know-bd:#254337;
  --s-arrow:#7C8FB0;
  --s-divider:#26344D;
  --s-band-bg:#151C2E;         --s-band-bd:#4A56C4;

  --t-gender-bg:#142A42;   --t-gender-fg:#63B4FF;
  --t-girl-bg:#351C29;     --t-girl-fg:#FF7BA9;
  --t-origin-bg:#332719;   --t-origin-fg:#F2B77C;
  --t-relig-bg:#351C29;    --t-relig-fg:#FF7BA9;
  --t-style-bg:#163126;    --t-style-fg:#62D99A;

  --p0:#142433; --p1:#2A2318; --p2:#2C1B26; --p3:#152B23; --p4:#2B2517;

  /* Spec: no light-mode shadow in dark, no glow. */
  --shadow:none;
}
/* Headings again: the global sweep is not theme-aware, so it must be
   restated here too or dark-mode headings revert to brand pink. */
[data-theme="dark"] .ndp h1.ndp-name,
[data-theme="dark"] .ndp .ndp-card-h h2,
[data-theme="dark"] .ndp .ndp-card-h h3,
[data-theme="dark"] .ndp .ndp-band-txt h2{
  color:var(--c-navy) !important; -webkit-text-fill-color:var(--c-navy) !important;
}
[data-theme="dark"] .ndp-tile .ndp-ico{ background:#1B2739; }
/* Action row in dark mode. Only colour tokens change — size, radius, weight,
   icon size and wrapping are shared with light mode, so nothing moves when the
   theme is toggled. */
[data-theme="dark"] .ndp-act{ background:#162238; border-color:#26344D; color:#B9C6DF; }
[data-theme="dark"] .ndp-act:hover{ color:#F1F5FF; border-color:#3B4C6E; }
[data-theme="dark"] .ndp-act.ndp-fav.is-on{ color:#FF7BA9; background:#351C29; border-color:#5A2B41; }
[data-theme="dark"] .ndp .ndp-act.ndp-say.is-speaking{
  color:#8CC0FF !important; -webkit-text-fill-color:#8CC0FF !important;
  background:#182A45 !important; border-color:#2E456E !important;
}
[data-theme="dark"] #tn-toast{ background:#1D1830; color:#F1F5FF; }[data-theme="dark"] .ndp-promo{ background:#121C2E; border-color:#26344D; }
[data-theme="dark"] .ndp-promo-item .ndp-ico{ background:#182338; }
[data-theme="dark"] .ndp-band .ndp-ico{ background:#182338; }
[data-theme="dark"] .ndp-band-cta:hover{ background:#1B2436; }
[data-theme="dark"] .ndp-meaning-primary{ color:#F1F5FF; }
[data-theme="dark"] .ndp-meaning-sub,
[data-theme="dark"] .ndp-meaning .ndp-p{ color:#B9C6DF; }
[data-theme="dark"] .ndp-tile-v,
[data-theme="dark"] .ndp-qf-v,
[data-theme="dark"] .ndp-pill,
[data-theme="dark"] .ndp-pair b,
[data-theme="dark"] .ndp-xlink,
[data-theme="dark"] .ndp-step-t{ color:#F1F5FF; }
[data-theme="dark"] .ndp-search input{ background:#162238; color:#F1F5FF; }
[data-theme="dark"] .ndp-search button{ background:var(--c-pink); color:#fff; }
[data-theme="dark"] .ndp-btn{ color:#fff !important; }