:root {
  --navy: #16243d;
  --navy-2: #1f3355;
  --accent: #c9a04e;
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #1c2434;
  --muted: #66707f;
  --line: #e3e6eb;
  --hot: #b3261e;
  --ok: #1a7f4b;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.5;
}
a { color: var(--navy-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { background: #fff; color: var(--text); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50; transition: transform .28s ease; }
.topbar.topbar-hidden { transform: translateY(-100%); }
.topbar-inner {
  max-width: 1320px; margin: 0 auto; padding: 9px 22px; position: relative;
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700;
  color: var(--navy); letter-spacing: .3px; text-decoration: none; flex-shrink: 0; }
.brand-txt span, .topbar-left .brand span { color: var(--accent); font-weight: 400; }
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar nav { display: flex; align-items: center; gap: 16px; }
.topbar-inner > nav { margin-left: auto; }
.topbar nav a { color: var(--text); }
.topbar nav a:hover { color: var(--navy); text-decoration: none; }

/* admin link */
.tb-link { color: var(--text); font-size: 14px; font-weight: 500; padding: 7px 10px;
  border-radius: 8px; text-decoration: none; flex-shrink: 0; }
.tb-link:hover { background: #f2f4f7; color: var(--navy); text-decoration: none; }
.tb-link.active { background: #eef2fb; color: var(--navy); }

/* pinned quick-access page icons (pin up to 5 from the apps menu) */
.fm-quick { order: 2; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fm-quick-ico { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 34px; height: 34px; border-radius: 8px;
  font-size: 18px; line-height: 1; text-decoration: none; cursor: pointer;
  background: #f4f6f9; }
.fm-quick-ico:hover { background: #e9eef5; text-decoration: none; }
.fm-quick-ico .fq-emoji { pointer-events: none; }
.fq-remove { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px;
  display: none; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--hot, #c0392b); color: #fff; font-size: 13px; line-height: 1;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
@media (hover: hover) { .fm-quick-ico:hover .fq-remove { display: inline-flex; } }
.fm-quick.fm-quick-full { animation: fmq-shake .35s; }
@keyframes fmq-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)} }
/* per-item pin toggle inside the apps menu */
.mega-pin { align-self: center; margin-left: auto; flex-shrink: 0;
  width: 28px; height: 28px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 6px; color: #b3bccb; cursor: pointer;
  opacity: 0; transition: opacity .12s, color .12s, background .12s; }
/* Reveal-on-hover is gated to devices that HAVE hover: on iOS the first tap
   merely applies :hover (revealing the pin), so links needed two taps. Touch
   devices get the pin statically instead. */
@media (hover: hover) { .nav-mega a:hover .mega-pin { opacity: 1; } }
@media (hover: none) {
  .mega-pin { opacity: .45; }
  .fq-remove { display: inline-flex; }
}
.mega-pin:hover { background: #eef2f7; color: var(--navy); }
.mega-pin.active { opacity: 1; color: var(--accent); }
.mega-pin.active:hover { color: var(--hot, #c0392b); background: #fbecec; }
/* tablets: no room beside the centred search box; phones get the pins as a
   row of their own under the brand row (the phone block further down) */
@media (max-width: 860px) and (min-width: 761px) { .fm-quick { display: none; } }

/* centered Rx Book search */
.topbar-search { position: absolute; left: 50%; transform: translateX(-50%);
  width: min(460px, 36vw); }
.tb-search-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: flex; }
.topbar-search input { width: 100%; height: 38px; border: 1px solid var(--line);
  border-radius: 999px; padding: 0 16px 0 40px; font-size: 13.5px;
  background: #f6f7f9; color: var(--text); }
.topbar-search input::placeholder { color: #9aa3b0; }
.topbar-search input:focus { outline: none; border-color: #c9d3e6; background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 58, 103, .09); }

/* right cluster order (visually): Admin -> app drawer -> profile.
   Brand keeps the left; the search stays absolutely centered. */
.topbar-inner > .brand { margin-right: auto; }
.topbar-inner > .tb-link { order: 2; }
.topbar-inner > .apps-dd { order: 3; }
.topbar-inner > .profile-dd { order: 4; flex-shrink: 0; }
.profile-menu a { display: flex; align-items: center; gap: 10px; }
/* Admin Console's to-do total, pushed to the right edge of its menu row. */
.profile-menu .menu-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Navigate dropdown */
.nav-dd { position: relative; }
.nav-dd summary {
  list-style: none; cursor: pointer; color: var(--muted); user-select: none;
}
.nav-dd summary::-webkit-details-marker { display: none; }
.nav-dd summary::after { content: " \25BE"; font-size: 10px; color: #98a3b5; }
.nav-dd summary:hover { color: var(--navy); }
.nav-dd-menu {
  position: absolute; left: 0; top: calc(100% + 10px); min-width: 200px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 18, 34, .18); padding: 6px; z-index: 60;
  display: flex; flex-direction: column;
}
.nav-dd-menu a,
.topbar nav .nav-dd-menu a {
  color: var(--text); padding: 9px 12px; border-radius: 6px; font-size: 14.5px;
}
.nav-dd-menu a:hover,
.topbar nav .nav-dd-menu a:hover { background: #f0f3f7; color: var(--navy); text-decoration: none; }

/* rich "mega" dropdown: icon tile + title + description per item */
.nav-mega { min-width: 340px; padding: 8px; gap: 2px; left: auto; right: 0; }
.topbar nav .nav-mega a,
.nav-mega a {
  display: flex; align-items: flex-start; gap: 13px; padding: 11px 12px;
}
.mega-ico {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; background: linear-gradient(135deg, #f4e9d4, #fdf6e8);
  border: 1px solid #efe4cd;
}
.mega-txt { display: flex; flex-direction: column; gap: 2px; }
.mega-txt strong { color: var(--navy); font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.mega-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.nav-mega a:hover .mega-ico { border-color: var(--accent); }

/* apps launcher (9-dot grid) button */
.apps-dd summary.apps-btn::after { content: none; }
.apps-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; color: var(--muted);
  transition: background .15s, color .15s; flex-shrink: 0;
}
.apps-btn:hover { background: #f2f4f7; color: var(--navy); }
.apps-dd[open] .apps-btn { background: #eef2fb; color: var(--navy); }

/* profile dropdown (far left) */
.topbar-left { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  color: var(--navy); font-weight: 700; font-size: 13px; display: inline-flex;
  align-items: center; justify-content: center; letter-spacing: .5px;
}
.profile-dd summary { display: inline-flex; align-items: center; gap: 6px; }
.profile-dd summary::after { content: " \25BE"; font-size: 10px; color: #98a3b5; }
.profile-menu { left: auto; right: 0; min-width: 240px; }
.logo-ph {
  width: 36px; height: 36px; border-radius: 8px; border: 1.5px dashed #5a6a86;
  color: #98a3b5; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; flex-shrink: 0;
}
.logo { height: 36px; width: auto; display: block; }
.profile-info {
  padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.profile-info .p-name { font-weight: 700; color: var(--navy); }
.profile-info .p-email { font-size: 13px; color: var(--muted); word-break: break-all; }
.profile-info .p-firm { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.menu-divider { height: 1px; background: var(--line); margin: 6px 0; }
.nav-dd-menu a.signout, .topbar nav .nav-dd-menu a.signout { color: var(--hot); }
.nav-dd-menu a.signout:hover { background: #fdecea; }
.success {
  background: #e9f2ec; color: var(--ok); border: 1px solid #bcd9c6;
  border-radius: 7px; padding: 9px 12px; margin-bottom: 14px; font-size: 14px;
}
.btn-outline {
  border: 1px solid #5a6a86; border-radius: 6px; padding: 5px 12px; color: #fff !important;
}
.btn-outline:hover { border-color: var(--accent); }

.container { max-width: 1200px; margin: 28px auto; padding: 0 24px; }
.footer {
  max-width: 1200px; margin: 40px auto 24px; padding: 16px 24px;
  color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line);
  text-align: center;
}
.footer .foot-sep { margin: 0 4px; }
.footer .foot-social { display: flex; justify-content: center; gap: 12px;
  margin-bottom: 12px; }
.footer .foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--muted);
  transition: color .2s, border-color .2s, transform .15s;
}
.footer .foot-social a:hover { color: var(--navy); border-color: #c9cfd8;
  transform: translateY(-2px); text-decoration: none; }
.footer .foot-social svg { width: 15px; height: 15px; }

/* Legal pages (/privacy, /terms): one continuous document in a single card */
/* Document pages — Terms, Privacy, FAQ. One rule set so the three cannot
   drift apart: same measure, same heading size, same vertical rhythm. */
.legal-doc, .faq-list { max-width: 820px; margin-top: 18px; }
.legal-doc h2, .faq-item h2 {
  font-size: 16px; color: var(--navy); margin: 26px 0 8px;
}
.legal-doc h2:first-child, .faq-item:first-child h2 { margin-top: 0; }
.legal-doc p, .faq-item p { margin: 0 0 10px; color: var(--text); }
.legal-doc ul, .faq-item ul {
  margin: 6px 0 12px; padding-left: 20px; color: var(--text);
}
.legal-doc li, .faq-item li { margin-bottom: 5px; }
/* Bold is for headings only on these pages. The <strong> markup stays — it
   still reads as emphasis to screen readers and search — but renders at body
   weight, so a wall of legal text isn't peppered with shouting phrases. */
.legal-doc strong, .faq-item strong { font-weight: 400; }

/* ===== app shell: left sidebar + top bar with global search ===== */
body.app-shell { background: var(--bg); }
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 236px; z-index: 60;
  background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px 12px;
}
.sidebar-top { display: flex; align-items: center; gap: 8px; padding: 4px 6px 14px; }
.sidebar-top .brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  color: var(--navy); font-size: 18px; font-weight: 700; text-decoration: none; }
.brand-txt span { color: var(--accent); }
.side-collapse { border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 5px; border-radius: 8px; flex-shrink: 0; display: inline-flex; }
.side-collapse:hover { background: #f2f4f7; color: var(--navy); }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1;
  overflow-y: auto; }
.sidebar-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 8px;
  margin-top: 8px; border-top: 1px solid var(--line); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 6px 10px 10px; }
.side-user .avatar { flex-shrink: 0; }
.side-user-info { display: flex; flex-direction: column; min-width: 0; }
.side-user-info .p-name { font-weight: 600; color: var(--navy); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-info .p-email { font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* collapsed icon rail */
body.sidebar-collapsed .sidebar { width: 68px; padding: 14px 8px; }
body.app-shell.sidebar-collapsed .app-body { margin-left: 68px; }
body.sidebar-collapsed .brand, body.sidebar-collapsed .snav-label,
body.sidebar-collapsed .side-user-info { display: none; }
body.sidebar-collapsed .sidebar-top { justify-content: center; padding: 4px 0 14px; }
body.sidebar-collapsed .side-collapse svg { transform: rotate(180deg); }
body.sidebar-collapsed .snav { justify-content: center; padding: 10px 0; gap: 0; }
body.sidebar-collapsed .side-user { justify-content: center; padding: 6px 0 10px; }
.snav { display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 9px; color: #4a5568; font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; }
.snav:hover { background: #f4f6f9; color: var(--navy); text-decoration: none; }
.snav.active { background: #eef2fb; color: var(--navy); font-weight: 600; }
.snav-ico { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0;
  opacity: .9; }
.snav-out { color: var(--muted); }
.snav-out:hover { background: #fdecea; color: var(--hot); }

.app-body { min-width: 0; }
body.app-shell .app-body { margin-left: 236px; min-height: 100vh;
  display: flex; flex-direction: column; }
body.app-shell .footer { max-width: 1180px; }

/* dashboard search bar: rounded floating card, centered, hides on scroll-down */
.appbar { position: sticky; top: 12px; z-index: 40;
  margin: 14px 18px 4px; padding: 9px 16px; min-height: 56px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  display: flex; align-items: center; justify-content: center;
  transition: transform .28s ease, opacity .2s ease; }
.appbar.appbar-hidden { transform: translateY(-170%); opacity: 0; pointer-events: none; }
.appbar-search { position: relative; width: min(600px, 60vw); }
.appbar-search-ico { position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%); color: var(--muted); display: flex; }
.appbar-search input { width: 100%; height: 40px; border: 1px solid var(--line);
  border-radius: 999px; padding: 0 16px 0 40px; font-size: 14px;
  background: #f6f7f9; color: var(--text); }
.appbar-search input::placeholder { color: #9aa3b0; }
.appbar-search input:focus { outline: none; border-color: #c9d3e6; background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 58, 103, .09); }

/* floating mobile menu button (opens the off-canvas sidebar) */
.mobile-menu-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 58;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff; color: var(--navy); cursor: pointer;
  align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(16, 24, 40, .1); }

.sidebar-scrim { position: fixed; inset: 0; z-index: 55;
  background: rgba(13, 22, 38, .4); }

@media (max-width: 900px) {
  .mobile-menu-btn { display: inline-flex; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 6px 0 30px rgba(10, 18, 34, .18); }
  body.sidebar-open .sidebar { transform: none; }
  body.app-shell .app-body,
  body.app-shell.sidebar-collapsed .app-body { margin-left: 0; }
  /* ignore collapse-to-icons on mobile — the drawer always shows full labels */
  body.sidebar-collapsed .sidebar { width: 240px; padding: 14px 12px; }
  body.sidebar-collapsed .brand, body.sidebar-collapsed .side-user-info { display: flex; }
  body.sidebar-collapsed .snav-label { display: inline; }
  body.sidebar-collapsed .snav { justify-content: flex-start; padding: 9px 12px; gap: 11px; }
  body.sidebar-collapsed .sidebar-top { padding: 4px 6px 14px; }
  .appbar { margin: 12px; }
}
@media (min-width: 901px) { .sidebar-scrim { display: none; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 24px; margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .04);
}
h1 { font-size: 24px; margin: 0 0 6px; }
h2 { font-size: 17px; margin: 0 0 12px; }

/* collapsible profile sections (drug application pages + preview drawer) */
.sec-tools { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 0 0 14px; }
/* The text-size gear sits in a positioned wrapper (for its popover). As a
   block the wrapper added inline descender space under the button and sat
   a few px lower than its neighbours; as a flex item it hugs the button. */
.sec-tools .tsz-wrap { display: inline-flex; }
/* Icon-only controls. The bell keeps its label in the DOM — its script writes
   state into it — so it is hidden rather than removed, and the title it sets
   ("Email me when this changes" / "…click to stop") is the hover text. */
.sec-tool, .sec-tools .watch-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 8px; gap: 0;
}
.sec-tools .watch-txt { display: none; }
.sec-tool .ico-minus, .sec-tool.is-expanded .ico-plus { display: none; }
.sec-tool.is-expanded .ico-minus { display: inline; }
details.sec-card > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  user-select: none;
}
details.sec-card > summary::-webkit-details-marker { display: none; }
details.sec-card > summary h2 { margin: 0; }
details.sec-card > summary::after {
  content: "\25BE"; margin-left: auto; color: var(--muted); font-size: 15px;
  transition: transform .15s ease; transform: rotate(-90deg);
}
details.sec-card[open] > summary::after { transform: none; }
details.sec-card[open] > summary { margin-bottom: 12px; }

/* Animate open/close. A <details> normally snaps, because its content has no
   height to animate from; ::details-content is the generated box around
   everything after the <summary>, and interpolate-size lets a keyword height
   ('auto') take part in a transition. content-visibility has to be discrete,
   so it is stepped at the end of the transition rather than interpolated —
   without that the content would vanish instantly on close and only the empty
   box would animate. Browsers without ::details-content simply snap as before. */
:root { interpolate-size: allow-keywords; }
details.sec-card::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .28s ease, content-visibility .28s allow-discrete;
}
details.sec-card[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  details.sec-card::details-content { transition: none; }
  details.sec-card > summary::after { transition: none; }
}

/* patent-disputes card (application profile) */
.disp-item { padding: 12px 0; border-top: 1px solid var(--line); }
.disp-item:first-of-type { border-top: 0; }
.disp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px; }
.disp-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 0 4px 14px; font-size: 13.5px; }
.disp-mid { flex: 1 1 220px; min-width: 0; }
.subtitle { color: var(--muted); margin: 0 0 18px; }
/* subtitle with the page's export / alert buttons on the same line */
.subtitle-row { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.subtitle-row .subtitle { flex: 1 1 auto; margin: 0; }
.subtitle-row .sec-tools { flex: none; margin: 0; }

/* auth pages */
.auth-wrap { max-width: 420px; margin: 48px auto; }
.auth-wrap .card { padding: 30px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.field input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 15px; background: #fff;
}
.field input:focus { outline: 2px solid var(--navy-2); border-color: var(--navy-2); }
.btn {
  display: inline-block; background: var(--navy); color: #fff !important; border: 0;
  border-radius: 7px; padding: 10px 18px; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--navy-2); text-decoration: none; }
.btn-gold { background: var(--accent); color: var(--navy) !important; }
.btn-sm { padding: 6px 12px; font-size: 13.5px; }
.error {
  background: #fdecea; color: var(--hot); border: 1px solid #f5c6c2;
  border-radius: 7px; padding: 9px 12px; margin-bottom: 14px; font-size: 14px;
}
.auth-alt { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 14px; }
.consent { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* filter bar */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters input[type=text] {
  flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 15px;
}
.filters select {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 14.5px; background: #fff;
}

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--navy);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--navy);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:hover td { background: #f6f8fb; }
.num { text-align: right; }
.badge {
  display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: 12px;
  font-weight: 600;
}
.badge-hot { background: #fdecea; color: var(--hot); }
.badge-soon { background: #fff6e0; color: #8a6116; }
.badge-later { background: #e9f2ec; color: var(--ok); }
.badge-past { background: #eceff3; color: var(--muted); }
/* listed-patents card: delisting flags beside the patent number */
.pat-flag { margin-left: 8px; font-size: 11px; padding: 1px 8px; vertical-align: 1px;
  white-space: nowrap; }
tr.pat-delisted td { color: var(--muted); }
tr.pat-delisted .patent-link { color: var(--muted); }

/* stats */
.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.stat {
  flex: 1; min-width: 160px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px;
}
.stat .label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.stat .value { font-size: 22px; font-weight: 700; color: var(--navy); margin-top: 2px; }
.stat .value.small { font-size: 15px; font-weight: 600; }

.meta-line { color: var(--muted); font-size: 13px; }
.detail-applicant {
  margin: 4px 0 6px; font-size: 17px; font-weight: 700; color: var(--navy);
  line-height: 1.35;
}
.detail-applicant .lbl {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--muted); margin-bottom: 1px;
}
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
/* let grid items shrink below their content so a wide .table-scroll scrolls
   inside its card instead of stretching the whole page off-screen */
.grid-2 > * { min-width: 0; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.mono { font-family: Consolas, monospace; font-size: 12.5px; }

/* ------------------------------------------------ application timeline (v2)
   A fit-to-width overview strip — key events as dots, all supplement
   approvals as one band, a dashed gold "today" rule — over a pill legend,
   with the chronological record ledger behind a "See details" toggle.
   Hues: approval ink · supplements purple · patents blue (filled = past,
   outlined = ahead) · exclusivity green · NCE-1 crimson · today gold. */
.tlv-card {
  --tlv-purple: oklch(0.52 0.13 310); --tlv-purple-dk: oklch(0.35 0.13 310);
  --tlv-blue: oklch(0.5 0.11 265);    --tlv-blue-dk: oklch(0.36 0.11 265);
  --tlv-green: oklch(0.48 0.12 145);  --tlv-green-dk: oklch(0.32 0.12 145);
  --tlv-red: oklch(0.5 0.14 25);      --tlv-red-dk: oklch(0.38 0.14 25);
  --tlv-gold: var(--accent, #b68235); --tlv-gold-dk: #5a3b0a; --tlv-gold-7: #7d5411;
  --tlv-ink: var(--text); --tlv-paper: var(--card, #fff);
  --tlv-muted: rgba(32, 31, 29, .55); --tlv-dim: rgba(32, 31, 29, .6);
  --tlv-track: rgba(32, 31, 29, .22); --tlv-track-past: rgba(32, 31, 29, .45);
}

/* --- the overview strip --- */
.tlv-strip { padding: 26px 30px 20px; }   /* no frame — the card is the frame */
.tlv-stage { position: relative; height: 64px; }
.tlv-track, .tlv-track-past { position: absolute; left: 0; top: 31px; height: 2px; }
.tlv-track { right: 0; background: var(--tlv-track); }
.tlv-track-past { background: var(--tlv-track-past); }
.tlv-dot, .tlv-band { position: absolute; padding: 0; cursor: pointer; border-radius: 50%;
  transform: translateX(-50%); box-sizing: border-box; }
.tlv-dot:focus-visible, .tlv-band:focus-visible { outline: 2px solid var(--tlv-gold); outline-offset: 2px; }
.tlv-dot { top: 26.5px; width: 11px; height: 11px; border: 2px solid var(--tlv-paper);
  background: var(--tlv-blue); box-shadow: 0 0 0 1px var(--tlv-blue); z-index: 2; }
.tlv-dot.tlv-approval { top: 24px; width: 16px; height: 16px; background: var(--tlv-ink);
  border-width: 2.5px; box-shadow: 0 0 0 1px var(--tlv-track-past); z-index: 3; }
.tlv-dot.tlv-excl { background: var(--tlv-green); box-shadow: 0 0 0 1px var(--tlv-green); }
.tlv-dot.tlv-nce1 { background: var(--tlv-red); box-shadow: 0 0 0 1px var(--tlv-red);
  width: 13px; height: 13px; top: 25.5px; z-index: 3; }
/* ahead = outlined; expired = filled */
.tlv-dot.tlv-patent.future { top: 24px; width: 15px; height: 15px; background: var(--tlv-paper);
  border: 2.5px solid var(--tlv-blue); box-shadow: none; }
.tlv-dot.tlv-excl.future { top: 24px; width: 15px; height: 15px; background: var(--tlv-paper);
  border: 2.5px solid var(--tlv-green); box-shadow: none; }
.tlv-dot.tlv-nce1.future { background: var(--tlv-paper); border: 2.5px solid var(--tlv-red);
  box-shadow: none; width: 15px; height: 15px; top: 24px; }
.tlv-dot:hover { filter: brightness(.85); }
.tlv-band { top: 26px; height: 12px; border-radius: 0; transform: none; border: 0;
  border-left: 1px solid var(--tlv-purple); border-right: 1px solid var(--tlv-purple);
  background: oklch(0.52 0.13 310 / .14); z-index: 1; }
.tlv-band:hover { background: oklch(0.52 0.13 310 / .24); }
.tlv-band-cap { position: absolute; top: 44px; text-align: center; font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--tlv-purple-dk); white-space: nowrap;
  pointer-events: none; }
.tlv-today { position: absolute; top: 6px; bottom: 22px; border-left: 2px dashed var(--tlv-gold);
  transform: translateX(-1px); z-index: 1; }
.tlv-today-lbl { position: absolute; top: -6px; transform: translateX(-50%); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tlv-gold-7);
  background: var(--tlv-paper); padding: 0 6px; line-height: 1.2; z-index: 2; }
.tlv-years { position: relative; height: 22px; border-top: 1px solid var(--line);
  margin-top: 0; }
.tlv-years span { position: absolute; top: 8px; transform: translateX(-50%); font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--tlv-muted); white-space: nowrap; }
.tlv-years span:first-child { transform: none; }
.tlv-years span:last-child { transform: translateX(-100%); }

/* --- legend: pill chips in the category hue --- */
.tlv-legend { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.tlv-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--tlv-track);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--tlv-ink); line-height: 1.2; }
.tlv-sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  background: var(--tlv-ink); flex-shrink: 0; }
.tlv-chip-suppl { border-color: var(--tlv-purple); color: var(--tlv-purple-dk);
  background: oklch(0.52 0.13 310 / .08); }
.tlv-sw-suppl { border-radius: 3px; background: oklch(0.52 0.13 310 / .3); border: 1.5px solid var(--tlv-purple); }
.tlv-chip-excl { border-color: var(--tlv-green); color: var(--tlv-green-dk);
  background: oklch(0.48 0.12 145 / .08); }
.tlv-sw-excl { background: var(--tlv-green); }
.tlv-chip-patent { border-color: var(--tlv-blue); color: var(--tlv-blue-dk);
  background: oklch(0.5 0.11 265 / .08); }
.tlv-sw-patent { background: var(--tlv-blue); }
.tlv-chip-patent-ahead { border-color: var(--tlv-blue); color: var(--tlv-blue-dk); }
.tlv-sw-patent-ahead { background: var(--tlv-paper); border: 2.5px solid var(--tlv-blue); }
.tlv-chip-nce1 { border-color: var(--tlv-red); color: var(--tlv-red-dk);
  background: oklch(0.5 0.14 25 / .08); }
.tlv-sw-nce1 { background: var(--tlv-red); }
.tlv-chip-today { border-color: var(--tlv-gold); color: var(--tlv-gold-dk); }
.tlv-sw-today { width: 2px; height: 12px; border-radius: 0; background: none;
  border-left: 2px dashed var(--tlv-gold); }
.tlv-toggle-row { display: flex; justify-content: center; border-top: 1px solid var(--line);
  margin-top: 18px; padding-top: 14px; }
.tlv-toggle { font-size: 13.5px; color: var(--tlv-gold-7); text-decoration: none;
  border-bottom: 1px solid var(--tlv-gold); }
.tlv-toggle:hover { color: var(--tlv-ink); text-decoration: none; }

/* --- the record ledger --- */
.tlv-ledger { display: grid; grid-template-columns: 150px 1fr; column-gap: 0; margin-top: 34px; }
.tlv-ledger[hidden] { display: none; }
.tlv-kicker { grid-column: 1 / -1; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tlv-gold-7); padding-bottom: 10px; }
.tlv-rail { border-right: 1px solid var(--line); padding: 16px 24px 16px 0; text-align: right; }
.tlv-year { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px;
  line-height: 1.1; font-feature-settings: "lnum" 1, "tnum" 1; color: var(--tlv-ink); }
.tlv-sub { margin: 2px 0 0; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--tlv-muted); }
.tlv-row { position: relative; border-top: 1px solid var(--line); padding: 16px 0 16px 28px; min-width: 0; }
.tlv-ledger > .tlv-row:last-child { border-bottom: 1px solid var(--line); }
.tlv-node { position: absolute; left: -6.5px; top: 22px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tlv-ink); border: 2px solid var(--tlv-paper); box-sizing: content-box; }
.tlv-node.tlv-patent { background: var(--tlv-blue); }
.tlv-node.tlv-excl { background: var(--tlv-green); }
.tlv-node.tlv-nce1 { background: var(--tlv-red); }
.tlv-node.tlv-suppl { border-radius: 3px; background: oklch(0.52 0.13 310 / .25);
  border: 1.5px solid var(--tlv-purple); box-sizing: border-box; }
.tlv-row.future .tlv-node { left: -7.5px; top: 21px; width: 14px; height: 14px; background: var(--tlv-paper);
  border: 2.5px solid var(--tlv-ink); box-sizing: border-box; }
.tlv-row.future .tlv-node.tlv-patent { border-color: var(--tlv-blue); }
.tlv-row.future .tlv-node.tlv-excl { border-color: var(--tlv-green); }
.tlv-row.future .tlv-node.tlv-nce1 { border-color: var(--tlv-red); }
.tlv-title { margin: 0; font-size: 14px; line-height: 22px; display: flex; align-items: baseline;
  gap: 12px; flex-wrap: wrap; }
.tlv-title b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tlv-annot { color: var(--tlv-dim); }
.tlv-note { margin: 3px 0 0; font-size: 12px; color: var(--tlv-muted); }
.tlv-note a, .tlv-more { color: var(--tlv-gold-7); text-decoration: none; }
.tlv-more:hover { text-decoration: underline; }
.tlv-pill { font-size: 11px; font-variant-numeric: tabular-nums; border: 1px solid var(--tlv-blue);
  border-radius: 999px; padding: 2px 10px; color: var(--tlv-blue-dk); white-space: nowrap; line-height: 1.4; }
.tlv-pill-excl { border-color: var(--tlv-green); color: var(--tlv-green-dk); }
.tlv-pill-nce1 { border-color: var(--tlv-red); color: var(--tlv-red-dk); }
.tlv-pill.cliff { border-color: var(--tlv-gold); color: var(--tlv-gold-dk);
  background: rgba(182, 130, 53, .10); }
.tlv-todayrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 20px 0; }
.tlv-todayrow > span:first-child, .tlv-todayrow > span:last-child { flex: 1; border-top: 2px dashed var(--tlv-gold); }
.tlv-todayrow-lbl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tlv-gold-7); font-variant-numeric: tabular-nums; }
.tlv-items { margin-top: 10px; border-top: 1px dotted var(--line); padding-top: 4px; }
.tlv-items[hidden] { display: none; }
.tlv-item { position: relative; display: flex; gap: 12px; align-items: baseline; padding: 6px 0;
  font-size: 13px; border-bottom: 1px dotted var(--line); }
.tlv-item:last-child { border-bottom: 0; }
.tlv-item .tlv-node-sm { position: absolute; left: -32px; top: 11px; width: 8px; height: 8px; }
.tlv-item-date { flex-shrink: 0; min-width: 96px; font-size: 11.5px; color: var(--tlv-muted);
  font-variant-numeric: tabular-nums; }
.tlv-item-text b { font-weight: 600; }
.tlv-hit { background: rgba(182, 130, 53, .10); }
/* page text size (the gear beside the profile tools): the section cards zoom */
.drug-profile > .card, .drug-profile > details.card { zoom: var(--content-zoom, 1); }
.tsz-wrap { position: relative; }
.tsz-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 12px 32px rgba(45, 43, 43, .18); padding: 8px 4px 6px; }
.tsz-pop[hidden] { display: none; }

@media (max-width: 720px) {
  .tlv-strip { padding: 22px 16px 16px; }
  .tlv-ledger { grid-template-columns: 96px 1fr; }
  .tlv-rail { padding-right: 14px; }
  .tlv-year { font-size: 19px; }
  .tlv-row { padding-left: 18px; }
  .tlv-item .tlv-node-sm { left: -22px; }
  .tlv-band-cap { font-size: 10.5px; }
}
@media print {
  .tlv-ledger[hidden], .tlv-items[hidden] { display: grid !important; }
  .tlv-items[hidden] { display: block !important; }
  .tlv-toggle-row, .tlv-more { display: none !important; }
}

/* ------------------------------------------------ exclusivity glossary panel */
a.excl-code {
  color: var(--navy-2); border-bottom: 1.5px dashed var(--accent);
  text-decoration: none; cursor: help;
}
a.excl-code:hover { color: var(--navy); text-decoration: none; border-bottom-style: solid; }
#gloss {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
  background: var(--bg); z-index: 130; display: flex; flex-direction: column;
  box-shadow: -10px 0 32px rgba(10, 18, 34, .3);
  transform: translateX(100%); transition: transform .2s ease-out;
}
#gloss.open { transform: none; }
.gloss-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--navy); flex-shrink: 0;
}
.gloss-body { overflow-y: auto; padding: 20px 20px 30px; }
.gloss-code {
  display: inline-block; background: var(--navy); color: var(--gold, #c9a04e);
  color: #e3bc6a; font-weight: 800; font-size: 22px; letter-spacing: .5px;
  border-radius: 9px; padding: 6px 16px; margin-bottom: 14px;
}
.gloss-term { font-size: 13px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.gloss-def { font-size: 15.5px; color: var(--text); line-height: 1.55; margin: 0 0 14px; }
.gloss-src { border-top: 1px solid var(--line); padding-top: 10px; }
/* ------------------------------------------------ change history */
.ch-list { list-style: none; padding: 0; margin: 14px 0 0; }
.ch-list li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px;
}
.ch-list li:last-child { border-bottom: none; }
.ch-date { font-weight: 700; color: var(--navy); flex-shrink: 0; }
.ch-text { color: var(--muted); }
.ch-empty { margin-top: 10px; }
.ch-baseline { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.ch-baseline summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--navy-2);
}
.ch-baseline summary:hover { color: var(--navy); }
.ch-baseline[open] summary { margin-bottom: 6px; }
.ch-cat {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; border-radius: 5px; padding: 2px 8px; flex-shrink: 0;
}
/* PIV panel */
.piv-card { border-left: 4px solid var(--hot); }

/* dashboard: equal-size cards, one screen, scroll inside each card */
.dash-grid {
  display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dash-card {
  display: flex; flex-direction: column; margin-bottom: 0;
  height: calc((100vh - 210px) / 2); min-height: 250px; max-height: 460px;
  padding: 16px 18px;
}
.dash-card h2 { flex-shrink: 0; font-size: 15.5px; margin-bottom: 8px; }
.dash-card-body { flex: 1; overflow-y: auto; overflow-x: auto; }
.dash-card-body table { font-size: 13px; }
.dash-card-body thead th {
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
.dash-card-body td, .dash-card-body th { padding: 6px 8px; }
@media (max-width: 720px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-card { max-height: 340px; }
}

/* ---------------------------------------- customizable dashboard cards */
.dash-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-head h1 { margin: 0; }
.dash-toolbar { display: flex; align-items: center; gap: 10px; }
/* gear button holding Add-a-card + Reset layout */
.dash-gear-wrap { position: relative; }
.dash-gear { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.dash-gear:hover { color: var(--navy); background: #f6f7f9; }
.dash-gear-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(10, 18, 34, .18); padding: 8px; min-width: 250px;
  max-height: 420px; overflow: auto; }
.dgm-label { padding: 4px 10px 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.dash-add-list { display: flex; flex-direction: column; max-height: 280px; overflow: auto; }
.dash-add-item { display: block; width: 100%; text-align: left; border: 0;
  background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 13.5px;
  color: var(--navy); cursor: pointer; }
.dash-add-item:hover { background: #f2f5fa; }
.dash-add-empty { padding: 8px 10px; color: var(--muted); font-size: 13px; }
.dgm-reset { display: block; width: 100%; text-align: left; border: 0;
  background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 13.5px;
  color: var(--text); cursor: pointer; }
.dgm-reset:hover { background: #fdecea; color: var(--hot); }
.dash-saved { font-size: 12.5px; color: #14663c; font-weight: 600; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--navy); border-color: var(--line); }

.dash-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; grid-auto-rows: var(--dash-card-h, 360px); }
/* Every card is exactly one row tall, so they tile evenly however they're moved. */
.dash-cards > [data-card] { margin: 0 !important; height: 100% !important;
  overflow-y: auto; overflow-x: hidden; }
.dash-cards > [data-card][data-width="full"] { grid-column: 1 / -1; }
.dash-cards > [data-card][hidden] { display: none !important; }
.dash-cards > [data-card].dragging { opacity: .45;
  outline: 2px dashed var(--accent); outline-offset: 2px; }

.dcard-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  position: sticky; top: 0; background: #fff; z-index: 4; }
/* card title in the top-left of the control bar */
.dcard-title { font-size: 14px; font-weight: 700; color: var(--navy);
  line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* the title now lives in the bar — hide the duplicate in-content heading
   (table h2s sit inside .dcard-content, which is display:contents, so the
   old ".dash-card > h2" child selector never matched them) */
.dash-cards .viz-title, .dash-cards .hero-chart-title,
.dash-cards h2 { display: none; }
/* round "?" beside the title — toggles the what-is-this description */
.dcard-help { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: #fff; color: #9aa3b0; padding: 0;
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; }
.dcard-help:hover, .dcard-help.active { color: var(--navy);
  border-color: var(--navy-2); background: #f2f5fa; }
/* the description itself: pinned to the visible bottom edge of the card */
.dcard-desc { position: sticky; bottom: 0; background: #fff; z-index: 3;
  border-top: 1px solid var(--line); margin-top: 10px; padding: 8px 2px 2px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* drag handle + resize + remove grouped together on the right */
.dcard-actions { margin-left: auto; display: flex; align-items: center; gap: 3px;
  flex-shrink: 0; }
.dcard-handle { cursor: grab; color: var(--accent); font-size: 17px; line-height: 1;
  user-select: none; padding: 2px 5px; letter-spacing: -2px; }
.dcard-handle:hover { color: #a9843a; }
.dcard-handle:active { cursor: grabbing; }
.dcard-btn { border: 0; background: transparent; color: #9aa3b0; cursor: pointer;
  font-size: 13px; padding: 3px 7px; border-radius: 6px; line-height: 1; }
.dcard-btn:hover { background: #f2f5fa; color: var(--navy); }
[data-width="full"] .dcard-resize { color: var(--accent); }

/* per-card timeframe switcher — only shown when the card is expanded */
.dcard-tf { display: none; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 0 0 10px; }
.dash-cards > [data-card][data-width="full"] .dcard-tf { display: flex; }
.dtf-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-right: 4px; }
.dtf-btn { border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  cursor: pointer; }
.dtf-btn:hover { border-color: #c9ccd2; color: var(--navy); }
.dtf-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* master timeframe switch (applies to every card at once) */
.dash-master-tf { display: flex; align-items: center; gap: 4px; }
.dash-master-tf .dmtf-lbl { font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.dmtf-btn { border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  cursor: pointer; }
.dmtf-btn:hover { border-color: #c9ccd2; color: var(--navy); }
.dmtf-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 620px) { .dash-master-tf .dmtf-lbl { display: none; } }

/* ===== dashboard aesthetic refresh — flat, airy, typography-forward ===== */
.dash-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dash-head h1 { font-size: 27px; letter-spacing: -.6px; color: var(--navy); }
.dash-cards { gap: 18px; grid-auto-rows: var(--dash-card-h, 400px); }
/* flat, borderless cards — definition comes from the light page behind them */
.dash-cards > [data-card] { border: none; box-shadow: none; background: #fff;
  border-radius: 14px; padding: 20px 22px; transition: background .15s ease; }
.dash-cards > [data-card].dragging { background: #fbfcfe; }
/* content wrapper is layout-transparent so cards keep their flex/block flow;
   it exists only so a timeframe change can swap one card's content in place */
.dcard-content { display: contents; }
.dash-cards > [data-card].dcard-loading { opacity: .55; transition: opacity .12s ease; }
/* keep the whole chart in view: cap its height so a full-width card never scrolls,
   and enlarge the axis / value labels so they stay legible when the card is small */
.dash-cards .viz-svg, .dash-cards .nce-bars { max-height: 232px; }
.dash-cards .viz-tick, .dash-cards .viz-yr, .dash-cards .nce-yr { font-size: 17px; }
.dash-cards .viz-val, .dash-cards .prod-val { font-size: 14px; }
.dash-cards .nce-val { font-size: 15px; }
.dash-cards .viz-grid { stroke-width: 1; }
/* sentence-case, prominent card titles */
.dcard-title { font-size: 15.5px; font-weight: 600; text-transform: none;
  letter-spacing: -.2px; color: var(--navy); }
.dcard-bar { margin-bottom: 6px; }
.dcard-btn { color: #c4c9d2; }
.dcard-handle { font-size: 16px; }
/* big hero numbers in the chart heads (the reference's headline motif) */
.dchero { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap;
  margin: 2px 0 3px; }
.dchero-num { font-size: 34px; font-weight: 600; line-height: 1; color: var(--navy);
  letter-spacing: -1.2px; }
.dchero-num-2 { margin-left: 10px; }
.dchero-lbl { font-size: 12.5px; color: var(--muted); }
.viz-card .viz-sub, .hero-chart-sub { font-size: 12px; }
/* bigger, lighter NCE hero stats */
.hero-stat-num { font-size: 32px; font-weight: 600; letter-spacing: -1px; }
.hero-stat-lbl { font-size: 11px; }
/* softer timeframe pills, light active state like the reference toggles */
.dtf-btn { border-radius: 9px; border-color: #edeff3; background: #f6f7f9; padding: 4px 12px; }
.dtf-btn:hover { background: #eef1f5; border-color: #e3e6eb; color: var(--navy); }
.dtf-btn.active { background: #eaf0fb; color: #2b3a67; border-color: #d6e2f5; }
/* smooth teal pulse line with gradient fill */
.pulse-line { stroke: #2f9e8f; stroke-width: 2.5; }
.pulse-area { fill: url(#pulse-grad); }
.pdot-mark { fill: #2f9e8f; }
.pdot:hover .pdot-mark, .pdot:focus .pdot-mark { fill: #1f7a6e; }
/* PTAB challenges pulse — crimson, to read as adversarial/at-risk */
.ptab-pulse .pulse-line { stroke: #c0455b; }
.ptab-pulse .pulse-area { fill: url(#ptab-grad); }
.ptab-pulse .pdot-mark { fill: #c0455b; }
.ptab-pulse .pdot:hover .pdot-mark, .ptab-pulse .pdot:focus .pdot-mark { fill: #9a3446; }
/* district-court litigation pulse — plum, a step darker than PTAB's crimson */
.lit-pulse .pulse-line { stroke: #8c3a63; }
.lit-pulse .pulse-area { fill: url(#lit-grad); }
.lit-pulse .pdot-mark { fill: #8c3a63; }
.lit-pulse .pdot:hover .pdot-mark, .lit-pulse .pdot:focus .pdot-mark { fill: #6e2c4d; }

@media (max-width: 760px) {
  /* minmax(0,1fr), NOT bare 1fr: a 1fr track can't shrink below its content's
     min-content width, so a wide chart svg pushed every card past the phone
     viewport (cut off on the right). */
  .dash-cards { grid-template-columns: minmax(0, 1fr); }
  .dash-cards > [data-card][data-width="full"] { grid-column: auto; }
}

/* ---------------------------------------- graphical hero card (NCE-1 pipeline) */
.hero-chart { position: relative; padding: 18px 20px 12px; margin-bottom: 16px; }
.hero-chart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 6px;
}
.hero-chart-title { font-size: 16px; margin: 0; color: var(--navy); }
.hero-chart-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.hero-stats { display: flex; gap: 26px; }
.hero-stat { display: flex; flex-direction: column; align-items: flex-end; }
.hero-stat-num { font-size: 26px; font-weight: 700; line-height: 1; color: var(--navy); }
.hero-stat-num.hs-gold { color: var(--accent); }
.hero-stat-lbl {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .4px; margin-top: 4px;
}

.nce-bars { display: block; width: 100%; height: auto; margin-top: 4px; }
.nce-axis { stroke: var(--line); stroke-width: 1.5; }
.nce-bar rect {
  fill: var(--navy-2); transition: fill .12s ease;
}
.nce-bar.is-current rect { fill: var(--accent); }
.nce-bar:hover rect, .nce-bar:focus rect { fill: var(--navy); }
.nce-bar.is-current:hover rect, .nce-bar.is-current:focus rect { fill: #b8903f; }
.nce-bar { cursor: pointer; outline: none; text-decoration: none; }

/* ------------------------------------------------ dashboard charts (viz) */
/* Timeline (left) + indications donut (right) sit side by side; stack when narrow. */
.charts-row { display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.charts-row > .card { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
@media (max-width: 860px) { .charts-row { flex-wrap: wrap; } .charts-row > .card { flex-basis: 100%; } }
.viz-card { padding: 18px 20px 12px; margin-bottom: 16px; }
.viz-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.viz-title { font-size: 16px; margin: 0; color: var(--navy); }
.viz-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.viz-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.viz-legend .lg { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text); }
.viz-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-sub { background: #c9a04e; } .sw-mou { background: #3a6ea5; } .sw-prod { background: #a85d3a; }
.viz-svg { display: block; width: 100%; height: auto; margin-top: 2px; }
.viz-grid { stroke: #e9ecf1; stroke-width: 1; }
.viz-tick { fill: var(--muted); font-size: 10.5px; text-anchor: end; }
.viz-yr { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.viz-val { fill: var(--navy); font-size: 11px; font-weight: 700; text-anchor: middle; }

/* stacked cliff columns */
.seg-substance { fill: #c9a04e; } .seg-mou { fill: #3a6ea5; } .seg-product { fill: #a85d3a; }
.cbar { cursor: pointer; outline: none; }
.cbar .seg { transform-box: fill-box; transform-origin: center bottom;
  animation: nce-rise .6s cubic-bezier(.22,.75,.3,1) calc(var(--i,0)*60ms) backwards; }
.cbar:hover .seg, .cbar:focus .seg { filter: brightness(1.08); }
.cbar .viz-val { animation: nce-fade .3s ease-out .5s backwards; }

/* pulse line */
.pulse-area { fill: rgba(31,51,85,.08); }
.pulse-line { fill: none; stroke: #1f3355; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.pdot-mark { fill: #1f3355; stroke: #fff; stroke-width: 1.5; }
.pdot-hit { fill: transparent; }
.pdot { cursor: pointer; outline: none; }
.pdot:hover .pdot-mark, .pdot:focus .pdot-mark { r: 5; fill: var(--accent); }

/* new-products stacked bars (Orange + Purple), rising on load */
.ptbar { cursor: default; outline: none; }
.ptseg { transform-box: fill-box; transform-origin: center bottom;
  animation: nce-rise .6s cubic-bezier(.22,.75,.3,1) calc(var(--i,0)*70ms) backwards; }
.ptbar:hover .ptseg, .ptbar:focus .ptseg { filter: brightness(1.07); }
.prod-val { animation: nce-fade .3s ease-out calc(.45s + var(--i,0)*70ms) backwards; }

/* patent flux — diverging bars around a zero line (added up, delisted down) */
.flux-zero { stroke: #9aa3b0; stroke-width: 1.5; }
.fbar { cursor: pointer; outline: none; }
.flux-add { fill: #1b9e77; transform-box: fill-box; transform-origin: center bottom;
  animation: nce-rise .55s cubic-bezier(.22,.75,.3,1) calc(var(--i,0)*90ms) backwards; }
.flux-del { fill: #d95f02; transform-box: fill-box; transform-origin: center top;
  animation: nce-rise .55s cubic-bezier(.22,.75,.3,1) calc(var(--i,0)*90ms) backwards; }
.fbar:hover .flux-add, .fbar:focus .flux-add,
.fbar:hover .flux-del, .fbar:focus .flux-del { filter: brightness(1.08); }

/* Paragraph IV pulse — line draws in, area fades, dots pop, on each load */
.pulse.animate .pulse-line { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: pulse-draw 1.1s ease-out forwards; }
.pulse.animate .pulse-area { opacity: 0; animation: pulse-fill .7s ease-out .55s forwards; }
.pulse.animate .pdot { opacity: 0;
  animation: pulse-fill .3s ease-out calc(.7s + var(--i,0)*.09s) forwards; }
@keyframes pulse-draw { to { stroke-dashoffset: 0; } }
@keyframes pulse-fill { to { opacity: 1; } }

.fbar .viz-val { animation: nce-fade .3s ease-out .5s backwards; }

/* The entrance plays on a page's first visit this session (html.entrance,
   set in the head script); afterwards, and for reduced motion, charts are
   simply there. */
@media (prefers-reduced-motion: reduce) {
  .cbar .seg, .cbar .viz-val, .ptseg, .prod-val, .flux-add, .flux-del,
  .fbar .viz-val, .nce-bar rect, .nce-bar .nce-val,
  .pulse.animate .pulse-line, .pulse.animate .pulse-area,
  .pulse.animate .pdot { animation: none; }
  .pulse.animate .pulse-line { stroke-dashoffset: 0; }
  .pulse.animate .pulse-area, .pulse.animate .pdot { opacity: 1; }
}
html:not(.entrance) .cbar .seg, html:not(.entrance) .cbar .viz-val,
html:not(.entrance) .ptseg, html:not(.entrance) .prod-val,
html:not(.entrance) .flux-add, html:not(.entrance) .flux-del,
html:not(.entrance) .fbar .viz-val,
html:not(.entrance) .nce-bar rect, html:not(.entrance) .nce-bar .nce-val,
html:not(.entrance) .pulse.animate .pulse-line,
html:not(.entrance) .pulse.animate .pulse-area,
html:not(.entrance) .pulse.animate .pdot { animation: none; }
html:not(.entrance) .pulse.animate .pulse-line { stroke-dashoffset: 0; }
html:not(.entrance) .pulse.animate .pulse-area,
html:not(.entrance) .pulse.animate .pdot { opacity: 1; }

/* shared chart tooltip */
.viz-tip { position: absolute; z-index: 40; pointer-events: none;
  background: var(--navy); color: #fff; font-size: 12px; line-height: 1.45;
  padding: 7px 10px; border-radius: 7px; box-shadow: 0 6px 18px rgba(10,18,34,.28);
  transform: translate(-50%, -100%); white-space: nowrap; }
.viz-tip b { color: var(--gold-bright, #e3bc6a); }
.viz-card { position: relative; }

/* click-a-month drill-down panel under a chart */
.ptbar, .pdot { cursor: pointer; }
.chart-detail { margin-top: 14px; border: 1px solid var(--line);
  border-radius: 10px; background: #fbfcfe; overflow: hidden; }
.cd-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px; background: #f2f5fa; border-bottom: 1px solid var(--line);
  font-weight: 700; color: var(--navy); font-size: 14px; }
.cd-close { border: 0; background: transparent; font-size: 20px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px; }
.cd-close:hover { color: var(--navy); }
.cd-body { padding: 12px 14px; }
.cd-summary { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.cd-scroll { max-height: 340px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 8px; }
.cd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cd-table th { position: sticky; top: 0; background: #fff; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--muted);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; z-index: 1; }
.cd-table td { padding: 8px 10px; border-bottom: 1px solid #eef1f5;
  vertical-align: top; }
.cd-table tr:last-child td { border-bottom: 0; }
.mini-badge { display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.mb-ob { background: #f7e6cf; color: #8a5510; }
.mb-pb { background: #ebe4f8; color: #5a3ea0; }
.mb-add { background: #dcf1e7; color: #12633b; }
.mb-del { background: #fbe6d4; color: #9a4409; }
.mb-anda { background: #e2edfa; color: #1d4f8b; }

/* federal-litigation card (patent profile + drawer) */
.lit-case { padding: 9px 0; border-top: 1px solid var(--line); }
.lit-card .lit-case:first-of-type, .d-sec-body .lit-case:first-of-type { border-top: 0; }
/* case numbers and dates break at their hyphens otherwise */
.lit-table td.mono { white-space: nowrap; }
.lit-case-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lit-notices { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 13px; }
.lit-notices-lbl { font-weight: 600; }
.lit-notice-date { white-space: nowrap; }

/* ------------------------------------------------ free-preview gate */
.preview-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; background: #fff6e0; border: 1px solid #f0dfb8;
  color: #8a6116; border-radius: 10px; padding: 11px 16px; margin-bottom: 18px;
  font-size: 14px;
}
.container.preview-locked { filter: blur(6px); pointer-events: none; user-select: none; }
.preview-lock {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; background: rgba(13, 22, 38, .5); padding: 20px;
}
.preview-lock-card {
  background: #fff; border-radius: 16px; padding: 34px 32px; max-width: 460px;
  text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}
.preview-lock-ico { font-size: 34px; margin-bottom: 6px; }
.preview-lock-card h2 { color: var(--navy); margin-bottom: 10px; font-size: 22px; }
.preview-lock-card p { color: var(--muted); font-size: 14.5px; margin-bottom: 8px; }
.preview-lock-card .btn { margin-top: 10px; }


/* applications-by-year stacked bars (company profile) */
.seg-ob-apps { fill: #e0872e; }
.seg-pb-apps { fill: #7c5cbf; }
.tlbar { outline: none; }
.tlbar:hover .seg-ob-apps, .tlbar:focus .seg-ob-apps { fill: #c9761f; }
.tlbar:hover .seg-pb-apps, .tlbar:focus .seg-pb-apps { fill: #6a4bb0; }

/* indication donut (therapeutic-area breakdown) */
.indi-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.indi-svg { width: 180px; height: 180px; flex-shrink: 0; }
.indi-c-n { text-anchor: middle; font-size: 27px; font-weight: 800; fill: var(--navy); }
.indi-c-l { text-anchor: middle; font-size: 10.5px; fill: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; }
.indi-legend { display: flex; flex-direction: column; gap: 7px; min-width: 240px; flex: 1 1 240px; }
.indi-leg { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.indi-leg .sw { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }
.indi-leg .nm { color: var(--text); }
.indi-leg .ct { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.indi-slice { transition: opacity .12s; }
.indi-slice:hover { opacity: .82; }
.indi-leg:hover .nm { color: var(--navy-2); text-decoration: underline; }
.indi-detail {
  margin-top: 16px; border: 1px solid var(--line); border-radius: 10px;
  background: #fbfcfd; padding: 4px 16px 12px;
}
.indi-detail-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 0 8px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.indi-detail-head strong { color: var(--navy); }
.indi-close {
  margin-left: auto; background: none; border: 0; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.indi-close:hover { color: var(--hot); }
.indi-item { padding: 11px 0; border-bottom: 1px solid var(--line); }
.indi-item:last-child { border-bottom: 0; }
.indi-item-name { font-weight: 700; color: var(--navy-2); }
.indi-item-txt { margin: 4px 0 0; font-size: 13.5px; color: var(--text); line-height: 1.5; }

/* book grouping on profiles — Orange Book (orange hue) vs Purple Book (purple) */
.book-group {
  border: 1.5px solid; border-radius: 14px; padding: 4px 14px 14px;
  margin-bottom: 18px;
}
.book-group-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  font-weight: 700; padding: 10px 2px; cursor: pointer; user-select: none;
  list-style: none; display: flex; align-items: center; gap: 7px;
}
.book-group-label::-webkit-details-marker { display: none; }
.book-group-label::before {
  content: "\25B8"; font-size: 11px; transition: transform .15s ease;
}
details[open] > .book-group-label::before { transform: rotate(90deg); }
.book-group-label:hover { opacity: .8; }
.book-group-ob { border-color: #e6b184; background: rgba(224, 138, 60, .05); }
.book-group-ob .book-group-label { color: #b06a24; }
.book-group-pb { border-color: #c1a9e6; background: rgba(124, 92, 191, .06); }
.book-group-pb .book-group-label { color: #6a49b0; }

/* ------------------------------------------------ Orange Book Plus */
.obp-hero { text-align: center; padding: 26px 16px 22px; }
.obp-hero.obp-tall { padding: 20vh 16px 40px; }
.obp-hero h1 { font-size: 34px; margin: 0 0 6px; color: var(--navy); }
.obp-gold { color: var(--accent); }
.rx-x { font-size: 0.66em; vertical-align: -0.2em; margin-left: -0.03em; }
/* pill search bar with circular icon button (app-wide) */
.searchbar {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 640px;
  margin: 0 auto; background: #fff; border: 1px solid #e3e6eb;
  border-radius: 999px; padding: 6px 7px 6px 22px;
  box-shadow: 0 8px 24px rgba(20, 30, 50, .07);
  transition: border-color .15s, box-shadow .15s;
}
.searchbar:focus-within { border-color: #cfd6df; box-shadow: 0 10px 28px rgba(20, 30, 50, .13); }
.searchbar input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 17px; color: var(--text); padding: 11px 0;
}
.searchbar input::placeholder { color: #8ba0c4; }
.searchbar button {
  flex-shrink: 0; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--navy); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: background .15s, transform .1s;
}
.searchbar button:hover { background: #b8903f; }
.searchbar button:active { transform: scale(.94); }

/* live typeahead dropdown under the Rx Book search box */
.obp-search { position: relative; }
.obp-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(10, 18, 34, .18); padding: 6px; text-align: left;
  max-height: 60vh; overflow: auto; }
.obp-sug-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 11px; text-decoration: none; color: var(--text); }
.obp-sug-item:hover, .obp-sug-item.active { background: #f2f5fa; text-decoration: none; }
.obp-sug-type { flex-shrink: 0; width: 76px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.obp-sug-main { display: flex; flex-direction: column; min-width: 0; }
.obp-sug-main strong { color: var(--navy); font-size: 14.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obp-sug-sub { font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obp-sug-item.obp-sug-more { display: block; text-align: center; padding: 10px 12px;
  margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); }
.obp-sug-item.obp-sug-more:hover, .obp-sug-item.obp-sug-more.active {
  background: #faf3e4; color: #a9843a; }
.searchbar button svg { width: 20px; height: 20px; }
.obp-search { margin-top: 18px; }
.obp-hints { margin-top: 12px; }
.obp-hints a { color: var(--navy-2); text-decoration: underline; }
.obp-count {
  background: var(--accent); color: var(--navy); border-radius: 10px;
  font-size: 12px; font-weight: 700; padding: 1px 8px; margin-left: 6px;
  vertical-align: middle;
}

/* year drill-down banner on the NCE tracker */
/* NCE tracker page chart (reuses the dashboard's nce-bars styling) */
.nce-tracker-chart .dtf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
a.dtf-btn { text-decoration: none; }

/* Legal Challenges forum toggle */
.legal-views { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
/* EPO view: long opponent lists wrap inside a capped column */
td.opp-names { max-width: 340px; white-space: normal; }
.nce-tracker-chart .nce-bars { max-height: 280px; }

/* Patent Watch page chart (reuses the dashboard's flux bars; the bars are
   links that filter the table, like the NCE tracker's) */
.watch-flux-chart .dtf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.watch-flux-chart .viz-svg { max-height: 280px; }
.watch-flux-chart .viz-side { display: flex; flex-direction: column;
  align-items: flex-end; gap: 8px; }
a.fbar { text-decoration: none; }
.sw-add { background: #1b9e77; }
.sw-del { background: #d95f02; }

.year-drill {
  background: #fff6e0; border: 1px solid #f0dfb8; color: #8a6116;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.year-drill strong { color: var(--navy); }
.nce-val {
  fill: var(--text); font-size: 12px; font-weight: 600; text-anchor: middle;
}
.nce-yr { fill: var(--muted); font-size: 11.5px; text-anchor: middle; }

/* bars rise from the baseline on page load, staggered left to right;
   count labels fade in once their bar has landed */
.nce-bar rect {
  transform-box: fill-box; transform-origin: center bottom;
  animation: nce-rise .65s cubic-bezier(.22, .75, .3, 1)
             calc(var(--i, 0) * 70ms) backwards;
}
.nce-bar .nce-val {
  animation: nce-fade .35s ease-out calc(var(--i, 0) * 70ms + .5s) backwards;
}
@keyframes nce-rise { from { transform: scaleY(0); } }
@keyframes nce-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nce-bar rect, .nce-bar .nce-val { animation: none; }
}

/* Billing: Standard vs Premium switcher */
.plan-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 14px 0 10px; }
.plan-opt { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.plan-opt.current { border-color: var(--accent); background: #fdfaf3; }
.plan-opt-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px; }
.plan-opt-price { color: var(--muted); font-size: 13px; white-space: nowrap; }
@media (max-width: 560px) { .plan-switch { grid-template-columns: 1fr; } }

/* footer link under a dashboard chart, e.g. NCE card → full tracker */
.viz-more { display: block; text-align: left; font-size: 13px; font-weight: 600;
  color: var(--accent); text-decoration: none; margin-top: 4px; }
.viz-more:hover { text-decoration: underline; }
/* pin the tracker links to the bottom edge of their cards: the card lays out
   as a column and the link soaks up the leftover space above it */
.dash-cards > [data-card="chart_nce"],
.dash-cards > [data-card="chart_piv"],
.dash-cards > [data-card="chart_ptab"] { display: flex; flex-direction: column; }
.dash-cards > [data-card="chart_nce"] .nce-bars,
.dash-cards > [data-card="chart_piv"] .viz-svg,
.dash-cards > [data-card="chart_ptab"] .viz-svg { flex-shrink: 0; }
.dash-cards > [data-card="chart_nce"] .viz-more,
.dash-cards > [data-card="chart_piv"] .viz-more,
.dash-cards > [data-card="chart_ptab"] .viz-more { margin-top: auto;
  padding: 8px 0 2px; }

.nce-tip {
  position: absolute; transform: translate(-50%, -100%);
  background: var(--navy); color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  z-index: 5; box-shadow: 0 4px 12px rgba(22, 36, 61, .22);
}
.nce-tip::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--navy);
}
@media (max-width: 720px) {
  .hero-chart-head { gap: 12px; }
  .hero-stats { gap: 18px; }
  .hero-stat-num { font-size: 22px; }
}

/* sortable / filterable / resizable data tables */
table.datatable thead tr:first-child th {
  position: relative; cursor: pointer; user-select: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
table.datatable thead tr:first-child th:hover { color: var(--navy-2); }
.dt-caret { font-size: 9px; margin-left: 5px; color: #b7c0cd; }
th.dt-asc .dt-caret, th.dt-desc .dt-caret { color: var(--accent); }
.dt-resize {
  position: absolute; top: 0; right: 0; width: 11px; height: 100%;
  cursor: col-resize; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
/* Persistent divider grip so it's visible that columns can be resized */
.dt-resize::before {
  content: ""; width: 2px; height: 55%;
  background: var(--line); border-radius: 1px;
  transition: background .12s ease, height .12s ease, width .12s ease;
}
.dt-resize:hover::before,
.dt-resize.dt-resizing::before {
  background: var(--accent); height: 100%; width: 3px;
}
table.datatable td { overflow: hidden; }
tr.dt-empty td { text-align: center; color: var(--muted); padding: 22px; }
@media (max-width: 720px) { .dt-resize { display: none; } }

/* Until its script builds the filter panel and pager, a data table is plain
   HTML: full width, every row. Keep that state out of sight — page 1's
   height is reserved, the rest of the rows are folded — so the page never
   repaints from raw to enhanced. Without JS (no html.js) the table just
   shows. */
html.js .card:has(table.datatable:not([data-dt-ready])) { visibility: hidden; }
html.js table.datatable:not([data-dt-ready]) tbody tr:nth-child(n+26) { display: none; }
html.js table.pageable:not([data-pg-ready]) tbody tr:nth-child(n+11) { display: none; }

/* ------------------------------------------------ facet filter side panel */
.dt-layout { display: flex; gap: 18px; align-items: flex-start; }
.dt-main { flex: 1 1 auto; min-width: 0; }
.dt-facets {
  flex: 0 0 232px; position: sticky; top: 14px;
  max-height: calc(100vh - 28px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px;
}
.dt-facets-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-bottom: 6px;
}
.dt-facets-head strong { color: var(--navy); font-size: 14px; }
.facet { border-top: 1px solid var(--line); padding: 7px 0 6px; }
.facet summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  font-size: 13.5px; font-weight: 600; color: var(--text); user-select: none;
}
.facet summary::-webkit-details-marker { display: none; }
.facet summary::after { content: "\25BE"; color: var(--muted); font-size: 10px; margin-left: auto; }
.facet[open] summary::after { content: "\25B4"; }
.facet-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-badge {
  background: var(--accent); color: var(--navy); border: 0; border-radius: 10px;
  font-size: 11px; font-weight: 700; padding: 1px 7px; margin: 0 4px 0 8px;
  flex-shrink: 0; cursor: pointer; font-family: inherit; line-height: 1.5;
  white-space: nowrap;
}
.facet-badge:hover { background: var(--hot); color: #fff; }
.facet-body { padding: 7px 0 2px; }
.facet-search {
  width: 100%; box-sizing: border-box; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--text);
  margin-bottom: 6px;
}
.facet-search:focus { outline: 1.5px solid var(--navy-2); border-color: var(--navy-2); }
.facet-opts {
  max-height: 172px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.facet-opt {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--text); padding: 3px 4px; border-radius: 5px; cursor: pointer;
}
.facet-opt:hover { background: #f0f3f7; }
.facet-opt input { accent-color: var(--navy); flex-shrink: 0; }
.facet-opt span:not(.cnt) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-opt .cnt { color: var(--muted); margin-left: auto; font-size: 12px; flex-shrink: 0; }
@media (max-width: 900px) {
  .dt-layout { flex-direction: column; }
  .dt-facets { position: static; flex: none; width: 100%; max-height: 260px; }
}

.dt-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 12px; flex-wrap: wrap;
}
/* A card with a pager pins it to its bottom edge, so side-by-side cards
   (grid-2 stretches them to one height) show Prev/Next on one line. */
.card:has(> .dt-pager) { display: flex; flex-direction: column; }
.card > .dt-pager { margin-top: auto; padding-top: 12px; }
.dt-clear-filters {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--navy-2);
  cursor: pointer;
}
.dt-clear-filters:hover { border-color: var(--accent); color: var(--accent); }
.dt-pager-label { font-size: 12.5px; color: var(--muted); }
.dt-pager select {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; background: #fff;
}
.dt-page-btn {
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--navy-2);
  cursor: pointer;
}
.dt-page-btn:hover:not(:disabled) { border-color: var(--navy-2); color: var(--navy); }
.dt-page-btn:disabled { opacity: .4; cursor: default; }
.dt-pager-info { font-size: 12.5px; color: var(--muted); min-width: 150px; text-align: center; }

/* approvals panel */
.sub-scroll { max-height: 420px; overflow-y: auto; }
.sub-scroll thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
tr.sub-orig td { background: #fdf6e8; }
tr.sub-orig:hover td { background: #faf0da; }

/* FDA document links on approvals rows */
th.doc-col, td.doc-col { text-align: right; width: 1%; white-space: nowrap; }
/* Approvals: tall hairline rows; each submission's FDA documents are pill
   chips on the right (name views in the drawer, the glyph downloads). */
table.appr-table { table-layout: fixed; }              /* five equal columns */
table.appr-table th { padding: 12px 10px; width: 20%; }
table.appr-table td { padding: 14px 10px; vertical-align: middle; }
table.appr-table td.appr-date { color: var(--muted); }
table.appr-table td.appr-date, table.appr-table td.appr-sub,
table.appr-table td.appr-class, .appr-priority { white-space: nowrap; }
table.appr-table td.appr-sub strong { font-weight: 600; }
.appr-priority {
  font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
}
.appr-priority.is-901 { color: #9b3a2f; }
.appr-priority.is-priority { color: var(--accent); }
th.appr-docs, td.appr-docs { text-align: right; white-space: nowrap; }
/* One pill per submission: "3 × [doc] ⌄"; the chevron flips while its menu
   is open. Keeps .doc-btn so the shared menu handler picks it up. */
.doc-btn.doc-pill {
  gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted); font-size: 14px; line-height: 1;
  transition: border-color .15s, color .15s;
}
/* Same gray as the Listed Patents PDF control (.doc-btn), same hover shift. */
.doc-btn.doc-pill:hover, .doc-btn.doc-pill.is-open {
  border-color: var(--accent); background: var(--card); color: var(--navy);
}
.doc-pill-n { font-variant-numeric: tabular-nums; }
.doc-pill-chev { color: var(--muted); transition: transform .15s; }
.doc-pill.is-open .doc-pill-chev { transform: rotate(180deg); }
.doc-hint { text-align: right; margin: 10px 0 0; }
@media (max-width: 760px) {
  table.appr-table td { padding: 10px 8px; }
}

/* Listed-patents use codes: a long list should wrap onto several lines rather
   than stretch the column and force the whole table to scroll sideways. The
   inline-block caps the width (max-width is unreliable on a <td> in auto table
   layout) and lets the codes flow. */
td.use-codes { white-space: normal; }
td.use-codes .uc-list {
  display: inline-block; max-width: 320px; overflow-wrap: break-word;
  line-height: 1.5;
}

/* Label revisions: a date, a supplement number and an icon. The global
   width:100% stretched three short columns across the whole card, so this one
   sizes to its content instead and stops at the widest row. */
table.compact-table { width: auto; min-width: 300px; max-width: 100%; }
table.compact-table th, table.compact-table td { white-space: nowrap; }
table.compact-table td:not(:last-child),
table.compact-table th:not(:last-child) { padding-right: 28px; }
.doc-btn {
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  color: var(--muted); display: inline-flex; align-items: center;
  border-radius: 6px; transition: background .15s, color .15s;
}
.doc-btn:hover { color: var(--navy); background: #f0f3f7; }
tr.sub-orig .doc-btn:hover { background: #f5ecd8; }
/* The per-submission document menu: a card under the pill listing each
   document as name · issue date · download, with "Download all" beneath. */
.doc-menu {
  position: fixed; left: 0; top: 0; min-width: 300px; max-width: 460px;
  padding: 8px 0; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); box-shadow: 0 10px 30px rgba(32, 31, 29, .12);
}
/* .nav-dd-menu's display:flex would otherwise defeat the hidden attribute */
.doc-menu[hidden] { display: none; }
.doc-menu a { white-space: nowrap; }
.doc-menu-row { display: flex; align-items: center; gap: 18px; padding: 0 12px 0 22px; }
.doc-menu a.doc-menu-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  padding: 10px 0; font-size: 14.5px; color: var(--text); background: none;
}
.doc-menu a.doc-menu-name:hover { color: var(--accent); background: none; text-decoration: none; }
.doc-menu-date { flex: none; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.doc-menu a.doc-menu-dl { flex: none; display: inline-flex; align-items: center;
  padding: 6px 8px; color: var(--muted); background: none; }
.doc-menu a.doc-menu-dl:hover { color: var(--accent); background: none; }
.doc-menu a.doc-menu-all {
  display: block; margin-top: 6px; padding: 14px 22px 6px; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--accent); background: none;
}
.doc-menu a.doc-menu-all:hover { background: none; text-decoration: underline; }
html[data-theme="dark"] .doc-menu { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
/* the download twin of a "view" control */
a.doc-dl { text-decoration: none; }
a.doc-dl-text { display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 6px; padding: 2px 4px; border-radius: 6px; color: var(--muted); }
a.doc-dl-text:hover { color: var(--navy); background: #f0f3f7; }
.doc-dl-btn { display: inline-flex; align-items: center; gap: 6px; }

/* related-applications list on the patent page */
.rel-apps { margin: 10px 0 0; padding-left: 20px; }
.rel-apps li { margin: 5px 0; line-height: 1.55; }

/* horizontal family tree above the related-applications list: earliest filings
   on the left, this patent on the right; connectors drawn with borders */
.ft-wrap { overflow-x: auto; padding: 12px 2px 4px; }
.ft-wrap > .ft-node { width: max-content; }
.ft-node { display: flex; align-items: center; }
.ft-parents { display: flex; flex-direction: column; }
.ft-branch { display: flex; align-items: center; justify-content: flex-end;
  padding: 4px 0; }
.ft-conn { position: relative; width: 48px; align-self: stretch; flex: none;
  min-height: 26px; }
.ft-conn::before { content: ""; position: absolute; top: 50%; left: 0; right: 0;
  margin-top: -1px; border-top: 2px solid #c9d2e0; }
.ft-conn.first::after, .ft-conn.mid::after, .ft-conn.last::after {
  content: ""; position: absolute; right: 0; width: 0;
  border-right: 2px solid #c9d2e0; }
/* -4px reaches through .ft-branch's padding so the trunk is unbroken */
.ft-conn.first::after { top: 50%; bottom: -4px; }
.ft-conn.mid::after { top: -4px; bottom: -4px; }
.ft-conn.last::after { top: -4px; bottom: 50%; }
.ft-in { flex: none; width: 18px; height: 0; border-top: 2px solid #c9d2e0; }
/* type pills straddle the bottom border of the box they describe; equal
   padding above keeps the box centred on the connector line */
.ft-boxwrap { flex: none; }
.ft-boxwrap.has-tags { padding: 9px 0; }
.ft-boxwrap.has-tags .ft-box { position: relative; padding-bottom: 11px; }
.ft-tags { position: absolute; left: 0; right: 0; bottom: 0;
  transform: translateY(50%); display: flex; justify-content: center; gap: 4px; }
.ft-rel { background: #eef2fb; color: var(--navy); border: 1px solid #d5deee;
  border-radius: 999px; padding: 0 6px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .4px; line-height: 15px; white-space: nowrap; }
.ft-box { flex: none; background: #fff; border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 11px;
  box-shadow: 0 1px 2px rgba(22, 36, 61, .05); }
.ft-box .ft-app { font-weight: 700; color: var(--navy); }
.ft-box .ft-pat { font-size: 12px; margin-top: 1px; }
.ft-box .ft-status { color: var(--muted); }
.ft-box .ft-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.ft-current { border-color: var(--accent); background: #fffdf5;
  box-shadow: 0 1px 4px rgba(201, 160, 78, .25); }
.ft-legend { margin: 8px 0 2px; font-size: 11.5px; }

/* follow/unfollow button on drug, company, and patent profiles */
.watch-btn { display: inline-flex; align-items: center; gap: 6px; }
.watch-btn.on {
  background: #eef2fb; color: var(--navy); border-color: var(--accent);
}
.watch-btn.on svg { fill: var(--accent); stroke: var(--accent); }

/* ------------------------------------------------ alerts manager card */
.al-sec {
  font-size: 11.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 6px;
}
.al-list { display: flex; flex-direction: column; }
/* the ? beside Topics; its explanation drops down under the heading */
.al-sec .al-help { margin-left: 8px; top: -1px; width: 16px; height: 16px; font-size: 10px;
  text-transform: none; letter-spacing: 0; }
.stage-desc.al-desc { margin: 0 0 8px; }
.al-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 2px;
  border-bottom: 1px solid var(--line); position: relative;
}
.al-row:last-child { border-bottom: 0; }
.al-txt { flex: 1; min-width: 0; }
.al-name { font-weight: 600; color: var(--navy); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-sub { font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-freq {
  font-size: 13px; padding: 4px 6px; border: 1px solid var(--line);
  border-radius: 7px; background: #fff; color: var(--text); flex-shrink: 0;
}
.al-toggle {
  width: 38px; height: 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: #cdd5e0; position: relative; flex-shrink: 0;
  transition: background .15s ease; padding: 0;
}
.al-toggle .al-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .15s ease;
  box-shadow: 0 1px 3px rgba(10, 18, 34, .3);
}
.al-toggle.on { background: var(--accent); }
.al-toggle.on .al-knob { left: 19px; }
/* The remove × sits outside the row, in the card's right padding, so every
   row's frequency selector and toggle line up whether it has one or not. */
.al-del {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 6px;
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  margin-left: 1px;
}
.al-del:hover { color: var(--hot); background: #fdecea; }
@media (max-width: 720px) {
  /* no padding to protrude into on a phone: every row keeps the room */
  .al-row { padding-right: 26px; }
  .al-del { left: auto; right: 0; margin-left: 0; }
}
.al-add { position: relative; margin-top: 12px; }
.al-add input {
  width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe;
}
.al-add input:focus { outline: none; border-color: var(--accent); background: #fff; }
.al-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 260px; overflow-y: auto;
}
.al-suggest[hidden] { display: none; }

/* right-side FDA document viewer pane; page content shifts left while it's
   open, the site top bar stays put (negative margin cancels the body shift) */
:root { --drawer-w: min(46vw, 760px); }
body { transition: padding-right .25s ease; }
body.drawer-open { padding-right: var(--drawer-w); }
body.drawer-open .topbar { margin-right: calc(-1 * var(--drawer-w)); }
.doc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer-w);
  background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(10, 18, 34, .16); z-index: 70;
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .25s ease, visibility .25s;
}
.doc-drawer.open { transform: none; visibility: visible; }

.drawer-grip {
  position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 1;
}
.drawer-grip:hover, body.drawer-resizing .drawer-grip { background: var(--accent); }
body.drawer-resizing { user-select: none; }
body.drawer-resizing, body.drawer-resizing .topbar,
body.drawer-resizing .doc-drawer { transition: none; }
body.drawer-resizing .drawer-frame { pointer-events: none; }
/* scoped: a later generic .drawer-head rule (dashboard chart drawer) paints
   its header navy and would restyle this one too */
.doc-drawer .drawer-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--card);
}
.drawer-tag {
  flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.drawer-title {
  flex: 1; font-weight: 600; color: var(--navy); font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-dl {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  transition: color .15s, border-color .15s, background .15s;
}
.drawer-dl:hover { color: var(--navy); border-color: #c9ccd2; background: #f0f3f7; text-decoration: none; }
.drawer-close {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 22px; line-height: 1; padding: 4px 8px; border-radius: 6px;
}
.drawer-close:hover { color: var(--navy); background: #f0f3f7; }
.drawer-frame { flex: 1; width: 100%; border: 0; background: #525659; }
/* Image mode (patent drawing sheets): the sheet is sized by the viewer script —
   whole-sheet fit by default — and the pane scrolls once it is zoomed past that. */
.drawer-imgview {
  flex: 1; min-height: 0; overflow: auto; background: #525659;
  padding: 12px; text-align: center; scrollbar-width: thin;
}
.drawer-imgview[hidden], .drawer-tools[hidden], .drawer-pill[hidden] { display: none; }
/* The box takes the rotated sheet's footprint (set by the script); the image
   sits centred in it and carries the turn. */
.drawer-imgbox { position: relative; display: inline-block; vertical-align: top; }
.drawer-imgbox img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: block; max-width: none; background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35); user-select: none; -webkit-user-drag: none;
}
.drawer-imgview.can-pan { cursor: grab; }
.drawer-imgview.is-panning { cursor: grabbing; }
/* Image tools in the preview header: previous/next, zoom, rotate — one pill
   each. The header wraps, so a narrow drawer drops them to a second line
   instead of squeezing the title out. */
.doc-drawer .drawer-head { flex-wrap: wrap; row-gap: 8px; }
.drawer-title { min-width: 120px; }
.drawer-tools { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }
.drawer-pill {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.drawer-pill button {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 15px; line-height: 1; color: var(--muted); padding: 5px 9px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.drawer-pill button + button { border-left: 1px solid var(--line); }
.drawer-pill button:hover { color: var(--navy); background: #f0f3f7; }
.drawer-pill .drawer-zoom-lvl {
  font-size: 12px; font-weight: 600; min-width: 46px; padding: 6px 4px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  /* no room to shift — cover the page instead (width set directly because
     the resize JS pins --drawer-w as an inline style on <html>) */
  .doc-drawer { width: 100vw; }
  .drawer-grip { display: none; }
  body.drawer-open { padding-right: 0; }
  body.drawer-open .topbar { margin-right: 0; }
}

.ch-cat-product { background: #e7edf6; color: var(--navy-2); }
.ch-cat-patent { background: #eef0f3; color: #55607a; }
.ch-cat-exclusivity { background: #e9f2ec; color: var(--ok); }

/* ------------------------------------------------ landing page */
.hero { text-align: center; padding: 56px 16px 30px; }
.hero h1 { font-size: 42px; margin: 0 0 14px; color: var(--navy); }
.hero-sub {
  font-size: 18px; color: var(--muted); max-width: 720px; margin: 0 auto 26px;
  line-height: 1.6;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-lg { padding: 13px 26px; font-size: 16px; border-radius: 9px; }
.btn-ghost {
  background: none; border: 1.5px solid var(--navy); color: var(--navy) !important;
}
.btn-ghost:hover { background: #eef1f6; }
.hero-note { color: var(--muted); font-size: 13.5px; margin-top: 14px; }

.landing-section { padding: 34px 0 6px; }
.section-title {
  text-align: center; font-size: 26px; color: var(--navy); margin: 0 0 22px;
}
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.feature h3 { margin: 0 0 8px; font-size: 16.5px; color: var(--navy); }
.feature p { margin: 0; color: var(--muted); font-size: 14.5px; }
.chip-soon {
  display: inline-block; background: #fff6e0; color: #8a6116; border-radius: 20px;
  font-size: 11px; font-weight: 600; padding: 2px 9px; vertical-align: middle;
  margin-left: 6px;
}
.landing-edu .card h3 { margin-top: 0; color: var(--navy); }
.landing-edu .card p { font-size: 14.5px; }

.price-card { max-width: 460px; margin: 0 auto; text-align: center; padding: 30px; }
.price-head { margin-bottom: 16px; }
.price-amount { font-size: 44px; font-weight: 800; color: var(--navy); }
.price-amount span { font-size: 17px; font-weight: 500; color: var(--muted); }
.price-trial { color: var(--ok); font-weight: 600; margin-top: 2px; }
.price-list {
  list-style: none; padding: 0; margin: 0 0 22px; text-align: left;
}
.price-list li {
  padding: 8px 0 8px 26px; border-bottom: 1px solid var(--line); font-size: 14.5px;
  position: relative;
}
.price-list li::before {
  content: "\2713"; position: absolute; left: 2px; color: var(--ok); font-weight: 700;
}
.price-list li:last-child { border-bottom: none; }

.testi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.testi p { margin: 0 0 12px; font-size: 14.5px; font-style: italic; color: var(--text); }
.testi-who { font-size: 13px; font-weight: 600; color: var(--navy); }

.landing-final { text-align: center; padding: 44px 16px 10px; }
.landing-final h2 { font-size: 28px; color: var(--navy); margin: 0 0 18px; }
.landing-disclaimer {
  max-width: 640px; margin: 26px auto 0; color: var(--muted); font-size: 12.5px;
}
@media (max-width: 720px) {
  .hero h1 { font-size: 30px; }
  .hero-sub { font-size: 16px; }
}

/* ------------------------------------------------ admin pipeline panel */
.pipe-bar {
  height: 8px; border-radius: 999px; background: #eceff3; overflow: hidden;
}
.pipe-fill {
  height: 100%; border-radius: 999px; background: var(--ok);
  transition: width .6s ease;
}
.pipe-ind {
  background: repeating-linear-gradient(45deg, var(--ok), var(--ok) 6px,
    #7fbf9c 6px, #7fbf9c 12px);
  opacity: .55;
}

/* ---- project status board (milestone stepper + worklist) ---- */
.ms-track { display: flex; margin: 18px 0 20px; }
.ms-node { flex: 1; position: relative; text-align: center; padding: 0 6px; min-width: 0; }
.ms-node::before {
  content: ""; position: absolute; top: 13px; right: 50%; width: 100%;
  height: 2px; background: var(--line);
}
.ms-node:first-child::before { display: none; }
.ms-node.done::before, .ms-node.active::before { background: var(--ok); }
.ms-dot {
  position: relative; z-index: 1; width: 28px; height: 28px; margin: 0 auto 8px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--card); border: 2px solid var(--line); color: var(--muted);
}
.ms-node.done .ms-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.ms-node.active .ms-dot, .ms-node.next .ms-dot {
  border-color: var(--ok); color: var(--ok);
}
.ms-node.active .ms-dot { box-shadow: 0 0 0 4px rgba(26, 127, 75, .15); }
.ms-id { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--navy); }
.ms-name { font-size: 12.5px; line-height: 1.3; margin-top: 2px; }
.ms-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ms-state { font-style: italic; }
.proj-work { list-style: none; margin: 4px 0 0; padding: 0; }
.proj-work li {
  display: flex; gap: 10px; align-items: baseline; padding: 6px 0;
  border-top: 1px solid var(--line); font-size: 13.5px;
}
.proj-work .src-badge { flex-shrink: 0; min-width: 74px; text-align: center; }

/* ---- gold-set labeling workbench ---- */
.gold-cand { border-top: 1px solid var(--line); padding: 10px 0; }
.gold-cand:first-of-type { border-top: none; padding-top: 0; }
.gold-cand-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gold-snip {
  margin: 8px 0 8px 14px; padding: 6px 12px; font-size: 13px;
  border-left: 3px solid var(--line); color: var(--muted);
}
.gold-snip .mono { color: var(--text); }
.gold-doc-text {
  white-space: pre-wrap; word-break: break-word; font-size: 12.5px;
  line-height: 1.5; max-height: 75vh; overflow-y: auto;
}
mark.nct-hit {
  background: #fbeed7; color: #8a5710; font-weight: 700;
  padding: 0 3px; border-radius: 3px;
}
@media (max-width: 720px) {
  .ms-track { flex-wrap: wrap; gap: 12px 0; }
  .ms-node { flex-basis: 33%; }
  .ms-node:nth-child(4)::before { display: none; }
}

/* ------------------------------------------------ admin bulk bars */
.bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.bulk-bar .bulk-all-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  cursor: pointer; }
.bulk-bar .bulk-n { margin: 0 6px 0 0; }
.bulk-bar button[disabled] { opacity: .45; cursor: default; }
table .bulk-col { width: 28px; padding-right: 0; }

/* ------------------------------------------------ onboarding page */
.onboard-wrap { max-width: 460px; margin: 24px auto 60px; }
.onboard-form { margin-top: 22px; }
.onboard-form select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 15px; background: #fff;
}
.onboard-form select:focus { outline: 2px solid var(--navy-2); border-color: var(--navy-2); }
.onboard-form button { margin-top: 6px; }
.ob-opt { font-weight: 400; color: var(--muted); }

/* ------------------------------------------------ admin per-row actions menu */
/* .table-scroll clips a dropdown (overflow-x:auto forces overflow-y to auto),
   so the Users table uses a non-clipping wrapper and lets the menu escape. */
.table-overflow { overflow: visible; }
.row-actions-cell { text-align: right; white-space: nowrap; }
.row-actions { position: relative; display: inline-block; }
.row-actions > summary { list-style: none; cursor: pointer; }
.row-actions > summary::-webkit-details-marker { display: none; }
/* Reuses .nav-dd-menu (base + skin) for the exact profile-menu look; this only
   positions it under the row's right edge and styles the form buttons like the
   menu's <a> items. */
.row-menu { left: auto; right: 0; top: calc(100% + 6px); min-width: 190px; }
.row-menu form { margin: 0; }
.row-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--text); padding: 9px 12px; border-radius: 6px; font-size: 14.5px;
  font-family: inherit; cursor: pointer;
}
.row-menu button:hover { background: #f0f3f7; color: var(--navy); }
.row-menu button.danger { color: var(--hot); }
.row-menu button.danger:hover { background: #fdecea; color: var(--hot); }

/* ------------------------------------------------ admin subpage tiles */
.admin-nav { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 24px; }
.admin-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 118px; height: 96px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  text-decoration: none; text-align: center; padding: 10px;
  transition: border-color .15s, color .15s, background .15s;
}
.admin-tile span { font-size: 12px; line-height: 1.25; }
/* Count of items needing attention, pinned to the tile's top-right corner. */
.admin-tile { position: relative; }
.admin-tile .tile-badge {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--card);
}
.admin-tile:hover { color: var(--navy); border-color: var(--navy-2); text-decoration: none; }
.admin-tile.active {
  color: var(--navy); border-color: var(--accent);
  background: rgba(182, 130, 53, .10);
}

/* ------------------------------------------------ admin: content management */
.cm-table td { vertical-align: middle; }
.cm-table tr.is-off .src-name, .cm-table tr.is-off .src-sub { color: var(--muted); }
.cm-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  user-select: none; }
.cm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-track { position: relative; width: 40px; height: 22px; border-radius: 999px;
  background: var(--line); transition: background .15s; flex: none; }
.cm-track::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.cm-switch input:checked + .cm-track { background: var(--accent); }
.cm-switch input:checked + .cm-track::after { transform: translateX(18px); }
.cm-switch input:focus-visible + .cm-track { outline: 2px solid var(--accent);
  outline-offset: 2px; }
.cm-switch input:disabled + .cm-track { opacity: .5; }
.cm-state { font-size: 12px; font-weight: 600; min-width: 24px; color: var(--muted); }
.cm-switch input:checked ~ .cm-state { color: var(--navy); }
.nav-mega .ask-beta.page-hidden { color: var(--muted); border-color: var(--line); }

/* ------------------------------------------------ feedback dialog + FAB */
.fb-fab {
  position: fixed; right: 24px; bottom: 22px;
  z-index: 90; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  background: var(--navy); color: #fff; border: 0; font: inherit;
  font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(10, 18, 34, .28);
  transition: transform .12s ease, box-shadow .15s ease, background .15s;
}
.fb-fab:hover { background: var(--navy-2);
  box-shadow: 0 8px 26px rgba(10, 18, 34, .34); }
.fb-fab:active { transform: scale(.96); }
.fb-fab svg { flex-shrink: 0; }
@media (max-width: 640px) { .fb-fab span { display: none; } .fb-fab { padding: 12px; } }
@media print { .fb-fab { display: none; } }

.fb-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  z-index: 120; }
.fb-dialog {
  position: fixed; left: 50%; top: 18vh; transform: translateX(-50%);
  width: min(480px, calc(100vw - 32px)); z-index: 121;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 48px rgba(10, 18, 34, .3); padding: 20px 22px;
}
.fb-dialog h2 { margin: 0; }
.fb-dialog textarea {
  width: 100%; margin-top: 12px; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--line); border-radius: 6px; font: inherit;
  color: var(--text); background: var(--bg);
}
.fb-dialog textarea:focus { outline: none; border-color: var(--accent); }
.fb-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.fb-actions .meta-line { margin-right: auto; }
.fb-backdrop[hidden], .fb-dialog[hidden] { display: none !important; }

/* ------------------------------------------------ preview drawer */
tr[data-appl], tr[data-patent] { cursor: pointer; }
/* Preview drawers sit above the sticky topbar (z 50) so their headers are
   never obscured; glossary (130) and compare (100) still stack above them. */
#drawer-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 70;
}
#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 100vw);
  background: var(--bg); z-index: 71; display: flex; flex-direction: column;
  box-shadow: -10px 0 32px rgba(10, 18, 34, .3);
  transform: translateX(100%); transition: transform .2s ease-out;
}
#drawer.open { transform: none; }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--navy); flex-shrink: 0;
}
.drawer-head-title {
  color: #d8dde6; font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
}
.drawer-head-actions { display: flex; gap: 8px; align-items: center; }
.drawer-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: none; border: 1px solid #5a6a86;
  color: #fff !important; border-radius: 6px; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0; text-decoration: none;
}
.drawer-icon:hover { border-color: var(--accent); color: var(--accent) !important; text-decoration: none; }
.drawer-body { overflow-y: auto; padding: 18px 18px 30px; }

/* ------------------------------------------------ USPTO patent drawer + page */
#pat-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 70; }
#pat-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
  background: var(--bg); z-index: 71; display: flex; flex-direction: column;
  box-shadow: -10px 0 32px rgba(10, 18, 34, .3);
  transform: translateX(100%); transition: transform .2s ease-out;
}
#pat-drawer.open { transform: none; }
#pat-backdrop[hidden], #pat-drawer[hidden] { display: none !important; }

/* ------------------------------------------ chart drill-down drawer (dashboard) */
/* Sits above the sticky topbar (z-index 50) so its header is never obscured. */
#cdrawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 70; }
#cdrawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw);
  background: var(--bg); z-index: 71; display: flex; flex-direction: column;
  box-shadow: -10px 0 32px rgba(10, 18, 34, .3);
  transform: translateX(100%); transition: transform .2s ease-out, width .2s ease-out;
}
#cdrawer.open { transform: none; }
#cdrawer.full { width: 100vw; }
#cdrawer.full .drawer-body > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
#cdrawer-backdrop[hidden], #cdrawer[hidden] { display: none !important; }

/* clickable patent numbers everywhere */
.patent-link {
  color: var(--navy-2); cursor: pointer; border-bottom: 1px dotted #b7c0cd;
  text-decoration: none;
}
.patent-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* patent number + title header (drawer + full page) */
.pat-d-head, .pat-head { margin-bottom: 14px; }
.pat-d-no, .pat-no {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .5px;
  color: var(--navy); background: #fff6e0; border: 1px solid #f0dfb8;
  border-radius: 6px; padding: 2px 9px;
}
.pat-d-title { margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.3; }
/* 80% of the "U.S. Patent No." line above it */
.pat-title { margin-top: 10px; font-size: clamp(16px, 2.4vw, 21.6px); color: var(--navy); }

/* Prominent patent number: title-sized and bold, no pill badge. */
.pat-no-big {
  font-size: clamp(20px, 3vw, 27px); font-weight: 700; color: var(--navy);
  line-height: 1.15; letter-spacing: 0;
}
.pat-head .pat-title { margin-top: 6px; }

/* Tabbed cards (patent profile): one card, one section shown at a time. */
.tabcard .tabs {
  position: relative; display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin: -2px 0 16px;
}
.tabcard .tab {
  appearance: none; background: none; border: 0; font: inherit; font-size: 14px;
  cursor: pointer; color: var(--muted); padding: 9px 13px;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
}
.tabcard .tab:hover { color: var(--navy); }
.tabcard .tab.is-active { color: var(--navy); font-weight: 600; }
/* One sliding underline for the whole row: the JS glides it to the hovered
   tab and back to the active one when the cursor leaves. Top is set by the
   JS per tab, so the ink stays on the right row when the tabs wrap. */
.tabcard .tab-ink {
  position: absolute; top: 0; left: 0; width: 0; height: 2px;
  background: var(--accent); pointer-events: none;
  transition: left .25s cubic-bezier(.22, .61, .36, 1),
              width .25s cubic-bezier(.22, .61, .36, 1),
              top .25s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .tabcard .tab-ink { transition: none; }
}
.tabcard .tab .tab-count {
  font-size: 11px; font-weight: 600; color: var(--muted); background: #f0f3f7;
  border-radius: 999px; padding: 1px 7px;
}
.tabcard .tabpanel { display: none; }
/* The card follows each tab's natural height, animated by the .tabbody
   height transition (set in JS old → new); past 600px the panel scrolls.
   A gentle decelerating curve + a cross-fade on the incoming panel keep the
   switch from feeling abrupt. */
.tabcard .tabbody {
  overflow: hidden; transition: height .5s cubic-bezier(.22, .61, .36, 1);
}
.tabcard .tabpanel.is-active {
  display: block; max-height: 600px; overflow-y: auto; scrollbar-width: thin;
  animation: tab-fade-in .45s ease both;
}
@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.tabcard .tabpanel.is-active > :last-child { margin-bottom: 0; }
/* Tables inside a tab scroll vertically themselves, so the pager below stays
   in view at large page sizes instead of being pushed past the panel fold.
   The header row sticks while the rows scroll under it. */
.tabcard .tabpanel .table-scroll {
  max-height: 440px; overflow-y: auto; scrollbar-width: thin;
}
.tabcard .tabpanel .table-scroll thead th {
  position: sticky; top: 0; z-index: 1; background: #fff;
  box-shadow: 0 1px 0 var(--line);
}
/* File History: one scroll only (the page's); the table runs full length */
.tabcard .tabpanel[data-panel="p-fh"] .table-scroll { max-height: none; }
@media (prefers-reduced-motion: reduce) {
  .tabcard .tabbody { transition: none; }
  .tabcard .tabpanel.is-active { animation: none; }
}

/* Abstract / specification / claims: flowing text, no inner scroll enclosure. */
.pat-doc-flow p { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.pat-doc-flow p:last-child { margin-bottom: 0; }
.pat-claim-list p {
  font-size: 14px; line-height: 1.55; color: var(--text);
  padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0;
}
.pat-claim-list p:first-child { padding-top: 2px; }
.pat-claim-list p:last-child { border-bottom: 0; }

/* Figures tab: a contact sheet of the patent's drawing sheets — the image is
   the link, nothing else. The sheets stay white in dark mode: they are page
   scans, like the PDF they come from.
   Hairlines part the sheets the way the Daily's rules do — each one runs
   only the length of its own tile, so the verticals and horizontals stop
   short of the gap crossings and never meet. Every tile draws the rule to
   its left and the one above it, centred in the gap; for the first column
   and first row those fall outside the grid and overflow clips them, which
   is what keeps this working at any auto-fill column count. */
.pat-figs {
  --fig-gap: 30px;
  display: grid; gap: var(--fig-gap); overflow: hidden;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.pat-fig { position: relative; display: block; }
.pat-fig::before, .pat-fig::after {
  content: ""; position: absolute; background: var(--line); pointer-events: none;
}
.pat-fig::before { top: 0; bottom: 0; left: calc(var(--fig-gap) / -2); width: 1px; }
.pat-fig::after { left: 0; right: 0; top: calc(var(--fig-gap) / -2); height: 1px; }
.pat-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 340 / 438;
  background: #fff; transition: opacity .15s;
}
.pat-fig:hover img { opacity: .72; }
.pat-fig:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the sheet open in the side viewer */
.pat-fig.is-current { outline: 1px solid var(--accent); outline-offset: -1px; }

/* key/value tables */
table.kv { width: 100%; border-collapse: collapse; }
table.kv th, table.kv td {
  text-align: left; vertical-align: top; padding: 7px 0; font-size: 14px;
  border-bottom: 1px solid var(--line);
}
table.kv th { color: var(--muted); font-weight: 600; width: 42%; padding-right: 12px; }
table.kv td { color: var(--text); }
.drawer-body table.kv th { width: 44%; }

.pat-sec {
  margin: 16px 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted);
}
/* collapsible field cards in the patent drawer */
.d-sec {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  margin: 10px 0; overflow: hidden;
}
.d-sec > summary {
  list-style: none; cursor: pointer; padding: 11px 14px; font-size: 12.5px;
  font-weight: 700; color: var(--navy); text-transform: uppercase;
  letter-spacing: .5px; display: flex; align-items: center; gap: 8px;
  user-select: none;
}
.d-sec > summary::-webkit-details-marker { display: none; }
.d-sec > summary::after {
  content: "\25BE"; margin-left: auto; color: var(--muted); font-size: 11px;
  transition: transform .15s ease;
}
.d-sec:not([open]) > summary::after { transform: rotate(-90deg); }
.d-sec > summary:hover { background: #f6f8fb; }
.d-sec > summary .obp-count { margin-left: 0; }
.d-sec-body { padding: 0 14px 14px; }
.d-sec-body table.kv { margin: 0; }
.d-sec-body .pat-abstract { font-size: 13.5px; }
.d-sec-body > .ptab-intro:first-child { margin-top: 2px; }
.pat-abstract { font-size: 14px; line-height: 1.55; color: var(--text); }
.pat-claims {
  max-height: 300px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 12px; background: #fff;
}
.pat-claims p {
  font-size: 13px; line-height: 1.5; color: var(--text);
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.pat-claims p:last-child { border-bottom: 0; }
.pat-claims-page { max-height: 520px; }
/* specification body: same scroll box as claims, but flowing paragraphs
   rather than one-per-claim ruled lines */
.pat-spec p { border-bottom: 0; padding: 5px 0; }

/* ------------------------------------------------ PTAB challenge history */
.ptab-card .ptab-gavel { color: var(--muted); font-size: .92em; }
.ptab-intro { margin: 0 0 12px; }
.ptab-proc {
  border: 1px solid var(--line); border-left: 4px solid #5b6472;
  border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: #fff;
}
.ptab-tone-good { border-left-color: #1b7f4d; }
.ptab-tone-warn { border-left-color: #b9761b; }
.ptab-tone-neutral { border-left-color: #5b6472; }
.ptab-proc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.ptab-num { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700; font-size: 14px; color: var(--navy); }
.ptab-type { font-size: 12.5px; color: var(--muted); }
.ptab-badge { margin-left: auto; font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: #eef0f3; color: #3c4450; }
.ptab-badge-good { background: #e4f4ea; color: #14663c; }
.ptab-badge-bad { background: #fdecea; color: var(--hot); }
.ptab-badge-warn { background: #fbeed7; color: #8a5710; }
.ptab-badge-neutral { background: #eef0f3; color: #3c4450; }
.ptab-pet { font-size: 13px; color: var(--text); margin: 8px 0 2px; }

/* admin: external data-source monitor pills */
.src-badge { display: inline-block; font-size: 11.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.src-badge.good { background: #e4f4ea; color: #14663c; }
.src-badge.warn { background: #fbeed7; color: #8a5710; }
.src-badge.bad { background: #fdecea; color: var(--hot); }
/* the "!" inside a failed source's pill, and on the sources tile */
.src-badge .src-alert { display: inline-block; width: 15px; height: 15px; margin-right: 5px;
  border-radius: 50%; background: var(--hot); color: #fff; font-size: 11px;
  line-height: 15px; text-align: center; vertical-align: -2px; }
.admin-tile .tile-badge.tile-badge-alert { background: var(--hot); min-width: 20px;
  padding: 0; font-size: 13px; }
.src-badge.neutral { background: #eef0f3; color: #3c4450; }
.src-table td { vertical-align: top; }
.src-table .src-name { font-weight: 600; color: var(--navy); }
.src-table .src-sub { color: var(--muted); font-size: 12px; }
.src-table .src-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptab-stages { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px;
  position: relative; }
.ptab-stage { position: relative; padding: 6px 0 6px 20px; display: flex;
  flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ptab-stage::before {          /* connecting spine between the dots */
  content: ""; position: absolute; left: 4px; top: 14px; bottom: -6px;
  width: 2px; background: var(--line);
}
.ptab-stage:last-child::before { display: none; }
.ptab-dot { position: absolute; left: 0; top: 9px; width: 10px; height: 10px;
  border-radius: 50%; background: #fff; border: 2px solid #9aa3b0; }
.ptab-tone-good .ptab-dot { border-color: #1b7f4d; }
.ptab-tone-warn .ptab-dot { border-color: #b9761b; }
.ptab-stage-date { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px; color: var(--muted); min-width: 82px; }
.ptab-stage-label { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.ptab-stage-detail { font-size: 12.5px; color: var(--muted); }
.ptab-none { color: var(--muted); font-size: 13px; }
.ptab-cell .ptab-badge { margin-right: 4px; }

/* shimmer skeleton while the patent drawer loads */
.skel {
  display: block; border-radius: 5px;
  background: linear-gradient(90deg, #edf0f4 25%, #dfe4ec 37%, #edf0f4 63%);
  background-size: 400% 100%; animation: skel-shimmer 1.25s ease infinite;
}
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.pat-skel { padding: 6px 2px; }
.skel-kv { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* minimized-preview tray */
#ptray {
  position: fixed; bottom: 14px; left: 14px; right: 14px; z-index: 50;
  display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none;
}
.ptray-chip {
  display: inline-flex; align-items: stretch; pointer-events: auto;
  background: var(--navy); border: 1.5px solid var(--navy-2); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(10, 18, 34, .35); overflow: hidden;
}
.ptray-chip.active { border-color: var(--accent); }
.ptray-open {
  background: none; border: 0; color: #e6eaf1; font-size: 13px; font-weight: 600;
  padding: 7px 10px 7px 12px; cursor: pointer; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptray-open:hover { color: var(--gold-bright, #e3bc6a); color: #e3bc6a; }
.ptray-x {
  background: none; border: 0; border-left: 1px solid #33456a; color: #98a3b5;
  font-size: 15px; padding: 0 9px; cursor: pointer; line-height: 1;
}
.ptray-x:hover { color: #fff; background: rgba(255,255,255,.08); }

.fm-toast {
  position: fixed; bottom: 64px; left: 50%; transform: translate(-50%, 8px);
  background: var(--navy); color: #fff; font-size: 13.5px; border-radius: 8px;
  padding: 10px 18px; z-index: 150; opacity: 0; transition: opacity .25s, transform .25s;
  box-shadow: 0 10px 30px rgba(10, 18, 34, .4); pointer-events: none;
}
.fm-toast.show { opacity: 1; transform: translate(-50%, 0); }

.ptray-compare {
  pointer-events: auto; background: var(--accent); border: 1.5px solid var(--accent);
  color: var(--navy); font-size: 13px; font-weight: 700; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(10, 18, 34, .35);
}
.ptray-compare:hover { background: #e3bc6a; border-color: #e3bc6a; }

/* compare overlay */
#cmp {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; flex-direction: column;
}
/* the hidden attribute must always win over display rules */
#cmp[hidden], #drawer[hidden], #gloss[hidden], #ptray[hidden],
#drawer-backdrop[hidden], #tlBackdrop[hidden] { display: none !important; }
.cmp-head {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: var(--navy); flex-shrink: 0; flex-wrap: wrap;
}
.cmp-picker { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.cmp-pill {
  background: none; border: 1px solid #5a6a86; color: #c7cfdc;
  border-radius: 20px; padding: 4px 13px; font-size: 13px; cursor: pointer;
}
.cmp-pill:hover { border-color: #fff; color: #fff; }
.cmp-pill.on {
  background: var(--accent); border-color: var(--accent); color: var(--navy);
  font-weight: 700;
}
.cmp-cols {
  display: flex; gap: 14px; padding: 14px; flex: 1; overflow: auto;
  align-items: stretch;
}
.cmp-col {
  flex: 1 1 0; min-width: 300px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; display: flex;
  flex-direction: column; overflow: hidden;
}
.cmp-col-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--navy); flex-shrink: 0;
}
.cmp-col-head strong { color: #fff; font-size: 14px; }
.cmp-col-link { color: #e3bc6a; font-size: 12.5px; white-space: nowrap; }
.cmp-col-link:hover { color: #fff; text-decoration: none; }
.cmp-col-body { overflow-y: auto; padding: 14px; }
.cmp-col-body h1 { font-size: 17px; }
.cmp-col-body .grid-2 { grid-template-columns: minmax(0, 1fr); }
.cmp-col-body .stat { min-width: calc(50% - 8px); }
.drawer-body h1 { font-size: 20px; }
.drawer-body .grid-2 { grid-template-columns: minmax(0, 1fr); }
.drawer-body .stat { min-width: calc(50% - 8px); }

/* wide tables scroll sideways inside their card instead of breaking the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  .table-scroll table { min-width: 600px; }
}

/* ------------------------------------------------ mobile */
/* Phones: the page itself never scrolls sideways — a card wider than the
   viewport scrolls within its own bounds instead of pushing the layout. */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  .card { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 720px) {
  /* chart card headers stack: title block first, legend on its own full
     row beneath — side-by-side clipped the trailing legend chips */
  .viz-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .viz-legend { justify-content: flex-start; }
  .watch-flux-chart .viz-side { align-items: flex-start; }
  /* svg axis/value text scales down with the 720-unit canvas — bump the
     set sizes so labels stay legible at phone width */
  .viz-yr, .viz-tick, .nce-yr { font-size: 19px; }
  .viz-val, .nce-val { font-size: 17px; }
}
@media (max-width: 900px) {
  .container { margin: 14px auto; padding: 0 12px; }
  .footer { padding: 14px 12px; }
  .topbar-inner { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .topbar nav { gap: 12px; flex-wrap: wrap; }
  .user-chip { display: none; }
  .card { padding: 14px 14px; }
  h1 { font-size: 20px; }
  .auth-wrap { margin: 18px auto; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters input[type=text], .filters select { width: 100%; min-width: 0; }
  .filters .btn { width: 100%; text-align: center; padding: 11px 12px; }
  .stat { flex: 1 1 calc(50% - 8px); min-width: calc(50% - 8px); padding: 12px 14px; }
  .stat .value { font-size: 18px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .btn { width: 100%; text-align: center; }
}

/* dashboard results become stacked cards on phones */
@media (max-width: 720px) {
  .table-scroll:has(> table.cards) { overflow-x: visible; }
  /* the datatable JS pins an inline pixel width + fixed table-layout for its
     column-resize feature; that would force the desktop width on a phone and
     push the card-stacked rows off-screen, so neutralise it here */
  table.cards { min-width: 0; width: 100% !important; table-layout: auto !important; }
  table.cards th, table.cards td { width: auto !important; }
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr {
    border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px;
    padding: 10px 14px; background: #fff;
  }
  table.cards tr:hover td { background: transparent; }
  /* label rail on the left (fixed width), values left-justified beside it */
  table.cards td {
    border: none; padding: 4px 0; display: flex; justify-content: flex-start;
    align-items: baseline; gap: 14px; text-align: left;
  }
  table.cards td::before {
    content: attr(data-label); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .6px; color: #9aa3b0; font-weight: 700; text-align: left;
    flex-shrink: 0; min-width: 108px;
  }
  table.cards td.num { text-align: left; }
  /* stacked values wrap — beats the compact-table nowrap that made sense
     only in a grid */
  table.cards td { white-space: normal; }
  /* unlabeled colspan cells (empty-state rows) read as plain lines */
  table.cards td:not([data-label]) { display: block; text-align: left; }
}

/* ============================================================
   MOBILE OPTIMISATION  (v73)
   Consolidated phone/tablet pass. Mobile accessibility is a
   headline feature, so every primary surface is redistributed
   for one-thumb, single-column reading below.
   ============================================================ */

/* ---- phones & small tablets ---- */
@media (max-width: 760px) {

  /* --- prevent stray horizontal scroll of the whole page --- */
  img, svg, canvas, video { max-width: 100%; }

  /* --- no side drawers on mobile: patent details and application previews
         open as their own full pages instead (handled in JS), and the
         desktop-only minimise / preview-tray / compare workflow is hidden --- */
  #ptray, #cmp { display: none !important; }

  /* --- top bar: two rows (brand + actions, then full-width search) --- */
  .topbar-inner {
    flex-wrap: wrap; padding: 8px 14px; gap: 8px 6px;
  }
  /* search leaves the absolute-centre and drops to its own full-width row */
  .topbar-search {
    position: relative; left: auto; transform: none;
    order: 6; width: 100%; flex: 1 1 100%; margin: 2px 0 0;
  }
  .topbar-search input { height: 42px; font-size: 16px; } /* 16px stops iOS auto-zoom */
  /* pinned pages: a row between the brand row and the search, only when
     something is pinned */
  .fm-quick { order: 5; flex: 1 1 100%; gap: 8px; margin-top: 2px; }
  .fm-quick:not(:has(.fm-quick-ico)) { display: none; }

  /* the app-drawer + profile menus become full-width sheets pinned to the bar,
     so a 340px desktop menu never runs off the side of a phone */
  .apps-dd, .profile-dd { position: static; }
  .nav-mega, .profile-menu {
    position: absolute; top: 100%; left: 12px; right: 12px; width: auto;
    min-width: 0; margin-top: 6px; max-height: 74vh; overflow-y: auto;
  }
  .nav-mega a { padding: 11px 12px; }        /* comfortable tap targets */
  .nav-dd-menu a { padding: 12px 14px; }

  /* --- roomier tap targets on the icon buttons --- */
  .apps-btn { width: 42px; height: 42px; }
  .profile-dd .avatar { width: 34px; height: 34px; }

  /* --- dashboard: single column, cards size to their content --- */
  /* minmax(0,1fr), not 1fr: a 1fr track keeps a min-content floor, and a wide
     chart svg was pushing every card past the phone viewport */
  .dash-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; grid-auto-rows: auto; }
  .dash-cards > [data-card] {
    height: auto !important; min-height: 220px; overflow: visible;
    padding: 16px 16px;
  }
  .dash-cards > [data-card][data-width="full"] { grid-column: auto; }
  .dash-head h1 { font-size: 23px; }
  .dcard-tf { flex-wrap: wrap; }
  .dash-toolbar { flex-wrap: wrap; gap: 8px; }

  /* --- wide data tables scroll sideways inside their own box instead of
         forcing the whole page wide (columns stay aligned via max-content) --- */
  table.pageable {
    display: block; width: max-content; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* --- form inputs: 16px min to stop iOS zoom-on-focus --- */
  input[type=text], input[type=search], input[type=email],
  input[type=password], select, textarea { font-size: 16px; }

  /* --- typography / spacing trim --- */
  .obp-hero h1 { font-size: 27px; }
  .obp-hero { padding: 20px 14px 16px; }
  .obp-hero.obp-tall { padding: 12vh 14px 30px; }
  h1 { font-size: 21px; }
  h2 { font-size: 18px; }
}

/* ---- narrow phones ---- */
@media (max-width: 480px) {
  .brand { font-size: 17px; }
  .container { padding: 0 11px; }
  .dchero-num { font-size: 28px; }
  .hero-stat-num, .hero-stat-num.hs-gold { font-size: 22px; }
  .hero-stats { gap: 16px; }
  /* stacked table-cards: let long values wrap under their label */
  table.cards td { flex-wrap: wrap; }
  table.cards td::before { flex-basis: 100%; }
}

/* ============================================================
   MOBILE FILTER SHEET + FLOATING BUTTON
   On phones, every filter control on the page — the server search
   form AND the datatable's per-column search + toggle panel — is
   pulled out of the layout and housed in a bottom sheet reached
   through a rounded "Filters" button pinned bottom-centre.
   Desktop keeps its inline / sidebar arrangement untouched.
   ============================================================ */
.filter-fab, .filter-backdrop, .filter-sheet { display: none; }

@media (max-width: 760px) {
  /* rounded floating button, bottom-centre */
  .filter-fab {
    display: inline-flex; align-items: center; gap: 8px;
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
    z-index: 70; background: var(--navy); color: #fff; border: 0;
    border-radius: 999px; padding: 13px 24px; font-size: 15px; font-weight: 600;
    box-shadow: 0 8px 22px rgba(10, 18, 34, .32); cursor: pointer;
  }
  .filter-fab:active { transform: translateX(-50%) scale(.96); }
  .filter-fab svg { width: 18px; height: 18px; }
  .filter-fab-count {
    background: var(--accent); color: var(--navy); font-size: 12px; font-weight: 700;
    min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .filter-fab-count[hidden] { display: none; }

  /* the slide-up bottom sheet that houses all filter controls */
  .filter-sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--card); border-radius: 18px 18px 0 0; max-height: 85vh;
    transform: translateY(110%); transition: transform .26s ease;
    box-shadow: 0 -10px 34px rgba(10, 18, 34, .3);
  }
  .filter-sheet.open { transform: translateY(0); }
  .filter-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0;
  }
  .filter-sheet-head strong { font-size: 16px; color: var(--navy); }
  .filter-sheet-close {
    border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted);
    cursor: pointer; padding: 0 6px;
  }
  .filter-sheet-body { overflow-y: auto; padding: 14px 18px 22px; }

  /* flatten the moved-in card + facet panel so they read as one list */
  .filter-sheet .card {
    border: 0; box-shadow: none; padding: 0; margin: 0 0 16px; background: none;
  }
  .filter-sheet .dt-facets {
    position: static; width: auto; max-height: none; overflow: visible;
    border: 0; padding: 0; margin: 0; background: none;
  }
  .filter-sheet .facet-opts { max-height: 220px; }
  .filter-sheet form.filters { flex-direction: column; align-items: stretch; gap: 12px; }
  .filter-sheet form.filters input[type=text],
  .filter-sheet form.filters input[type=search],
  .filter-sheet form.filters select,
  .filter-sheet form.filters .btn { width: 100%; text-align: center; }

  .filter-backdrop {
    display: block; position: fixed; inset: 0; z-index: 79;
    background: rgba(15, 23, 42, .45);
  }
  .filter-backdrop[hidden] { display: none; }

  /* keep the last of the page (e.g. the pager) clear of the floating button */
  .container { padding-bottom: 84px; }
}

/* ------------------------------------------------ FAQ page */
/* FAQ shares the document rules above; the heading margin supplies the gap
   between questions, so the item itself needs none. */
.faq-item p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ Ask FDA Monk (AI beta) */
/* Full-page soft wash behind the hero — navy + gold takes on the reference's
   radial gradient look. Fixed so the conversation scrolls over it. */
.ask-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 92%, rgba(201, 160, 78, .34), transparent 75%),
    radial-gradient(55% 45% at 15% 55%, rgba(201, 160, 78, .14), transparent 70%),
    radial-gradient(50% 40% at 85% 25%, rgba(201, 160, 78, .12), transparent 70%),
    radial-gradient(45% 40% at 68% 50%, rgba(31, 51, 85, .07), transparent 70%),
    #fcfaf5;
}
/* The saved-chats pane: a ruled list straight on the page, the way the site
   draws its other indexes, with a gold bar on the open chat. The viewer can
   hide it (remembered in this browser); a Show chats pill brings it back. */
.ask-shell { display: flex; align-items: flex-start; gap: 28px; }
.ask-side {
  flex: 0 0 230px; position: sticky; top: 84px; max-height: calc(100vh - 110px);
  display: flex; flex-direction: column; padding: 0 8px 0 0;
}
.ask-side[hidden] { display: none; }
.ask-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.ask-side-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  font-family: Inter, system-ui, sans-serif; }
.ask-side-tools { display: flex; align-items: center; gap: 6px; }
.ask-side-new, .ask-side-hide, .ask-side-toggle {
  font: inherit; font-size: 12.5px; color: var(--navy); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.ask-side-hide { border-color: transparent; color: var(--muted); padding: 3px 6px; }
.ask-side-new:hover, .ask-side-toggle:hover { border-color: var(--accent); }
.ask-side-hide:hover { color: var(--navy); }
.ask-side-list { overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.ask-side-group { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 12px 0 2px;
  font-family: Inter, system-ui, sans-serif; }
.ask-side-group:first-child { margin-top: 6px; }
.ask-side-item { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); }
.ask-side-item.is-on { box-shadow: inset 3px 0 0 var(--accent); }
.ask-side-item.is-on .ask-side-open { padding-left: 11px; font-weight: 600; }
.ask-side-open {
  flex: 1 1 auto; min-width: 0; text-align: left; font: inherit; font-size: 13.5px; color: var(--navy);
  background: none; border: 0; padding: 8px 6px 8px 4px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ask-side-open:hover { color: var(--accent); }
.ask-side-del {
  flex: 0 0 auto; font-size: 12px; color: var(--muted); background: none; border: 0;
  padding: 5px 7px; border-radius: 6px; cursor: pointer;
}
.ask-side-del:hover { color: var(--navy); }
.ask-side-open:focus-visible, .ask-side-del:focus-visible, .ask-side-new:focus-visible,
.ask-side-hide:focus-visible, .ask-side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask-side-empty, .ask-side-foot { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.ask-side-foot { margin-top: 12px; }
.ask-side-toggle { align-self: flex-start; }
.ask-side-toggle[hidden] { display: none; }
/* the dataset each suggestion draws on */
.ask-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ask-chip > span:first-child { flex: 1 1 auto; }
.ask-tag { flex: 0 0 auto; display: inline-block; font: 600 10.5px/1.6 Inter, system-ui, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(61, 90, 128, .12); color: #3d5a80; }
html[data-theme="dark"] .ask-tag { background: rgba(159, 182, 214, .14); color: #9fb6d6; }
/* the actions sit under a hairline at the foot of each answer */
.ask-answer .ask-actions { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.ask-answer .ask-data, .ask-answer .ask-sql { margin-bottom: 10px; }
.ask-wrap {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
  min-height: calc(100vh - 150px);
  /* chat-width column: answers and the input stay comfortably readable */
  width: 100%; max-width: 780px; margin: 0 auto;
}
@media (max-width: 800px) {
  .ask-shell { flex-direction: column; gap: 10px; }
  .ask-side { position: static; flex: none; width: 100%; max-height: 40vh; padding: 0; }
}
/* centered hero: sparkle + title, floats in the upper half */
.ask-center { flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 40px 16px 20px; }
.ask-spark { margin-bottom: 26px; }
.ask-title { font-size: 30px; font-weight: 600; letter-spacing: -.4px;
  color: var(--navy); margin: 0 0 12px; }
.ask-sub { max-width: 560px; font-size: 13.5px; color: var(--muted);
  line-height: 1.55; margin: 0; }
.ask-beta {
  font-size: 10px; font-weight: 700; letter-spacing: .8px; vertical-align: middle;
  background: rgba(201,160,78,.18); color: #8a6d2e; border-radius: 999px;
  padding: 2px 8px; margin-left: 4px; white-space: nowrap;
}
/* once a question is asked, the hero bows out and the log takes the space */
.ask-wrap.chatting .ask-center { display: none; }
.ask-wrap.chatting .ask-suggest { display: none; }
.ask-wrap.chatting .ask-log { flex: 1 1 auto; }

.ask-log { display: flex; flex-direction: column; }
/* keep autoscrolled targets clear of the sticky topbar / pinned input bar */
.ask-q-bubble, .ask-answer { scroll-margin-top: 84px; scroll-margin-bottom: 130px; }
.ask-new {
  align-self: flex-end; margin: 6px 0 0; border: 1px solid var(--line);
  background: rgba(255,255,255,.85); color: var(--navy-2); font-size: 12.5px;
  font-weight: 600; border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.ask-new:hover { border-color: var(--accent); color: var(--navy); }
.ask-new[hidden] { display: none; }
.ask-q-bubble {
  background: rgba(108, 118, 134, .16); color: var(--text);
  border: 1px solid rgba(108, 118, 134, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 16px; margin: 16px 0 10px auto; max-width: 80%; width: fit-content;
  font-size: 14.5px;
}
.ask-answer { margin-bottom: 6px; background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ask-error { color: var(--hot); margin: 0 0 6px; }
.ask-summary { font-size: 15px; line-height: 1.65; color: var(--text); margin: 0 0 12px; }
.ask-data { margin-bottom: 8px; }
.ask-data > summary { cursor: pointer; font-size: 12.5px; color: var(--navy-2);
  font-weight: 600; user-select: none; margin-bottom: 8px; }
.ask-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ask-act {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  font-size: 12.5px; color: var(--muted); padding: 5px 12px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.ask-act:hover { border-color: var(--accent); color: var(--navy); }
.ask-act-on { background: rgba(201,160,78,.16); border-color: var(--accent);
  color: var(--navy); }
.ask-actions .ask-meta { margin: 0 0 0 auto; }
.ask-meta { font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.ask-sql summary { cursor: pointer; font-size: 12.5px; color: var(--navy-2);
  font-weight: 600; user-select: none; }
.ask-sql pre {
  background: #f6f7f9; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; overflow-x: auto; margin: 8px 0 0;
  white-space: pre-wrap;
}
.ask-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ask-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); padding: 6px 10px; border-bottom: 1.5px solid var(--line);
  white-space: nowrap;
}
.ask-table td { padding: 6px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap; }
.ask-table tr:last-child td { border-bottom: none; }

/* suggestions: label + card-like chips in a row above the input */
.ask-suggest { margin: 0 0 14px; }
.ask-suggest-label { font-size: 13px; font-weight: 700; color: var(--navy-2);
  margin: 0 0 10px; }
.ask-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ask-chip {
  text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--text);
  background: rgba(255, 255, 255, .82); border: 1px solid rgba(31, 51, 85, .12);
  border-radius: 10px; padding: 14px 16px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 30, 50, .05);
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.ask-chip:hover { border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 30, 50, .09); }

/* the input: one white pill with the send arrow inside, stuck to the bottom */
.ask-form {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid rgba(31, 51, 85, .18); border-radius: 14px;
  padding: 6px 8px 6px 20px; position: sticky; bottom: 16px;
  box-shadow: 0 8px 28px rgba(20, 30, 50, .10);
}
.ask-form:focus-within { border-color: #c9d3e6;
  box-shadow: 0 10px 30px rgba(20, 30, 50, .14); }
.ask-form input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 15px; color: var(--text); padding: 11px 0;
}
.ask-form input::placeholder { color: #9aa3b0; }
.ask-send {
  flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: var(--navy-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .1s;
}
.ask-send:hover { background: rgba(201, 160, 78, .15); color: var(--navy); }
.ask-send:active { transform: scale(.92); }
.ask-send:disabled { opacity: .45; cursor: default; }

@media (max-width: 760px) {
  .ask-chips { grid-template-columns: 1fr; }
  .ask-title { font-size: 24px; }
  .ask-wrap { min-height: calc(100vh - 120px); }
}

/* sortable card-table headers */
table.pageable thead th.pg-sortable { cursor: pointer; user-select: none;
  white-space: nowrap; }
table.pageable thead th.pg-sortable:hover { color: var(--navy); }
th.pg-sort-asc::after { content: " \25B4"; color: var(--accent); font-size: 10px; }
th.pg-sort-desc::after { content: " \25BE"; color: var(--accent); font-size: 10px; }

/* drug profile: FDA Label card section disclosures */
.lbl-psec { border-top: 1px solid var(--line); }
.lbl-psec:first-child { border-top: 0; }
.lbl-psec > summary { list-style: none; cursor: pointer; padding: 10px 2px;
  font-size: 14px; font-weight: 600; color: var(--navy-2); user-select: none;
  display: flex; align-items: center; }
.lbl-psec > summary::-webkit-details-marker { display: none; }
.lbl-psec > summary::after { content: "\25BE"; margin-left: auto;
  color: var(--muted); transition: transform .15s ease; transform: rotate(-90deg); }
.lbl-psec[open] > summary::after { transform: none; }
.lbl-psec-body { padding: 0 2px 12px; }

/* Rx Book search: label-text match list */
.lblm-list { display: flex; flex-direction: column; }
.lblm-item { display: block; padding: 10px 2px; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--text); }
.lblm-item:first-child { border-top: 0; }
.lblm-item:hover { background: #f8f9fb; text-decoration: none; }
.lblm-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lblm-head strong { color: var(--navy); }
.lblm-generic { color: var(--muted); font-size: 13px; }
.lblm-appl { color: var(--muted); font-size: 12px; margin-left: auto; }
.lblm-snip { display: block; margin-top: 3px; font-size: 13px; color: var(--muted);
  line-height: 1.5; }
.lblm-snip mark { background: rgba(201, 160, 78, .28); color: var(--navy);
  border-radius: 3px; padding: 0 2px; }

/* ------------------------------------------------ Label Search */
.lbl-count { font-size: 13px; color: var(--muted); margin: 10px 0 10px; }
.lbl-types { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lbl-type {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  text-decoration: none;
}
.lbl-type span { font-weight: 700; color: var(--navy-2); }
.lbl-type:hover { border-color: var(--accent); color: var(--navy); text-decoration: none; }
.lbl-type.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.lbl-type.active span { color: var(--gold-bright, #e3bc6a); }
.lbl-hit { margin-bottom: 12px; }
.lbl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; }
.lbl-name { font-size: 16px; font-weight: 700; color: var(--navy); }
.lbl-name:hover { color: var(--navy-2); }
.lbl-meta { font-size: 12.5px; color: var(--muted); }
.lbl-snip { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; }
.lbl-snip:first-of-type { border-top: none; }
.lbl-sec {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--navy-2); background: #eef2fb;
  border-radius: 6px; padding: 3px 8px; margin-top: 2px; white-space: nowrap;
}
.lbl-text { color: var(--text); min-width: 0; }
.lbl-expand {
  flex-shrink: 0; border: 1px solid var(--line); background: #fff;
  color: var(--navy-2); width: 24px; height: 24px; border-radius: 7px;
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0; margin-top: 1px;
}
.lbl-expand:hover { border-color: var(--accent); color: var(--navy); }
.lbl-full {
  margin: 0 0 10px 34px; padding: 12px 16px; background: #fafbfc;
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px; line-height: 1.65; color: var(--text);
  max-height: 480px; overflow-y: auto;
}
.lbl-full mark { background: rgba(201, 160, 78, .35); border-radius: 3px; padding: 0 2px; }
.lbl-full[hidden] { display: none; }
.lbl-text mark { background: rgba(201, 160, 78, .35); color: inherit;
  border-radius: 3px; padding: 0 2px; }
.lbl-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.lbl-examples a {
  border: 1px solid var(--line); background: #fff; color: var(--navy-2);
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px; text-decoration: none;
}
.lbl-examples a:hover { border-color: var(--accent); color: var(--navy); }

/* ------------------------------------------------ frosted-glass panels
   Dropdown menus (apps mega-menu, profile menu, dashboard gear) and the
   Rx Book typeahead render as translucent glass: the page blurs through.
   Solid-white fallback below for browsers without backdrop-filter. */
.nav-dd-menu, .dash-gear-menu, .obp-suggest {
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 16px 44px rgba(10, 18, 34, .22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-dd-menu, .dash-gear-menu, .obp-suggest { background: #fff; }
}
/* translucent hover fills so the glass shows through highlighted rows too */
.nav-dd-menu a:hover, .topbar nav .nav-dd-menu a:hover,
.obp-sug-item:hover, .obp-sug-item.active,
.dash-add-item:hover { background: rgba(31, 51, 85, .08); }
.nav-dd-menu a.signout:hover, .dgm-reset:hover { background: rgba(192, 69, 91, .12); }
.obp-sug-item.obp-sug-more:hover, .obp-sug-item.obp-sug-more.active {
  background: rgba(201, 160, 78, .16); }

/* ------------------------------------------ trials disclosure timeline */
.disc-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.disc-form label {
  display: flex; flex-direction: column; gap: 4px; font-size: 12.5px;
  font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .4px;
}
.disc-form input {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 15px; background: #fff; color: var(--text);
}
.disc-form input[type=search] { min-width: 300px; }
.disc-form input:focus { outline: 2px solid var(--navy-2); border-color: var(--navy-2); }
.disc-form .btn-outline { padding: 10px 16px; border-radius: 7px; }

.chip {
  display: inline-block; padding: 4px 12px; margin: 0 6px 6px 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-size: 13px; color: var(--navy); text-decoration: none;
}
a.chip:hover { border-color: var(--accent); text-decoration: none; }
.chip-static { color: var(--muted); font-family: ui-monospace, monospace;
  font-size: 12.5px; }

/* Earliest disclosure — the date a prior-art argument turns on. */
.disc-first {
  display: flex; gap: 14px; align-items: baseline; margin-top: 14px;
  padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; background: #fbfaf6;
}
.disc-first-date { font-weight: 700; color: var(--navy); white-space: nowrap; }

.disc-chart { display: flex; flex-direction: column; gap: 3px; }
.disc-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.disc-year { width: 42px; color: var(--muted); font-variant-numeric: tabular-nums; }
.disc-track { flex: 1; height: 12px; background: #eceff3; border-radius: 999px; }
.disc-fill {
  display: block; height: 100%; border-radius: 999px; background: var(--navy-2);
  min-width: 2px;
}
.disc-n { width: 46px; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.disc-cum { width: 130px; text-align: right; color: var(--muted);
  font-variant-numeric: tabular-nums; }

/* ---------------------------------------- trial links: evidence snippets */
.ev-details > summary {
  cursor: pointer; color: var(--navy-2); font-size: 13px; white-space: nowrap;
}
.ev-snippet {
  margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--line);
  background: #f6f8fb; border-radius: 0 6px 6px 0; max-width: 640px;
}
.ev-where {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin-bottom: 4px;
}
.ev-snippet p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.ev-full > summary { cursor: pointer; font-size: 12.5px; color: var(--navy-2); }
.ev-full-body { margin-top: 6px; max-height: 340px; overflow-y: auto; }
.ev-snippet > a.meta-line { display: inline-block; margin-top: 6px; }

/* --------------------------------- My Session History: window filters */
/* Two rows on one grid: a fixed label column, then a box that fills the rest,
   so From and To are always the same width and flush with the panel's edge
   whatever a date picker's own minimum width turns out to be. */
.sh-range { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; row-gap: 8px; column-gap: 8px; }
.sh-range label { display: contents; font-size: 12.5px; color: var(--muted); }
.sh-range label::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; }
.sh-range input {
  width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 5px 6px; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 6px; font-variant-numeric: tabular-nums;
}
.sh-range input:focus { outline: none; border-color: var(--accent); }
table.sh-table thead th { cursor: pointer; user-select: none; white-space: nowrap; }
table.sh-table thead th:hover { color: var(--navy-2); }
table.sh-table td:nth-child(-n+2) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.facet-opts:empty::after { content: "Nothing in this window"; font-size: 12.5px; color: var(--muted); padding: 3px 4px; }
/* patent-cliff rows: the pediatric date sits under the patent's own */
.cliff-when { width: 1%; white-space: nowrap; }
.cliff-note { display: block; font-size: 11.5px; margin: 2px 0 0; }
.cliff-covers { color: var(--muted); font-size: 13px; }

/* Profile > Security: the switch check opens inside the card (security-card.js) */
.sec-body { overflow: hidden; transition: height .26s ease, opacity .14s ease; }
.sec-body.sec-fading { opacity: 0; }
.sec-lede { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .sec-body { transition: none; } }