/* The existing site shell stays outside the FDA theme and selector scope. */
#fda-app {
  --fda-site-height: 82px;
  padding-top: var(--fda-site-height);
  position: relative;
  isolation: isolate;
  min-height: 80vh;
  letter-spacing: normal;
}
#fda-app p, #fda-app h1, #fda-app h2, #fda-app h3, #fda-app h4 { color: inherit; }
#fda-app h1, #fda-app h2 { max-width: none; }
body:has(#fda-app) [data-site-header] { background: var(--void); }
#fda-app main > :where(section, article):not([data-no-section-rule]) { border-top: 0 !important; }
/* The tool header scrolls away at every width; only the site header stays pinned, so a reader keeps the screen for the letter. */
#fda-app.fda-module [data-module-header] { position: relative; top: auto; z-index: 35; }
#fda-app.fda-explorer .brand .name { display: block; }
#fda-app.fda-explorer .rail,
#fda-app.fda-explorer .panel { top: calc(var(--fda-nav-height, 230px) + 8px); max-height: calc(100dvh - var(--fda-nav-height, 230px) - 16px); }
#fda-app.fda-explorer .drawer { z-index: 30; }
#fda-app.fda-explorer .tip { z-index: 36; }
#fda-app .source-card { top: calc(var(--fda-nav-height, 150px) + 16px); }

/* Share the site's navigation grid, without narrowing the explorer's charts. */
#fda-app .fda-nav-frame,
#fda-app.fda-explorer header.top #tabs {
  width: min(calc(100% - var(--gutter) * 2), var(--wide));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
#fda-app .fda-nav-frame {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 25px;
  height: auto;
  min-height: 68px;
  padding-block: 0;
}
#fda-app .fda-nav-frame .app-name,
#fda-app .fda-nav-frame .brand .name {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  padding: 0;
  white-space: nowrap;
}
#fda-app.fda-module .fda-primary-nav {
  display: flex;
  flex: 0 0 auto;
  align-self: center;
  align-items: center;
  gap: 22px;
  height: 44px;
  min-height: 44px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
