/* Route headings receive focus for screen readers, without a control outline. */
#page-title[tabindex="-1"]:focus {
  outline: none;
}

/* About: a compact author profile followed by an expandable contributor list. */
.about-dialog{width:min(40rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:2rem;border-radius:1.5rem}
#about-detail{min-width:0;overflow-wrap:anywhere}
#about-title{margin:0;padding-right:2.75rem;font-size:1.65rem;line-height:1.3;letter-spacing:-.035em}
.about-profile{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:1.5rem;margin:1.5rem 0;padding:1.25rem;border:1px solid #d8e4df;border-radius:1rem;background:#f1f7f3}
.about-headshot{display:block;width:112px;height:132px;object-fit:cover;object-position:center;border-radius:.75rem;box-shadow:0 4px 16px #173c4314}
.about-bio{min-width:0}
.about-profile .overline{margin:0 0 .5rem;font-size:.75rem;font-weight:650;letter-spacing:.13em;color:#456d60}
.about-profile h3{font-size:1.65rem;line-height:1.3;margin:0 0 .5rem;color:var(--ink)}
.about-profile p:last-child{margin:0;font-size:.9375rem;line-height:1.65}
.about-intro p,.about-reviewers>p{font-size:1rem;line-height:1.75;margin:0;color:#4d6769}
.about-intro p+p{margin-top:1rem}
.about-reviewers{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.about-reviewers h3{font-size:1.2rem;line-height:1.4;letter-spacing:-.02em;margin:0 0 .625rem;color:var(--ink)}
.about-reviewers .about-reviewer-list{list-style:none;margin:1.125rem 0 0;padding:0}
.about-reviewer-list li{border-left:2px solid #abcdbf;padding:.125rem 0 .125rem 1rem;font-size:1rem;line-height:1.75}
.about-reviewer-list li+li{margin-top:.875rem}
.about-reviewer-list strong{font-weight:650;color:var(--ink)}
.about-affiliation{color:var(--muted)}
#about-detail>a,#about-detail p a{color:#17685b;text-underline-offset:3px}
@media(max-width:520px){
 .about-dialog{padding:1.25rem;border-radius:1.125rem}
 #about-title{font-size:1.4rem}
 .about-profile{grid-template-columns:76px minmax(0,1fr);gap:1rem;padding:1rem;margin:1.25rem 0}
 .about-headshot{width:76px;height:90px}
 .about-profile h3{font-size:1.3rem}
 .about-profile p:last-child{font-size:.875rem}
 .about-reviewers{margin-top:1.5rem;padding-top:1.25rem}
}

/* Medicine details must fit the dialog, including at enlarged text sizes. */
#product-detail,
#cost-detail,
#clinical-detail,
#sources-detail,
.detail-body > *,
.detail-columns > *,
.regimen-card > * {
  min-width: 0;
  max-width: 100%;
}

.detail-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-body :is(p, li, a, h2, h3, h4, h5, dt, dd),
.clinical-links a,
.clinical-heading h2,
.sources-dialog h2,
.source-line,
.image-source-note {
  overflow-wrap: anywhere;
}

.paediatric-dose-panel {
  margin-top: 0;
}

.paediatric-dose-panel > .eyebrow {
  display: block;
  margin: 0 0 6px;
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .06em;
  color: #587365;
}

.paediatric-dose-panel h3 {
  margin: 0 0 16px;
  font-size: 1.25rem;
  line-height: 1.35;
}

.paediatric-dose-panel table,
.dose-weight-details table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
}

.paediatric-dose-panel thead th,
.dose-weight-details thead th {
  background: transparent;
  font: 600 .875rem/1.5 'DM Sans', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.paediatric-dose-panel th,
.paediatric-dose-panel td,
.dose-weight-details th,
.dose-weight-details td {
  padding: 12px 8px;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.paediatric-dose-panel th:first-child {
  width: 38%;
}

.paediatric-dose-panel td {
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.paediatric-dose-panel .dosing-note {
  margin: 16px 0 0;
  font-size: .9375rem;
  line-height: 1.6;
}

.paediatric-dose-panel small {
  margin-top: 12px;
  font-size: .8125rem;
  line-height: 1.55;
}

.dose-weight-details tbody th {
  font-weight: 600;
}

.dose-cell-label {
  display: none;
}

/* Montelukast: distinguish the adult tablet from the two chewable strengths. */
.montelukast-preview{margin-top:16px;container-type:inline-size}
.montelukast-indications{display:flex;flex-wrap:wrap;gap:3px 14px;margin-bottom:7px;font-size:.75rem;line-height:1.5;color:#64766c}
.montelukast-indications>span{min-width:0}
.montelukast-indications strong{font-weight:600;color:#43584e}
.formulation-caption{margin:0 0 10px;font-size:.8125rem;font-weight:600;line-height:1.5;color:#587066}
.montelukast-preview ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.montelukast-preview li{display:grid;grid-template-columns:54px minmax(0,1fr) 46px;align-items:center;gap:8px;padding:9px 12px;border:1px solid #e0e7e1;border-radius:12px;background:linear-gradient(115deg,#f3f7f0,#f8f5fb)}
.montelukast-preview li>strong{font-size:1rem;font-weight:650;color:#325747;white-space:nowrap}
.montelukast-preview .montelukast-formulation-copy{min-width:0;font-size:.8125rem;line-height:1.45;color:#43584e}
.montelukast-tablet-photo{display:grid;place-items:center;justify-self:end;width:46px;height:44px;filter:drop-shadow(0 3px 2px #463e3824)}
.montelukast-tablet-photo svg{pointer-events:none;display:block;width:100%;height:100%;overflow:visible}
.montelukast-tablet-photo.tablet{width:40px;height:40px}
.montelukast-tablet-photo.chewable{width:42px;height:42px}
@container(max-width:250px){.montelukast-preview li{grid-template-columns:minmax(0,1fr) 38px;gap:3px 7px;padding:10px 9px}.montelukast-preview li>strong{grid-column:1;grid-row:1}.montelukast-preview .montelukast-formulation-copy{grid-column:1;grid-row:2}.montelukast-preview .montelukast-tablet-photo{grid-column:2;grid-row:1/span 2;width:36px;height:38px}}
.montelukast-preview small{display:block;font-size:.75rem;color:#64766c}
.formulation-dosing{margin:22px 0}
.formulation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.formulation-grid.single-formulation{grid-template-columns:minmax(0,1fr)}
.formulation-tile{min-width:0;padding:18px 16px;border:1px solid #d9e3df;border-radius:16px;background:linear-gradient(145deg,#fff 15%,#f2f5f0 65%,#f3eef7);box-shadow:0 5px 16px #31534306}
.formulation-tile-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.formulation-tile-top .montelukast-tablet-photo{width:52px;height:48px;flex:0 0 52px;justify-self:start}
.formulation-age{font-size:.8125rem;font-weight:600;line-height:1.4;color:#50685d;text-align:right}
.formulation-tile h5{margin:0 0 7px;color:#2d5645;font-size:1.875rem;line-height:1.2;font-weight:600;letter-spacing:-.04em}
.formulation-tile .formulation-name{margin:0 0 12px;font-size:.875rem;line-height:1.5;font-weight:600;color:#43564c}
.formulation-tile .formulation-dose{margin:0;font-size:.8125rem;line-height:1.5;color:#5a6b61}
.formulation-tile.age-match,.montelukast-preview li.age-match{border-color:#8caf9a;box-shadow:0 0 0 1px #8caf9a30}
.formulation-match{display:block;margin-top:12px;padding-top:10px;border-top:1px solid #d5e4d9;font-size:.75rem;line-height:1.5;color:#386249}
.formulation-dosing .formulation-note{margin:14px 0 0;font-size:.8125rem;line-height:1.6;color:#5a6b61}
@media(max-width:620px){.formulation-grid{grid-template-columns:minmax(0,1fr)}.formulation-tile{padding:16px}.formulation-tile-top{margin-bottom:10px}.formulation-tile .formulation-name{margin-bottom:7px}}

.quote-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-fields label,
.quote-fields input,
.cost-select-label,
.cost-select-label select {
  min-width: 0;
}

@media (max-width: 780px) {
  .detail-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .detail-body {
    padding: 22px 18px;
  }

  .detail-intro {
    margin-bottom: 18px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .paediatric-dose-panel {
    padding: 16px 14px;
    border-radius: 16px;
  }

  .paediatric-dose-panel th,
  .paediatric-dose-panel td {
    padding: 11px 5px;
  }

  /* Longer loading/maintenance regimens read vertically on a phone. */
  .dose-weight-details table,
  .dose-weight-details tbody {
    display: block;
  }

  .dose-weight-details thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .dose-weight-details tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #dce8df;
  }

  .dose-weight-details tbody tr:first-child {
    padding-top: 4px;
  }

  .dose-weight-details tbody th,
  .dose-weight-details tbody td {
    display: block;
    min-width: 0;
    width: auto;
    padding: 0;
    border: 0;
  }

  .dose-cell-label {
    display: block;
    margin-bottom: 3px;
    color: #587365;
    font-size: .875rem;
    font-weight: 500;
  }

  .dose-weight-details > p,
  .regimen-footnote {
    font-size: .875rem;
    line-height: 1.6;
  }

  .detail-cost {
    flex-wrap: wrap;
  }

  .detail-cost > *,
  .regimen-heading > * {
    min-width: 0;
    max-width: 100%;
  }

  .cost-select-label select,
  .quote-fields input {
    font-size: 1rem;
  }

  .quote-fields label,
  .cost-select-label {
    font-size: .875rem;
    line-height: 1.5;
  }
}