/* ==========================================================================
   Molecules by Class: the information card
   Loaded AFTER assets/styles.css, which it overrides rather than forks.

   src/build.mjs renders each molecule as `.pl-row.mol`. It keeps the `.pl-row`
   class because assets/app.js selects rows with it and Load more moves focus
   to `.pl-name` inside it: rename either and filtering or keyboard focus
   breaks silently. Everything `.pl-row` styles for a product row (fixed
   179px height, pack-shot column, absolutely positioned price and CTA) is
   undone here for `.mol`, so the two never fight: styles.css draws a product,
   this file draws a fact sheet.

   Every value is a token from tokens.css. No raw colours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The card
   -------------------------------------------------------------------------- */
:where(body.cls-body) .pl-list{ gap:16px; }

:where(body.cls-body) .pl-row.mol{
  /* height:179px on .pl-row is the product row's fixed tile. An information
     card is as tall as its copy, so the height is released -- and no floor is
     set, because the footer strip gives every card the same visual base
     whatever its copy length. */
  height:auto;
  padding:0;
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--pe-border-light);
  box-shadow:var(--pe-shadow-card);
  transition:box-shadow .15s ease, border-color .15s ease;
}
:where(body.cls-body) .pl-row.mol:hover{
  border-color:var(--pe-border);
  box-shadow:var(--pe-shadow-md);
}

:where(body.cls-body) .mol__body{
  flex:1 1 auto; min-width:0;
  padding:20px 24px;
  display:flex; flex-direction:column;
  /* stretch, not flex-start. With flex-start each row is sized to fit-content,
     and a nested wrapping flex container (the chips) resolves that to an
     unpredictable intermediate width, which dropped the "Commonly used for" label onto
     its own line on some cards and not others. */
  align-items:stretch;
}

/* --------------------------------------------------------------------------
   2. Name + Rx flag
   The flag is the card's one piece of hard regulatory information, so it sits
   on the same baseline as the name rather than in the meta line below it.
   Only prescription molecules carry one.
   -------------------------------------------------------------------------- */