#fda-app.fda-module .fda-primary-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  font-size: .875rem;
  line-height: 20px;
  white-space: nowrap;
}
#fda-app.fda-module .fda-primary-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  inset: auto 0 5px;
  height: 2px;
  background: var(--teal);
}
#fda-app.fda-explorer .top-right { margin-left: auto; }
@media (max-width: 1200px) {
  #fda-app.fda-explorer .top-right .tag { display: none; }
}
@media (max-width: 980px) {
  #fda-app .app-nav-inner.fda-nav-frame { flex-wrap: wrap; padding-bottom: 12px; }
  #fda-app .app-nav-inner .app-name { padding-block: 12px; }
}
@media (max-width: 740px) {
  /* Keep the company cell, with its labeled mobile dates, in the compact list. */
  #fda-app .table-wrap.compact :is(th, td):nth-child(2) { display: none; }
  #fda-app .table-wrap.compact :is(th, td):nth-child(3) { display: table-cell; }
  #fda-app .fda-nav-frame { flex-wrap: wrap; row-gap: 4px; padding-block: 8px; }
  #fda-app .app-nav-inner .app-name { flex-basis: 100%; padding-block: 4px; }
  #fda-app.fda-module .fda-primary-nav { flex-basis: 100%; gap: 20px; }
  #fda-app.fda-explorer .fda-primary-nav { order: 3; }
  #fda-app.fda-explorer .theme-btn .lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Review refinements stay inside the FDA module. */
#fda-app .control-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
#fda-app .filter-chip { line-height: 1.35; min-height: 36px; }
#fda-app .filter-chip .control-icon { width: 14px; height: 14px; flex-basis: 14px; }
#fda-app .text-button:has(.control-icon) { display: inline-flex; align-items: center; gap: 8px; }
#fda-app .table-wrap tbody tr:focus-within { background: color-mix(in srgb, var(--signal) 4%, var(--panel)); }
/* Whole-card targets change state without underlining every line of content. */
#fda-app :is(a.latest-card, a.letter-card, a.deeper-link) {
  text-decoration: none;
}
#fda-app a.latest-card { padding-inline: 12px; border-radius: 8px; }
#fda-app :is(a.latest-card, a.letter-card, a.deeper-link):is(:hover, :focus-visible) {
  text-decoration: none;
  border-color: var(--teal);
  background: color-mix(in srgb, var(--signal) 7%, var(--panel, var(--surface)));
}
#fda-app .bar-row { padding: 4px 6px; border-radius: 6px; }
#fda-app .bar-row:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--signal) 7%, var(--panel, var(--surface)));
}
#fda-app .bar-row:is(:hover, :focus-visible) .bar-label {
  text-decoration: none;
  color: var(--teal);
}
/* Inline research links remain distinct from non-interactive category labels. */
#fda-app :is(a.pill, a.tag),
#fda-app .ai-tags button.ai-tag {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
#fda-app .fda-primary-nav a:hover,
#fda-app a.button:hover { text-decoration: none; }
/* Dual dates sit below the company, never in a competing auto-width column. */
#fda-app.fda-explorer .p-item {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'co' 'd' 'meta';
  row-gap: 4px;
}
#fda-app.fda-explorer .p-item .co { white-space: normal; overflow-wrap: anywhere; }
#fda-app.fda-explorer .p-item .d { white-space: normal; line-height: 1.5; }
#fda-app.fda-explorer .p-list-head { flex-wrap: wrap; }
#fda-app.fda-explorer .p-tools { min-width: 0; max-width: 100%; }
#fda-app.fda-explorer .p-tools select { max-width: 100%; }
#fda-app.fda-explorer .cfr-letters button {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
#fda-app.fda-explorer .cfr-letters button > span:not(.d):not(.f) { grid-row: 1; overflow-wrap: anywhere; }
#fda-app.fda-explorer .cfr-letters button .d { grid-row: 2; line-height: 1.5; }
#fda-app.fda-explorer .cfr-letters button .f { grid-row: 3; white-space: normal; }
#fda-app .commercial .text-button { text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--off-white) 52%, transparent); padding-bottom: 3px; }
#fda-app .commercial .text-button:hover { text-decoration: none; border-bottom-style: solid; }
#fda-app .method-head { max-width: 850px; }
#fda-app .alert-cadence:has(input:checked) { border-color: var(--teal); background: color-mix(in srgb, var(--signal) 6%, var(--panel)); }
#fda-app #alertsDialog .dialog-head { position: sticky; top: 0; z-index: 1; background: var(--panel); }
#fda-app #alertsDialog .hs-form-frame { min-width: 0; }
#fda-app #alertsDialog .hs-form-frame iframe { display: block; width: 100%; border: 0; }
#fda-app.fda-explorer .hero { display: block; padding: 20px 0 28px; }
#fda-app.fda-explorer .search-row { display: block; margin-top: 0; }
#fda-app.fda-explorer .search-row .search { width: 100%; max-width: none; min-width: 0; margin: 0; height: 50px; }
#fda-app.fda-explorer .search-row .search input { font-size: 1rem; }
/* Search belongs to the existing sticky toolbar, not the scrolled chart content. */
#fda-app.fda-explorer .top-in.fda-nav-frame { flex-wrap: wrap; padding-bottom: 10px; }
#fda-app.fda-explorer .top-in .brand,
#fda-app.fda-explorer .top-in .top-right { min-height: 58px; }
#fda-app.fda-explorer .explorer-search-tools {
  display: flex; align-items: center; gap: 12px; flex-basis: 100%; min-width: 0;
}
#fda-app.fda-explorer .explorer-search-tools .search-row { flex: 1; min-width: 0; }
#fda-app.fda-explorer .explorer-search-tools .search { height: 42px; }
#fda-app.fda-explorer .explorer-search-tools .search input { font-size: .875rem; }
#fda-app.fda-explorer .explorer-search-tools .suggest { left: 0; width: 100%; max-height: min(340px, 45dvh); }
#fda-app.fda-explorer .explorer-search-tools > button { flex-shrink: 0; min-height: 42px; }
#fda-app.fda-module [data-fda-share],
#fda-app.fda-explorer :is(.fda-share-cta, .fda-alerts-cta) {
  background: var(--signal); border-color: var(--signal); color: var(--on-fill, var(--void)); font-weight: 700;
  justify-content: center; border-radius: 999px;
}
#fda-app.fda-module [data-fda-share]:hover,
#fda-app.fda-explorer :is(.fda-share-cta, .fda-alerts-cta):hover {
  background: color-mix(in srgb, var(--signal) 88%, var(--off-white));
  border-color: var(--signal); color: var(--on-fill, var(--void));
}
#fda-app.fda-module [data-fda-share]:focus-visible,
#fda-app.fda-explorer :is(.fda-share-cta, .fda-alerts-cta):focus-visible {
  outline: 3px solid var(--depth); outline-offset: 3px;
}
#fda-app.fda-module [data-fda-share] {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 10px 15px; text-decoration: none; line-height: 1.3;
}
#fda-app.fda-explorer .subscribe-card {
  margin: 0; padding: 24px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); min-width: 0; align-self: start; grid-column: auto;
}
#fda-app.fda-explorer .subscribe-card h3 { margin-bottom: 10px; font-size: 18px; color: var(--text); }
#fda-app.fda-explorer .subscribe-card p { font-size: .875rem; line-height: 1.6; color: var(--text-muted); }
#fda-app.fda-explorer .subscribe-card .actions { margin-block: 16px 12px; }
#fda-app.fda-explorer .fda-alerts-cta { min-height: 48px; padding: 12px 19px; gap: 18px; font-size: .875rem; }
#fda-app.fda-explorer #alertsDialog {
  --panel: var(--surface); --line: var(--border); --muted: var(--text-muted);
  width: min(590px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text);
  box-shadow: var(--shadow); overflow: auto;
}
#fda-app.fda-explorer #alertsDialog::backdrop { background: var(--backdrop); }
#fda-app.fda-explorer #alertsDialog .dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px;
  border-bottom: 1px solid var(--line);
}
#fda-app.fda-explorer #alertsDialog h2 { font-size: 1.5rem; }
#fda-app.fda-explorer #alertsDialog [data-close-alerts] { min-width: 44px; min-height: 44px; font-size: 1.5rem; }
#fda-app.fda-explorer #alertsDialog .dialog-body { padding: 24px; }
#fda-app.fda-explorer #alertsDialog :is(p, .hs-form-frame) { margin-bottom: 16px; }
#fda-app.fda-explorer #alertsDialog :is(button, a):focus-visible { outline: 3px solid var(--depth); outline-offset: 3px; }
#fda-app.fda-explorer .top-right .tag { display: none; }
#fda-app.fda-explorer .hero { padding: 0; }
#fda-app.fda-explorer header.top #tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
#fda-app.fda-explorer .fda-nav-frame .brand .name { overflow: visible; text-overflow: clip; }
#fda-app.fda-module dialog.fda-share-dialog {
  width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 24px; border: 1px solid var(--line, var(--border));
  border-radius: 16px; color: var(--text); background: var(--panel, var(--navy));
  box-shadow: var(--shadow); overflow: auto; font-family: var(--font-body);
}
#fda-app.fda-module dialog.fda-share-dialog::backdrop { background: var(--backdrop); }
#fda-app.fda-explorer dialog.fda-share-dialog { --line: var(--border); --muted: var(--text-muted); }
#fda-app .fda-share-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#fda-app .fda-share-heading h2 { font-size: 1.45rem; margin: 0; letter-spacing: -.025em; }
#fda-app .fda-share-dialog button, #fda-app .fda-share-dialog a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--line, var(--border));
  border-radius: 8px; color: var(--text); background: transparent; text-decoration: none; font: inherit; cursor: pointer;
}
#fda-app .fda-share-heading button { font-size: 1.5rem; min-width: 44px; padding: 4px; }
#fda-app .fda-share-dialog label { display: block; font-size: .8rem; font-weight: 650; margin: 18px 0 6px; }
#fda-app .fda-share-dialog input { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--line, var(--border)); border-radius: 8px; padding: 12px; background: var(--bg, var(--void)); color: var(--text); font: inherit; font-size: .8rem; }
#fda-app .fda-share-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
#fda-app .fda-share-actions > * { flex: 1; }
#fda-app #fdaShareCopy { background: var(--signal); border-color: var(--signal); color: var(--on-fill, var(--void)); font-weight: 650; }
#fda-app .fda-share-dialog :is(button, a, input):focus-visible { outline: 2px solid var(--depth); outline-offset: 3px; }
#fda-app #fdaShareDescription { font-size: .95rem; line-height: 1.5; }
#fda-app #fdaShareStatus { min-height: 1.5em; margin: 12px 0 6px; font-size: .85rem; }
#fda-app .fda-share-note { font-size: .75rem; line-height: 1.5; color: var(--text-muted, var(--muted)); margin: 0; }
@media (min-width: 1400px) {
  #fda-app.fda-explorer .top-in.fda-nav-frame { padding-bottom: 0; flex-wrap: nowrap; gap: 18px; }
  #fda-app.fda-explorer .explorer-search-tools { flex: 1; order: 2; }
  #fda-app.fda-explorer .top-right { order: 3; }
}
@media (max-width: 740px) {
  #fda-app.fda-explorer .explorer-search-tools { order: 4; }
  #fda-app.fda-explorer .top-in .brand, #fda-app.fda-explorer .top-in .top-right { min-height: 36px; }
  #fda-app.fda-explorer .top-in.fda-nav-frame { row-gap: 8px; }
  #fda-app.fda-explorer .explorer-search-tools > button { padding-inline: 10px; font-size: .8rem; }
}
@media (max-width: 1100px) {
  #fda-app.fda-explorer .rail, #fda-app.fda-explorer .panel { max-height: none; }
}
@media (max-width: 700px) {
  #fda-app.fda-explorer .brand .name { white-space: normal; font-size: 13px; }
}
#fda-app .fda-server-summary { padding: 24px; margin-bottom: 24px; }
#fda-app .fda-server-summary h2 { font-size: 1.5rem; }
#fda-app .fda-server-summary h3 { margin-top: 24px; }
#fda-app .fda-server-summary table { width: 100%; border-collapse: collapse; font-size: .875rem; }
#fda-app [data-server-rendered] caption,
#fda-app .fda-server-summary caption { text-align: left; font-weight: 650; padding-block: 16px 8px; }
#fda-app .fda-server-summary :is(th, td) { padding: 8px; text-align: left; border-bottom: 1px solid var(--border); }
#fda-app .fda-server-summary .latest-card { display: block; padding-block: 12px; color: var(--text); }
#fda-app .fda-server-summary .latest-card > * { display: block; }
#fda-app .fda-server-summary .latest-card small { color: var(--text-muted); }
#fda-app [data-server-rendered] .table-wrap { overflow-x: auto; }
#fda-app [data-server-rendered] .latest-card > * { display: block; }
#fda-app [data-server-rendered] .latest h2 { font-size: 1.25rem; }
#fda-app [data-server-rendered] caption { padding-inline: 18px; }
@media print {
  [data-site-header], .site-footer { display: none !important; }
  #fda-app { padding-top: 0; }
}

