/* ===================== Driven UI =====================
   The shared design system for Driven's public surfaces: DrivenMemory
   (/marketplace) and the community (/community). One token set, two themes
   that are each designed rather than inverted, flat surfaces, 1px borders,
   small radii. Hierarchy comes from type and spacing, not decoration.

   Both pages link this file, so a change lands in both and the two cannot
   drift apart. Page-specific rules stay in the page.
   ===================================================== */
/* ================= Driven Marketplace design system =================
     One token set, two themes. The dark theme is Driven's own environment;
     the light theme is the same system in an enterprise register. Flat
     surfaces, 1px borders, small radii, shadows only where something floats.
     No gradients, no glass, no glow: hierarchy comes from type and spacing. */

  :root, [data-theme="dark"] {
    --bg: #14161f;
    --surface: #1a1d28;
    --surface-2: #20242f;
    --surface-3: #262b38;
    --text: #e8e9ee;
    --text-2: #b9bcc9;
    --muted: #8d92a3;
    --line: #2a2e3c;
    --line-strong: #383d4e;
    --accent: #9184d9;
    --accent-strong: #a89dea;
    --on-accent: #14121f;
    --good: #6fbf8f;
    --warn-t: #d8b05c;
    --focus: #a89dea;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  }
  [data-theme="light"] {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f1f2f6;
    --surface-3: #e9ebf1;
    --text: #191b23;
    --text-2: #3d4150;
    --muted: #6a6f80;
    --line: #e2e4ec;
    --line-strong: #c9cdd9;
    --accent: #5b4fc0;
    --accent-strong: #4a3fae;
    --on-accent: #ffffff;
    --good: #2e7d4f;
    --warn-t: #8a6d1d;
    --focus: #5b4fc0;
    --shadow: 0 8px 24px rgba(23, 25, 35, 0.10);
  }

  * { box-sizing: border-box; }
  /* The lesson the editor taught: an explicit display on a rule beats the
     [hidden] attribute. Settle it globally so hiding always means hidden. */
  [hidden] { display: none !important; }
  html { height: 100%; }
  body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text);
    font: 400 14.5px/1.55 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

  /* ------------------------------------------------------------ header */
  .top { position: sticky; top: 0; z-index: 30; background: var(--bg);
    border-bottom: 1px solid var(--line); }
  .top-inner { display: flex; align-items: center; gap: 18px; height: 56px; }
  .brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap; }
  .brand:hover { text-decoration: none; }
  .brand .mark { width: 24px; height: 24px; }
  .brand .mark svg { width: 100%; height: 100%; display: block; }
  .brand .sub { color: var(--muted); font-weight: 400; }

  .top-nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .top-nav::-webkit-scrollbar { display: none; }
  .nav-item { appearance: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
    padding: 7px 11px; border-radius: 6px; font-size: 13.5px; color: var(--muted); }
  .nav-item:hover { color: var(--text); background: var(--surface-2); }
  .nav-item[aria-pressed="true"] { color: var(--text); background: var(--surface-2); font-weight: 600; }

  .top-search { margin-left: auto; position: relative; width: min(300px, 30vw); flex: 0 1 auto; }
  .top-search input { width: 100%; height: 34px; padding: 0 12px 0 30px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
  .top-search input::placeholder { color: var(--muted); }
  .top-search input:focus { outline: none; border-color: var(--accent); }
  .top-search .glass { position: absolute; left: 9px; top: 8px; width: 14px; height: 14px; color: var(--muted); pointer-events: none; }

  .top-actions { display: flex; align-items: center; gap: 8px; }
  .icon-btn { appearance: none; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
    width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
  .icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
  .icon-btn[aria-pressed="true"] { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }
  .btn { appearance: none; border: 1px solid transparent; border-radius: 7px; cursor: pointer; white-space: nowrap;
    padding: 8px 14px; font-size: 13.5px; font-weight: 600; background: var(--accent); color: var(--on-accent); }
  .btn:hover { background: var(--accent-strong); text-decoration: none; }
  a.btn { display: inline-block; }
  .btn.quiet { background: var(--surface); color: var(--text); border-color: var(--line); font-weight: 500; }
  .btn.quiet:hover { border-color: var(--line-strong); background: var(--surface-2); }

  /* ------------------------------------------------------------ page head */
  .page-head { padding: 30px 0 6px; }
  .page-head h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.015em; line-height: 1.2; }
  .page-head p { margin: 0; color: var(--muted); font-size: 14px; max-width: 62ch; }

  /* ------------------------------------------------------------ toolbar */
  .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; }
  .toolbar .count { font-size: 13px; color: var(--muted); margin-right: auto; }
  .control { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
  .control select, .control input { height: 32px; border-radius: 6px; border: 1px solid var(--line);
    background: var(--surface); color: var(--text); font: inherit; font-size: 13px; padding: 0 8px; }
  .control input[type="number"] { width: 90px; }
  .control select:focus, .control input:focus { outline: none; border-color: var(--accent); }
  .link-btn { appearance: none; background: none; border: 0; cursor: pointer; color: var(--accent); font-size: 13px; padding: 4px; }

  /* ------------------------------------------------------------ sections */
  .section { margin: 10px 0 30px; }
  .section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
  .section-head h2 { margin: 0; font-size: 15.5px; letter-spacing: -0.01em; }
  .section-head .note { font-size: 12.5px; color: var(--muted); }
  .section-head .spacer { flex: 1; }
  .section-head .view-all { font-size: 13px; }

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

  /* --------------------------------------------------------------- card */
  .card { display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px;
    transition: border-color .14s ease, background .14s ease; }
  .card:hover { border-color: var(--line-strong); background: var(--surface-2); }
  .card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .avatar { width: 34px; height: 34px; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--surface-3); color: var(--accent); font-size: 13px; font-weight: 600; overflow: hidden; }
  .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .card-title { min-width: 0; }
  .card-title .name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kicker { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
  .card .desc { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
  .meta { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
  .meta .dot::before { content: "·"; color: var(--line-strong); }
  .card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
  .price { margin-left: auto; font-size: 13.5px; font-weight: 600; }

  .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); background: var(--surface-2); }
  .tag.new { color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 9%, transparent); }
  .tag.sponsored { color: var(--warn-t); border-color: color-mix(in srgb, var(--warn-t) 35%, transparent); background: color-mix(in srgb, var(--warn-t) 9%, transparent); }

  /* company rows: companies are not "another tool card" */
  .rows { display: flex; flex-direction: column; gap: 10px; }
  .row-card { display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
    transition: border-color .14s ease, background .14s ease; }
  .row-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
  .row-card .avatar { width: 42px; height: 42px; }
  .row-main { min-width: 0; flex: 1; }
  .row-main .name { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; }
  .row-main .desc { margin: 2px 0 0; -webkit-line-clamp: 1; min-height: 0; }
  .row-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: 12.5px; color: var(--muted); }
  .chev { color: var(--muted); font-size: 16px; }

  /* ------------------------------------------------------------ detail */
  .detail { display: none; padding-top: 20px; }
  body.mk-detail-open .browse { display: none; }
  body.mk-detail-open .detail { display: block; }
  .mk-back { appearance: none; background: none; border: 0; cursor: pointer; color: var(--muted);
    font-size: 13px; padding: 6px 0; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; }
  .mk-back:hover { color: var(--text); }
  .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 30px; align-items: start; }
  .detail-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
  .detail-head .avatar { width: 54px; height: 54px; border-radius: 10px; font-size: 20px; }
  .detail-head h1, .detail-head h2 { margin: 0 0 3px; font-size: 22px; letter-spacing: -0.015em; font-weight: 500; }
  .byline { font-size: 13.5px; color: var(--muted); }
  .byline a { color: var(--accent); }
  .detail-tags { display: flex; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
  .overview h3, .listings-block h3 { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted); margin: 26px 0 10px; }
  .overview p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-2); max-width: 70ch; white-space: pre-wrap; }
  .side-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; position: sticky; top: 76px; }
  .side-panel .btn { width: 100%; text-align: center; margin-bottom: 8px; }
  .fact { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
  .fact:first-of-type { border-top: 0; padding-top: 2px; }
  .fact dt { color: var(--muted); margin: 0; }
  .fact dd { margin: 0; text-align: right; font-weight: 500; }
  .side-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }

  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { font-size: 12.5px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text-2); }
  .chip.perm { border-color: color-mix(in srgb, var(--warn-t) 40%, transparent);
    color: var(--warn-t); background: color-mix(in srgb, var(--warn-t) 8%, transparent); }
  .flow { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 14px; }
  .flow li { margin-bottom: 4px; }
  .flow-line { margin: 0; font-size: 14px; color: var(--text-2); }
  .muted-note { margin: 0; font-size: 13px; color: var(--muted); }

  /* ------------------------------------------------------------ states */
  .empty { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 30px 22px; text-align: center; color: var(--muted); font-size: 13.5px; }
  .empty strong { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 5px; font-weight: 600; }
  .empty .actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; }
  .skeleton { height: 124px; border-radius: 8px; border: 1px solid var(--line);
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
    background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
  @keyframes shimmer { to { background-position: -200% 0; } }

  .foot { margin: 44px 0 30px; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
  .foot a { color: var(--muted); }
  .foot a:hover { color: var(--text); }

  @media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; }
    .side-panel { position: static; }
  }
  @media (max-width: 760px) {
    .top-inner { flex-wrap: wrap; height: auto; padding: 8px 0; row-gap: 8px; }
    .top-search { order: 5; width: 100%; margin-left: 0; }
    .top-nav { order: 4; width: 100%; }
    .page-head h1 { font-size: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .card, .row-card { transition: none; }
    .skeleton { animation: none; }
  }

  /* =========================================================== v2, 21 Aug
     Ecosystem directory, hero search, suggestions, theme menu, facet chips.
     Same system: flat, bordered, typographic. Nothing glows. */

  /* hero (Discover view only) */
  .hero { padding: 34px 0 8px; max-width: 720px; }
  .hero h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; }
  .hero .lede { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; max-width: 58ch; }
  .hero-search { position: relative; max-width: 560px; }
  .hero-search input { width: 100%; height: 46px; padding: 0 14px 0 40px; border-radius: 9px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; }
  .hero-search input:focus { outline: none; border-color: var(--accent); }
  .hero-search .glass { position: absolute; left: 13px; top: 15px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
  .try-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 12px 0 0; }
  .try-row .lbl { font-size: 12.5px; color: var(--muted); }
  .try-chip { appearance: none; cursor: pointer; font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--text-2); }
  .try-chip:hover { border-color: var(--line-strong); background: var(--surface-2); }

  /* search suggestions */
  .suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px;
    box-shadow: var(--shadow); padding: 5px; max-height: 330px; overflow-y: auto; }
  .suggest-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    appearance: none; background: none; border: 0; border-radius: 6px; padding: 8px 10px; font-size: 13.5px; color: var(--text); }
  .suggest-item .k { margin-left: auto; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .suggest-item:hover, .suggest-item[aria-selected="true"] { background: var(--surface-2); }
  .suggest-head { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 7px 10px 3px; }

  /* theme menu */
  .theme-wrap { position: relative; }
  .theme-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 150px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow); padding: 5px; }
  .theme-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
    appearance: none; background: none; border: 0; border-radius: 6px; padding: 8px 10px; font-size: 13.5px; color: var(--text); }
  .theme-opt:hover { background: var(--surface-2); }
  .theme-opt .check { margin-left: auto; color: var(--accent); visibility: hidden; }
  .theme-opt[aria-checked="true"] .check { visibility: visible; }

  /* labels for listing sources */
  .tag.external { color: var(--text-2); border-color: var(--line-strong); background: var(--surface-3); }
  .tag.featured { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }

  /* external ecosystem cards */
  .ext-card { cursor: default; }
  .ext-card .org { font-size: 12.5px; color: var(--muted); }
  .ext-link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
  .ext-domain { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eco-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); max-width: 78ch; line-height: 1.55; }

  /* category facet chips on kind views */
  .facets { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 0 0 14px; }
  .facet { appearance: none; cursor: pointer; font-size: 12.5px; padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--text-2); }
  .facet:hover { border-color: var(--line-strong); }
  .facet[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

  a.nav-item { text-decoration: none; }
  a.nav-item:hover { text-decoration: none; }

  @media (max-width: 760px) {
    .hero { padding-top: 22px; }
    .hero h1 { font-size: 22px; }
    .vm-band .vm-actions { width: 100%; }
    .vm-band .vm-actions .btn { flex: 1; text-align: center; }
    .theme-menu { right: -40px; }
  }

  /* ======================================================= home, 22 Aug
     The DrivenMemory homepage layer. Built on the same tokens as the
     marketplace and reusing its nav, buttons, cards and rows, so the two
     pages read as one product. Everything new here is prefixed h- so it
     cannot collide with the marketplace rules above.

     The homepage is more editorial than the marketplace (larger type, more
     air, full width bands) without becoming a different design language:
     still flat, still 1px borders, still no gradients, glass or glow. */
  .h-band.tight { padding: 40px 0; }

  /* ------------------------------------------------------------- hero */
  .h-hero-search { position: relative; max-width: 470px; margin-bottom: 14px; }
  .h-hero-search input { width: 100%; height: 48px; padding: 0 15px 0 42px; border-radius: 9px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
    font: inherit; font-size: 15px; }
  .h-hero-search input:focus { outline: none; border-color: var(--accent); }
  .h-hero-search .glass { position: absolute; left: 14px; top: 16px; width: 16px; height: 16px;
    color: var(--muted); pointer-events: none; }
  .h-cta-row .btn { padding: 11px 20px; font-size: 14px; }

  .h-try { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 24px; }
  .h-try .lbl { font-size: 12.5px; color: var(--muted); }

  .h-status { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--muted); }
  .h-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: 0 0 auto; }
  .h-status .sep::before { content: "\00b7"; color: var(--line-strong); }
  .h-status b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* The panel beside the hero. It carries the evaluation arc rather than a
     picture: the thing it describes is on every listing page, so a screenshot
     would date the moment the listing layout moves. Text stays true. */
  .h-eval-card .body { padding: 20px 20px 20px; }
  .h-eval-card .k { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 5px; }

  /* ---------------------------------------------------------- 2 doors */
  .h-door .k { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 9px; }
  .h-door .btn { align-self: flex-start; margin-top: auto; }

  /* ------------------------------------------------------------ kinds */
  .h-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px; }
  .h-kind { border: 1px solid var(--line); border-radius: 9px; padding: 16px 17px;
    background: var(--surface); text-align: left; display: block;
    transition: border-color .14s ease, background .14s ease; }
  .h-kind:hover { border-color: var(--line-strong); background: var(--surface-2); text-decoration: none; }
  .h-kind .g { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 9px; }
  .h-kind h3 { margin: 0 0 5px; font-size: 14.5px; letter-spacing: -0.01em; color: var(--text); }
  .h-kind p { margin: 0; font-size: 12.8px; color: var(--muted); line-height: 1.5; }

  /* ------------------------------------------------------------ steps */
  .h-step .n { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 8px; font-variant-numeric: tabular-nums; }

  /* -------------------------------------------------- evaluation points */
  .h-vm-point .b { width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
    flex: 0 0 auto; margin-top: 8px; }

  /* ------------------------------------------------------------ build */
  .h-build-step .n { font-size: 11px; color: var(--accent); font-weight: 600;
    font-variant-numeric: tabular-nums; margin-bottom: 8px; }
  .h-get li .t { color: var(--accent); flex: 0 0 auto; }

  /* -------------------------------------------------------- community */

  /* ---------------------------------------------------------- closing */

  /* ----------------------------------------------------------- footer */
  .h-foot-brand .brand { margin-bottom: 10px; }
  .h-foot-bar .spacer { flex: 1; }

  /* ------------------------------------------------------- responsive */
  @media (max-width: 620px) {
    .h-hero-search input { height: 44px; }
    .h-cta-row .btn { flex: 1; text-align: center; }
  }

  /* The homepage header carries five destinations where the marketplace
     carries seven short ones, so its search field is narrower. Without this
     the last nav item clips, which read as a typo rather than an overflow. */
  .h-top .top-search { width: min(190px, 19vw); }
  .h-top .top-nav { flex: 0 1 auto; }
  @media (max-width: 1100px) {
    .h-top .top-search { width: min(150px, 16vw); }
  }

  /* ================================================ ecosystem brand marks
     Official logos are served from our own /assets/ecosystem/, never a third
     party CDN, so the page still works when someone else's CDN does not.

     The container is a fixed square with consistent padding and a neutral
     surface, so a wordmark, a glyph and a plain monogram all sit on the same
     grid. No CSS filter is ever applied to a logo: inverting or recolouring
     an official mark misrepresents the brand. Instead the tile carries a
     surface that is legible in both themes, and each logo keeps its own
     colours in both.

     When no official asset exists the tile shows a plain letter. That is the
     honest fallback: a logo is either the company's own file or it is not a
     logo at all. */

  .eco-logo { width: 34px; height: 34px; border-radius: 7px; flex: 0 0 auto;
    display: grid; place-items: center; overflow: hidden;
    background: var(--surface-3); border: 1px solid var(--line); }
  .eco-logo img { width: 76%; height: 76%; object-fit: contain; display: block; }
  .eco-logo .mono { color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
  .eco-logo.lg { width: 44px; height: 44px; border-radius: 9px; }
  .eco-logo.lg .mono { font-size: 16px; }

  /* ==================================================== catbar, 22 Aug
     Browse by kind. This used to live in the header, where seven buttons plus
     a search field plus the actions could not fit inside the 1180px container
     at ANY width, so the nav silently became a horizontally scrolling strip
     and its items sat outside the viewport. A control that important should
     not be something you have to discover by dragging.

     It is now a page level bar that WRAPS instead of scrolling, so every kind
     is visible at every width and there is no nested scroll container. */

  .catbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 0 0; }
  .catbar-item { appearance: none; background: none; border: 1px solid var(--line);
    cursor: pointer; white-space: nowrap; padding: 7px 13px; border-radius: 999px;
    font-size: 13.5px; color: var(--text-2); background: var(--surface);
    transition: border-color .14s ease, background .14s ease, color .14s ease; }
  .catbar-item:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }
  .catbar-item[aria-pressed="true"] { color: var(--on-accent); background: var(--accent);
    border-color: var(--accent); font-weight: 600; }

  /* The header now carries destinations only, on every public page, so it
     fits without scrolling and reads the same on all of them. */
  .top-nav { overflow: visible; flex-wrap: nowrap; }

  @media (max-width: 760px) {
    .catbar { padding-top: 14px; gap: 5px; }
    .catbar-item { padding: 6px 11px; font-size: 13px; }
  }

  /* ============================================== header, small screens
     Above 900px the header is one row: brand, destinations, search, actions.
     Below it the destinations collapse into a menu rather than being squeezed
     or scrolled, which is what previously pushed the header past the viewport
     at 320px and 768px. */

  .nav-toggle { display: none; appearance: none; cursor: pointer;
    width: 34px; height: 34px; border-radius: 7px; flex: 0 0 auto;
    border: 1px solid var(--line); background: var(--surface);
    padding: 0; place-items: center; align-content: center; gap: 4px; }
  .nav-toggle span { display: block; width: 15px; height: 1.5px; background: var(--text-2); border-radius: 1px; }
  .nav-toggle:hover { border-color: var(--line-strong); }

  @media (max-width: 900px) {
    .nav-toggle { display: grid; }
    .top-inner { gap: 10px; }
    .top-nav { display: none; }
    .top { position: relative; }
    header.top.nav-open .top-nav {
      display: flex; flex-direction: column; align-items: stretch; gap: 2px;
      position: absolute; left: 0; right: 0; top: 100%; z-index: 45;
      background: var(--surface); border-bottom: 1px solid var(--line);
      box-shadow: var(--shadow); padding: 8px 22px 12px;
    }
    header.top.nav-open .top-nav .nav-item { padding: 11px 12px; font-size: 14.5px; border-radius: 7px; }
    .top-search { width: auto; flex: 1 1 auto; min-width: 0; margin-left: 0; }
    .h-top .top-search { width: auto; }
  }

  /* Narrow phones: the search takes its own row so the action never gets
     pushed off the edge, and the primary action stops carrying long copy. */
  @media (max-width: 620px) {
    .top-inner { flex-wrap: wrap; height: auto; padding: 8px 0; row-gap: 8px; }
    .top-search { order: 5; width: 100%; flex: 1 0 100%; }
    .top-actions { margin-left: auto; }
    .top-actions .btn { padding: 8px 12px; font-size: 13px; }
  }

  /* Small-screen action rows: two buttons side by side do not fit at 320px,
     so they wrap and stretch rather than pushing the page sideways. */
  @media (max-width: 420px) {
    .empty .actions { flex-direction: column; align-items: stretch; }
    .empty .actions .btn { width: 100%; text-align: center; }
    .h-cta-row .btn, .h-door .btn { width: 100%; text-align: center; }
    .vm-band .vm-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .vm-band .vm-actions .btn { width: 100%; text-align: center; }
  }

  /* At the narrowest phones a card footer carrying a tag, a domain and a link
     cannot hold one line. It wraps rather than pushing the page sideways, and
     the domain truncates rather than forcing the wrap on its own.
     (card-foot wraps) */
  .card-foot { flex-wrap: wrap; row-gap: 6px; }
  .ext-domain { min-width: 0; max-width: 100%; }
  .ext-link { margin-left: auto; }
  @media (max-width: 380px) {
    .ext-link { margin-left: 0; }
    .card-foot .price { margin-left: auto; }
  }

  /* ===================== Phase 5: the proof layer =====================
     Passport, Proof, Value and the company Showroom. Appended, so no rule
     above changes. Everything is built from the existing tokens, flat
     surfaces and 1px borders, and every grid uses auto-fit so it collapses
     at narrow widths without a media query of its own.

     Semantic colour is used once and precisely: --warn-t marks a scope that
     WRITES, --good marks one that only reads. That distinction is the most
     consequential thing on a listing page, so it is the one place a colour
     carries meaning rather than decoration. */

  /* ------------------------------------------------------ listing image */
  .detail-hero { margin: 0 0 20px; border: 1px solid var(--line); border-radius: 10px;
    overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
  .detail-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .detail-hero.is-mono { display: grid; place-items: center; }
  .mono-xl { font-size: 40px; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; }

  /* --------------------------------------------------------- overview */
  .ov-text { max-width: 68ch; line-height: 1.65; }
  .cap-grid { list-style: none; margin: 0; padding: 0; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 20px; }
  .cap { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
  .cap-tick { color: var(--good); flex: 0 0 auto; font-size: 13px; line-height: 1.6; }

  /* --------------------------------------------------------- passport */
  .pp, .pf, .sim { margin: 26px 0 0; padding: 18px 20px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px; }
  .pp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .pp h3, .pf h3, .sim h3 { margin: 0; font-size: 15.5px; letter-spacing: -0.01em; }
  .pp-note { font-size: 12px; color: var(--muted); }
  .pp-fine { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; max-width: 70ch; }
  .qa-list { display: flex; flex-direction: column; gap: 14px; }
  .qa-item { border-top: 1px solid var(--line); padding-top: 14px; }
  .qa-item:first-child { border-top: 0; padding-top: 0; }
  .qa-q { margin: 0 0 5px; font-size: 14.5px; font-weight: 600; color: var(--text); }
  .qa-a { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }

  /* ---- compare: declared listing details, side by side ---- */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .cmp-launch { margin-left: 8px; }
  .cmp { margin-top: 2px; }
  .cmp-note { margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
  .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface); }
  .cmp-table { border-collapse: separate; border-spacing: 0; width: 100%; }
  .cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: 12px 14px;
    border-bottom: 1px solid var(--line); }
  .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
  .cmp-rowh { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 150px;
    min-width: 128px; font-size: 12px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em; }
  .cmp-corner { position: sticky; left: 0; z-index: 2; width: 150px; background: var(--surface);
    border-bottom: 1px solid var(--line-strong); }
  .cmp-colh { min-width: 210px; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); }
  .cmp-colh-in { display: flex; flex-direction: column; gap: 4px; }
  .cmp-title { appearance: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--accent); line-height: 1.3; overflow-wrap: anywhere; }
  .cmp-title:hover { text-decoration: underline; }
  .cmp-kind { font-size: 12px; color: var(--muted); }
  .cmp-remove { appearance: none; background: none; border: 0; padding: 0; margin-top: 4px; cursor: pointer;
    align-self: flex-start; font-size: 12px; color: var(--muted); }
  .cmp-remove:hover { color: var(--text); text-decoration: underline; }
  .cmp-cell { font-size: 13.5px; color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
  .cmp-none { color: var(--muted); font-style: italic; }
  .cmp-ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
  .cmp-ul li { font-size: 13.5px; }
  .cmp-access-h { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
  .cmp-link { color: var(--accent); word-break: break-word; }
  .cmp-fine { margin: 12px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.55; max-width: 80ch; }
  .cmp-title:focus-visible, .cmp-remove:focus-visible { outline: 2px solid var(--focus, var(--accent));
    outline-offset: 2px; border-radius: 3px; }

  /* ---- private notes on a saved listing (owner-only) ---- */
  .saved-entry { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .saved-note { border-top: 1px dashed var(--line); padding-top: 9px; }
  .saved-note-text { margin: 0 0 6px; font-size: 13px; color: var(--text-2); line-height: 1.5;
    white-space: pre-wrap; overflow-wrap: anywhere; }
  .saved-note-btn { appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: var(--accent); }
  .saved-note-btn:hover { text-decoration: underline; }
  .saved-note-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
    padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--surface); color: var(--text); resize: vertical; line-height: 1.5; }
  .saved-note-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
  .saved-note .btn { padding: 5px 12px; font-size: 12.5px; }
  .saved-note-msg { font-size: 12px; color: var(--muted); }
  .saved-note-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
  .saved-note-btn:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 3px; }

  /* ---- needs attention: the buyer workspace's derived summary ---- */
  .bw-attn { margin-bottom: 20px; border-left: 3px solid var(--accent); }
  .bw-attn-list { margin: 0; padding: 6px 20px 6px; list-style: none; }
  .bw-attn-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
  .bw-attn-item:first-child { border-top: 0; }
  .bw-attn-item .dm-chip { flex: 0 0 auto; margin-top: 1px; }
  .bw-attn-body { min-width: 0; }
  .bw-attn-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
  .bw-attn-sub { margin: 3px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
  .bw-attn-link { color: var(--accent); font-weight: 500; white-space: nowrap; }
  .bw-attn-link:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 3px; }
  .bw-enquiry:focus, .bw-item:focus { outline: none; }
  .bw-enquiry:focus-visible, .bw-item:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 4px; border-radius: 6px; }

  .pp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 10px 24px; margin: 0 0 16px; }
  .pp-facts .fact { display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
    border-bottom: 1px solid var(--line); padding-bottom: 7px; min-width: 0; }
  .pp-facts dt { font-size: 12.5px; color: var(--muted); flex: 0 0 auto; }
  .pp-facts dd { margin: 0; font-size: 13.5px; text-align: right; min-width: 0;
    overflow-wrap: anywhere; }
  .not-provided { color: var(--muted); font-style: italic; }

  .pp-group { margin: 0 0 14px; }
  .pp-group h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .chip.cn { display: inline-flex; align-items: center; gap: 7px; }
  .cn-mono { width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 10px; font-weight: 600;
    background: var(--surface-3); color: var(--muted); }

  /* -------------------------------------------------- what it can access */
  .pm { margin-top: 16px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface-2); padding: 14px 16px; }
  .pm-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    justify-content: space-between; margin-bottom: 10px; }
  .pm-head b { font-size: 13.5px; }
  .pm-fine { font-size: 12px; color: var(--muted); }
  .pm-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .pm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; border-top: 1px solid var(--line); }
  .pm-row:first-child { border-top: 0; padding-top: 0; }
  .pm-scope { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
  .pm-level { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
    border: 1px solid currentColor; }
  .pm-level.reads { color: var(--good); }
  .pm-level.writes { color: var(--warn-t); }
  .pm-data { margin: 12px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.6; }

  /* ------------------------------------------------------------- proof */
  .pf-body { margin-top: 12px; }
  .pf-empty { display: flex; gap: 13px; align-items: flex-start;
    border: 1px dashed var(--line-strong); border-radius: 8px; padding: 15px 16px; }
  /* Drawn, not typed: a glyph here would be an em dash in visible copy. */
  .pf-empty-mark { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 4px;
    border: 1px solid var(--line-strong); border-radius: 50%; }
  .pf-empty b { display: block; font-size: 13.5px; margin-bottom: 4px; }
  .pf-empty p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 66ch; }

  .pf-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
  .pf-status { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 4px; border: 1px solid currentColor; color: var(--muted); }
  .pf-status.is-success { color: var(--good); }
  .pf-status.is-failure, .pf-status.is-cancelled { color: var(--warn-t); }
  .pf-status.is-partial { color: var(--warn-t); }
  .pf-env { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line);
    border-radius: 4px; padding: 2px 7px; }
  .pf-dur { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .pf-task { margin: 0 0 12px; font-size: 14px; }

  .pf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
  .pf-step { display: flex; gap: 11px; align-items: flex-start; flex-wrap: wrap;
    padding: 10px 0; border-top: 1px solid var(--line); }
  .pf-step:first-child { border-top: 0; }
  .pf-kind { flex: 0 0 auto; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px;
    margin-top: 1px; }
  .pf-step.is-error .pf-kind { color: var(--warn-t); border-color: currentColor; }
  .pf-step-body { flex: 1 1 220px; min-width: 0; }
  .pf-step-body b { display: block; font-size: 13.5px; }
  .pf-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
  .pf-res { margin: 5px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
  .pf-error { margin: 12px 0 0; font-size: 13px; color: var(--warn-t); }
  .pf-res-final { margin: 12px 0 0; font-size: 13.5px; }
  .pf-fine { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; max-width: 70ch; }

  /* ------------------------------------------------------------- value */
  .sim-lede { margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); max-width: 66ch; }
  .sim-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 12px; margin-bottom: 16px; }
  .sim-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .sim-label { font-size: 12px; color: var(--muted); }
  .sim-field input { width: 100%; height: 36px; border-radius: 7px; border: 1px solid var(--line);
    background: var(--bg); color: var(--text); font: inherit; font-size: 14px; padding: 0 10px;
    font-variant-numeric: tabular-nums; }
  .sim-field input:focus { outline: none; border-color: var(--accent); }

  .sim-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px;
    overflow: hidden; }
  .sim-stat { background: var(--surface-2); padding: 13px 15px; display: flex; flex-direction: column; gap: 2px; }
  .sim-stat-l { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .sim-stat-n { font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; line-height: 1.2; }
  .sim-stat-s { font-size: 11.5px; color: var(--muted); }
  .sim-out .muted-note { grid-column: 1 / -1; background: var(--surface-2); margin: 0; padding: 13px 15px; }

  /* ---------------------------------------------------------- showroom */
  .sr-strip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 0 0 22px; }
  .sr-stat { background: var(--surface); padding: 12px 18px; flex: 1 1 auto; min-width: 96px;
    display: flex; flex-direction: column; gap: 2px; }
  .sr-n { font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; line-height: 1.15; }
  .sr-l { font-size: 11.5px; color: var(--muted); }

  @media (max-width: 620px) {
    .pp, .pf, .sim { padding: 15px 15px; }
    .pp-facts dd { text-align: left; }
    .pp-facts .fact { flex-direction: column; gap: 2px; align-items: flex-start; }
    .pm-level { margin-left: 0; }
    .mono-xl { font-size: 30px; }
  }

  /* ------------------------------------------------- ambient band host
     The handoff layer below draws the band; this says where it may sit. It is
     absolutely positioned and masked to nothing before it reaches the
     content, so its host must be positioned and the content above it must
     be raised. Without both, the band either escapes its section or paints
     over the text it is supposed to sit behind. */
  .dm-host { position: relative; }
  .dm-host > .h-hero,
  .dm-host > .browse,
  .dm-host > .page-head { position: relative; z-index: 1; }

