/* Dollhouse viewer styles. Colours are tokens so a space can override them in its own index.html. */
:root{
  --bg:#eef0ef; --panel:#ffffff; --fg:#1f2523; --muted:#5d6763; --line:#d5dbd8;
  --kraft:#b9834a; --steel:#7d8a92; --path:#12907e; --block:#c8463b; --plan:#5b6ad0;
  --glow:#ff9f1c; --chip:#e4e9e7;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#161a19; --panel:#1f2523; --fg:#e8ecea; --muted:#9aa5a0; --line:#323a37;
  --kraft:#d39b5d; --steel:#9aa7ae; --path:#2cc2aa; --block:#ec6a5e; --plan:#8f9bf0; --glow:#ffb547; --chip:#2a312f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#161a19; --panel:#1f2523; --fg:#e8ecea; --muted:#9aa5a0; --line:#323a37;
  --kraft:#d39b5d; --steel:#9aa7ae; --path:#2cc2aa; --block:#ec6a5e; --plan:#8f9bf0; --glow:#ffb547; --chip:#2a312f; color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.5}
.dh-wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;padding:14px 16px;width:min(100%,1500px);margin:0 auto}
@media (max-width:900px){.dh-wrap{grid-template-columns:minmax(0,1fr)}}
.dh-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.dh-head h1{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,3.2vw,32px);letter-spacing:-.01em;margin:0;text-wrap:balance}
.dh-sub{color:var(--muted);margin:2px 0 0;max-width:62ch}
.eyebrow{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--chip);border-radius:999px;padding:3px;gap:2px}
.seg button{font:600 14px var(--f-body);border:0;background:transparent;color:var(--fg);padding:7px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.seg button .count{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--glow);color:#1f2523;font:700 11px var(--f-mono);line-height:18px}
button:focus-visible,.zone:focus-visible,.rule:focus-visible,.hit:focus-visible,input:focus-visible{outline:2px solid var(--path);outline-offset:2px}
.stagebox{position:relative;min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);height:min(74vh,680px);min-height:380px}
#dh-stage{position:absolute;inset:0}
#dh-stage canvas{display:block}
.view{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.view button{font:600 13px var(--f-body);border:1px solid var(--line);background:var(--panel);color:var(--fg);padding:5px 10px;border-radius:6px;cursor:pointer}
.legend{position:absolute;left:10px;bottom:10px;display:flex;gap:10px;flex-wrap:wrap;font:13px var(--f-body);color:var(--muted);background:color-mix(in srgb,var(--panel) 85%,transparent);padding:5px 8px;border-radius:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.verdict{position:absolute;right:10px;top:10px;max-width:280px;font:600 14px var(--f-body);padding:8px 10px;border-radius:8px;color:#fff;background:var(--path)}
@media (max-width:600px){.verdict{top:auto;bottom:56px;right:10px;left:10px;max-width:none}}
.verdict.glow{background:var(--glow);color:#1f2523}
.dh-err{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);padding:20px;text-align:center}
aside{display:flex;flex-direction:column;gap:12px;min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.card h2{font:800 18px var(--f-display);margin:0 0 4px}
.card[hidden]{display:none}
#dh-detail img{width:100%;max-height:260px;object-fit:cover;border-radius:6px;margin:8px 0;background:var(--chip)}
#dh-detail p{margin:6px 0}
.pill{display:inline-block;font:600 11px var(--f-mono);padding:2px 7px;border-radius:999px;background:var(--chip);color:var(--fg)}
.pill.gone{background:color-mix(in srgb,var(--block) 22%,var(--panel))}
.pill.move{background:color-mix(in srgb,var(--plan) 25%,var(--panel))}
.pill.new{background:color-mix(in srgb,var(--path) 25%,var(--panel))}
.pill.hot{background:var(--glow);color:#1f2523}
.zones,.rules,.hits{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.zone{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer;border:1px solid transparent}
.zone:hover{background:var(--chip)}
.zone[aria-current="true"]{border-color:var(--line);background:var(--chip)}
.zone .n{font:600 12px var(--f-mono);color:var(--muted);text-align:right}
.zone .sw{width:14px;height:14px;border-radius:3px}
.rule,.hit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:7px 8px;border-radius:6px;cursor:pointer;border-bottom:1px dashed var(--line)}
.rule:hover,.rule[aria-current="true"],.hit:hover,.hit[aria-current="true"]{background:var(--chip)}
.addr{font:600 12px var(--f-mono);padding:2px 7px;border-radius:5px;background:var(--fg);color:var(--panel);white-space:nowrap}
.rule small,.hit small{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.note{font-size:13.5px;color:var(--muted);margin:8px 0 0}
.lv{display:grid;gap:2px;margin-top:8px;font-size:15px}
.lv div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:5px 0;border-top:1px solid var(--line)}
.lv b{font:600 12px var(--f-mono);padding-top:3px}
.lv .dim{color:var(--muted);font-style:italic}
.lv .hot{background:color-mix(in srgb,var(--glow) 28%,var(--panel));border-radius:4px;padding:0 4px}
.find input{width:100%;font:16px var(--f-body);padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.steps{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:2px;counter-reset:s}
.steps li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:7px 0;border-top:1px solid var(--line);counter-increment:s}
.steps input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--path)}
.steps label{cursor:pointer}
.steps label::before{content:counter(s) ". ";font:600 12px var(--f-mono);color:var(--muted)}
.steps li.done label{color:var(--muted);text-decoration:line-through}
.steps small{display:block;color:var(--muted);font-size:13px}
.dh-back{display:inline-block;margin-bottom:6px;font:600 14px var(--f-body);color:var(--muted);text-decoration:none}
.dh-back:hover{color:var(--fg)}