/* /dashboard only. Builds on the corporate tokens in input.css
   (--color-primary, --color-secondary, --color-dark, --color-white) and the
   shared .h2-button / .h2-outline / .h2-text-link / .form-control classes.
   Classes are prefixed with dash- so the global .card rules don't apply. */

:root {
  --dash-page: #f8fafc;
  --dash-surface-soft: #f3f4f6;
  --dash-border: rgba(17, 24, 39, .18);
  --dash-hairline: rgba(17, 24, 39, .08);
  --dash-text-soft: rgba(17, 24, 39, .72);
  --dash-text-faint: rgba(17, 24, 39, .52);
  --dash-primary-tint: rgba(37, 99, 235, .08);
  --dash-danger: #dc2626;
  --dash-danger-tint: #fee2e2;
  --dash-danger-ink: #b91c1c;
  --dash-shadow: 0 1px 3px rgba(17, 24, 39, .08), 0 4px 6px rgba(17, 24, 39, .06);
  --dash-header-h: 4.5rem;

  /* Relationship types */
  --rel-investment: #2563eb;
  --rel-partnership: #0f766e;
  --rel-supply: #b45309;
  --rel-acquisition: #7c3aed;
  --rel-subsidiary: #4d7c0f;
  --rel-controlled: #be185d;
  --rel-branch: #475569;
  --rel-other: #64748b;
}

/* ---------- Page ---------- */
.dash-page { padding-block: 1.5rem 3rem; background: var(--color-white); }
.dash-wrap { display: flex; flex-direction: column; gap: 1rem; width: min(calc(100% - 2rem), 92rem); margin-inline: auto; }
.dash-hero-action { display: flex; justify-content: center; margin-top: 1.5rem; }
#dash-company, #dash-center, #dash-details { scroll-margin-top: calc(var(--dash-header-h) + 1rem); }

/* ---------- Shared bits ---------- */
.dash-card { min-width: 0; border: 1px solid var(--dash-hairline); border-radius: 12px; background: var(--color-white); color: var(--color-dark); box-shadow: var(--dash-shadow); }
.dash-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--dash-hairline); border-radius: 12px 12px 0 0; background: var(--dash-page); }
.dash-card__header h2 { margin: 0; font-size: .95rem; font-weight: 700; }
.dash-card__body { padding: 1rem; }
/* Labels, inputs, help and error text use the shared style-inventory classes
   (.type-utility, .form-control, .form-help, .form-error). These rules only
   fit them into the dashboard's grid and flex layouts. */
.dash-wrap .type-utility { display: block; }
.dash-filter-group > .type-utility,
.dash-inline-form > .type-utility { margin: 0; }
.dash-wrap .form-help { margin: .35rem 0 0; }
.dash-wrap .form-error { margin: .35rem 0 0; }
.dash-muted { color: var(--dash-text-soft); }
.dash-small { font-size: .85rem; }
.dash-grow { flex: 1; }

.dash-show-more { display: flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; margin-top: .5rem; padding: .5rem; border: 0; border-top: 1px solid var(--dash-hairline); background: transparent; color: var(--color-primary); font-size: .85rem; font-weight: 700; cursor: pointer; }
.dash-show-more:hover { color: var(--color-secondary); }
.dash-show-more .dash-chevron { width: .45rem; height: .45rem; }
.dash-show-more[aria-expanded="true"] .dash-chevron { transform: rotate(-135deg) translateY(-2px); }
.dash-mobile-only { display: none !important; }

.dash-btn-sm { min-height: 2.25rem; padding: .4rem .85rem; font-size: .875rem; }
.dash-btn-block { width: 100%; }
.h2-outline:disabled { cursor: not-allowed; opacity: .55; }
.h2-button:disabled:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }
.h2-outline:disabled:hover { border-color: var(--color-primary); background: transparent; color: var(--color-primary); }
.dash-btn-danger { border-color: rgba(220, 38, 38, .45); color: var(--dash-danger-ink); }
.dash-btn-danger:hover { border-color: var(--dash-danger); background: var(--dash-danger-tint); color: var(--dash-danger-ink); }
.dash-link-sm { font-size: .8rem; }

