/* Medication options (/resources/medication-options), in the same reading room as the other guides
   (guide.css + guide-reader.js): one chapter at a time, "Read this first" taped at the top.
   Page pieces:
   - "Jump to a concern" is a row of paper tags hanging from a string;
   - each medication family is an index card; its approval status is a rubber stamp and its facts
     sit on ruled lines like a pharmacy label;
   - benefits and downsides are two cards side by side (a tick and a dash mark each line);
   - the trial record is a lined notepad with room to write;
   - "call the prescriber" and "get emergency help" are an amber note and a brick-red card;
   - the questions for the prescriber are a dusk card, as on the other guides.
   No drawn pictures. Motion respects prefers-reduced-motion. */

.p-med .medication-guide .medication-section,
.p-med .guide-sections > .medication-section { margin-block: 0; }
.p-med .guide-content { font-size: inherit; }

/* ---------- Jump to a concern: tags on a string ---------- */
.p-med .mg-concerns { margin: 4px 0 30px; text-align: center; }
.p-med .mg-concerns > h2 { margin: 0 0 4px; font: 400 clamp(26px, 2.6vw, 30px)/1.1 var(--f-hand); color: var(--gold-dark); letter-spacing: 0; }
.p-med .mg-concerns .medication-concerns {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 12px; padding: 18px 4px 6px;
  background: repeating-linear-gradient(180deg, rgba(122, 91, 19, .5) 0 2px, transparent 2px 80px);
}
.p-med .mg-concerns .medication-concerns a {
  --tilt: -2deg;
  position: relative; display: inline-flex; align-items: center; min-height: 50px; padding: 10px 18px 10px 30px;
  border-radius: 6px 14px 14px 6px; background: var(--paper);
  box-shadow: 0 12px 16px -12px rgba(60, 40, 10, .7), inset 0 0 0 1px rgba(122, 91, 19, .14);
  font: 600 16px/1.2 var(--f-display); color: var(--navy); text-decoration: none;
  rotate: var(--tilt); transform-origin: 50% -16px; transition: rotate .4s var(--spring), background-color .2s var(--ease);
}
.p-med .mg-concerns .medication-concerns a:nth-child(2n) { --tilt: 2deg; }
.p-med .mg-concerns .medication-concerns a:nth-child(3n) { --tilt: -1deg; }
.p-med .mg-concerns .medication-concerns a::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 16px; background: rgba(122, 91, 19, .5); }
.p-med .mg-concerns .medication-concerns a::after {
  content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--cream); box-shadow: inset 0 1px 2px rgba(60, 40, 10, .35);
}
.p-med .mg-concerns .medication-concerns a:hover { background: var(--gold-soft); rotate: 0deg; color: var(--navy); }

/* ---------- Read this first: the taped note always showing above the chapters ---------- */
.p-med .guide-sections > .mg-first { margin: 10px 0 18px; }
.p-med .mg-first > h2 { margin: 0 0 8px; padding: 0; font: 400 clamp(27px, 2.8vw, 32px)/1.1 var(--f-hand); color: var(--blue-ink); letter-spacing: 0; }
.p-med .mg-first > h2::before { display: none; }
.p-med .mg-first p { font-size: 16.5px; line-height: 1.65; }

