/* ═══ The Specimen Sheet — Nutrients (2026-10-11) ═══
   Opened by tapping an ingredient card (js/nutrients/specimen.js). Desktop: a
   large sheet, plate left / story right. Phone: a bottom sheet, plate on top.
   --ink is the ingredient's own colour (color_hex), used only as light. */

html.sp-lock { overflow: hidden; }

/* 9700: above the phone tab bar (9000) and its own sheets (9500/9600) — the
   tab bar covered the sheet's previous/next bar at 1200 (measured 412×737) —
   and below the menu drawer (10000), which never opens over the sheet. */
.sp-root { position: fixed; inset: 0; z-index: 9700; display: grid; place-items: center; }
.sp-root[hidden] { display: none !important; }

.sp-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.5);
  -webkit-backdrop-filter: var(--scrim-glass, blur(24px) saturate(150%));
  backdrop-filter: var(--scrim-glass, blur(24px) saturate(150%));
  opacity: 0;
  transition: opacity 0.35s ease;
}
.sp-root.is-open .sp-scrim { opacity: 1; }

.sp-sheet {
  --ink: #c8882a;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  width: min(1140px, calc(100vw - 48px));
  height: min(780px, calc(100dvh - 64px));
  background: #0b0f17;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-root.is-open .sp-sheet { opacity: 1; transform: none; }

.sp-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(11, 15, 23, 0.7);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}
.sp-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }
.sp-close:focus-visible { outline: 2px solid var(--color-accent, #f5a623); outline-offset: 2px; }

/* ── Plate (left) ── */
.sp-left { position: relative; min-height: 0; }
.sp-plate {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 38%, color-mix(in srgb, var(--ink) 34%, transparent) 0%, transparent 62%),
    #080b11;
}
.sp-plate__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sp-plate.has-img .sp-plate__img { opacity: 1; }
.sp-plate.has-img .sp-plate__type { opacity: 0; }
/* Until a picture exists: the ingredient's Hindi name as the plate. */
.sp-plate__type {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 48px 36px 120px;
  transition: opacity 0.4s ease;
}
.sp-plate__type span {
  font-family: var(--font-editorial, "Cormorant Garamond", serif);
  font-size: clamp(3.4rem, 7vw, 6.2rem);
  line-height: 1.1;
  text-align: center;
  color: color-mix(in srgb, var(--ink) 55%, #f2ddd0);
  overflow-wrap: anywhere;
}
.sp-plate__kcal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 72px 32px 28px;
  background: linear-gradient(to top, rgba(8, 11, 17, 0.92) 0%, rgba(8, 11, 17, 0.6) 55%, transparent 100%);
}
.sp-plate__kcal b {
  font-family: var(--font-editorial, "Cormorant Garamond", serif);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent, #f5a623);
}
.sp-plate__kcal span {
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ── Story (right) ── */
.sp-scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The OS scrollbar is a bright grey strip on this dark sheet. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.sp-scroll::-webkit-scrollbar { width: 6px; }
.sp-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 3px; }
.sp-scroll::-webkit-scrollbar-track { background: transparent; }
.sp-sheet:focus { outline: none; }
.sp-body { padding: 52px 56px 24px; flex: 1; }
.sp-sheet.is-turning .sp-body,
.sp-sheet.is-turning .sp-plate { animation: sp-turn 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes sp-turn { from { opacity: 0; transform: translateY(10px); } }

.sp-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent, #f5a623);
}
.sp-name {
  margin: 0;
  font-family: var(--font-editorial, "Cormorant Garamond", serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
}
.sp-sub {
  margin: 6px 0 0;
  font-family: var(--font-editorial, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--color-blush, #f2ddd0);
}
.sp-tagline {
  margin: 14px 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sp-chips:empty { display: none; }
.sp-gi, .sp-dosha, .sp-approx {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
}
.sp-gi--low { color: #7ed9a0; border-color: rgba(126, 217, 160, 0.35); }
.sp-gi--med { color: #f5a623; border-color: rgba(245, 166, 35, 0.35); }
.sp-gi--high { color: #ef6b74; border-color: rgba(239, 107, 116, 0.35); }
.sp-dosha { color: var(--color-blush, #f2ddd0); }

.sp-sec { margin-top: 34px; }
.sp-sec__label {
  margin: 0 0 10px;
  font-family: var(--font-mono, monospace);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.sp-sec__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}

/* Names in eight languages */
.sp-langs { margin-top: 32px; }
.sp-langs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sp-lang {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sp-lang__label {
  font-family: var(--font-mono, monospace);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.sp-lang__script {
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--color-blush, #f2ddd0);
  overflow-wrap: anywhere;
}
.sp-lang__roman {
  font-family: var(--font-editorial, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Nutrition */
.sp-macros { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 14px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.sp-macros b { font-weight: 500; color: #fff; }
.sp-meters { display: grid; gap: 10px; }
.sp-meter {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 118px;
  align-items: center;
  gap: 14px;
  font-size: 0.8rem;
}
.sp-meter__label { color: rgba(255, 255, 255, 0.7); }
.sp-meter__track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.sp-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 60%, #f5a623), #f5a623);
  transform-origin: left;
  animation: sp-fill 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sp-fill { from { transform: scaleX(0); } }
.sp-meter__val { text-align: right; color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums; }
.sp-meter__val em { display: inline-block; min-width: 46px; margin-left: 8px; font-style: normal; color: var(--color-accent, #f5a623); }
.sp-foot { margin: 14px 0 0; font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); }

/* Pairs with */
.sp-pairs { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-pair {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.05);
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-blush, #f2ddd0);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.sp-pair span { color: var(--color-accent, #f5a623); transition: transform 0.25s ease; }
.sp-pair:hover { background: rgba(245, 166, 35, 0.12); border-color: rgba(245, 166, 35, 0.6); color: #fff; }
.sp-pair:hover span { transform: translateX(3px); }
.sp-pair:focus-visible { outline: 2px solid var(--color-accent, #f5a623); outline-offset: 2px; }
.sp-pair--plain { cursor: default; border-color: rgba(255, 255, 255, 0.12); background: none; color: rgba(255, 255, 255, 0.7); }

/* Previous / next */
.sp-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: #0b0f17;
}
/* Text scrolling up to the bar fades out instead of sliding under it. */
.sp-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 40px;
  background: linear-gradient(to top, #0b0f17, rgba(11, 15, 23, 0));
  pointer-events: none;
}
.sp-step {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: var(--font-editorial, "Cormorant Garamond", serif);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.sp-step span { color: var(--color-accent, #f5a623); }
.sp-step:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.sp-step:focus-visible { outline: 2px solid var(--color-accent, #f5a623); outline-offset: 2px; }

/* The card itself now opens the sheet. */
.nutrient-card[data-opens] { cursor: pointer; }
.nutrient-card[data-opens]:focus-visible { outline: 2px solid var(--color-accent, #f5a623); outline-offset: 3px; }

/* ── Phone: bottom sheet, plate on top ── */
@media (max-width: 768px) {
  .sp-root { place-items: end stretch; }
  .sp-sheet {
    grid-template-columns: 1fr;
    grid-template-rows: 34dvh minmax(0, 1fr);
    width: 100%;
    height: 94dvh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    transform: translateY(100%);
  }
  .sp-root.is-open .sp-sheet { transform: none; }
  .sp-close { top: 12px; right: 12px; }
  .sp-plate__type { padding: 24px 24px 72px; }
  .sp-plate__type span { font-size: clamp(2.8rem, 13vw, 4rem); }
  .sp-plate__kcal { padding: 40px 20px 16px; }
  .sp-plate__kcal b { font-size: 2.4rem; }
  .sp-body { padding: 26px 20px 20px; }
  .sp-langs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-meter { grid-template-columns: 82px minmax(0, 1fr) 104px; gap: 10px; }
  .sp-nav { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-sheet, .sp-scrim, .sp-plate__img { transition: opacity 0.01ms; transform: none !important; }
  .sp-sheet.is-turning .sp-body, .sp-sheet.is-turning .sp-plate, .sp-meter__fill { animation: none; }
}