/* Guided tours (tour.js). The outlined control stays visible above a dimmed page; the card explains
   it. On a phone the card sits at the foot of the screen. Colours come from each tab's own tokens. */
#fda-app .fda-tour-ring { position: fixed; z-index: 990; border: 2px solid var(--blue, var(--depth)); border-radius: 10px; box-shadow: 0 0 0 9999px color-mix(in srgb, var(--text) 52%, transparent); pointer-events: none; transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease; }
#fda-app .fda-tour-card { position: fixed; z-index: 991; box-sizing: border-box; padding: 18px 18px 14px; border: 1px solid var(--line, var(--border)); border-radius: 12px; background: var(--panel, var(--surface)); color: var(--text); box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 22%, transparent); }
#fda-app .fda-tour-card.is-docked { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; width: auto; }
#fda-app .fda-tour-kicker { display: block; font-size: 11.5px; font-weight: 750; letter-spacing: .08em; color: var(--teal); }
#fda-app .fda-tour-card h2 { margin: 6px 0 4px; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 18px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--text); }
#fda-app .fda-tour-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted, var(--muted)); }
#fda-app .fda-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
#fda-app .fda-tour-actions > span { display: flex; gap: 8px; flex-wrap: wrap; }
#fda-app .fda-tour-skip { padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--text-muted, var(--muted)); cursor: pointer; }
#fda-app .fda-tour-skip:hover { color: var(--blue, var(--depth)); text-decoration: underline; }
#fda-app .fda-tour-btn { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line, var(--border)); border-radius: 8px; background: var(--panel, var(--surface)); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
#fda-app .fda-tour-btn:hover { border-color: var(--blue, var(--depth)); color: var(--blue, var(--depth)); }
#fda-app .fda-tour-btn.primary { background: var(--text); border-color: var(--text); color: var(--panel, var(--surface)); }
#fda-app .fda-tour-btn.primary:hover { opacity: .9; color: var(--panel, var(--surface)); }
@media (prefers-reduced-motion: reduce) { #fda-app .fda-tour-ring { transition: none; } }
/* "Take the tour": a clear button in each tab's title block, on the right, level with the "Last
   checked" line. Blue outline and a play icon, so it reads apart from Share and Get alerts. */
#fda-app .fda-tour-start { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--blue, var(--depth)); border-radius: 8px; background: var(--panel, var(--surface)); color: var(--blue, var(--depth)); font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
#fda-app .fda-tour-start:hover { background: color-mix(in srgb, var(--blue, var(--depth)) 8%, var(--panel, var(--surface))); }
#fda-app .fda-tour-start svg { width: 18px; height: 18px; flex: none; }
#fda-app .fda-tour-start[hidden] { display: none; }
#fda-app .guided-title { position: relative; }
#fda-app .guided-title > .fda-tour-start { position: absolute; right: 0; bottom: 0; }
#fda-app .desk-title > .fda-tour-start { flex: none; margin-bottom: 0; }
@media (max-width: 760px) {
  #fda-app .guided-title > .fda-tour-start { position: static; margin-top: 10px; }
  #fda-app .desk-title > .fda-tour-start { margin-top: 10px; }
}

/* Commercial band: spread across the width on wide screens, headline left, copy and actions right. */
@media (min-width: 900px) {
  #fda-app .commercial:not(.fda-record-commercial) > :is(.wrap, .commercial-in) {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 120px); align-items: end;
  }
  #fda-app .commercial:not(.fda-record-commercial) :is(.wrap, .commercial-in) > .eyebrow { grid-column: 1 / -1; }
  #fda-app .commercial:not(.fda-record-commercial) :is(.wrap, .commercial-in) > h2 { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 0; align-self: end; }
  #fda-app .commercial:not(.fda-record-commercial) :is(.wrap, .commercial-in) > p { grid-column: 2; grid-row: 2; max-width: 620px; }
  #fda-app .commercial:not(.fda-record-commercial) :is(.wrap, .commercial-in) > .actions { grid-column: 2; grid-row: 3; }
}

