/* Sequences: the search page and the hosted sign-in page. Self-contained: no other stylesheet and nothing from
   another site. Layout and type scale after the Alexandria library page, with Firecrawl's home and playground as the
   second reference (read 2026-11-06); colors, type and logo from the ConductScience library style guide 1.38.0
   (conductscience-publishing 4280f96d). */

/* Brand. A brand change edits this block, biosequence/brand.mjs and the files in biosequence/brand/: the logo, the
   mark and the font with its license. */

/* Inter, the library's typeface, from this server: the Latin set with its weight and optical-size axes (Google Fonts
   v20, as packaged in @fontsource-variable/inter 5.3.0), under the SIL Open Font License in brand/font-license.txt.
   Large type takes Inter's display cut on its own. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("brand/font.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --brand-action: #0d67ff;        /* CS blue: primary buttons and the headline accent; white text on it is 4.8:1 */
  --brand-action-hover: #0b57d9;
  --brand-link: #1d4ed8;          /* blue-700: links, focus rings and counts */
  --brand-ink: #0b1d3a;           /* navy: headings, the dark button and the chosen chip or tab */
  --brand-tint: #eef5ff;          /* the top bar and hero band */
  --brand-tint-strong: #dbe8ff;
  --brand-art: 13 103 255;        /* the sequence-letter art, the hero grid and card hover, as R G B */
  --theme-color: #0d67ff;
  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* Neutrals (the .org slate scale), status colors and geometry. */
:root {
  --ink: #0f172a;
  --ink-2: #475569;               /* secondary text: 4.5:1 or more on every surface below */
  --ink-3: #64748b;               /* placeholders and quiet marks, on white only */
  --paper: #fafaf7;
  --card: #ffffff;
  --well: #fbfcfe;
  --soft: #f4f6f9;
  --chip: #f1f4f8;                /* chips and result tabs that are not chosen */
  --chip-hover: #e7ecf2;
  --line: #e2e8f0;
  --line-faint: #e8ecf1;          /* card edges and section rules */
  --line-2: #cbd5e1;
  --field: #7c8aa0;               /* field borders: 3.5:1 on white */
  --ok: #047857;
  --ok-tint: #ecfdf5;
  --run: #0e7490;
  --run-tint: #ecfeff;
  --warn: #b45309;
  --warn-tint: #fffbeb;
  --warn-line: #fcd34d;
  --bad: #b91c1c;
  --bad-tint: #fef2f2;
  --bad-line: #fecaca;
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 14px;
  --shadow-s: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 32px -18px rgb(15 23 42 / 0.2);
  --wrap: 1024px;
  --gutter: 24px;
  --rail: calc(var(--wrap) / 2 + 44px);   /* the rails stand 44 px outside the column, as on Alexandria */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
a { color: var(--brand-link); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-link); outline-offset: 2px; }
.icon { width: 16px; height: 16px; flex: none; }
.mono { font-family: var(--font-mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 60; padding: 12px 16px;
  border-radius: var(--radius-s); background: var(--brand-ink); color: #fff; font-weight: 500;
}
.skip-link:focus { top: 12px; }

/* Top bar: on the hero's color, with no rule under it, so the two read as one band. */
.topbar { position: relative; z-index: 30; background: var(--brand-tint); }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 72px; padding-block: 12px; }
@media (min-width: 768px) {
  .topbar-inner { min-height: 84px; }
}
@media (min-width: 1024px) {
  .topbar-inner { min-height: 100px; }
}
.brand { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.brand-logo img { display: block; width: auto; height: 32px; }
@media (min-width: 640px) {
  .brand-logo img { height: 36px; }
}
/* The library and the page name, split by a thin slash drawn as a line. */
.brand-product { display: inline-flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--brand-ink); }
.brand-product::before { content: ''; width: 1px; height: 22px; background: var(--line-2); transform: rotate(16deg); }
.topbar-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-left: auto; min-width: 0; }
.mode-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-s); background: rgb(255 255 255 / 0.7);
  font: 400 12px/1 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-2);
}
.account { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.account-email { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink-2); }
/* Signed in, the account says which service this is, so below 900 px the mode chip gives way and the bar keeps to
   one line on a tablet. On a phone the account takes a second line and the address shortens to fit. */
@media (max-width: 899px) {
  .topbar-end:has(.account:not([hidden])) .mode-chip { display: none; }
}

/* Buttons. Interface text is 13 to 16 px at weight 450, as on Alexandria; headings are semibold, as in the library. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px;
  font: 450 16px/1.25 var(--font-sans); white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
}
@media (min-width: 768px) {
  .btn { font-size: 14px; }
}
.btn:disabled { cursor: not-allowed; opacity: 0.45; }
.btn-primary { background: var(--brand-action); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 2px rgb(13 103 255 / 0.3); }
.btn-primary:hover:not(:disabled) { background: var(--brand-action-hover); }
.btn-dark { background: var(--brand-ink); color: #fff; box-shadow: 0 1px 2px rgb(11 29 58 / 0.24); }
.btn-dark:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-ink) 86%, #fff); }
.btn-outline { background: #fff; border-color: var(--line-2); color: var(--ink); box-shadow: var(--shadow-s); }
.btn-outline:hover:not(:disabled) { border-color: var(--field); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover:not(:disabled) { background: var(--chip); color: var(--ink); }
.btn-sm { padding: 0 12px; font-size: 14px; }
.btn-lg { min-height: 48px; padding: 0 20px; font-size: 16px; }
@media (min-width: 768px) {
  .btn-sm { font-size: 13px; }
  .btn-lg { font-size: 15px; }
}
.btn-icon { width: 44px; padding: 0; }
/* A count inside a button reads like a chip count: the same type, quieter. */
.btn-count { font: 450 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* A quiet pager button: a 32 px pill like a chip, drawn inside a 44 px target. */
.btn-chip { isolation: isolate; padding: 0 12px; border: 0; background: none; color: var(--ink); }
.btn-chip::before { content: ''; position: absolute; inset: 6px 0; z-index: -1; border-radius: var(--radius-s); background: var(--chip); }
.btn-chip:hover:not(:disabled)::before { background: var(--chip-hover); }
.btn-chip:focus-visible { outline: none; }
.btn-chip:focus-visible::before { outline: 2px solid var(--brand-link); outline-offset: 2px; }

/* Hero: a light band with a grid, sequence-letter art down both sides, the headline and the search. */
.hero {
  position: relative; isolation: isolate; overflow: clip; border-bottom: 1px solid var(--line-faint);
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--brand-tint) 26%, var(--paper) 82%);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(var(--brand-art) / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--brand-art) / 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 42%, transparent 90%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 42%, transparent 90%);
}
/* The art sits in the margins beside the 940 px column. Its letters shrink with the margin, so the helix (22 letters
   wide) always fits beside the content; the side art script draws it from 1280 px, the same width as here. */
