/* Talven console: components added to Astra's base (app.css).
   Same tokens, radii and type scale. Nothing here restyles an Astra component. */

:root {
  --red:#b4455a;
  --red-soft:#fbeef1;
  --amber:#8a5a12;
  --focus-ring:0 0 0 3px #b5430b33;
  /* one interaction system: see "focus and selection" at the end of this file */
  --ring:var(--accent);
  --sel-fill:#fdf4ee;
  --sel-line:#f0c6ad;
  --sel-ink:#93360a;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

mark {
  background:#fff0b8;
  color:inherit;
  border-radius:2px;
  padding:0 1px;
}

code,.mono {
  font-family:"Cascadia Code",Consolas,monospace;
}

.wrap-any {
  overflow-wrap:anywhere;
}

.spaced {
  margin-top:30px;
}

.small-note {
  font-size:13px;
  color:#4c5364;
}

.boot-note {
  color:var(--muted);
  font-size:12px;
}

.noscript {
  margin:40px;
  font-size:14px;
}

/* the "tune" icon knocks its dots out with the surface colour, whatever the theme */
svg.icon [fill="white"] {
  fill:var(--surface);
}

h1:focus,h2:focus {
  outline:none;
}

h1:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px;
  border-radius:3px;
}

/* ───────── badges ───────── */
/* Astra's blue badge sits on the accent tint, a shade darker than its other grounds */
.badge-blue {
  color:var(--accent-dark);
}

/* the purple badge marks AI-generated content; it has to be readable on its own tint */
.badge-purple {
  color:#5f4f9c;
}

.badge-red {
  background:var(--red-soft);
  color:var(--red);
}

.badge-maple {
  background:#fdf0ee;
  color:#a5402f;
}

.badge-maple svg {
  width:11px;
  height:11px;
}

.badge-maple i {
  display:none;
}

.badge-split-train i {
  background:#5a9a7c;
}

.badge-split-validation i {
  background:#c2932f;
}

.badge-split-test i {
  background:var(--accent);
}

/* ───────── side nav ───────── */
.nav-scroll {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  /* widen to the sidebar edges so the active bar is not clipped by the scroll box */
  margin:0 -16px;
  padding:0 16px 8px;
  scrollbar-width:thin;
}

.sidebar {
  padding-top:22px;
}

.sidebar nav {
  gap:3px;
}

.sidebar nav a {
  padding-top:9px;
  padding-bottom:9px;
}

.sidebar nav .nav-caption {
  margin:12px 0 3px;
}

.sidebar nav .nav-caption:first-child {
  margin-top:0;
}

.nav-label {
  flex:1 1 auto;
  min-width:0;
}

/* a long label and its tag (French, Spanish) share the row; when they do not fit, the tag drops
   below, right-aligned, instead of running into the label */
nav a {
  flex-wrap:wrap;
  row-gap:4px;
}

nav a .nav-label {
  flex:1 1 0;
  min-width:min-content;
}

.nav-word {
  margin-left:auto;
  font-size:11px;
  color:#565e70;
  background:#e9ecf2;
  border-radius:4px;
  padding:1px 6px;
  white-space:nowrap;
}

.nav-word-on {
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-weight:600;
}

.sidebar-bottom {
  padding-top:10px;
  flex:0 0 auto;
}

.workspace-button {
  margin:18px 0 14px;
}

.credits-panel {
  margin-bottom:12px;
  padding:10px 12px 9px;
}

.credit-value {
  margin-top:5px;
}

.credit-meter {
  margin-top:8px;
}

.design-link {
  margin-bottom:12px;
}

.account {
  padding-top:13px;
  padding-bottom:13px;
}

.drawer-scrim {
  position:fixed;
  inset:0;
  background:#1a244651;
  z-index:25;
}

.drawer-scrim[hidden] {
  display:none;
}

.drawer-close {
  display:none;
  position:absolute;
  top:18px;
  right:10px;
  width:40px;
  height:40px;
}

/* ───────── top bar ───────── */
.crumbs {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex-wrap:nowrap;
}

.crumbs a,.crumbs span,.crumbs strong {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:24ch;
}

@media(hover:hover) {
  .crumbs a:hover {
    color:var(--accent);
    text-decoration:underline;
  }
}

.breadcrumb {
  min-width:0;
}

/* ───────── page furniture ───────── */
.status-banner {
  margin:-6px 0 22px;
  align-items:center;
  font-size:12px;
}

.status-banner>span {
  flex:1 1 auto;
}

.status-banner .button {
  flex:0 0 auto;
}

.banner-strong {
  border-color:#ecd9b8;
  background:#fffaf0;
  color:#6c5320;
}

.banner-strong strong {
  color:#5c4513;
}

.subtabs {
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--line);
  margin:0 0 4px;
  overflow-x:auto;
  scrollbar-width:none;
}

.subtabs a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 12px 9px;
  font-size:12px;
  font-weight:500;
  color:#676f80;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  outline-offset:-2px;
}

.subtabs a svg {
  width:14px;
  height:14px;
}

@media(hover:hover) {
  .subtabs a:hover {
    color:var(--ink);
  }
}

.subtabs a[aria-current] {
  color:var(--accent-dark);
  border-bottom-color:var(--accent);
}

/* ───────── filter bar ───────── */
.toolbar {
  flex-wrap:wrap;
  margin:16px 0 14px;
}

.toolbar-view {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.facet-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin:-4px 0 14px;
}

.facet-row:empty {
  display:none;
}

.facet-row select {
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px;
  background:white;
  font-size:11px;
  color:#55607a;
  max-width:190px;
}

.facets {
  display:contents;
}

.facets>summary {
  display:none;
}

.facet-controls {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.facet-none {
  font-size:11px;
}

.toolbar-gap {
  flex:1 1 0;
}

.toolbar select {
  color:#55607a;
  max-width:190px;
}

.check-chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:6px;
  background:white;
  padding:7px 10px;
  font-size:11px;
  color:#55607a;
  cursor:pointer;
  white-space:nowrap;
}

.check-chip input {
  accent-color:var(--accent);
  width:14px;
  height:14px;
  margin:0;
}

.check-chip svg {
  width:13px;
  height:13px;
  color:#a5402f;
}

.check-chip span {
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.check-chip:has(input:checked) {
  border-color:var(--sel-line);
  background:var(--sel-fill);
  color:var(--sel-ink);
}

.check-chip:has(input:focus-visible),.seg-radio label:has(input:focus-visible),.format-card:has(input:focus-visible),.pick:has(input:focus-visible) {
  outline:2px solid var(--ring);
  outline-offset:2px;
}

/* Astra's segmented control, driven by real radio buttons */
fieldset.segmented {
  border:0;
  margin:0;
  min-width:0;
}

.seg-radio label {
  position:relative;
  display:inline-flex;
  border-radius:4px;
  cursor:pointer;
}

.seg-radio input {
  position:absolute;
  opacity:0;
  inset:0;
  margin:0;
  cursor:pointer;
}

.seg-radio span {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  padding:5px 11px;
  border-radius:4px;
  color:#565e70;
  white-space:nowrap;
}

.seg-radio span svg {
  width:13px;
  height:13px;
}

.seg-radio input:checked+span {
  background:white;
  box-shadow:0 1px 3px #1221410c;
  color:#3d4963;
  font-weight:550;
}

.seg-radio input:disabled+span {
  opacity:.45;
}

.catalog-info a {
  color:var(--accent-dark);
  font-weight:550;
}

@media(hover:hover) {
  .catalog-info a:hover {
    text-decoration:underline;
  }
}

/* ───────── collection cards ───────── */
.dataset-grid {
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}

a.card-visual {
  outline-offset:-3px;
}

.card-visual-image,.card-visual-documents {
  background:#e9eef6;
}

.mosaic {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  height:100%;
  gap:2px;
  background:#dfe3e9;
}

.mosaic img {
  object-fit:cover;
}

.page-fan {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:12px;
  height:100%;
  padding:42px 18px 0;
}

.page-fan img {
  width:31%;
  height:auto;
  flex:0 0 auto;
  border:1px solid #d5dbe8;
  border-radius:3px;
  box-shadow:0 5px 13px #8094b526;
  object-fit:contain;
}

.page-fan img:nth-child(2) {
  margin-top:10px;
}

.card-visual-documents:after,.card-visual-image:after {
  display:none;
}

.state-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#9aa3b5;
}

.state-available {
  background:#3f9a76;
}

.state-sampling {
  background:var(--accent);
}

.card-tagline {
  margin:-5px 0 11px;
}

.card-match {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:550;
  color:var(--accent-dark);
  margin:-4px 0 12px;
}

.card-match svg {
  width:12px;
  height:12px;
}

.card-footer a {
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--accent-dark);
  font-size:11px;
  font-weight:550;
}

.card-footer a svg {
  width:12px;
  height:12px;
}

@media(hover:hover) {
  a.card-title:hover,.card-footer a:hover,.card-match:hover {
    text-decoration:underline;
  }
}

/* ───────── record list ───────── */
.rec-group {
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  margin-bottom:18px;
  overflow:hidden;
}

.rec-group-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:#fbfcfe;
  flex-wrap:wrap;
}

.rec-group-head h2 {
  font-size:16px;
}

@media(hover:hover) {
  .rec-group-head h2 a:hover {
    color:var(--accent);
  }
}

.rec-group-head .detail-subtitle {
  flex-wrap:wrap;
  margin-top:7px;
}

.group-buy {
  display:flex;
  align-items:center;
  gap:16px;
}

.group-prices {
  display:flex;
  gap:18px;
  margin:0;
}

.group-prices dt {
  font-size:11px;
  color:var(--muted);
}

.group-prices dd {
  margin:1px 0 0;
  font-size:11px;
  color:#55607a;
}

.group-prices b {
  font-size:15px;
  font-weight:600;
  color:#34415e;
  letter-spacing:-.3px;
}

.group-note {
  font-size:11px;
  color:var(--muted);
  max-width:320px;
}

[data-action="take-all"][aria-pressed="true"] {
  border-color:var(--sel-line);
  background:var(--sel-fill);
  color:var(--sel-ink);
}

.records {
  list-style:none;
  margin:0;
  padding:0;
}

.rec {
  display:grid;
  grid-template-columns:28px minmax(170px,250px) minmax(90px,130px) minmax(0,1fr) minmax(0,1fr) auto;
  gap:4px 16px;
  align-items:center;
  padding:11px 18px 11px 12px;
  border-bottom:1px solid #f0f2f7;
  position:relative;
}

.rec:last-child {
  border-bottom:0;
}

@media(hover:hover) {
  .rec:hover {
    background:#fbfcff;
  }
}

.rec.is-picked {
  background:var(--sel-fill);
  box-shadow:inset 3px 0 0 var(--accent);
}

.pick {
  position:relative;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  cursor:pointer;
  border-radius:5px;
}

.pick input {
  position:absolute;
  opacity:0;
  inset:0;
  margin:0;
  cursor:pointer;
}

.pick-box {
  width:16px;
  height:16px;
  border:1.5px solid #aab2c4;
  border-radius:4px;
  background:white;
  display:grid;
  place-items:center;
  color:transparent;
}

.pick-box svg {
  width:11px;
  height:11px;
  stroke-width:3;
}

.pick input:checked+.pick-box {
  background:var(--accent);
  border-color:var(--accent);
  color:white;
}

.pick-off {
  cursor:default;
  color:#a3abbc;
}

.pick-off svg {
  width:13px;
  height:13px;
}

.rec-open {
  display:block;
  border-radius:5px;
  outline-offset:3px;
  min-width:0;
}

.frames {
  position:relative;
  display:block;
  border-radius:4px;
  overflow:hidden;
  background:#171c2a;
  aspect-ratio:1300/150;
  cursor:ew-resize;
}

.frames img,.still img,.pano-strip img,.doc-thumb img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.frames .head {
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  margin-left:-1px;
  background:white;
  box-shadow:0 0 0 1px #1c244180;
  opacity:0;
  pointer-events:none;
}

.frames.scrubbing .head {
  opacity:1;
}

.still,.pano-strip {
  display:block;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:1300/150;
  background:#e9edf6;
}

.pano-strip {
  aspect-ratio:8/1.6;
}

.slip {
  display:block;
  border:1px solid #e2e6f0;
  border-radius:5px;
  background:#f8faff;
  padding:6px 9px;
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  line-height:1.5;
  color:#4c5a78;
}

.slip-row {
  display:flex;
  gap:8px;
  min-width:0;
}

/* placeholders are read too */
::placeholder {
  color:#687083;
  opacity:1;
}

.composer textarea::placeholder {
  color:#687083;
}

.text-stage .turn.v {
  color:#2f6466;
}

.thumb-text {
  color:#5d6883;
}

.thumb span {
  font-size:11px;
  padding:0 4px;
  line-height:1.5;
}

.thumb .selected-mark {
  width:15px;
  height:15px;
  font-size:11px;
}

.library-banner p {
  color:#5c6982;
}

.nav-count {
  color:#565e70;
}

.active .nav-count {
  color:var(--accent-dark);
}

.brand-console {
  font-size:11px;
  letter-spacing:.9px;
  margin-left:7px;
  padding-top:8px;
}

.slip-row i {
  flex:0 0 60px;
  font-style:normal;
  color:#5d6883;
}

.slip-row span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.img-pair {
  display:flex;
  gap:4px;
}

.img-pair img {
  width:56px;
  height:56px;
  border-radius:4px;
  object-fit:cover;
  background:#e9edf6;
  border:1px solid #e2e6f0;
}

/* stored mask values are tiny integers; brighten them so the labelled regions can be seen */
.is-mask,.mask-layer,.preview-media img[alt$="mask"] {
  filter:brightness(34);
}

/* the filter would bleach a border as well */
.img-pair img.is-mask,.preview-media img[alt$="mask"] {
  border:0;
}

.doc-thumb {
  display:block;
  width:74px;
  height:56px;
  border:1px solid #dde2ee;
  border-radius:4px;
  overflow:hidden;
  background:white;
}

.doc-thumb img {
  object-position:top;
}

