/* ============================================================
   Kishorify · stones.css
   Crystals, gemstones and rudraksha — standalone review page.

   Kept in its own file rather than appended to style.css so the page can be
   reviewed, changed and merged without touching the rest of the site. Every
   colour comes from the existing tokens; the only literal colours are the
   mineral and chakra hexes, which are data, not theme.

   Grid tracks use minmax(0, 1fr) throughout. A bare 1fr carries a min-content
   floor, and a <select> sized to its longest option will push the track wider
   than its container — which is exactly how the rest of the site ended up
   scrolling sideways on a 320px phone.
   ============================================================ */

/* ---------------------------------------------------------- page frame */
.stone-hero{padding:calc(var(--header-h) + 3.2rem) 0 2.2rem}
.stone-hero h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,5.4vw,3.5rem);line-height:1.06;margin:.2rem 0 .8rem}
.stone-hero .eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--gold)}
.stone-hero .lede{max-width:62ch;font-size:1.06rem;line-height:1.7;color:var(--muted)}

.stone-standing{
  margin:1.6rem 0 0;padding:1rem 1.15rem;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--card);max-width:74ch}
.stone-standing p{margin:.2rem 0;font-size:.93rem;line-height:1.62;color:var(--muted)}
.stone-standing p strong{color:var(--text)}

.stone-three{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:1.1rem;margin-top:1.8rem}
.stone-three h2{
  font-family:var(--font-display);font-size:1.3rem;font-weight:600;
  margin:0 0 .4rem;color:var(--gold)}
.stone-three p{margin:0;font-size:.94rem;line-height:1.68;color:var(--muted)}

/* ---------------------------------------------------------------- tabs */
.stone-tabs-wrap{
  position:sticky;top:var(--header-h);z-index:40;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);
  border-block:1px solid var(--line-soft)}
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .stone-tabs-wrap{background:var(--bg)}
}
.stone-tabs{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;padding:.45rem 0}
.stone-tabs::-webkit-scrollbar{display:none}
.stone-tab{
  flex:0 0 auto;appearance:none;border:1px solid transparent;background:none;
  color:var(--muted);font:inherit;font-size:.92rem;font-weight:500;
  padding:.6rem 1.05rem;border-radius:999px;cursor:pointer;white-space:nowrap;
  min-height:44px;transition:color .2s var(--ease),background .2s var(--ease)}
.stone-tab:hover{color:var(--text)}
.stone-tab.is-on{
  color:var(--btn-ink);border-color:transparent;
  background:linear-gradient(120deg,var(--btn-from),var(--btn-mid) 52%,var(--btn-to))}
.stone-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.stone-body{padding:1.8rem 0 4rem}
.stone-panel[hidden]{display:none}

/* ------------------------------------------------------------ headings */
.st-head{margin:0 0 .5rem;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.1rem);color:var(--gold)}
.st-sub{margin:0 0 1.4rem;max-width:70ch;color:var(--muted);
  font-size:.97rem;line-height:1.7}
.st-sub + .st-sub{margin-top:-.9rem}

/* ------------------------------------------------------------- filters */
.st-filters{
  display:grid;gap:.7rem;margin:0 0 1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  align-items:end}
.st-filters label{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--gold);margin:0 0 .3rem}
.st-filters input[type="search"],
.st-filters select{
  width:100%;min-width:0;max-width:100%;min-height:44px;
  padding:.62rem .8rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card-solid);color:var(--text);
  font:inherit;font-size:.94rem}
.st-filters input:focus-visible,.st-filters select:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px}

.st-toggles{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem}
.st-toggle{
  appearance:none;border:1px solid var(--line);background:var(--card);
  color:var(--muted);font:inherit;font-size:.83rem;font-weight:500;
  padding:.5rem .85rem;border-radius:999px;cursor:pointer;min-height:40px}
.st-toggle[aria-pressed="true"]{
  color:var(--btn-ink);border-color:transparent;
  background:linear-gradient(120deg,var(--btn-from),var(--btn-mid) 52%,var(--btn-to))}
.st-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.st-count{font-size:.84rem;color:var(--muted);margin:0 0 1rem}
.st-empty{padding:2rem 0;color:var(--muted);text-align:center}

/* --------------------------------------------------------------- cards */
.st-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.st-card{
  display:flex;flex-direction:column;gap:.7rem;
  padding:1.05rem 1.1rem 1.15rem;border-radius:var(--r-md);
  border:1px solid var(--line-soft);background:var(--card);
  box-shadow:var(--shadow);min-width:0}