/* ==================== Driven UI 3: the handoff layer ====================
   Appended, never edited into the rules above, so nothing already shipped
   changes shape. This layer does three things the design handoff asks for:

     1. One token set. The ten step blue scale the design files all declare,
        mapped onto the same variable names the rules above already use, so
        the whole product repaints at once. Light is the designed default.
     2. One type scale. Inter Tight for headings, Inter for body, Roboto Mono
        for the numbers people compare, and nothing else.
     3. One copy of every shared component. Six copies of a badge is how one
        product slowly becomes six.

   Semantic colour is fixed: green success, amber caution, red destructive,
   blue action and information. Every state carries a word, never colour
   alone.
   ======================================================================= */

:root, [data-theme="light"] {
  --blue-50:#f2f6fc; --blue-100:#e4ecf8; --blue-200:#c7d9f1; --blue-300:#9dbde6;
  --blue-400:#6d99d4; --blue-500:#4478bd; --blue-600:#2f5f9e; --blue-700:#274e80;
  --blue-800:#223f66; --blue-900:#1d3450;
  --bg:#f4f6f8; --surface:#fcfcfd; --surface-2:#eef1f5; --surface-3:#e4e9ef;
  --text:#14171c; --text-2:#414751; --muted:#6e7580;
  --line:#e2e6ec; --line-strong:#c9d0d9;
  --accent:var(--blue-600); --accent-strong:var(--blue-700); --on-accent:#ffffff;
  --accent-subtle:var(--blue-50); --accent-border:var(--blue-200); --focus:var(--blue-500);
  --good:#2e7d52; --warn:#9a6b12; --err:#b4382f; --info:var(--blue-600);
  --warn-t:var(--warn);
  --shadow:0 6px 18px rgba(20,23,28,.08);
  --grid:rgba(20,23,28,.055);
}