.dash-chip, .dash-chip-btn { display: inline-flex; align-items: center; padding: .25rem .7rem; border: 0; border-radius: 999px; background: var(--dash-surface-soft); color: var(--dash-text-soft); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.dash-chip-btn { cursor: pointer; }
.dash-chip-btn:hover { background: #e5e7eb; color: var(--color-dark); }

/* Gate tags: "Sign up" = free account, "Pro" = paid */
.dash-gate { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem; border-radius: 999px; font-size: .625rem; font-weight: 800; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
.dash-lock { width: .7rem; height: .7rem; flex-shrink: 0; }
.h2-button .dash-gate { background: rgba(255, 255, 255, .22); color: var(--color-white); }
.h2-outline .dash-gate { background: var(--dash-primary-tint); color: var(--color-primary); }
.h2-button:hover .dash-gate, .h2-outline:hover .dash-gate { background: rgba(17, 24, 39, .1); color: var(--color-dark); }
.h2-button .dash-lock, .h2-outline .dash-lock { width: .7rem; height: .7rem; }

/* Sanctions status */
.dash-status { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.dash-status--bad { background: var(--dash-danger-tint); color: var(--dash-danger-ink); }
.dash-status--ok { background: var(--dash-surface-soft); color: var(--dash-text-soft); }

/* Relationship pills */
.dash-pills { display: inline-flex; flex-wrap: wrap; gap: .375rem; }
.dash-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border: 1px solid color-mix(in srgb, var(--c) 22%, white); border-radius: 999px; background: color-mix(in srgb, var(--c) 11%, white); color: var(--c); font-size: .72rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.dash-dot { width: .5rem; height: .5rem; flex-shrink: 0; border-radius: 50%; background: var(--c); }

/* Accordion toggles (mobile only) */
.dash-accordion-toggle { display: none; align-items: center; gap: .6rem; padding: 0; border: 0; background: transparent; color: inherit; font-size: .95rem; font-weight: 700; text-align: left; cursor: pointer; }
.dash-chevron { width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.is-open > .dash-accordion-toggle .dash-chevron,
.is-open > .dash-card__header .dash-accordion-toggle .dash-chevron { transform: rotate(-135deg) translateY(-2px); }
.dash-count-badge { padding: .1rem .5rem; border-radius: 999px; background: var(--dash-primary-tint); color: var(--color-primary); font-size: .72rem; font-weight: 700; }

/* ---------- Search + DeepSearch ---------- */
.dash-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: 1rem; align-items: start; }
.dash-search-row.is-single { grid-template-columns: minmax(0, 1fr); }
.dash-search__line { display: flex; gap: .625rem; }
.dash-search__line .form-control { flex: 1; min-width: 0; }
.dash-search__status { margin: .75rem 0 0; font-size: .875rem; }
.dash-search__status:not(.form-error) { color: var(--dash-text-soft); }
.dash-notice { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; margin-top: .75rem; padding: .75rem .875rem; border-radius: .5rem; background: var(--dash-primary-tint); font-size: .875rem; }
.dash-notice p { flex: 1; min-width: 14rem; margin: 0; }
.dash-results { margin: .75rem 0 0; padding: 0; overflow: hidden; border: 1px solid var(--dash-border); border-radius: .5rem; list-style: none; }
.dash-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .875rem; padding: .5rem .875rem .5rem .5rem; border-top: 1px solid var(--dash-hairline); }
.dash-result:first-child { border-top: 0; }
.dash-result:hover { background: var(--dash-page); }
.dash-result .h2-button { min-width: 4.5rem; }
.dash-result__name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dash-result__meta { color: var(--dash-text-soft); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dash-deepsearch { display: flex; flex-direction: column; border-color: var(--color-dark); background: var(--color-dark); color: var(--color-white); }
.dash-deepsearch__toggle { width: 100%; padding: .875rem 1rem; color: var(--color-white); }
.dash-deepsearch__toggle .dash-gate { background: rgba(255, 255, 255, .16); color: var(--color-white); }
.dash-deepsearch__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: .625rem; padding: 1.125rem; }
.dash-deepsearch__body .type-utility { color: var(--color-secondary); }
.dash-deepsearch__body h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.dash-deepsearch__body p { margin: 0; color: rgba(255, 255, 255, .72); font-size: .875rem; line-height: 1.6; }
.dash-deepsearch__body .h2-button { margin-top: .25rem; }
.dash-deepsearch__body p.dash-deepsearch__note { font-size: .75rem; }

/* Desktop: the callout shrinks to one row whenever the search results are closed */
@media (min-width: 861px) {
  .dash-deepsearch.is-compact .dash-deepsearch__body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .875rem 1rem; }
  .dash-deepsearch.is-compact .dash-deepsearch__body > .type-utility,
  .dash-deepsearch.is-compact .dash-deepsearch__body > p { display: none; }
  .dash-deepsearch.is-compact .dash-deepsearch__body h2 { font-size: .95rem; }
  .dash-deepsearch.is-compact .dash-deepsearch__body .h2-button { margin-top: 0; }
}

.dash-start .dash-empty { padding-block: 3rem; }

/* ---------- Company row ---------- */
.dash-company__name { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; }
.dash-company__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin-top: .375rem; color: var(--dash-text-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }
.dash-sep { color: var(--dash-text-faint); }

/* ---------- Workspace ---------- */
/* All workspace boxes share one height: the row stretches to the tallest card
   and the graph canvas grows to fill the centre column. No box scrolls on its
   own; long lists use "Show more" instead. */
.dash-workspace { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 22.5rem; gap: 1rem; align-items: stretch; }
.dash-workspace > .dash-card { display: flex; flex-direction: column; }
.dash-workspace > .dash-card > .dash-card__body { flex: 1; }

/* Desktop filters end at Company; "Show more" reveals the graph options. */
@media (min-width: 861px) {
  .dash-filters:not(.is-expanded) .dash-filter-group--more { display: none; }
}
.dash-filters .dash-show-more { margin-top: 0; }

/* Filters */
.dash-filter-group { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: .875rem 0; border: 0; border-top: 1px solid var(--dash-hairline); }
.dash-filter-group:first-child { padding-top: 0; border-top: 0; }
fieldset.dash-filter-group > legend { float: left; width: 100%; margin-bottom: .5rem; padding: 0; }
.dash-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; clear: both; }
.dash-check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-primary); }
.dash-check .dash-pill { justify-self: start; }
.dash-check.is-off { opacity: .45; }
.dash-check__count { color: var(--dash-text-faint); font-size: .75rem; font-variant-numeric: tabular-nums; }
.dash-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: .5rem; background: var(--dash-surface-soft); }
.dash-segmented button { padding: .35rem .25rem; border: 0; border-radius: .35rem; background: transparent; color: var(--dash-text-soft); font-size: .75rem; font-weight: 600; cursor: pointer; }
.dash-segmented button[aria-pressed="true"] { background: var(--color-white); color: var(--color-dark); box-shadow: 0 1px 2px rgba(17, 24, 39, .12); }
.dash-filter-group .h2-text-link { justify-self: start; }

