/* ==============================================================
   INTERACTIVE DEMO
   The modernisation planner panel (behaviour: js/demo.js). The
   canvas reads its colours and fonts from the tokens, so it
   follows the theme.
   ============================================================== */
@layer demo{
  .ops{overflow:hidden;border:1px solid var(--panel-line);border-radius:var(--r);background:var(--surface);color:var(--ink-2)}
  .ops-bar,.ops-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5);padding:var(--s-3) var(--s-4)}
  .ops-bar{border-bottom:1px solid var(--line)}
  .ops-foot{border-top:1px solid var(--line)}
  .ops-title{display:flex;align-items:center;gap:var(--s-3);font-size:var(--text-sm);font-weight:var(--weight-title);color:var(--ink)}
  .ops-title .i{color:var(--accent-ink)}
  .ops-tag{padding:2px var(--s-2);border:1px solid var(--line);border-radius:var(--r-xs);font-family:var(--font-mono);
    font-size:var(--text-2xs);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
  .ops-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}

  .ops-body{display:grid;grid-template-columns:minmax(0,1fr) 320px}
  .ops-map{position:relative;aspect-ratio:16/11;min-height:320px;
    background-image:radial-gradient(var(--line-2) 1px,transparent 1.2px);background-size:24px 24px;background-position:12px 12px}
  .ops-map canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:manipulation}
  .ops-hint{position:absolute;left:var(--s-4);bottom:var(--s-4);padding:var(--s-1) var(--s-2);border:1px solid var(--line);border-radius:var(--r-xs);
    background:var(--surface);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--ink-3);pointer-events:none;
    transition:opacity .3s ease-out}
  .ops.touched .ops-hint{opacity:0}

  .ops-side{display:flex;flex-direction:column;gap:var(--s-4);min-width:0;min-height:0;padding:var(--s-4);border-left:1px solid var(--line)}
  .kpis{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-sm)}
  .kpis div{padding:var(--s-3)}
  .kpis div:nth-child(even){border-left:1px solid var(--line)}
  .kpis div:nth-child(n+3){border-top:1px solid var(--line)}
  .kpis dt{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
  .kpis dd{margin-top:var(--s-1);font-size:var(--text-xl);font-weight:var(--weight-display);line-height:1.2;letter-spacing:var(--tracking-title);
    color:var(--ink);font-variant-numeric:tabular-nums}
  .kpis dd.hot{color:var(--bad)}

  .proposal{padding:var(--s-3);border:1px solid var(--line-2);border-left:2px solid var(--warn);border-radius:var(--r-sm);background:var(--bg);
    animation:panelIn var(--t-med) var(--ease-out)}
  .proposal-k{display:flex;justify-content:space-between;gap:var(--s-3);font-family:var(--font-mono);font-size:var(--text-2xs);
    letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--warn)}
  .proposal-t{margin-top:var(--s-2);font-size:var(--text-sm);line-height:1.5;color:var(--ink)}
  .proposal-a{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}

  .log-h{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
  .agent-log{flex:1 1 0;min-height:160px;margin-top:calc(var(--s-2) * -1);overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent)}
  .agent-log li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid var(--line);
    font-size:var(--text-xs);line-height:1.5;color:var(--ink-3);animation:logIn var(--t-med) var(--ease-out)}
  .agent-log li:first-child{color:var(--ink)}
  .agent-log time{font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1.7;color:var(--ink-3)}
  .agent-log span{position:relative;padding-left:var(--s-3)}
  .agent-log span::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
  .log-ok span::before{background:var(--ok)}
  .log-warn span::before{background:var(--warn)}
  .log-bad span::before{background:var(--bad)}
  .log-act span::before{background:var(--ink)}
  @keyframes logIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @keyframes panelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  .legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--ink-3)}
  .legend li{display:flex;align-items:center;gap:var(--s-2)}
  .lg{width:8px;height:8px;border-radius:50%}
  .lg-mod{border-radius:3px;border:1.5px solid var(--line-2);background:var(--surface)}
  .lg-svc{border-radius:3px;border:1.5px solid var(--accent);background:var(--accent-soft)}
  .lg-mirror{border:1.5px solid var(--accent-ink)}
  .lg-bad{background:var(--bad)}
  .ops-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
  .demo-note{margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--ink-3)}

  @media (max-width:899px){
    .ops-body{grid-template-columns:1fr}
    .ops-side{border-left:0;border-top:1px solid var(--line)}
    .agent-log{flex:none;min-height:0;max-height:240px}
  }
  @media (max-width:520px){
    .ops-map{aspect-ratio:4/5;min-height:0}
    .ops-actions{width:100%}
    .ops-actions .btn{flex:1}
  }
}