/* Card version of the band (regulation and letter pages): the same headline-left, copy-right spread. */
@media (min-width: 900px) {
  #fda-app .commercial.fda-record-commercial { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 120px); align-items: end; }
  #fda-app .commercial.fda-record-commercial > .eyebrow { grid-column: 1 / -1; }
  #fda-app .commercial.fda-record-commercial > h2 { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 0; align-self: end; }
  #fda-app .commercial.fda-record-commercial > p { grid-column: 2; grid-row: 2; max-width: 620px; }
  #fda-app .commercial.fda-record-commercial > .actions { grid-column: 2; grid-row: 3; }
}

/* Share dialog buttons follow the current button standard on every tab: Copy link like Get alerts,
   LinkedIn and Email like Share this view, and a matching close button. Guided pages name the
   surface and line tokens --panel and --line; the explorer names them --surface and --border. */
#fda-app #fdaShareDialog .fda-share-actions > :is(button, a),
#fda-app #fdaShareDialog #fdaShareClose {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; height: 40px; padding: 0 14px; border: 1px solid var(--line, var(--border)); border-radius: 8px;
  background: var(--panel, var(--surface)); color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.2; text-decoration: none;
}
#fda-app #fdaShareDialog .fda-share-actions > :is(button, a):hover,
#fda-app #fdaShareDialog #fdaShareClose:hover { border-color: var(--blue, var(--depth)); color: var(--blue, var(--depth)); background: var(--panel, var(--surface)); }
#fda-app #fdaShareDialog #fdaShareCopy { background: var(--text); border-color: var(--text); color: var(--panel, var(--surface)); }
#fda-app #fdaShareDialog #fdaShareCopy:hover { background: var(--text); border-color: var(--text); color: var(--panel, var(--surface)); opacity: .9; }
#fda-app #fdaShareDialog #fdaShareClose { width: 40px; min-width: 40px; max-width: 40px; padding: 0; font-size: 20px; font-weight: 400; flex: none; }

