/* Prototype viewer chrome — the tool UI around the app (flows panel, theme
   toggle, canvas/stage, screen-nav). Not part of the app itself; its markup
   is injected and wired up by viewer.js. Generic across projects — never
   edited per concept. The app's own tokens, typekit and screen/component
   styles live in index.html and screens//components instead. */

:root{
  /* ==== VIEWER TOKENS — the tool chrome around the canvas (flows panel,
     toggle, screen-nav, page backdrop). Independent of the app's own
     palette (in index.html): the viewer keeps its own light/dark regardless
     of what theme the app inside the canvas is showing. Light is the
     default here; dark is applied via prefers-color-scheme and/or the
     viewer toggle. ---- */
  --viewer-bg:#eef0f3;
  --viewer-panel:#ffffff;
  --viewer-surface:#f1f3f6;
  --viewer-border:rgba(15,23,42,.12);
  --viewer-border-strong:rgba(15,23,42,.26);
  --viewer-ink:#12151a;
  --viewer-ink-secondary:rgba(15,23,42,.62);
  --viewer-ink-tertiary:rgba(15,23,42,.4);
  --viewer-accent:#181818;
  --viewer-accent-ink:#ffffff;
  --viewer-shadow:0 30px 60px rgba(15,23,42,.14), 0 0 0 8px rgba(15,23,42,.05);
  --viewer-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2312151a' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* screen status (design-progress tracking, not part of the app) — fixed
     hues, same in light/dark, read fine against both --viewer-panel tones */
  --viewer-status-todo:#9aa5b1;
  --viewer-status-wip:#f2a93b;
  --viewer-status-review:#8b5cf6;
  --viewer-status-done:#22c55e;
}
@media (prefers-color-scheme: dark){
  :root:not([data-viewer-theme="light"]){
    --viewer-bg:#0a0c0f;
    --viewer-panel:#11161d;
    --viewer-surface:#171d26;
    --viewer-border:rgba(255,255,255,.12);
    --viewer-border-strong:rgba(255,255,255,.24);
    --viewer-ink:#ffffff;
    --viewer-ink-secondary:rgba(255,255,255,.66);
    --viewer-ink-tertiary:rgba(255,255,255,.42);
    --viewer-accent:#ffffff;
    --viewer-accent-ink:#181818;
    --viewer-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 8px rgba(0,0,0,.35);
    --viewer-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-opacity='.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-viewer-theme="dark"]{
  --viewer-bg:#0a0c0f;
  --viewer-panel:#11161d;
  --viewer-surface:#171d26;
  --viewer-border:rgba(255,255,255,.12);
  --viewer-border-strong:rgba(255,255,255,.24);
  --viewer-ink:#ffffff;
  --viewer-ink-secondary:rgba(255,255,255,.66);
  --viewer-ink-tertiary:rgba(255,255,255,.42);
  --viewer-accent:#ffffff;
  --viewer-accent-ink:#181818;
  --viewer-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 8px rgba(0,0,0,.35);
  --viewer-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-opacity='.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--viewer-bg);
  background-image:radial-gradient(1200px 600px at 50% -10%, var(--viewer-panel) 0%, var(--viewer-bg) 60%);
  color:var(--viewer-ink);
  min-height:100%;
}

/* ---------------- prototype chrome (not part of the app) ----------------
   Bottom-left, not top-left: a web app's own nav usually lives at the very
   top of the page, so a control fixed up there sits on top of it. The
   bottom is free of that risk. */
.viewer-btn{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0;
  font:inherit; color:var(--viewer-ink-secondary); background:transparent; border:1px solid var(--viewer-border); cursor:pointer;
  border-radius:999px;
}
.viewer-btn:hover{color:var(--viewer-ink); border-color:var(--viewer-border-strong)}
.flows-toggle{
  position:fixed; left:16px; bottom:16px; z-index:57;
  width:auto; height:32px; padding:0 6px 0 10px; justify-content:flex-start; gap:8px;
  background:var(--viewer-panel); opacity:.8; transition:opacity .15s ease;
}
.flows-toggle:hover{opacity:1}
.flows-toggle-title{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:500; color:var(--viewer-ink); white-space:nowrap;
}

/* ---------------- flows panel ---------------- */
.flows-panel{
  position:fixed; top:0; left:0; bottom:0; z-index:56; width:240px; max-width:75vw;
  background:var(--viewer-panel); border-right:1px solid var(--viewer-border); color:var(--viewer-ink);
  /* bottom:64px clears the flows-toggle button fixed over this same corner */
  padding:24px 24px 64px;
  display:flex; flex-direction:column; font-size:12px;
  /* 1px stays on-screen while closed so the panel itself catches the hover
     that opens it — a fully off-screen element can never receive mouseenter */
  transform:translateX(calc(-100% + 1px)); transition:transform .28s cubic-bezier(.32,.72,0,1);
}
.flows-panel[data-open="true"]{transform:translateX(0)}
.view-toggle{
  display:flex; gap:3px; margin-bottom:24px; padding:3px;
  background:var(--viewer-surface); border-radius:999px;
}
.view-toggle-btn{
  flex:1; font:inherit; font-weight:600; color:var(--viewer-ink-secondary);
  background:transparent; border:0; cursor:pointer; padding:6px 4px; border-radius:999px;
}
.view-toggle-btn[aria-pressed="true"]{background:var(--viewer-accent); color:var(--viewer-accent-ink)}
.theme-btn{position:absolute; bottom:16px; right:16px; z-index:1}
.theme-btn .icon-sun, .theme-btn .icon-moon{display:none}
.theme-btn[aria-pressed="false"] .icon-sun{display:block}
.theme-btn[aria-pressed="true"] .icon-moon{display:block}
.panel-restart{
  width:100%; margin-bottom:16px; padding:6px 12px;
  font:inherit; color:var(--viewer-ink-secondary); background:transparent;
  border:1px solid var(--viewer-border); border-radius:999px; cursor:pointer;
}
.panel-restart:hover{color:var(--viewer-ink); border-color:var(--viewer-border-strong)}
.flows-list{flex:1; min-height:0; overflow-y:auto}
.flow-group{display:flex; flex-direction:column}
.flow-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; font:inherit;
  color:var(--viewer-ink-secondary); padding:8px 0; font-size: 14px;
}
.flow-item:hover{color:var(--viewer-ink);}
.flow-item[aria-current="true"]{color:var(--viewer-ink); font-weight:600}
.flow-count{flex:none; font-size:11px; font-weight:400; color:var(--viewer-ink-tertiary)}
.flow-screens{
  display:flex; flex-direction:column;
  margin:0 0 4px 4px; padding-left:12px; border-left:1px solid var(--viewer-border);
}
.flow-screens[hidden]{display:none}
.screen-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; font:inherit;
  color:var(--viewer-ink-tertiary); padding:6px 0; font-size:13px;
}
.screen-item:hover{color:var(--viewer-ink)}
.screen-item[aria-current="true"]{color:var(--viewer-ink); font-weight:600}

