/* Showroom demo template — light catalogue shell; brand colours are set on :root by main.js from catalog.json */
:root{
  --paper:#F6F8FB; --card:#FFFFFF; --ink:#1B2434; --muted:#5C6B80; --line:#DFE6EF;
  --blue:#204999; --blue-d:#183a7d; --green:#7fbf60; --orange:#f3b031;
  --stage:#E9EEF5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:15.5px;line-height:1.55;
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* header */
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 22px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:40px;height:40px;border-radius:6px}
.brand-t{display:flex;flex-direction:column;line-height:1.25}
.brand-t b{font-size:15.5px;font-weight:700}
.brand-t span{font-size:12px;color:var(--muted)}
.bar-right{display:flex;align-items:center;gap:9px}
.range-btn{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.4px;cursor:pointer;
  color:#fff;background:var(--blue);border:none;border-radius:999px;padding:8px 16px}
.range-btn:hover{background:var(--blue-d)}
.demo-chip{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.6px;
  color:var(--blue);background:#e9eefb;border:1px solid #c6d3ef;border-radius:999px;padding:6px 13px;white-space:nowrap}

/* showroom hall mode — full-bleed stage, config panel hidden */
body.hall .panel{display:none}
body.hall .split{grid-template-columns:1fr;grid-template-rows:1fr}
body.hall .stage-toggles .tg{display:none}
.tag.hpart{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;
  background:rgba(255,255,255,.94);border:1px solid #C6D3EF;color:var(--blue);cursor:pointer;
  pointer-events:auto;box-shadow:0 2px 8px rgba(27,36,52,.10)}
.tag.hpart:hover{border-color:var(--blue)}
.tag.hgroup{background:var(--blue);color:#fff;padding:6px 15px;border-radius:9px;
  box-shadow:0 3px 14px rgba(32,73,153,.3)}
.tag.hgroup b{font-size:13px;display:block}
.tag.hgroup span{font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;color:#bcd0f5}
.hall-title{position:absolute;left:50%;top:30px;transform:translateX(-50%);text-align:center;z-index:2;
  pointer-events:none}
.hall-title[hidden]{display:none}
.hall-title h1{margin:0;font-size:clamp(24px,3vw,34px);font-weight:700;color:var(--ink);
  letter-spacing:-.3px}
.hall-title p{margin:5px 0 0;font-size:11.5px;letter-spacing:.8px;color:#7D8CA1}
@media(max-width:600px){.hall-title{top:16px}.hall-title p{display:none}.tag.hgroup{display:none!important}body.hall .stage-hint{display:none}
  .tag.hpart{font-size:9px;padding:2px 6px}.range-btn{white-space:nowrap;font-size:10.5px;padding:7px 10px}
  .brand-t span{display:none}.brand-t b{font-size:13px}}
.hall-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--blue);
  background:rgba(255,255,255,.85);border:1px solid #C6D3EF;border-radius:999px;
  padding:6px 16px;backdrop-filter:blur(4px)}
.hall-hint[hidden]{display:none}
@media(max-width:600px){
  .range-btn{padding:7px 12px;font-size:11px}
}

/* split layout — fills the viewport row exactly, page never scrolls */
.split{display:grid;grid-template-columns:1fr 400px;min-height:0}
.stage-wrap{position:relative;background:var(--stage)}
.stage-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 95% at 50% 42%, transparent 62%, rgba(23,37,64,.13) 100%)}
/* film grain — the quiet cinematic layer over both hall and configurator */
.stage-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
#stage{width:100%;height:100%;display:block;position:absolute;inset:0}
.stage-hint{position:absolute;left:16px;bottom:12px;font-size:11px;color:#7D8CA1;letter-spacing:.5px}

/* annotation layer — labels projected from 3D anchors */
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
#leaders{position:absolute;inset:0;width:100%;height:100%}
#leaders line{stroke:#93a7c2;stroke-width:1}
#leaders circle{fill:var(--blue);stroke:#fff;stroke-width:1.5}
.tag{position:absolute;left:0;top:0;transform:translate(-50%,-135%);white-space:nowrap;
  font-size:11.5px;line-height:1.25;padding:3px 9px;border-radius:7px;will-change:transform}
.tag.dim{font-family:"IBM Plex Mono",monospace;background:var(--blue);color:#fff;font-weight:500}
.tag.callout{background:rgba(255,255,255,.96);border:1px solid #C6D3EF;color:var(--ink);
  box-shadow:0 2px 10px rgba(27,36,52,.10);padding:5px 11px;border-radius:9px}
.tag.callout i{font-style:normal;color:#7D8CA1;font-size:9.5px;letter-spacing:.7px;
  text-transform:uppercase;display:block}
.tag.callout b{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--blue)}
.tag.title{background:var(--blue);color:#fff;padding:7px 18px;border-radius:10px;text-align:center;
  box-shadow:0 4px 16px rgba(32,73,153,.32)}
.tag.title b{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:16px;letter-spacing:.5px;display:block}
.tag.title span{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:#bcd0f5}
.tag.weight{background:var(--ink);color:#fff;padding:5px 13px;border-radius:9px;text-align:center;
  box-shadow:0 3px 12px rgba(27,36,52,.22)}
.tag.weight i{font-style:normal;color:#9fb0c6;font-size:9.5px;letter-spacing:.9px;
  text-transform:uppercase;display:block}
.tag.weight b{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px}

.stage-toggles{position:absolute;right:14px;top:14px;display:flex;gap:7px}
.tg{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.4px;cursor:pointer;
  padding:6px 13px;border-radius:999px;border:1px solid #C6D3EF;background:rgba(255,255,255,.85);
  color:#7D8CA1;backdrop-filter:blur(4px)}
.tg.on{color:var(--blue);border-color:var(--blue);background:#fff}
.stage-badge{position:absolute;left:16px;top:14px;font-size:12px;font-weight:500;color:var(--blue);
  background:rgba(255,255,255,.85);border:1px solid #C6D3EF;border-radius:8px;padding:6px 12px;
  box-shadow:0 2px 10px rgba(27,36,52,.08);backdrop-filter:blur(4px)}

/* config panel — internal scroll only when it must */
.panel{background:var(--card);border-left:1px solid var(--line);padding:16px 22px 20px;
  overflow-y:auto;min-height:0}
.range-eyebrow{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:0 0 12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.lbl{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:12px 0 6px}
.sel{width:100%;font:inherit;font-weight:600;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:9px;background:var(--card);color:var(--ink);cursor:pointer}
.sel:focus{outline:2px solid var(--blue);outline-offset:1px}

.pkgs{display:flex;flex-direction:column;gap:7px}
.pkg-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  font:inherit;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.pkg-btn b{font-size:14px}
.pkg-btn span{font-size:12px;color:var(--muted)}
.pkg-btn.on{border-color:var(--blue);background:#f0f4fc}
.pkg-btn.on b{color:var(--blue)}

.tanks{display:flex;gap:7px}
.tank-btn{flex:1;font:inherit;font-weight:600;padding:9px 0;border:1.5px solid var(--line);
  border-radius:9px;background:var(--card);color:var(--ink);cursor:pointer}
.tank-btn.on{border-color:var(--blue);background:#f0f4fc;color:var(--blue)}
.tank-btn:disabled{opacity:.38;cursor:not-allowed}
.tanks.hidden,.lbl.hidden{display:none}

.partcard{display:flex;justify-content:space-between;align-items:center;margin-top:14px;
  background:var(--blue);border-radius:11px;padding:11px 16px}
.lbl-inline{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#bcd0f5;font-weight:600}
.part{font-size:21px;font-weight:600;color:#fff;letter-spacing:.5px}

.spec{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
.spec td{padding:5px 2px;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{color:var(--muted);white-space:nowrap;padding-right:14px}
.spec td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

.features{margin-top:16px}
.features details{border:1px solid var(--line);border-radius:9px;margin-bottom:7px;overflow:hidden}
.features summary{cursor:pointer;font-weight:600;font-size:13.5px;padding:9px 13px;background:#fafbfd;list-style:none;display:flex;justify-content:space-between;align-items:center}
.features summary::after{content:"+";color:var(--muted);font-weight:400}
.features details[open] summary::after{content:"–"}
.features ul{margin:0;padding:8px 13px 11px 27px;font-size:12.5px;color:var(--muted)}
.features li{margin-bottom:3px}

.share-row{display:flex;gap:7px;margin-top:12px}
.share-wa{flex:1.4;text-align:center;font-weight:600;font-size:13px;color:#fff;background:#25D366;
  text-decoration:none;border-radius:9px;padding:9px;filter:saturate(.9)}
.share-wa:hover{filter:saturate(1.05) brightness(.96)}
.share-copy{flex:1;font:inherit;font-weight:600;font-size:13px;cursor:pointer;color:var(--blue);
  background:var(--card);border:1.5px solid #C6D3EF;border-radius:9px;padding:9px}
.share-copy:hover{border-color:var(--blue)}
.docs-row{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fafbfd}
.doc-link{display:block;font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;
  padding:4px 0}
.doc-link::before{content:"⤓ ";color:var(--muted)}
.doc-link:hover{text-decoration:underline}
.doc-note{margin:5px 0 0;font-size:11px;color:var(--muted)}

/* compare — selection in the hall, side-by-side sheet in compare mode */
.cmp-btn{display:none}
body.hall .stage-toggles .cmp-btn{display:inline-block}
.cmp-btn.on{color:#fff;background:var(--blue);border-color:var(--blue)}
.cmp-tray{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.95);
  border:1px solid #C6D3EF;border-radius:999px;padding:7px 8px 7px 14px;
  box-shadow:0 8px 30px rgba(27,36,52,.18);backdrop-filter:blur(6px)}
.cmp-tray[hidden]{display:none}
.cmp-chips{display:flex;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:12px}
.cmp-chip{background:#e9eefb;border:1px solid #c6d3ef;color:var(--blue);border-radius:999px;
  padding:4px 10px;cursor:pointer;font:inherit}
.cmp-chip:hover{background:#dde6f8}
.cmp-chips .hintt{color:var(--muted);font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;padding:4px 2px}
.cmp-go{font:inherit;font-weight:600;font-size:13px;cursor:pointer;color:#fff;background:var(--blue);
  border:none;border-radius:999px;padding:8px 18px}
.cmp-go:disabled{opacity:.4;cursor:not-allowed}
.cmp-sheet{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);max-height:46%;display:flex;flex-direction:column;
  box-shadow:0 -12px 40px rgba(27,36,52,.12);backdrop-filter:blur(8px)}
.cmp-sheet[hidden]{display:none}
.cmp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 18px;border-bottom:1px solid var(--line)}
.cmp-diff{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer}
.cmp-share{display:flex;gap:7px}
.cmp-wa{font-size:12px;font-weight:600;color:#fff;background:#25D366;text-decoration:none;
  border-radius:999px;padding:6px 13px;filter:saturate(.9)}
.cmp-copy{font:inherit;font-size:12px;font-weight:600;cursor:pointer;color:var(--blue);
  background:var(--card);border:1px solid #C6D3EF;border-radius:999px;padding:6px 13px}
.cmp-scroll{overflow:auto}
#cmpTable{width:100%;border-collapse:collapse;font-size:13px}
#cmpTable th,#cmpTable td{padding:7px 18px;text-align:left;border-bottom:1px solid var(--line);
  white-space:nowrap}
#cmpTable th{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--blue);
  background:#fafbfd;position:sticky;top:0}
#cmpTable td:first-child{color:var(--muted);font-size:12px}
#cmpTable td{font-weight:600;font-variant-numeric:tabular-nums}
#cmpTable td.best{background:#e8f6ee;color:#1d7a5f}
#cmpTable .cfg{font-size:12px;font-weight:600;color:#fff;background:var(--blue);border:none;
  border-radius:999px;padding:5px 13px;cursor:pointer;font-family:"IBM Plex Sans",sans-serif}
.tag.cpart{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  background:var(--blue);color:#fff;padding:5px 13px;border-radius:8px;
  box-shadow:0 3px 12px rgba(32,73,153,.3)}
@media(max-width:700px){
  .cmp-sheet{max-height:55%}
  #cmpTable th,#cmpTable td{padding:6px 10px;font-size:12px}
}

/* og share-image mode: nothing but the machine and its plate */
body.og .bar,body.og .panel,body.og .foot,body.og .stage-toggles,
body.og .stage-hint,body.og .hall-hint{display:none}
body.og .split{grid-template-columns:1fr;grid-template-rows:1fr}

.enq{display:block;text-align:center;font-weight:600;font-size:14px;color:#fff;background:var(--green);
  text-decoration:none;border-radius:10px;padding:11px;margin-top:14px;filter:saturate(.92)}
.enq:hover{filter:saturate(1.05) brightness(.97)}
.enq-note{font-size:11px;color:var(--muted);text-align:center;margin:7px 0 0}

/* single-line footer bar */
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 22px;background:var(--card);border-top:1px solid var(--line);
  font-size:12px;color:var(--muted)}
.foot-pitch{font-size:13px;color:var(--ink)}
.foot-pitch b{color:var(--blue)}
.foot-cta{font-weight:600;color:#fff;background:var(--blue);text-decoration:none;
  border-radius:999px;padding:6px 15px;margin-left:8px;white-space:nowrap}
.foot-cta:hover{background:var(--blue-d)}
.foot a{color:var(--ink)}
.foot .dim a{border-bottom:1px solid var(--line);text-decoration:none}
.dim{opacity:.65;font-size:11px}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

/* ---------------- dark theme — full alternative palette ---------------- */
body.dark{
  --paper:#0D1424; --card:#131C2F; --ink:#E8EEF7; --muted:#93A2B8; --line:#263352;
  --blue:#2E5CB8; --blue-d:#244a99; --stage:#0B1220;
  --accent:#8FB4FF;
}
body.dark .brand-t b{color:var(--ink)}
body.dark .demo-chip{background:#16223C;border-color:#2C3A58;color:var(--accent)}
body.dark .stage-wrap::after{background:radial-gradient(120% 95% at 50% 42%, transparent 60%, rgba(2,5,12,.4) 100%)}
body.dark .tg{background:rgba(19,27,44,.85);border-color:#2C3A58;color:#7D8CA6}
body.dark .tg.on{color:var(--accent);border-color:var(--accent);background:#101A30}
body.dark .hall-hint,body.dark .cmp-tray{background:rgba(19,27,44,.92);border-color:#2C3A58;color:var(--accent)}
body.dark .cmp-chip{background:#16223C;border-color:#2C3A58;color:var(--accent)}
body.dark .hall-title h1{color:var(--ink)}
body.dark .hall-title p{color:#6E7E9C}
body.dark .tag.dim{background:#2E5CB8}
body.dark .tag.callout{background:rgba(16,24,40,.95);border-color:#2C3A58}
body.dark .tag.callout i{color:#7D8CA6}
body.dark .tag.callout b{color:var(--accent)}
body.dark .tag.hpart{background:rgba(16,24,40,.94);border-color:#2C3A58;color:var(--accent)}
body.dark .tag.weight{background:#E8EEF7;color:#0D1424;box-shadow:0 3px 12px rgba(0,0,0,.5)}
body.dark .tag.weight i{color:#51617D}
body.dark #leaders line{stroke:#4C5F80}
body.dark #leaders circle{fill:var(--accent);stroke:#0D1424}
body.dark .pkg-btn.on{background:#16223C}
body.dark .pkg-btn.on b{color:var(--accent)}
body.dark .tank-btn.on{background:#16223C;color:var(--accent)}
body.dark .sel:focus{outline-color:var(--accent)}
body.dark .doc-link{color:var(--accent)}
body.dark .docs-row,body.dark .features summary{background:#101828}
body.dark .share-copy{color:var(--accent);border-color:#2C3A58}
body.dark .cmp-copy{color:var(--accent);border-color:#2C3A58}
body.dark .cmp-sheet{background:rgba(13,20,36,.97);border-color:var(--line)}
body.dark #cmpTable th{background:#101828;color:var(--accent)}
body.dark #cmpTable td.best{background:#123024;color:#5FD39A}
body.dark .lbl-inline{color:#A9C2F2}
.tg-theme{font-size:13px;line-height:1;cursor:pointer;border:1px solid #C6D3EF;border-radius:999px;
  padding:7px 11px;background:rgba(255,255,255,.85);color:var(--blue)}
body.dark .tg-theme{background:rgba(19,27,44,.85);border-color:#2C3A58;color:var(--accent)}

@media(max-width:880px){
  .split{grid-template-columns:1fr;grid-template-rows:42vh 1fr}
  .stage-wrap{height:auto}
  .panel{border-left:none;border-top:1px solid var(--line)}
  .demo-chip{display:none}
  .foot{padding:8px 14px;gap:8px}
  .foot-pitch{font-size:12px}
}
@media(max-width:600px){
  .brand-t b{font-size:14px}
  .dim{display:none}   /* full credit returns on tablet/desktop */
  .foot-pitch{font-size:11.5px}
  .foot-cta{padding:5px 12px;font-size:12px}
  .stage-hint{font-size:10px}
}

/* template additions */
.mark{object-fit:contain;background:transparent}
.pkg-btn.na,.tank-btn.na{opacity:.38;cursor:not-allowed}
.hidden{display:none!important}