.st-card:hover{border-color:var(--line)}
.st-card h3{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:1.24rem;line-height:1.2;color:var(--text)}
.st-card-top{display:flex;gap:.8rem;align-items:flex-start;min-width:0}
.st-card-top > div{min-width:0;flex:1 1 auto}
.st-meta{
  margin:.2rem 0 0;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);font-weight:600}

/* Field blocks — the same shape everywhere so a reader learns it once. */
.st-field{margin:0}
.st-field > dt{
  font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
  color:var(--gold);margin:0 0 .25rem}
.st-field > dd{margin:0;font-size:.92rem;line-height:1.62;color:var(--muted)}
.st-field ul{margin:0;padding:0;list-style:none}
.st-field li{
  position:relative;padding-left:1rem;margin:0 0 .3rem;
  font-size:.92rem;line-height:1.6;color:var(--muted)}
.st-field li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--gold);opacity:.75}

.st-fact{
  border-left:2px solid var(--line);padding-left:.8rem;
  font-size:.9rem;line-height:1.62;color:var(--muted)}
.st-watch{
  border-radius:var(--r-sm);padding:.6rem .75rem;
  background:color-mix(in srgb,#B4342B 12%,transparent);
  border:1px solid color-mix(in srgb,#B4342B 34%,transparent)}
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .st-watch{background:rgba(180,52,43,.12);border-color:rgba(180,52,43,.34)}
}
.st-watch dt{color:#E08A80}
html[data-theme="light"] .st-watch dt{color:#8C2018}
html[data-theme="light"] .st-watch{background:rgba(180,52,43,.09);border-color:rgba(140,32,24,.42)}

/* ---------------------------------------------------------- diagrams */
.st-dia{
  flex:0 0 auto;width:62px;height:62px;display:block;
  color:var(--gold);overflow:visible}
.st-dia-lg{width:96px;height:96px}
.d-body{fill:color-mix(in srgb,currentColor 12%,transparent);
  stroke:currentColor;stroke-width:2}
.d-body-in{fill:none;stroke:currentColor;stroke-width:1;opacity:.34}
.d-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.d-seam{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55;
  stroke-dasharray:4 3;stroke-linecap:round}
.d-hole{fill:var(--bg);stroke:currentColor;stroke-width:1.6}
.d-bead{fill:color-mix(in srgb,currentColor 18%,transparent);
  stroke:currentColor;stroke-width:1.4}
.d-facet{fill:none;stroke:var(--bg);stroke-width:1.4;opacity:.55}
.d-sheen{fill:none;stroke:#fff;stroke-width:3;opacity:.5;stroke-linecap:round}
.d-sheen2{fill:none;stroke:#fff;stroke-width:2;opacity:.22;stroke-linecap:round}
.d-chatoyant{fill:none;stroke:#FFF6DA;stroke-width:3.4;opacity:.9;stroke-linecap:round}
.d-g{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;
  stroke-linejoin:round}
.d-gf{fill:currentColor;stroke:none}
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .d-body{fill:rgba(212,175,55,.12)}
  .d-bead{fill:rgba(212,175,55,.18)}
}

.st-gem-dia{width:88px;height:88px;flex:0 0 auto}
/* NOT `.st-gem-dia .d-gem` — <use> clones its target into a shadow tree, and a
   descendant selector does not reach across that boundary. The rule has to
   match the cloned element on its own, and the stone's colour has to arrive by
   inheritance (color: on the <svg>), which is why this is currentColor. */
.d-gem{fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.st-graha{width:34px;height:34px;color:var(--gold);flex:0 0 auto}

/* ------------------------------------------------------- colour chips */
.st-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:0}
.st-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.74rem;font-weight:500;letter-spacing:.03em;
  padding:.24rem .6rem;border-radius:999px;
  border:1px solid var(--line-soft);color:var(--muted);background:transparent}
.st-swatch{
  width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(128,128,128,.5)}
.st-chip-warn{border-color:rgba(180,52,43,.5);color:#E08A80}
html[data-theme="light"] .st-chip-warn{color:#8C2018}
.st-chip-ok{border-color:var(--line)}

/* ------------------------------------------------------- chakra column */
.st-chakra{
  display:grid;gap:.5rem;margin:0 0 2rem;padding:1.1rem 1.15rem;
  border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--card)}
.st-chakra-row{display:flex;align-items:center;gap:.75rem;min-width:0}
.st-chakra-dot{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(128,128,128,.35),0 0 14px -2px currentColor}
.st-chakra-name{font-size:.92rem;color:var(--text);min-width:0}
.st-chakra-note{
  grid-column:1/-1;margin:.6rem 0 0;font-size:.86rem;line-height:1.6;
  color:var(--muted);border-top:1px solid var(--line-soft);padding-top:.7rem}

/* ---------------------------------------------------------- shape row */
.st-shapes{
  display:grid;gap:.9rem;margin:1.4rem 0 0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr))}
.st-shape{
  text-align:center;padding:.9rem .7rem;border-radius:var(--r-md);
  border:1px solid var(--line-soft);background:var(--card);min-width:0}
.st-shape h4{margin:.45rem 0 .25rem;font-size:.94rem;font-weight:600;color:var(--text)}
.st-shape p{margin:0;font-size:.82rem;line-height:1.55;color:var(--muted)}

/* ----------------------------------------------------------- gem cards */
.st-gem{
  display:grid;gap:1rem;align-content:start;padding:1.2rem;border-radius:var(--r-md);
  border:1px solid var(--line-soft);background:var(--card);
  box-shadow:var(--shadow);min-width:0}
.st-gems{display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr))}
.st-gem-head{display:flex;gap:1rem;align-items:center;min-width:0}
.st-gem-head > div{min-width:0}
.st-gem-head h3{margin:0;font-family:var(--font-display);font-size:1.5rem;
  font-weight:600;color:var(--text);line-height:1.15}
.st-gem-sans{margin:.15rem 0 0;font-size:.86rem;color:var(--muted);font-style:italic}
.st-gem-planet{display:flex;align-items:center;gap:.45rem;margin:.4rem 0 0;
  font-size:.86rem;color:var(--gold);font-weight:600}

.st-specs{display:grid;gap:.55rem 1rem;margin:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
.st-specs div{min-width:0}
.st-specs dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--gold);margin:0 0 .1rem}
.st-specs dd{margin:0;font-size:.9rem;color:var(--text);line-height:1.45}

.st-mantra{
  padding:.7rem .85rem;border-radius:var(--r-sm);
  border:1px solid var(--line-soft);background:var(--bg-2)}
.st-mantra .m-dev{
  font-family:var(--font-dev);font-size:1.12rem;line-height:1.7;
  color:var(--gold-light);margin:0;display:block}
html[data-theme="light"] .st-mantra .m-dev{color:var(--gold-deep)}
.st-mantra small{display:block;margin-top:.2rem;font-size:.78rem;color:var(--muted)}

.st-upratna{display:flex;flex-wrap:wrap;gap:.35rem;margin:.3rem 0 0;padding:0;
  list-style:none}
.st-upratna li{
  font-size:.79rem;padding:.24rem .6rem;border-radius:999px;
  border:1px solid var(--line-soft);color:var(--muted);
  /* These are pill chips, not a bulleted list. They live inside .st-field,
     which gives every <li> a gold dot and a 1rem left indent for the leader —
     on a chip that dot lands inside the pill and pushes the label off-centre,
     which on a narrow screen reads as broken. Cancel the leader here. */
  margin:0;padding-left:.6rem}
.st-upratna li::before{display:none}

/* ------------------------------------------------------ rudraksha cards */
.st-mukhi{
  display:grid;gap:.85rem;align-content:start;padding:1.1rem;border-radius:var(--r-md);
  border:1px solid var(--line-soft);background:var(--card);min-width:0}
.st-mukhi-head{display:flex;gap:.85rem;align-items:center;min-width:0}
.st-mukhi-n{
  font-family:var(--font-display);font-size:2rem;font-weight:600;
  line-height:1;color:var(--gold);flex:0 0 auto}
.st-mukhi-head h3{margin:0;font-size:1.05rem;font-weight:600;color:var(--text)}
.st-mukhi-head p{margin:.1rem 0 0;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

.st-sources{display:grid;gap:.6rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.st-source{
  padding:.6rem .7rem;border-radius:var(--r-sm);
  border:1px solid var(--line-soft);background:var(--bg-2);min-width:0}
.st-source dt{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:var(--gold);margin:0 0 .2rem}
.st-source dd{margin:0;font-size:.88rem;line-height:1.55;color:var(--muted)}
.st-source-empty dd{opacity:.75;font-style:italic}

.st-flag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.76rem;font-weight:600;letter-spacing:.04em;
  padding:.3rem .65rem;border-radius:999px;
  background:rgba(212,175,55,.13);border:1px solid var(--line);color:var(--gold)}
html[data-theme="light"] .st-flag{background:rgba(106,76,8,.1)}
.st-flag-warn{
  background:rgba(180,52,43,.13);border-color:rgba(180,52,43,.45);color:#E08A80}
html[data-theme="light"] .st-flag-warn{background:rgba(180,52,43,.09);color:#8C2018}

.st-planets{display:grid;gap:.5rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}

/* ---------------------------------------------------------- note blocks */
.st-notes{display:grid;gap:1rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.st-note{
  padding:1.1rem 1.15rem;border-radius:var(--r-md);
  border:1px solid var(--line-soft);background:var(--card);min-width:0}
.st-note h3{margin:0 0 .5rem;font-family:var(--font-display);font-size:1.24rem;
  font-weight:600;color:var(--gold)}
.st-note p{margin:0 0 .55rem;font-size:.92rem;line-height:1.66;color:var(--muted)}
.st-note p:last-child{margin-bottom:0}

.st-origins{display:grid;gap:1rem;margin:1.2rem 0 0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}

/* ------------------------------------------------------------- the FAQ */
.st-faq-group{margin:0 0 2rem}
.st-faq-group > h3{
  margin:0 0 .7rem;font-family:var(--font-display);font-size:1.35rem;
  font-weight:600;color:var(--gold)}
.st-q{
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:var(--card);margin:0 0 .6rem;overflow:hidden}
.st-q > summary{
  list-style:none;cursor:pointer;padding:.95rem 2.6rem .95rem 1.05rem;
  position:relative;font-size:1rem;font-weight:500;line-height:1.5;
  color:var(--text);min-height:44px}
.st-q > summary::-webkit-details-marker{display:none}
.st-q > summary::after{
  content:"";position:absolute;right:1.1rem;top:1.35rem;
  width:9px;height:9px;border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);transform:rotate(45deg);
  transition:transform .22s var(--ease)}
.st-q[open] > summary::after{transform:rotate(-135deg);top:1.6rem}
.st-q > summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.st-a{padding:0 1.05rem 1.05rem}
.st-a p{margin:0 0 .7rem;font-size:.94rem;line-height:1.72;color:var(--muted)}
.st-a p:last-child{margin-bottom:0}

/* ---------------------------------------------------------- footer bits */
.stone-foot{padding:2rem 0;border-top:1px solid var(--line-soft);text-align:center}
.stone-foot .f-note{max-width:62ch;margin:0 auto .6rem;font-size:.9rem;
  line-height:1.65;color:var(--muted)}
.stone-foot .f-legal{margin:0;font-size:.82rem;color:var(--muted)}

/* ------------------------------------------------------------- devanagari */
html[data-lang="hi"] .stone-hero h1,
html[data-lang="hi"] .st-head,
html[data-lang="hi"] .st-card h3,
html[data-lang="hi"] .st-gem-head h3{font-family:var(--font-dev);line-height:1.35}
html[data-lang="hi"] body{font-family:var(--font-dev),var(--font-body)}
/* Devanagari sits taller than Latin; uppercase tracking on it is unreadable. */
html[data-lang="hi"] .st-field > dt,
html[data-lang="hi"] .st-specs dt,
html[data-lang="hi"] .st-source dt,
html[data-lang="hi"] .st-filters label,
html[data-lang="hi"] .st-meta,
html[data-lang="hi"] .stone-hero .eyebrow,
html[data-lang="hi"] .st-mukhi-head p{text-transform:none;letter-spacing:.02em}

/* --------------------------------------------------------------- mobile */
/* The header stays sticky at every width on this page, so the tab bar parks
   below it at every width too. Pinning the tabs to 0 on phones put them
   underneath the header, where they were invisible. */
@media (max-width:640px){
  .stone-hero{padding-top:calc(var(--header-h) + 1.6rem)}
  .st-card,.st-gem,.st-mukhi,.st-note{padding:.95rem}
  .st-dia{width:52px;height:52px}
  .st-gem-dia{width:66px;height:66px}
  .st-gem-head h3{font-size:1.3rem}
  .st-mukhi-n{font-size:1.7rem}
}
@media (max-width:380px){
  .stone-tab{padding:.55rem .8rem;font-size:.86rem}
  .st-chip{font-size:.7rem}
}

@media (prefers-reduced-motion:reduce){
  .stone-tab,.st-q > summary::after{transition:none}
}
@media print{
  .stone-tabs-wrap,.st-filters,.st-toggles,.header-actions{display:none}
  .stone-panel[hidden]{display:block !important}
  .st-q{break-inside:avoid}
}

/* Headed items inside a note block — the authentication tests, the mala forms. */
.st-note-t{
  margin:.9rem 0 .25rem;font-size:.92rem;font-weight:600;color:var(--text)}
.st-note-t:first-of-type{margin-top:.2rem}


/* ------------------------------------------------------------ the header
   js/main.js is loaded on this page now that it is part of the site, so the
   header gets its `.scrolled` background the same way every other page does.
   The tab bar parks directly under it, and anything scrolled to has to clear
   both. */
html{scroll-padding-top:calc(var(--header-h) + 64px)}
.st-head{scroll-margin-top:calc(var(--header-h) + 72px)}