/* Centre */
.dash-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .875rem; padding: .625rem .875rem; border-bottom: 1px solid var(--dash-hairline); }
.dash-view-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: .5rem; background: var(--dash-surface-soft); }
.dash-view-toggle button { display: inline-flex; align-items: center; gap: .375rem; padding: .4rem .8rem; border: 0; border-radius: .35rem; background: transparent; color: var(--dash-text-soft); font-size: .85rem; font-weight: 600; cursor: pointer; }
.dash-view-toggle svg { width: .95rem; height: .95rem; }
.dash-view-toggle button[aria-pressed="true"] { background: var(--color-white); color: var(--color-primary); box-shadow: 0 1px 2px rgba(17, 24, 39, .12); }
.dash-toolbar__count { color: var(--dash-text-soft); font-size: .8rem; font-variant-numeric: tabular-nums; }
.dash-busy { margin: 0; padding: .5rem .875rem; color: var(--color-primary); font-size: .8rem; font-weight: 600; }
.dash-empty { margin: 0; padding: 4rem 1.5rem; color: var(--dash-text-soft); font-size: .9rem; text-align: center; }
.dash-empty strong { display: block; margin-bottom: .375rem; color: var(--color-dark); font-size: 1.05rem; }
.dash-empty p { margin: 0 0 1rem; }
.dash-graph-canvas { flex: 1 0 auto; width: 100%; height: 600px; background: #ffffff; }
/* No-DeepSearch overlay: secondary-blue panel over the graph. Text and
   buttons are dark because white on --color-secondary is only ~2.5:1. */
.dash-ds-stage { position: relative; display: flex; flex: 1 0 auto; flex-direction: column; }
.dash-ds-stage.has-overlay { min-height: 26rem; }
.dash-ds-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(255, 255, 255, .55); backdrop-filter: blur(2px); }
.dash-ds-overlay__panel { display: flex; flex-direction: column; gap: .875rem; width: 100%; max-width: 35rem; padding: 1.75rem; border-radius: 12px; background: var(--color-secondary); color: var(--color-dark); box-shadow: 0 10px 30px rgba(17, 24, 39, .18); }
.dash-ds-overlay__panel h2 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.dash-ds-overlay__panel p { margin: 0; color: rgba(17, 24, 39, .85); font-size: .95rem; line-height: 1.6; }
.dash-ds-overlay__actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .375rem; }
.dash-ds-overlay .h2-button { border-color: var(--color-dark); background: var(--color-dark); color: var(--color-white); }
.dash-ds-overlay .h2-button:hover { border-color: #1f2937; background: #1f2937; color: var(--color-white); }
.dash-ds-overlay .h2-outline { border-color: var(--color-dark); background: transparent; color: var(--color-dark); }
.dash-ds-overlay .h2-outline:hover { border-color: var(--color-dark); background: rgba(255, 255, 255, .35); color: var(--color-dark); }
.dash-ds-overlay .h2-button .dash-gate,
.dash-ds-overlay .h2-button:hover .dash-gate { background: rgba(255, 255, 255, .16); color: var(--color-white); }
.dash-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.125rem; padding: .625rem .875rem; border-top: 1px solid var(--dash-hairline); color: var(--dash-text-soft); font-size: .75rem; }
.dash-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.dash-legend__swatch { width: 1.4rem; height: .8rem; border: 2px solid; border-radius: 3px; }
.dash-legend__swatch.is-round { width: .7rem; height: .7rem; border-width: 1.5px; border-radius: 50%; }

