/* Quarantine Cravings — AI Recipe Adaptor
   Built from the Claude Design handoff `Recipe Adaptor.dc.html` (screens
   01–06 of flow 1a). Values are the design's, not approximations: where the
   prototype says 52px or #E9F1E2, that's what's here. Tokens come from
   css/site.css, which the design was itself drawn against.

   These pages are rendered by Next, so this file also undoes the few global
   rules app/globals.css sets for NutriScan's dark shell. */

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
}

/* NutriScan hides scrollbars; a long recipe page needs them back. */
.qc-page * { scrollbar-width: auto; }
.qc-page ::-webkit-scrollbar { width: initial; height: initial; }

.qc-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.qc-page main { flex: 1; }

/* ---------------------------------------------------------------- page head */
.adapt-head {
  padding: 56px var(--pad-x) 30px;
  border-bottom: 1px solid var(--hair);
}
.adapt-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.04;
  margin: 0 0 12px;
}
.adapt-head h1 em { color: var(--rose); font-style: italic; }
.adapt-head .lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
}

/* ------------------------------------------------- the two-column adaptor */
.adapt-body {
  display: flex;
  gap: 48px;
  padding: 44px var(--pad-x) 56px;
  align-items: flex-start;
}
.adapt-main { flex: 1 1 620px; min-width: 0; }
.adapt-aside { flex: 0 0 320px; position: sticky; top: 20px; }

.adapt-card {
  background: var(--paper);
  border: 1px solid var(--hair-card);
  border-radius: 20px;
  padding: 26px;
}

/* Segmented control — "Paste a link" / "Paste the recipe". */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--sand);
  border-radius: 999px;
  margin-bottom: 22px;
}
.seg button {
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.seg button[aria-selected='true'] { background: var(--ink); color: var(--cream); }

.field-label {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}

.adapt-input,
.adapt-textarea {
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--hair-strong);
  border-radius: 14px;
  padding: 13px 16px;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.adapt-textarea { min-height: 200px; resize: vertical; font-size: 15px; line-height: 1.6; }
.adapt-input::placeholder,
.adapt-textarea::placeholder { color: var(--muted-3); }
.adapt-input:focus,
.adapt-textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(201, 85, 111, .12);
}

