/* Prototyping canvas. Colors come from the host page's variables. */
[data-proto-canvas]{
  --pc-ink:var(--ink,#191919);
  --pc-paper:var(--paper,#fff);
  --pc-accent:var(--accent,#0A66C2);
  --pc-mute:var(--mute,#666);
  --pc-soft:var(--soft,#F3F2EF);
  --pc-line:var(--rule,rgba(25,25,25,.14));
  --pc-ui:var(--ui,"Segoe UI",system-ui,sans-serif);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  color:var(--pc-ink);
  background:var(--pc-soft);
  font:16px/1.4 var(--pc-ui);
}
[data-proto-canvas] *,[data-proto-canvas] *::before,[data-proto-canvas] *::after{box-sizing:border-box}
[data-proto-canvas][hidden]{display:none}
.pcv-bar,.pcv-sub{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:6px 8px;flex:none;background:var(--pc-paper);border-bottom:1px solid var(--pc-line);
}
.pcv-bar button,.pcv-sub button,.pcv-request button{
  font:600 .92rem/1 var(--pc-ui);min-height:44px;border-radius:6px;padding:8px 12px;cursor:pointer;
  background:var(--pc-paper);color:var(--pc-accent);border:1px solid var(--pc-accent);
}
.pcv-bar button[aria-selected="true"],.pcv-bar button[aria-pressed="true"],.pcv-sub button[aria-pressed="true"]{
  background:var(--pc-accent);color:#fff;
}
.pcv-bar button:focus-visible,.pcv-sub button:focus-visible,.pcv-request button:focus-visible,.pcv-source:focus-visible{
  outline:2px solid var(--pc-accent);outline-offset:2px;
}
.pcv-note{margin:0;padding:4px 10px;flex:none;color:var(--pc-mute);font-size:.85rem}
.pcv-roster{list-style:none;display:flex;flex-wrap:wrap;gap:2px 12px;margin:0;padding:4px 10px;flex:none;min-width:0;font-size:.78rem;line-height:1.3;max-height:4.6rem;overflow:auto;border-top:1px solid var(--pc-line);color:var(--pc-mute)}
.pcv-roster .pcv-badge{min-height:18px;font-size:10px}
.pcv-roster[hidden]{display:none}
.pcv-roster li{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.pcv-image{max-width:100%;height:auto}
.pcv-split{
  flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:8px;
}
.pcv-pane{
  min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--pc-paper);
  border:1px solid var(--pc-line);border-radius:12px;overflow:hidden;
}
.pcv-pane-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;flex:none;border-bottom:1px solid var(--pc-line)}
.pcv-pane-h h2{font:600 1rem/1.2 var(--pc-ui);margin:0;color:var(--pc-ink)}
.pcv-badge,.pcv-chip{
  display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;
  background:var(--pc-soft);color:var(--pc-ink);font:600 11px/1 var(--pc-ui);letter-spacing:.03em;
}
.pcv-by{color:var(--pc-mute);font-size:.85rem}
.pcv-source{
  display:block;width:100%;min-height:3.2rem;max-height:18%;flex:none;margin:0;padding:6px 10px;order:3;
  border:0;border-top:1px solid var(--pc-line);resize:vertical;
  font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--pc-ink);background:var(--pc-paper);
}
.pcv-source[readonly]{background:var(--pc-soft)}
.pcv-draw{flex:1;min-height:0;overflow:auto;padding:8px;order:2}
.pcv-draw svg{width:100%;max-width:100% !important;height:auto}
.pcv-pane-h{order:1}
.pcv-frame{display:block;width:100%;min-height:180px;height:46%;border:0;border-bottom:1px solid var(--pc-line);background:#fff}
.pcv-wire{width:100%;height:240px;border:0;background:#fff}
.pcv-fields{margin:0;padding:0;list-style:none}
.pcv-fields li{margin:0 0 8px}
.pcv-fields strong{display:block}
.pcv-request{padding:8px 10px 12px;border-top:1px solid var(--pc-line)}
.pcv-request label{display:block;font-size:.85rem;margin:6px 0 2px}
.pcv-request input,.pcv-request select{
  width:100%;min-height:44px;font:1rem/1.3 var(--pc-ui);padding:8px;border:1px solid var(--pc-line);border-radius:6px;background:#fff;color:var(--pc-ink);
}
.pcv-requests{margin:8px 0 0;padding:0;list-style:none}
.pcv-requests li{padding:6px 0;border-top:1px solid var(--pc-line);font-size:.9rem}
.pcv-empty{margin:0;color:var(--pc-mute)}
@media (max-width:799px){
  .pcv-split{grid-template-columns:minmax(0,1fr)}
  .pcv-split[data-pane="a"] .pcv-b{display:none}
  .pcv-split[data-pane="b"] .pcv-a{display:none}
}
@media (min-width:800px){
.pcv-split[data-empty-b="1"]{grid-template-columns:minmax(0,1fr)}
.pcv-split[data-empty-b="1"] .pcv-b{display:none}
  .pcv-pane-toggle{display:none}
}
@media (prefers-reduced-motion:reduce){
  [data-proto-canvas] *{scroll-behavior:auto}
}
.pcv-bake{position:absolute;left:-10000px;top:0;width:1200px;height:800px;overflow:hidden;pointer-events:none}
/* One row of tabs, scrolled sideways, so a busy canvas does not push the drawing off the page
   (self-check 2026-10-23 23:32 ET: 17 tabs wrapped to 307 px of a 666 px canvas; the drawing got 129 px). */
.pcv-bar{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.pcv-bar button{flex:none;white-space:nowrap}
@media (min-width:800px){
.pcv-bar button{min-height:34px;padding:5px 10px;font-size:.85rem}
}
/* Show and hide on demand (Text, List switches at the start of the tab row). */
[data-proto-canvas][data-live="1"]:not([data-show-text="1"]) .pcv-source{display:none}
[data-proto-canvas]:not([data-show-list="1"]) .pcv-roster{display:none}
.pcv-bar .pcv-toggle{flex:none;font:600 .8rem/1 var(--pc-ui);min-height:34px;padding:5px 9px;border-radius:999px;background:var(--pc-soft);color:var(--pc-ink);border:1px solid var(--pc-line);cursor:pointer}
.pcv-bar .pcv-toggle[aria-pressed="true"]{background:var(--pc-ink);color:var(--pc-paper)}
/* ===== Refresh (owner 2026-10-23 23:52 ET: "more appealing than early 2000s"; "do less with more").
   Soft surfaces, a system font, a row of card tiles instead of a wall of outlined chips, small muted pills,
   a live "In the making" timer on working cards, one slim activity strip. No fonts, images or libraries. */
[data-proto-canvas]{
  --pc-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pc-soft:#f6f6f4;--pc-line:rgba(20,20,20,.08);--pc-shadow:0 1px 2px rgba(16,24,40,.05),0 2px 8px rgba(16,24,40,.06);
  --pc-amber-bg:#fdf3e1;--pc-amber:#8a5300;--pc-green-bg:#e6f4ea;--pc-green:#1e6b35;--pc-blue-bg:#e8f0fb;--pc-blue:#1d4f91;
  font-family:var(--pc-ui);background:var(--pc-soft);
}
.pcv-bar{gap:10px;padding:10px 12px;background:transparent;border-bottom:0;align-items:stretch}
.pcv-bar button,.pcv-sub button{
  border:1px solid var(--pc-line);background:var(--pc-paper);color:var(--pc-ink);border-radius:999px;box-shadow:none;font-weight:600;
}
.pcv-bar button[aria-selected="true"],.pcv-bar button[aria-pressed="true"],.pcv-sub button[aria-pressed="true"]{
  background:var(--pc-ink);color:var(--pc-paper);border-color:var(--pc-ink);
}
.pcv-bar .pcv-toggle{align-self:center}
/* A card tile in the row. */
.pcv-bar .pcv-card{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
  min-width:180px;max-width:260px;min-height:60px;padding:10px 14px;text-align:left;white-space:normal;
  border-radius:14px;border:1px solid var(--pc-line);background:var(--pc-paper);color:var(--pc-ink);
  box-shadow:var(--pc-shadow);transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;
}
.pcv-bar .pcv-card:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(16,24,40,.06),0 6px 16px rgba(16,24,40,.08)}
.pcv-bar .pcv-card[aria-selected="true"]{background:var(--pc-paper);color:var(--pc-ink);border-color:var(--pc-accent);box-shadow:0 0 0 2px rgba(10,102,194,.18),var(--pc-shadow)}
.pcv-card-t{font:600 .88rem/1.25 var(--pc-ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcv-card-m{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Pills: muted, small. */
.pcv-badge,.pcv-chip{min-height:20px;padding:0 8px;font:600 11px/20px var(--pc-ui);letter-spacing:.01em;background:#efefec;color:#444}
.pcv-badge[data-status="working"],.pcv-badge[data-status="claimed"]{background:var(--pc-amber-bg);color:var(--pc-amber)}
.pcv-badge[data-status="done"]{background:var(--pc-green-bg);color:var(--pc-green)}
.pcv-badge[data-status="review"]{background:var(--pc-blue-bg);color:var(--pc-blue)}
.pcv-agent{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:999px;font:600 11px/20px var(--pc-ui);background:#ececec;color:#333}
.pcv-agent[data-hue="a"]{background:#ede7fb;color:#4b2f8f}
.pcv-agent[data-hue="b"]{background:#e3f1fb;color:#1b5577}
.pcv-agent[data-hue="c"]{background:#fbeadf;color:#7c3a12}
.pcv-agent[data-hue="d"]{background:#e6f3ee;color:#22573f}
.pcv-agent[data-hue="e"]{background:#eceff3;color:#2f3a48}
.pcv-agent[data-hue="f"]{background:#f6ecf3;color:#6d2a58}
/* In the making: the working pill counts up from the card's ts, with a pulsing dot. Done cards say when they finished. */
.pcv-badge[data-since]{display:inline-flex;align-items:center;gap:6px;background:var(--pc-amber-bg);color:var(--pc-amber);font-variant-numeric:tabular-nums}
.pcv-badge[data-since]::before{content:"";width:7px;height:7px;border-radius:50%;background:#e09b2d;animation:pcv-pulse 1.6s ease-in-out infinite}
.pcv-card[data-status="working"],.pcv-card[data-status="claimed"]{
  background-image:linear-gradient(100deg,transparent 30%,rgba(224,155,45,.08) 50%,transparent 70%);
  background-size:220% 100%;animation:pcv-shimmer 2.8s linear infinite;
}
@keyframes pcv-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes pcv-shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
/* Panes: soft surfaces. */
.pcv-split{gap:12px;padding:4px 12px 12px}
.pcv-pane{border:1px solid var(--pc-line);border-radius:16px;box-shadow:var(--pc-shadow)}
.pcv-pane-h{gap:8px;padding:12px 16px;border-bottom:1px solid var(--pc-line)}
.pcv-pane-h h2{font:650 1.02rem/1.3 var(--pc-ui)}
.pcv-draw{padding:16px}
.pcv-draw > p{max-width:68ch;line-height:1.55;margin:0}
.pcv-by{font-size:.8rem}
/* One-line empty state. */
.pcv-emptystate{margin:12px;padding:18px 20px;border:1px dashed rgba(20,20,20,.16);border-radius:14px;color:var(--pc-mute);background:var(--pc-paper);font-size:.95rem;text-align:center}
.pcv-emptystate[hidden]{display:none}
[data-proto-canvas][data-empty="1"] .pcv-split{display:none}
/* The activity strip: one line, at most about 40px, newest first, the newest slides in. */
.pcv-activity{list-style:none;display:flex;gap:16px;align-items:center;margin:0;padding:0 14px;height:34px;flex:none;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.pcv-activity[hidden]{display:none}
.pcv-act{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:.8rem;color:var(--pc-mute);opacity:.75}
.pcv-act:first-child{opacity:1;color:var(--pc-ink)}
.pcv-act-v{font-weight:600}
.pcv-act-t{max-width:28ch;overflow:hidden;text-overflow:ellipsis}
.pcv-act-new{animation:pcv-in .45s cubic-bezier(.2,.8,.2,1.2) both}
@keyframes pcv-in{from{opacity:0;transform:translateX(-10px) scale(.96)}to{opacity:1;transform:none}}
/* The List view: the same cards, as a quiet list. */
.pcv-roster{gap:6px 16px;padding:8px 14px;border-top:1px solid var(--pc-line);background:var(--pc-paper)}
.pcv-roster .pcv-badge{min-height:18px;line-height:18px}
@media (max-width:799px){
  .pcv-bar .pcv-card{min-width:160px;max-width:200px;padding:8px 12px}
  .pcv-split{padding:4px 8px 8px}
  .pcv-act-t{max-width:18ch}
  .pcv-act:nth-child(n+3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .pcv-badge[data-since]::before,.pcv-card[data-status="working"],.pcv-card[data-status="claimed"],.pcv-act-new{animation:none}
  .pcv-bar .pcv-card{transition:none}
  .pcv-bar .pcv-card:hover{transform:none}
}
.pcv-bar > button:not(.pcv-card){align-self:center}
.pcv-pane-h .pcv-sub{padding:0;background:transparent;border:0;min-width:0;max-width:100%;flex-wrap:wrap;gap:6px}