/* Phones and tablets (up to 1100px, where the desktop layout starts): a quieter header on every tab. Share, Get alerts and the tour sit in one More menu
   beside the title; Your selection drops its label and Undo; the Back link is hidden (the
   browser's back does the same). Wider screens keep the full controls. */
#fda-app .fda-more { display: none; }
@media (max-width: 1100px) {
  #fda-app.fda-has-more :is(.guided-title, .desk-title) { position: relative; }
  #fda-app.fda-has-more :is(.guided-title, .desk-title) h1 { padding-right: 52px; }
  #fda-app.fda-has-more .fda-more { display: block; position: absolute; right: 0; top: 30px; z-index: 30; }
  /* !important: the explorer's own phone rules force these controls visible. */
  #fda-app.fda-has-more :is(.guided-actions, .explorer-search-tools > .fda-share-cta, .explorer-search-tools > .fda-alerts-top, :is(.guided-title, .desk-title) > .fda-tour-start) { display: none !important; }
  #fda-app .fda-more-button {
    box-sizing: border-box; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line, var(--border)); border-radius: 8px; background: var(--panel, var(--surface)); color: var(--text); cursor: pointer;
  }
  #fda-app .fda-more-button svg { width: 20px; height: 20px; }
  #fda-app .fda-more-button[aria-expanded="true"] { border-color: var(--blue, var(--depth)); color: var(--blue, var(--depth)); }
  #fda-app .fda-more-menu {
    position: absolute; right: 0; top: 46px; min-width: 210px; padding: 6px; border: 1px solid var(--line, var(--border)); border-radius: 10px;
    background: var(--panel, var(--surface)); box-shadow: 0 10px 28px rgb(13 30 48 / 0.16);
  }
  #fda-app .fda-more-menu[hidden] { display: none; }
  /* While open, the menu sits above the tab header, which otherwise covers it. */
  #fda-app.fda-has-more .fda-more.is-open { z-index: 1000; }
  #fda-app .fda-more-menu [role="menuitem"] {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  }
  #fda-app .fda-more-menu [role="menuitem"]:is(:hover, :focus-visible) { background: var(--soft, var(--surface-2)); outline: none; }
  #fda-app .fda-more-menu svg { width: 18px; height: 18px; flex: none; }
  #fda-app :is(#scopeBar, #guidedScope, #regScope) .scope-label { display: none; }
  #fda-app :is(#scopeBar, #guidedScope, #regScope) :is([data-scope="undo"], [data-guided-undo]) { display: none; }
  #fda-app .fda-back-row { display: none; }
}