/* The "✓ Found" card that appears once we've read the link. */
.found {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--green-pale);
  border-radius: 14px;
}
.found-thumb {
  width: 52px; height: 44px;
  border-radius: 8px;
  background: var(--green-mid);
  flex: none;
  object-fit: cover;
}
.found-copy { flex: 1; min-width: 0; }
.found-title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.15;
}
.found-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.found-flag { font-size: 12px; color: #0c7a44; letter-spacing: .06em; white-space: nowrap; }

.found.is-miss { background: #FBEEDC; }
.found.is-miss .found-thumb { background: #EBD5B4; }
.found.is-miss .found-flag { color: #85551A; }

.found-spinner {
  width: 17px; height: 17px;
  border: 2px solid var(--hair-strong);
  border-top-color: var(--rose);
  border-radius: 50%;
  animation: qcSpin .8s linear infinite;
  flex: none;
}
@keyframes qcSpin { to { transform: rotate(360deg); } }
@keyframes qcPulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .found-spinner, .gen-spinner, .gen-step-spinner { animation-duration: 2.4s; }
  .gen-step.is-active { animation: none; }
}

/* ------------------------------------------------------- allergens + diets */
.avoid-block { margin-top: 30px; }
.avoid-title {
  font-family: var(--serif);
  font-size: 30px;
  margin: 0 0 6px;
}
.avoid-sub { font-size: 12.5px; color: var(--muted-2); margin: 0 0 18px; }

.adapt-chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.adapt-chip-row + .field-label { margin-top: 26px; }

.adapt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.adapt-chip:hover { border-color: var(--ink); color: var(--ink); }
.adapt-chip[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.adapt-chip[aria-pressed='true']::after { content: '✓'; font-size: 11px; }

/* ------------------------------------------------------- the sticky sidebar */
.ready-card {
  background: var(--paper);
  border: 1px solid var(--hair-card);
  border-radius: 20px;
  padding: 24px;
}
.ready-card .field-label { margin-bottom: 14px; }
.ready-title {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 6px;
}
.ready-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 20px;
}
.ready-go {
  display: block;
  width: 100%;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  transition: background .15s;
}
.ready-go:hover:not(:disabled) { background: var(--rose); }
.ready-go:disabled { opacity: .4; cursor: default; }
.ready-note { font-size: 12.5px; color: var(--muted-2); line-height: 1.55; margin: 14px 0 0; }

.disclaimer {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--blue-pale);
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.adapt-error {
  margin: 0 var(--pad-x) 24px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #FBE9EC;
  border: 1px solid #E9C4CD;
  color: #8C2338;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 760px;
}

/* --------------------------------------------------------- 03 · Generating */
.generating {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  padding: 80px var(--pad-x) 90px;
}
.gen-copy { flex: 0 0 420px; }
.gen-spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--hair);
  border-top-color: var(--rose);
  animation: qcSpin 1s linear infinite;
  margin-bottom: 26px;
}
.gen-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.1;
  margin: 0 0 12px;
}
.gen-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 30px;
  max-width: 38ch;
}
.gen-steps { display: flex; flex-direction: column; gap: 16px; }
.gen-step {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 15.5px;
}
.gen-step.is-active { animation: qcPulse 1.4s ease-in-out infinite; }
.gen-step.is-pending { color: var(--muted-3); }
.gen-tick {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green-mid);
  color: #0c7a44;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: none;
}
.gen-step-spinner {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--hair-strong);
  border-top-color: var(--rose);
  animation: qcSpin 1s linear infinite;
  flex: none;
}
.gen-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(51, 48, 44, .14);
  flex: none;
}
/* The skeleton beside the checklist — what's being built, roughed in. */
.gen-skeleton { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.sk { border-radius: 8px; background: var(--sand); }
.sk-title { height: 26px; width: 55%; }
.sk-line { height: 14px; border-radius: 6px; opacity: .7; }
.sk-panels { display: flex; gap: 22px; margin-top: 16px; }
.sk-panel { flex: 1; height: 220px; border-radius: 16px; background: var(--sand); opacity: .55; }
.sk-panel.is-rose { background: var(--rose-pale); opacity: .7; }

/* ------------------------------------------------------------ 04 · Result */
.result-band {
  padding: 44px var(--pad-x) 34px;
  background: var(--green-pale);
  border-bottom: 1px solid var(--hair);
}
/* With a photograph the band splits: copy left, picture right — the same
   hero split the design uses on the recipe pages (screen 05). */
.result-band.has-photo {
  display: flex;
  gap: 44px;
  align-items: center;
  flex-wrap: wrap;
}
.result-band-copy { flex: 1 1 460px; min-width: 0; }
.result-photo {
  flex: 0 1 380px;
  margin: 0;
  min-width: 0;
}
.result-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--sand);
}
.result-photo figcaption {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted-2);
  margin-top: 8px;
}
.result-badges { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(51, 48, 44, .08);
  color: var(--ink-soft);
}
.badge-clear { background: #0c7a44; color: #fff; }
.badge-warn { background: #FBEEDC; color: #85551A; }
.badge-bad { background: #FBE9EC; color: #8C2338; }
.result-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.04;
  margin: 0 0 12px;
  max-width: 22ch;
}
.result-summary {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}

.result-body { padding: 36px var(--pad-x) 20px; }

.result-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.pill {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(51, 48, 44, .2);
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  transition: border-color .14s, color .14s;
}
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.pill-rose { background: var(--rose); border-color: var(--rose); color: #fff; }
.pill-rose:hover { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; }
.pill-spacer { flex: 1; }

/* The compare pair. */
.compare { display: flex; gap: 26px; align-items: flex-start; }
.compare-col {
  flex: 1 1 0;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--hair-card);
  border-radius: 20px;
  padding: 26px;
}
.compare-col.is-adapted { border-color: var(--rose-mid); }
.compare-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.compare-col.is-adapted .compare-label { color: var(--rose-dark); }

.ing { display: flex; flex-direction: column; }
.ing-row {
  padding: 11px 0;
  border-top: 1px solid var(--hair-soft);
  font-size: 15.5px;
  line-height: 1.5;
}
.ing-row.is-dropped { color: var(--muted-3); text-decoration: line-through; }
/* A changed row is tinted and bleeds into the card's padding, as drawn. */
.ing-row.is-changed {
  padding: 11px 12px;
  margin: 0 -12px;
  background: var(--rose-pale);
  border-radius: 8px;
}
.ing-row.is-changed strong { font-weight: 700; }
.ing-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

.compare-source {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hair-soft);
  font-size: 12.5px;
  color: var(--muted-2);
  line-height: 1.55;
}
.compare-source a { text-decoration: underline; text-underline-offset: 2px; }

/* Method changes + summary. */
.result-lower { margin-top: 30px; display: flex; gap: 26px; align-items: flex-start; }
.method-panel {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 26px;
  background: var(--blue-pale);
  border-radius: 18px;
}
.method-panel .field-label { color: var(--muted); margin-bottom: 14px; }
.method-list { display: flex; flex-direction: column; gap: 14px; }
.method-item { display: flex; gap: 14px; align-items: flex-start; }
.method-step {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue-mid);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.method-step.is-general { font-size: 15px; }
.method-text { font-size: 15.5px; line-height: 1.6; }
.method-text strong { font-weight: 700; }

.result-side { flex: 0 0 320px; display: flex; flex-direction: column; gap: 14px; }
.swaps-card {
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--hair-card);
  border-radius: 18px;
}
.swaps-count { font-family: var(--serif); font-size: 26px; margin: 0 0 8px; }
.swaps-note { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.result-disclaimer {
  padding: 18px 20px;
  background: var(--sand);
  border-radius: 16px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Safety callouts — kept above the recipe, as they were. */
.callout { border-radius: 16px; padding: 20px 22px; margin-bottom: 22px; }
.callout h2 {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 600;
}
.callout ul { margin: 0; padding-left: 20px; }
.callout li { font-size: 15px; line-height: 1.62; margin-bottom: 7px; }
.callout li:last-child { margin-bottom: 0; }
.callout p { margin: 0; font-size: 15px; line-height: 1.62; }
.callout-alarm { background: #FBE9EC; border: 1px solid #E9C4CD; }
.callout-alarm h2 { color: #8C2338; }
.callout-watch { background: #FBEEDC; border: 1px solid #EBD5B4; }
.callout-watch h2 { color: #85551A; }

.method-full { margin-top: 34px; }
.method-full h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0 0 8px; }
.method-full .field-label { margin: 0 0 26px; }
.adapt-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 24px; }
.adapt-steps li { counter-increment: step; display: flex; gap: 18px; }
.adapt-steps li::before {
  content: counter(step);
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--rose-pale);
  color: var(--rose-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.adapt-steps li.is-heading { counter-increment: none; }
.adapt-steps li.is-heading::before { content: none; }
.adapt-steps li.is-heading span {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.step-text { font-size: 16.5px; line-height: 1.68; margin: 0; }

.result-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 40px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--hair);
}
.share-state { font-size: 14px; color: var(--muted-2); }

/* ------------------------------------------------------------ 06 · Community */
.community-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.filter-count { color: inherit; opacity: .55; margin-left: 2px; }

.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 30px;
}
.community-card { display: block; color: inherit; }
.community-card:hover { color: inherit; }
.community-card-media {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: var(--rose-pale);
  margin-bottom: 14px;
  overflow: hidden;
}
.community-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.community-card:hover .community-card-media img { transform: scale(1.03); }
/* The design tints empty cards through a four-colour rotation. */
.community-card:nth-child(4n+2) .community-card-media { background: var(--green-pale); }
.community-card:nth-child(4n+3) .community-card-media { background: var(--blue-pale); }
.community-card:nth-child(4n+4) .community-card-media { background: var(--sand); }

.adapt-tag-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.adapt-tag {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-pale);
  color: #0c7a44;
}
.community-card-title {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 7px;
}
.community-card:hover .community-card-title { color: var(--rose); }
.community-card-blurb { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }

.empty-state { max-width: 560px; padding: 20px 0 60px; color: var(--muted); font-size: 16px; line-height: 1.65; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .community-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .adapt-body { flex-direction: column; gap: 30px; }
  .adapt-aside { position: static; flex: 1 1 auto; width: 100%; }
  .compare { flex-direction: column; }
  .result-lower { flex-direction: column; }
  .result-side { flex: 1 1 auto; width: 100%; }
  .generating { flex-direction: column; gap: 34px; }
  .gen-copy { flex: 1 1 auto; }
  .gen-skeleton { width: 100%; }
}
@media (max-width: 760px) {
  .adapt-head { padding: 34px var(--pad-x) 22px; }
  .adapt-head h1 { font-size: 38px; }
  .adapt-body { padding: 30px var(--pad-x) 44px; }
  .adapt-card, .compare-col { padding: 20px; border-radius: 16px; }
  .result-title { font-size: 34px; }
  .result-band.has-photo { gap: 24px; }
  .result-photo { flex: 1 1 100%; }
  .gen-title { font-size: 32px; }
  .community-grid { grid-template-columns: 1fr; }
  .generating { padding: 48px var(--pad-x) 60px; }
}

@media print {
  .qc-switch, .site-header, .site-footer,
  .adapt-card, .adapt-aside, .result-actions, .result-footer, .generating { display: none !important; }
  .result-band { background: none; border-bottom: 1px solid #ddd; }
  .callout, .result-disclaimer, .method-panel { break-inside: avoid; }
  .compare { display: block; }
}

/* ---------------------------------------------- adaptor notes on a recipe
   A published adaptation renders as an ordinary recipe page. Everything the
   adaptor has to *say* about it lives here, above the recipe and folded away,
   so the page opens on the thing you came to cook. The one exception is the
   "couldn't adapt this fully" callout, which is never collapsible. */

.adapt-notes {
  padding: 0 var(--pad-x);
  max-width: 900px;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note {
  background: var(--paper);
  border: 1px solid var(--hair-card);
  border-radius: 16px;
  overflow: hidden;
}
.note > summary {
  padding: 15px 20px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .12s;
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary::after {
  content: '＋';
  margin-left: auto;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1;
}
.note[open] > summary::after { content: '−'; }
.note > summary:hover { background: var(--cream); }
.note[open] > summary { border-bottom: 1px solid var(--hair-soft); }

.note > *:not(summary) { padding: 0 20px; }
.note > ul { margin: 16px 0; padding-left: 40px; }
.note li { font-size: 14.5px; line-height: 1.62; margin-bottom: 7px; }
.note li:last-child { margin-bottom: 0; }
.note > :last-child { padding-bottom: 18px; }

.note-watch { background: #FBEEDC; border-color: #EBD5B4; }
.note-watch > summary { color: #85551A; }
.note-watch > summary:hover { background: #F7E6CC; }

/* Swaps inside the "what changed" note. */
.note-swaps { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.note-swap-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 5px;
  font-size: 15px;
}
.note-swap-from { color: var(--muted-3); text-decoration: line-through; }
.note-swap-arrow { color: var(--rose); }
.note-swap-ratio {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
  background: var(--cream);
  border-radius: 999px;
  padding: 3px 9px;
}
.note-swap-why { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.note-swap-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 6px 0 0;
  padding-left: 11px;
  border-left: 2px solid var(--rose-pale);
}

.note-method { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hair-soft); }
.note-method h3 {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 12px;
  font-weight: 600;
}
.note-method-item { font-size: 14.5px; line-height: 1.62; margin: 0 0 10px; }
.note-method-step {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--blue-mid);
  border-radius: 999px;
  padding: 3px 9px;
  margin-right: 8px;
}
.note-expect {
  font-size: 14px;
  line-height: 1.62;
  color: var(--muted);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hair-soft);
}

.note-original { margin: 16px 0; padding-left: 20px; }
.note-original li { color: var(--muted); }
.note-source { font-size: 12.5px; line-height: 1.55; color: var(--muted-2); margin: 12px 0 0; }
.note-source a { text-decoration: underline; text-underline-offset: 2px; }

/* The standing notice, at the foot of the ingredients where it's read. */
.ingredients-safety {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--hair-soft);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-2);
}

/* Adaptations saved before the adaptor returned structured quantities —
   readable, just not scalable, so they get no checkbox affordance. */
.ingredient-list.is-plain li {
  padding: 11px 0;
  border-top: 1px solid var(--hair-soft);
  font-size: 15.5px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .adapt-notes { max-width: none; }
}

@media print {
  .adapt-notes .note { border-color: #ddd; }
  .note[open] > summary::after, .note > summary::after { content: ''; }
  /* Print everything, folded or not — paper has no disclosure triangles. */
  .note > *:not(summary) { display: block !important; }
}

/* A button that reads as a link — used for "remove it" inside a sentence,
   where a pill would shout louder than the action deserves. */
.link-button {
  font: inherit;
  color: var(--rose-dark);
  border-bottom: 1px solid var(--rose);
  cursor: pointer;
  padding: 0;
}
.link-button:hover { color: var(--ink); border-bottom-color: var(--ink); }
.link-button:disabled { color: var(--muted-3); border-bottom-color: var(--muted-3); cursor: default; }

.disclaimer p { margin: 0 0 10px; }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer a { text-decoration: underline; text-underline-offset: 2px; }