.rec-name b {
  display:block;
  font-size:12px;
  font-weight:550;
  color:#3a465f;
}

.rec-name code {
  font-size:11px;
  color:var(--muted);
}

.rec-a,.rec-b {
  font-size:11px;
  line-height:1.55;
  color:#55607a;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
  min-width:0;
}

.rec-b:empty {
  display:none;
}

.owned-tag {
  font-size:11px;
  color:#3a7a5f;
  font-weight:550;
}

.group-desc,.card-desc {
  font-size:11px;
  line-height:1.6;
  color:#55607a;
}

.group-desc {
  margin-top:7px;
  max-width:720px;
}

.card-desc {
  margin:-6px 0 12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* active filters */
.active-filters {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:-2px 0 12px;
  min-width:0;
}

.active-filters:empty {
  display:none;
}

.chips-label {
  font-size:12px;
  color:#4c5364;
  margin-right:2px;
}

.active-filters .text-button {
  margin-left:4px;
}

.rec-k {
  display:block;
  font-size:12px;
  font-weight:600;
  color:#5d6883;
  letter-spacing:.2px;
}

.rec-meta {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  font-size:12px;
  color:#4c5364;
  white-space:nowrap;
}

/* sheet layout: a grid of visuals with the essentials under each */
.records[data-layout="sheet"] {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1px;
  background:#f0f2f7;
}

.records[data-layout="sheet"] .rec {
  grid-template-columns:28px minmax(0,1fr) auto !important;
  grid-template-areas:"visual visual visual" "pick name meta" !important;
  border-bottom:0;
  background:white;
  padding:12px;
  align-items:start;
}

.records[data-layout="sheet"] .rec.is-picked {
  background:var(--sel-fill);
}

.records[data-layout="sheet"] .rec-open {
  grid-area:visual;
}

.records[data-layout="sheet"] .pick {
  grid-area:pick;
}

.records[data-layout="sheet"] .rec-name {
  grid-area:name;
}

.records[data-layout="sheet"] .rec-meta {
  grid-area:meta;
}

.records[data-layout="sheet"] .rec-a,.records[data-layout="sheet"] .rec-b {
  display:none;
}

.records[data-layout="sheet"][data-kind="image"] .img-pair img {
  width:calc(50% - 2px);
  height:auto;
  aspect-ratio:1;
}

.records[data-layout="sheet"] .doc-thumb {
  width:100%;
  height:150px;
}

/* ───────── empty state ───────── */
.chip-remove {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  border:1px solid #cfd6ea;
  border-radius:20px;
  padding:4px 8px 4px 11px;
  background:white;
  color:#4a5672;
  max-width:100%;
  min-width:0;
}

.chip-remove>span:first-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.chip-remove svg {
  flex:0 0 auto;
}

/* a very long search term must wrap, not widen the page */
.empty-state,.empty-state p,.search-hint,.result-intro .request-quote,.match-card p,.batch-body p,.field-value,.feedback-note {
  overflow-wrap:anywhere;
}

.chip-remove svg {
  width:11px;
  height:11px;
}

@media(hover:hover) {
  .chip-remove:hover {
    border-color:var(--accent);
    color:var(--accent-dark);
  }
}

.empty-hint {
  color:#3d4963 !important;
  font-weight:550;
}

.empty-actions {
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:0 !important;
}

.not-found h1,.hold-state h1 {
  font-size:20px;
  margin-bottom:8px;
}

/* an account on hold (js/hold.js) has nothing to search, browse or ask about: only the balance, the credits and the settings */
.is-held .search-trigger,.is-held .workspace-button,.is-held #nav,.is-held [data-action="help"] {
  display:none;
}

/* ───────── record page ───────── */
.detail-grid>* {
  min-width:0;
}

.table-wrap,.records,.rec-group {
  position:relative;
}

.detail-description {
  font-size:12px;
  color:#55607a;
  margin-top:10px;
  max-width:760px;
  line-height:1.65;
}

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

.transport {
  display:flex;
  align-items:center;
  gap:4px;
  padding:7px 10px;
  background:#f7f8fc;
  border-bottom:1px solid var(--line);
}

.ruler {
  flex:1 1 auto;
  min-width:60px;
  accent-color:var(--accent);
  height:18px;
  margin:0 6px;
}

.timecode {
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  color:#55607a;
  white-space:nowrap;
  min-width:19ch;
  text-align:right;
}

.timecode b {
  color:var(--ink);
}

.video-stage video {
  cursor:pointer;
}

.text-stage {
  aspect-ratio:auto;
  background:#e9eef9;
  min-height:240px;
}

.text-stage .code-visual {
  padding:26px;
}

.text-stage .code-paper {
  white-space:normal;
  font-size:13px;
  line-height:1.7;
  max-width:520px;
}

.turn-label {
  margin-top:16px;
}

.stored-line {
  border-bottom:1px solid var(--line);
  padding:9px 15px;
  font-size:11px;
  color:#55607a;
}

.stored-line summary {
  cursor:pointer;
}

.stored-line pre {
  margin:9px 0 3px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  color:#3d4963;
}

.image-stage {
  aspect-ratio:auto;
  display:grid;
  place-items:center;
  background:#171c2a;
  padding:18px;
}

.image-stage>* {
  grid-area:1/1;
  width:min(100%,512px);
  height:auto;
  display:block;
}

.image-stage .mask-layer {
  display:none;
}

.image-stage[data-layer="mask"] .base {
  visibility:hidden;
}

.image-stage[data-layer="mask"] .mask-layer {
  display:block;
}

.image-stage[data-layer="overlay"] .mask-layer {
  display:block;
  mix-blend-mode:screen;
  opacity:.75;
}

.region-layer {
  pointer-events:none;
}

.region-layer[hidden] {
  display:none;
}

.region circle {
  fill:none;
  stroke:#ffe27a;
  stroke-width:2.5;
}

.region-absent circle {
  stroke:#ff9a8c;
  stroke-dasharray:6 4;
}

.region-unknown circle {
  stroke:#c9d2ff;
  stroke-dasharray:2 5;
}

.region text {
  fill:white;
  font:600 15px "Segoe UI",Arial,sans-serif;
  paint-order:stroke;
  stroke:#0d1220;
  stroke-width:4px;
}

.doc-stage {
  aspect-ratio:auto;
  background:#e9edf4;
  padding:18px;
  display:grid;
  place-items:center;
  max-height:76vh;
  overflow:auto;
}

.doc-page {
  position:relative;
  width:min(100%,620px);
  box-shadow:0 8px 26px #24376022;
  background:white;
}

.doc-page img {
  display:block;
  width:100%;
  height:auto;
}

.doc-page .box-layer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.box-layer rect {
  fill:#5265df1c;
  stroke:#5265df;
  stroke-width:2;
}

.pano-stage {
  aspect-ratio:2.4;
}

.pano {
  width:100%;
  height:100%;
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:0 50%;
  cursor:grab;
  touch-action:pan-y;
  outline-offset:-3px;
}

.pano.dragging {
  cursor:grabbing;
}

.stage-tools {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:9px 12px;
  background:#f7f8fc;
  border-bottom:1px solid var(--line);
}

.stage-caption {
  font-size:12px;
  color:#4c5364;
}

.mask-legend {
  display:flex;
  flex-wrap:wrap;
  gap:5px 12px;
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  color:#55607a;
}

.mask-legend>span:first-child {
  flex:1 1 100%;
  color:var(--muted);
}

.legend-item b {
  font-family:"Cascadia Code",Consolas,monospace;
  font-weight:600;
  color:#34415e;
  margin-right:3px;
}

.titlebar-side {
  display:flex;
  align-items:center;
  gap:4px;
}

.titlebar-side>span {
  margin-right:8px;
}

.asset-titlebar {
  gap:12px;
}

.thumbnails-documents .thumb,.thumbnails-image .thumb {
  aspect-ratio:1;
}

.thumb-page {
  object-position:top;
}

.thumb:focus-visible {
  outline-offset:1px;
}

.thumb-pager {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px 12px;
  font-size:11px;
  color:var(--muted);
}

.thumb-pager .text-button {
  margin-left:auto;
}

.tab-h {
  font-size:13px;
  font-weight:600;
  color:#3d4963;
  margin:22px 0 10px;
}

.field-value.is-empty {
  color:var(--muted);
  font-style:italic;
}

.asset-identity {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.copy-button svg {
  width:12px;
  height:12px;
}

.copied {
  color:var(--green);
}

.hash {
  overflow-wrap:anywhere;
  white-space:normal;
  font-size:11px;
}

.table-inline {
  border-radius:6px;
}

.table-inline th {
  padding:9px 12px;
}

.table-inline td {
  padding:10px 12px;
  vertical-align:top;
}

td.wrap,td .wrap {
  white-space:normal;
}

td.rate-saving {
  min-width:150px;
}

.plain-list {
  margin:0;
  padding-left:18px;
  font-size:11px;
  line-height:1.75;
  color:#55607a;
}

.plain-list li+li {
  margin-top:4px;
}

.form-label {
  display:block;
  margin-top:18px;
}

.findings {
  list-style:none;
  margin:0;
  padding:0;
}

.findings li {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #f0f2f7;
  align-items:start;
}

.findings .badge {
  justify-self:start;
  white-space:normal;
}

.findings strong {
  font-size:12px;
  font-weight:550;
  color:#3d4963;
}

.findings p {
  font-size:11px;
  color:#55607a;
  line-height:1.65;
  margin-top:2px;
}

.field-subnote svg,.stage-caption svg,.preview-empty svg {
  width:12px;
  height:12px;
  display:inline-block;
  vertical-align:-2px;
  margin-right:3px;
}

.rights-list .rights-no svg {
  color:var(--red);
}

.card-tagline {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

/* the review gate: five steps, each showing what really happened */
.gate {
  list-style:none;
  margin:18px 0 6px;
  padding:0;
}

.gate-step {
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:12px;
  padding-bottom:16px;
  position:relative;
}

.gate-step:not(:last-child):before {
  content:"";
  position:absolute;
  left:11px;
  top:24px;
  bottom:0;
  width:2px;
  background:#e6e8ef;
}

.gate-mark {
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid #cfd5e3;
  background:white;
  display:grid;
  place-items:center;
  color:white;
}

.gate-mark svg {
  width:12px;
  height:12px;
  stroke-width:3;
}

.gate-done .gate-mark {
  background:#3f9a76;
  border-color:#3f9a76;
}

.gate-failed .gate-mark {
  background:var(--red);
  border-color:var(--red);
}

.gate-step strong {
  font-size:12px;
  font-weight:600;
  color:#3a465f;
  margin-right:6px;
}

.gate-step p {
  font-size:11px;
  line-height:1.7;
  color:#55607a;
  margin-top:3px;
}

.gate-compact .gate-step {
  padding-bottom:10px;
}

/* purchase panel additions */
.selection-label a {
  color:var(--accent-dark);
  font-weight:550;
}

@media(hover:hover) {
  .selection-label a:hover {
    text-decoration:underline;
  }
}

.pick-current {
  margin-bottom:14px;
  /* it names the current item, and a long title (more so in French or Spanish) must wrap, not widen the panel */
  white-space:normal;
  text-align:center;
}

.pick-current[aria-pressed="true"] {
  border-color:var(--sel-line);
  background:var(--sel-fill);
  color:var(--sel-ink);
}

.flat-hint {
  display:flex;
  gap:7px;
  align-items:flex-start;
  font-size:11px;
  color:#6c5320;
  background:#fffaf0;
  border:1px solid #ecd9b8;
  border-radius:5px;
  padding:8px 9px;
  margin-bottom:14px;
}

.flat-hint svg {
  width:13px;
  height:13px;
  margin-top:2px;
}

.panel-second {
  margin-top:8px;
}

.rights-list .rights-note {
  align-items:flex-start;
  line-height:1.55;
}

.rights-list .rights-note svg {
  margin-top:2px;
  flex:0 0 auto;
}

.panel-link {
  display:flex;
  margin:10px auto 0;
}

.panel-field {
  display:block;
  font-size:11px;
  color:#55607a;
  margin-bottom:12px;
}

.panel-field select,.panel-field textarea {
  display:block;
  width:100%;
  margin-top:5px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px 9px;
  font-size:12px;
  color:var(--ink);
  background:#fbfcfe;
  resize:vertical;
}

.purchase-mode svg {
  width:15px;
  height:15px;
  margin-bottom:3px;
}

.verdict-keep.active {
  border-color:#c4e3d4;
  background:#eef8f2;
}

.verdict-reject.active {
  border-color:#efcad2;
  background:#fdf2f4;
}

.decision {
  border-top:1px solid var(--line);
  margin-top:14px;
  padding-top:14px;
}

.decision .fullset-note {
  margin-bottom:10px;
}

/* ───────── export page ───────── */
.table-title {
  font-size:12px;
  margin:0;
}

.bench-step {
  margin-bottom:26px;
}

.step-head {
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:13px;
}

.step-num {
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  font-weight:600;
  color:var(--accent-dark);
  background:var(--accent-soft);
  border-radius:5px;
  padding:4px 7px;
  margin-top:1px;
}

.step-head h2 {
  font-size:15px;
}

.step-head p {
  font-size:11px;
  color:var(--muted);
  margin-top:3px;
}

.formats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
}

.format-card {
  background:white;
  border-radius:8px;
  padding:14px;
}

.format-card strong {
  font-size:13px;
  font-weight:600;
  color:#34415e;
}

.format-card small {
  font-size:11px;
  line-height:1.55;
  margin-top:4px;
  color:#55607a;
}

.format-card .format-target {
  color:var(--accent-dark);
  font-weight:550;
  margin-top:1px;
}

.format-flag {
  display:block;
  margin-top:8px !important;
  padding-top:8px;
  border-top:1px solid #edf0f5;
  color:#3a7a5f !important;
}

.format-flag.is-preview {
  color:var(--amber) !important;
}

.pkg {
  display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  overflow:hidden;
  min-height:330px;
}

.tree {
  border-right:1px solid var(--line);
  background:#fbfcfe;
  padding:12px 8px;
  overflow:auto;
  max-height:520px;
  font-size:12px;
}

.tree ul {
  list-style:none;
  margin:0;
  padding:0 0 0 14px;
}

.tree>ul {
  padding-left:4px;
}

.tree-root,.tree-dir {
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 6px;
  color:#3d4963;
  font-weight:550;
}

.tree-root {
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  overflow-wrap:anywhere;
}

.tree svg {
  width:14px;
  height:14px;
  color:#7f8cab;
  flex:0 0 auto;
}

.tree-dir em {
  font-style:normal;
  font-weight:400;
  font-size:11px;
  color:var(--amber);
}

.tree button {
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  text-align:left;
  padding:5px 6px;
  border-radius:5px;
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  color:#55607a;
  outline-offset:-2px;
}

.tree button span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(hover:hover) {
  .tree button:hover {
    background:#f0f2f8;
  }
}

.tree button[aria-current="true"] {
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-weight:600;
}

.preview {
  display:flex;
  flex-direction:column;
  min-width:0;
}

.preview-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 15px;
  border-bottom:1px solid var(--line);
}

