/* The click-through demo: what marks a page as the demo, and the guided tour,
   on top of the app's own styles. */
.demo-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 20px;font-size:13px;
  background:var(--yellow-bg);color:var(--yellow);border-bottom:1px solid var(--yellow)}
.demo-bar .grow{flex:1}
.demo-bar .btn{padding:4px 10px;font-size:12.5px}
.demo-tag{font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:4px;
  background:var(--yellow);color:var(--surface)}
a.brand{text-decoration:none;color:inherit}
a.btn{text-decoration:none}
/* The app's chip is a button, and its layout is written for one; the demo's is not pressable. */
span.whoami{display:inline-flex;align-items:center;gap:9px;padding:4px 10px 4px 6px;margin-left:6px;cursor:default}
span.whoami .whoami-text{display:flex;flex-direction:column;line-height:1.2;text-align:left}

.demo-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);max-width:min(560px,92vw);z-index:90;
  padding:12px 16px;border-radius:10px;font-size:13.5px;line-height:1.45;
  background:var(--surface);color:var(--ink);border:1px solid var(--rule);box-shadow:0 14px 40px -12px rgba(0,0,0,.55)}
.demo-toast b{display:block;margin-bottom:2px}

/* ---------- the guided tour ----------
   A ring around what is being described, everything else dimmed by the ring's
   own shadow, and a card beside it. The ring ignores the pointer, so the thing
   it surrounds can still be clicked while it is being read about. */
.tour-ring{position:fixed;z-index:80;border-radius:10px;pointer-events:none;
  border:2px solid var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%,transparent),0 0 0 9999px rgba(8,12,16,.52);
  transition:left .28s,top .28s,width .28s,height .28s}
.tour-card{position:fixed;z-index:85;width:min(430px,calc(100vw - 24px));
  background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 22px 60px -16px rgba(0,0,0,.6);padding:16px 18px 14px;font-size:13.5px;line-height:1.5;
  transition:left .28s,top .28s}
.tour-card.wide{width:min(640px,calc(100vw - 24px))}
.tour-step{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.tour-card h3{margin:4px 0 8px;font-size:16px;letter-spacing:-.2px}
.tour-card p{margin:0 0 9px;color:var(--ink-2)}
.tour-card ul{margin:0 0 9px;padding-left:18px;color:var(--ink-2)}
.tour-card li{margin:4px 0}
.tour-card b{color:var(--ink)}
.tour-card code{font:12px var(--mono);background:var(--surface-2);border:1px solid var(--rule);border-radius:4px;padding:0 5px}
.tour-try{margin:0 0 10px;padding:8px 10px;border-radius:8px;font-size:12.5px;
  background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--ink)}
.tour-try .btn{padding:3px 9px;font-size:12px;margin-left:6px}
.tour-nav{display:flex;align-items:center;gap:8px;margin-top:6px}
.tour-nav .grow{flex:1}
/* A page with many steps has many dots. They give way and wrap, so the buttons
   beside them are never pushed out of the card. */
.tour-dots{display:flex;flex-wrap:wrap;gap:5px;flex:0 1 auto;min-width:0}
.tour-dots i{flex:none}
.tour-nav .btn,.tour-nav .tour-skip{flex:none;white-space:nowrap}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:var(--rule)}
.tour-dots i.on{background:var(--accent)}
.tour-skip{background:none;border:0;color:var(--ink-3);font:inherit;font-size:12.5px;cursor:pointer;padding:4px 6px}
.tour-skip:hover{color:var(--ink)}
/* The app's expanded panel sits above everything; the tour has to sit above that. */
body.has-expanded .tour-ring{z-index:95} body.has-expanded .tour-card{z-index:96}
@media (prefers-reduced-motion:reduce){ .tour-ring,.tour-card{transition:none} }
/* On paper there is only the screen: no demo bar, no tour. */
@media print{ .demo-bar,.tour-ring,.tour-card,.demo-toast{display:none !important} }

/* A page drawn for a screenshot: see ?still in demo.js. */
.demo-still .demo-bar,.demo-still .tour-ring,.demo-still .tour-card,.demo-still .demo-toast{display:none !important}

/* The demo's menu items are links to its pages, where the app's are buttons. */
a.sn-item{text-decoration:none}

/* ---------- demo use-cases: a section on the start page, and the viewer that steps through one ---------- */
.uc{margin-top:18px}
.uc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:14px;padding:14px 16px 18px}
.uc-card{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:inherit;
  font:inherit;cursor:pointer;overflow:hidden;transition:border-color .12s,box-shadow .12s}