.hero-art { display: none; }
@media (min-width: 1280px) {
  .hero-art {
    display: block; position: absolute; top: 0; bottom: 0; z-index: -1; width: calc(50% - 470px);
    margin: 0; overflow: hidden; pointer-events: none; user-select: none;
    font: 500 clamp(8px, calc((50vw - 490px) / 15.5), 13px)/1.3 var(--font-mono); letter-spacing: 0.1em; white-space: pre; color: transparent;
  }
  .hero-art-left {
    left: 0; padding: 24px 0 0 20px;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 94%);
    mask-image: linear-gradient(to bottom, #000 50%, transparent 94%);
  }
  .hero-art-right {
    right: 0; padding: 24px 0 0 24px;
    -webkit-mask-image: radial-gradient(120% 78% at 100% 35%, #000 35%, transparent 80%);
    mask-image: radial-gradient(120% 78% at 100% 35%, #000 35%, transparent 80%);
  }
  .hero-art .t1 { color: rgb(var(--brand-art) / 0.14); }
  .hero-art .t2 { color: rgb(var(--brand-art) / 0.26); }
  .hero-art .t3 { color: rgb(var(--brand-art) / 0.4); }
  .hero-art .t4 { color: rgb(var(--brand-art) / 0.62); }
}
.hero-inner { display: flex; flex-direction: column; align-items: center; padding-top: 32px; text-align: center; }
@media (min-width: 768px) {
  .hero-inner { padding-top: 44px; }
}
@media (min-width: 1024px) {
  .hero-inner { padding-top: 28px; }
}
.pill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 30px; margin-bottom: 20px; padding: 4px 12px 4px 10px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgb(255 255 255 / 0.88); box-shadow: var(--shadow-s);
  font: 400 12px/1.35 var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .pill { margin-bottom: 24px; }
}
.pill-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.pill[data-tone="checking"] .pill-dot { background: var(--brand-action); }
.pill[data-tone="ready"] .pill-dot { background: #10b981; box-shadow: 0 0 0 3px rgb(16 185 129 / 0.2); }
.pill[data-tone="warn"] .pill-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgb(245 158 11 / 0.22); }
.pill[data-tone="bad"] { border-color: var(--bad-line); background: var(--bad-tint); color: var(--bad); }
.pill[data-tone="bad"] .pill-dot { background: var(--bad); }
/* Headline: 60 px on 64 px lines on wide screens and 30 px on a phone, as on Alexandria, in Inter semibold, the
   library's weight for titles. */
.hero-title {
  font-size: clamp(1.9rem, 1.05rem + 3.4vw, 3.75rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.015em;
  color: var(--brand-ink); text-wrap: balance;
}
@media (min-width: 768px) {
  .hero-title { line-height: 1.07; }
}
.hero-line { display: block; }
.hero-accent { color: var(--brand-action); }
.hero-sub { max-width: 33rem; margin-top: 16px; font-size: 18px; line-height: 26px; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 768px) {
  .hero-sub { font-size: 16px; line-height: 24px; }
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; margin-top: 24px; }
@media (max-width: 559px) {
  .hero-actions > .btn { flex: 1 1 100%; }
}

/* The search: one card under its title, which the page fills for the query's type (0.61.0). */
.search-block { display: grid; gap: 16px; max-width: 920px; margin-top: 32px; padding-bottom: 56px; scroll-margin-top: 16px; }
.search-block:focus { outline: none; }
@media (min-width: 768px) {
  .search-block { padding-bottom: 80px; }
}
/* The card's head: its title and the Antibody CDRs switch, which shows the antibody form in the search form's place.
   The switch is a checkbox drawn as a 36 by 20 px track; the label around it is the 44 px target. */
.search-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; text-align: left; }
.search-heading { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--brand-ink); }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font-size: 14.5px; font-weight: 450; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.switch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--field); }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-s); }
.switch:has(input:checked) .switch-track { background: var(--brand-action); }
.switch:has(input:checked) .switch-track::after { transform: translateX(16px); }
.switch:has(input:focus-visible) { outline: 2px solid var(--brand-link); outline-offset: 2px; border-radius: var(--radius-s); }
/* A fault in the query sits under the box and names the line and the character. */
.field-fault { margin: 0; padding: 8px 12px; border: 1px solid var(--bad-line); border-radius: var(--radius-s); background: var(--bad-tint); color: var(--bad); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.input[aria-invalid="true"] { border-color: var(--bad); }
/* Query type: two chips and the line that says where the type came from. */
.query-type-chips { align-items: center; }
.query-type-note { flex: 1 1 14rem; margin-left: 4px; }
/* A file over the search card shows where a drop goes; a publication's XML then offers to start a case. */
.search-block.is-dropping .search-card { outline: 2px dashed var(--brand-link); outline-offset: 4px; }
.drop-offer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px; border: 1px solid var(--brand-tint-strong); border-radius: var(--radius); background: var(--brand-tint); }
.drop-offer p { margin: 0; }
.drop-offer-text { font-weight: 500; overflow-wrap: anywhere; }
.drop-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The case button names the publication, which can be wider than a phone: its words wrap inside the button. */
.drop-offer .btn { max-width: 100%; padding-block: 10px; white-space: normal; text-align: left; }

.card { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--card); box-shadow: var(--shadow); }
.search-card { overflow: clip; text-align: left; }
.card-body { display: grid; gap: 20px; padding: 18px; }
@media (min-width: 768px) {
  .card-body { padding: 24px 24px 20px; }
}
.field { display: grid; gap: 8px; min-width: 0; }
.label { font: 400 11.5px/1.25 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.hint { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--field); border-radius: 10px;
  background: #fff; color: var(--ink); font-size: 15px; line-height: 1.4;
}
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:focus { outline: none; border-color: var(--brand-link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-link) 22%, transparent); }
.input-code { background: var(--well); font: 13.5px/1.6 var(--font-mono); }
textarea.input { display: block; min-height: 190px; padding: 12px 14px; resize: vertical; }
select.input {
  appearance: none; padding-right: 36px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
}
input[type="search"].input {
  padding-left: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.25' fill='none' stroke='%23475569' stroke-width='1.5'/%3E%3Cpath d='m10.2 10.2 3.3 3.3' stroke='%23475569' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center / 15px;
}
input[type="file"].input { padding: 8px 10px; font-size: 14px; }
.row { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.row > legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; }
.row > legend + * { clear: both; }

/* Chips: radio buttons drawn as 32 px pills, with a count where there is one. The chosen chip is navy. */
.chips { display: flex; flex-wrap: wrap; gap: 12px 8px; padding-block: 6px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 12px;
  border: 1px solid transparent; border-radius: 999px; background: var(--chip); color: var(--ink);
  font-size: 15px; line-height: 22px; font-weight: 450; cursor: pointer;
}
@media (min-width: 768px) {
  .chip { padding-block: 5px; font-size: 13px; line-height: 20px; }
}
/* The radio button reaches 6 px past the pill above and below, so each chip is a 44 px target although it looks
   like a 32 px pill; rows sit 12 px apart, so neighboring targets never overlap. */