/* List */
.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.dash-table th, .dash-table td { padding: .625rem .75rem; border-bottom: 1px solid var(--dash-hairline); text-align: left; vertical-align: middle; }
.dash-table th { background: var(--dash-page); color: rgba(17, 24, 39, .7); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.dash-table th button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.dash-table th button:hover { color: var(--color-dark); }
.dash-table__actions-head { text-align: right !important; }
.dash-table tbody tr { cursor: pointer; }
.dash-table tbody tr:hover { background: var(--dash-page); }
.dash-table tbody tr.is-active { background: var(--dash-primary-tint); }
.dash-entity-link { padding: 0; border: 0; background: transparent; color: var(--color-dark); font-weight: 600; text-align: left; cursor: pointer; }
.dash-entity-link:hover { color: var(--color-primary); text-decoration: underline; }
.dash-via { display: block; color: var(--dash-text-faint); font-size: .75rem; }
.dash-row-actions { display: flex; justify-content: flex-end; gap: .25rem; }
.dash-icon-btn { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--dash-border); border-radius: .4rem; background: var(--color-white); color: var(--dash-text-soft); cursor: pointer; }
.dash-icon-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.dash-icon-btn:disabled { cursor: not-allowed; opacity: .45; }
.dash-icon-btn svg { width: 1rem; height: 1rem; }
.dash-icon-btn .dash-lock { width: .85rem; height: .85rem; }