/* ---------- medication cards: index cards with a rubber stamp ---------- */
.p-med .medication-card {
  --c: var(--gold);
  position: relative; margin: 22px 0; padding: 24px 22px 0; border: 1px solid #ecdfc2; border-radius: 4px 4px 16px 4px; background: #fff;
  box-shadow: 0 1px 0 #efe4cb, 0 16px 26px -20px rgba(60, 40, 10, .55);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: start;
}
.p-med .medication-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 7px; border-radius: 4px 4px 0 0; background: var(--c); }
.p-med .medication-card:nth-of-type(4n+2) { --c: var(--blue); }
.p-med .medication-card:nth-of-type(4n+3) { --c: var(--sage); }
.p-med .medication-card:nth-of-type(4n+4) { --c: var(--brick); }
.p-med .medication-card > h3 { grid-column: 1; margin: 0; padding: 0 0 10px; font-size: clamp(19px, 2vw, 21px); line-height: 1.3; color: var(--navy); }
.p-med .medication-card > h3::after { display: none; }
.p-med .medication-card > .pill { /* the approval stamp */
  grid-column: 2; grid-row: 1; align-self: start;
  padding: 5px 10px 4px; border: 2px solid currentColor; border-radius: 5px; background: transparent;
  font: 800 11.5px/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; rotate: 3deg; white-space: nowrap;
  color: var(--sage-ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.p-med .medication-card > .pill.mg-off { color: var(--brick-ink); rotate: -3deg; }
.p-med .medication-card > .pill:where(:not(:empty)) { max-width: 13em; white-space: normal; text-align: center; }
.p-med .medication-card:has(> .pill) > h3 { padding-right: 0; }
.p-med .medication-card dl {
  grid-column: 1 / -1; margin: 0; padding: 10px 0; border-top: 2px solid rgba(169, 84, 47, .3);
  display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 4px 16px;
}
.p-med .medication-card > h3 + .pill + dl, .p-med .medication-card > h3 + dl { border-top-width: 2px; }
.p-med .medication-card dl + dl { border-top: 1px dotted #d9c9a2; }
.p-med .medication-card dt { margin: 0; font: 800 12px/1.5 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.p-med .medication-card dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.p-med .medication-card dl:last-child { margin: 0 -22px; padding: 12px 22px 14px; background: #fbf3de; border-top: 2px dashed #e2d3ae; border-radius: 0 0 16px 4px; }
.p-med .medication-card dl:last-child dt { color: var(--gold-dark); }

/* ---------- benefits and downsides ---------- */
.p-med .medication-tradeoffs { gap: 20px; margin: 16px 0 20px; }
.p-med .medication-tradeoffs > .content-card { position: relative; margin: 0; padding: 24px 22px 18px; border: 1px solid #ecdfc2; border-radius: 6px; background: #fff; box-shadow: 0 16px 26px -20px rgba(60, 40, 10, .55); }
.p-med .medication-tradeoffs > .content-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 7px; border-radius: 6px 6px 0 0; background: var(--sage); }
.p-med .medication-tradeoffs > .mg-minus::before { background: var(--brick); }
.p-med .medication-tradeoffs h3 { margin: 0 0 10px; padding: 0; font: 400 26px/1.1 var(--f-hand); color: var(--sage-ink); letter-spacing: 0; }
.p-med .medication-tradeoffs .mg-minus h3 { color: var(--brick-ink); }
.p-med .medication-tradeoffs h3::after { display: none; }
.p-med .guide-sections .medication-tradeoffs ul:not([class]) > li { font-size: 16px; padding-left: 30px; }
.p-med .guide-sections .medication-tradeoffs .mg-plus ul:not([class]) > li::before { content: "\2713"; background: none; box-shadow: none; width: auto; height: auto; left: 2px; top: 0; font: 700 17px/1.6 var(--f-display); color: var(--sage-ink); }
.p-med .guide-sections .medication-tradeoffs .mg-minus ul:not([class]) > li::before { content: "\2013"; background: none; box-shadow: none; width: auto; height: auto; left: 3px; top: 0; font: 700 17px/1.6 var(--f-display); color: var(--brick-ink); }

/* ---------- the trial record: a lined notepad to write on ---------- */
.p-med .medication-guide .blank-tracker,
.p-med .blank-tracker {
  position: relative; list-style: none; margin: 16px 0 18px; padding: 26px 20px 8px 58px;
  background: #fffdf5; border: 1px solid #ecdfc2; border-radius: 6px; box-shadow: 0 16px 24px -20px rgba(60, 40, 10, .5);
  background-image: linear-gradient(90deg, transparent 44px, rgba(169, 84, 47, .38) 44px 46px, transparent 46px);
}
.p-med .blank-tracker::before { /* the spiral holes along the top */
  content: ""; position: absolute; left: 20px; right: 20px; top: 8px; height: 10px;
  background: radial-gradient(circle, var(--cream) 0 4px, transparent 4.5px) 0 0 / 26px 10px repeat-x;
}
.p-med .guide-sections .blank-tracker > li {
  position: relative; margin: 0; padding: 10px 0 30px; border-bottom: 1px solid #c9d6e6;
  font: 600 16px/1.4 var(--f-display); color: var(--navy);
}
.p-med .guide-sections .blank-tracker > li::before { content: none; }
.p-med .blank-tracker > li:last-child { border-bottom: 0; }

/* ---------- when to call ---------- */
.p-med .mg-call, .p-med .mg-urgent { position: relative; margin: 26px 0 20px; padding: 30px clamp(18px, 3vw, 28px) 20px; border: 0; border-radius: 6px; box-shadow: 0 1px 1px rgba(60, 40, 10, .06), 0 20px 30px -22px rgba(60, 40, 10, .55); }
.p-med .mg-call { background: linear-gradient(180deg, #fff9e8, #fdf1d3); rotate: -.3deg; }
.p-med .mg-call::before { content: ""; position: absolute; top: -11px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--gold) 34%, #a8791f 100%); box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35); }
.p-med .mg-urgent { background: var(--brick-soft); box-shadow: inset 8px 0 0 var(--brick), 0 20px 30px -22px rgba(60, 40, 10, .55); padding-left: clamp(26px, 3.4vw, 36px); }
.p-med .mg-call h3, .p-med .mg-urgent h3 { margin: 0 0 8px; padding: 0; font: 400 clamp(25px, 2.6vw, 28px)/1.1 var(--f-hand); letter-spacing: 0; color: var(--gold-dark); }
.p-med .mg-urgent h3 { color: var(--brick-ink); }
.p-med .mg-call h3::after, .p-med .mg-urgent h3::after { display: none; }
.p-med .mg-call p, .p-med .mg-urgent p { font-size: 16.5px; line-height: 1.65; margin: 0; }
.p-med .mg-urgent strong { color: var(--brick-ink); white-space: nowrap; }

/* ---------- questions for the prescriber: a dusk card ---------- */
.p-med .mg-dusk {
  position: relative; overflow: hidden; margin: 14px 0 6px; padding: clamp(24px, 4vw, 36px); border-radius: 26px; color: #efe9da;
  background:
    radial-gradient(1.5px 1.5px at 9% 10%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 38% 5%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 66% 12%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 94% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(620px 300px at 88% 0%, rgba(247, 206, 120, .16), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: var(--shadow-lift);
}
.p-med .guide-sections .mg-dusk ol { list-style: none; counter-reset: mg-q; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.p-med .guide-sections .mg-dusk ol > li {
  counter-increment: mg-q; position: relative; margin: 0; padding: 14px 14px 14px 56px; border-radius: 14px;
  background: rgba(255, 252, 245, .07); box-shadow: inset 0 0 0 1px rgba(239, 233, 218, .14); color: #efe9da; font-size: 16.5px; line-height: 1.55;
}
.p-med .guide-sections .mg-dusk ol > li::before {
  content: counter(mg-q); position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: #f3d78e; color: var(--navy); font: 600 15px/1 var(--f-display); box-shadow: none;
}
.p-med .guide-sections .mg-dusk ol > li::after { content: none; }
.p-med .mg-dusk .btn { background: var(--gold); color: var(--navy); border-color: var(--gold); }

.p-med #medication-feedback:empty { display: none; }
.p-med #medication-feedback { margin: 14px 0 0; font: 400 21px/1.2 var(--f-hand); color: var(--sage-ink); }

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .p-med .medication-card { padding: 22px 16px 10px; grid-template-columns: 1fr; }
  .p-med .medication-card > .pill { grid-column: 1; grid-row: auto; justify-self: start; margin: 0 0 10px; rotate: -2deg; }
  .p-med .medication-card dl { grid-template-columns: 1fr; gap: 2px; }
  .p-med .medication-card dl:last-child { margin: 0 -16px; padding-inline: 16px; }
  .p-med .blank-tracker { padding-left: 50px; background-image: linear-gradient(90deg, transparent 38px, rgba(169, 84, 47, .38) 38px 40px, transparent 40px); }
  .p-med .mg-concerns .medication-concerns a { font-size: 15px; }
}
@media print {
  .p-med .medication-card, .p-med .medication-tradeoffs > .content-card, .p-med .mg-call, .p-med .mg-urgent { box-shadow: none; border: 1px solid #ccc; rotate: none; }
  .p-med .mg-dusk { background: #fff; color: #000; box-shadow: none; border: 1px solid #ccc; }
  .p-med .guide-sections .mg-dusk ol > li { color: #000; }
}
@media (max-width: 560px) {
  .p-med .mg-concerns .medication-concerns { background: none; gap: 10px 8px; padding-top: 4px; }
  .p-med .mg-concerns .medication-concerns a { min-height: 44px; padding: 8px 12px 8px 26px; font-size: 14.5px; rotate: 0deg; }
  .p-med .mg-concerns .medication-concerns a::before { display: none; }
  .p-med .mg-concerns .medication-concerns a::after { left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .p-med .mg-concerns .medication-concerns a { transition: none; }
}