.chip input { position: absolute; top: -7px; left: -1px; width: calc(100% + 2px); height: calc(100% + 14px); margin: 0; opacity: 0; cursor: inherit; }
.chip-name { overflow-wrap: anywhere; }
.chip-count { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chip:hover { background: var(--chip-hover); }
.chip:has(input:checked) { background: var(--brand-ink); color: #fff; }
.chip:has(input:checked) .chip-count { color: rgb(255 255 255 / 0.72); }
.chip:has(input:focus-visible) { outline: 2px solid var(--brand-link); outline-offset: 2px; }
.chip:has(input:disabled) { border: 1px dashed var(--line-2); background: transparent; color: #94a3b8; cursor: not-allowed; }
.chips-empty { padding: 6px 0; font-size: 14px; color: var(--ink-2); }

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--brand-action); }

.settings { border-top: 1px dashed var(--line-2); padding-top: 4px; }
.settings > summary, .query-details > summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; border-radius: var(--radius-s);
  font-size: 14.5px; font-weight: 500; list-style: none; cursor: pointer;
}
.settings > summary::-webkit-details-marker, .query-details > summary::-webkit-details-marker { display: none; }
.settings > summary::before, .query-details > summary::before {
  content: ''; width: 7px; height: 7px; margin: 0 3px 0 4px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg);
}
.settings[open] > summary::before, .query-details[open] > summary::before { transform: rotate(45deg); }
.settings-body { display: grid; gap: 12px; padding: 8px 0 4px; }
.settings-grid { display: grid; gap: 14px; }
@media (min-width: 560px) {
  .settings-grid { grid-template-columns: 1fr 1fr; }
}

.card-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  padding: 12px 18px 14px; border-top: 1px solid var(--line); background: #fcfdfe;
}
@media (min-width: 768px) {
  .card-foot { padding: 14px 24px 16px; }
}
.card-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.file-button { overflow: hidden; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.file-button:has(input:focus-visible) { outline: 2px solid var(--brand-link); outline-offset: 2px; }
.card-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; margin-left: auto; }
.card-submit .hint { max-width: 34ch; text-align: right; }
@media (max-width: 559px) {
  .card-submit { width: 100%; }
  .card-submit .hint { max-width: none; text-align: left; }
  .card-submit .btn { width: 100%; }
}

/* The search started from this page */
.current-job {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px;
  padding: 14px 16px 17px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-s); text-align: left;
}
.current-job-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; grid-column: 1 / -1; }
@media (min-width: 640px) {
  .current-job { grid-template-columns: auto minmax(0, 1fr) auto; }
  .current-job-actions { grid-column: auto; }
}
.current-job-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--run-tint); }
.current-job-icon::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--run); border-right-color: transparent; border-radius: 50%; }
.current-job[data-tone="queued"] .current-job-icon { background: var(--warn-tint); }
.current-job[data-tone="queued"] .current-job-icon::before { border-color: var(--warn); border-right-color: transparent; }
.current-job[data-tone="done"] .current-job-icon { background: var(--ok-tint); }
.current-job[data-tone="done"] .current-job-icon::before { width: 6px; height: 11px; margin-top: -3px; border: solid var(--ok); border-width: 0 2px 2px 0; border-radius: 0; transform: rotate(45deg); }
.current-job[data-tone="bad"] .current-job-icon { background: var(--bad-tint); }
.current-job[data-tone="bad"] .current-job-icon::before, .current-job[data-tone="muted"] .current-job-icon::before { width: 10px; height: 10px; border: 0; background: var(--bad); }
.current-job[data-tone="muted"] .current-job-icon { background: var(--soft); }
.current-job[data-tone="muted"] .current-job-icon::before { background: var(--ink-3); }
.current-job-text { display: grid; gap: 3px; min-width: 0; }
.current-job-text strong { font-weight: 500; overflow-wrap: anywhere; }
#current-job-status { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; overflow: hidden; background: var(--run-tint); }
.progress-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; border-radius: 3px; background: var(--run); }
.current-job[data-tone="done"] .progress, .current-job[data-tone="bad"] .progress, .current-job[data-tone="muted"] .progress { display: none; }

.privacy { display: flex; align-items: flex-start; justify-content: center; gap: 10px; max-width: 46rem; margin-inline: auto; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-align: left; }
.privacy strong { font-weight: 500; color: var(--ink); }
.privacy .icon { margin-top: 2px; }

/* Sections below the hero: centered heads, framed by thin rails on wide screens */
.section { position: relative; padding-block: 56px; border-bottom: 1px solid var(--line-faint); scroll-margin-top: 16px; }
@media (min-width: 768px) {
  .section { padding-block: 88px; }
  /* The page scrolls to the results when they open, so they start closer to the top. */
  #results { padding-top: 56px; }
}
@media (min-width: 1240px) {
  .section {
    background:
      linear-gradient(var(--line-faint), var(--line-faint)) calc(50% - var(--rail)) 0 / 1px 100% no-repeat,
      linear-gradient(var(--line-faint), var(--line-faint)) calc(50% + var(--rail)) 0 / 1px 100% no-repeat;
  }
  .section::before, .section::after { content: '+'; position: absolute; top: -9px; font: 400 15px/16px var(--font-mono); color: var(--line-2); }
  .section::before { left: calc(50% - var(--rail) - 4px); }
  .section::after { left: calc(50% + var(--rail) - 4px); }
}
.section-head { display: grid; justify-items: center; gap: 14px; max-width: 40rem; margin: 0 auto 36px; text-align: center; }
@media (min-width: 768px) {
  .section-head { margin-bottom: 48px; }
}
.kicker { font: 400 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-link); }
.kicker::before { content: '[ '; color: var(--field); }
.kicker::after { content: ' ]'; color: var(--field); }
.section > .wrap > .kicker { margin-bottom: 20px; text-align: center; }
/* Section heads: 52 px on 56 px lines on wide screens and 30 px on a phone, semibold. */
.section-title { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; color: var(--brand-ink); text-wrap: balance; }
@media (min-width: 768px) {
  .section-title { line-height: 1.08; }
}
.section-sub { max-width: 34rem; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* A count beside a heading, quieter than the words, as on a chip. */
.count-chip { font-variant-numeric: tabular-nums; color: var(--field); }

/* Results */
.results-card { overflow: hidden; border-color: var(--line-faint); }
.results-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 18px 14px; }
@media (min-width: 768px) {
  .results-head { padding: 24px 24px 16px; }
}
.results-heading { display: grid; flex: 1 1 320px; gap: 6px; min-width: 0; }
.results-heading h2 { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--brand-ink); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .results-heading h2 { font-size: 24px; }
}
#result-summary { font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.results-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 559px) {
  .results-actions, .results-actions .btn { width: 100%; }
}
.results-overview { display: grid; gap: 10px; padding: 0 18px 12px; }
@media (min-width: 768px) {
  .results-overview { padding: 0 24px 14px; }
}
.flag { padding: 10px 12px; border: 1px solid var(--bad-line); border-radius: var(--radius-s); background: var(--bad-tint); color: var(--bad); font-size: 14px; font-weight: 500; }
.query-list { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.query-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--soft); font-size: 13.5px; }
.query-list strong { font-family: var(--font-mono); font-weight: 500; overflow-wrap: anywhere; }
.query-list span { color: var(--ink-2); }
.query-list .tool-bad { color: var(--bad); font-weight: 500; }