/* Details panel */
.dash-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; padding: 3px; border-radius: .5rem; background: var(--dash-surface-soft); }
.dash-tabs button { padding: .45rem .5rem; border: 0; border-radius: .35rem; background: transparent; color: var(--dash-text-soft); font-size: .85rem; font-weight: 600; cursor: pointer; }
.dash-tabs button[aria-selected="true"] { background: var(--color-white); color: var(--color-primary); box-shadow: 0 1px 2px rgba(17, 24, 39, .12); }
.dash-tabs button:disabled { cursor: not-allowed; opacity: .45; }
.dash-section { display: grid; gap: .625rem; padding-block: .875rem; border-top: 1px solid var(--dash-hairline); }
.dash-section:first-child { padding-top: 0; border-top: 0; }
.dash-section p { margin: 0; }
.dash-row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.dash-details-title { flex: 1; min-width: 0; margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
.dash-btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.dash-btn-pair > * { padding-inline: .5rem; line-height: 1.25; text-align: center; white-space: normal; }
.dash-link-pair { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
.dash-link-pair button { padding: 0; border: 0; background: transparent; color: var(--color-dark); font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--dash-border); text-underline-offset: 3px; cursor: pointer; }
.dash-link-pair button:hover { color: var(--color-primary); text-decoration-color: var(--color-primary); }
.dash-arrow { color: var(--dash-text-faint); }
.dash-sources { display: grid; gap: .375rem; margin: 0; padding-left: 1.1rem; font-size: .8rem; }
.dash-sources a { color: var(--color-primary); overflow-wrap: anywhere; }
.dash-alias-wrap { overflow: hidden; border: 1px solid var(--dash-hairline); border-radius: .5rem; }
.dash-alias-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.dash-alias-table th, .dash-alias-table td { padding: .5rem .625rem; border-bottom: 1px solid var(--dash-hairline); text-align: left; }
.dash-alias-table tr:last-child td { border-bottom: 0; }
.dash-alias-table th { background: var(--dash-page); color: rgba(17, 24, 39, .7); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.dash-overview { display: grid; gap: .5rem; padding: .75rem .875rem; border: 1px solid var(--dash-hairline); border-radius: .5rem; background: var(--dash-page); font-size: .85rem; line-height: 1.65; }
.dash-overview-list { display: grid; gap: .5rem; margin: 0; padding-left: 1.1rem; }
.dash-overview-list li::marker { color: var(--color-primary); }
.dash-overview-error { color: var(--dash-danger-ink); font-size: .8rem; }
.dash-overview-error pre { max-height: 12rem; margin: .375rem 0 0; overflow: auto; color: var(--dash-text-soft); font-size: .7rem; white-space: pre-wrap; }
.dash-overview .h2-text-link { justify-self: start; }
.dash-inline-form { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--dash-hairline); border-radius: .5rem; background: var(--dash-page); font-size: .875rem; }
.dash-inline-form textarea { min-height: 5rem; resize: vertical; }
.dash-inline-form p { margin: 0; }
.dash-inline-form__actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* ---------- How it works ---------- */
.dash-play { width: 0; height: 0; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-left: 7px solid currentColor; }
.dash-howto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; text-align: left; }
.dash-video { display: block; width: 100%; max-width: 100%; max-height: 58vh; aspect-ratio: 1280 / 548; border: 1px solid var(--dash-border); border-radius: 12px; background: var(--color-dark); box-shadow: 0 10px 30px rgba(17, 24, 39, .18); }
.dash-video--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--color-white); font-size: .85rem; text-align: center; }
.dash-video__play { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border-radius: 50%; background: var(--color-primary); }
.dash-video__play .dash-play { margin-left: 4px; border-top-width: 8px; border-bottom-width: 8px; border-left-width: 13px; color: var(--color-white); }
.dash-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.dash-steps li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .625rem; }
.dash-steps__n { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: var(--dash-primary-tint); color: var(--color-primary); font-size: .8rem; font-weight: 800; }
.dash-steps strong { display: block; font-size: .9rem; }
.dash-steps span { color: var(--dash-text-soft); font-size: .85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .dash-workspace { grid-template-columns: 14rem minmax(0, 1fr) 20rem; }
  .dash-search-row { grid-template-columns: minmax(0, 1fr) 20rem; }
}