[data-theme="dark"] {
  --blue-50:#eef4fb; --blue-100:#dbe7f6; --blue-200:#bcd3ef; --blue-300:#93b7e4;
  --blue-400:#6d99d4; --blue-500:#4b7fc0; --blue-600:#3b689f; --blue-700:#2f5480;
  --blue-800:#264263; --blue-900:#1f3450;
  --bg:#14161a; --surface:#1a1d22; --surface-2:#1f232a; --surface-3:#272c34;
  --text:#e8eaee; --text-2:#b3b8c2; --muted:#868c97;
  --line:#2b3037; --line-strong:#3a4048;
  --accent:var(--blue-400); --accent-strong:var(--blue-300); --on-accent:#0e1620;
  --accent-subtle:rgba(109,153,212,.10); --accent-border:rgba(109,153,212,.34); --focus:var(--blue-300);
  --good:#4f9e72; --warn:#c39a4a; --err:#cf7a6e; --info:var(--blue-400);
  --warn-t:var(--warn);
  --shadow:0 8px 24px rgba(5,7,10,.42);
  --grid:rgba(232,234,238,.05);
}

/* ------------------------------------------------------------------ type */
body { font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; }
h1, h2, h3, h4,
.page-head h1, .hero h1, .h-hero h1, .h-h2, .detail-head h1, .detail-head h2,
.dm-h1, .dm-h2, .dm-h3 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}
h4, .section-head h2, .pp h3, .pf h3, .sim h3, .dm-h3 { letter-spacing: -0.01em; }
.dm-h1 { font-size: clamp(31px, 4.6vw, 47px); line-height: 1.07; letter-spacing: -0.032em; text-wrap: balance; margin: 0 0 16px; }
.dm-h2 { font-size: 21px; line-height: 1.25; margin: 0; }
.dm-h3 { font-size: 17px; line-height: 1.3; margin: 0; }
/* The numbers people compare, and only those. */
.price, .pf-dur, .sr-n, .sim-stat-n, .mono-num, .h-status b, .dm-num {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.kicker, .card-kicker, .h-sec-label, .dm-kicker { letter-spacing: 0.08em; }
.dm-kicker { display: block; font-size: 11px; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.dm-lede { font-size: 17px; line-height: 1.62; color: var(--text-2); max-width: 52ch; text-wrap: pretty; }
.dm-note { font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------------ micro interaction */
.btn, .icon-btn, .facet, .catbar-item, .try-chip, .nav-item, .card, .row-card,
.h-kind, .suggest-item, .theme-opt, .link-btn, .dm-btn, .dm-listing, .dm-news {
  transition: background-color .13s ease, border-color .13s ease, color .13s ease, transform .11s ease;
}
.btn:active, .icon-btn:active, .facet:active, .catbar-item:active, .try-chip:active,
.dm-btn:not([disabled]):active { transform: translateY(1px); }
.card:hover, .row-card:hover, .h-kind:hover, .dm-listing:hover, .dm-news:hover { border-color: var(--line-strong); }
.input:focus, input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* ------------------------------------------------------- AmbientBackdrop
   intensity: 1 homepage, 2 marketplace and listing, 3 dense working
   surfaces. A grid plus one masked sweep, never above 30 percent opacity,
   capped in height and masked to nothing before it reaches the content, so
   moving light never passes behind a paragraph or a table. First child of a
   positioned host; the content beside it is raised to z-index 1. */
.dm-amb {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--dm-amb-h, 400px);
  overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.dm-amb-1 { --dm-amb-h: 560px; }
.dm-amb-2 { --dm-amb-h: 400px; }
.dm-amb-3 { --dm-amb-h: 260px; }
.dm-amb::before {
  content: ""; position: absolute; top: -60px; left: 0; right: 0;
  height: calc(var(--dm-amb-h, 400px) + 120px);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: dm-drift 34s linear infinite;
}
.dm-amb-1::before { opacity: .5; }
.dm-amb-2::before { opacity: .34; }
.dm-amb-3::before { opacity: .22; }
.dm-amb::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 46%;
  background: linear-gradient(100deg, transparent,
    color-mix(in srgb, var(--accent) 9%, transparent) 45%,
    color-mix(in srgb, var(--blue-400) 6%, transparent) 62%, transparent);
  animation: dm-sweep 140s linear infinite; will-change: transform;
}
.dm-amb-1::after { opacity: .28; }
.dm-amb-2::after { opacity: .18; animation-duration: 165s; }
.dm-amb-3::after { opacity: .11; animation-duration: 190s; }
.dm-host { position: relative; }
.dm-above { position: relative; z-index: 1; }

@keyframes dm-sweep { from { transform: translateX(-45%); } to { transform: translateX(145%); } }
@keyframes dm-drift { from { transform: translateY(0); } to { transform: translateY(-56px); } }
@keyframes dm-settle { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes dm-shimmer { to { background-position: -200% 0; } }
@keyframes dm-prog { from { transform: translateX(-100%); } to { transform: translateX(400%); } }

/* Motion that carries meaning: a write in flight, and a write acknowledged. */
.dm-run { position: relative; height: 2px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.dm-run::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 26%;
  background: var(--accent); border-radius: 2px; animation: dm-prog 2.4s ease-in-out infinite; }
.dm-enter { animation: dm-settle .26s ease-out both; }
.dm-skel { border-radius: 9px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%; animation: dm-shimmer 1.6s linear infinite; }

/* Pausing costs nothing, because the band never carries information. */
body.dm-hidden .dm-amb::before,
body.dm-hidden .dm-amb::after,
body.dm-hidden .dm-run::after { animation-play-state: paused; }

/* Reduced motion removes ambient and decorative animation and keeps
   functional transitions only. The progress bar stays visible as a bar. */
@media (prefers-reduced-motion: reduce) {
  .dm-amb::before, .dm-amb::after, .dm-skel { animation: none; }
  .dm-amb { display: none; }
  .dm-run::after { animation: none; width: 100%; opacity: .5; }
  .dm-enter { animation: none; }
  .btn, .icon-btn, .facet, .catbar-item, .card, .row-card, .nav-item,
  .dm-btn, .dm-listing, .dm-news { transition: none; }
}

/* ===================== The shared component vocabulary =====================
   One implementation each. Every state below carries a word; colour is only
   ever a second signal. The full state list lives in the handoff: Live, In
   build, Not available yet, Not supported, Not provided, Not connected, Not
   measured, Preview data, Loading, Refreshing, Saving, Saved, Save failed,
   Empty, Error, Disabled.
   ========================================================================= */

/* -------------------------------------------------------- StatusChip
   label plus tone: neutral, good, warn, err, accent. */
.dm-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); }
.dm-chip-good   { color: var(--good);   border-color: currentColor; }
.dm-chip-warn   { color: var(--warn);   border-color: currentColor; }
.dm-chip-err    { color: var(--err);    border-color: currentColor; }
.dm-chip-accent { color: var(--accent); border-color: currentColor; }
.dm-chip-neutral { color: var(--muted); border-color: var(--line-strong); }

/* -------------------------------------------------- PreviewDataLabel
   The single marker for a value the backend must replace. No props. It is
   never styled to look like a feature, and it never appears on a value that
   is already real. */
.dm-preview { display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); }