:where(body.cls-body) .mol__head{
  margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
:where(body.cls-body) .pl-name.mol__name{
  /* the product row clips its name to one line at 425px; a molecule name is
     short and must never be truncated, it is the thing being identified. */
  margin:0; max-width:none; white-space:normal; overflow:visible;
  font:700 21px/28px var(--pe-font); color:var(--pe-text);
  letter-spacing:-.01em;
}
:where(body.cls-body) .mol__name a{ color:inherit; text-decoration:none; }
/* hovering anywhere on the card underlines the name, so the whole row reads as
   one target even though only the name and the button are links. Making the
   card itself a stretched link would block selecting the description, which on
   a page whose job is to be read is the wrong trade. */
:where(body.cls-body) .mol__name a:hover,
:where(body.cls-body) .pl-row.mol:hover .mol__name a{ text-decoration:underline; }

/* One state, so one class. There is no "No Rx needed" counterpart: an absent
   badge means the molecule is over the counter, which is the convention the
   product rows in medicines-by-class already use, and it keeps the badge
   meaning "stop, you need a prescription" rather than being decoration every
   card wears. The Prescription filter still narrows to either group, it
   reads data-rx on the row, not the badge. */
:where(body.cls-body) .mol__flag{
  display:inline-flex; align-items:center;
  height:24px; padding:0 9px; box-sizing:border-box;
  border-radius:var(--pe-r-8);
  font:700 12px/24px var(--pe-font);
  letter-spacing:.02em; white-space:nowrap;
  /* tokens.css has --pe-amber-bg but no amber dark enough to sit on it at 12px
     and clear 4.5:1. This is that missing step, declared once here rather than
     inlined at each use; move it into tokens.css if a second component wants it. */
  --mol-rx-ink:#8A5A00;
  background:var(--pe-amber-bg); color:var(--mol-rx-ink);
}

/* --------------------------------------------------------------------------
   3. Meta line: sub-family, then the forms it is sold in

   The sub-family is a facet in the filter card, so it is drawn as something
   facet-shaped rather than as another grey line: a sunken pill, deliberately
   neutral so it does not compete with the teal "used for" chips below. The
   forms sit beside it as plain text, because they are context, not a filter.
   -------------------------------------------------------------------------- */
:where(body.cls-body) .mol__meta{
  margin:8px 0 0; display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
:where(body.cls-body) .mol__fam{
  display:inline-flex; align-items:center;
  height:24px; padding:0 10px; box-sizing:border-box;
  background:var(--pe-surface-sunken); border-radius:var(--pe-r-8);
  font:600 12px/24px var(--pe-font); color:var(--pe-text-secondary);
  white-space:nowrap;
}
:where(body.cls-body) .mol__forms{
  min-width:0;
  font:400 13px/20px var(--pe-font); color:var(--pe-text-muted);
}
/* a middot between the pill and the forms, drawn rather than typed so it never
   ends up in a copied selection or read out by a screen reader */
:where(body.cls-body) .mol__forms::before{
  content:""; display:inline-block; vertical-align:middle;
  width:3px; height:3px; margin:0 8px 2px 0; border-radius:50%;
  background:var(--pe-border);
}

/* --------------------------------------------------------------------------
   4. Description and uses
   -------------------------------------------------------------------------- */
:where(body.cls-body) .mol__desc{
  /* the cap is a reading-length limit, not a layout one: without the side rail
     the card is wide enough that an uncapped paragraph would run past a
     comfortable measure on a large screen. */
  margin:12px 0 0; max-width:78ch;
  font:400 15px/24px var(--pe-font); color:var(--pe-text-secondary);
}
:where(body.cls-body) .mol__desc strong{ font-weight:600; color:var(--pe-text); }

/* The label stays above the chips rather than inline with them. Inline, it
   fits beside two or three chips and drops to its own line at four, so the
   same block renders two different ways down one page. Stacked it costs a
   16px row and is identical on every card.

   The chips stay a real <ul>: on a health page "list of 4 items" is worth
   more to a screen reader than the row this would save. */
:where(body.cls-body) .mol__uses{ margin-top:auto; padding-top:14px; }
:where(body.cls-body) .mol__uses-h{
  display:block; margin:0 0 7px;
  font:600 11px/16px var(--pe-font);
  letter-spacing:.06em; text-transform:uppercase; color:var(--pe-text-muted);
}
:where(body.cls-body) .mol__chips{
  margin:0; padding:0; list-style:none; min-width:0;
  display:flex; flex-wrap:wrap; gap:4px 22px;
}
/* Unfilled. Four teal pills in a row read as four buttons, and on a card whose
   only real control is the footer link that is a lie the eye has to undo. The
   words are the content, so they are set as words: body-copy grey, no chrome,
   spaced by the gap rather than by padding so the first one aligns flush with
   the COMMONLY USED FOR label above it. */
:where(body.cls-body) .mol__chip{
  display:inline-flex; align-items:center;
  height:26px; box-sizing:border-box;
  font:500 13px/26px var(--pe-font); color:var(--pe-text-secondary);
}

/* --------------------------------------------------------------------------
   5. Brands footer
   A hairline, not a filled band: the count and the link are a footnote to the
   molecule, and a coloured strip here would read as a price bar.

   `margin-left:auto` on the button rather than `justify-content:space-between`
   because the count is optional (there is none when the catalogue join found
   nothing), and space-between would swing a lone button to the left edge on
   exactly those cards.
   -------------------------------------------------------------------------- */
:where(body.cls-body) .mol__foot{
  box-sizing:border-box;
  /* 8px + a 36px button + 8px + the rule = a 53px strip. Below the side-rail
     layout this replaced, a footer is pure added height on a short card, so
     every pixel here is one the rail did not cost. */
  padding:8px 24px;
  border-top:1px solid var(--pe-border-light);
  display:flex; align-items:center; gap:16px;
}
:where(body.cls-body) .mol__count{
  margin:0; font:400 14px/20px var(--pe-font); color:var(--pe-text-tertiary);
}
:where(body.cls-body) .mol__count b{ font-weight:700; color:var(--pe-text); }
:where(body.cls-body) .mol__count-sub{ color:var(--pe-text-muted); }

:where(body.cls-body) .mol__cta{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 16px; box-sizing:border-box;
  border:1.5px solid var(--pe-teal-dark); border-radius:var(--pe-r-8);
  background:var(--pe-white); color:var(--pe-teal-dark);
  font:700 14px/1 var(--pe-font); text-decoration:none; white-space:nowrap;
  transition:background .15s ease;
}
:where(body.cls-body) .mol__cta:hover,
:where(body.cls-body) .pl-row.mol:hover .mol__cta{ background:#F4FBFA; }
:where(body.cls-body) .mol__cta-chev{
  flex:none; transition:transform .15s ease;
}
:where(body.cls-body) .mol__cta:hover .mol__cta-chev,
:where(body.cls-body) .pl-row.mol:hover .mol__cta-chev{ transform:translateX(2px); }

/* --------------------------------------------------------------------------
   6. Mobile
   styles.css turns .pl-list into a two-up grid of 344px product tiles under
   767px. An information card cannot survive half a phone width, so the grid
   goes back to a single column. The card itself needs no restructuring here --
   body over footer is already the desktop shape -- only smaller type and
   tighter padding.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  :where(body.cls-body) .pl-list{
    display:flex; flex-direction:column; gap:8px;
    background:var(--pe-surface-sunken); padding:8px; margin:0;
  }
  :where(body.cls-body) .pl-row.mol{
    width:auto; height:auto; padding:0;
    border-radius:var(--pe-r-12); box-shadow:var(--pe-shadow-card);
  }
  :where(body.cls-body) .mol__body{ padding:16px; }
  :where(body.cls-body) .mol__head{ gap:8px; }
  :where(body.cls-body) .pl-name.mol__name{
    /* undo the product tile's 2-line clamp and 12px type */
    margin:0; min-height:0; display:block; -webkit-line-clamp:none;
    font:700 18px/24px var(--pe-font); color:var(--pe-text);
  }
  :where(body.cls-body) .mol__meta{ margin:6px 0 0; gap:6px; }
  :where(body.cls-body) .mol__fam{ height:22px; padding:0 8px; font:600 11px/22px var(--pe-font); }
  :where(body.cls-body) .mol__forms{ font-size:12px; }
  :where(body.cls-body) .mol__forms::before{ margin-right:6px; }
  :where(body.cls-body) .mol__desc{ margin:10px 0 0; font-size:14px; line-height:22px; }
  :where(body.cls-body) .mol__uses{ padding-top:12px; }
  :where(body.cls-body) .mol__chips{ gap:2px 18px; }
  :where(body.cls-body) .mol__chip{ height:24px; font-size:12px; line-height:24px; }

  /* the footer is already the right shape; it only needs to get smaller, and
     to survive a long count sitting next to a long button on a 360px screen */
  :where(body.cls-body) .mol__foot{ padding:10px 16px; gap:10px; }
  /* The left half goes entirely on a phone. The button already says
     "View 843 medicines", and repeating "843 brands" beside it puts the same
     number twice in one 343px row. On desktop both earn their place, because
     "843 brands on PharmEasy" states the fact and the button says what the
     click leads to; at this width the button alone does both. */
  :where(body.cls-body) .mol__count{ display:none; }
  :where(body.cls-body) .mol__cta{
    height:34px; padding:0 14px;
    font:700 13px/1 var(--pe-font);
  }
}

/* --------------------------------------------------------------------------
   7. Print: the footer's button is dead ink on paper, and a card split
      across a page break loses the divider that ties it together
   -------------------------------------------------------------------------- */
@media print{
  :where(body.cls-body) .pl-row.mol{ break-inside:avoid; box-shadow:none; }
  :where(body.cls-body) .mol__cta{ display:none; }
}

/* --------------------------------------------------------------------------
   8. Class card description (directory page, not a class page)

   styles.css has no rule for this: medicines-by-class ships its class cards
   with a name and a count and nothing between them. Here the name alone is
   often not enough, because a molecule class is named after its chemistry
   rather than its use. "Nitroimidazole Antimicrobials" and "Angiotensin
   Receptor Blockers" mean nothing to someone looking for something for loose
   motions or blood pressure, and the description is the only place that
   connects the two.

   Clamped to two lines, which is where the longest of the 65 lands, so the
   cards in a row stay the same height.
   -------------------------------------------------------------------------- */
:where(body:not(.cls-body)) .cc{
  /* styles.css fixes the card at 146px, which is exactly the chip, the name,
     the rule and the count with nothing between them. The description was not
     being clamped to two lines, it was being crushed to one: clientHeight 20
     against a scrollHeight of 38. 186px is the same card plus two 19px lines
     and the 6px above them. Still a fixed height, so every card in the grid
     lines up whatever its description runs to. */
  height:186px;
}
:where(body:not(.cls-body)) .cc__d{
  margin-top:6px;
  font:400 13px/19px var(--pe-font); color:var(--pe-text-tertiary);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* the rule below it can now sit tighter: the description already separates
   the name from the count */
:where(body:not(.cls-body)) .cc__d + .cc__rule{ margin-top:10px; }

@media (max-width:767px){
  /* mobile fixes the card at 115px, same squeeze. Two 17px lines plus the 4px
     above them is 38px more. */
  :where(body:not(.cls-body)) .cc{ height:153px; }
  :where(body:not(.cls-body)) .cc__d{ margin-top:4px; font-size:12px; line-height:17px; }
}