:root {
      --bg: #efefe9;
      --bg-elevated: rgba(255, 255, 252, .82);
      --panel: rgba(250, 250, 247, .88);
      --panel-solid: #fafaf7;
      --ink: #171916;
      --muted: #70736d;
      --quiet: #a2a59e;
      --line: rgba(23, 25, 22, .11);
      --line-strong: rgba(23, 25, 22, .19);
      --shadow: 0 20px 60px rgba(27, 30, 24, .08);
      --blue: #477ff3;
      --red: #ea5865;
      --yellow: #eab93f;
      --green: #45a474;
      --purple: #8966cb;
      --all: #242823;
      --warning: #ca7d23;
      --danger: #c44f58;
      --success: #32845b;
      --radius-lg: 22px;
      --radius-md: 15px;
      --radius-sm: 10px;
      --header-h: 66px;
      font-synthesis-weight: none;
    }

    * { box-sizing: border-box; }

    html, body { height: 100%; }

    body {
      margin: 0;
      overflow: hidden;
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 2%, rgba(71, 127, 243, .06), transparent 26%),
        radial-gradient(circle at 92% 98%, rgba(137, 102, 203, .06), transparent 28%),
        var(--bg);
      font-family: var(--font-app);
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    button, input, select { font: inherit; color: inherit; }
    button { border: 0; }
    button, select { cursor: pointer; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    .app-shell { height: 100%; display: grid; grid-template-rows: var(--header-h) minmax(0, 1fr); }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 0 20px;
      border-bottom: 1px solid var(--line);
      background: rgba(239, 239, 233, .83);
      backdrop-filter: blur(24px) saturate(1.2);
      z-index: 20;
    }

    .brand { display: flex; align-items: center; gap: 13px; min-width: 0; text-decoration: none; }
    .brand-mark { display: grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:11px; overflow:visible; filter:var(--header-identity-shadow); }
    .brand-mark > svg, .brand-mark > img {display:block;width:100%;height:100%;overflow:visible}
    .brand-title {display:flex;align-items:center;gap:8px;line-height:1}
    .brand-name {font-size:var(--font-brand-name);font-weight:inherit;letter-spacing:-.045em}
    .brand-app {font-size:inherit;font-weight:400;letter-spacing:-.025em;line-height:1}
    .brand-copy { min-width: 0; }
    .brand-title { font-size:var(--font-small); font-weight: 760; letter-spacing: -.01em; white-space: nowrap; }
    .brand-subtitle { margin-top: 2px; font-size:var(--font-eyebrow); color: var(--muted); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }

    .top-actions { display: flex; align-items: center; gap: 7px; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 36px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(255,255,252,.72);
      color: inherit;
      font-size:var(--font-button);
      font-weight: 650;
      transition: .18s ease;
      user-select: none;
      text-decoration: none;
    }
    @media(hover:hover){.button:hover { border-color: var(--line-strong); background: #fff; }}
    .button.primary { border-color: var(--ink); background: var(--ink); color: #fff; }
    @media(hover:hover){.button.primary:hover { background: #292d28; }}
    .button.ghost { background: transparent; }
    .top-actions a[aria-current="page"] { border-color: var(--line-strong); background: var(--surface-active); }
    .button.icon-only { width: 36px; padding: 0; }
    .button.small { min-height: 30px; padding: 0 9px; font-size:var(--font-control); border-radius: 9px; }

    .icon { width: 16px; height: 16px; flex: 0 0 auto; display: inline-grid; place-items: center; line-height: 1; font-style: normal; }
    svg.icon { stroke-width: 1.6; }
    html[data-page="composer"] svg.icon:not(.cap-symbol *, .profile-toggle > .icon:first-child, .eyebrow *, .subpanel-title *, .composer-desktop-home .icon) { stroke-width: 2.5; }

    .workspace {
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(275px, 320px) minmax(480px, 1fr) minmax(330px, 390px);
      gap: 10px;
      padding: 10px;
    }
    @media(min-width:1151px) { .workspace { padding-top:0; } }

    .panel {
      min-width: 0;
      min-height: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--panel);
      box-shadow: 0 1px 0 rgba(255,255,255,.72) inset;
      backdrop-filter: blur(18px) saturate(1.05);
      overflow: hidden;
    }

    .catalog-panel { display: flex; flex-direction: column; }
    .catalog-panel > .panel-head { flex: none; }
    .panel-head { padding: 17px 17px 12px; }
    .panel-kicker { font-size:var(--font-eyebrow); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 720; }
    .panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .panel-title { margin: 0; font-size:var(--font-heading); letter-spacing: -.035em; font-weight: 730; }
    .kits-panel-title { display:inline-flex; align-items:center; gap:9px; }
    .kits-panel-title .icon { width:20px; height:20px; stroke-width:2; }
    .count-badge { min-width: 25px; height: 25px; padding: 0 7px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; font-size:var(--font-eyebrow); color: var(--muted); background: rgba(255,255,255,.58); }

    .catalog-controls { position: sticky; top: 0; z-index: 30; flex: none; padding: 0 12px 11px; display: grid; gap: 8px; }
    .catalog-filters { background: transparent; }
    @media(min-width:721px) {
      .catalog-panel > .panel-head { display: grid; grid-template-rows: 1fr; opacity: 1; overflow: hidden; transition: grid-template-rows 250ms ease,padding 250ms ease,opacity 200ms ease; }
      .catalog-panel > .panel-head > .panel-title-row { min-height: 0; overflow: hidden; }
      .catalog-panel.is-scrolled > .panel-head { grid-template-rows: 0fr; padding-block: 0; opacity: 0; }
      .catalog-controls { transition: padding-top 250ms ease; }
      .catalog-panel.is-scrolled > .catalog-controls { padding-top: 12px; }
    }
    .search-wrap { position: relative; }
    .search-wrap .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--quiet); pointer-events: none; }
    .search-input {
      width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.65); padding: 0 12px 0 35px; font-size:var(--font-small); outline: 0;
    }
    .search-input::placeholder { color: #999c96; }
    html:not([data-pointer-focus]) .search-input:focus-visible { background: #fff; border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(23,25,22,.04); }

    .segmented { display: grid; grid-template-columns:repeat(5,minmax(max-content,1fr));overflow-x:auto;scrollbar-width:none;gap:4px; padding: 3px; background: rgba(23,25,22,.055); border-radius: 11px; }
    .segment { min-width:0;height: 34px;padding:0 3px;line-height:1.3; border-radius: 8px; background: transparent; color: var(--muted); font-size:var(--font-eyebrow); font-weight: 700; white-space: nowrap; }
    @media(hover:hover){.segment:hover { color: var(--ink); }}
    .segment.active { background: rgba(255,255,255,.9); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.07); }

    .domain-filters { display: flex; align-items: center; gap: 5px; overflow: auto; padding-bottom: 1px; scrollbar-width: none; }
    .domain-filters::-webkit-scrollbar { display: none; }
    .domain-chip {
      height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size:var(--font-label); font-weight: 670; white-space: nowrap;
    }
    @media(hover:hover){.domain-chip:hover { background: rgba(255,255,255,.52); color: var(--ink); }}
    .domain-chip.active { border-color: var(--line); background: #fff; color: var(--ink); }
    .domain-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--domain-color, var(--ink)); box-shadow: 0 0 0 1px rgba(0,0,0,.05); }

    .catalog-list { flex: 1; min-height: 0; overflow: auto; padding: 7px 10px 18px; scroll-behavior: smooth; }
    .catalog-list, .capability-scroll, .detail-scroll { scrollbar-gutter:stable; scrollbar-width: thin; scrollbar-color: var(--bar-bg) transparent; }
    .catalog-list::-webkit-scrollbar, .capability-scroll::-webkit-scrollbar, .detail-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .catalog-list::-webkit-scrollbar-thumb, .capability-scroll::-webkit-scrollbar-thumb, .detail-scroll::-webkit-scrollbar-thumb { background: rgba(23,25,22,.10); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

    .group-label { display: flex; align-items: center; justify-content: space-between; padding: 12px 5px 7px; color: var(--muted); font-size:var(--font-label); font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
    .group-label span:last-child { color: var(--quiet); letter-spacing: 0; }

    .product-card {
      --accent: var(--all);
      position: relative;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) 28px;
      align-items: center;
      gap: 10px;
      min-height: 76px;
      padding: 8px 8px 8px 5px;
      margin: 0 0 6px;
      border: 1px solid transparent;
      border-radius: 15px;
      background: rgba(255,255,255,.3);
      cursor: pointer;
      transition: .17s ease;
    }
    @media(hover:hover){.product-card:hover { background: rgba(255,255,255,.72); border-color: var(--line); }}
    .product-card.active { background: rgba(255,255,255,.88); border-color: var(--line-strong); box-shadow: 0 9px 24px rgba(30,33,28,.06); }
    .product-card.selected::after { content: ""; position: absolute; inset: 7px auto 7px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
    .mini-iso { height: 58px; display: grid; place-items: center; overflow: hidden; }
    .mini-iso svg { width: 72px; height: 62px; overflow: visible; filter: drop-shadow(0 8px 9px rgba(0,0,0,.08)); }
    .card-copy { min-width: 0; }
    .card-name { font-size:var(--font-small); font-weight: 720; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); font-size:var(--font-note); white-space: nowrap; }
    .card-meta .divider { width: 2px; height: 2px; border-radius: 50%; background: var(--quiet); }
    .card-cap { margin-top: 5px; color: #4f534d; font-size:var(--font-note); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-action { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.65); color: var(--muted); transition: .15s ease; }
    @media(hover:hover){.card-action:hover { color: var(--ink); border-color: var(--line-strong); background: #fff; }}
    .product-card.selected .card-action { background: var(--ink); border-color: var(--ink); color: #fff; }
    .quantity-badge {position:absolute;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;font-size:var(--font-eyebrow);font-weight:600;font-variant-numeric:tabular-nums;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.12);pointer-events:none;z-index:2}
    .qty-pill {right:-2px;top:-2px}

    .empty-catalog { display: grid; place-items: center; min-height: 220px; padding: 30px; color: var(--muted); text-align: center; font-size:var(--font-small); }

    .detail-panel { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); }
    /* Overlay the scroller without changing its height or moving its contents. */
    .detail-summary {--summary-gap:10px;--summary-reveal:transform 220ms ease,clip-path 220ms ease,visibility 0s 220ms;position:absolute;inset:0 0 auto;z-index:6;display:grid;grid-template-columns:88px minmax(0,1fr) max-content;align-items:start;gap:var(--summary-gap);padding:12px 16px;background:var(--panel-solid);border-bottom:1px solid var(--line);visibility:hidden;pointer-events:none;transform:translateY(-12px);clip-path:inset(0 0 100%);transition:var(--summary-reveal)}
    .detail-summary.is-visible {--summary-reveal:transform 220ms ease,clip-path 220ms ease,visibility 0s;visibility:visible;pointer-events:auto;transform:translateY(0);clip-path:inset(-1px -1px -3px)}
    .detail-summary-eyebrow {display:flex;align-items:center;gap:6px;min-width:0}
    .detail-summary-eyebrow>.domain-dot {width:6px;height:6px;flex:0 0 6px}
    .detail-summary-art {min-height:72px;height:100%;align-self:stretch;position:relative;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden}
    .detail-summary-art svg {position:absolute;inset:0}
    .detail-summary-art svg {display:block;width:100%;height:100%}
    .detail-summary-art>.icon {inset:50% auto auto 50%;width:32px;height:32px;transform:translate(-50%,-50%);color:#303934}
    .detail-summary-identity {min-width:0}
    .detail-summary .eyebrow {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--font-micro);letter-spacing:.07em}
    .detail-summary-name {margin-top:3px;font-size:var(--font-body);font-weight:700;line-height:1.25;letter-spacing:-.035em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .detail-summary-metrics {display:flex;gap:10px;margin:6px 0 0;color:var(--muted)}
    .detail-summary-metrics dt {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .detail-summary-metrics dd {margin:0;font-size:var(--font-compact);line-height:1.3;white-space:nowrap}
    .detail-summary-metrics>div+div dd::before {content:"·";margin-right:var(--summary-gap)}
    .detail-summary-price {text-align:right;white-space:nowrap;font-size:var(--font-heading);font-weight:700;line-height:1.25;letter-spacing:-.035em}
    .detail-summary-items {display:block;margin-top:4px;color:var(--muted);font-size:var(--font-note);line-height:1.3}
    .detail-summary-top {position:absolute;inset:0;z-index:1;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
    .detail-summary-actions>.button {position:relative;z-index:2}
    .detail-summary-actions {display:grid;justify-items:end;align-self:end;gap:8px}
    .detail-summary-actions>.button {min-width:88px;min-height:34px;padding:0 10px;border-radius:7px;font-size:var(--font-control);white-space:nowrap}
    @media(min-width:721px){.detail-summary-actions {margin-left:var(--summary-gap)}}
    /* Give desktop compact summaries a clearer name and supporting details. */
    @media(min-width:1151px){
      .detail-summary-name {font-size:18px}
      .detail-summary-metrics dd {font-size:14px}
      .detail-summary-items {font-size:13px}
    }
    @container (width > 650px){.iso-stage {margin-top:24px}}
    @container (max-width:650px){
      .detail-summary {--summary-gap:7px;grid-template-columns:76px minmax(0,1fr) max-content;padding:10px 12px}
      .detail-summary-name {font-size:16px;line-height:1.2;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
      .detail-summary-metrics {gap:7px;margin-top:3px}
      .detail-summary-items {margin-top:2px}
    }
    @container (max-width:360px){
      .detail-summary {--summary-gap:5px;grid-template-columns:64px minmax(0,1fr) max-content;padding-inline:8px}
      .detail-summary-metrics {gap:5px}
      .detail-summary-metrics dd {font-size:var(--font-note)}
      .detail-summary-price {font-size:var(--font-lead)}
    }
    .detail-scroll { min-height: 0; overflow: auto; padding: 18px; }
    .detail-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 9px; }
    .crumb { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size:var(--font-eyebrow); font-weight: 650; }
    .crumb .domain-dot { width: 6px; height: 6px; }

    .hero {
      display: grid;
      grid-template-columns: minmax(245px,1.2fr) minmax(0,1.1fr);
      gap: 20px;
      align-items: center;
      min-height: 390px;
      padding: 12px 8px 21px;
      border-bottom: 1px solid var(--line);
    }
    .hero-copy { align-self: center; padding: 8px 0 8px 8px; }
    .eyebrow { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size:var(--font-eyebrow); font-weight: 750; text-transform: uppercase; letter-spacing: .105em; }
    .hero-copy > .eyebrow > svg.icon { width: 14px; height: 14px; stroke-width: 2.5; }
    .hero h1 { margin: 10px 0 10px; max-width: 520px; font-size:var(--font-display); line-height: .96; letter-spacing: -.065em; font-weight:var(--font-weight-product); }
    /* Outline the filled glyph silhouette, not its overlapping font contours.
       The shared filter keeps a 1px outer + 1px inner band, with a transparent
       interior. Real text, font metrics and theme ink stay intact; no font asset
       or background-colored fill is needed. Unsupported filters leave filled text. */
    .text-effect-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
    .hero h1 .product-kind { display: inline-block; color: var(--ink); letter-spacing: -.025em; filter: url(#product-kind-outline); }
    @media (forced-colors: active) {
      .hero h1 .product-kind { color: CanvasText; filter: none; }
    }
    .hero-description { max-width: 520px; margin: 0; color: #5f635d; font-size:var(--font-small); line-height: 1.55; }
    .hero-actions { display: flex; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
    .hero-actions .button { min-height: 40px; padding: 0 14px; }
    .quantity-control { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.58); overflow: hidden; }
    .qty-button { width: 34px; height: 100%; display: grid; place-items: center; background: transparent; color: var(--muted); }
    @media(hover:hover){.qty-button:hover { background: #fff; color: var(--ink); }}
    .qty-value { min-width: 46px; text-align: center; font-size:var(--font-control); font-weight: 730; }
    .auto-tag { margin-left: -2px; padding: 0 7px; color: var(--muted); font-size:var(--font-micro); text-transform: uppercase; letter-spacing: .07em; }

    .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
    .metric { min-width: 0; padding: 10px 14px 10px 8px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.42); }
    .metric-label { color: var(--muted); font-size:var(--font-micro); font-weight: 720; text-transform: uppercase; letter-spacing: .08em; }
    .metric-value { margin-top: 5px; font-size:var(--font-compact); font-weight:var(--font-weight-metric); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .iso-stage {
      position: relative;
      min-height: 360px;
      display: grid;
      place-items: center;
      border-radius: 25px;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 52% 72%, rgba(0,0,0,.06), transparent 42%),
        linear-gradient(150deg, rgba(255,255,255,.68), rgba(255,255,255,.18));
      box-shadow: inset 0 0 0 1px rgba(23,25,22,.06);
    }
    .iso-stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(23,25,22,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(23,25,22,.025) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 80%, transparent); pointer-events: none; }
    .iso-stage > svg { width: min(100%, 560px); height: 340px; overflow: visible; filter: drop-shadow(0 24px 25px rgba(28,31,26,.14)); }
    .occupancy-label { position: absolute; right: 15px; bottom: 13px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,252,.78); backdrop-filter: blur(10px); font-size:var(--font-label); color: var(--muted); }
    .occupancy-bar { width: 66px; height: 4px; border-radius: 99px; background: rgba(23,25,22,.10); overflow: hidden; }
    .occupancy-bar span { display: block; height: 100%; border-radius: inherit; background: var(--product-accent, var(--ink)); }

    .detail-body { --detail-section-gap:24px; padding: 20px 3px 25px; display: grid; gap: 17px; }
    .section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top:24px; }
    .section-title-row h2 { margin: 0; font-size:var(--font-body); letter-spacing: -.03em; }
    .section-caption { color: var(--muted); font-size:var(--font-eyebrow); }
    .detail-panel .section-caption { color: var(--muted); font-size:var(--font-control); }
    .effect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .purpose-content {display:grid;gap:6px}
    .button.purpose-toggle {display:none;min-height:49px}
    .effect-card { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.43); }
    .effect-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--effect-color, var(--ink)); background: color-mix(in srgb, var(--effect-color, var(--ink)) 10%, transparent); }
    .effect-mode { color: var(--muted); font-size:var(--font-micro); text-transform: uppercase; letter-spacing: .08em; font-weight: 760; }
    .effect-name { margin-top: 2px; font-size:var(--font-caption); font-weight: 690; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .subpanel { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.36); padding: 13px; }
    .subpanel-heading {display:flex;align-items:center;justify-content:flex-start;gap:10px}
    .subpanel-title { display: flex; align-items: center; gap: 7px; font-size:var(--font-small); font-weight: 760; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
    html[data-page="composer"] .subpanel-title svg.icon {width:20px;height:20px;stroke-width:2}
    /* Contents uses a stronger section heading and the same count badge as Plan. */
    .contents-heading {margin-bottom:28px;gap:12px;flex-wrap:wrap}
    .contents-heading .subpanel-title {font-size:var(--font-body);gap:9px;line-height:1.3}
    .contents-heading .contents-count {min-width:21px;height:21px;padding:0 6px;color:var(--ink);border-color:var(--ink);font-weight:600;white-space:nowrap}
    .contents-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }
    .content-chip { display:inline-flex;align-items:center;gap:5px;max-width:100%;padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.68); color: #555951; font-size:var(--font-note); line-height: 1.4; }
    .content-chip>.icon {width:16px;height:16px;flex:0 0 16px}
    .content-chip>svg[data-lucide="check"] {color:var(--green)}
    /* Desktop Contents uses the Details panel's available width, not the page
       viewport, so a resized workspace can show two or three full columns.
       Keep phone Contents as its original stacked list. */
    @media(min-width:721px) {
      .contents-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
      .contents-list .content-chip {width:100%;min-width:0;align-items:flex-start}
      .contents-list .content-chip>span {min-width:0;overflow-wrap:anywhere}
    }
    @container (min-width:740px) {
      .contents-list {grid-template-columns:repeat(3,minmax(0,1fr))}
    }
    .system-note { margin-top: 11px; color: #585c56; font-size:var(--font-small); line-height: 1.55; }
    .compat-list { display: grid; gap: 7px; margin-top: 11px; }
    .compat-row { display: grid; grid-template-columns: 21px minmax(0,1fr); gap: 7px; align-items: start; color: #555951; font-size:var(--font-caption); line-height: 1.45; }
    .compat-row .icon { margin-top: 1px; color: var(--muted); }
    .detail-notes .compat-row .icon {color:var(--warning)}

    .capability-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
    .scenario-panel { padding: 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.22); }
    .scenario-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 11px; }
    .scenario-title { font-size:var(--font-body); font-weight: 730; letter-spacing: -.03em; }
    .scenario-heading {display:flex;align-items:center;gap:9px;min-width:0}
    .foundation-count {display:none}
    @media(max-width:720px){
      .foundation-count {display:grid;flex:none;min-width:21px;height:21px;padding:0 5px;font-weight:600;color:var(--muted)}
      .foundation-count[data-empty="true"] {opacity:.48;background:transparent;color:var(--quiet)}
    }
    .scenario-actions { display: flex; gap: 5px; }
    .scenario-grid { display: grid; grid-template-columns: .72fr 1.25fr 1fr; gap: 6px; }
    .field { min-width: 0; }
    .field label,.profile-choices legend { margin: 0 0 5px 2px; }
    .field label,.profile-choices legend,.supplier-filter-label { display: block; color: var(--muted); font-size:var(--font-micro); font-weight: 740; letter-spacing: .08em; text-transform: uppercase; }
    .field-control { height: 36px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.64); overflow: hidden; }
    .field-control select { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 28px 0 10px; font-size:var(--font-eyebrow); font-weight: 650; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%); background-position: calc(100% - 13px) 15px, calc(100% - 9px) 15px; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
    .people-stepper { width: 100%; display: grid; grid-template-columns: 27px 1fr 27px; align-items: center; }
    .people-stepper button { height: 34px; background: transparent; color: var(--muted); }
    @media(hover:hover){.people-stepper button:hover { color: var(--ink); background: #fff; }}
    .people-count { text-align: center; font-size:var(--font-note); font-weight: 760; }
    .profile-row { margin-top: 7px; display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; align-items: end; }
    .profile-row .field-control { height: 34px; }

    .capability-scroll { min-height: 0; overflow: auto; padding: 11px 11px 18px; }
    .ledger-section { margin-bottom: 16px; }
    .ledger-heading { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 7px; color: var(--muted); font-size:var(--font-label); font-weight: 770; text-transform: uppercase; letter-spacing: .09em; }
    .ledger-heading .ledger-count { color: var(--quiet); letter-spacing: 0; }
    .cap-row {
      --cap-color: var(--all);
      position: relative;
      display: grid;
      grid-template-columns: 30px minmax(0,1fr) auto;
      column-gap: 9px;
      row-gap: 0;
      align-items: center;
      min-height: 52px;
      padding: 8px 8px 8px 7px;
      margin-bottom: 5px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(255,255,255,.42);
      transition: .15s ease;
      cursor: pointer;
    }
    @media(hover:hover){.cap-row:hover { background: rgba(255,255,255,.72); border-color: var(--line-strong); }}
    .cap-row.expanded { background: rgba(255,255,255,.78); }
    .cap-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--cap-color) 10%, transparent); color: var(--cap-color); }
    .cap-main { min-width: 0; }
    .cap-name { font-size:var(--font-caption); font-weight: 690; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cap-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); font-size:var(--font-label); }
    .state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--state-color, var(--quiet)); }
    .coverage-mini { width: 48px; height: 3px; border-radius: 99px; background: rgba(23,25,22,.09); overflow: hidden; }
    .coverage-mini span { display: block; width:100%; height: 100%; transform-origin:left center; border-radius: inherit; background: var(--state-color, var(--quiet)); }
    .relation-icons { display: flex; align-items: center; gap: 3px; }
    .relation-icon { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.56); color: var(--muted); }
    .relation-icon .icon { width: 12px; height: 12px; }
    .cap-expand {grid-column:1 / -1;color:var(--muted);font-size:var(--font-small);line-height:1.5;}
    .cap-expand-body {padding:10px 4px 4px 39px;}
    .cap-description {margin:0}
    .cap-needs {margin-top:8px}
    .cap-needs ul {margin:4px 0 0;padding-left:18px}
    .need-note strong,.cap-needs strong {font-weight:650}
    .source-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
    .source-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 7px; background: rgba(23,25,22,.05); color: #555951; }

    .need-row { cursor: default; border-style: dashed; background: rgba(196,79,88,.025); }
    @media(hover:hover){.need-row:hover { background: rgba(196,79,88,.05); }}
    .need-row .cap-symbol { background: rgba(196,79,88,.08); color: var(--danger); }
    .need-action { min-height: 32px; width:32px; justify-content:center; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size:var(--font-label); font-weight: 700; }
    @media(hover:hover){.need-action:hover { border-color: var(--line-strong); }}
    .need-note { margin-top: 4px; color: var(--muted); font-size:var(--font-note); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .empty-ledger { min-height: 150px; display: grid; place-items: center; padding: 25px; text-align: center; color: var(--quiet); font-size:var(--font-body); line-height: 1.6; }

    .summary-panel { border-top: 1px solid var(--line); padding: 10px; background: rgba(250,250,247,.91); backdrop-filter: blur(16px); }
    .summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
    .summary-cell { min-width: 0; padding: 8px 7px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.58); }
    .summary-label { color: var(--muted); font-size:var(--font-micro); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
    .summary-value { margin-top: 4px; font-size:var(--font-note); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .score-bar { height: 4px; margin-top: 5px; border-radius: 99px; background: rgba(23,25,22,.08); overflow: hidden; }
    .score-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--yellow), var(--green)); }

    dialog {
      width: min(720px, calc(100vw - 32px));
      max-height: calc(100vh - 40px);
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: 22px;
      background: #f9f9f5;
      color: var(--ink);
      box-shadow: 0 40px 120px rgba(0,0,0,.22);
      overflow: hidden;
    }
    dialog::backdrop { background: rgba(20,22,19,.34); backdrop-filter: blur(4px); }
    #clearPlanDialog {width:min(400px,calc(100% - 32px))}
    #clearPlanDialog .device-heading {margin-bottom:8px}
    #clearPlanDialog .clear-plan-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
    #clearPlanDialog .clear-plan-actions>.button {width:100%}
    #clearPlanDialog .clear-plan-export {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
    #clearPlanDialog .clear-plan-export p {margin:0}
    #clearPlanDialog .clear-plan-export>.button.small {border:0}
    .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
    .dialog-head h2 { margin: 0; font-size:var(--font-lead); letter-spacing: -.03em; }
    .dialog-body { padding: 18px; overflow: auto; max-height: calc(100vh - 120px); }
    .dialog-body p { margin: 0 0 13px; color: #555951; font-size:var(--font-body); line-height: 1.65; }

    .toast { position: fixed; z-index: 60; left: 50%; bottom: 22px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 9px 12px; border-radius: 11px; background: var(--ink); color: #fff; font-size:var(--font-small); font-weight: 650; box-shadow: 0 12px 38px rgba(0,0,0,.2); transition: .22s ease; }
    .toast.show { opacity: 1; transform: translate(-50%,0); }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
    }
    /* Composer surfaces: shared tokens keep both themes consistent. */
    :root {
      --surface: rgba(255,255,252,.72); --surface-soft: rgba(255,255,255,.40);
      --surface-hover:#fff; --surface-active:rgba(255,255,255,.9); --tint:rgba(23,25,22,.045);
      --bar-bg:rgba(23,25,22,.09); --header-bg:rgba(239,239,233,.87);
      --text-secondary:#5b635d; --primary-bg:#1e2823; --on-primary:#fff;
      --graph-grid:rgba(23,25,22,.035); --graph-shine:rgba(255,255,255,.7);
      --graph-low:rgba(255,255,255,.15); --focus-glow:rgba(69,164,116,.10);
      --spectrum:linear-gradient(115deg,var(--blue) 0%,var(--red) 25%,var(--yellow) 50%,var(--green) 75%,var(--purple) 100%);
      --spectrum-wash:linear-gradient(115deg,rgba(71,127,243,.10),rgba(234,88,101,.055) 25%,rgba(234,185,63,.07) 50%,rgba(69,164,116,.065) 75%,rgba(137,102,203,.11));
      color-scheme:light;
    }
    :root[data-theme="dark"] {
      --bg:#121816; --bg-elevated:rgba(30,39,34,.9); --panel:rgba(24,32,28,.95); --panel-solid:#18201c;
      --ink:#e8eee9; --muted:#99aba0; --quiet:#6a8073; --line:rgba(202,225,211,.105);
      --line-strong:rgba(202,225,211,.23); --shadow:0 20px 60px rgba(0,0,0,.22);
      --surface:rgba(42,55,47,.64); --surface-soft:rgba(37,48,42,.45); --surface-hover:#303e35;
      --surface-active:#2b3a30; --tint:rgba(177,204,188,.055); --bar-bg:rgba(202,225,211,.12);
      --header-bg:rgba(18,24,21,.91); --text-secondary:#afbeb3; --primary-bg:#dce9df; --on-primary:#15271b;
      --graph-grid:rgba(176,209,190,.045); --graph-shine:rgba(54,76,62,.24); --graph-low:rgba(20,32,24,.13);
      --success:#76bb93; --warning:#e6ad64; --danger:#ed9199; --all:#cad9cf;
      --blue:#7ba5ff; --red:#ef818d; --yellow:#e5c366; --green:#76bb93; --purple:#b799e9;
      color-scheme:dark;
    }
    .topbar {background:var(--header-bg)}
    .brand-title {font-size:var(--font-body);letter-spacing:-.035em}
    .brand-mark {width:36px;height:36px;border-radius:11px}
    .panel {box-shadow:inset 0 1px 0 var(--surface-soft)}
    .workspace {width:100%;max-width:1800px;margin-inline:auto;grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) minmax(350px, 400px)}
    .button {background:var(--surface)}
    @media(hover:hover){.button:hover {background:var(--surface-hover)}}
    .button.primary {background:var(--primary-bg);border-color:var(--primary-bg);color:var(--on-primary)}
    @media(hover:hover){.button.primary:hover {background:var(--primary-bg);filter:brightness(1.12)}}
    .button.ghost {background:transparent}
    @media(hover:hover){.button.ghost:hover {background:var(--surface-soft)}}
    .button.spectrum-selected,.card-action.spectrum-selected {
      border:2px solid transparent !important;
      background:var(--spectrum-wash) padding-box,linear-gradient(125deg,#24312d,#242932) padding-box,var(--spectrum) border-box !important;
      color:#f5fff7 !important;
      box-shadow:inset 0 -3px 12px rgba(137,102,203,.16),0 2px 9px rgba(71,127,243,.12);
    }
    @media(hover:hover){.button.spectrum-selected:hover,.card-action.spectrum-selected:hover {box-shadow:inset 0 -5px 16px rgba(69,164,116,.20),0 3px 12px rgba(137,102,203,.2);filter:brightness(1.15)}}
    .button.spectrum-selected .icon {color:#b2e5ce}
    .count-badge,.search-input,.field-control,.quantity-control,.occupancy-label {background:var(--surface)}
    html:not([data-pointer-focus]) .search-input:focus-visible {background:var(--surface-hover)}
    @media(hover:hover){.qty-button:hover {background:var(--surface-hover)}}
    .search-input::placeholder {color:var(--quiet)}
    .segmented {background:var(--tint)}
    .segment.active,.domain-chip.active {background:var(--surface-active)}
    @media(hover:hover){.domain-chip:hover {background:var(--surface-soft)}}
    .domain-filters {justify-content:space-between;gap:0}
    .domain-chip {padding:0 6px;font-size:var(--font-label);gap:4px}
    .product-card {background:var(--surface-soft);grid-template-columns:60px minmax(0,1fr) 28px;column-gap:20px;row-gap:12px}
    @media(hover:hover){.product-card:hover,.cap-row:hover {background:var(--surface);}}
    .product-card.active {background:var(--surface-active);box-shadow:0 4px 16px rgba(0,0,0,.045)}
    .product-card.selected::after {background:var(--accent)}
    .product-card.selected[data-product^="spectrum-"]::after {background:linear-gradient(to bottom,#477ff3,#ea5865,#eab93f,#45a474,#8966cb)}
    .card-cap,.hero-description,.system-note,.compat-row,.content-chip,.source-chip,.dialog-body p {color:var(--text-secondary)}
    .card-action {background:var(--surface);color:var(--muted)}
    @media(hover:hover){.card-action:hover {background:var(--surface-hover)}}
    .mini-iso {height:60px;overflow:visible}
    .mini-iso svg {width:76px;height:66px;filter:none;overflow:visible}
    .group-label {font-size:var(--font-label);letter-spacing:.08em;gap:8px}
    .group-name {display:inline-flex;align-items:center;gap:6px;min-width:0}
    .group-name .icon {width:12px;height:12px;color:var(--group-color)}
    .group-name .integrated-group-icon {color:var(--ink);filter:none}
    .detail-panel {container-type:inline-size}
    .detail-scroll {padding:18px}
    .detail-topline {margin-bottom:0;min-height:22px}
    .hero {grid-template-columns:minmax(245px,1.2fr) minmax(0,1.1fr);min-height:375px;gap:14px;padding:9px 0 21px}
    .hero h1 {font-size:var(--font-display);line-height:1.01;overflow-wrap:normal}
    .hero-copy {padding:8px 0 8px 3px}
    .hero-description {font-size:var(--font-small);line-height:1.55}
    .hero-actions {margin-top:24px}
    .hero-actions .button {min-width:170px}
    .metric {background:var(--surface-soft);padding:10px 14px 10px 8px}
    .metric-grid {grid-template-columns:1fr 1fr;gap:6px}
    .metric:last-child {grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;gap:5px}
    .metric:last-child .metric-value {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:2px 10px;margin:0;white-space:normal;text-align:left}
    .metric-value {font-size:var(--font-heading)}
    /* Price sits at right; Weight and Dimensions remain left-aligned. */
    .hero .metric:first-child :is(.metric-label,.metric-value) {text-align:right}
    .hero .metric:first-child .metric-value {font-size:var(--font-title)}
    .hero .metric:nth-child(2) :is(.metric-label,.metric-value),
    .hero .metric:last-child :is(.metric-label,.metric-value) {text-align:left}
    /* Keep Weight left and Price right in the desktop two-column Details layout too. */
    .hero .metric:first-child {grid-column:2;grid-row:1}
    .hero .metric:nth-child(2) {grid-column:1;grid-row:1}
    @media(min-width:721px){.hero .metric:not(:first-child) .metric-value {font-size:var(--font-body)}}
    .metric-capacity {white-space:nowrap}
    .metric-measurements {font-size:var(--font-caption);font-weight:400;line-height:1.5}
    .iso-stage {min-height:340px;background:linear-gradient(145deg,var(--graph-shine),var(--graph-low));border:1px solid var(--line);box-shadow:none;overflow:hidden;isolation:isolate}
    .iso-stage::before {background-image:linear-gradient(var(--graph-grid) 1px,transparent 1px),linear-gradient(90deg,var(--graph-grid) 1px,transparent 1px);background-size:24px 24px;opacity:.8}
    .iso-stage > svg {width:100%;height:310px;animation:none;filter:none;overflow:visible;position:relative;margin:0 0 13px}
    .iso-topline {position:absolute;left:14px;right:14px;top:13px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:var(--font-eyebrow);font-weight:500;letter-spacing:.09em;text-transform:uppercase;z-index:2;pointer-events:none}
    .iso-topline>span:last-child {font-size:var(--font-caption);font-weight:550;color:var(--ink)}
    .iso-topline .icon {width:15px;height:15px;display:block;margin:0;position:static;align-self:center}
    .form-tag {display:inline-flex;align-items:center;gap:5px;line-height:15px}
    .occupancy-label {font-size:var(--font-label);right:12px;bottom:12px;padding:6px 8px}
    .occupancy-bar {background:var(--bar-bg);width:51px}
    .effect-card,.subpanel,.summary-cell,.cap-row,.legend-card {background:var(--surface-soft)}
    .effect-card {gap:7px;padding:9px}
    .effect-icon {width:29px;height:29px;border-radius:9px}
    .effect-grid {gap:6px}
    .content-chip {background:var(--surface)}
    .capability-panel {grid-template-rows:auto minmax(0,1fr) auto auto}
    .scenario-panel {background:var(--surface-soft);padding:14px}
    .profile-row {margin-top:9px}
    .capability-scroll {padding:12px 10px 14px;scroll-behavior:smooth;overflow-anchor:none}
    .cap-row {min-height:50px;position:relative}
    .cap-row.expanded {background:var(--surface-active)}
    .cap-row.contributed {border-color:color-mix(in srgb,var(--cap-color) 10%,var(--line));background:color-mix(in srgb,var(--cap-color) 7%,var(--panel-solid));box-shadow:inset 2px 0 0 var(--cap-color)}
    .cap-row.contributed .cap-name {color:var(--ink)}
    .cap-row:focus-visible {outline-offset:-2px}
    .cap-name[title] {cursor:inherit}
    .relation-icons {gap:2px;max-width:102px;flex-wrap:wrap;justify-content:flex-end}
    .relation-icon {width:18px;height:20px;border-radius:6px;background:var(--surface);border-color:var(--line)}
    .relation-icon .icon {width:11px;height:11px}
    .relation-icon .icon,.effect-icon .icon,.legend-icon .icon {stroke-width:2.25}
    .coverage-mini,.score-bar {background:var(--bar-bg)}
    .source-chip {background:var(--tint);border:1px solid transparent;font-size:var(--font-control);cursor:pointer;text-align:left}
    .source-chip.focused-source {border-color:var(--line-strong);color:var(--ink);background:var(--surface-hover)}
    @media(hover:hover){.source-chip:hover {background:var(--surface-hover)}}
    .need-row {background:color-mix(in srgb,var(--danger) 3%,var(--panel-solid));grid-template-columns:30px minmax(0,1fr) auto}
    @media(hover:hover){.need-row:hover {background:color-mix(in srgb,var(--danger) 5%,var(--panel-solid))}}
    .need-action {background:var(--surface)}
    .need-action .icon {width:18px;height:18px}
    .empty-ledger {min-height:100px;padding:19px 25px}
    .ledger-heading {font-size:var(--font-label);letter-spacing:.08em}
    .ledger-heading .ledger-count {font-size:var(--font-label)}
    .recommended {--card-surface:color-mix(in srgb,var(--purple) 5%,var(--panel-solid));margin:0 0 16px;padding:8px 6px 6px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card-surface)}
    .recommend-head {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;width:100%;min-height:24px;padding:2px 3px;border-radius:6px;background:transparent;text-align:left;color:var(--ink);transition:background 150ms ease}
    @media(hover:hover){.recommend-head:hover {background:var(--surface-soft)}}
    .recommend-chevron {width:13px;height:13px;color:var(--muted);transition:transform 350ms cubic-bezier(.2,.7,.2,1)}
    .recommend-head[aria-expanded="false"] .recommend-chevron {transform:rotate(-90deg)}
    .recommend-list {padding-top:9px}
    @media(prefers-reduced-motion:reduce){.recommended,.recommend-head,.recommend-chevron {transition:none}}
    .recommend-title {display:flex;gap:6px;align-items:center;font-weight:750;font-size:var(--font-control);letter-spacing:-.01em}
    .recommend-title .icon {width:14px;height:14px;color:var(--purple)}
    .recommend-clear {display:flex;align-items:center;gap:7px;font-size:var(--font-small);color:var(--success);padding:12px 4px}
    .selection-tray {min-width:0;border-top:1px solid var(--line);padding:0 10px;background:var(--panel-solid)}
    .tray-scroll {display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:7px 7px 7px 0;min-height:64px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;overscroll-behavior-x:contain}
    .tray-item {flex:0 0 48px;width:48px;height:48px;position:relative;transition:opacity .18s ease}
    .tray-item.is-muted {opacity:.5}
    @media(hover:hover){.tray-item.is-muted:hover {opacity:.75}}
    .tray-item.is-muted:has(:focus-visible) {opacity:1}
    @media(prefers-reduced-motion:reduce) {.tray-item {transition:none}}
    .tray-thumb {width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:12px;background:var(--surface-soft);padding:0;overflow:hidden;cursor:pointer;transition:.16s ease}
    .tray-thumb > .product-iso {display:block;flex:none;width:54px;height:49px;pointer-events:none}
    @media(hover:hover){.tray-thumb:hover {background:var(--surface-hover);border-color:var(--line-strong)}}
    .tray-thumb.is-focused {background:var(--spectrum-wash) padding-box,linear-gradient(var(--panel-solid),var(--panel-solid)) padding-box,var(--spectrum) border-box;border:2px solid transparent;box-shadow:0 2px 10px rgba(71,127,243,.10)}
    .tray-quantity {left:-5px;top:-5px}
    .tray-remove {position:absolute;right:-4px;top:-5px;width:19px;height:19px;display:grid;place-items:center;padding:0;border:1px solid var(--line-strong);border-radius:50%;color:var(--ink);background:var(--surface-hover);box-shadow:0 2px 6px rgba(0,0,0,.12);opacity:0;pointer-events:none;transform:scale(.82);transition:.14s ease;z-index:2}
    .tray-remove .icon {width:11px;height:11px}
    @media(hover:hover){.tray-item:has(:focus-visible) .tray-remove,.tray-item:hover .tray-remove {opacity:1;transform:scale(1);pointer-events:auto}}
    @media(hover:hover){.tray-remove:hover {color:var(--danger);border-color:var(--danger)}}
    .tray-empty {height:46px;display:flex;align-items:center;justify-content:center;width:100%;color:var(--quiet);font-size:var(--font-eyebrow);border:1px dashed var(--line);border-radius:12px;gap:7px}
    .tray-empty .icon {width:14px;height:14px}
    .summary-panel {background:var(--panel-solid);padding:9px 11px 11px}
    .summary-cell {padding:8px 6px;border-radius:10px}
    .summary-label {font-size:var(--font-micro);letter-spacing:.07em}
    .summary-value {font-size:var(--font-note)}
    .product-tooltip {position:fixed;z-index:90;max-width:270px;width:max-content;border-radius:13px;padding:12px 14px;border:1px solid var(--line-strong);box-shadow:var(--shadow);background:var(--panel-solid);color:var(--ink);pointer-events:none;visibility:hidden;opacity:0;transition:opacity .12s ease}
    .product-tooltip.is-visible {visibility:visible;opacity:1}
    .tooltip-name {font-size:var(--font-compact);font-weight:750;letter-spacing:-.02em}
    .tooltip-sub {font-size:var(--font-caption);color:var(--muted);margin:4px 0 9px}
    .tooltip-metrics {display:grid;grid-template-columns:auto auto;gap:5px 17px;font-size:var(--font-label);font-variant-numeric:tabular-nums}
    .tooltip-metrics span:nth-child(odd){color:var(--muted)}
    .tooltip-metrics span:nth-child(even){text-align:right}
    .tooltip-note {margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:var(--font-caption);color:var(--muted)}
    dialog {background:var(--panel-solid)}
    .legend-icon {background:var(--tint)}
    .toast {background:var(--primary-bg);color:var(--on-primary)}
    .catalog-list::-webkit-scrollbar-thumb,.capability-scroll::-webkit-scrollbar-thumb,.detail-scroll::-webkit-scrollbar-thumb {background-color:var(--bar-bg)}
    @container (max-width:650px){
      .hero {grid-template-columns:1fr;gap:13px;padding-top:10px}
      .effect-grid {grid-template-columns:minmax(0,1fr)}
      .effect-grid:not(.is-expanded)>.effect-card:nth-child(n+7) {display:none}
      .button.purpose-toggle {display:flex;width:100%}
      .hero-copy {order:2;padding:4px 3px 0}
      .iso-stage {order:1;min-height:300px}
      .iso-stage > svg {height:280px}
      .hero h1 {font-size:var(--font-display-compact);max-width:none}
    }
    @media(min-width:1800px){.iso-stage {min-height:400px}.iso-stage > svg {height:370px}.hero {min-height:435px}}
    @media(max-width:1150px){
      body {overflow:auto}.app-shell {height:auto;min-height:100dvh}.topbar {min-height:66px;position:sticky;top:0}
      .workspace {grid-template-columns:270px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
      .catalog-panel,.detail-panel {min-height:0}.capability-panel {grid-column:1/-1;min-height:0}
      .scenario-grid {grid-template-columns:100px 1fr 1fr}.profile-row {grid-template-columns:minmax(0,1fr)}
      .recommended {max-width:none}.recommend-list {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:6px}
    }
    @media(max-width:720px){
      .workspace {display:flex;flex-direction:column;padding:7px;gap:9px}.topbar {padding:0 10px;gap:8px}
      .brand-title {font-size:var(--font-small);gap:6px}.brand {gap:7px}.brand-mark {width:30px;height:30px;border-radius:9px}.top-actions {gap:4px}
      .top-actions .button {width:31px;min-height:32px;padding:0}.top-actions .label {display:none}
      .panel {margin:0}.catalog-panel {height:520px;min-height:520px;max-height:520px}
      .detail-panel {min-height:0}.detail-scroll {overflow:visible;padding:14px}
      .scenario-grid {grid-template-columns:75px minmax(0,1fr) minmax(0,1fr)}
      .scenario-grid .field:last-child {grid-column:auto}.field-control select {font-size:var(--font-label);padding-left:7px}.people-stepper {grid-template-columns:24px 1fr 24px}
      .hero-actions>.button {width:100%;min-height:44px}
      .detail-summary-actions>.button {min-height:34px}
      .hero h1 {font-size:var(--font-display)}.hero .metric-grid {grid-template-columns:1fr 1fr}.hero .metric:first-child {grid-column:2;grid-row:1}.hero .metric:nth-child(2) {grid-column:1;grid-row:1}.hero .metric:last-child {grid-column:1/-1;display:flex}
      .hero .metric:last-child .metric-value {margin-top:0;justify-content:flex-start}
      .summary-grid {grid-template-columns:repeat(4,minmax(0,1fr))}.summary-value {font-size:var(--font-eyebrow)}.summary-label {font-size:var(--font-micro);letter-spacing:0}
      .recommend-list {display:block}
    }
    /* Touch layouts expose Remove only on the currently selected tray thumbnail. */
@media(hover:none){.tray-item:has(.tray-thumb.is-focused) .tray-remove {opacity:1;transform:none;pointer-events:auto}}

    .quantity-badge[data-quantity-product^="spectrum-"] {background:var(--primary-bg);color:var(--on-primary)}
    button:disabled {opacity:.36;cursor:not-allowed;transform:none !important}
    .product-tooltip {border-color:var(--line-strong)}
    .card-action .icon,.qty-button .icon,.people-stepper .icon {display:block;margin:0}
    .qty-button,.people-stepper button {padding:0;display:grid;place-items:center;line-height:1}
    [hidden] {display:none !important}
    .cap-row {transition:opacity .18s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
    .capability-scroll.has-product-focus .cap-row:not(.contributed):not(.expanded) {opacity:.5}
    @media(hover:hover){.capability-scroll.has-product-focus .cap-row:not(.contributed):not(.expanded):hover {opacity:.75}}
    .capability-scroll.has-product-focus .cap-row:focus-visible,.capability-scroll.has-product-focus .cap-row:has(:focus-visible) {opacity:1}
    .need-row {cursor:pointer}
    .need-row.expanded .need-note {white-space:normal}
    .select-trigger {display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;height:100%;border:0;border-radius:inherit;padding:0 10px;background:transparent;text-align:left;font-size:var(--font-control);font-weight:650;min-width:0}
    .select-value {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .select-trigger .icon {width:13px;height:13px;display:block;color:var(--muted);transition:transform .16s ease}
    .select-trigger[aria-expanded="true"] .icon {transform:rotate(180deg)}
    .select-field {transition:border-color .15s ease,box-shadow .15s ease}
    @media(hover:hover){.select-field:hover {border-color:var(--line-strong)}}
    html:not([data-pointer-focus]) .select-field:has(:focus-visible) {border-color:var(--line-strong);box-shadow:0 0 0 2px var(--focus-glow)}
    .select-trigger:focus-visible {outline:2px solid var(--line-strong);outline-offset:-3px}
    .select-menu {position:fixed;z-index:100;overflow:auto;overscroll-behavior:contain;padding:5px;border:1px solid var(--line-strong);border-radius:13px;background:var(--panel-solid);color:var(--ink);box-shadow:0 8px 30px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.06);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
    .select-option {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:35px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:var(--font-control);line-height:1.3;color:var(--text-secondary);transition:background .12s ease}
    .select-option[aria-selected="true"] {color:var(--ink);font-weight:680}
    .select-option.is-active {background:var(--surface-active);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
    .select-option .icon {width:13px;height:13px;color:var(--green);opacity:0;stroke-width:2.25}
    .select-option[aria-selected="true"] .icon {opacity:1}
    @media(max-width:720px){.select-trigger {font-size:var(--font-control);padding:0 7px;gap:3px}.select-option {min-height:40px}}
    @media(forced-colors:active){.select-option.is-active {outline:1px solid Highlight}.select-option[aria-selected="true"] {color:Highlight}.button.spectrum-selected,.card-action.spectrum-selected,.tray-thumb.is-focused {border-color:Highlight !important}}

/* Foundation editor. Item tokens flow to embedded controls in both themes. */
.profile-row {position:relative;z-index:1;display:block;margin-top:0;min-width:0}
.profile-toggle {display:flex;align-items:flex-start;gap:14px;width:100%;padding:12px 15px;background:transparent;color:var(--muted);text-align:left;font-size:var(--font-caption);line-height:1.5;transition:background-color .2s ease, color .2s ease}
@media(hover:hover){.profile-toggle:hover {color:var(--ink)}}
.profile-toggle[aria-expanded="true"] {background:rgba(0,0,0,.035)}
.profile-toggle #profileLabel {flex:1;min-width:0}
.profile-toggle #profileLabel>span {display:block}
.profile-toggle #profileLabel>.profile-facts {display:flex;flex-wrap:wrap;gap:4px}
.profile-facts>span,.profile-toggle #profileLabel>.profile-assumptions {display:inline-flex;align-items:center;gap:4px;padding:2px 5px;border:1px solid var(--line);border-radius:5px}
/* Profile facts and selected assumptions use normal ink contrast; the default stays quiet. */
.profile-facts>span,.profile-assumptions:not(.is-unassumed) {color:var(--ink)}
.profile-facts .icon {width:11px;height:11px}
.profile-counter-label {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.profile-toggle>.icon:first-child {width:23px;height:23px;flex:none}
.profile-assumptions {font-size:var(--font-note);margin-top:5px;color:var(--text-secondary)}
.profile-assumptions.is-unassumed {color:var(--muted)}
.profile-assumptions > .icon {width:1em;height:1em}
.profile-action-icon {display:flex;flex:none;margin-top:3px}
.profile-action-icon .icon {width:13px;height:13px}
#profileOptions {padding:15px}
.profile-choices {border:0;padding:0;margin:12px 0 0;min-width:0}
.profile-choices legend {padding:0}
#profileOptions .field > label,.profile-choices legend {display:flex;align-items:center;gap:5px}
#profileOptions .field > label .icon,.profile-choices legend .icon {width:11px;height:11px}
#profileChoices {display:flex;flex-direction:column;gap:6px}
.profile-choice {display:flex;gap:6px;align-items:flex-start;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);cursor:pointer;font-size:var(--font-small)}
.profile-choice:has(input:checked) {border-color:var(--line-strong);background:var(--surface-active)}
.profile-choice input {width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.profile-choice strong {font-weight:600;line-height:1.45;display:flex;align-items:center;gap:6px}
.profile-choice strong .icon {width:1em;height:1em}
.profile-choice small {display:block;font-size:var(--font-compact);color:var(--muted);line-height:1.45;margin-top:3px}
.capability-tabs {position:relative;z-index:2;display:flex;gap:0;padding:0;border-bottom:1px solid var(--line);background:var(--panel-solid);box-shadow:none;transition:box-shadow .2s}
.capability-tabs button {position:relative;display:flex;flex:1;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:44px;padding:10px 9px;border-radius:0;border:0;background:color-mix(in srgb,var(--ink) 5%,var(--panel-solid));color:var(--muted);font-size:var(--font-control);box-shadow:none}
.capability-tabs button[aria-selected="true"] {background:var(--surface-soft);color:var(--ink)}
.capability-tabs button[aria-selected="false"] + button[aria-selected="false"]::before {content:"";position:absolute;inset:10px auto 10px 0;width:1px;background:var(--line)}
.capability-tabs button:focus-visible {outline-offset:-3px}
.capability-tabs [data-capability-tab="hidden"] {flex:0 0 44px;padding-inline:0}
.capability-tabs .icon {width:15px;height:15px}
.cap-row {--item-bg:var(--surface-soft);--item-ink:var(--ink);--item-muted:var(--muted);--item-border:var(--line);background:var(--item-bg);border-color:var(--item-border)}
.cap-row.expanded {--item-bg:var(--surface-active)}
@media(hover:hover){.cap-row:hover {--item-bg:var(--surface)}}
.cap-row.need-row {--item-bg:color-mix(in srgb,var(--danger) 3%,var(--panel-solid));background:var(--item-bg)}
@media(hover:hover){.cap-row.need-row:hover {--item-bg:color-mix(in srgb,var(--danger) 5%,var(--panel-solid));background:var(--item-bg)}}
.cap-row.contributed {--item-bg:color-mix(in srgb,var(--cap-color) 7%,var(--panel-solid));--item-border:color-mix(in srgb,var(--cap-color) 10%,var(--line));background:var(--item-bg);border-color:var(--item-border)}
.cap-row .cap-symbol {background:transparent;color:var(--cap-color);align-self:start;place-items:center}
.cap-row .cap-symbol .icon {width:22px;height:22px;max-width:22px;max-height:22px}
.cap-row[data-coverage="zero"] .cap-symbol {filter:grayscale(1);color:var(--muted)}
.cap-row[data-coverage="full"] .cap-symbol {color:var(--cap-color);filter:none}
.cap-row.partially-solved .cap-symbol {color:var(--cap-color);filter:none}
.cap-actions {position:relative;display:flex;align-items:flex-start;align-self:start;gap:5px}
.relation-icons {flex-direction:row-reverse;justify-content:flex-start;max-width:62px}
.cap-relation-ghost {position:absolute;top:0;display:flex;flex-direction:row-reverse;justify-content:flex-start;pointer-events:none;z-index:1}
.cap-row :is(button,.relation-icon) {background:var(--item-bg);color:var(--item-muted);border-color:var(--item-border)}
@media(hover:hover){.cap-row :is(button,.relation-icon):hover {border-color:var(--line-strong);color:var(--item-ink)}}
.cap-row .need-action {transition:.15s ease;width:28px;min-height:28px;padding:0;border-radius:8px;border-color:color-mix(in srgb,var(--ink) 20%,var(--item-bg));color:color-mix(in srgb,var(--ink) 20%,var(--item-bg))}
@media(hover:hover){.cap-row:hover .need-action {border-color:var(--ink);color:var(--ink)}}
.need-action .icon {width:15px;height:15px}
.need-action .need-action-hover {display:none}
@media(hover:hover){.need-action:hover .need-action-default {display:none}.need-action:hover .need-action-hover {display:block}}
.need-action:focus-visible .need-action-default {display:none}
.need-action:focus-visible .need-action-hover {display:block}
.cap-row .source-chip.focused-source {color:var(--ink);border-color:var(--line-strong)}
:is(.product-card,.effect-card,.subpanel) {--item-bg:var(--surface-soft);--item-muted:var(--muted);--item-ink:var(--ink);--item-border:var(--line)}
.product-card {--item-bg:var(--card-surface,var(--surface-soft))}
@media(hover:hover){.product-card:hover {--item-bg:var(--surface)}}
.product-card.active {--item-bg:var(--surface-active)}
.product-card,.product-card.active {background:var(--item-bg)}
@media(hover:hover){.product-card:hover {background:var(--item-bg)}}
.recommended .product-card {border-color:color-mix(in srgb,var(--ink) 10%,var(--card-surface))}
.recommended .product-card:last-child {margin-bottom:0}
:is(.product-card,.effect-card,.subpanel) button:not(.primary) {background:transparent;color:var(--item-muted);border-color:var(--item-border)}
.product-card:not(.selected) .card-action {border:2px solid color-mix(in srgb,var(--ink) 20%,var(--item-bg));color:color-mix(in srgb,var(--ink) 20%,var(--item-bg));background:transparent}
.product-card:not(.selected) .card-action:focus-visible {border-color:var(--ink);color:var(--ink)}
@media(hover:hover){.product-card:not(.selected):hover .card-action {border-color:var(--ink);color:var(--ink)}}
.product-card.selected .card-action {background:var(--primary-bg);border-color:var(--primary-bg);color:var(--on-primary)}
.capability-menu {position:fixed;z-index:95;width:min(196px,calc(100vw - 16px));padding:5px;background:var(--panel-solid);color:var(--ink);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 14px 42px rgba(0,0,0,.24),0 3px 12px rgba(0,0,0,.11)}
html[data-theme="dark"] .capability-menu {box-shadow:0 18px 48px rgba(0,0,0,.48),0 4px 14px rgba(0,0,0,.24)}
.capability-menu button {display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:8px;text-align:left;border-radius:7px;background:transparent;font-size:var(--font-control);font-weight:600}
.capability-menu button:not(:disabled):focus-visible {background:var(--surface-hover)}
@media(hover:hover){.capability-menu button:not(:disabled):hover {background:var(--surface-hover)}}
.capability-menu button .icon:last-child:not(:first-child) {margin-left:auto}
.capability-menu button.cap-hide {font-weight:400;color:var(--muted)}
.capability-menu hr {margin:4px 2px;border:0;border-top:1px solid var(--line)}
.capability-menu .icon {width:15px;height:15px}
/* Larger Need context menu targets on mobile; desktop remains compact. */
@media(max-width:720px){
 .capability-menu {width:min(240px,calc(100vw - 16px));padding:8px;border-radius:14px}
 .capability-menu button {min-height:48px;padding:12px;gap:11px;border-radius:9px;font-size:var(--font-body)}
 .capability-menu .icon {width:18px;height:18px}
 .capability-menu hr {margin:6px 4px}
}
.foundation-menu {width:min(260px,calc(100vw - 16px))}
@media(max-width:720px){#foundationMenuButton {display:none}}
@media(min-width:721px) and (max-width:1150px){.capability-panel:not(.sheet-open) #foundationMenuButton {display:none}}
.tray-layout {display:flex;align-items:center;gap:7px;min-width:0}
.tray-clear {flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);color:var(--muted)}
@media(hover:hover){.tray-clear:not(:disabled):hover {background:var(--surface-hover);color:var(--ink);border-color:var(--line-strong)}}
.tray-scroll {flex:1;min-width:0;padding:7px 0 7px 7px;min-height:62px}
.summary-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.product-tooltip {font-size:var(--font-caption);line-height:1.5}
html[data-page="composer"] .topbar .brand-name {font-size:calc(var(--font-lead) + 2px)}
@media(max-width:720px){html[data-page="composer"] .topbar{padding-left:16px}html[data-page="composer"] .topbar .brand-name{font-size:calc(var(--font-body) + 2px)}html[data-page="composer"] .topbar .brand{gap:11px}
 /* Do not stack a CSS filter on the SVG's own blur/mask surfaces on iOS. */
 html[data-page="composer"] .brand-mark{filter:none}}
@media(max-width:1150px) {
  .capability-panel .capability-menu {position:absolute}
  .capability-panel .scenario-title {font-size:var(--font-lead)}
  #systemToggle {width:36px;height:36px;min-height:36px}
}
@media(prefers-reduced-motion:reduce) {
  .profile-chevron {transition:none}
}

/* Profile boundaries align with the panel edges. */
.scenario-panel{padding:0}
.scenario-top{padding:15px;margin:0}
@media(min-width:1151px){.scenario-top{padding-block:8px;padding-inline-end:8px}}
.profile-row{border-top:1px solid var(--line)}
#profileOptions .select-value{font-size:var(--font-note)}

.profile-planning-row{display:grid;grid-template-columns:minmax(95px,.8fr) minmax(0,1.7fr);gap:10px;margin-top:14px;align-items:end}


@media(min-width:721px){
 .catalog-list {padding:7px 4px 18px 10px}
 .capability-scroll {padding:10px 4px 18px 10px}
 .detail-scroll {padding:18px 12px 18px 18px}
 .hero-actions>.quantity-control {flex:1 1 114px}
 .hero-actions .qty-button {flex:none}
 .hero-actions .qty-value {flex:1}
}
@container (width > 650px){.hero {align-items:start}.hero-copy {align-self:start}}
.eyebrow .icon.kit-shape{fill:none;stroke-width:3px}

/* Mobile card controls use full ink contrast without requiring hover. */
@media(max-width:720px){
  .product-card:not(.selected) .card-action{border:1px solid var(--ink);color:var(--ink)}
  html[data-page="composer"] .product-card:not(.selected) .card-action svg.icon{stroke-width:1.8}
  .cap-row .need-action{border-color:var(--ink);color:var(--ink)}
}

/* Mobile dialog prose and captions, without affecting headings or controls. */
@media(max-width:720px){
 dialog .dialog-body p{font-size:17px;line-height:1.65}
 dialog .dialog-body :is(.caption,.dialog-caption,.device-note,small),
 dialog#clearPlanDialog :is(.device-note,small){font-size:15px;line-height:1.55}
}