/* A real field with no value never disappears. */
.dm-notprovided { font-style: italic; color: var(--muted); }

/* ------------------------------------------------ VerifiedCompanyBadge
   state: none, pending, verified. Renders nothing at none. Attaches to a
   company, never to a person, and never to a featured partner. It owns its
   own disclosure text so the sentence cannot drift between pages. */
.dm-verified { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; border: 1px solid currentColor; color: var(--accent); }
.dm-verified-pending { color: var(--muted); border-color: var(--line-strong);
  text-transform: none; letter-spacing: 0; font-weight: 500; }
.dm-verified-none { display: none; }
.dm-verified svg { width: 11px; height: 11px; display: block; }

/* -------------------------------------------------- SaveStateIndicator
   idle, dirty, saving, saved, failed. Driven Blue on save, never green:
   green means a thing succeeded in the world, not that a field was written. */
.dm-save { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--muted); min-height: 20px; }
.dm-save-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.dm-save-idle   { color: var(--muted); }
.dm-save-dirty  { color: var(--text-2); }
.dm-save-saving { color: var(--accent); }
.dm-save-saved  { color: var(--accent); }
.dm-save-failed { color: var(--err); }
.dm-save-bar { width: 84px; }

/* -------------------------------------------------------- EmptyState
   A real query that returned no rows. Never used to stand in for something
   the backend cannot do yet: that is UnavailableState. */
