/* Screen-only layout corrections from cross-module visual QA.
   Size grids against the reading area, not the browser (which includes the sidebar). */
@media screen {
  #main { container-name: consultation; container-type: inline-size; }
  /* Keep home icons square in both grid cards and the mobile column layout. */
  #main .home-access-grid a.si-card .si-icon {
    --home-icon-size: 34px;
    --home-glyph-size: 22px;
    display: grid;
    place-items: center;
    width: var(--home-icon-size);
    height: var(--home-icon-size);
    min-width: var(--home-icon-size);
    max-width: var(--home-icon-size);
    min-height: var(--home-icon-size);
    max-height: var(--home-icon-size);
    flex: 0 0 var(--home-icon-size);
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    align-self: center;
    justify-self: start;
    line-height: 0;
  }
  #main .home-access-grid a.si-card .si-icon > svg {
    display: block;
    width: var(--home-glyph-size);
    height: var(--home-glyph-size);
    min-width: var(--home-glyph-size);
    min-height: var(--home-glyph-size);
    flex: none;
    aspect-ratio: 1;
    margin: 0;
  }
  #main :is(.si-featured,.wh-featured,.wh-grid,.ct-panels,.pv-grid,.pv-season-grid) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
  #main .si-featured .si-card, #main .wh-featured .wh-card { min-height: 0; padding: 20px; }
  #main .wh-card :is(h2,p), #main .si-card :is(h2,h3,p) { min-width: 0; word-break: normal; overflow-wrap: break-word; }
  #main .si-cards .resource-favorite > .si-card { padding-right: 58px; }
  #main .si-cards .resource-favorite .favorite-toggle { top: 50%; transform: translateY(-50%); right: 8px; width: 44px; height: 44px; }
  #main .flow-compact .card { min-height: 0; }
  #main .flow-compact .card-end { display: none; }
  #main .grouped-catalog .favorite-toggle { width: 44px; height: 44px; }
  #main .grouped-catalog .card { padding-right: 58px; }
  #main .ref-topic-grid { align-items: start; }
  #main .ref-topic-grid .ref-criterion-card { min-height: 0; }
  #main .guide-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  #main .guide-list .guide-condition-card { border-right: 0; }
  #main .guide-list .guide-condition-card > a { min-height: 54px; padding-right: 58px; box-sizing: border-box; }
  #main .guide-list .guide-condition-card .favorite-toggle { width: 44px; height: 44px; }
  #main .cv-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 4px; scrollbar-width: thin; }
  #main .cv-tabs a { flex: 1 0 auto; min-height: 44px; white-space: nowrap; padding: 10px 12px; font-size: .875rem; }
  #main .ph-directory-alphabet { display: flex; flex-wrap: wrap; gap: 5px; }
  #main .ph-directory-alphabet button { flex: 0 0 40px; min-height: 44px; }
  #main .ph-directory-alphabet button:first-child { flex-basis: auto; padding-inline: 12px; }
  #main :is(.clinical-section-nav,.wp-context-links,.ct-tabs) { max-width: 100%; }
  #main .clinical-section-nav button { min-height: 44px; }
  .wp-planner .wp-print-button { right: 190px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .wp-planner .wp-print-button:disabled { position: static; min-height: 44px; padding: 8px 12px; box-shadow: none; }
  body:has(dialog[open]) .floating-site-actions { visibility: hidden; }
  .bi-safety-frequency ul:has(> li:only-child) { columns: 1; }
  html[data-theme='dark'] #main :is(.pv-kicker,.si-eyebrow,.vc-eyebrow,.ref-kicker,.eyebrow,.step-label,.exercise-kicker) { color: #8bd5ca; }
  html[data-theme='dark'] :is(.exercise-detail-hint,.program-instructions,.exercise-dialog-meta) { color: #8bd5ca; }
  #main .pregnancy-date-range { flex-wrap: wrap; max-width: 100%; justify-content: inherit; }
  @container consultation (max-width: 680px) {
    #main .home-access-grid a.si-card { grid-template-columns: 28px minmax(0,1fr); }
    #main .home-access-grid a.si-card .si-icon { --home-icon-size: 28px; --home-glyph-size: 20px; }
    #main .guide-filters { grid-template-columns: minmax(0, 1fr); }
    #main .home-access-grid.home-featured { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #main .home-featured > a.si-card.home-primary:first-child { grid-column: 1/-1; }
    #main .home-featured > a:not(:first-child) p { display: none; }
    #main .home-access-grid.home-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #main .dose-priority-section .cards { grid-template-columns: minmax(0,1fr); }
    #main :is(.ct-form,.wp-visit-picker,.wp-dating-grid,.wp-result-strip,.cv-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #main .condition-layout { grid-template-columns: minmax(0,1fr); }
    #main .condition-aside { position: static; }
    #main .cv-grid { grid-template-columns: minmax(0,1fr); }
    #main .exercise-selectors, #main .exercise-filters { grid-template-columns: minmax(0,1fr); }
    #main .exercise-hero { grid-template-columns: minmax(0,1fr); }
    #main .exercise-hero-mark { display: none; }
    #main .exercise-safety { display: grid; }
    #main .exercise-section-heading { flex-direction: column; align-items: stretch; }
    #main .exercise-mode button { flex: 1; }
  }
  @container consultation (max-width: 420px) {
    #main .home-access-grid.home-module-grid a.si-card { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 28px auto; align-content: start; align-items: start; justify-content: normal; text-align: left; gap: 7px; padding: 12px; min-height: 94px; }
    #main .home-module-grid a.si-card .si-icon { grid-column: 1; grid-row: 1; }
    #main .home-module-grid a.si-card > div { grid-column: 1; grid-row: 2; }
    #main .home-module-grid a.si-card p { display: none; }
    #main :is(.ct-form,.wp-dating-grid,.wp-result-strip,.cv-grid,.form-grid) { grid-template-columns: minmax(0,1fr); }
    #main .wp-reference { grid-template-columns: minmax(0,1fr); }
  }
  @media (max-width: 1100px) {
    .feedback-launch { width: 48px; padding: 0; justify-content: center; }
    .feedback-launch span { display: none; }
    .wp-planner .wp-print-button { right: 84px; }
  }
  @media (max-width: 700px) {
    #main .dm-frame-controls { top: 118px; }
    #main.dm-fullscreen .dm-frame-controls { top: 0; }
    .wp-planner .wp-print-button { right: 76px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  }
}

/* Show the complete clinical mark at both header sizes. */
@media screen {
  .sidebar > .brand {
    grid-column: 1 / -1;
    width: min(100%, 144px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    place-items: center;
    margin-inline: auto;
    justify-self: center;
  }
  .sidebar > .brand::after { display: none; }
  .sidebar > .brand .brand-artwork {
    width: 100%;
    height: auto;
    aspect-ratio: 240 / 81;
    overflow: visible;
    justify-self: center;
    /* The SVG centres the visible artwork and both animation layers. */
    transform: none;
  }
  .sidebar > .brand .brand-lockup { width: 100%; max-width: 100%; height: auto; }
  .sidebar > .brand .brand-reveal { width: 100%; right: 0; }
  .sidebar > .brand .brand-reveal-mask { clip-path: inset(0 0 0 29%); }
  .sidebar > .brand .brand-reveal-wordmark { clip-path: none; }
  .sidebar > .brand .brand-reveal-plus { clip-path: none; }
}
@media screen and (max-width: 700px) {
  .sidebar { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .sidebar > .brand { grid-column: 2; grid-row: 1; width: min(100%, 104px); min-height: 44px; justify-self: center; display: grid; place-items: center; }
  .sidebar .sidebar-controls .mobile-menu { grid-column: 3; grid-row: 1; }
  .sidebar .sidebar-search-box, .sidebar > nav { grid-column: 1 / -1; }
}

/* Translucent surface; keep text and controls fully opaque. */
@media screen {
  .sidebar {
    background:
      radial-gradient(ellipse at 0 0, rgb(29 75 80 / .38), transparent 60%),
      linear-gradient(170deg, rgb(20 41 56 / .87), rgb(14 32 45 / .93) 80%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
    border-right-color: rgb(220 249 247 / .18);
    box-shadow: inset -1px 0 rgb(255 255 255 / .035), 12px 0 40px rgb(18 54 59 / .07);
  }
  html[data-theme='dark'] .sidebar {
    background:
      radial-gradient(ellipse at 0 0, rgb(29 75 80 / .32), transparent 57%),
      linear-gradient(170deg, rgb(16 31 42 / .88), rgb(9 19 28 / .94) 85%);
    border-right-color: rgb(121 201 194 / .20);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sidebar { background: linear-gradient(170deg, #183442, #102633 80%); }
    html[data-theme='dark'] .sidebar { background: linear-gradient(170deg, #142b35, #0b1923 85%); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .sidebar { background: #142938; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html[data-theme='dark'] .sidebar { background: #101f2a; }
  }
}

/* Shared consultation controls: clear focus, readable results and wrapped links. */
@media screen {
  html[data-theme] :is(#main, .sidebar, .command-dialog) :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--read-teal, var(--ink));
    outline-offset: 3px;
  }
  html[data-theme] .command-dialog .command-head {
    padding-block: 14px;
    border-bottom: 1px solid var(--read-line);
    background: var(--read-soft);
  }
  html[data-theme] .command-dialog #global-search-input {
    box-sizing: border-box;
    width: calc(100% - 32px);
    margin: 12px 16px 6px;
    padding: 10px 13px;
    border: 1px solid var(--read-line);
    border-radius: 10px;
    font-size: 16px;
  }
  html[data-theme] .command-dialog .search-result { border-radius: 8px; overflow-wrap: anywhere; }
  html[data-theme] #main :is(.context-links, .same-consultation) a {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  @media (max-width: 640px) {
    html[data-theme] .command-dialog .search-filters button { min-height: 44px; }
    html[data-theme] .command-dialog .command-foot { display: none; }
  }
}

#ref-specialty-criteria .ref-criterion-card[hidden] { display: none; }
.ref-search-status:empty { margin: 0; }