/*
 * The hero one-line — NodeFabric's own interface, running a restoration.
 *
 * Shared by index.html and nodefabric.html so the two pages present the same
 * product. It used to live inline in index.html; a visitor crossing from the
 * home page to the product page met a completely different-looking diagram,
 * which read as two different pieces of software.
 *
 * Every value in --nf-* is transcribed from the application's own palette
 * (lineview: frontend/viewer/src/canvas.css) so this and a real screenshot of
 * NodeFabric read as the same thing. If the product's palette moves, this is a
 * second copy of it and has to move too.
 *
 * Scoped to --nf-* rather than the app's bare names (--bg, --text, --muted)
 * because those collide with the marketing site's own tokens.
 */
  .nf-band{
    --nf-bg:#0D1117; --nf-surface:#161B22; --nf-surface3:#21262D;
    --nf-border:#30363D; --nf-text:#E6EDF3; --nf-muted:#7D8590;
    --nf-accent:#58A6FF;
    --nf-live:#69FF47; --nf-dead:#5A6673; --nf-gen:#9D7BFF; --nf-tie:#FFC24B;
    --nf-source:#00D4FF; --nf-xfmr:#FFD740; --nf-cap:#80CBC4; --nf-load:#FF8A65;
    --nf-pA:#FF5252; --nf-pB:#69FF47; --nf-pC:#4FC3F7; --nf-pABC:#E6EDF3;
    --nf-ui:'Inter',system-ui,-apple-system,sans-serif;
    background:var(--nf-bg);color:var(--nf-text);font-family:var(--nf-ui);
    margin-top:clamp(40px,6vw,64px);
    border-top:1px solid var(--nf-border);border-bottom:1px solid var(--nf-border);
  }
  .nf-app{max-width:1680px;margin:0 auto}

  .nf-topbar{
    display:flex;align-items:center;gap:20px;
    padding:12px clamp(16px,3vw,26px);border-bottom:1px solid var(--nf-border);
  }
  .nf-title{font-size:14px;font-weight:600;line-height:1.3}
  .nf-title i{
    font-style:normal;display:block;font-weight:400;font-size:10.5px;
    color:var(--nf-muted);letter-spacing:.04em;margin-top:2px;
  }
  .nf-body{display:grid;grid-template-columns:1fr 288px}
  @media(max-width:900px){.nf-body{grid-template-columns:1fr}}

  /* The dot grid is the viewer's canvas, reproduced with a background-image
     rather than painted into the SVG so it stays put while the diagram scales. */
  .nf-canvas{
    position:relative;min-height:clamp(300px,42vw,470px);
    background-color:var(--nf-bg);
    background-image:radial-gradient(var(--nf-border) .9px,transparent .9px);
    background-size:26px 26px;background-position:13px 13px;
    overflow:hidden;
  }
  .nf-canvas svg{display:block;width:100%;height:100%;position:absolute;inset:0}

  .nf-chip[hidden]{display:none}
  .nf-chip{
    position:absolute;top:14px;left:14px;z-index:2;
    display:flex;align-items:center;gap:10px;
    background:var(--nf-surface);border:1px solid var(--nf-border);border-radius:6px;
    padding:7px 13px;font-size:11.5px;color:var(--nf-muted);
  }
  .nf-chip b{font-size:14px;font-weight:600;color:var(--nf-text);font-variant-numeric:tabular-nums}
  .nf-chip.alarm b{color:var(--nf-tie)}

  .nf-legend,.nf-layers{
    position:absolute;bottom:14px;z-index:2;display:flex;align-items:center;gap:12px;
    background:var(--nf-surface);border:1px solid var(--nf-border);border-radius:999px;
    padding:6px 14px;font-size:10.5px;color:var(--nf-muted);
  }
  .nf-legend{left:14px;gap:14px}
  .nf-legend span{display:flex;align-items:center;gap:6px;color:var(--nf-text)}
  .nf-legend i{display:block;width:14px;height:3px;border-radius:2px}
  .nf-layers{left:50%;transform:translateX(-50%);white-space:nowrap}
  .nf-layers em{font-style:normal;letter-spacing:.12em;text-transform:uppercase;font-size:9.5px}
  .nf-layers b{
    display:flex;align-items:center;gap:6px;font-weight:400;padding:4px 11px;
    border-radius:999px;border:1px solid transparent;color:var(--nf-muted);
  }
  .nf-layers b::before{
    content:"";width:6px;height:6px;border-radius:50%;
    border:1px solid currentColor;background:transparent;
  }
  .nf-layers b.on{
    color:var(--nf-accent);border-color:var(--nf-accent);
    background:rgba(88,166,255,.12);
  }
  .nf-layers b.on::before{background:var(--nf-accent);border-color:var(--nf-accent)}
  @media(max-width:640px){.nf-legend,.nf-layers{display:none}}

  /* The order panel — the viewer's right-hand rail. Carries the narration the
     old event log carried, but in the shape the application actually uses. */
  .nf-panel{border-left:1px solid var(--nf-border);background:var(--nf-surface);padding:16px 18px}

  /* The inspect demo's panel changes height as it moves between devices — a
     recloser carries a consequence line and two more rows than a transformer —
     and because the panel is the tallest cell in the grid, the whole band
     resized under the reader mid-loop. Reserving the tallest state's height
     pins it; the canvas stretches to match, which only makes the diagram
     bigger. Two values because the panel is 288px wide beside the canvas and
     full width once stacked. Re-measure `.nf-panel` scrollHeight across a full
     loop if the panel's content changes. */
  .nf-band[data-demo="inspect"] .nf-panel{min-height:548px}
  @media(max-width:900px){
    .nf-band[data-demo="inspect"] .nf-panel{min-height:512px}
    /* Same problem in the switching demo, but only once stacked: each step
       gains a "time · name" line as it is executed, so the list grows through
       the loop. Beside the canvas the panel is stretched to it and absorbs
       that; below it, it does not. 223px empty, 341px with all four stamped. */
    .nf-band[data-demo="switching"] .nf-panel{min-height:348px}
  }
  @media(max-width:900px){.nf-panel{border-left:0;border-top:1px solid var(--nf-border)}}
  .nf-panel-h{font-size:13px;font-weight:600;margin-bottom:2px}
  .nf-panel-h em{
    font-style:normal;display:block;font-weight:400;font-size:10px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--nf-muted);margin-top:3px;
  }
  .nf-badge[hidden]{display:none}
  .nf-badge{
    display:inline-block;margin:11px 0 15px;padding:3px 9px;border-radius:4px;
    font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
    border:1px solid var(--nf-tie);color:var(--nf-tie);
  }
  .nf-steps{list-style:none;margin:0;padding:0}
  .nf-steps li{
    display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;
    padding:9px 0;border-top:1px solid var(--nf-border);
    font-size:12.5px;line-height:1.45;color:var(--nf-muted);
  }
  .nf-steps li:last-child{border-bottom:1px solid var(--nf-border)}
  .nf-steps li::before{
    content:"";width:11px;height:11px;margin-top:3px;border-radius:50%;
    border:1px solid var(--nf-dead);
  }
  .nf-steps li.now{color:var(--nf-text)}
  .nf-steps li.now::before{border:2px solid var(--nf-accent);border-radius:50%}
  .nf-steps li.done{color:var(--nf-text)}
  .nf-steps li.done::before{background:var(--nf-live);border-color:var(--nf-live)}
  .nf-steps li time{display:block;font-size:10.5px;color:var(--nf-muted);margin-top:2px}

  /* device inspector — the panel's other face */
  .nf-chips{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 0}
  .nf-tag{
    padding:3px 9px;border-radius:4px;font-size:9.5px;letter-spacing:.09em;
    text-transform:uppercase;border:1px solid var(--nf-border);color:var(--nf-muted);
  }
  .nf-tag.closed{border-color:var(--nf-live);color:var(--nf-live)}
  .nf-tag.open{border-color:#FF5252;color:#FF5252}
  .nf-note{
    margin:13px 0 0;font-size:12px;line-height:1.5;
    padding-left:10px;border-left:2px solid var(--nf-border);
  }
  .nf-note.warn{border-left-color:#FF5252;color:#FF8A80}
  .nf-note.ok{border-left-color:var(--nf-live);color:var(--nf-live)}
  .nf-data{
    display:grid;grid-template-columns:auto 1fr;gap:0 14px;margin:15px 0 0;
    font-size:12px;line-height:1.5;
  }
  .nf-data dt{color:var(--nf-muted);padding:4px 0}
  .nf-data dd{margin:0;padding:4px 0;text-align:right;color:var(--nf-text)}
  .nf-sub{
    margin:16px 0 0;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--nf-muted);
  }
  .nf-ref{
    padding:3px 8px;border-radius:4px;font-size:11px;
    background:var(--nf-surface3);color:var(--nf-text);
  }