/* One keyboard focus ring for every FDA page: a 2px Depth outline set just off the control. */
#fda-app :is(a, button, select, summary, [tabindex], input:is([type="checkbox"], [type="radio"])):focus-visible { outline: 2px solid var(--depth); outline-offset: 2px; }

/* Dialogs dim the page behind them with the text colour, so a modal reads as opened on top. */
#fda-app { --backdrop: color-mix(in srgb, var(--text) 45%, transparent); }
#fda-app dialog::backdrop { background: var(--backdrop); }

/* Letter and regulation pages: the More menu ends the tab row, in place of the Share and Get alerts row. */
@media (max-width: 1100px) {
  #fda-app.fda-has-more .fda-more.fda-more-inline { position: relative; top: auto; right: auto; flex: none; align-self: center; margin-left: 8px; order: 2; }
  #fda-app.fda-record-module[data-header="desk"] .app-nav .app-nav-inner:has(> .fda-more-inline) { flex-wrap: nowrap; }
  #fda-app.fda-record-module[data-header="desk"] .app-nav .app-nav-inner:has(> .fda-more-inline) > nav.fda-primary-nav { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Keep or clear filters when moving into Letters or Research: the share dialog's look, a list of the
   filters, and Keep filters as the main button. */
#fda-app .fda-carry-dialog .fda-carry-text { margin: 0 0 10px; font-size: .95rem; line-height: 1.5; color: var(--text-muted, var(--muted)); }
#fda-app .fda-carry-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
#fda-app .fda-carry-chips li { padding: 6px 10px; border: 1px solid var(--line, var(--border)); border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--text); background: var(--soft, var(--surface-2)); }
#fda-app .fda-carry-chips li.more { background: transparent; color: var(--text-muted, var(--muted)); font-weight: 500; }
#fda-app .fda-carry-dialog .fda-carry-keep { background: var(--text); border-color: var(--text); color: var(--panel, var(--surface)); font-weight: 650; }
#fda-app .fda-carry-dialog .fda-carry-keep:hover { opacity: .9; }
#fda-app .fda-carry-dialog::backdrop { background: var(--backdrop); }

/* Links that leave the site: the same ↗ after the text, and a screen-reader note. */
#fda-app .ext-mark { display: inline-block; margin-left: .15em; text-decoration: none; }
#fda-app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The quiet line at the foot of every FDA page: the full letter list and the method. */
#fda-app .fda-db-note { box-sizing: border-box; width: min(100%, var(--fda-wrap, 1440px)); margin: 0 auto; padding: 18px 22px 28px; font-size: .85rem; color: var(--text-muted, var(--muted)); }
#fda-app .fda-db-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#fda-app .fda-db-note a:hover { color: var(--text); }

/* One pop-up style on every tab (Get alerts, filter pop-ups, Share, Keep your filters?): 16px corners,
   a 24px title, a 40px square close button and 40px action buttons. */
#fda-app dialog:is(#alertsDialog, .fda-share-dialog, .fda-evidence-dialog) { border-radius: 16px; }
#fda-app :is(#alertsDialog .dialog-head h2, .fda-share-heading h2, .fda-evidence-dialog h2) { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
#fda-app :is(#alertsDialog .dialog-head button, .fda-share-heading button, .fda-evidence-dialog .dialog-close, .fda-evidence-dialog [data-close][aria-label]) {
  box-sizing: border-box; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center;
  border-radius: 8px; font-size: 22px; line-height: 1;
}
#fda-app .fda-share-dialog .fda-share-actions :is(button, a) { min-height: 40px; }
/* Phones: dialog actions stack full width, so no label wraps inside a button. */
@media (max-width: 400px) {
  #fda-app .fda-share-dialog .fda-share-actions { flex-direction: column; }
  #fda-app .fda-share-dialog .fda-share-actions > * { width: 100%; }
}

/* Long company names (often a web address with no spaces) wrap inside the card instead of running past it. */
#fda-app :is(.letter-item, .launch-letter){min-width:0}
#fda-app :is(.letter-item strong, .launch-letter-name, .record-context){overflow-wrap:anywhere}