.dm-empty { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 26px 22px; }
.dm-empty h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; }
.dm-empty p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 58ch; }
.dm-empty .dm-btn { margin-top: 16px; }

/* -------------------------------------------------- UnavailableState
   The interface exists and the backend does not. A dashed border is the one
   thing in this system that means not built yet. It states why, and what
   will connect. */
.dm-unavailable { border: 1px dashed var(--line-strong); border-radius: 11px;
  padding: 26px 22px; background: transparent; }
.dm-unavailable h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; }
.dm-unavailable p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 58ch; }
.dm-unavailable .dm-chip { margin-bottom: 10px; }
.dm-unavailable a { font-size: 13.5px; display: inline-block; margin-top: 14px; }

/* --------------------------------------------------- PermissionNotice
   role plus reason. Used where a control is rendered disabled rather than
   hidden, so an Editor understands why rather than wondering what is
   missing. Frontend visibility is never the security boundary. */
.dm-permission { display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--line); border-left: 3px solid var(--accent-border);
  border-radius: 8px; background: var(--surface-2); padding: 13px 15px; }
.dm-permission p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); max-width: 68ch; }
.dm-permission b { font-weight: 600; color: var(--text); }

/* ------------------------------------------------------- AgentScopeRow
   name plus level: reads, writes, never. Amber for writes is the one place
   in this system where colour carries meaning, so it is spelled out too. */