/* The result tabs look like chips: each button is a 44 px target with a 32 px pill drawn inside it. */
.tabs { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0 18px 8px; }
@media (min-width: 768px) {
  .tabs { margin-inline: 24px; }
}
.tab {
  position: relative; isolation: isolate; display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 0; background: none; color: var(--ink); font-size: 15px; font-weight: 450; white-space: nowrap; cursor: pointer;
}
@media (min-width: 768px) {
  .tab { font-size: 13px; }
}
.tab::before { content: ''; position: absolute; inset: 6px 0; z-index: -1; border-radius: 999px; background: var(--chip); }
.tab:hover::before { background: var(--chip-hover); }
.tab[aria-selected="true"] { color: #fff; }
.tab[aria-selected="true"]::before { background: var(--brand-ink); }
.tab:focus-visible { outline: none; }
.tab:focus-visible::before { outline: 2px solid var(--brand-link); outline-offset: 2px; }
.tab-count { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tab[aria-selected="true"] .tab-count { color: rgb(255 255 255 / 0.72); }
.tab-count:empty { display: none; }

.results-panel, .record-panel { display: grid; gap: 14px; padding: 18px; border-top: 1px solid var(--line-faint); }
@media (min-width: 768px) {
  .results-panel, .record-panel { padding: 22px 24px 24px; }
}
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
/* The search box takes two columns while the filters sit three or fewer to a row, so the patent filters fill their
   rows; from 934 px they sit four to a row, and each field takes one. */
@media (min-width: 640px) and (max-width: 933.98px) {
  .field-search { grid-column: span 2; }
}
.measure-note { max-width: 96ch; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.result-count { font-size: 14.5px; font-weight: 500; }
.excluded-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--ink-2); }
.mark-reason { max-width: 560px; }
.align-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--soft); }
.field-inline { flex: 1 1 220px; max-width: 280px; }
#align-count { align-self: center; font-size: 13px; color: var(--ink-2); }

/* position: relative keeps a hidden label (.sr-only) in a wide table inside the scroller, not past the page edge. */
.table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--soft); text-align: left; white-space: nowrap;
  font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line-faint); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #f8faff; }
.table td strong { display: block; font-weight: 500; overflow-wrap: anywhere; }
.table td small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
/* A warning line under a hit (a retracted paper, a date after the cutoff) keeps the warning color. */
.table td small.tool-warn { color: var(--warn); }
.table a { font-weight: 500; }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sequence-date { font-family: var(--font-mono); white-space: nowrap; }
.sequence-marks { white-space: nowrap; }
.sequence-marks .btn { padding: 0 10px; }
.table td .mark-keep { color: var(--ok); font-weight: 500; }
.table td .mark-exclude { color: var(--bad); font-weight: 500; }
/* A family kept in part (0.53.0): green, at the text weight, so it reads apart from a family kept whole. */
.table td .mark-some { color: var(--ok); }
.sequence-exact strong { color: var(--ok); }
.sequence-select .tool-check { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -10px -8px; cursor: pointer; }
.sequence-select input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-action); }
.tool-bad { color: var(--bad); }
.tool-warn { color: var(--warn); font-weight: 500; }

/* The review desk (0.51.0). The results list is one line per row, 44 px tall, with long text cut by an ellipsis and
   the full text in the row's tooltip. A click anywhere on a row, or a key, selects it: a tint, a semibold navy
   name and aria-current on it. The selected row's detail is the pane: beside the list from 1,280 px, where the
   card takes the window up to 1,760 px and the list and the pane each scroll inside themselves under a header that
   stays; below 1,280 px, in a row that opens under the selected row. The list's columns go by its own width: the
   p1 columns always, p2 from 480 px, p3 from 820 px. Applicants keeps its own table, no wider than the page column. */
.results-bar .fold:first-of-type { margin-left: auto; }
.fold > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: var(--radius-s);
  font-size: 13.5px; font-weight: 500; color: var(--brand-link); list-style: none; cursor: pointer;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ''; width: 6px; height: 6px; margin: 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.fold[open] { flex-basis: 100%; }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold .measure-note, .keys-list { padding: 2px 0 6px 18px; }