/* ---------------- screen status (dot in nav, tag above the canvas) ---------------- */
.viewer-status-dot{width:6px; height:6px; border-radius:50%; flex:none}
.viewer-status-dot[data-status="todo"]{background:var(--viewer-status-todo)}
.viewer-status-dot[data-status="wip"]{background:var(--viewer-status-wip)}
.viewer-status-dot[data-status="review"]{background:var(--viewer-status-review)}
.viewer-status-dot[data-status="done"]{background:var(--viewer-status-done)}
.viewer-status-tag{
  flex:none; font-size:11px; line-height:14px; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
  padding:2px 7px; border-radius:var(--r-full, 999px); color:#fff;
}
.viewer-status-tag[data-status="todo"]{background:var(--viewer-status-todo)}
.viewer-status-tag[data-status="wip"]{background:var(--viewer-status-wip)}
.viewer-status-tag[data-status="review"]{background:var(--viewer-status-review)}
.viewer-status-tag[data-status="done"]{background:var(--viewer-status-done)}

/* ---------------- canvas ----------------
   No simulated hardware here (unlike the mobile template's phone bezel) —
   "single screen" mode is the actual browser viewport, edge to edge, like
   a real web page; "side by side" gives each screen a fixed desktop-sized
   pane so multiple screens can be compared at once. */
.stage{width:100%; min-height:100%}
.stage[data-view="single"]{position:fixed; inset:0}
.stage[data-view="row"]{
  display:flex; justify-content:flex-start; align-items:flex-start;
  overflow-x:auto; padding:32px 300px;
}
.canvas-frame{display:flex; flex-direction:column; width:100%; height:100%; gap:12px}
.canvas-frame[hidden]{display:none}
.canvas-title{
  display:none; align-items:center; justify-content:center; gap:8px;
  font-size:13px; line-height:16px; font-weight:400; letter-spacing:.2px;
  color:var(--viewer-ink-secondary); text-align:center; white-space:nowrap;
}
/* row mode: fixed-width desktop panes, sized to a fixed 960px desktop
   viewport height rather than the actual browser window — every screen in
   this project is an app shell (a full-height sidebar next to a scrollable
   content area), not a simple unfurling page, so the pane needs a real
   height for that sidebar and content to fill and internally scroll
   against, exactly like single-screen view does. Only the current screen
   (not the off-stage ones .screen normally keeps in the DOM for instant
   switching) is laid out. */
.stage[data-view="row"] .canvas-frame{width:1280px; height:auto; flex:none}
.stage[data-view="row"] .canvas-title{display:flex}
.stage[data-view="row"] .canvas{border-radius:12px; box-shadow:var(--viewer-shadow); flex:none; height:960px}
.stage[data-view="row"] .screens{position:static; height:100%}
.stage[data-view="row"] .screen{position:static}
.stage[data-view="row"] .screen:not([data-state="current"]){display:none}
.stage[data-view="row"] .screen[data-state="current"]{height:100%; opacity:1; visibility:visible}
.canvas-row{display:flex; align-items:flex-start; gap:32px}
.canvas-row[hidden]{display:none}
.canvas-row .canvas-frame{pointer-events:none; user-select:none}
.canvas{
  width:100%; flex:1; min-height:0;
  position:relative; overflow:hidden;
  background:var(--background-primary);
}

/* ---------------- screen step nav ---------------- */
.screen-nav{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:50;
  display:flex; gap:8px;
}
.screen-nav[hidden]{display:none}
.screen-nav button{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font:inherit; color:var(--viewer-ink-secondary); background:var(--viewer-panel);
  border:1px solid var(--viewer-border); border-radius:999px; cursor:pointer;
}
.screen-nav button:hover:not(:disabled){color:var(--viewer-ink); border-color:var(--viewer-border-strong)}
.screen-nav button:disabled{opacity:.35; cursor:not-allowed}

/* ---------------- screens ----------------
   Switching screens is instant, no slide/fade — that's a mobile-app
   push/pop convention and reads as unnatural for a web app, where
   navigation is just a page swap. */
.screens{position:absolute; inset:0; background:var(--background-primary); overflow:hidden}
.screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--background-primary);
  opacity:0; visibility:hidden;
}
.screen[data-state="current"]{opacity:1; visibility:visible}