.dm-scope { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.dm-scope:last-child { border-bottom: 1px solid var(--line); }
.dm-scope-name { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.dm-scope-level { margin-left: auto; }
.dm-scope-reads  { color: var(--good); border-color: currentColor; }
.dm-scope-writes { color: var(--warn); border-color: currentColor; }
.dm-scope-never  { color: var(--muted); border-color: var(--line-strong); }

/* --------------------------------------------------------- ListingCard
   Shared by the marketplace grid, saved listings and the company views, so
   a listing looks the same everywhere it is seen. */
.dm-listing { display: flex; flex-direction: column; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; padding: 14px; text-decoration: none; color: inherit; }
.dm-listing:hover { text-decoration: none; }
.dm-listing-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dm-listing-mono { width: 34px; height: 34px; border-radius: 7px; flex: 0 0 auto; display: grid;
  place-items: center; background: var(--surface-3); color: var(--accent); font-size: 13px; font-weight: 600; }
.dm-listing-name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.dm-listing-by { margin: 0; font-size: 12.5px; color: var(--muted); display: flex;
  align-items: center; gap: 5px; flex-wrap: wrap; }
.dm-listing-desc { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.dm-listing-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.dm-listing-price { margin-left: auto; font-size: 13.5px; font-weight: 600;
  font-family: "Roboto Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.dm-listing-kind { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); background: var(--surface-2); }

/* ------------------------------------------------------ PassportSection
   One canonical Passport object in, every surface reading the same fields.
   An empty field renders the literal words Not provided in italic muted
   type. It never disappears, and it is never filled from another listing. */
.dm-passport { border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--surface); overflow: hidden; }
.dm-passport-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.dm-passport-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.dm-passport-body { padding: 18px; }
.dm-passport-facts { margin: 0; display: flex; flex-direction: column; }
.dm-fact { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--line); font-size: 13.5px; }
.dm-fact:last-child { border-bottom: 1px solid var(--line); }
.dm-fact dt { margin: 0; color: var(--muted); }
.dm-fact dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dm-passport-sub { margin: 20px 0 8px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* -------------------------------------------------------- CompanyHeader
   company plus the signed in role plus verification state. Used by the
   workspace and the agent surfaces. Role is never shown on a public
   community profile. */
.dm-company-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.dm-company-logo { width: 46px; height: 46px; border-radius: 10px; flex: 0 0 auto; display: grid;
  place-items: center; background: var(--surface-3); color: var(--accent); font-size: 17px;
  font-weight: 600; border: 1px solid var(--line); overflow: hidden; }
.dm-company-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-company-id { min-width: 0; }
.dm-company-id h1 { margin: 0; font-size: 22px; line-height: 1.2; }
.dm-company-slug { margin: 2px 0 0; font-size: 12.5px; color: var(--muted);
  font-family: "Roboto Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.dm-company-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------- ThemeControl
   light, dark, system. Device scoped and deliberately not synced, and it
   resyncs from data-theme so two controls on one page cannot disagree. */
.dm-theme { display: inline-flex; border: 1px solid var(--line); border-radius: 7px;
  overflow: hidden; background: var(--surface); }
.dm-theme button { appearance: none; border: 0; cursor: pointer; padding: 7px 11px;
  font-size: 12.5px; background: transparent; color: var(--muted); }
.dm-theme button + button { border-left: 1px solid var(--line); }
.dm-theme button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); font-weight: 600; }

/* -------------------------------------------------------- ButtonLoading
   idle, pending, done. Contextual, never a page spinner: the page stays
   readable while one button waits. */
.dm-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; font-size: 13.5px;
  font-weight: 500; background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; }
.dm-btn:hover { text-decoration: none; border-color: var(--line-strong); }
.dm-btn-primary { border-color: transparent; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.dm-btn-primary:hover { background: var(--accent-strong); }
.dm-btn-danger { border-color: var(--err); color: var(--err); background: var(--surface); }
.dm-btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; }
.dm-btn[disabled], .dm-btn[aria-disabled="true"] {
  background: var(--surface-2); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.dm-btn-primary[disabled] { background: var(--surface-2); color: var(--muted); }
.dm-btn-spin { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent; animation: dm-spin .7s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dm-btn-spin { animation: none; opacity: .5; } }

/* ------------------------------------------------------------- NewsCard
   source, headline, summary, timestamp and category as separate fields.
   Links out, never reprints. Nothing here is ranked by clicks. */
.dm-news { display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; padding: 15px 16px; }
.dm-news-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.dm-news-time { margin-left: auto; font-size: 12px; color: var(--muted);
  font-family: "Roboto Mono", ui-monospace, monospace; }
.dm-news h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.3; letter-spacing: -0.012em; text-wrap: pretty; }
.dm-news p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.dm-news-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.dm-news-source { font-size: 12px; color: var(--muted);
  font-family: "Roboto Mono", ui-monospace, monospace; min-width: 0; overflow-wrap: anywhere; }
.dm-news-open { margin-left: auto; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* -------------------------------------------------- PrimaryNav, MobileNav
   Marketplace, Community, Company. Company is hidden without a membership
   row. The mobile mechanics may differ per surface; the model and the
   wording may not. */
.dm-primary-nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.dm-primary-nav a { padding: 7px 11px; border-radius: 6px; font-size: 13.5px;
  color: var(--muted); text-decoration: none; }
.dm-primary-nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.dm-primary-nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); font-weight: 600; }
.dm-nav-mobile { display: none; }
@media (max-width: 720px) {
  .dm-primary-nav { display: none; }
  .dm-nav-mobile { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px; width: 100%; order: 3; padding-bottom: 8px; }
  .dm-nav-mobile a { text-align: center; padding: 8px 6px; border-radius: 7px; font-size: 13px;
    border: 1px solid var(--line); background: var(--surface); color: var(--text-2); text-decoration: none; }
  .dm-nav-mobile a[aria-current="page"] { color: var(--text); background: var(--surface-2); font-weight: 600; }
}

/* ------------------------------------------------------------ scaffolding
   No horizontal page scroll and no nested scrollbars, at any width from
   320px up. Wide content scrolls inside its own container. */
html, body { overflow-x: hidden; }
.dm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.dm-section { padding-top: 34px; border-top: 1px solid var(--line); margin-top: 44px; }
.dm-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.dm-more { margin-left: auto; font-size: 13.5px; }
.dm-grid { display: grid; gap: 12px; }
.dm-grid-listings { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.dm-grid-news { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }
.dm-grid-kinds { grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); }
.dm-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------- the handoff header shell
   Scoped to .dm-top so the marketplace, community and login headers keep
   the layout they already have. The header wraps at every width, which is
   what the design specified: the legacy .top-inner is a fixed 56px row that
   cannot wrap, and between roughly 761px and 820px that pushed the widest
   action groups past the viewport. Below 760px the actions take a row of
   their own, so the appearance control stays reachable on a phone. */