.preview-head code {
  font-size:12px;
  color:#34415e;
  overflow-wrap:anywhere;
}

.preview-body {
  padding:14px 15px;
  overflow:auto;
  max-height:470px;
  outline-offset:-3px;
}

.preview-what {
  font-size:11px;
  color:#55607a;
  margin-bottom:11px;
  line-height:1.6;
}

.preview-body pre {
  margin:0;
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  line-height:1.65;
  color:#33405c;
  background:#f8f9fc;
  border:1px solid #edf0f5;
  border-radius:6px;
  padding:11px 12px;
}

pre.wrap {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.preview-media img {
  display:block;
  max-width:min(100%,380px);
  max-height:260px;
  border-radius:5px;
  border:1px solid var(--line);
  margin-bottom:13px;
  background:#171c2a;
}

.preview-empty {
  font-size:11px;
  color:var(--muted);
  font-style:italic;
}

.checks {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;
}

.check-group {
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  padding:14px 16px;
}

.check-group h3 {
  font-size:12px;
  font-weight:600;
  color:#4c5364;
  margin-bottom:8px;
}

.preflight {
  list-style:none;
  margin:0;
  padding:0;
}

.check {
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:7px 0;
  font-size:11px;
  color:#55607a;
  line-height:1.55;
}

.check svg {
  width:14px;
  height:14px;
  margin-top:1px;
  flex:0 0 auto;
}

.check b {
  display:block;
  font-weight:550;
  color:#34415e;
  font-size:12px;
}

.check-ok svg {
  color:#3f9a76;
}

.check-bad svg {
  color:var(--red);
}

.check-wait svg {
  color:#98a1b4;
}

.deliver {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  border:1px solid var(--sel-line);
  background:var(--sel-fill);
  border-radius:9px;
  padding:18px 20px;
}

.deliver h3 {
  font-size:14px;
  margin-bottom:5px;
}

.deliver h3 code {
  font-size:12px;
  font-weight:500;
  color:var(--accent-dark);
  overflow-wrap:anywhere;
}

.deliver p,.deliver .plain-list {
  font-size:11px;
  color:#55607a;
  line-height:1.65;
  max-width:640px;
}

.deliver-actions {
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

.button[aria-disabled="true"],.icon-button[aria-disabled="true"] {
  opacity:.5;
  cursor:not-allowed;
}

.button[aria-disabled="true"]:hover {
  background:white;
}

.button-primary[aria-disabled="true"]:hover {
  background:var(--accent);
  border-color:var(--accent);
}

.icon-button[aria-disabled="true"]:hover {
  background:none;
  color:#868ea0;
}

.progress {
  list-style:none;
  margin:10px 0 0;
  padding:0;
  font-size:11px;
  color:#55607a;
}

.progress li {
  padding:2px 0 2px 18px;
  position:relative;
}

.progress li:before {
  content:"";
  position:absolute;
  left:2px;
  top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#cfd5e3;
}

.progress li[data-state="doing"] {
  color:var(--ink);
  font-weight:550;
}

.progress li[data-state="doing"]:before {
  background:var(--accent);
}

.progress li[data-state="done"]:before {
  background:#3f9a76;
}

.button-primary .loading-spinner {
  display:inline-block;
}

/* ───────── requests ───────── */
.composer-note {
  font-size:11px;
  color:var(--muted);
  margin-top:11px;
}

.composer h2 label {
  cursor:text;
}

.standard-line {
  margin:26px 0 0;
  font-size:13px;
  line-height:1.6;
  color:#4c5364;
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.standard-line strong {
  color:#34415e;
  font-weight:600;
}

.standard-line .text-button,.export-row .text-button {
  flex:0 0 auto;
  white-space:nowrap;
}

.type-tiles {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
}

.type-tile {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  padding:16px;
  box-shadow:var(--shadow);
  transition:border-color .15s,box-shadow .15s;
}

@media(hover:hover) {
  .type-tile:hover {
    border-color:#cfd5e5;
    box-shadow:0 7px 20px #24376009;
  }
}

.type-tile .route-icon {
  margin-bottom:12px;
  background:var(--accent-soft);
  color:var(--accent);
}

.type-tile strong {
  font-size:15px;
  font-weight:600;
  letter-spacing:-.2px;
  margin:2px 0 6px;
}

.tile-desc {
  font-size:11px;
  line-height:1.6;
  color:#55607a;
  flex:1 1 auto;
}

.tile-foot {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid #edf0f5;
  font-size:11px;
  color:var(--muted);
}

.matched {
  margin-top:9px;
}

.matched mark {
  padding:1px 5px;
  border-radius:3px;
  margin-right:3px;
}

.match-visual {
  width:80px;
  height:54px;
  border-radius:4px;
  overflow:hidden;
  background:#e9edf6;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.match-visual img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

.match-card>div {
  min-width:0;
}

.match-reason {
  color:#55607a !important;
  font-size:13px;
}

.batch {
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  padding:18px 20px;
}

.batch-steps {
  list-style:none;
  display:flex;
  gap:0;
  margin:4px 0 16px;
  padding:0;
  overflow-x:auto;
}

.batch-steps li {
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  font-size:11px;
  color:var(--muted);
  position:relative;
  min-width:88px;
  padding-right:10px;
}

.batch-steps li:not(:last-child):after {
  content:"";
  position:absolute;
  left:26px;
  right:4px;
  top:11px;
  height:2px;
  background:#e6e8ef;
}

.step-dot {
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid #cfd5e3;
  background:white;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:600;
  color:#5d6883;
  position:relative;
  z-index:1;
}

.step-dot svg {
  width:11px;
  height:11px;
  stroke-width:3;
}

.step-done {
  color:#3a7a5f !important;
}

.step-done .step-dot {
  background:#3f9a76;
  border-color:#3f9a76;
  color:white;
}

.step-done:not(:last-child):after {
  background:#9fcdb8 !important;
}

.step-current {
  color:var(--ink) !important;
  font-weight:600;
}

.step-current .step-dot {
  border-color:var(--accent);
  color:var(--accent-dark);
  box-shadow:var(--focus-ring);
}

.batch-body p {
  font-size:12px;
  color:#55607a;
  line-height:1.7;
  max-width:760px;
}

.batch-body p+p {
  margin-top:10px;
}

.batch-body strong {
  color:#34415e;
}

.sample-list-panel {
  margin-top:22px;
}

.button-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.is-missing {
  position:relative;
  min-height:44px;
}

.is-missing:after {
  content:"Not in this copy of the preview";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:11px;
  color:#c9cfdd;
  text-align:center;
  padding:6px;
}

.portrait-wrap.is-portrait .video-stage {
  aspect-ratio:auto;
  height:min(62vh,520px);
}

.contact-stage {
  aspect-ratio:auto;
  background:#171c2a;
  padding:14px;
}

.contact-stage img {
  display:block;
  width:100%;
  height:auto;
  border-radius:4px;
}

.sample-list {
  list-style:none;
  margin:0;
  padding:10px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:8px;
}

.sample-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 8px;
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px;
  background:white;
  outline-offset:1px;
}

@media(hover:hover) {
  .sample-item:hover {
    border-color:#cfd5e5;
    background:#fbfcff;
  }
}

.sample-item.active {
  border-color:var(--sel-line);
  background:var(--sel-fill);
  box-shadow:inset 0 -3px 0 var(--accent);
}

.sample-visual {
  grid-column:1/-1;
  display:block;
  border-radius:4px;
  overflow:hidden;
  background:#171c2a;
  aspect-ratio:3.2;
}

.sample-list-documents .sample-visual {
  background:#eef1f7;
  aspect-ratio:1.5;
}

.sample-visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

.sample-title {
  font-size:11px;
  color:#3d4963;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sample-title b {
  font-family:"Cascadia Code",Consolas,monospace;
  font-weight:500;
  color:var(--muted);
  margin-right:3px;
}

.verdict {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

.verdict svg {
  width:12px;
  height:12px;
}

.verdict-keep {
  color:#2f7a5c;
}

.verdict-reject {
  color:var(--red);
}

.gate-chips {
  list-style:none;
  margin:0 0 10px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.gate-chips li {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  border-radius:4px;
  padding:3px 7px;
  background:var(--green-soft);
  color:var(--green);
}

.gate-chips li.bad {
  background:var(--red-soft);
  color:var(--red);
}

.gate-chips svg {
  width:11px;
  height:11px;
  stroke-width:2.6;
}

/* ───────── dialogs ───────── */
.modal-wide {
  width:720px;
}

.modal-h {
  font-size:12px;
  font-weight:600;
  color:#3d4963;
  margin:20px 0 9px;
}

.modal h2:focus {
  outline:none;
}

.about-points {
  padding-left:18px;
  margin:10px 0 14px;
  gap:7px;
}

.legal-links {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 16px;
}

.credit-line {
  font-size:11px !important;
  color:var(--muted) !important;
  border-top:1px solid var(--line);
  padding-top:12px;
}

.big-number {
  font-size:27px !important;
  letter-spacing:-.8px;
}

.pack-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:14px 0 4px;
}

.ledger {
  list-style:none;
  margin:0;
  padding:0;
  font-size:11px;
  color:#55607a;
}

.ledger li {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:6px 0;
  border-bottom:1px solid #f0f2f7;
}

.ledger b {
  font-family:"Cascadia Code",Consolas,monospace;
  font-weight:500;
}

.ledger .neg {
  color:var(--red);
}

.ledger .pos {
  color:var(--green);
}

.shortcuts {
  margin:0;
}

.shortcuts div {
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid #f0f2f7;
  font-size:12px;
  color:#55607a;
}

.shortcuts dd {
  margin:0;
}

kbd {
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:4px;
  padding:1px 6px;
  background:white;
  color:#3d4963;
  white-space:nowrap;
}

.search-group h3 {
  font-size:12px;
  font-weight:600;
  color:#4c5364;
  margin:12px 0 4px 12px;
}

a.search-result {
  outline-offset:-2px;
}

.search-result code {
  font-size:11px;
  color:var(--muted);
  font-weight:400;
}

.search-hint {
  padding:0 12px;
}

.search-all {
  padding:10px 12px 0;
  border-top:1px solid var(--line);
  margin-top:8px;
}

.sum {
  margin:14px 0 4px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.sum div {
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 12px;
}

.sum dt {
  font-size:11px;
  color:var(--muted);
}

.sum dd {
  margin:3px 0 0;
  font-size:14px;
  font-weight:600;
  color:#34415e;
}

.sum .is-short {
  border-color:#e7c0c8;
  background:var(--red-soft);
}

.sum .is-short dd {
  color:var(--red);
}

.hint-row {
  color:var(--amber) !important;
  white-space:normal;
}

.hint-row .text-button {
  font-size:11px;
  padding:0;
}

/* ───────── order draft bar ───────── */
.draft-bar {
  position:fixed;
  left:var(--sidebar);
  right:0;
  bottom:16px;
  z-index:40;
  display:flex;
  justify-content:center;
  pointer-events:none;
  padding:0 16px;
}

.draft-bar[hidden] {
  display:none;
}

.draft-inner {
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:12px;
  background:#293247;
  color:white;
  border-radius:10px;
  padding:10px 12px 10px 18px;
  box-shadow:0 10px 34px #18234840;
  max-width:100%;
}

.draft-text {
  display:flex;
  flex-direction:column;
  min-width:0;
  margin-right:8px;
}

.draft-text strong {
  font-size:12px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.draft-text span {
  font-size:11px;
  color:#c5cbdc;
}

.draft-inner .button:not(.button-primary) {
  background:transparent;
  border-color:#4c5670;
  color:white;
}

.draft-inner .button:focus-visible {
  outline-color:white;
}

body.has-draft main {
  padding-bottom:96px;
}

body.has-draft .toast {
  bottom:92px;
}

/* ───────── release notice ───────── */
/* The site was updated since this page opened. The wrapper is the page's live region: it is always
   there and takes no room, and the notice floats above the page like the order draft bar. */
.release-note {
  position:fixed;
  left:var(--sidebar);
  right:0;
  bottom:16px;
  z-index:45;
  display:flex;
  justify-content:center;
  pointer-events:none;
  padding:0 16px;
}

body.has-draft .release-note {
  bottom:92px;
}

.release-inner {
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 14px;
  max-width:100%;
  padding:8px 8px 8px 16px;
  background:#293247;
  color:white;
  border-radius:10px;
  font-size:12px;
  box-shadow:0 10px 34px #18234840;
}

.release-inner .button:focus-visible {
  outline-color:white;
}

body.modal-open {
  overflow:hidden;
}

/* ───────── scrubber ───────── */
.loupe {
  position:fixed;
  left:0;
  top:0;
  z-index:80;
  background:#171c2a;
  border:1px solid #39435c;
  border-radius:7px;
  padding:5px 5px 4px;
  box-shadow:0 12px 34px #1823485c;
  pointer-events:none;
}

.loupe[hidden] {
  display:none;
}

.loupe-frame {
  width:260px;
  height:150px;
  border-radius:4px;
  background-color:#0d111b;
  background-repeat:no-repeat;
}

.loupe p {
  display:flex;
  justify-content:space-between;
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  color:#dfe4f1;
  padding:4px 3px 0;
}

/* ───────── narrower screens ───────── */
@media(max-width:1180px) {
  .nav-scroll {
    margin:0 -12px;
    padding:0 12px 8px;
  }
  /* the search box takes its own row once the view controls need the space */
  .toolbar .search-field {
    flex-basis:100%;
    max-width:none;
  }
  .toolbar-gap {
    display:none;
  }
  .rec {
    grid-template-columns:28px minmax(150px,230px) minmax(0,1fr) minmax(0,1fr) auto;
    grid-template-areas:"pick visual name name meta" ". a a b b";
  }
  .rec .pick {
    grid-area:pick;
  }
  .rec .rec-open {
    grid-area:visual;
  }
  .rec .rec-name {
    grid-area:name;
  }
  .rec .rec-meta {
    grid-area:meta;
  }
  .rec .rec-a {
    grid-area:a;
  }
  .rec .rec-b {
    grid-area:b;
  }
}

@media(max-width:980px) {
  .detail-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .sample-grid {
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .sample-grid .sample-main {
    display:contents;
  }
  .sample-grid #media-panel {
    order:1;
  }
  .sample-grid .purchase-panel {
    order:2;
    display:block;
  }
  .sample-grid .detail-info {
    order:3;
    margin-top:0;
  }
  .sample-grid .sample-list-panel {
    order:4;
    margin-top:0;
  }
  /* Astra hides this card once the panel stacks; it is the one thing waiting for the visitor */
  .request-side {
    display:flex;
    border-left:0;
    border-top:1px solid var(--line);
  }
  .pkg {
    grid-template-columns:1fr;
  }
  .tree {
    border-right:0;
    border-bottom:1px solid var(--line);
    max-height:240px;
  }
  .crumbs a,.crumbs span {
    display:none;
  }
  .crumbs b {
    display:none;
  }
  .crumbs a:nth-last-child(3),.crumbs a:nth-last-child(3)+b {
    display:inline;
  }
  .findings li {
    grid-template-columns:1fr;
    gap:5px;
  }
}

@media(max-width:760px) {
  .topbar-actions>.icon-button {
    display:inline-flex;
    width:40px;
    height:40px;
  }
  .search-trigger {
    min-width:40px;
    min-height:40px;
    justify-content:center;
  }
  .model-tag {
    display:none;
  }
  .preview-notice button {
    min-height:32px;
    padding:0 4px;
  }
  .drawer-close {
    display:inline-flex;
  }
  .brand {
    padding-right:44px;
  }
  .draft-bar {
    left:0;
    bottom:10px;
    padding:0 10px;
  }
  .draft-inner {
    width:100%;
    padding-left:14px;
  }
  .draft-text {
    flex:1 1 auto;
  }
  .status-banner {
    flex-wrap:wrap;
  }
  /* filters fold away behind one control */
  .facets {
    display:block;
    flex:1 1 100%;
  }
  .facets>summary {
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--line);
    border-radius:6px;
    background:white;
    padding:8px 11px;
    font-size:12px;
    color:#3d4963;
    cursor:pointer;
    list-style:none;
  }
  .facets>summary::-webkit-details-marker {
    display:none;
  }
  .facets>summary svg {
    width:14px;
    height:14px;
  }
  .facets[open]>.facet-controls {
    margin-top:9px;
  }
  .toolbar-gap {
    display:none;
  }
  .toolbar select,.facet-row select {
    max-width:100%;
  }
  .facet-row {
    margin-top:0;
  }
  .rec-group-head {
    padding:14px;
  }
  .group-buy {
    flex-wrap:wrap;
    gap:10px;
  }
  .rec {
    grid-template-columns:36px minmax(0,1fr) auto;
    grid-template-areas:"pick visual visual" "pick name meta" "pick a a" "pick b b";
    padding:12px 12px 12px 6px;
    gap:8px 10px;
  }
  .rec .pick {
    width:36px;
    height:44px;
    align-self:start;
  }
  .rec-a,.rec-b {
    -webkit-line-clamp:2;
  }
  .sum {
    grid-template-columns:1fr;
  }
  .modal-wide {
    width:100%;
  }
  .deliver {
    padding:16px;
  }
  .deliver-actions {
    width:100%;
  }
  .deliver-actions .button {
    flex:1 1 auto;
  }
  .detail-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .transport {
    flex-wrap:wrap;
  }
  .timecode {
    min-width:0;
    flex:1 1 100%;
    text-align:center;
    padding-bottom:2px;
  }
  .asset-titlebar {
    flex-wrap:wrap;
  }
  .timecode b {
    font-weight:600;
  }
  .transport .icon-button,.titlebar-side .icon-button,.thumb-pager .icon-button {
    width:40px;
    height:40px;
  }
  .titlebar-side>span {
    display:none;
  }
  .thumbnails {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .batch-steps li {
    min-width:76px;
  }
  .type-tiles {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .shortcuts div {
    grid-template-columns:96px minmax(0,1fr);
  }
  .button,.check-chip,.toolbar select,.seg-radio span {
    min-height:40px;
  }
  .button-small {
    min-height:36px;
  }
  .seg-radio span {
    padding:5px 12px;
  }
  .page-heading {
    flex-wrap:wrap;
  }
  .detail-heading {
    flex-wrap:wrap;
  }
}

@media(max-width:420px) {
  .type-tiles {
    grid-template-columns:1fr;
  }
  .crumbs a:nth-last-child(3),.crumbs a:nth-last-child(3)+b {
    display:none;
  }
  .draft-inner {
    gap:8px;
    padding-left:12px;
  }
  .draft-text span {
    display:none;
  }
}

/* the API page: the keys, and the quick start */
.key-list {
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  background:white;
  border-radius:8px;
}

.key-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 18px;
  padding:14px 18px;
}

.key-row+.key-row {
  border-top:1px solid var(--line);
}

.key-info {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  font-size:13px;
  color:#4c5364;
}

.key-info strong {
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  overflow-wrap:anywhere;
}

.key-form {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.key-form .modal-actions {
  margin-top:6px;
}

.key-form .inline-error {
  margin:0;
}

.key-form .inline-error:empty {
  display:none;
}

.key-field {
  display:block;
  font-size:13px;
  color:#4c5364;
}

.key-field .modal-search {
  margin:6px 0 0;
}

.key-secret {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
}

.key-secret .modal-search {
  flex:1 1 auto;
  min-width:0;
  margin:0;
  font-size:12px;
}

.api-quick {
  border:1px solid var(--line);
  background:white;
  border-radius:8px;
  padding:16px 18px;
}

.api-quick-bar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 14px;
  margin-bottom:12px;
}

.api-quick-bar fieldset.segmented {
  flex-wrap:wrap;
  max-width:100%;
}

.api-quick-bar .copy-box {
  display:flex;
  align-items:center;
  gap:10px;
}

.api-quick pre {
  margin:0;
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:11px;
  line-height:1.65;
  color:#33405c;
  background:#f8f9fc;
  border:1px solid #edf0f5;
  border-radius:6px;
  padding:11px 12px;
  overflow:auto;
  max-height:340px;
  outline-offset:2px;
}

@media(max-width:760px) {
  .api-quick {
    padding:14px;
  }
  .key-row {
    padding:14px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .type-tile {
    transition:none;
  }
}

@media(forced-colors:active) {
  .pick-box,.gate-mark,.step-dot {
    border-color:CanvasText;
  }
  .rec.is-picked {
    outline:2px solid Highlight;
    outline-offset:-2px;
  }
}

/* ───────── licences, prices and savings ─────────
   What an item may be used for is said first, wherever it can be bought or is held. The accent is
   training data. */
.licence-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:550;
  line-height:1.35;
  padding:2px 8px 2px 6px;
  border-radius:999px;
  border:1px solid transparent;
  margin:0;
}

.licence-chip svg {
  width:13px;
  height:13px;
  flex:0 0 auto;
}

.licence-no {
  background:#f4f5f8;
  border-color:#e1e4ec;
  color:#555d6e;
}

.licence-training {
  background:var(--accent-soft);
  border-color:var(--sel-line);
  color:var(--accent-dark);
}

.card-licence,.panel-licence,.holding-licence,.match-licence {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}

.card-licence {
  margin-bottom:8px;
}

.detail-subtitle .licence-chip {
  margin-right:2px;
}

.price-rows {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
  margin:0;
}

.price-rows div {
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}

.price-rows dt {
  font-size:11px;
  color:#686f7d;
}

.price-rows dd {
  margin:0;
  font-size:16px;
  font-weight:600;
  color:#202634;
  letter-spacing:-.2px;
  font-variant-numeric:tabular-nums;
}

.price-compact dd {
  font-size:14px;
}

.saving-line {
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:11px;
  line-height:1.45;
  color:#1d6448;
  background:#e9f5ee;
  border-radius:6px;
  padding:6px 8px;
  margin-top:8px;
}

.saving-line svg {
  width:13px;
  height:13px;
  margin-top:1px;
  flex:0 0 auto;
}

.held-line,.price-none {
  font-size:11px;
  color:#686f7d;
  margin-top:6px;
}

.price-owned {
  display:flex;
  gap:6px;
  align-items:center;
  font-size:12px;
  font-weight:550;
  color:#1d6448;
}

.price-owned svg {
  width:15px;
  height:15px;
}

.card-price {
  border-top:1px solid #edf0f5;
  margin-top:12px;
  padding-top:12px;
  margin-bottom:10px;
}

.card-state {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#55607a;
  margin-top:8px;
}

/* the saving, from a quiet note to a call worth acting on */
.saving {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:6px 8px;
  font-size:11px;
  line-height:1.5;
  border-radius:7px;
  padding:8px 10px;
  margin:10px 0 2px;
  background:#f3faf6;
  color:#1d6448;
  border:1px solid #d6ecdf;
}

.saving>svg {
  width:14px;
  height:14px;
  margin-top:1px;
  flex:0 0 auto;
}

.saving>span {
  flex:1 1 200px;
  min-width:0;
}

.saving .text-button {
  font-size:11px;
  font-weight:650;
  color:#1d6448;
  text-decoration:underline;
  text-underline-offset:2px;
}

.saving-approaching,.saving-passed {
  background:#e9f5ee;
  border-color:#a9d6bb;
  font-size:12px;
  font-weight:500;
}

.saving-approaching .text-button,.saving-passed .text-button {
  font-size:12px;
}

.saving-passed {
  border-color:#7fc19c;
}

.saving-taken {
  display:flex;
  align-items:flex-start;
  gap:6px;
  background:none;
  border:0;
  padding:0;
  margin:8px 0 0;
}

.saving-taken svg {
  width:13px;
  height:13px;
  margin-top:2px;
}

.save-badge {
  display:inline-block;
  margin-top:6px;
  font-size:11px;
  font-weight:650;
  color:#1d6448;
  background:#e2f2e9;
  border-radius:999px;
  padding:1px 7px;
}

.fullset-save {
  display:block;
  margin-top:6px;
  color:#1d6448;
  font-weight:600;
}

/* ───────── what you own ───────── */
.owned-box {
  display:flex;
  gap:10px;
  align-items:flex-start;
  border:1px solid #cfe6da;
  background:#f3faf6;
  border-radius:8px;
  padding:10px 12px;
  margin:12px 0;
}

.owned-box>svg {
  width:18px;
  height:18px;
  color:#1d6448;
  flex:0 0 auto;
}

.owned-box strong {
  font-size:12px;
  display:block;
}

.owned-box p {
  font-size:11px;
  color:#4c5364;
  margin:2px 0 4px;
}

.pick-owned {
  color:#1d6448;
}

.pick-owned svg {
  width:17px;
  height:17px;
}

.rec.is-owned {
  background:#fbfdfc;
}

.thumb .owned-mark {
  position:absolute;
  left:3px;
  top:3px;
  width:14px;
  height:14px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1d6448;
  color:white;
}

.thumb .owned-mark svg {
  width:12px;
  height:12px;
}

.rec-price {
  font-size:11px;
  font-weight:600;
  color:#34415e;
  font-variant-numeric:tabular-nums;
}

/* ───────── the buying panel ───────── */
.panel-licence {
  margin:10px 0 10px;
}

.licence-terms {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}

.licence-terms li {
  display:flex;
  gap:7px;
  align-items:flex-start;
  font-size:12px;
  color:#4c5364;
  line-height:1.45;
}

.licence-terms svg {
  width:14px;
  height:14px;
  margin-top:2px;
  flex:0 0 auto;
  color:#686f7d;
}

.licence-terms .term-check svg {
  color:#1d6448;
}

.licence-terms .term-close svg {
  color:#b4455a;
}

.licence-name {
  font-size:13px;
  color:#4c5364;
  margin:6px 0 14px;
  padding-bottom:14px;
  border-bottom:1px solid #edf0f5;
}

.saving-hero {
  font-size:12px;
  max-width:470px;
}

.licence-guide {
  margin-bottom:24px;
}

.section-h {
  font-size:16px;
  margin-bottom:10px;
}

.guide-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}

.guide-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  background:white;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
  box-shadow:var(--shadow);
  color:#4c5364;
  font-size:12px;
  line-height:1.55;
}

.guide-card strong {
  font-size:14px;
  color:#202634;
}

.guide-more {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:auto;
  color:var(--accent-dark);
  font-weight:550;
}

.guide-more svg {
  width:14px;
  height:14px;
}

@media(hover:hover) {
  .guide-card:hover {
    border-color:#cfd5e5;
    box-shadow:0 7px 20px #24376009;
  }
}

/* ───────── upright clips as a grid of posters ───────── */
.poster-tile {
  position:relative;
  display:block;
  aspect-ratio:9/16;
  border-radius:6px;
  overflow:hidden;
  background:#1c2230;
}

.poster-tile img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.poster-tile .visual-duration {
  bottom:8px;
  right:8px;
}

.records[data-layout="rows"] .poster-tile {
  width:72px;
  height:128px;
  aspect-ratio:auto;
}

/* ───────── checkout ───────── */
.checkout-lines {
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:10px;
}

.checkout-line {
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
  background:white;
}

.checkout-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.checkout-head strong {
  font-size:13px;
}

.checkout-head small {
  display:block;
  font-size:11px;
  color:#686f7d;
}

.checkout-price {
  text-align:right;
  white-space:nowrap;
}

.checkout-price strong {
  font-size:15px;
  font-variant-numeric:tabular-nums;
}

.checkout-what {
  font-size:12px;
  color:#4c5364;
  margin:6px 0 8px;
}

.checkout-note {
  font-size:12px;
  color:#4c5364;
  margin-top:6px;
}

.sum dd small {
  font-size:11px;
  color:#686f7d;
  font-weight:400;
}

/* ───────── the library ───────── */
.holdings {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:12px;
}

.holding {
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  background:white;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  box-shadow:var(--shadow);
}

.holding-head {
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.holding h3 {
  margin-bottom:5px;
}

.holding-count {
  font-size:13px;
  color:#4c5364;
  margin-top:6px;
}

.holding-strip {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.holding-strip a {
  display:block;
  width:52px;
  height:52px;
  border-radius:6px;
  overflow:hidden;
  background:#e9edf6;
}

.holding-strip img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.holding-strip .thumb-text {
  display:grid;
  place-items:center;
  height:100%;
}

.holding-more {
  align-self:center;
  font-size:11px;
  color:#686f7d;
}

.holding-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.free-note {
  display:inline-flex;
  gap:5px;
  align-items:center;
  font-size:12px;
  font-weight:550;
  color:#1d6448;
}

.free-note svg {
  width:13px;
  height:13px;
}

.holding-finish {
  font-size:11px;
  color:#4c5364;
  line-height:1.6;
}

.holding-orders {
  font-size:12px;
  color:#4c5364;
}

.free-banner {
  display:flex;
  gap:8px;
  align-items:flex-start;
  background:#f3faf6;
  color:#1d6448;
  border:1px solid #cfe6da;
  border-radius:8px;
  padding:10px 12px;
  font-size:12px;
  margin-bottom:16px;
}

.free-banner svg {
  width:16px;
  height:16px;
  flex:0 0 auto;
  margin-top:1px;
}

/* ───────── language and currency ───────── */
.locale-button {
  height:30px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:11px;
  font-weight:650;
  letter-spacing:.3px;
  color:#4f5b73;
  background:white;
  white-space:nowrap;
}

@media(hover:hover) {
  .locale-button:hover {
    background:#f5f6fb;
    border-color:#d6dbea;
  }
}

.prefs-group {
  border:0;
  margin:0 0 16px;
  padding:0;
  min-width:0;
}

.prefs-group legend {
  padding:0;
  margin-bottom:8px;
  font-size:12px;
  font-weight:600;
  color:#4c5364;
}

.pref-option {
  display:flex;
  gap:10px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:6px;
  cursor:pointer;
}

.pref-option input {
  accent-color:var(--accent);
  margin:3px 0 0;
}

.pref-option strong {
  display:block;
  font-size:13px;
}

.pref-option small {
  display:block;
  font-size:11px;
  color:#686f7d;
}

.pref-option:has(input:checked) {
  border-color:var(--sel-line);
  background:var(--sel-fill);
}

/* the signed-in account, at the top of the same dialog (js/dialogs.js) */
.pref-account {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
}

.pref-account span {
  min-width:0;
  overflow-wrap:anywhere;
}

/* a long name or address in the side nav's account button ends in an ellipsis */
.account>span:nth-child(2) {
  min-width:0;
}

.account strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pref-option:has(input:focus-visible) {
  outline:2px solid var(--ring);
  outline-offset:2px;
}

.credit-money {
  font-size:11px;
  color:#55607a;
  margin-top:6px !important;
}

.draft-saving {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:#b6ecd0 !important;
  margin-top:2px;
}

.draft-saving svg {
  width:12px;
  height:12px;
}

.content-lang {
  font-weight:400;
  color:#686f7d;
  margin-left:6px;
}

@media(max-width:600px) {

  .holdings {
    grid-template-columns:1fr;
  }
  
}

/* ───────── pictures shown whole ─────────
   Every picture is shown whole. A frame takes the picture's own shape (the <img> carries its width
   and height, so the shape is known before the file arrives) or the picture is contained on a
   neutral surround. Nothing here uses object-fit: cover on a box of another shape. */

.card-facts {
  font-size:11px;
  color:#55607a;
  margin:-9px 0 10px;
}

.card-facts b {
  font-weight:400;
  padding:0 6px;
  color:#c7cbd5;
}

.card-buy {
  gap:10px;
  flex-wrap:wrap;
}

.card-buy .button {
  flex:0 0 auto;
}

.card-buy>a {
  margin-left:auto;
}

/* a row of whole posters where a landscape card would cut one in half */
.poster-row {
  display:flex;
  justify-content:center;
  gap:2px;
  height:100%;
  background:#1c2230;
  overflow:hidden;
}

.poster-row img {
  width:auto;
  height:100%;
  max-width:calc(33.333% - 2px);
  flex:0 1 auto;
  object-fit:contain;
}

/* smaller places that showed a cut thumbnail */
.match-visual img {
  object-fit:contain;
  object-position:center;
}

.holding-strip a {
  width:auto;
  min-width:52px;
}

.holding-strip img {
  width:auto;
  object-fit:contain;
}

.pano-strip {
  aspect-ratio:2/1;
}

.pano-strip img {
  object-fit:contain;
}

/* the world scene's thumbnail is 3:2 */
.thumbnails-worlds .thumb {
  aspect-ratio:3/2;
}

.card-visual-worlds {
  height:auto;
  aspect-ratio:3/2;
}

/* ───────── tags ───────── */

/* Tags: the facts a buyer scans and filters by, each a link into the catalogue (js/tags.js) */
.tags {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.tag {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  padding:3px 10px;
  border:1px solid #d9dde8;
  border-radius:999px;
  background:#f5f6fa;
  font-size:12px;
  font-weight:500;
  line-height:1.3;
  color:#3d4963;
  outline-offset:2px;
}

.tag svg {
  width:12px;
  height:12px;
  flex:0 0 auto;
}

.tag-canada {
  background:#fbeef1;
  border-color:#f1d2d9;
  color:#8f2f44;
}

@media(hover:hover) {
  .tag:hover {
    border-color:#aeb6c9;
    background:white;
    color:var(--ink);
  }
}

/* ───────── the record page, for someone buying ─────────
   The picture first, the price beside it, a short description and the tags under it, and the
   technical details, the full licence and the visitor's notes folded away below. */
.detail-main {
  min-width:0;
}

.panel-h {
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 8px;
}

.about-panel,.record-panel {
  padding:18px 21px 19px;
}

.about-text {
  font-size:14px;
  line-height:1.65;
  color:#3a4252;
  margin:0 0 12px;
  max-width:720px;
}

.about-facts {
  font-size:13px;
  color:#55607a;
  margin:-4px 0 12px;
}

.about-facts b {
  font-weight:400;
  padding:0 6px;
  color:#c7cbd5;
}

.record-panel .caption-block+.caption-block {
  border-top:0;
  padding-top:0;
  margin-top:14px;
}

.record-panel .tags {
  margin:12px 0 0;
}

.record-panel .field-value {
  font-size:12px;
  line-height:1.65;
}

/* common questions, answered in words written beforehand (js/questions.js): a fold each */
.questions {
  margin-top:28px;
}

.questions>h2 {
  margin-bottom:2px;
  color:var(--ink);
  font-size:17px;
  font-weight:600;
}

.question .fold-title {
  flex:1 1 auto;
  min-width:0;
}

.question .fold-body p {
  margin-top:12px;
  color:var(--body);
  font-size:14px;
  line-height:1.55;
}

.question-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
}

.questions-agent {
  margin-top:14px;
}

/* folded sections: a one-line summary, the detail inside */
.fold {
  margin-top:12px;
  background:white;
  border:1px solid var(--line);
  border-radius:9px;
}

.fold summary {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 18px;
  cursor:pointer;
  list-style:none;
  border-radius:9px;
  outline-offset:-3px;
}

.fold summary::-webkit-details-marker {
  display:none;
}

.fold-title {
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  flex:0 0 auto;
}

.fold-note {
  font-size:13px;
  color:#4c5364;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.fold summary>svg {
  width:15px;
  height:15px;
  margin-left:auto;
  color:#686f7d;
  flex:0 0 auto;
  transition:transform .15s;
}

.fold[open] summary>svg {
  transform:rotate(90deg);
}

.fold[open] summary {
  border-bottom:1px solid var(--line);
  border-radius:9px 9px 0 0;
}

.fold-body {
  padding:4px 21px 21px;
}

.fold-body .tab-h:first-child {
  margin-top:14px;
}

@media(hover:hover) {
  .fold summary:hover {
    background:#f7f8fc;
  }
}

/* the buying panel reads in a few lines */
.purchase-panel .licence-terms {
  margin-top:10px;
}

.heading-action {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  max-width:250px;
  flex:0 0 auto;
}

.heading-action-note {
  margin:0;
  font-size:11px;
  color:#646f82;
  text-align:right;
  line-height:1.5;
}

.copy-left {
  left:0;
  top:0;
  bottom:0;
  width:36%;
}

.copy-right {
  right:0;
  top:0;
  bottom:0;
  width:36%;
}

.copy-top {
  top:0;
  left:0;
  right:0;
  height:36%;
}

.copy-bottom {
  bottom:0;
  left:0;
  right:0;
  height:36%;
}

.kit-papers {
  flex:1 1 100%;
  border-top:1px solid var(--sel-line);
  padding-top:14px;
}

.kit-papers .deliver-actions {
  flex-wrap:wrap;
  margin-top:10px;
}

.preview-media>.deliver-actions {
  margin-bottom:13px;
}

/* a custom batch's email block, between the summary and the routes */
.result-summary+.notice-box {
  margin-bottom:14px;
}

@media(max-width:760px) {
  /* the full row under the heading, so the note wraps: in French or Spanish it is wider than a phone */
  .heading-action {
    align-items:flex-start;
    max-width:none;
    flex:1 1 100%;
    min-width:0;
  }
  .heading-action-note {
    text-align:left;
  }
}

@media(max-width:980px) {
  /* on one column the buying panel follows the picture, before the description */
  .detail-main {
    display:contents;
  }
  .detail-grid>.detail-main>#media-panel {
    order:1;
  }
  .detail-grid>.purchase-panel {
    order:2;
  }
  .detail-grid>.detail-main>#record-panel {
    order:3;
  }

}

@media(max-width:600px) {

  
  /* five whole posters fit a phone; the sixth would be cut at the edge */
  
  .about-panel,.record-panel {
    padding:16px;
  }
  .fold-body {
    padding:4px 16px 16px;
  }
}

/* ───────── focus and selection: one system ─────────
   Focus is a ring, and only keyboard users see it. js/main.js sets data-input="pointer" on <html>
   while a mouse, pen or finger is in use and "keyboard" when a navigation key is pressed, so a
   click never leaves a ring behind, even where a browser would draw one after a script moves focus.
   Selected, current and pressed never draw a ring, so a click can never look like focus:
     selected (a picked option, a pressed toggle)  tinted fill, soft border, accent text and a mark
     current (the item on show in a list or strip) tinted fill and an accent bar, as in the side nav
     pressed (the moment of a click)              a brief shade
   Hover is a neutral grey and only exists on devices that can hover. */
html {
  -webkit-tap-highlight-color:transparent;
}

:focus-visible {
  outline:2px solid var(--ring);
}

h1:focus-visible,[tabindex="-1"]:focus-visible {
  outline-offset:6px;
}

:root[data-input="pointer"] :focus,:root[data-input="pointer"] :focus-visible,
:root[data-input="pointer"] .check-chip:has(input:focus-visible),:root[data-input="pointer"] .seg-radio label:has(input:focus-visible),
:root[data-input="pointer"] .format-card:has(input:focus-visible),:root[data-input="pointer"] .pick:has(input:focus-visible),:root[data-input="pointer"] .pref-option:has(input:focus-visible) {
  /* important: it has to beat every component's ring, including the dark theme's scoped copies */
  outline:none !important;
}

/* text fields show that they are active whichever way they were reached */
.search-field:focus-within,.modal-search:focus,.composer textarea:focus,.panel-field select:focus,.panel-field textarea:focus,
.feedback-form textarea:focus,.brief-form textarea:focus,.brief-form input:focus {
  border-color:var(--accent);
}

/* controls are pressed, not selected as text */
button,summary,label.pick,.seg-radio label,.check-chip,.format-card,.pref-option,[role="tab"],.rec-open,.thumb,.sample-item,.chip-remove {
  -webkit-user-select:none;
  user-select:none;
}

/* current: the item on show */
.thumb.active {
  border-color:var(--sel-line);
  box-shadow:none;
}

.thumb.active:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:var(--accent);
}

.tree button[aria-current="true"] {
  background:var(--sel-fill);
  color:var(--sel-ink);
  box-shadow:inset 2px 0 0 var(--accent);
}

/* selected: an option that is on */
.purchase-mode.active,.export-option:has(input:checked) {
  border-color:var(--sel-line);
  background:var(--sel-fill);
}

/* pressed */
button:not(:disabled):not([aria-disabled="true"]):active,.button:not([aria-disabled="true"]):active,.type-tile:active,.seg-radio label:active,.check-chip:active,.format-card:active {
  filter:brightness(.96);
}

/* ───────── lighter pages ─────────
   A card is one link (the picture, the title, the count and the two prices in one line) and one
   action; the saving of a whole collection is said once per page; AI-generated content is
   disclosed once per page; the overview is a short way in; long prose folds behind "Show more". */
.card-link {
  display:block;
  color:inherit;
}

.card-link .card-body,.card-link .card-title,.card-link .card-meta,.card-link .card-price,.card-link .card-licence {
  display:block;
}

.card-link .card-body {
  padding:14px 16px 12px;
}

.card-link .card-licence {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:8px;
}

.card-link .card-title {
  margin-bottom:4px;
}

.card-link .card-price {
  border-top:1px solid #edf0f5;
  margin:10px 0 0;
  padding-top:10px;
}

.price-line-compact {
  font-size:13px;
  line-height:1.5;
  color:#4c5364;
  margin:0;
}

.price-line-compact strong {
  color:#202634;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.dataset-card .card-link+.card-footer {
  margin:0 16px;
  padding:11px 0 13px;
  border-top:1px solid #edf0f5;
  justify-content:flex-start;
}

.dataset-card .card-footer .card-match {
  margin-left:auto;
}

@media(hover:hover) {
  .card-link:hover .card-title {
    color:var(--accent);
  }
}

.savings-note {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:13px;
  font-weight:500;
  color:#1d6448;
}

.savings-note svg {
  width:14px;
  height:14px;
  flex:0 0 auto;
}

.catalog-info {
  align-items:center;
  flex-wrap:wrap;
  gap:6px 16px;
}

.catalog-count {
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.ai-note {
  display:flex;
  align-items:center;
  gap:7px;
  margin:-10px 0 14px;
  font-size:13px;
  color:#4c5364;
}

.ai-note svg {
  width:14px;
  height:14px;
  color:#686f7d;
  flex:0 0 auto;
}

.group-buy-inner {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* the overview */
.overview-hero {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}

.overview-hero .composer {
  padding:22px 24px 18px;
}

.overview-hero .composer h2 {
  font-size:20px;
  letter-spacing:-.4px;
  margin-bottom:12px;
}

.waiting-banner {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  background:white;
  border:1px solid var(--sel-line);
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:18px;
  font-size:13px;
  color:#4c5364;
}

.waiting-banner strong {
  font-size:14px;
  color:var(--ink);
}

.waiting-banner .badge {
  margin:0;
}

.waiting-go {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  font-weight:550;
  color:var(--accent-dark);
  white-space:nowrap;
}

.waiting-go svg {
  width:14px;
  height:14px;
}

.entry-tiles {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:8px;
}

.entry-tile {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;
  row-gap:8px;
  align-items:center;
  min-height:116px;
  padding:20px 22px;
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}

.entry-tile .route-icon {
  grid-row:1 / span 2;
  width:46px;
  height:46px;
  background:var(--accent-soft);
  color:var(--accent);
}

.entry-text {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.entry-text strong {
  font-size:18px;
  letter-spacing:-.3px;
}

.entry-text span {
  font-size:13px;
  line-height:1.5;
  color:#4c5364;
}

.entry-count {
  grid-column:2;
  font-size:13px;
  color:#4c5364;
}

@media(hover:hover) {
  .entry-tile:hover {
    border-color:#cfd5e5;
    box-shadow:0 7px 20px #24376009;
  }
  .entry-tile:hover .entry-text strong {
    color:var(--accent);
  }
}

.standard-line svg {
  width:16px;
  height:16px;
  margin-top:1px;
  color:#686f7d;
  flex:0 0 auto;
}

.standard-line>span {
  flex:1 1 auto;
}

/* long prose folds to four lines until asked for */
.fold-text .field-value.is-clamped {
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.show-more {
  margin-top:4px;
  font-size:13px;
}

/* a licence in plain words, its identifier small beside them */
.licence-id {
  display:inline-block;
  margin-left:4px;
  padding:1px 5px;
  border-radius:4px;
  background:#f1f3f8;
  font-family:Consolas,monospace;
  font-size:11px;
  color:#4c5364;
}

/* the API page */
.api-prices td strong {
  font-weight:600;
  color:var(--ink);
}

.api-footnote {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:12px 0 0;
  font-size:13px;
  color:#4c5364;
}

.api-footnote svg {
  width:15px;
  height:15px;
  margin-top:1px;
  color:#686f7d;
  flex:0 0 auto;
}

@media(max-width:760px) {
  .entry-tiles {
    grid-template-columns:1fr;
  }
  
  .waiting-go {
    margin-left:0;
  }
}

@media(max-width:560px) {

  .entry-tile .route-icon {
    grid-row:1;
  }
  .entry-count {
    grid-column:1 / -1;
  }
}

/* Task discovery, recipes and the buyer's training setup. */
.overview-find {
  padding:26px;
  margin-bottom:18px;
  border:1px solid var(--sel-line);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.overview-find-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(210px,280px);
  align-items:end;
  gap:22px;
}
#find-form>label {
  display:block;
  margin-bottom:12px;
  font-size:21px;
  font-weight:600;
  letter-spacing:-.4px;
}
.find-submit {
  display:flex;
  gap:10px;
}
.find-submit input {
  flex:1;
  min-width:0;
}
.cookbook-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  font-size:13px;
  color:var(--body);
}
.cookbook-field>span {
  font-weight:600;
}
.cookbook-field select,.cookbook-field input,.find-submit input {
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:42px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  color:var(--ink);
  font-size:14px;
}
.cookbook-field select {
  padding-right:26px;
  text-overflow:ellipsis;
}
.task-chips,.cookbook-chips,.recipe-actions,.cookbook-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
}
.overview-find .task-chips {
  margin-top:22px;
}
.task-chip,.data-chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:var(--body);
  font-size:12px;
  line-height:1.5;
}
.task-chip .icon {
  width:15px;
  height:15px;
  flex-shrink:0;
}
.task-chip[aria-pressed="true"] {
  background:var(--sel-fill);
  border-color:var(--sel-line);
  color:var(--sel-ink);
}
button.task-chip,a.task-chip {
  min-height:36px;
}
.cookbook-entries .entry-tile .route-icon {
  grid-row:auto;
}
.cookbook-heading {
  gap:24px;
  align-items:start;
}
.cookbook-heading>div {
  min-width:0;
}
.cookbook-heading .machine-field {
  width:260px;
  max-width:100%;
  flex-shrink:0;
}
.find-toolbar {
  display:grid;
  gap:14px;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
}
.find-toolbar .active-filters {
  margin:0;
}
.cookbook-toolbar {
  margin:0;
}
.cookbook-toolbar .seg-radio {
  flex-wrap:wrap;
  max-width:100%;
}
.find-count {
  margin:16px 0;
}
.recipe-grid,.discovery-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.recipe-card {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:14px;
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.recipe-card h2,.recipe-card h3,.discovery-card h3,.compute-option h3 {
  font-size:17px;
  line-height:1.4;
  letter-spacing:-.2px;
}
.recipe-card h2 a,.recipe-card h3 a,.discovery-card h3 a {
  color:var(--ink);
}
.recipe-card p,.discovery-card p,.compute-body>p,.recipe-result p {
  color:var(--body);
  line-height:1.6;
}
.recipe-card .fit-line {
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
  width:100%;
  font-size:12px;
}
.recipe-row {
  margin-bottom:22px;
}
.recipe-card.is-compact {
  gap:10px;
  padding:16px;
  box-shadow:none;
}
.recipe-card.is-compact h3 {
  font-size:15px;
}
.discovery-card {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.discovery-grid>.dataset-card:last-child:nth-child(odd) {
  display:flex;
  grid-column:auto;
}
.overview-hero>.section-heading {
  padding:22px 24px 0;
  margin-bottom:0;
}
.overview-hero .composer>label {
  display:block;
  margin-bottom:10px;
  color:var(--body);
}
.discovery-body {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:12px;
  padding:20px;
}
.discovery-card .dataset-id {
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
}
.discovery-footer {
  display:grid;
  gap:12px;
  padding:16px 20px;
  margin-top:auto;
  border-top:1px solid var(--line);
}
.external-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--accent-dark);
  white-space:nowrap;
}
.external-link .icon {
  width:14px;
  height:14px;
  vertical-align:-2px;
  flex-shrink:0;
}
.open-licence-permissive {
  color:var(--green);
  background:var(--green-soft);
}
.open-licence-non_commercial,.open-licence-share_alike,.open-licence-mixed {
  color:var(--amber);
  background:var(--soft);
}
.discovery-grid .licence-chip {
  white-space:normal;
  max-width:100%;
}
.used-in a,.recipe-data a:not(.button) {
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.cookbook-request {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding:22px;
  margin-top:28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
}
.cookbook-request h2 {
  font-size:18px;
}
.tier-table {
  table-layout:fixed;
  width:100%;
}
.tier-table th,.tier-table td {
  white-space:normal;
  padding:14px;
  vertical-align:top;
}
.tier-table th:first-child {
  width:42%;
}
.tier-table th small {
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:400;
  color:var(--body);
}
.tier-table .is-best-fit {
  background:var(--sel-fill);
}
.tier-table tbody th {
  background:transparent;
  color:var(--ink);
}
.tier-table td {
  color:var(--body);
}
.tier-fit {
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:8px;
  color:var(--sel-ink);
  font-size:12px;
}
.tier-fit .icon {
  width:14px;
  height:14px;
  vertical-align:-2px;
}
.tier-note {
  margin-top:10px;
}
.recipe-data,.bundle-list {
  padding:0;
  margin:0;
  list-style:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:9px;
}
.recipe-data li,.bundle-list>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:16px 20px;
}
.recipe-data li+li,.bundle-list>div+div {
  border-top:1px solid var(--line);
}
.bundle-list>div {
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(0,3fr);
}
.bundle-list dd {
  margin:0;
  color:var(--body);
}
.train-selects {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr);
  gap:18px;
}
.train-policies {
  margin-bottom:16px;
}
.train-policies .check-chip {
  height:auto;
  min-height:36px;
}
.train-policies .check-chip span {
  white-space:normal;
}
.compute-list {
  display:grid;
  gap:12px;
}
/* one row per place to run: name and properties, cost, then the next step */
.compute-option {
  display:grid;
  grid-template-columns:minmax(170px,1fr) minmax(0,2.2fr) auto;
  align-items:center;
  gap:10px 24px;
  padding:16px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
}
.compute-name {
  display:grid;
  justify-items:start;
  gap:8px;
  min-width:0;
}
.compute-body {
  display:grid;
  justify-items:start;
  gap:4px;
  min-width:0;
}
.compute-body>p {
  margin:0;
}
.compute-body .cookbook-chips {
  margin-top:6px;
}
.compute-price {
  font-weight:600;
}
.compute-action {
  justify-self:end;
}
.compute-steps {
  grid-column:1 / -1;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.compute-note,.referral-note {
  margin-top:12px;
}
.training-steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px 26px;
  margin:0;
  padding:18px 18px 18px 38px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  color:var(--body);
}
.training-steps li {
  padding-left:3px;
}
.training-steps li strong {
  display:block;
  font-weight:600;
}
.training-steps .step-body {
  display:block;
  margin-top:4px;
}
.testing-note {
  margin:14px 0 22px;
}
.testing-note a {
  color:var(--accent-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}
.testing-list-note {
  margin:0 0 14px;
}
.compute-steps .training-steps {
  border:0;
  padding:0 0 0 20px;
  background:none;
}
.recipe-card,.discovery-card,.recipe-data,.bundle-list,.tier-table,.compute-option,.recipe-result,.training-steps {
  overflow-wrap:anywhere;
}
@media(hover:hover) {
  a.task-chip:hover,button.task-chip:hover {
    border-color:var(--sel-line);
    color:var(--accent-dark);
  }
  .recipe-card a:hover,.discovery-card a:hover,.external-link:hover {
    text-decoration:underline;
    text-underline-offset:3px;
  }
}
@media(max-width:1150px) {
  .recipe-grid,.discovery-grid,.train-selects {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .overview-find-controls {
    grid-template-columns:minmax(0,1fr);
  }
  #overview-machine {
    max-width:300px;
  }
}
@media(max-width:600px) {
  .overview-find {
    padding:18px;
  }
  .find-submit,.cookbook-heading {
    flex-direction:column;
  }
  .find-submit .button {
    align-self:start;
  }
  .recipe-grid,.discovery-grid,.train-selects,.compute-option,.bundle-list>div {
    grid-template-columns:minmax(0,1fr);
  }
  .recipe-card,.compute-option {
    padding:18px;
  }
  .compute-action {
    justify-self:start;
  }
  .training-steps {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cookbook-heading .machine-field {
    width:100%;
  }
  .tier-table th,.tier-table td {
    padding:10px 6px;
    font-size:12px;
  }
  .tier-table th:first-child {
    width:38%;
  }
}

/* ───────── trained LoRAs (js/kinds/lora.js): the measured results, the formats and their files ───────── */
.lora-stage {
  background:#eef1f8;
  padding:20px;
  min-height:220px;
}

.lora-results caption {
  caption-side:top;
  text-align:left;
  font-weight:600;
  color:var(--ink);
  padding:12px 14px 6px;
}

.lora-results th,.lora-results td {
  padding:9px 14px;
  text-align:right;
  border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}

.lora-results thead th {
  white-space:normal;
  vertical-align:bottom;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  min-width:96px;
}

.lora-results tbody th {
  text-align:left;
  font-weight:500;
  color:var(--body);
}

.lora-results tr.is-current th,.lora-results tr.is-current td {
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-weight:600;
}

.lora-base {
  font-size:12px;
  color:var(--body);
  margin:0 0 8px;
  overflow-wrap:anywhere;
}

.lora-method {
  margin-top:10px;
  font-size:12px;
  color:var(--body);
}

.lora-method summary {
  cursor:pointer;
  color:var(--accent-dark);
  width:max-content;
  max-width:100%;
}

.lora-method p {
  margin:6px 0 0;
  max-width:640px;
}

.lora-credit {
  font-size:13px;
  color:var(--body);
  margin:12px 0;
}

.lora-files {
  list-style:none;
  margin:8px 0 0;
  padding:0;
  border:1px solid var(--line);
  border-radius:6px;
  background:white;
}

.lora-files li {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  padding:7px 10px;
  border-top:1px solid var(--line);
}

.lora-files li:first-child {
  border-top:0;
}

.lora-files .mono {
  flex:1 1 220px;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:12px;
}

.lora-files li>span:not(.mono) {
  color:var(--muted);
  font-size:12px;
}

.card-visual-loras {
  background:#e9eef9;
}

.card-visual-loras:after {
  display:none;
}

.lora-visual {
  position:absolute;
  inset:44px 16px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}

.lora-visual-label {
  font-size:12px;
  color:#4f5a73;
}

.lora-visual-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  background:#ffffffd9;
  border-radius:6px;
  padding:5px 10px;
  font-size:12px;
  color:var(--body);
}

.lora-visual-row strong {
  font-size:17px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.lora-visual-row.is-current strong {
  color:var(--accent-dark);
}

.thumbnails-loras .thumb {
  display:grid;
  place-items:center;
}

.thumb-lora {
  font-family:inherit;
  font-weight:700;
  font-size:13px;
  color:#4a567a;
}

.lora-row {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.lora-chip {
  flex:none;
  font-size:12px;
  font-weight:700;
  background:var(--accent-soft);
  color:var(--accent-dark);
  padding:2px 7px;
  border-radius:4px;
}

.free-note-box strong {
  color:var(--green);
}

.lora-deliver {
  display:block;
}

.lora-deliver .kit-papers {
  border-top:0;
  padding-top:0;
}

.lora-formats {
  display:grid;
  gap:14px;
  margin:16px 0;
}

.lora-format {
  min-width:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:white;
  padding:14px;
}

.lora-format h2 {
  font-size:15px;
  margin:0 0 4px;
}

.lora-format p {
  margin:0 0 8px;
}

.lora-format .lora-files .button {
  margin-left:auto;
}

/* a phone: every column of the results stays on screen */
@media (max-width:560px) {
  .lora-stage {
    padding:12px;
  }
  .lora-results caption {
    padding:10px 8px 4px;
  }
  .lora-results th,.lora-results td {
    padding:7px 6px;
    font-size:12px;
  }
  .lora-results thead th {
    min-width:0;
    font-size:11px;
  }
  .lora-results tbody th {
    white-space:normal;
  }
}

/* ───────── the agent (js/views/agent.js) ─────────
   The conversations on the left, the thread on the right at a reading width, and the composer pinned to the foot of the
   window. On a phone the list and the thread are two screens: data-screen on .agent-page says which one is on show.
   Colours are the theme's tokens only, so the dark theme needs nothing of its own. */
.agent-page {
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  gap:32px;
  min-height:calc(100vh - 122px);
  min-height:calc(100dvh - 122px);
}

.agent-side {
  position:sticky;
  top:16px;
  align-self:start;
  min-width:0;
}

.agent-side-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.agent-side-head h1 {
  font-size:21px;
  letter-spacing:-.4px;
}

/* only the list scrolls, so the focus ring of the New button is never cut off */
.agent-list {
  max-height:calc(100vh - 92px);
  overflow-y:auto;
}

.agent-list ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}

.agent-item {
  display:block;
  padding:8px 10px;
  border-radius:7px;
  font-size:13px;
  color:var(--body);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  outline-offset:-2px;
}

@media(hover:hover) {
  .agent-item:hover {
    background:var(--soft);
    color:var(--ink);
  }
}

/* current: the conversation on show, as in the side nav */
.agent-item[aria-current] {
  background:var(--sel-fill);
  color:var(--sel-ink);
  box-shadow:inset 2px 0 0 var(--accent);
  font-weight:550;
}

.agent-list-note {
  padding:6px 2px 10px;
}

.agent-main {
  display:flex;
  flex-direction:column;
  min-width:0;
}

.agent-head,.agent-thread,.agent-composer {
  width:100%;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

.agent-head {
  padding-bottom:12px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
}

.agent-head-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:29px;
}

.agent-head h2 {
  min-width:0;
  font-size:16px;
  letter-spacing:-.2px;
  overflow-wrap:anywhere;
}

.agent-back {
  display:none;
  margin-bottom:8px;
}

.agent-thread {
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding-bottom:24px;
}

.agent-msg {
  min-width:0;
}

/* the customer: a bubble on the right */
.agent-user {
  display:flex;
  justify-content:flex-end;
}

.agent-bubble {
  max-width:min(85%,560px);
  padding:10px 14px;
  border-radius:16px;
  background:var(--soft);
  color:var(--ink);
  font-size:14px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* the agent: plain text on the left */
.agent-reply {
  border-radius:4px;
  color:var(--ink);
  font-size:14px;
  line-height:1.65;
  overflow-wrap:anywhere;
}

.agent-text p+p,.agent-text p+ul,.agent-text ul+p,.agent-text ul+ul {
  margin-top:10px;
}

.agent-text ul {
  margin:0;
  padding-left:20px;
}

.agent-text li+li {
  margin-top:4px;
}

.agent-text strong {
  font-weight:600;
}

.agent-text code {
  padding:1px 5px;
  border-radius:4px;
  background:var(--soft);
  font-size:13px;
}

.agent-working,.agent-flag {
  color:var(--muted);
}

.agent-flag {
  margin-top:8px;
  font-size:12px;
}

/* the steps a reply took, folded to one line */
.agent-steps {
  margin-bottom:10px;
  font-size:13px;
}

.agent-steps summary {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px 4px 5px;
  border-radius:6px;
  color:var(--body);
  cursor:pointer;
  list-style:none;
}

.agent-steps summary::-webkit-details-marker {
  display:none;
}

.agent-steps summary svg {
  width:14px;
  height:14px;
  transition:transform .15s;
}

.agent-steps[open] summary svg {
  transform:rotate(90deg);
}

@media(hover:hover) {
  .agent-steps summary:hover {
    background:var(--soft);
    color:var(--ink);
  }
}

.agent-steps ol {
  list-style:none;
  margin:6px 0 0 11px;
  padding:2px 0 2px 13px;
  border-left:2px solid var(--line);
  display:grid;
  gap:6px;
}

.agent-step {
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--body);
  line-height:1.5;
}

.agent-step svg {
  width:14px;
  height:14px;
  margin-top:2px;
}

.agent-step-word {
  font-size:12px;
}

.agent-step.is-ok svg {
  color:var(--green);
}

.agent-step.is-failed svg,.agent-step.is-failed .agent-step-word {
  color:var(--red);
}

.agent-step.is-running svg,.agent-step.is-running .agent-step-word {
  color:var(--muted);
}

/* a request the agent filed */
.agent-request {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-top:12px;
  padding:9px 10px 9px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  font-size:13px;
}

.agent-request svg {
  width:16px;
  height:16px;
  color:var(--accent);
}

.agent-request-what {
  flex:1 1 12em;
  min-width:0;
  margin:0;
  display:grid;
  gap:2px;
}

.agent-request-label {
  font-weight:550;
}

.agent-request-goal {
  color:var(--body);
  overflow-wrap:anywhere;
}

/* what went wrong, in the thread where it happened */
.agent-error {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  border-radius:8px;
  background:var(--surface);
  color:var(--ink);
  font-size:13px;
  line-height:1.55;
}

.agent-error svg {
  width:16px;
  height:16px;
  margin-top:1px;
  color:var(--red);
}

.agent-error .button {
  margin-top:10px;
}

/* under the reply it ended */
.agent-reply>.agent-error {
  margin-top:12px;
}

.agent-reply>h3+.agent-error {
  margin-top:0;
}

.agent-loading {
  padding:8px 0;
}

/* an empty thread: one line and the common questions */
.agent-empty {
  margin:auto 0;
  padding:32px 0 24px;
  text-align:center;
}

.agent-empty .questions {
  max-width:640px;
  margin:18px auto 0;
  text-align:left;
}

.agent-empty-line {
  color:var(--ink);
  font-size:21px;
  font-weight:550;
  letter-spacing:-.4px;
}


/* the composer: pinned to the foot of the window while the thread scrolls */
.agent-composer {
  position:sticky;
  bottom:0;
  z-index:5;
  padding:8px 0 14px;
  background:var(--bg);
}

/* the order draft bar sits at the foot of the window too: the composer rests above it */
body.has-draft .agent-composer {
  bottom:80px;
}

.agent-full {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-bottom:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  color:var(--ink);
  font-size:13px;
}

.agent-full[hidden] {
  display:none;
}

.agent-box {
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:6px 6px 6px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

/* the field shows that it is active whichever way it was reached */
.agent-box:focus-within {
  border-color:var(--accent);
  box-shadow:var(--focus-ring);
}

/* one line to start; it grows with what is typed to about eight (autosize in js/views/agent.js), then scrolls */
.agent-box textarea {
  flex:1 1 auto;
  min-width:0;
  display:block;
  height:35px;
  min-height:35px;
  max-height:calc(12em + 14px);
  padding:7px 0;
  border:0;
  background:none;
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  resize:none;
  overflow-y:auto;
}

.agent-box textarea:focus,.agent-box textarea:focus-visible {
  outline:none;
}

.agent-box textarea::placeholder {
  color:var(--muted);
}

.agent-box textarea:disabled {
  cursor:not-allowed;
}

.agent-send {
  flex:0 0 auto;
  border-radius:10px;
}

/* under the field: the conversation's model and depth, then what a reply costs and the count */
.agent-foot {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  margin-top:7px;
}

.agent-options {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  min-width:0;
}

.agent-options:empty {
  display:none;
}

.agent-options .select-wrap {
  min-height:32px;
}

.agent-options .select-wrap select {
  min-width:0;
  max-width:200px;
  font-size:13px;
}

.agent-options .segmented label span {
  font-size:12px;
}

.agent-chosen {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:12px;
}

.agent-chosen svg {
  width:14px;
  height:14px;
}

.agent-meta {
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  gap:4px 14px;
  padding:0 4px;
  color:var(--muted);
  font-size:12px;
}

.agent-meta span:empty {
  display:none;
}

.agent-count.is-over {
  color:var(--red);
  font-weight:550;
}

.agent-hint {
  margin-left:auto;
}

@media(max-width:980px) {
  .agent-page {
    grid-template-columns:200px minmax(0,1fr);
    gap:22px;
  }
}

@media(max-width:760px) {
  .agent-page {
    min-height:calc(100vh - 103px);
    min-height:calc(100dvh - 103px);
  }
}

/* a phone: the list and the thread are two screens, with a link back to the list */
@media(max-width:600px) {
  .agent-page {
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }
  .agent-page[data-screen="list"] {
    min-height:0;
  }
  .agent-side {
    position:static;
  }
  .agent-list {
    max-height:none;
    overflow:visible;
  }
  .agent-page[data-screen="thread"] .agent-list,.agent-page[data-screen="list"] .agent-main {
    display:none;
  }
  .agent-back {
    display:inline-flex;
  }
  .agent-item {
    padding:11px 10px;
    font-size:14px;
  }
  .agent-bubble {
    max-width:90%;
  }
  .agent-hint {
    display:none;
  }
  .agent-empty-line {
    font-size:19px;
  }
}

/* ───────── Start here (js/views/start.js) and the machine picker's help link ───────── */
.cookbook-field>label,.machine-field-head>label {
  font-weight:600;
}
.machine-field-head {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  column-gap:12px;
  row-gap:2px;
}
.machine-help {
  font-size:12px;
  font-weight:500;
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.start-banner {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding:12px 16px;
  border:1px solid var(--sel-line);
  border-radius:10px;
  background:var(--accent-soft);
  font-size:13px;
  color:var(--body);
}
.start-banner .route-icon {
  margin:0;
  width:32px;
  height:32px;
  background:var(--surface);
  color:var(--accent);
}
.start-banner strong {
  font-size:14px;
  color:var(--ink);
}
.start-go {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  font-weight:600;
  color:var(--accent-dark);
  white-space:nowrap;
}
.start-go svg {
  width:14px;
  height:14px;
}
.start-steps {
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:880px;
}
.start-step {
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow);
  font-size:14px;
  line-height:1.6;
  color:var(--body);
}
.start-step p {
  margin:0 0 12px;
}
.start-step h3 {
  margin:16px 0 8px;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.start-step strong {
  color:var(--ink);
}
.start-step-head {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.start-step-head h2 {
  margin:0;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.2px;
  color:var(--ink);
}
.start-number {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-weight:600;
}
.start-columns {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 28px;
}
.start-step .plain-list {
  font-size:14px;
  line-height:1.6;
  color:var(--body);
}
.start-step .lora-results-wrap {
  margin:4px 0 8px;
}
.start-step .small-note {
  font-size:12px;
}
.start-where {
  margin:0 0 14px;
}
.start-machine {
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  align-items:end;
  gap:12px 20px;
  margin-bottom:16px;
}
.start-machine .fit-line {
  margin:0 0 10px;
}
.start-step .start-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 0;
}
@media(max-width:600px) {
  .start-step {
    padding:18px;
  }
  .start-columns,.start-machine {
    grid-template-columns:minmax(0,1fr);
  }
  .start-go {
    margin-left:0;
  }
}

/* ───────── plain words for terms (js/glossary.js) ───────── */
.term-tip-button {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:6px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  color:var(--accent-dark);
  font-size:11px;
  font-weight:700;
  line-height:1;
  vertical-align:text-bottom;
  cursor:help;
}

/* a bigger target for a finger than the circle shows */
.term-tip-button::after {
  content:"";
  position:absolute;
  inset:-8px;
}

.term-tip-button[aria-expanded="true"] {
  border-color:var(--accent);
  background:var(--accent-soft);
}

.terms-line {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 14px;
  margin:14px 0 0;
  color:var(--muted);
  font-size:12px;
}

.terms-line-lead {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.terms-line-lead .icon {
  width:14px;
  height:14px;
}

.term-word {
  padding:3px 0;
  border:0;
  background:none;
  color:var(--accent-dark);
  font:inherit;
  font-weight:600;
  text-decoration:underline dotted;
  text-underline-offset:3px;
  cursor:help;
}

.term-word[aria-expanded="true"] {
  text-decoration-style:solid;
}

@media (hover:hover) {
  .term-tip-button:hover {
    border-color:var(--accent);
    background:var(--accent-soft);
  }
  .term-word:hover {
    text-decoration-style:solid;
  }
}

.term-bubble {
  position:fixed;
  left:0;
  top:0;
  z-index:70;
  display:flex;
  flex-direction:column;
  gap:4px;
  width:max-content;
  max-width:min(300px, calc(100vw - 32px));
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--body);
  box-shadow:0 10px 28px #1823482e;
  font-size:13px;
  font-weight:400;
  line-height:1.45;
  text-align:left;
  text-transform:none;
  letter-spacing:normal;
  white-space:normal;
}

.term-bubble[hidden] {
  display:none;
}

.term-bubble-name {
  color:var(--ink);
  font-weight:600;
}

.term-bubble-more {
  margin-top:2px;
  color:var(--accent-dark);
  font-size:12px;
  font-weight:600;
}

.glossary-list {
  margin:0;
  max-width:860px;
}

.glossary-term {
  display:grid;
  grid-template-columns:minmax(140px, 200px) 1fr;
  gap:4px 24px;
  padding:14px 12px;
  border-top:1px solid var(--line);
}

.glossary-term:first-child {
  border-top:0;
}

.glossary-term dt {
  color:var(--ink);
  font-weight:600;
}

.glossary-term dd {
  margin:0;
  color:var(--body);
  line-height:1.55;
}

.glossary-term.is-wanted {
  border-radius:8px;
  background:var(--accent-soft);
}

@media (max-width:560px) {
  .glossary-term {
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:no-preference) {
  .term-bubble {
    animation:term-in .12s ease-out;
  }
  @keyframes term-in {
    from { opacity:0; }
  }
}

/* the overview's front door: the custom batch's steps under the request, in one row */
.overview-steps {
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
}

/* a custom batch: what the customer brings */
.bring h3 {
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin:14px 0 6px;
}

/* the recipes' promise: held-out examples */
.recipes-held-out {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  color:var(--body);
  margin:0 0 12px;
}

.recipes-held-out svg {
  width:16px;
  height:16px;
  flex:0 0 auto;
  margin-top:2px;
  color:var(--accent);
}

/* the agent's models: one line until a model other than the first is wanted */
.agent-models {
  min-width:0;
}

.agent-models>summary {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:white;
  font-size:13px;
  color:var(--body);
  cursor:pointer;
  list-style:none;
}

.agent-models>summary::-webkit-details-marker {
  display:none;
}

.agent-models>summary svg {
  width:14px;
  height:14px;
  flex:0 0 auto;
}

.agent-models[open]>summary svg:last-child {
  transform:rotate(90deg);
}

.agent-models-body {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  margin-top:8px;
}

/* the catalogue's filters fold away at every width */
.facets {
  display:block;
  flex:1 1 100%;
}

.facets>summary {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:6px;
  background:white;
  padding:8px 11px;
  font-size:12px;
  color:#3d4963;
  cursor:pointer;
  list-style:none;
}

.facets>summary::-webkit-details-marker {
  display:none;
}

.facets>summary svg {
  width:14px;
  height:14px;
}

.facets[open]>.facet-controls {
  margin-top:9px;
}

.start-cost {
  margin-top:14px;
}

/* Custom work, offered beside doing it yourself (Train, Start here) */
.for-you {
  margin:18px 0 4px;
}
.for-you p {
  margin-bottom:8px;
}
.start-steps+.for-you {
  max-width:880px;
}
/* a customer's model (js/views/model.js): its test report, with one line each for what its headline says against the base model and
   the frontier model, then its files and papers as a trained LoRA's are shown */
.model-report {
  margin:18px 0;
}
.model-report h2 {
  font-size:16px;
  margin-bottom:8px;
}
.model-verdicts {
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:6px;
}
.model-verdicts li {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  color:var(--ink);
  min-width:0;
}
.model-verdicts li span {
  min-width:0;
  overflow-wrap:anywhere;
}
.model-verdicts .icon {
  flex:none;
  width:18px;
  height:18px;
  margin-top:1px;
  color:var(--muted);
}
.model-verdicts .verdict-better .icon {
  color:var(--green);
}
.model-note {
  font-size:13px;
  color:var(--body);
  margin-top:10px;
  max-width:640px;
}

/* ───────── round 1 of the design pass ───────── */

/* the overview's strip: the four steps the customer meets, a filled dot for theirs and a hollow one for Talven's; the full batch and
   Talven's review are the small dot before the model. No inner scroll: under 600px the strip is a two-by-two grid */
.overview-steps {
  overflow:visible;
  align-items:flex-start;
}

.overview-steps li {
  min-width:0;
  padding-right:12px;
  font-size:12px;
  color:var(--body);
}

.overview-steps .step-dot {
  width:14px;
  height:14px;
  margin:4px 0;
  border-color:var(--accent);
  color:transparent;
  font-size:0;
}

.overview-steps li:not(:last-child):after {
  left:20px;
  right:6px;
  top:10px;
}

.overview-steps .step-you .step-dot {
  background:var(--accent);
}

.overview-steps .step-between {
  flex:0 0 44px;
}

.overview-steps .step-between .step-dot {
  width:10px;
  height:10px;
  margin:6px 0;
}

.overview-steps .step-between:not(:last-child):after {
  left:16px;
}

@media(max-width:600px) {
  .overview-steps {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 14px;
  }
  .overview-steps li {
    flex-direction:row;
    align-items:center;
    gap:9px;
    padding-right:0;
  }
  .overview-steps li:not(:last-child):after {
    display:none;
  }
  .overview-steps .step-dot {
    margin:0;
  }
  .overview-steps .step-between {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
  }
}

/* the empty Library: what a library holds, as three outline slots, and the ways to fill it */
.empty-slots {
  list-style:none;
  display:flex;
  justify-content:center;
  gap:22px;
  margin:0 auto 22px;
  padding:0;
}

.empty-slots li {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  width:136px;
  font-size:12px;
  color:var(--body);
}

.empty-slots li strong {
  font-size:13px;
  color:var(--ink);
  margin-top:7px;
}

.empty-slots .slot {
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1.5px dashed #aab2c4;
  border-radius:12px;
  color:var(--accent);
}

.empty-slots .slot svg {
  width:26px;
  height:26px;
}

@media(max-width:600px) {
  .empty-state {
    padding:32px 16px;
  }
  .empty-slots {
    gap:10px;
  }
  .empty-slots li {
    width:auto;
    flex:1 1 0;
  }
}

/* API access: the keys table's place before the first key */
.key-list-none {
  border-style:dashed;
  background:transparent;
}

.key-row-none {
  justify-content:flex-start;
  gap:12px;
  color:var(--body);
}

.key-row-none svg {
  width:20px;
  height:20px;
  color:var(--accent);
  flex:none;
}

.key-row-none span {
  flex:1 1 auto;
}

/* a LoRA's formats: the format, and where it runs (a picture thumb's fixed aspect would clip the words) */
.thumbnails-loras .thumb {
  aspect-ratio:auto;
  min-height:64px;
  padding:8px 6px;
}

.thumb-lora {
  text-align:center;
  line-height:1.25;
}

.thumb-lora-where {
  display:block;
  font-size:11px;
  font-weight:500;
  color:#4c5364;
  margin-top:2px;
}

/* the agent with too few credits for a message: the written answers stay free */
.agent-short {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px 14px;
  margin:12px auto 0;
  max-width:640px;
  font-size:13px;
  color:var(--body);
}

@media(min-width:900px) {
  .agent-empty .questions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px;
    align-items:start;
  }
  .agent-empty .questions>h2 {
    grid-column:1 / -1;
  }
}

/* the credits dialog before anything was bought, and the sidebar at nothing */
.ledger-none {
  margin:14px 0 0;
  font-size:13px;
  color:var(--muted);
}

.credits-fact {
  margin:10px 0 0;
  font-size:13px;
  color:var(--body);
}

.credit-add {
  margin-top:10px;
  font-size:12px;
}

/* ───────── round 2 of the design pass ───────── */

/* before-and-after bars (js/kinds/lora.js metersHTML): one row a measure, the prompt alone then the trained model */
.meters {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.meter {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.meter-label {
  font-size:12px;
  color:var(--body);
}

.meter-bar {
  display:grid;
  grid-template-columns:minmax(0,1fr) 58px;
  align-items:center;
  gap:8px;
}

.meter-bar i {
  display:block;
  height:8px;
  border-radius:4px;
  background:#cfd5e3;
}

.meter-bar.meter-after i {
  background:var(--accent);
}

.meter-bar b {
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.meter-legend {
  display:flex;
  gap:14px;
  margin:0;
  font-size:11px;
  color:var(--muted);
}

.meter-key:before {
  content:"";
  display:inline-block;
  width:10px;
  height:8px;
  border-radius:3px;
  background:#cfd5e3;
  margin-right:5px;
  vertical-align:middle;
}

.meter-key.meter-after:before {
  background:var(--accent);
}

.meters-compact {
  gap:6px;
}

.meters-compact .meter-label,.meters-compact .meter-bar b {
  font-size:11px;
}

.meters-compact .meter-bar i {
  height:6px;
}

/* the overview's state tiles: the free LoRA, the agent, the Library and the API keys, from real state alone */
.state-tiles {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  align-items:start;
  margin:18px 0 8px;
}

.state-tile {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;
  row-gap:12px;
  align-items:center;
  padding:16px 18px;
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  color:var(--ink);
  text-decoration:none;
  transition:border-color .15s,box-shadow .15s;
}

.state-tile .route-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:10px;
  background:var(--accent-soft);
  color:var(--accent);
}

.state-tile .route-icon svg {
  width:20px;
  height:20px;
}

.state-text {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.state-text strong {
  font-size:15px;
  letter-spacing:-.2px;
}

.state-line {
  font-size:12px;
  color:#4c5364;
}

.state-tile .meters,.state-tile .button {
  grid-column:1 / -1;
}

.state-tile .button {
  justify-self:start;
}

@media(hover:hover) {
  a.state-tile:hover {
    border-color:#cfd5e5;
    box-shadow:0 7px 20px #24376009;
  }
  a.state-tile:hover strong {
    color:var(--accent);
  }
}

/* the custom batch as a ladder (js/views/requests.js): the customer's rungs left, Talven's right */
.ladder-wrap {
  max-width:560px;
  margin:0 auto;
  text-align:left;
}

.ladder-lanes {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-bottom:6px;
}

.ladder-lanes span {
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:var(--body);
}

.ladder {
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ladder:before {
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--line);
  transform:translateX(-50%);
}

.rung {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:36px;
}

.rung-dot {
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid #cfd5e3;
  background:white;
  transform:translate(-50%,-50%);
  z-index:1;
  display:grid;
  place-items:center;
}

.rung-dot svg {
  width:9px;
  height:9px;
  stroke-width:3;
}

.rung-card {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:white;
  font-size:13px;
  color:var(--ink);
  max-width:calc(100% - 22px);
}

.rung-card svg {
  width:16px;
  height:16px;
  color:var(--accent);
  flex:none;
}

.rung-you .rung-card {
  grid-column:1;
  justify-self:end;
  margin-right:22px;
}

.rung-talven .rung-card {
  grid-column:2;
  justify-self:start;
  margin-left:22px;
}

.rung.step-done .rung-dot {
  background:#3f9a76;
  border-color:#3f9a76;
  color:white;
}

.rung.step-done .rung-card {
  color:var(--body);
}

.rung.step-current .rung-dot {
  border-color:var(--accent);
  background:var(--accent);
}

.rung.step-current .rung-card {
  border-color:var(--accent);
  font-weight:600;
  box-shadow:var(--focus-ring);
}

.requests-empty .ladder-wrap {
  margin-bottom:22px;
}

.batch .ladder-wrap {
  margin:4px 0 18px;
  max-width:600px;
}

@media(max-width:600px) {
  .rung-card {
    font-size:12px;
    padding:6px 9px;
    gap:6px;
  }
  .ladder-wrap {
    max-width:none;
  }
}

/* a short shelf (js/views/catalog.js): one wide card a collection, with its real results, and the route built to order */
.featured-card {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:22px 28px;
  padding:22px 24px;
  margin-bottom:14px;
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
}

.featured-visual {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.featured-visual .card-visual {
  position:relative;
  display:block;
  min-height:160px;
  border-radius:8px;
  overflow:hidden;
}

.featured-body {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.featured-body .card-licence {
  margin:0;
}

.featured-title {
  margin:0;
  font-size:20px;
  letter-spacing:-.3px;
}

.featured-title a {
  color:var(--ink);
  text-decoration:none;
}

.featured-meta {
  margin:0;
  font-size:13px;
  color:#4c5364;
}

.featured-price {
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}

.featured-card .card-footer {
  margin-top:auto;
  padding:0;
  border:0;
}

.shelf-order {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 24px;
  padding:18px 24px;
  border:1px dashed #aab2c4;
  border-radius:12px;
}

.shelf-order h2 {
  margin:0 0 6px;
  font-size:16px;
}

.shelf-steps {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  font-size:13px;
  color:var(--body);
}

.shelf-steps li+li:before {
  content:"→";
  margin-right:8px;
  color:var(--muted);
}

@media(max-width:800px) {
  .featured-card {
    grid-template-columns:1fr;
  }
}

/* Start here: each reason as a row with its picture; the measured results as the meters */
.icon-rows {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.icon-rows li {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.5;
  color:var(--body);
}

.icon-rows svg {
  width:18px;
  height:18px;
  flex:none;
  color:var(--accent);
  margin-top:3px;
}

.start-meters {
  max-width:520px;
  margin:6px 0 8px;
}

.start-limits {
  margin-top:4px;
}

/* the LoRA page's results: the table on a wide screen; on a phone the meters, with the table unfolding on request */
.lora-results-block .meters,.lora-table-toggle {
  display:none;
}

@media(max-width:600px) {
  .lora-results-block .meters {
    display:flex;
    margin-bottom:10px;
  }
  .lora-table-toggle {
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-bottom:8px;
  }
  .lora-table-toggle svg {
    width:12px;
    height:12px;
    transition:transform .15s;
  }
  .lora-results-block.is-open .lora-table-toggle svg {
    transform:rotate(90deg);
  }
  .lora-results-block:not(.is-open) .lora-results-wrap {
    display:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .lora-table-toggle svg {
    transition:none;
  }
}