.keys-list { display: grid; gap: 4px; margin: 0; list-style: none; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px;
  background: #fff; color: var(--ink); font: 500 11.5px/1.3 var(--font-mono); text-align: center;
}
.result-list { container: result-list / inline-size; overflow-anchor: none; }
.table-review { table-layout: fixed; }
.table-review th, .table-review th.num { padding: 8px 10px; white-space: normal; vertical-align: bottom; }
/* A row is 44 px with its rule: the rule is a shadow inside the cell, not a border below it. */
.table-review td { height: 44px; padding: 0 10px; overflow: hidden; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line-faint); vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; }
.table-review .col-select { width: 52px; }
.table-review .col-num { width: 88px; }
.table-review .col-wide { width: 112px; }
.table-review .col-date { width: 108px; }
/* The Mark column fits its longest words, "Some kept" (0.53.0). */
.table-review .col-mark { width: 96px; }
.table-review .col-query { width: 9rem; }
.table-review .col-strand { width: 112px; }
.table-review td.col-strand { color: var(--ink-2); font-size: 13px; }
.table-review .p2, .table-review .p3 { display: none; }
@container result-list (min-width: 480px) {
  .table-review .p2 { display: table-cell; }
}
@container result-list (min-width: 820px) {
  .table-review .p3 { display: table-cell; }
}
.table-review .sequence-select .tool-check { margin: 0 -8px; }
/* A phone-wide list gives the name cell its accession and count only; the pane has the title. */
@container result-list (max-width: 479.98px) {
  .row-sub { display: none; }
  .table-review .row-main { flex: 0 1 auto; min-width: 0; max-width: none; font-size: 13px; }
  .table-review td { padding: 0 6px; }
  .table-review .row-name { gap: 6px; padding: 0 6px; }
  .table-review .row-chip { padding: 1px 6px; }
  .table-review .col-num { width: 72px; }
  .table-review .col-mark { width: 76px; }
  .table-review td.col-mark { font-size: 12.5px; }
  .row-chip-tail { display: none; }
  .table-review .col-date { width: 90px; }
  .table-review td.col-date { font-size: 12.5px; }
}
.table-review tbody tr { cursor: pointer; }
.table-review td.col-hit { padding: 0; }
.row-name {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; padding: 0 10px;
  overflow: hidden; border: 0; background: none; color: var(--ink); text-align: left; text-overflow: ellipsis; cursor: pointer;
}
.row-name:focus-visible { outline-offset: -2px; border-radius: var(--radius-s); }
.row-main { flex: none; max-width: 62%; overflow: hidden; font: 500 13.5px/1.3 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.row-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13.5px; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.row-chip { flex: none; margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--chip); font: 450 12px/1.5 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* A row's chips sit together at its end (0.53.0): "Filed before" in the running tint, "After date" in the warning
   tint, and a family's "+27 in family", whose words after the count show from a list width of 480 px. */
.row-chip ~ .row-chip { margin-left: 0; }
.row-chip.is-later { background: var(--warn-tint); color: var(--warn); }
.row-chip.is-filed { background: var(--run-tint); color: var(--run); }
/* Search in's sets of the other type (0.57.0), which a search reads in six frames, under their own small label. */
.translated-field { margin-top: 12px; }
.translated-label { margin: 0 0 8px; }
/* A combined search's list (0.57.0): Found in holds a chip for each set that found the reference, on one line. */
.table-review .col-sets { width: 184px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-chip { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; background: var(--chip); font: 450 12px/1.5 var(--font-sans); color: var(--ink-2); }
/* The line over a combined search's list while a set still searches or after one failed, with Run again. */
.combined-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.combined-status p { margin: 0; color: var(--ink-2); }
.combined-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Search record of a combined search: each set's own search, the SHA-256 of its record and a button that opens it. */
.combined-record { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.combined-member { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; }
.combined-member p { margin: 0 0 8px; }
.combined-member-hash { font-size: 12px; overflow-wrap: anywhere; color: var(--ink-2); }
/* A result with no match (0.61.0): the line says so, and each next step is a button that fills the search form. */
.next-steps { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--well); }
.next-steps-line { margin: 0; font-weight: 500; }
.next-step-list { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.next-step { display: grid; justify-items: start; gap: 6px; }
.next-step p { margin: 0; }
/* Recent jobs: Find a search and its status choice, over the cards (0.61.0). */
.jobs-find { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 640px) {
  .jobs-find { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.table-review tbody tr.is-selected td { background: var(--brand-tint); }
.table-review tbody tr.is-selected .row-main { color: var(--brand-ink); font-weight: 600; }
.table-review tr.empty-row td { height: auto; padding: 32px 16px; color: var(--ink-2); text-align: center; white-space: normal; cursor: default; }
.table-review tr.detail-row td { height: auto; padding: 0; overflow: visible; border-bottom: 1px solid var(--line); box-shadow: none; background: var(--well); white-space: normal; cursor: auto; }
.table-review tr.detail-row:hover td { background: var(--well); }

/* The pane: the names and measures, the marks with their reason, the alignment in lines of 60 with the differing
   letters tinted and bold on the hit's line, then where the sequence is published, its entries and its papers. */
.detail-body { display: grid; gap: 20px; min-width: 0; padding: 18px 18px 22px; }
@media (min-width: 768px) {
  .detail-body { padding: 20px 22px 24px; }
}
.detail-body h3, .detail-body h4, .detail-body h5 { margin: 0; }
.detail-head { display: grid; gap: 6px; min-width: 0; }
.detail-title { font: 500 15px/1.4 var(--font-mono); color: var(--brand-ink); overflow-wrap: anywhere; }
.detail-title a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.detail-sub { font-size: 14.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.detail-line { font-size: 13px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.detail-line.tool-warn { color: var(--warn); }
.detail-line.is-filed { color: var(--run); font-weight: 500; }
.detail-measures { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--line-faint); border-radius: var(--radius-s); background: var(--soft); }
.detail-measure { display: grid; gap: 2px; min-width: 0; }
.detail-measure dt { font: 400 10.5px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.detail-measure dd { margin: 0; font: 500 13.5px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detail-marks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.mark-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-marks .mark-reason { flex: 1 1 220px; max-width: none; }
.mark-state { flex-basis: 100%; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.mark-state.mark-keep { color: var(--ok); font-weight: 500; }
.mark-state.mark-exclude { color: var(--bad); font-weight: 500; }
.mark-state.mark-some { color: var(--ok); }
.detail-section { display: grid; gap: 10px; min-width: 0; }
.detail-heading { padding-bottom: 8px; border-bottom: 1px solid var(--line-faint); font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.detail-subheading { margin-top: 6px; font-size: 13.5px; font-weight: 500; }
.detail-alignment { display: grid; gap: 8px; min-width: 0; }
.detail-alignment { container-type: inline-size; }
/* Lines of 60 fit the pane where they can: the letters shrink to fit the longest line down to 10.5 px, and below
   that the block scrolls sideways by itself. data-chars is the longest line rounded up to ten letters. */
.aln { max-width: 100%; margin: 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--well); color: var(--ink); font: 12px/1.6 var(--font-mono); white-space: pre; }
.aln[data-chars="40"] { font-size: clamp(10.5px, calc((100cqi - 32px) / 24), 12.5px); }
.aln[data-chars="50"] { font-size: clamp(10.5px, calc((100cqi - 32px) / 30), 12.5px); }
.aln[data-chars="60"] { font-size: clamp(10.5px, calc((100cqi - 32px) / 36), 12.5px); }
.aln[data-chars="70"] { font-size: clamp(10.5px, calc((100cqi - 32px) / 42), 12.5px); }
.aln[data-chars="80"] { font-size: clamp(10.5px, calc((100cqi - 32px) / 48), 12.5px); }
.aln[data-chars="90"] { font-size: clamp(10.5px, calc((100cqi - 32px) / 54), 12.5px); }
.aln-diff { border-radius: 2px; background: var(--bad-tint); color: var(--bad); font-weight: 700; }
.aln-words { font-size: 13px; font-weight: 500; }
.detail-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copy-status { font-size: 13px; color: var(--ink-2); }
.detail-publications, .detail-entries, .detail-match-list { display: grid; margin: 0; padding: 0; list-style: none; }
.detail-publication, .detail-entries li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; border-bottom: 1px solid var(--line-faint); }
.detail-publication-link, .detail-entry-link { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/1.3 var(--font-mono); }
.detail-publication-facts { min-width: 0; padding: 4px 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.detail-flag { padding: 1px 8px; border-radius: 999px; background: var(--warn-tint); color: var(--warn); font-size: 12px; font-weight: 500; }
.detail-flag.mark-keep { background: var(--ok-tint); color: var(--ok); }
.detail-flag.mark-exclude { background: var(--bad-tint); color: var(--bad); }
.detail-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.detail-pager:empty { display: none; }
.detail-pager .mono { margin-right: auto; font-size: 12px; color: var(--ink-2); }
.detail-match-list { max-height: 312px; overflow-y: auto; gap: 2px; }
.detail-match {
  display: grid; gap: 1px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--radius-s);
  background: none; color: var(--ink); text-align: left; cursor: pointer;
}
.detail-match:hover { background: var(--soft); }
.detail-match[aria-pressed="true"] { background: var(--brand-tint-strong); }
.detail-match:focus-visible { outline-offset: -2px; }
.detail-match-name { font: 500 13px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.detail-match-facts { font-size: 12.5px; color: var(--ink-2); }
/* A member's facts break between facts, never inside a date. */
.detail-match-facts > .fact { white-space: nowrap; }
/* A family's pane (0.53.0): how it was formed, then its publications as pressable rows, the chosen one pressed, each
   with its dates and flags and an Open link to its page; the chosen one's matching sequences follow. */
.detail-flag.is-filed { background: var(--run-tint); color: var(--run); }
.detail-members { display: grid; gap: 2px; max-height: 312px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.detail-member { display: flex; align-items: center; gap: 4px; min-width: 0; }
.detail-member-pick { flex: 1 1 auto; min-width: 0; }
.detail-member-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.detail-member-link { flex: none; }
/* The line under the Patents list while a date is set: the folded count and Show them, or Fold them again. */
.fold-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 4px 12px; border-top: 1px solid var(--line-faint); font-size: 13.5px; color: var(--ink-2); }
.fold-line > span { padding: 6px 0; }
.detail-parts { display: grid; gap: 2px; min-width: 0; }
.detail-body small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.detail-body small.tool-warn { color: var(--warn); }
.detail-empty { padding: 40px 20px; color: var(--ink-2); text-align: center; }

@media (min-width: 1280px) {
  #results > .wrap { width: min(1760px, 100% - 48px); }
  #results.section { background: none; }
  #results.section::before, #results.section::after { content: none; }
  /* Applicants, CDR matches and the search record keep the page column's width inside the wide card. */
  .results-panel.is-applicants > *, .record-panel > *, .cdr-panel > * { max-width: 976px; }
  /* The filters share one line where they fit, and wrap where a field would go under its own width. */
  .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
  .filters > .field { flex: 1 1 128px; min-width: 0; }
  .filters > .field:has(input[type="date"]) { flex-basis: 164px; }
  .filters > .field-search { flex-grow: 1.5; }
  /* A select keeps room for its longest choice and its arrow, so its words are never cut; a field alone on a wrapped
     line stays a field wide. */
  .filters > .field:has(select) { flex-grow: 1.2; flex-basis: 144px; }
  .filters > .field:has(#sort) { flex-basis: 220px; }
  .filters > .field:has(#publication-group) { flex-basis: 176px; }
  .filters > .field:has(#publication-sort) { flex-basis: 200px; }
  .filters > .field { max-width: 360px; }
  .review-grid.is-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(520px, 42%); gap: 16px; height: calc(100vh - 32px); }
  .review-grid.is-desk > .result-list { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .review-grid.is-desk .table-review thead th { position: sticky; top: 0; z-index: 2; }
  .detail { min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
}

/* The Applicants tab (feature 2B). A row names the applicant, its other spellings, its joins, each with Undo join,
   and any suggested ROR record; then its publications, three listed and the rest under "N more". Links, summaries
   and buttons are 44 px targets. Below 768 px a row stacks as one block, with no header row: the select box beside
   the name, then the publications, the earliest date and the best identity, the last two with their column's name,
   so nothing scrolls sideways and every cell still says what it holds. */
#join-count { align-self: center; font-size: 13px; color: var(--ink-2); }
.applicant-join { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.applicant-join small { flex: 1 1 12rem; min-width: 0; overflow-wrap: break-word; }
.applicant-ror { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.applicant-ror a { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; overflow-wrap: break-word; }
.applicant-publication { display: block; min-height: 44px; padding: 12px 0; line-height: 20px; overflow-wrap: break-word; }
span.applicant-publication { color: var(--ink-2); }
.applicant-whole { white-space: nowrap; }
.applicant-more > summary { display: flex; align-items: center; min-height: 44px; color: var(--brand-link); font-weight: 500; cursor: pointer; }
/* A named applicant's quiet small buttons (feature 3C): watch it, export its portfolio and, once exported, its two
   files, lined up with the name's text; the line under them says what the export holds. */
.applicant-actions { display: grid; gap: 2px; margin-top: 4px; }
.applicant-buttons { display: flex; flex-wrap: wrap; margin-left: -10px; }
/* Their words may wrap, so the Applicant column never widens for them: at 768 px the table only just fits. */
.applicant-buttons .btn { padding: 0 10px; white-space: normal; text-align: left; }
.applicant-export { font-size: 12.5px; line-height: 18px; color: var(--ink-2); overflow-wrap: break-word; }
.join-log-body { display: grid; gap: 12px; padding: 4px 18px 18px; }
/* In the table, a publication and its date keep one line, so the column is as wide as the longest. */
@media (min-width: 768px) {
  .applicant-publication { white-space: nowrap; }
}
@media (max-width: 767.98px) {
  .table-applicants thead { display: none; }
  .table-applicants, .table-applicants tbody, .table-applicants td { display: block; }
  .table-applicants tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 12px; border-bottom: 1px solid var(--line-faint); }
  .table-applicants tbody tr:last-child { border-bottom: 0; }
  .table-applicants td { padding: 0; border: 0; }
  .table-applicants td:not(.sequence-select) { grid-column: 2; }
  .table-applicants .sequence-select .tool-check { justify-content: flex-start; margin: 0; }
  .table-applicants .num { text-align: left; }
  .table-applicants td[data-label] { padding-top: 6px; }
  /* The export line ends the name's block, apart from the publications under it. */
  .table-applicants .applicant-actions { margin-bottom: 10px; }
  .table-applicants td[data-label]::before { content: attr(data-label); margin-right: 8px; font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
}

/* Clinical context (feature 3A), on a server that runs the add-on: under a protein hit's title, a closed part for each
   drug target the hit reaches, in link blue with a plus, as a watch's new matches are. Opened, its body lines up
   under its words: the target's link, how the hit reached it and where the data come from in muted text, then the drugs,
   each with its mechanisms and its diseases, and under a disease its trials, ten at a time, each title in ink under
   its muted facts. Each list shows its first few and the rest under "N more". Every link, summary and button is a
   44 px target. Closed, the part keeps 12rem, so its summary takes two lines at most; open, it keeps 16rem (22rem
   from 768 px). The table scrolls inside its frame, not the part. */
.clinical { min-width: 12rem; margin-top: 2px; }
.clinical[open] { min-width: 16rem; }
@media (min-width: 768px) {
  .clinical[open] { min-width: 22rem; }
}
.clinical > summary, .clinical-more > summary, .clinical-trials > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--brand-link); font-weight: 500; cursor: pointer; list-style: none;
}
.clinical > summary::-webkit-details-marker, .clinical-more > summary::-webkit-details-marker, .clinical-trials > summary::-webkit-details-marker { display: none; }
.clinical > summary::before, .clinical-more > summary::before, .clinical-trials > summary::before { content: '+'; flex: none; width: 12px; font: 500 16px/1 var(--font-mono); }
.clinical[open] > summary::before, .clinical-more[open] > summary::before, .clinical-trials[open] > summary::before { content: '\2212'; }
.clinical-body { display: grid; gap: 2px; padding: 0 0 6px 20px; overflow-wrap: anywhere; }
.clinical ul, .clinical ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.clinical-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.clinical a { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; }
.clinical-line { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.clinical-stage, .clinical-fact { font-size: 12.5px; color: var(--ink-2); }
.clinical-id { font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; }
.clinical-drug { padding-top: 4px; }
.clinical-drug + .clinical-drug { border-top: 1px solid var(--line-faint); }
.clinical .clinical-diseases, .clinical .clinical-trial-list { padding-left: 14px; }
.clinical-trial { padding-bottom: 4px; }
.clinical-trial > .clinical-line { margin-top: 2px; color: var(--ink); }
.clinical-show { justify-self: start; margin-top: 2px; }

/* The funding trail (feature 3B), on a server that runs the add-on: under each paper of a hit whose grants PubMed
   lists, a closed part in link blue with a plus, as the clinical context part is. Opened, its body lines up under its
   words: where the data come from in muted text, then each NIH award (its project number in mono, linked to NIH
   RePORTER, its title in ink, its institutions with their fiscal years and its investigators in muted text), then the
   paper's other grants as PubMed lists them. Each list shows its first five and the rest under "N more". Every link
   and summary is a 44 px target. The part keeps the clinical part's widths: 12rem closed, 16rem open (22rem from
   768 px). */
.funding { min-width: 12rem; }
.funding[open] { min-width: 16rem; }
@media (min-width: 768px) {
  .funding[open] { min-width: 22rem; }
}
.funding > summary, .funding-more > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--brand-link); font-weight: 500; cursor: pointer; list-style: none;
}
.funding > summary::-webkit-details-marker, .funding-more > summary::-webkit-details-marker { display: none; }
.funding > summary::before, .funding-more > summary::before { content: '+'; flex: none; width: 12px; font: 500 16px/1 var(--font-mono); }
.funding[open] > summary::before, .funding-more[open] > summary::before { content: '\2212'; }
.funding-body { display: grid; gap: 2px; padding: 0 0 6px 20px; overflow-wrap: anywhere; }
.funding ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.funding-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.funding a { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; }
.funding-id { font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; }
.funding-title { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink); }
.funding-line, .funding-grant { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.funding-label { margin: 6px 0 0; font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--ink); }
.funding-award { padding-bottom: 4px; }
.funding-award + .funding-award { border-top: 1px solid var(--line-faint); }
/* The statements on federally sponsored research of a hit's US published applications, after the papers and at their
   level: a small muted line naming them (small.funding-group, as a paper's line is set), then the same part for each
   application, whose summary is the application: its number in the mono face and weight of an award's project number,
   then "Published" and its date, each kept on one line. A row with more ends on a small muted "N more applications"
   line. Opened, the statement's heading is a small ink label and its paragraphs are ink, as the application gives
   them. */
.funding-application { min-width: 0; }
.funding-statement .funding-id { font-weight: 500; white-space: nowrap; }
.funding-date { white-space: nowrap; }
.funding-statement .funding-label { margin-top: 0; }
.funding-text { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink); }
.funding-text + .funding-text { margin-top: 4px; }

/* Usage (admins only): the page's chips choose the days; three totals sit over a table by account and a table by
   day. An account keeps at least 11rem and a date one line, so on a phone a table scrolls sideways inside its frame
   rather than breaking an address every few letters. Each total's number sits at the foot of its card, so a label
   that wraps leaves the numbers in line. */
.usage .chips { justify-content: center; margin-bottom: 24px; }
.usage .callout { margin: 0 auto 24px; }
/* On a server that runs under a license, the license's plan and last day head the callout, over its message. */
.usage .callout strong { display: block; font-weight: 600; color: var(--brand-ink); }
.usage-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 40px; }
.usage-total { display: grid; grid-template-rows: 1fr auto; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.usage-total dt { font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.usage-total dd { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand-ink); }
.usage-heading { margin: 40px 0 12px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--brand-ink); }
.usage-totals + .usage-heading { margin-top: 0; }
.usage-account { min-width: 11rem; overflow-wrap: anywhere; }
.usage-day { white-space: nowrap; }
.table td.usage-empty { padding: 20px 12px; color: var(--ink-2); text-align: center; }
.usage-note { max-width: 46rem; margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
/* API tokens (feature 2C): the form that makes one, the new token shown once, and each token's state. */
.token-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; max-width: 46rem; margin: 0 auto 24px; }
.token-name { flex: 1 1 240px; }
.token-days { flex: 0 1 160px; }
.token-new { max-width: 46rem; margin: 0 auto 24px; padding: 14px 16px; border: 1px solid var(--brand-tint-strong); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-s); }
.token-new-title { margin: 0 0 10px; font-weight: 500; }
.token-new-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.token-secret { flex: 1 1 16rem; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--well); font: 13.5px/1.5 var(--font-mono); overflow-wrap: anywhere; user-select: all; }
.token-state[data-state="expired"], .token-state[data-state="revoked"] { color: var(--ink-2); }
/* A row with a Revoke button is as tall as the button, so its words sit level with the button's. A token's name
   keeps 8rem and the last use breaks before its time (tokenDate), so a tablet shows the whole table. */
.token-table td { vertical-align: middle; }
.token-label { min-width: 8rem; overflow-wrap: anywhere; }

/* Pagers: where you are on the left, the buttons on the right, under a faint rule. */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-faint); }
.pager > span { order: -1; margin-right: auto; font-size: 12px; color: var(--ink-2); }
#jobs-pager { margin-top: 16px; }

.alignment { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; scroll-margin-top: 16px; }
.alignment-head { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
.alignment-head h3 { font: 500 14px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.alignment-head p { font-size: 13px; color: var(--ink-2); }
.code { max-height: 480px; margin: 0; padding: 14px 16px; overflow: auto; background: var(--well); color: var(--ink); font: 12.5px/1.6 var(--font-mono); white-space: pre; }
.record-panel .code { max-height: 560px; border: 1px solid var(--line); border-radius: var(--radius); }

/* Job and database cards: flat, with a faint edge. A finished search's card is one button: it takes a light tint
   and a blue edge on hover, and the Open results button inside it covers the whole card. */
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.empty { grid-column: 1 / -1; padding: 28px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--ink-2); text-align: center; }
.sequence-job, .sequence-database {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px; overflow: hidden;
  border: 1px solid var(--line-faint); border-radius: var(--radius); background: transparent;
}
.sequence-job { min-height: 184px; }
.sequence-job[data-tone="bad"] { border-color: var(--bad-line); }
.sequence-job:has(.card-open):hover { border-color: rgb(var(--brand-art) / 0.3); background: rgb(var(--brand-art) / 0.035); }
.card-main { display: grid; flex: 1; align-content: start; gap: 14px; min-width: 0; }
.card-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.card-heading { display: grid; flex: 1; gap: 3px; min-width: 0; }
.icon-tile { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-faint); border-radius: var(--radius-s); background: #fff; color: var(--brand-link); }
.icon-tile svg { width: 16px; height: 16px; }
/* Card text is a size larger on a phone, as on Alexandria: 16 px names, 15 px text, 14 px footers. */
.card-title {
  display: -webkit-box; overflow: hidden; font-size: 16px; line-height: 22px; font-weight: 450; color: var(--ink);
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .card-title { font-size: 14px; line-height: 20px; }
}
.card-meta { display: flex; align-items: baseline; gap: 6px; font: 400 12px/18px var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere; }
.status-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transform: translateY(-1px); }
[data-tone="queued"] .status-dot { background: #f59e0b; }
[data-tone="running"] .status-dot { background: var(--run); }
[data-tone="done"] .status-dot { background: #10b981; }
[data-tone="bad"] .status-dot { background: var(--bad); }
.card-text { display: -webkit-box; overflow: hidden; font-size: 15px; line-height: 22px; color: var(--ink-2); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.sequence-job .tool-bad { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .card-text, .sequence-job .tool-bad { font-size: 13px; line-height: 20px; }
}
.card-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-faint); }
.card-when { display: grid; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.card-open {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; border: 0; border-radius: 6px;
  background: var(--chip); color: var(--ink); font-size: 14px; font-weight: 450; white-space: nowrap; cursor: pointer;
}
@media (min-width: 768px) {
  .card-when { font-size: 13px; line-height: 18px; }
  .card-open { font-size: 13px; }
}
.card-open .icon { width: 14px; height: 14px; }
.card-open::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.sequence-job:hover .card-open { background: var(--chip-hover); }
.card-open:focus-visible { outline: none; }
.card-open:focus-visible::after { box-shadow: inset 0 0 0 2px var(--brand-link); }
.card-end .btn { z-index: 1; margin: -8px -8px -8px 0; }
/* A finished portfolio export's two downloads (feature 3C), side by side as a watch card's buttons are. */
.card-actions { display: flex; flex-wrap: wrap; margin: -8px 0 -8px -10px; }
.card-end .card-actions .btn { margin: 0; padding: 0 10px; }

/* Watches (launch spec F4): job cards whose status lines are never cut short, with the last run's new matches in a
   closed list. Opening the list widens its card to the whole row, so long titles have room. */
.watch-line { font-size: 15px; line-height: 22px; color: var(--ink-2); overflow-wrap: anywhere; }
.watch-line[data-tone="bad"] { color: var(--bad); }
.watch-card:has(.watch-new[open]) { grid-column: 1 / -1; }
.watch-new { padding-top: 4px; border-top: 1px solid var(--line-faint); }
.watch-new > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 450; color: var(--brand-link);
  list-style: none; cursor: pointer;
}
.watch-new > summary::-webkit-details-marker { display: none; }
.watch-new > summary::before { content: '+'; width: 12px; font: 500 16px/1 var(--font-mono); }
.watch-new[open] > summary::before { content: '\2212'; }
.watch-matches { display: grid; gap: 10px; margin: 2px 0 0; padding-left: 22px; }
.watch-match { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.watch-match-head { display: block; color: var(--ink); }
.watch-match-title { display: block; color: var(--ink-2); }
.watch-new .watch-line { margin-top: 10px; }
.watch-actions { display: flex; flex-wrap: wrap; margin: -8px 0 -8px -10px; }
.card-end .watch-actions .btn { margin: 0; padding: 0 10px; }
@media (min-width: 768px) {
  .watch-line, .watch-match, .watch-new > summary { font-size: 13px; line-height: 20px; }
}
/* A new publication of a watched applicant links to the patent, as a 44 px target (feature 3C). */
a.watch-match-head { display: flex; align-items: center; min-height: 44px; color: var(--brand-link); }
/* "Watch an applicant" over the cards: the name and an outline Watch button on one row, the hint under them. Below
   560 px the button takes the full width. */
.watch-form { display: grid; gap: 8px; max-width: 640px; margin: 0 0 24px; }
.watch-form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.watch-form-row .input { flex: 1 1 16rem; min-width: 0; }
@media (max-width: 559px) {
  .watch-form-row .btn { width: 100%; }
}

.database-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 16px; }
.import { flex: 1 1 420px; border-color: var(--line-faint); box-shadow: none; }
.import > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; font-weight: 500; list-style: none; cursor: pointer; border-radius: var(--radius-l); }
.import > summary::-webkit-details-marker { display: none; }
.import > summary::before { content: '+'; width: 14px; font: 500 18px/1 var(--font-mono); color: var(--brand-link); }
.import[open] > summary::before { content: '\2212'; }
.import-form { display: grid; gap: 14px; padding: 4px 18px 18px; }
/* Sources and terms: the notices of each snapshot's sources, under the snapshot's sets */
.sources { display: grid; gap: 12px; margin-top: 16px; }
.source-list { display: grid; gap: 18px; padding: 4px 18px 18px; }
.source { display: grid; gap: 6px; min-width: 0; }
.source-name { font-size: 15px; line-height: 1.4; font-weight: 600; }
.source-notice { max-width: 48rem; font-size: 13px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .import-form { grid-template-columns: 1fr 1fr; }
  .import-form .btn { justify-self: start; }
}

/* Messages */
.toast {
  position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 40; display: flex; align-items: flex-start; gap: 4px;
  padding: 4px 4px 4px 16px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: #fff; box-shadow: 0 18px 40px -12px rgb(15 23 42 / 0.32);
}
@media (min-width: 640px) {
  .toast { right: 20px; bottom: 20px; left: auto; width: min(440px, 100vw - 40px); }
}
.toast p { flex: 1; padding: 11px 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.toast[data-tone="bad"] { border-color: var(--bad-line); background: var(--bad-tint); }
.toast[data-tone="bad"] p { color: var(--bad); font-weight: 500; }
.toast.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

.site-footer { padding: 28px 0 44px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 13.5px; color: var(--ink-2); }
/* The links every footer carries, open on every server before sign-in. */
.footer-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--brand-link); text-underline-offset: 3px; }

/* The hosted sign-in page */
.hero-signin { min-height: calc(100vh - 160px); padding-bottom: 72px; }
.hero-signin .hero-sub, .hero-signin .callout { margin-top: 16px; }
.signin-actions { display: grid; justify-items: center; gap: 14px; width: 100%; margin-top: 24px; }
.callout { max-width: 36rem; padding: 12px 16px; border: 1px solid var(--brand-tint-strong); border-radius: var(--radius); background: #fff; font-size: 16px; text-align: left; box-shadow: var(--shadow-s); }
.callout[data-tone="warn"] { border-color: var(--warn-line); background: var(--warn-tint); }
.callout[data-tone="bad"] { border-color: var(--bad-line); background: var(--bad-tint); }
/* A free trial's days left, under the hero's buttons, with the link to the plans. */
.trial-note { margin-top: 20px; font-size: 15px; line-height: 22px; }
.trial-note a { color: var(--brand-link); font-weight: 500; text-underline-offset: 3px; }
/* An address the account cannot open (0.61.0): the page says so here, with no corner message. */
.address-note { margin-top: 20px; font-size: 15px; line-height: 22px; }
.moved { max-width: 36rem; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
/* The line to the sample results under the sign-in button, when a sample is installed (samples.mjs). */
.signin-sample { font-size: 15px; color: var(--ink-2); }
.signin-sample a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
@media (max-width: 559px) {
  .signin-actions .btn { width: 100%; white-space: normal; text-align: center; }
}

/* The page a watch email's stop link opens, before sign-in: the product's name, one message and one button. */
.stop-body { display: grid; min-height: 100vh; place-items: center; padding: 24px 16px; }
.stop-page {
  display: grid; gap: 14px; width: min(36rem, 100%); padding: 28px 24px; border: 1px solid var(--line-faint);
  border-radius: var(--radius-l); background: var(--card); box-shadow: var(--shadow);
}
.stop-brand { font: 500 12px/18px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-link); }
.stop-page h1 { font-size: 24px; line-height: 1.25; font-weight: 600; color: var(--brand-ink); text-wrap: balance; }
.stop-page p:not(.stop-brand) { font-size: 16px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.stop-page form { margin: 4px 0 0; }
@media (max-width: 559px) {
  .stop-page .btn { width: 100%; }
}

/* Motion: one staggered entrance, color changes on hover and the running bar. All of it stays off under reduced
   motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-inner > *, .search-block > * { animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .hero-inner > :nth-child(2) { animation-delay: 60ms; }
  .hero-inner > :nth-child(3) { animation-delay: 120ms; }
  .hero-inner > :nth-child(4) { animation-delay: 180ms; }
  .hero-inner > :nth-child(5) { animation-delay: 220ms; }
  .search-block > :nth-child(1) { animation-delay: 220ms; }
  .search-block > :nth-child(2) { animation-delay: 280ms; }
  .search-block > :nth-child(n + 3) { animation-delay: 60ms; }
  .hero-art { animation: fade 1.4s ease 0.2s both; }
  .btn, .chip, .switch-track, .switch-track::after, .tab::before, .input, .card-open, .sequence-job {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  }
  .btn-primary:active:not(:disabled), .btn-dark:active:not(:disabled) { transform: translateY(1px); }
  .toast { transition: opacity 0.2s ease, transform 0.2s ease; }
  .settings > summary::before, .query-details > summary::before { transition: transform 0.15s ease; }
  .progress-bar { animation: travel 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
  .pill[data-tone="checking"] .pill-dot { animation: pulse 1.2s ease-in-out infinite; }
  .current-job[data-tone="running"] .current-job-icon::before, .current-job[data-tone="queued"] .current-job-icon::before { animation: spin 0.9s linear infinite; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes travel { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (forced-colors: active) {
  .chip:has(input:checked), .tab[aria-selected="true"] { outline: 2px solid CanvasText; }
  .switch-track { border: 1px solid CanvasText; }
  .switch:has(input:checked) .switch-track::after { background: Highlight; }
  .hero-art, .hero::before { display: none; }
}