.dm-top .top-inner { gap: 8px 18px; flex-wrap: wrap; height: auto; min-height: 56px;
  padding-top: 8px; padding-bottom: 8px; }
.dm-top .top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto;
  flex-wrap: wrap; min-width: 0; }
@media (max-width: 760px) {
  .dm-top .top-inner { flex-wrap: wrap; height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .dm-top .top-actions { width: 100%; order: 4; margin-left: 0; flex-wrap: wrap; }
  .dm-top .top-actions .dm-btn { flex: 1 1 auto; }
}
@media (max-width: 360px) {
  .dm-top .dm-theme button { padding: 7px 8px; }
}

/* ====================== Account Settings, and the shapes
   the other working surfaces reuse ======================
   Personal settings and company administration never share a screen
   section, so the rail keeps them apart and the panels never mix. A user
   must never have to ask whether they are changing their account or their
   company. */

.s-who { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid var(--line); }
.s-who-mono { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-3); color: var(--accent);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.s-who-handle { font-size: 13px; color: var(--text-2);
  font-family: "Roboto Mono", ui-monospace, monospace; }

.s-rail { flex: 0 1 210px; min-width: 0; align-self: flex-start; position: sticky; top: 76px;
  display: flex; flex-direction: column; gap: 2px; }
.s-rail button { appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px;
  font-size: 13.5px; border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: background-color .14s ease, color .14s ease; }
.s-rail button:hover { color: var(--text); }
.s-rail button[aria-current="page"] { border-color: var(--line); background: var(--surface);
  color: var(--text); font-weight: 600; }
.s-rail button.s-rail-danger { color: var(--err); }
.s-rail-badge { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); }
.s-rail-badge-warn { color: var(--warn); }
.s-panels { flex: 999 1 min(100%, 520px); min-width: 0; padding-bottom: 26px; }
@media (max-width: 860px) {
  .s-rail { flex: 1 1 100%; position: static; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
}

.s-card { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); overflow: hidden; }
.s-cardhead { padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.s-row { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.s-row:last-child { border-bottom: 0; }
.s-row-split { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.s-label { display: block; font-size: 13px; font-weight: 500; margin: 0 0 7px; }
.s-help { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 8px 0 0; }
.s-mono { font-family: "Roboto Mono", ui-monospace, monospace; }
.s-at { font-family: "Roboto Mono", ui-monospace, monospace; font-size: 14px; color: var(--muted); }

.s-input { width: 100%; height: 38px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 14.5px; }
.s-area { width: 100%; min-height: 78px; padding: 10px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical; }
.s-input[disabled], .s-area[disabled] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.s-input.s-bad, .s-area.s-bad { border-color: var(--err); }

.s-rules { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.s-rules li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.s-rules li.s-met { color: var(--text-2); }
.s-rules li.s-unmet { color: var(--err); }
.s-mark { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.s-met .s-mark { background: var(--good); }
.s-unmet .s-mark { background: var(--err); }
.s-rule-word { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.s-met .s-rule-word { color: var(--good); }
.s-unmet .s-rule-word { color: var(--err); }

/* One switch, used by every boolean preference. The word beside it is not
   decoration: the state has to be readable without relying on colour. */
.s-switch { appearance: none; cursor: pointer; flex: 0 0 auto; width: 40px; height: 23px;
  border-radius: 999px; padding: 2px; border: 1px solid var(--line-strong);
  background: var(--surface-2); display: flex; justify-content: flex-start;
  transition: background-color .16s ease; }
.s-switch[aria-checked="true"] { border-color: var(--accent); background: var(--accent); justify-content: flex-end; }
.s-switch[disabled] { cursor: not-allowed; opacity: .6; }
.s-knob { display: block; width: 17px; height: 17px; border-radius: 50%; background: var(--line-strong); }
.s-switch[aria-checked="true"] .s-knob { background: var(--on-accent); }
.s-word { font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 26px; }
.s-word-on { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .s-switch { transition: none; } }

.s-themecard { appearance: none; cursor: pointer; text-align: left; display: flex;
  flex-direction: column; gap: 3px; padding: 13px 14px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg);
  transition: border-color .14s ease, background-color .14s ease; }
.s-themecard[aria-checked="true"] { border-color: var(--accent); background: var(--accent-subtle); }
.s-themecard-t { font-size: 14px; font-weight: 500; color: var(--text); }
.s-themecard .s-help { margin: 0; }
@media (prefers-reduced-motion: reduce) { .s-themecard { transition: none; } }

.s-provider { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-3);
  border: 1px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; color: var(--text-2); }

.s-deletes { list-style: none; margin: 0 0 20px; padding: 0; }
.s-deletes li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px;
  line-height: 1.6; color: var(--text-2); }
.s-deletes li:last-child { border-bottom: 1px solid var(--line); }

.s-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: var(--shadow); padding: 10px 16px; font-size: 13px; color: var(--text); max-width: calc(100vw - 32px); }

/* The company panel reuses the same card, and the branding preview shows a
   company's own colours on a listing without letting them repaint the
   marketplace around it. */
.s-fields { padding: 20px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.s-fields .s-full { grid-column: 1 / -1; }
.s-brandrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.s-swatch { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg); cursor: pointer; flex: 0 0 auto; }
.s-swatch[disabled] { cursor: not-allowed; opacity: .6; }
.s-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.s-table th { text-align: left; padding: 10px 12px 10px 0; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.s-table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.s-table .s-right { text-align: right; padding-right: 0; }

/* ------------------------------------------------ the community profile
   A rail that becomes a full width block before it becomes a column too
   narrow to read. Sticky only where there is room for it to be useful. */
.p-rail { flex: 0 1 268px; min-width: 0; align-self: flex-start; position: sticky; top: 76px; }
@media (max-width: 860px) { .p-rail { flex: 1 1 100%; position: static; } }

/* ======================= the company workspace =======================
   A wider shell than the marketing pages, because this is a working
   surface with a rail beside it. Below 940px the rail becomes a select:
   a horizontally scrolling strip would hide destinations behind a gesture
   nobody is told about, and squeezing seventeen areas into a row is what
   pushes a header past the viewport at 320px. */
.w-wrap { max-width: 1300px; margin: 0 auto; padding-left: 22px; padding-right: 22px; }
.w-rail { flex: 0 1 216px; min-width: 0; align-self: flex-start; position: sticky; top: 70px; }
.w-rail-label { margin: 0 0 7px 11px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
.w-rail-item { appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 8px;
  font-size: 13.5px; border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: background-color .14s ease, color .14s ease; }
.w-rail-live { color: var(--text-2); }
.w-rail-item:hover { color: var(--text); }
.w-rail-item[aria-current="page"] { border-color: var(--line); background: var(--surface);
  color: var(--text); font-weight: 600; }
/* 12px, not 10px. The workspace rail was never covered by the responsive
   audit, so this sat two pixels under the product's floor for running text on
   every width. The longest word it carries, "Not available yet", wraps to two
   lines in a 216px rail at this size, which is the right trade: a status the
   reader can actually read, over one that fits on one line. */
.w-rail-tag { margin-left: auto; font-size: 12px; font-weight: 600; line-height: 1.3;
  color: var(--muted); text-align: right; }
.w-rail-tag-build { color: var(--warn); }
.w-main { flex: 999 1 min(100%, 520px); min-width: 0; padding-bottom: 30px; }
.w-picker { display: none; flex: 1 1 100%; min-width: 0; }
@media (max-width: 940px) {
  .w-rail { display: none; }
  .w-picker { display: block; }
}
@media (prefers-reduced-motion: reduce) { .w-rail-item { transition: none; } }

/* The overview strip. Every cell is a real value or a stated absence, and
   none of them is a metric, because none is collected. */
.w-strip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 22px; }
.w-stat { background: var(--surface); padding: 14px 18px; flex: 1 1 150px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px; }
.w-stat-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.w-stat-v { font-size: 20px; font-weight: 600; line-height: 1.2; }
.w-stat-good { font-size: 15px; color: var(--good); }
.w-stat-muted { font-size: 15px; color: var(--muted); }

/* ------------------------------------------------ marketplace management
   Four areas, one listing at a time. The preview frame is deliberately
   loud: a buyer preview that could be mistaken for the live marketplace
   is the one screen in this product that must never be ambiguous. */
.m-rail { flex: 0 1 202px; min-width: 0; align-self: flex-start; position: sticky; top: 70px;
  display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 940px) {
  .m-rail { flex: 1 1 100%; position: static; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
}
.m-frame { border: 2px dashed var(--accent-border); border-radius: 13px;
  padding: 12px; background: var(--accent-subtle); }

/* ---------------------------------------------------- the agent workspace
   Tabs rather than a rail: five sections about one thing, not seventeen
   areas of a company. The strip wraps instead of scrolling sideways. */
.a-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.a-tab { appearance: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  border: 0; border-bottom: 2px solid transparent; background: none; padding: 9px 12px;
  font-size: 13.5px; color: var(--muted); margin-bottom: -1px;
  transition: color .14s ease, border-color .14s ease; }
.a-tab:hover { color: var(--text); }
.a-tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); font-weight: 600; }
.a-tab-tag { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.a-tab-tag-good { color: var(--good); }
.a-tab-tag-warn { color: var(--warn); }
.a-rail { flex: 0 1 286px; min-width: 0; align-self: flex-start; position: sticky; top: 70px; padding-bottom: 30px; }
@media (max-width: 940px) { .a-rail { flex: 1 1 100%; position: static; } }
@media (prefers-reduced-motion: reduce) { .a-tab { transition: none; } }

/* ========================= the legal pages =========================
   Privacy, Terms and Security carry legal copy that was written and
   reviewed as it stands, so the migration onto this design system
   changed the shell and not one word of the document.

   The copy still names the old token set inline. Rather than rewrite a
   few hundred inline styles inside a legal document, those names are
   mapped onto the current tokens here, so the text follows both themes
   and the wording stays exactly as approved. */
:root {
  --color-bg: var(--bg);
  --color-text: var(--text);
  --color-accent: var(--accent);
  --color-accent-2: var(--accent-strong);
  --color-surface: var(--surface);
  --color-section: var(--surface-2);
  --color-divider: var(--line);
  --color-neutral-100: var(--surface);
  --color-neutral-800: var(--text-2);
  --color-neutral-900: var(--text);
  --color-accent-100: var(--accent-subtle);
  --color-accent-200: var(--accent-border);
  --color-accent-300: var(--accent-border);
  --color-accent-800: var(--accent-strong);
  --color-accent-2-100: var(--accent-subtle);
  --color-accent-2-800: var(--accent-strong);
  --font-heading: "Inter Tight", Inter, system-ui, sans-serif;
  --font-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

.l-cols { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 22px 48px; padding-top: 26px; }
.l-doc { flex: 999 1 min(100%, 560px); min-width: 0; max-width: 760px; padding-bottom: 30px; }
.l-doc h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
.l-doc h2 { font-size: 22px; scroll-margin-top: 80px; }
.l-doc a { color: var(--accent); }

/* The contents rail. Sticky where there is room, a plain block above the
   document where there is not, and never a horizontally scrolling strip. */
.l-rail { flex: 0 1 220px; min-width: 0; align-self: flex-start; position: sticky; top: 76px;
  padding-bottom: 20px; }
.l-rail-title { margin: 0 0 10px 11px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.l-rail-links { display: flex; flex-direction: column; gap: 1px; }
.l-rail-links a { display: block; padding: 7px 11px; border-radius: 7px; font-size: 13px;
  line-height: 1.45; color: var(--muted); text-decoration: none;
  border: 1px solid transparent; transition: background-color .14s ease, color .14s ease; }
.l-rail-links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.l-rail-links a[aria-current="true"] { color: var(--text); background: var(--surface);
  border-color: var(--line); font-weight: 600; }
@media (max-width: 900px) {
  .l-rail { flex: 1 1 100%; position: static; order: -1; }
  .l-rail-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .l-rail-links a { transition: none; } }

/* One copy link per section. It is a real anchor, so it works with the
   script absent and it can be opened, middle clicked or dragged like any
   other link. The script only adds copying to the clipboard. */
.l-anchor { appearance: none; border: 0; background: none; cursor: pointer; padding: 2px 6px;
  margin-left: 8px; border-radius: 5px; font-size: 12px; color: var(--muted);
  text-decoration: none; opacity: 0; transition: opacity .14s ease, color .14s ease; }
.l-doc h2:hover .l-anchor,
.l-doc h2:focus-within .l-anchor,
.l-anchor:focus-visible { opacity: 1; }
.l-anchor:hover { color: var(--accent); }
.l-anchor-done { opacity: 1; color: var(--accent); }
@media (hover: none) { .l-anchor { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .l-anchor { transition: none; } }

/* -------------------------------------------- the legal document layer
   Draft copy is marked at the top of the document and cannot be missed.
   A legal page that reads as final when it has not been reviewed is a
   worse problem than an ugly banner. */
.l-draft { border: 1px solid var(--warn); border-left: 3px solid var(--warn);
  border-radius: 10px; background: var(--surface-2); padding: 15px 18px; margin: 0 0 30px; }
.l-draft-tag { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--warn); }
.l-draft p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-2); max-width: 64ch; }
.l-kicker { margin: 0 0 14px; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
.l-lede { font-size: 17px; line-height: 1.65; color: var(--text-2); margin: 0 0 10px; max-width: 62ch; }
.l-meta { font-size: 13.5px; color: var(--muted); margin: 0 0 40px; }
.l-doc p { font-size: 16px; line-height: 1.7; color: var(--text-2); margin: 0 0 14px; max-width: 68ch; }
.l-doc h2 { margin: 40px 0 12px; }
.l-list { margin: 0 0 16px; padding: 0; list-style: none; max-width: 68ch; }
.l-list li { position: relative; padding: 9px 0 9px 18px; border-top: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.l-list li:last-child { border-bottom: 1px solid var(--line); }
.l-list li::before { content: ""; position: absolute; left: 2px; top: 18px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-border); }
.l-mono { font-family: "Roboto Mono", ui-monospace, monospace; font-size: .92em;
  overflow-wrap: anywhere; }
/* A fact the code cannot answer. Visible, so it cannot ship unnoticed. */
.l-needs { display: inline-block; border: 1px dashed var(--line-strong); border-radius: 8px;
  padding: 10px 13px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------ company switcher
   Compact when the account belongs to one company, a real control when it
   belongs to more. Never rendered at zero, because there is nothing to
   switch between and an empty select is a puzzle, not a control. */
.dm-switch-host { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dm-company-logo-sm { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }
.dm-switch-single { min-width: 0; }
.dm-switch-name { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.dm-switch-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
.dm-switch { height: 32px; max-width: 220px; padding: 0 9px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13.5px; }
@media (max-width: 620px) {
  .dm-switch-host { width: 100%; order: 5; }
  .dm-switch { flex: 1 1 auto; max-width: none; }
}

/* --------------------------------------------------- keyboard focus rings
   Five legacy rules set `outline: none` on focused inputs and leave a low
   alpha box-shadow as the only indicator. Driving a real Tab through the
   homepage found the hero search focusing with no ring at all under that
   combination, which fails the visible-focus requirement.

   These restore the ring for keyboard focus only. :focus-visible does not
   match a mouse click, so pointer users keep the clean borderless field the
   original rules intended, and keyboard users get an indicator they can
   actually see. Same specificity as the rules above, later in the file. */
.top-search input:focus-visible,
.control select:focus-visible,
.control input:focus-visible,
.hero-search input:focus-visible,
.h-hero-search input:focus-visible,
.sim-field input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ------------------------------------------------ community author links
   An author who published a profile is a link to it. Someone who has not
   published one stays plain text, so the presence of a link is itself the
   signal that there is something to open. */
.cm-author { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-border); }
.cm-author:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------- interests
   A real checkbox under each chip: Tab and Space work without being
   reimplemented, and the label element gives every control its name. The
   selected state carries a mark as well as a colour, so it survives being
   read in greyscale. */
.s-interests-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.s-interest { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 13px 7px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-2); font-size: 13px;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease; }
.s-interest:hover { border-color: var(--line-strong); color: var(--text); }
.s-interest-on { border-color: var(--accent); background: var(--accent-subtle); color: var(--text); font-weight: 500; }
.s-interest-mark { font-size: 12px; line-height: 1; color: var(--muted); }
.s-interest-on .s-interest-mark { color: var(--accent); }
.s-interest:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-interest:has(input:disabled) { cursor: not-allowed; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .s-interest { transition: none; } }

/* The read-only chip on a profile. Same shape, no affordance. */
.p-interest { font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); }