@media (max-width: 1060px) {
  .dash-workspace { grid-template-columns: 14rem minmax(0, 1fr); }
  .dash-workspace > .dash-details { position: static; grid-column: 1 / -1; max-height: none; }
}

@media (max-width: 860px) {
  .dash-search-row,
  .dash-workspace { grid-template-columns: minmax(0, 1fr); }
  .dash-side { position: static; max-height: none; }
  .dash-mobile-only { display: inline-flex !important; }
  .dash-accordion-toggle { display: inline-flex; }
  .dash-deepsearch__toggle { display: flex; }

  /* Filters: accordion, closed by default */
  .dash-filters__title { display: none; }
  .dash-filters:not(.is-open) .dash-card__body { display: none; }
  .dash-filters:not(.is-open) .dash-card__header { border-bottom: 0; border-radius: 12px; }
  .dash-filters .dash-show-more { display: none; }

  /* DeepSearch: accordion below the search, closed by default */
  .dash-deepsearch__body h2 { display: none; }
  .dash-deepsearch:not(.is-open) .dash-deepsearch__body { display: none; }
  .dash-deepsearch.is-open .dash-deepsearch__body { padding-top: 0; }
  .dash-deepsearch__body .h2-button { margin-top: 0; }

  .dash-graph-canvas { height: 440px; }
  /* Phone: tighter panel, buttons stacked full width */
  .dash-ds-overlay { padding: .75rem; }
  .dash-ds-overlay__panel { gap: .75rem; padding: 1.25rem; }
  .dash-ds-overlay__panel h2 { font-size: 1.125rem; }
  .dash-ds-overlay__panel p { font-size: .875rem; }
  .dash-ds-overlay__actions { flex-direction: column; gap: .5rem; margin-top: .25rem; }
  .dash-ds-overlay__actions > * { width: 100%; }
  .dash-howto { grid-template-columns: 1fr; gap: 1rem; }
  .dash-steps { grid-template-columns: 1fr; gap: .875rem; }
  .dash-video { max-height: none; border-radius: 10px; box-shadow: none; }
  .dash-video--placeholder { padding: 1rem; }
}

@media (max-width: 760px) {
  /* List view: stacked cards instead of a wide table */
  .dash-table-wrap { overflow: visible; }
  .dash-table, .dash-table tbody { display: block; }
  .dash-table thead { display: none; }
  .dash-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; padding: .875rem; border-bottom: 1px solid var(--dash-hairline); }
  .dash-table td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; padding: 0; border: 0; grid-column: 1 / -1; }
  .dash-table td.dash-cell-name { display: block; grid-column: 1; font-size: .95rem; }
  .dash-table td.dash-cell-actions { grid-column: 2; grid-row: 1; align-self: start; }
  .dash-table td[data-label]::before { content: attr(data-label); flex-shrink: 0; color: var(--dash-text-faint); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .dash-table td .dash-pills { justify-content: flex-end; }
}

@media (max-width: 520px) {
  .dash-result { gap: .625rem; }
}

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