.uc-card:hover,.uc-card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}
.uc-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--rule)}
.uc-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.uc-play{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink,#fff);display:grid;place-items:center;
  font-size:14px;padding-left:3px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.uc-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.uc-body b{font-size:15px}
.uc-blurb{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.uc-saves{font-size:12.5px;font-weight:600;color:var(--green)}
.uc-meta{font:11px var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
body.uc-open{overflow:hidden}
.uc-viewer{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 24px 18px;background:rgba(8,10,14,.94);color:#e8ecf2;overflow:auto}
.uc-top{display:flex;align-items:center;gap:12px;width:min(1500px,100%)}
.uc-name{font-weight:700}
.uc-chapter{padding:3px 9px;border:1px solid rgba(255,255,255,.28);border-radius:3px;font:10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#cfd8e4}
.uc-count{font:12px var(--mono);color:#9aa6b6}
.uc-x{margin-left:auto}
.uc-title{margin:4px 0 0;width:min(1200px,100%);text-align:center;font-size:clamp(17px,2.1vw,24px);line-height:1.35;font-weight:650;color:#fff}
.uc-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
.uc-img{max-width:min(1500px,100%);max-height:calc(100vh - 230px);border:1px solid rgba(255,255,255,.18);border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.6);background:#12161d}
.uc-bar{display:flex;align-items:center;gap:16px;width:min(1500px,100%);justify-content:center}
.uc-dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.uc-dot{width:11px;height:11px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.28);cursor:pointer}
.uc-dot.c1{background:rgba(255,170,60,.45)} .uc-dot.c2{background:rgba(90,200,150,.45)}
.uc-dot.on{background:#fff;box-shadow:0 0 0 3px rgba(47,129,247,.8);transform:scale(1.15)}
@media (max-width:700px){
  .uc-viewer{padding:10px 12px;gap:8px}
  .uc-img{max-height:none;width:100%}
  .uc-top{flex-wrap:wrap;gap:6px 10px}
  .uc-x{margin-left:auto;min-height:40px;padding:6px 14px}
  .uc-title{font-size:16px;line-height:1.35;margin:0}
  .uc-stage{align-items:flex-start;flex:0 1 auto}
  .uc-bar{flex-wrap:wrap;gap:10px}
  .uc-dots{order:3;width:100%}
  .uc-dot{width:13px;height:13px}
  .uc-back,.uc-next{flex:1;min-height:44px}
}
@media print{.uc,.uc-viewer{display:none}}

/* ---------- the migration report, as it prints, shown on screen for the use-case ---------- */
#uc-report{position:fixed;z-index:210;inset:0;overflow:auto;background:rgba(8,10,14,.9);padding:24px 0}
#uc-report[hidden]{display:none}
#uc-report .rpt-sheet{width:min(860px,calc(100vw - 32px));margin:0 auto;background:#fff;color:#111;border-radius:6px;padding:34px 38px;box-shadow:0 18px 60px rgba(0,0,0,.6);font:11pt/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
#uc-report .rpt-close{position:fixed;right:24px;top:18px}
#uc-report .rpt-head{display:flex;align-items:flex-start;gap:16px;padding-bottom:12px;
    border-bottom:2px solid #111;margin-bottom:16px}
#uc-report .rpt-logo{display:flex;align-items:center;gap:10px;flex:none}
#uc-report .rpt-logo .brand-mark{height:42px !important;width:42px !important}
#uc-report .rpt-logo b{font:700 20px/1 var(--sans);letter-spacing:-.3px;color:#111}
#uc-report .rpt-head-t{flex:1}
#uc-report .rpt-kicker{font:8.5pt/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
    text-transform:uppercase;color:#666;margin-bottom:5px}
#uc-report .rpt-head h1{font-size:20pt;line-height:1.15;margin:0 0 7px;letter-spacing:-.4px}
#uc-report .rpt-badges{display:flex;gap:6px;flex-wrap:wrap}
#uc-report .rpt-badge{font:8pt ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.06em;
    border:1px solid #999;border-radius:3px;padding:2px 7px;color:#333}
#uc-report .rpt-stamp{font:8pt/1.5 ui-monospace,Menlo,monospace;color:#666;text-align:right;flex:none}
#uc-report .rpt-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    border:1px solid #bbb;border-radius:4px;overflow:hidden;margin:0 0 18px}
#uc-report .rpt-figs > div{padding:9px 12px;border-right:1px solid #ddd}
#uc-report .rpt-figs > div:last-child{border-right:0}
#uc-report .rpt-figs .k{display:block;font:7.5pt ui-monospace,Menlo,monospace;text-transform:uppercase;
    letter-spacing:.09em;color:#777;margin-bottom:3px}
#uc-report .rpt-figs .v{display:block;font:600 15pt/1 ui-monospace,Menlo,monospace}
#uc-report .rpt-figs .v2{display:block;font:600 10.5pt/1.2 ui-monospace,Menlo,monospace}
#uc-report .rpt-figs .v small{font-size:9pt;font-weight:400;color:#666}
#uc-report .rpt-t{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:9pt}
#uc-report .rpt-t th{text-align:left;border-bottom:1.5px solid #111;padding:5px 6px;font-size:8pt;
    text-transform:uppercase;letter-spacing:.06em;color:#444}
#uc-report .rpt-t td{border-bottom:1px solid #ddd;padding:5px 6px;vertical-align:top}
#uc-report .rpt-t .r{text-align:right;font-family:ui-monospace,Menlo,monospace}
#uc-report .rpt-t tr{break-inside:avoid;page-break-inside:avoid}
#uc-report .rpt-sub{font:7.5pt ui-monospace,Menlo,monospace;color:#777}
#uc-report .rpt-q{font:7.5pt/1.35 ui-monospace,Menlo,monospace;color:#444;word-break:break-word}
#uc-report .rpt-note{font-size:8.5pt;color:#555;margin:0 0 14px}
#uc-report .rpt-rule{border:1px solid #bbb;border-radius:4px;padding:8px 10px;margin-bottom:10px;
    break-inside:avoid;page-break-inside:avoid}
#uc-report .rpt-rule-h{font:600 10pt/1.3 ui-monospace,Menlo,monospace;margin-bottom:5px}
#uc-report .rpt-rule-h span{font-weight:400;font-size:8pt;color:#666;margin-left:8px}
#uc-report .rpt-code{font:8.5pt/1.45 ui-monospace,Menlo,monospace;background:#f7f7f8;border:1px solid #ddd;
    border-radius:3px;padding:6px 8px;margin:0 0 6px;white-space:pre-wrap;word-break:break-word}
#uc-report .rpt-code.small{font-size:7.5pt;color:#444}
#uc-report .rpt-figs .s{display:block;font-size:8pt;color:#666;margin-top:4px}
#uc-report .rpt-h2{font-size:12pt;margin:20px 0 9px;padding-bottom:5px;border-bottom:1px solid #111;
    text-transform:uppercase;letter-spacing:.08em}
#uc-report .rpt-block{margin:0 0 13px}
#uc-report .rpt-block h4{font:8.5pt ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.09em;
    color:#666;margin:0 0 4px}
#uc-report .rpt-block p{margin:0;font-size:10.5pt}
#uc-report .rpt-block pre{margin:0;padding:9px 11px;background:#f5f5f5;border:1px solid #ddd;border-radius:3px;
    font:8.5pt/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
#uc-report .rpt-table{width:100%;border-collapse:collapse;font-size:9pt;margin-bottom:4px}
#uc-report .rpt-table th{text-align:left;font:8pt ui-monospace,Menlo,monospace;text-transform:uppercase;
    letter-spacing:.06em;color:#555;border-bottom:1.5px solid #111;padding:6px 7px}
#uc-report .rpt-table td{padding:5px 7px;border-bottom:1px solid #ddd;vertical-align:top}
#uc-report .rpt-table .rn{width:22px;color:#777}
#uc-report .rpt-table .r{text-align:right;font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
#uc-report .rpt-table tr{break-inside:avoid}
#uc-report .rpt-task{break-inside:avoid;page-break-inside:avoid;margin:0 0 16px;padding:11px 13px;
    border:1px solid #ccc;border-radius:4px}
#uc-report .rpt-task h3{font-size:11.5pt;margin:0 0 8px}
#uc-report .rpt-facts{display:grid;grid-template-columns:repeat(2,auto 1fr);gap:2px 10px;margin:0 0 11px;
    font-size:9pt}
#uc-report .rpt-facts dt{font:8pt ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.05em;
    color:#777;white-space:nowrap}
#uc-report .rpt-facts dd{margin:0;font-family:ui-monospace,Menlo,monospace}
#uc-report .rpt-note{border-left:2px solid #ccc;padding:4px 0 4px 9px;margin-top:7px;break-inside:avoid}
#uc-report .rpt-note-m{font:8pt ui-monospace,Menlo,monospace;color:#777;display:block}
#uc-report .rpt-none{font-size:9.5pt;color:#777;font-style:italic;margin:0}
#uc-report .brand-mark{height:42px;width:42px} #uc-report .brand-mark .m-n{fill:#444} #uc-report .brand-mark .m-a{fill:#1ce783}

/* Phones: the walk-thru is the full application, so it is made to fit rather than redesigned. The top bar wraps, wide tables
   scroll inside their own panel, and the tour card sits along the bottom of the screen instead of beside what it describes. */
@media (max-width:640px){
  .demo-bar{padding:8px 12px;font-size:12px;gap:8px}
  .demo-bar .btn{padding:6px 12px}
  .topbar{flex-wrap:wrap;height:auto;row-gap:6px;padding:8px 12px}
  .topbar .grow{display:none}
  #top-actions{margin-left:auto}
  .view .panel,.tablewrap{max-width:100%;overflow-x:auto}
  .tour-card,.tour-card.wide{left:8px !important;right:8px !important;top:auto !important;bottom:8px;width:auto !important;max-height:48vh;overflow:auto;padding:12px 14px 10px}
  body{padding-bottom:0}
  .dash-charts{grid-template-columns:minmax(0,1fr)}
  .dash-panel,.dash-list{overflow-x:auto;max-width:100%}
  .dash-lists,.dash-top{grid-template-columns:minmax(0,1fr)}
  nav.actions{flex-wrap:wrap;gap:6px;justify-content:flex-start}
}