/* DropComments in "Aurora" (prototype/aurora.html, revision 8): a quiet ocean-blue interface, as if on a boat in Iceland beneath the
   northern lights. Dark only (Adam deprecated light mode). Deep sea blues going darker down the page, solid cards, readable text in the
   system sans, and the aurora (green, violet, pink) used sparingly and moving very slowly. Two shadows: the sea shadow, darker water
   beneath anything resting on it, and the aurora glow, only under the one call to act on each screen. Pink is kept for comment pins and
   the selected comment. design/tokens.css (Made by Awan's) still supplies spacing; the colours and fonts here replace its own. The
   layout below predates Aurora; the Aurora section at the end restyles it. */
:root{
  color-scheme:dark;
  /* Aurora's colours */
  --bg:#081C2C;--surface:#10283B;--surface-raised:#152F43;--border:#385164;--text:#F1F5F8;--text-secondary:#BAC8D3;--link:#C3DBEA;
  --button-bg:#DCE8EF;--button-text:#102638;--pink:#CBB8D1;--pink-text:#17293B;
  --aurora-green:#6EE7A8;--aurora-violet:#9C82EA;--aurora-pink:#EC8CC6;
  /* The sea, from the surface down */
  --sea:linear-gradient(180deg,#13294a 0%,#0c2239 32%,#071a29 68%,#04121d 100%);
  /* The two shadows: darker water beneath things, and the aurora under what needs attention (saturated, like the lights) */
  --glow-green:rgba(30,240,140,.40);--glow-violet:rgba(132,84,250,.44);--glow-pink:rgba(255,80,175,.38);
  --sea-shadow:0 1px 2px rgba(1,8,15,.5),0 12px 28px -10px rgba(1,8,15,.75);
  --sea-shadow-text:0 .05em .02em rgba(1,8,15,.85),0 .16em .45em rgba(1,8,15,.75);
  --aurora-glow:-16px 10px 30px -12px var(--glow-green),0 14px 30px -12px var(--glow-violet),16px 10px 30px -12px var(--glow-pink);
  --aurora-glow-text:-.4em .1em 1em rgba(30,240,140,.42),0 .1em 1em rgba(132,84,250,.44),.4em .1em 1em rgba(255,80,175,.40);
  /* Where the text's glow drifts to and back */
  --aurora-glow-text-b:-.2em .12em 1.1em rgba(30,240,140,.38),.1em .12em 1.1em rgba(132,84,250,.50),.55em .08em 1em rgba(255,80,175,.44);
  /* The app's own names for them. --white is the raised surface (cards, fields, menus). */
  --paper:var(--bg);--white:var(--surface-raised);--line:var(--border);--ink:var(--text);--muted:var(--text-secondary);
  --accent:var(--link);--on-accent:var(--button-text);--radius:8px;--shadow:var(--sea-shadow);
  --edge:#385164;--edge-hover:#4f6b80;--dashed:#4a6378;--dot:#22405a;--ink-hover:#eaf1f5;--over:#152F43;--veil:rgba(8,28,44,.92);
  --note:#152F43;--note-general:#132b3f;--banner:#10283B;--banner-line:#385164;
  /* Warnings and errors stay apart from the brand colours */
  --warn-bg:#3b2f12;--warn:#f2d083;--lost:#f2a493;
  /* The home water's light (water.js): the lit side of a ripple and the shaded side, as r, g, b, strongest alpha out of 255 */
  --glint:156,130,234,34;--shade:0,0,0,80;
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;--body:var(--display);--label:var(--display);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
/* The sea, deepening down the page */
body{display:flex;flex-direction:column;background:var(--sea),var(--bg);background-attachment:fixed;color:var(--ink);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}
[hidden]{display:none!important}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.s{width:16px;height:16px}
/* iOS Safari zooms the page into any field under 16px when it gets focus, so on touch screens fields are 16px */
@media (pointer:coarse){input,textarea{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* Shared controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:600 14px var(--label);white-space:nowrap;transition:transform .08s,background .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--ink-hover)}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--surface)}
.btn.small{min-height:36px;padding:0 12px;font-size:13px}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid transparent;background:none}
.icon-btn:hover{background:var(--surface)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.seg button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border:0;border-radius:999px;background:none;font:600 13px var(--label);color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:600 11px var(--label);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.label{font:600 12px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field{display:grid;gap:6px}
.field input,.field textarea,textarea.plain{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:10px 12px;resize:vertical}
.field input:focus,.field textarea:focus,textarea.plain:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}

/* Home: one big drop zone, with your drops in a sidebar beside it (a drawer on phones). Approved landing: prototype/landing.html. */
.screen{flex:1;min-height:0}
#home{display:flex;overflow:hidden}
.page{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 24px 20px;overflow:auto}
.home-top{display:flex;align-items:center;gap:8px;min-height:44px;margin-bottom:16px}
.wordmark{display:flex;align-items:center;gap:10px;font:400 26px/1 var(--display);letter-spacing:-.01em}
.drops-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:600 13px var(--label)}
.drops-btn:hover{background:var(--surface)}
.drops-btn b{font-weight:600;color:var(--muted)}
.zone{flex:1;min-height:420px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;border:2px dashed var(--edge);border-radius:28px;background:var(--white);cursor:pointer;transition:border-color .15s,background .15s}
.zone:hover{border-color:var(--edge-hover)}
.zone.over{border-color:var(--accent);background:var(--over)}
/* With the water running (water.js), its canvas draws the sheet and the wavy dashed edge in these colours */
.zone{--fill:var(--white)}
.zone:hover{--edge:var(--edge-hover)}
.zone.over{--edge:var(--accent);--fill:var(--over)}
.zone.wet{border-color:transparent;background:none}
.zone .water{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);pointer-events:none}
.zone>:not(.water){position:relative}
.zone h1{margin:0;font:400 clamp(52px,9vw,112px)/.98 var(--display);letter-spacing:-.025em}
.zone h1>span{display:block;white-space:nowrap}
.zone h1 em{display:block;margin-top:.1em;color:var(--accent)}
/* "comments" gets a pen mark, the way a reviewer would underline it; it draws itself once */
.marked{position:relative;display:inline-block}
.marked svg{position:absolute;left:-6%;bottom:-.02em;width:112%;height:.26em;overflow:visible;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.marked path{stroke-dasharray:1 2;stroke-dashoffset:1;animation:draw .9s .5s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.marked path{stroke-dashoffset:0}}
.zone .sub{margin:22px 0 0;max-width:42ch;font:400 19px/1.45 var(--body);color:var(--muted);text-wrap:balance}
.go{margin-top:44px;display:grid;justify-items:center;gap:14px}
.sub+.go{margin-top:32px}
.btn.big{min-height:56px;padding:0 28px;font-size:16px}
.hint{margin:0;font:500 13px var(--label);color:var(--muted)}
.zone .over-label{display:none;margin:44px 0 0;font:400 32px var(--display);color:var(--accent)}
.zone.over .go{display:none}
.zone.over .over-label{display:block}
.foot{display:flex;margin-top:14px;font:500 12px var(--label);color:var(--muted)}
.foot .warn{padding:4px 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn)}
.side{flex:none;width:300px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--paper)}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:16px 12px 8px 20px;min-height:76px}
.side-head h2{margin:0;font:400 26px/1 var(--display)}
.side-list{flex:1;overflow:auto;padding:4px 10px 16px;display:grid;align-content:start;gap:2px}
.drop-item{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:12px;background:none;text-align:left}
.drop-item:hover{background:var(--surface)}
.drop-item .thumb{width:48px;height:36px;border-radius:7px;font-size:11px;box-shadow:none}
.drop-item>span:last-child{min-width:0}
.drop-item h3{margin:0;font:600 14px/1.3 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-item .meta{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-item .dot{width:7px;height:7px;margin-right:4px;vertical-align:1px}
.side-note{margin:0;padding:14px 20px;border-top:1px solid var(--line);font:500 12px var(--label);color:var(--muted)}
.scrim{display:none}
/* Desktop: the sidebar sits beside the zone and can be closed; the Drops button brings it back */
@media (min-width:761px){
  #home:not(.side-closed) .drops-btn{display:none}
  #home.side-closed .side{display:none}
}
.thumb{width:72px;height:50px;border-radius:8px;background:var(--surface);display:grid;place-items:center;overflow:hidden;font:600 13px var(--label);color:var(--muted);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.thumb img{width:100%;height:100%;object-fit:cover}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2f6fd6}

/* Review */
#review{display:flex;flex-direction:column}
.topbar{flex:none;display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.topbar .name{display:flex;align-items:center;gap:8px;min-width:0;margin-right:auto}
.topbar .name h1{margin:0;font:600 16px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .name h1.renames{cursor:text}
#title-edit{min-width:8ch;max-width:100%;field-sizing:content;margin:-3px -6px;padding:2px 5px;border:1px solid var(--accent);border-radius:6px;background:var(--white);color:inherit;font:600 16px var(--body)}
#title-edit:focus{outline:none}
.topbar .tools{display:flex;align-items:center;gap:8px}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:46px;z-index:30;min-width:250px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--white);box-shadow:var(--shadow)}
.menu button,.menu label{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:8px;background:none;text-align:left;font-size:14px;cursor:pointer}
.menu button:hover,.menu label:hover{background:var(--surface)}
.menu small{display:block;color:var(--muted);font-size:12px;line-height:1.3}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.banner{flex:none;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--banner);border-bottom:1px solid var(--banner-line);font-size:14px}
.banner .who{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font:600 12px var(--label);flex:none}

/* Flow timeline: the screens of a drop along a track at the bottom */
.timeline{flex:none;display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);background:var(--paper)}
.timeline .steps-nav{flex:none;display:flex;align-items:center;gap:2px}
.timeline .steps-nav .icon-btn{width:34px;height:34px}
.timeline .steps-nav .icon-btn:disabled{opacity:.3;cursor:default}
.timeline .count{flex:none;min-width:44px;font:600 12px var(--label);color:var(--muted);text-align:center}
.track{flex:1;min-width:0;display:flex;align-items:center;overflow-x:auto;padding:4px 2px;scrollbar-width:thin}
.track .link{flex:none;width:28px;height:2px;background:var(--line)}
.track .link.done{background:var(--ink)}
.shot{position:relative;flex:none;display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:12px;background:var(--white);text-align:left}
.shot:hover{border-color:var(--edge-hover)}
.shot[aria-current=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.shot .thumb{width:46px;height:34px;border-radius:7px;font-size:11px}
.shot b{display:block;font:600 13px/1.2 var(--body);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot small{display:block;font:500 11px var(--label);color:var(--muted)}
.shot .dot{position:absolute;top:-3px;right:-3px;border:2px solid var(--paper);width:12px;height:12px}
/* Reordering: a movable screen can be dragged along the track; an accent bar in the gap shows where it will land */
.shot.movable{cursor:grab}
.shot.movable img{pointer-events:none}
.shot.dragging{opacity:.45;cursor:grabbing}
.shot.drop-before::before,.shot.drop-after::after{content:"";position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:2px;background:var(--accent)}
.shot.drop-before::before{left:-16px}
.shot.drop-after::after{right:-16px}
.shot.drop-after:has(+ .add-shot)::after{right:-8px}
.menu button:disabled{opacity:.4;cursor:default}
/* The drop's menu (prototype/header-menu.html revision 1): who can see it first, then the drop's actions; the screen's own menu from its card */
.menu-wrap .icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.menu-wrap .icon-btn{color:var(--text)}
/* The menu icon and the saving cloud share a spot; the cloud takes over for a moment after a change (showSaved) */
#more>span{grid-area:1/1;display:grid;place-items:center;transition:opacity .2s,transform .25s}
#more .sv{opacity:0;transform:scale(.6)}
#more[data-saved] .sv{opacity:1;transform:none}
#more[data-saved] .vis{opacity:0;transform:scale(.6)}
#more[data-saved="saving"] .sv{color:var(--text-secondary)}
#more[data-saved="saved"] .sv{color:var(--aurora-green)}
#more[data-saved="offline"] .sv{color:var(--warn)}
#more[data-saved="failed"] .sv{color:var(--lost)}
.menu{min-width:300px}
.menu svg.i{width:18px;height:18px;color:var(--text-secondary)}
.menu-status{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:4px 10px;padding:10px 10px 8px}
.menu-status svg{width:18px;height:18px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:var(--text)}
.menu-status b{display:block;font:600 15px var(--label);color:var(--text)}
.menu-status small{font-size:13px}
.menu .menu-status .btn{grid-column:2;justify-self:start;width:auto;min-height:36px;margin-top:6px;padding:0 12px;gap:6px;border:1px solid var(--border);background:var(--surface);font:600 13px var(--label);color:var(--text)}
.menu .menu-status .btn svg{width:15px;height:15px;margin:0}
.menu-status .pro{margin-left:2px;padding:2px 6px;background:var(--pink);color:var(--pink-text);font:700 10px/1.2 var(--label)}
.menu .danger,.menu .danger svg.i{color:var(--lost)}
.menu-label{margin:0;padding:8px 10px 4px;font:600 12px var(--label);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-more{flex:none;display:grid;place-items:center;width:30px;height:30px;margin:0 8px 0 -38px;position:relative;z-index:1;border:0;border-radius:8px;background:var(--surface);color:var(--text)}
.shot-more:hover,.shot-more[aria-expanded=true]{background:var(--border)}
.shot-more svg.i{width:18px;height:18px}
.shot:has(+ .shot-more){padding-right:44px}
.screen-menu{position:fixed;top:auto;right:auto;z-index:40;min-width:260px;max-width:calc(100vw - 16px)}
.menu button:disabled:hover{background:none}
.add-shot{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:46px;margin-left:12px;padding:0 14px;border:1px dashed var(--dashed);border-radius:12px;background:none;font:600 13px var(--label);color:var(--muted)}
.add-shot:hover{border-color:var(--ink);color:var(--ink)}
.show-panel b{font:700 13px var(--label)}
.work.panel-closed .panel{display:none}

.work{flex:1;min-height:0;display:flex}
.stage{position:relative;isolation:isolate;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface) radial-gradient(var(--dot) 1px,transparent 1px) 0 0/16px 16px;padding:12px 24px 24px}
/* With dots.js running, its canvas draws the dots, beneath everything else on the stage */
.stage.alive{background:var(--surface)}
.stage .dots{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.stagebar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-bottom:10px;flex-wrap:wrap}
.stagebar .left,.stagebar .right{display:flex;align-items:center;gap:10px}
.stagebar .hinttext{font:500 12px var(--label);color:var(--muted)}
.stagebar .seg{background:var(--white)}
.toolseg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.canvas{margin-left:68px}
.toolrail{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:6}
.toolrail .toolseg{flex-direction:column;gap:2px;padding:4px;border-radius:18px;background:var(--white);box-shadow:var(--shadow)}
.toolrail .toolseg button{flex-direction:column;justify-content:center;gap:3px;width:52px;min-height:54px;padding:6px 0;border-radius:14px;font-size:11px}
.canvas{position:relative;flex:1;min-height:0;overflow:auto}
.device{position:relative;margin:0 auto;height:100%;min-height:380px;max-width:1100px;transition:max-width .25s}
.device.phone{max-width:390px;max-height:820px}
.device iframe{display:block;width:100%;height:100%;border:0;border-radius:12px;background:#fff;box-shadow:var(--shadow)}
.device.commenting iframe{box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.overlay{position:absolute;inset:0;pointer-events:none}
.overlay.drawing{pointer-events:auto;cursor:crosshair;touch-action:none}
.imgbox{position:relative;margin:auto;width:fit-content;max-width:100%;touch-action:none}
.imgbox img{display:block;max-width:100cqw;max-height:100cqh;width:auto;height:auto;border-radius:6px;box-shadow:var(--shadow);user-select:none;-webkit-user-drag:none}
.imgbox.commenting{cursor:crosshair}
.note-card{max-width:440px;margin:60px auto;padding:22px;border-radius:14px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.note-card h2{margin:0 0 6px;font:600 16px var(--body)}
.note-card p{margin:0 0 14px;color:var(--muted)}

/* Marks */
.marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.marks .m{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.marks .m.box{fill-opacity:.08}
.marks .m.sel{stroke-width:4.5}
.marks .draft{stroke-dasharray:7 6;stroke:var(--ink)}
.marks .head{stroke:none}

/* Pins: a numbered circle centred on the spot (Adam, 2 November 2026; prototype/export.html) */
.pin{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border:0;background:none;pointer-events:auto;transition:transform .12s}
.pin i{position:absolute;inset:0;border-radius:50%;background:var(--c,var(--accent));border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pin b{position:relative;display:grid;place-items:center;height:100%;color:#fff;font:700 12px var(--label)}
.pin b.long{font-size:10px;letter-spacing:-.02em}
.pin:hover,.pin.sel{transform:scale(1.15);z-index:2}
.pin.sel i{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),0 2px 6px rgba(0,0,0,.25)}
.pin.draft i{background:var(--ink)}
.pin.draft b{color:var(--paper)}
.pin.resolved i{background:#9b9b94}
.pin-at{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--c,var(--accent));border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none}
.pin.new::after{content:'';position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#2f6fd6;border:2px solid #fff}

/* Comments panel */
.panel{flex:none;width:360px;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--paper);min-height:0}
.panel-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 4px}
.panel-head h2{margin:0;font:400 24px/1 var(--display)}
.panel-head h2 .narrow{display:none;align-items:center;gap:8px}
.panel-head h2 .bubble{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--pink);color:var(--pink-text);font:700 13px/1 var(--label)}
.panel-sub{flex:none;padding:0 16px 8px;font:500 12px var(--label);color:var(--muted)}
.page-meta{display:block;margin-top:2px;overflow-wrap:anywhere}
.page-meta a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sheet-toggle{display:none}
.tabs{flex:none;display:flex;gap:4px;padding:0 16px 10px;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:6px 10px;border-radius:999px;font:600 13px var(--label);color:var(--muted)}
.tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.list{flex:1;overflow:auto;padding:10px 12px 24px;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:8px}
.empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:14px}
.c{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--white);cursor:pointer;transition:border-color .15s}
.c:hover{border-color:var(--dashed)}
.c.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.c header{display:flex;align-items:center;gap:8px;font-size:13px}
.c .num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c);flex:none}
.c .num span{color:#fff;font:700 10px var(--label)}
.c header b{font-weight:600}
.c header time{color:var(--muted)}
.c .tags{margin-left:auto;display:flex;gap:4px}
.tag{font:600 10px var(--label);letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:var(--surface);color:var(--muted)}
.tag.new{background:#2f6fd6;color:#fff}
.c .quote{margin:8px 0 0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c .quote.lost{color:var(--lost)}
/* The picture of the spot, between the header and the text (drawn by app.js) */
.c .spot{display:block;width:100%;aspect-ratio:12/5;margin:10px 0 0;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.c .spot+.quote{margin-top:6px}
.c .text{margin:4px 0 0}
.c .replies{margin:10px 0 0;padding:0 0 0 12px;border-left:2px solid var(--line);display:grid;gap:8px}
.c .replies .r{font-size:14px}
.c .replies b{font-weight:600;margin-right:4px}
.c footer{display:flex;gap:4px;margin-top:8px}
.c footer button{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:4px 8px;margin-left:-8px;margin-right:8px;border-radius:6px;font:600 12px var(--label);color:var(--muted)}
.c footer button:hover{background:var(--surface);color:var(--ink)}
.c form{margin-top:8px;display:grid;gap:6px}
.c form div{display:flex;gap:6px;justify-content:flex-end}
/* Editing what you wrote: "edited" beside it, and a quiet Edit on your own replies */
.c .edited{font-size:12px;color:var(--muted)}
.c .redit{border:0;background:none;padding:2px 6px;margin-left:2px;border-radius:6px;font:500 12px var(--label);color:var(--muted)}
.c .redit:hover{background:var(--surface);color:var(--ink)}
.c .replies form{margin-top:0}
/* Markdown in comments and replies (markdown.js): quiet, in the card's own type */
.md{overflow-wrap:anywhere}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p,.md ul,.md ol,.md blockquote,.md pre,.md .table{margin:0 0 6px}
.md ul,.md ol{padding-left:20px}
.md li.task{list-style:none;margin-left:-20px}
.md li.task input{margin:0 6px 0 0;vertical-align:-1px;accent-color:var(--link)}
.md a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.md code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;padding:1px 4px;border-radius:4px;background:var(--surface)}
.md pre{padding:8px 10px;border-radius:8px;background:var(--surface);overflow:auto}
.md pre code{padding:0;background:none;white-space:pre}
.md blockquote{padding-left:10px;border-left:2px solid var(--line);color:var(--muted)}
.md hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.md .table{overflow:auto}
.md table{border-collapse:collapse;font-size:13px}
.md th,.md td{padding:3px 8px;border:1px solid var(--line);text-align:left}
/* A reply of one paragraph runs on from its author's name, as before */
.c .replies .rtext:has(>p:only-child),.c .replies .rtext>p:only-child{display:inline}

/* Composer */
.composer{position:fixed;z-index:40;width:300px;padding:12px;border-radius:14px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.composer .who{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:var(--muted)}
.composer .who i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.composer .quote{font-size:12px;color:var(--muted);margin:-4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer textarea{min-height:76px}
.composer .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.composer .row small{color:var(--muted);font:500 11px var(--label)}

/* Dialogs */
dialog{width:min(480px,calc(100vw - 32px));padding:0;border:0;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 24px 64px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(22,22,22,.35)}
dialog form,dialog .d-in{padding:24px;display:grid;gap:16px}
dialog h2{margin:0;font:400 32px/1.05 var(--display)}
dialog p{margin:0;color:var(--muted)}
dialog .d-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:4px}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;counter-increment:s;font-size:14px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font:700 12px var(--label)}
.summary{display:grid;gap:6px;padding:14px;border-radius:12px;background:var(--white);border:1px solid var(--line);font-size:14px}
.summary div{display:flex;gap:8px;align-items:center}
.swatches{display:flex;gap:10px}
.swatches label{position:relative}
.swatches input{position:absolute;opacity:0}
.swatches span{display:block;width:32px;height:32px;border-radius:50%;background:var(--c);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.swatches input:checked+span{box-shadow:0 0 0 2px var(--ink)}
.swatches input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translate(-50%,20px);opacity:0;max-width:calc(100vw - 32px);padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:14px;box-shadow:var(--shadow);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.drop-veil{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:var(--veil);border:3px dashed var(--accent);font:400 44px var(--display);pointer-events:none;text-align:center;padding:24px}

@media (max-width:760px){
  body{font-size:16px}
  .page{padding:10px 12px 14px}
  .home-top{margin-bottom:10px}
  .zone{border-radius:22px;padding:32px 12px}
  .go{margin-top:36px}
  .zone .sub{margin-top:16px;font-size:16px}
  .sub+.go{margin-top:28px}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:30;width:min(320px,86vw);box-shadow:0 0 40px rgba(22,22,22,.18);transform:translateX(-102%);visibility:hidden;transition:transform .25s,visibility .25s}
  #home.drawer .side{transform:none;visibility:visible}
  #home.drawer .scrim{display:block;position:fixed;inset:0;z-index:29;background:rgba(22,22,22,.28)}
  .foot{margin-top:10px}
  .topbar{padding:8px 8px 8px 4px;gap:4px}
  .topbar .seg,.widthseg{display:none}
  .topbar .send-label{display:none}
  .topbar .btn.primary{width:44px;padding:0}
  #review{padding-bottom:58px}
  .timeline{padding:6px 8px;gap:6px}
  .timeline .count{display:none}
  .shot{padding-right:8px}
  .shot b{max-width:90px}
  .add-shot span{display:none}
  .stage{padding:8px 10px 64px}
  .hide-panel,.show-panel{display:none!important}
  .work.panel-closed .panel{display:flex}
  .stagebar{min-height:40px;margin-bottom:8px}
  .stagebar .hinttext,.toolseg button span{display:none}
  /* With the hint hidden, the bar is empty unless it counts down or says the drop has ended: then it takes no room */
  .stagebar:not(:has(.countdown,.readonly)){display:none}
  .canvas{margin-left:52px}
  .toolrail{left:6px}
  .toolrail .toolseg button{width:40px;min-height:40px}
  .stagebar{flex-wrap:nowrap}
  .stagebar .seg button{padding:0 10px}
  .device,.device.phone{max-width:none;max-height:none}
  .imgbox img{max-height:none}
  .panel{position:fixed;left:0;right:0;bottom:0;z-index:20;width:auto;height:58px;border:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.08);transition:height .25s}
  .panel.open{height:min(72dvh,620px)}
  .panel-head{padding:6px 12px 6px 16px;min-height:56px}
  .panel-head h2{font-size:22px}
  .panel-head h2 .wide{display:none}
  .panel-head h2 .narrow{display:inline-flex}
  .sheet-toggle{display:grid}
  .panel:not(.open) .tabs,.panel:not(.open) .list,.panel:not(.open) .panel-sub{display:none}
  .menu{position:fixed;left:8px;right:8px;top:auto;bottom:8px;min-width:0}
  .screen-menu{left:8px!important;right:8px;bottom:8px!important;max-width:none}
  .shot:has(+ .shot-more){padding-right:40px}
}

/* App-only additions */
.wordmark{color:inherit;text-decoration:none}
.wordmark img,.wordmark .logo{display:block;width:28px;height:28px;border-radius:7px}
.panel-actions,.row-actions{display:flex;gap:4px;align-items:center}
.row-actions{gap:6px}
.sheet-toggle.flipped{transform:rotate(180deg)}

/* Drops in the cloud (prototype/share-link.html, revision 3): Share, who can see a drop, who has it open, the countdown, the paywall */
.share-btn{position:relative}
.share-btn.ended::after{content:'';position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#a33c1c;border:2px solid var(--paper)}
.linkline{display:flex;gap:8px;align-items:center;padding:6px 6px 6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.linkline input{flex:1;min-width:0;min-height:36px;border:0;background:none;padding:0;font:500 16px var(--label);color:var(--ink);text-overflow:ellipsis}
.linkline input:focus{outline:none}
dialog .fine{font-size:13px}
dialog .d-actions .off{margin-right:auto;color:var(--lost)}
.google{gap:10px}
.google svg{width:18px;height:18px;flex:none}
.plan{list-style:none;margin:0;padding:12px 14px;border-radius:12px;background:var(--surface);display:grid;gap:8px;font-size:14px}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start}
.plan svg{width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pro{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 11px var(--label);letter-spacing:.04em}
.home-top .account{margin-left:auto}
.home-top .drops-btn{white-space:nowrap}
.go-pro{margin-left:auto}
.go-pro:not([hidden]) + .account{margin-left:0}
.avatar{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font:600 15px var(--label)}
.account-head{display:flex;align-items:center;gap:12px}
.account-head .avatar{width:44px;height:44px;font-size:18px;flex:none}
.account-head h2{margin:0;overflow-wrap:anywhere}
.account-head p{margin:2px 0 0;font:500 13px var(--label);color:var(--muted);overflow-wrap:anywhere}
.people-wrap{position:relative}
.people{display:flex;align-items:center;padding:4px 4px 4px 10px;border:0;border-radius:999px;background:none;cursor:pointer}
.people:hover,.people[aria-expanded=true]{background:var(--surface)}
.people-panel{min-width:240px;max-width:320px;top:44px}
.people-panel .who-row{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;font-size:14px;overflow-wrap:anywhere}
.people-panel .who-row > span:first-child{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;font:600 11px var(--label)}
.people-panel .who-row.invited > span:first-child{background:var(--surface);color:var(--text-secondary)}
.people-panel .people-note{margin:0;padding:6px 10px 8px;font:500 12px/1.4 var(--label);color:var(--muted)}
.people-panel button{min-height:36px;color:var(--accent);font-weight:600}
.people span{display:grid;place-items:center;width:28px;height:28px;margin-left:-6px;border-radius:50%;border:2px solid var(--paper);background:var(--c);color:#fff;font:600 12px var(--label)}
.by{font:500 12px var(--label);color:var(--muted);white-space:nowrap}
.readonly{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font:500 12px var(--label)}
.c.fresh{animation:fresh 2.4s ease-out}
@keyframes fresh{0%,40%{box-shadow:0 0 0 2px var(--c)}100%{box-shadow:none}}
.countdown{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--white);border:1px solid var(--line);font:500 12px var(--label);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.countdown svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.countdown b{color:var(--ink);font-weight:600}
.countdown.soon{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.countdown.soon b{color:inherit}
.up{border:0;border-radius:999px;padding:4px 11px;margin-left:4px;background:var(--accent);color:var(--on-accent);font:600 12px var(--label);white-space:nowrap}
.value{margin:0;font-size:17px;color:var(--ink)!important}
.closes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 13px var(--label);color:var(--muted)}
.closes button{background:none;border:0;padding:0;color:var(--accent);font:600 13px var(--label);text-decoration:underline;text-underline-offset:3px}
.people-field{display:grid;gap:8px}
.or{display:flex;align-items:center;gap:10px;font:500 12px var(--label);color:var(--muted)}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
.loading-card{color:var(--muted)}
/* The paywall */
#paywall{overflow:auto;background:var(--paper)}
.pw{max-width:880px;margin:0 auto;padding:16px 24px 64px}
.pw-top{display:flex;align-items:center;gap:8px;min-height:44px}
.pw-top .wordmark{font-size:22px}
.pw-top .wordmark img{width:24px;height:24px}
.pw-hero{text-align:center;margin:28px auto 22px;max-width:560px;display:grid;gap:10px;justify-items:center}
.pw-hero h1{margin:0;font:400 clamp(40px,7vw,64px)/1 var(--display);letter-spacing:-.02em}
.pw-hero p{margin:0;color:var(--muted);font-size:17px}
.tiers{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:stretch}
.tier{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;border:1px solid var(--line);background:var(--white)}
.tier.pro-tier{border:2px solid var(--accent);box-shadow:var(--shadow)}
.tier header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tier h2{margin:0;font:400 30px/1 var(--display)}
.tier .yours{font:600 12px var(--label);color:var(--muted)}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font:400 48px/1 var(--display)}
.price span{color:var(--muted);font:500 14px var(--label)}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.tier li{display:grid;grid-template-columns:20px 1fr;gap:8px}
.tier li svg{width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pro-tier li svg{stroke:var(--accent)}
.tier .btn{margin-top:auto;justify-content:center}
.pw-fine{margin:18px 0 0;text-align:center;font:500 13px var(--label);color:var(--muted)}
@media (max-width:760px){
  .drops-btn .drops-word,#review .topbar .name .chip{display:none}
  .tiers{grid-template-columns:1fr}
  .tier.pro-tier{order:-1}
  .pw{padding:10px 16px 48px}
  .pw-hero{margin:14px auto 16px}
  .people-wrap,.by,.go-pro{display:none!important}
  .go-pro + .account{margin-left:auto}
  .stagebar .countdown .up,.stagebar .readonly .up{padding:4px 9px}
}

/* Aurora: restyles everything above (prototype/aurora.html). The sky's aurora is two veils that drift past each other over most of a
   minute; the glow under a call to act goes round under it every 4 seconds; reduced motion stops all of it. */
svg.defs{position:absolute}
body::before,body::after{content:'';position:fixed;left:-10%;right:-10%;top:0;height:70vh;z-index:-1;pointer-events:none}
body::before{background:radial-gradient(ellipse 40% 55% at 20% 0%,rgba(110,231,168,.10),transparent 70%),radial-gradient(ellipse 38% 60% at 55% 0%,rgba(156,130,234,.09),transparent 70%);animation:veil-a 47s ease-in-out infinite alternate}
body::after{background:radial-gradient(ellipse 36% 52% at 82% 0%,rgba(236,140,198,.08),transparent 70%),radial-gradient(ellipse 30% 45% at 45% 0%,rgba(156,130,234,.05),transparent 70%);animation:veil-b 61s ease-in-out infinite alternate}
@keyframes veil-a{from{transform:translateX(-3%) scaleY(1);opacity:.8}to{transform:translateX(4%) scaleY(1.12);opacity:1}}
@keyframes veil-b{from{transform:translateX(3%) scaleY(1.08);opacity:1}to{transform:translateX(-4%) scaleY(.94);opacity:.75}}
/* One turn of the glow's orbit (prototype/glow.html, A) */
@property --orbit{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes glow{to{--orbit:360deg}}
@keyframes glow-text{to{text-shadow:var(--aurora-glow-text-b)}}
.swatches input:focus-visible+span{outline:2px solid var(--link);outline-offset:3px}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* Buttons: primary is dark, deeper than the water, with frost text; the rest are transparent with silver text and a quiet border. Only
   the one call to act on each screen carries the drifting aurora: Choose a file, Share on a drop, Upgrade on the paywall (Adam). */
.btn{border-radius:8px;border-color:var(--border);background:transparent;color:var(--text-secondary);font:500 14px var(--label)}
.btn:hover{background:var(--surface);color:var(--text)}
.btn.primary{background:#06141f;border-color:#4f6b80;color:var(--text);box-shadow:var(--sea-shadow)}
.btn.primary:hover{background:#0c2131;border-color:#7590a6;color:var(--text)}
/* The glow orbits (Adam, 2 November 2026; prototype/glow.html, A at 4 seconds): green, violet and pink, a third of a turn apart, go
   round under the button on a wide, flat circle, each keeping its colour. Set on the button itself, where --orbit turns. */
#share-btn,#pw-go,.ways .way,#mcp-copy,#agent-make,#key-copy,.ex-go,.sh-copy,.rv-go,.rw-go,.ul-go,.ul-step{
  --aurora-glow:
    calc(cos(var(--orbit)) * 16px) calc(11px + sin(var(--orbit)) * 6px) 30px -12px var(--glow-green),
    calc(cos(var(--orbit) + 120deg) * 16px) calc(11px + sin(var(--orbit) + 120deg) * 6px) 30px -12px var(--glow-violet),
    calc(cos(var(--orbit) + 240deg) * 16px) calc(11px + sin(var(--orbit) + 240deg) * 6px) 30px -12px var(--glow-pink);
  box-shadow:var(--aurora-glow);animation:glow 4s linear infinite}
/* The landing's three ways in all carry it (prototype/agents.html revision 2), a third of a turn out of step so the lights move across them */
.ways .way:nth-child(2){animation-delay:-1.33s}
.ways .way:nth-child(3){animation-delay:-2.67s}
/* The first way in, Drop a file, is clear blue on any screen, its glow kept (Adam, 2 November 2026; prototype/blue-choose.html, A) */
.ways #choose{background:#2F7BEA;border-color:#2F7BEA;color:#fff}
.ways #choose:hover{background:#3D88F2;border-color:#3D88F2}
.btn.ghost{border-color:transparent}
.btn.big{min-height:52px;font-size:16px}
.icon-btn{width:44px;height:44px;border-radius:8px;color:var(--text-secondary)}
.icon-btn:hover{background:var(--surface);color:var(--text)}
.seg{border-radius:8px;background:var(--surface);border-color:var(--border)}
.seg button{min-height:38px;border-radius:6px;font:500 13px var(--label);color:var(--text-secondary)}
.seg button[aria-pressed=true]{background:var(--surface-raised);color:var(--text);box-shadow:none}
/* The tool that is on is frost; pink stays with the pins */
.toolseg button[aria-pressed=true]{background:var(--button-bg);color:var(--button-text)}
.tabs button{border-radius:8px;font:500 14px var(--label);color:var(--text-secondary)}
.tabs button[aria-pressed=true]{background:var(--surface-raised);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.drops-btn{min-height:32px;padding:0 10px 0 8px;border-radius:8px;background:transparent;font:500 13px var(--label);color:var(--text-secondary)}
.drops-btn svg.i{width:16px;height:16px}
.chip,.tag{border-radius:6px;font:500 13px var(--label);letter-spacing:0;text-transform:none}
.tag{font-size:12px}
.tag.new{background:var(--link);color:var(--button-text)}
/* A comment on the picture or the copy of the page, when the other is shown (prototype/picture-or-page.html) */
.tag.off{background:none;box-shadow:inset 0 0 0 1px var(--border);color:var(--text)}
.label{font:500 13px var(--label);letter-spacing:0;text-transform:none;color:var(--text-secondary)}
.field input,.field textarea,textarea.plain{border-radius:8px;background:var(--surface);border-color:var(--border)}
.field input:focus,.field textarea:focus,textarea.plain:focus{outline:2px solid var(--link);outline-offset:3px;border-color:var(--border)}

/* Headings: the system sans at 600 */
.wordmark{font:600 22px/1 var(--display);letter-spacing:-.01em}
.side-head h2,.panel-head h2{font:600 24px/1.2 var(--display)}
dialog h2{font:600 26px/1.2 var(--display)}
.tier h2,.pw-hero h1{font-weight:600;font-family:var(--display)}
.price b{font:600 40px/1 var(--display)}

/* The landing's line, the one heading past 32px. Its three lines left-align as a block, each with an icon in a small tile centred on
   the capitals (middle puts it on the lowercase letters' centre, the nudge lifts it), and the block stays centred in the zone. */
.zone h1{display:grid;justify-content:center;text-align:left;font:600 clamp(34px,4.6vw,52px)/1.12 var(--display);letter-spacing:-.02em}
.hl-icon{display:inline-grid;place-items:center;width:.86em;height:.86em;margin-right:.3em;vertical-align:middle;position:relative;top:-.06em;border-radius:.2em;background:var(--surface-raised);border:1px solid var(--border);box-shadow:var(--sea-shadow);font-style:normal}
.hl-icon svg{width:.5em;height:.5em;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* "Invite others." is frost white faintly tinted by the lights, green into violet into pink, drifting along the words over forty
   seconds, with the sea shadow beneath (a filter, since a text shadow would cover the tint). Each colour is 60% white; the lowest is
   still 9.8:1 against the zone. Without clipped backgrounds it is plain glacier blue. */
.zone h1 em{display:inline-block;margin-top:0;font-style:normal;color:var(--link);text-shadow:var(--sea-shadow-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .zone h1 em{background:linear-gradient(90deg,#C3F3DE,#D4CBF6 35%,#F2D1E6 55%,#D4CBF6 75%,#C3F3DE) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 .05em .02em rgba(1,8,15,.85)) drop-shadow(0 .14em .35em rgba(1,8,15,.7));animation:aurora-text 40s ease-in-out infinite alternate}
}
@keyframes aurora-text{to{background-position:100% 0}}
@media (forced-colors:active){.zone h1 em{background:none;color:CanvasText}}
/* The pen mark under "comments" runs green, violet, pink (its gradient, #aurora-ink, is in index.html and drifts on its own) */
.marked svg{stroke:url(#aurora-ink);filter:drop-shadow(0 0 6px rgba(156,130,234,.4))}
.zone .over-label{font:600 26px var(--display);color:var(--link);text-shadow:var(--aurora-glow-text);animation:glow-text 9s ease-in-out infinite alternate}
.zone .sub{font:400 18px/1.5 var(--body);color:var(--text-secondary)}
/* The small Paste button under the hint, on touch screens */
.paste-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:transparent;font:500 13px var(--label);color:var(--text-secondary)}
.paste-btn:active{background:var(--surface)}
.sub-icon{display:inline-block;width:1em;height:1em;margin-right:.4em;vertical-align:-.16em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hint,.stagebar .hinttext,.side-note,.foot,.panel-sub,.by,.closes{font-size:13px}
.drop-veil{font:600 32px var(--display);border-color:var(--link)}
@media (prefers-reduced-motion:reduce){body::before,body::after,.zone h1 em,.ways .way,#share-btn,#pw-go,#mcp-copy,#agent-make,#key-copy,.zone .over-label{animation:none!important}}

/* Home: the zone is a lighter sheet over the sea, so the depth shows through */
.zone{background:rgba(16,40,59,.55);border-color:var(--edge);border-radius:12px}
.zone{--fill:rgba(16,40,59,.55)}
.zone.over{--edge:var(--link);--fill:rgba(21,47,67,.7)}
.side{background:transparent;border-color:var(--border)}
.drop-item{border-radius:8px}
.drop-item h3{font:500 15px/1.3 var(--body)}
.drop-item .meta{font-size:13px}
/* How many comments a drop has, in a chat bubble at the end of its row */
.drop-item:has(.drop-bubble){grid-template-columns:auto minmax(0,1fr) auto}
.drop-bubble{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:11px 11px 11px 3px;background:var(--surface-raised);border:1px solid var(--border);font:600 12px/1 var(--label);color:var(--text)}
.drop-bubble .vh,.drop-item .vis .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.drop-item{position:relative}
.drop-item.expired>*{opacity:.5}
.drop-item.expired:hover>*{opacity:.75}
.thumb{box-shadow:none}
.dot{background:var(--link)}

/* Review */
.topbar{background:transparent;border-color:var(--border)}
.timeline{background:transparent;border-color:var(--border)}
.shot{border-radius:12px;background:var(--surface-raised)}
.shot[aria-current=true]{border-color:var(--link);box-shadow:0 0 0 1px var(--link)}
.shot b{font-weight:500}
.track .link.done{background:var(--link)}
.add-shot{border-radius:12px;font:500 13px var(--label)}
/* On phones the timeline is a slim strip: a smaller card for each screen, so the screen above keeps the room */
@media (max-width:760px){
  .timeline{padding:5px 8px;gap:4px}
  .timeline .steps-nav .icon-btn{width:30px;height:30px}
  .shot{gap:7px;padding:3px 9px 3px 3px;border-radius:9px}
  .shot .thumb{width:32px;height:24px;border-radius:6px;font-size:9px}
  .shot b{font-size:12px;max-width:110px}
  .shot small{font-size:10px}
  .shot-more{width:24px;height:24px;margin:0 6px 0 -30px}
  .shot:has(+ .shot-more){padding-right:32px}
  .add-shot{min-height:32px;margin-left:6px;padding:0 9px;border-radius:9px}
  .add-shot svg.i{width:16px;height:16px}
}
.stage,.stage.alive{background-color:rgba(16,40,59,.45)}
.toolrail .toolseg{border-radius:12px;background:var(--surface-raised);border:1px solid var(--border);box-shadow:var(--sea-shadow)}
.toolrail .toolseg button{border-radius:8px}
.device iframe,.imgbox img{box-shadow:var(--sea-shadow)}
.device.commenting iframe{box-shadow:0 0 0 2px var(--link),var(--sea-shadow)}
.menu{border-radius:12px;background:var(--surface-raised);box-shadow:var(--sea-shadow)}
.menu button,.menu label{min-height:44px;font-size:15px}
.note-card{border-radius:12px;padding:24px;box-shadow:none}

/* Comments: solid cards. The selected one is marked quietly in the pins' pink, with no aurora: on a drop only Share glows (Adam). */
.panel{background:rgba(4,18,29,.35);border-color:var(--border)}
.c{padding:20px;border-radius:12px;background:var(--surface-raised);box-shadow:var(--sea-shadow)}
.c:hover{border-color:var(--edge-hover)}
.c.sel{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink),var(--sea-shadow)}
.c header{font-size:14px}
.c header b{font-weight:500}
.c .quote{font-size:13px}
.c footer button{min-height:36px;border-radius:8px;font:500 13px var(--label);color:var(--text-secondary)}
.pin.sel i{box-shadow:0 0 0 3px rgba(203,184,209,.55),var(--sea-shadow)}
/* Drawing is in the aurora: your marks (in your starting pink) and any mark or pin being drawn run green into violet into pink across
   the screen (#aurora-mark, in index.html); other people's marks keep their own colours */
.marks .draft,.marks [stroke="#cbb8d1"]{stroke:url(#aurora-mark)}
.marks [fill="#161616"],.marks [fill="#cbb8d1"]{fill:url(#aurora-mark)}
.marks .draft{stroke-width:3.5}
.pin.draft i{background:linear-gradient(135deg,var(--aurora-green),var(--aurora-violet) 55%,var(--aurora-pink))}
.pin.draft b{color:var(--pink-text)}
.pin.new::after{background:var(--link);border-color:var(--bg)}
/* The pink you start with (model.js) is light, so numbers and initials on it are navy */
.pin[style*="#cbb8d1"] b,[style*="#cbb8d1"] .num span,.people span[style*="#cbb8d1"],.who-row > span[style*="#cbb8d1"],.banner .who[style*="#cbb8d1"]{color:var(--pink-text)}
.composer{padding:16px;border-radius:12px;background:var(--surface-raised);box-shadow:var(--sea-shadow)}

/* Dialogs, toasts, the paywall */
dialog{border:1px solid var(--border);border-radius:12px;background:var(--surface-raised);box-shadow:0 1px 2px rgba(1,8,15,.5),0 24px 56px -12px rgba(1,8,15,.85)}
dialog::backdrop{background:rgba(3,12,20,.7)}
.summary,.plan{background:var(--surface);border-radius:12px}
.toast{background:var(--button-bg);color:var(--button-text);border-radius:12px}
.share-btn.ended::after{background:var(--lost);border-color:var(--bg)}
.closes button{color:var(--link)}
.linkline{border-radius:8px;background:var(--surface)}
#paywall{background:transparent}
.tier{border-radius:12px;background:var(--surface-raised)}
.tier.pro-tier{border-color:var(--link);box-shadow:var(--sea-shadow)}

/* Zoom and moving around (prototype/zoom.html, revision 2). Cursor, Space or the middle button drag the canvas; an image is drawn bigger,
   so the canvas scrolls round it; a page is scaled inside a box the size it takes up (#zoomer), its pins scaled back by
   --unzoom so they keep their size, and marks keep their line width at any zoom. */
.canvas{touch-action:pan-x pan-y}
.canvas.moving{cursor:grab}
.canvas.panning,.canvas.panning *{cursor:grabbing!important}
.imgbox.zoomed{max-width:none}
.imgbox.zoomed img{max-width:none;max-height:none;height:auto}
.zoomer{position:relative;height:100%;margin:0 auto}
.zoomer.zoomed{height:auto}
.zoomer.zoomed .device{position:absolute;left:0;top:0;margin:0;max-width:none;max-height:none;transform-origin:0 0;transition:none}
.zoomer.zoomed :is(.pin, .pin-at){scale:var(--unzoom)}
/* An HTML page at fit: laid out in its window (desktop or phone) and scaled to the stage; its pins keep their size */
.zoomer.fitted{height:auto}
.zoomer.fitted .device{position:absolute;left:0;top:0;margin:0;min-height:0;max-width:none;max-height:none;transform-origin:0 0;transition:none}
.zoomer.fitted :is(.pin, .pin-at, .rx-pin){scale:var(--unzoom)}
.marks .m{vector-effect:non-scaling-stroke}
.toolseg hr{width:28px;margin:3px auto;border:0;border-top:1px solid var(--border)}
.viewbar{position:absolute;right:16px;bottom:16px;z-index:5;display:flex;align-items:center;gap:8px}
.viewbar .widthseg{gap:2px;border-radius:8px;background:var(--surface-raised);border:1px solid var(--border);box-shadow:var(--sea-shadow)}
.viewbar .widthseg button{justify-content:center;min-width:40px;height:40px;padding:0 8px}
.viewbar .widthseg button[aria-pressed=true]{background:var(--surface);color:var(--text)}
.zoombar{display:flex;align-items:center;gap:2px;padding:3px;border-radius:8px;background:var(--surface-raised);border:1px solid var(--border);box-shadow:var(--sea-shadow)}
.zoombar button{display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border:0;border-radius:6px;background:none;font:500 13px var(--label);color:var(--text-secondary)}
.zoombar button:hover{background:var(--surface);color:var(--text)}
#zoom-level{min-width:62px;font-variant-numeric:tabular-nums}
#zoom-level svg{display:none}

@media (max-width:760px){
  /* On a phone the tools stand in a row along the bottom of the stage (Adam), and the screen gets the full width. Fingers pinch to
     zoom, so the zoom bar keeps only its level (Fit or the percentage) beside the tools. */
  .canvas{margin-left:0}
  .toolrail{left:10px;right:auto;top:auto;bottom:8px;transform:none}
  .toolrail .toolseg{flex-direction:row;align-items:center}
  .toolseg hr{width:auto;height:28px;margin:0 3px;border-top:0;border-left:1px solid var(--border)}
  .viewbar{right:10px;bottom:8px}
  .zoombar button{min-width:44px;height:44px}
  #zoom-in,#zoom-out{display:none}
  /* The sans wordmark is wider than the serif was, so it shrinks to keep Sign in on screen */
  .wordmark{font-size:18px;gap:8px}
  .home-top{gap:6px}
  .side{background:var(--surface)}
  .panel{background:var(--surface);border-radius:12px 12px 0 0}
  .composer{border-radius:12px 12px 0 0}
  .toolrail .toolseg button{width:44px;min-height:44px}
}

/* The screen goes under the controls, as on a whiteboard (Adam, 2 November 2026): the canvas fills the stage, and the hint bar, the tools
   and the zoom float over it. At fit, its padding keeps the screen clear of them (--bar is the hint bar's height, from app.js); zoomed in
   past fit it has none, so the screen and its pins run edge to edge, under them. --pad-l and --pad-r are read by pdfFit. */
.stage{padding:0}
.canvas{--pad-t:calc(22px + var(--bar,44px));--pad-r:24px;--pad-b:24px;--pad-l:92px;position:absolute;inset:0;z-index:0;margin:0;padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l)}
/* At fit an image is as big as the space inside that padding allows (cqw and cqh are the canvas's), and sits in the middle of it */
.canvas{container-type:size}
.canvas:has(> .imgbox:not(.zoomed)){display:flex}
/* Zoomed in or out, the screen moves like an object on a whiteboard: room on every side lets it be dragged until only an edge of it shows.
   The canvas is a flex box then, so the room after the screen counts towards how far it scrolls. */
.canvas.free{display:flex;align-items:flex-start}
.canvas.free > :is(.imgbox,.zoomer,.pdfdoc){flex:none;margin:calc(100cqh - 64px) calc(100cqw - 64px)}
.canvas.zoomed,.canvas.zoomed .pdfdoc{padding:0}
.stagebar{position:absolute;top:12px;left:24px;right:24px;z-index:4;margin:0;pointer-events:none}
.stagebar :is(button,.countdown,.readonly){pointer-events:auto}
.stagebar .hinttext{text-shadow:var(--sea-shadow-text)}
/* On a phone the screen fills the stage edge to edge at fit too, and the tools, the zoom and any countdown float over it (Adam, 2 November
   2026: “it should show the toolbars above the markdown document”) */
@media (max-width:760px){
  .canvas{--pad-t:0px;--pad-r:0px;--pad-b:0px;--pad-l:0px}
  .stagebar{top:8px;left:10px;right:10px}
  .device iframe{border-radius:0}
}

/* ---------- Reviewing on a phone (prototype/mobile-feed.html revision 4, Adam, 3 November 2026) ----------
   The screen runs edge to edge and swipes sideways to the next one; dots say where you are and Screens shows them all. The comments are a
   sheet at the foot whose height the screen gives up, so pulling it up shrinks the screen rather than covering it: folded, it shows the
   screen's first comment and its reactions. The tools are one switch, Annotate: on, a tap comments, a hold reacts and a drag draws, and the
   comment box then takes the sheet over until it's posted or cancelled. On a wide screen none of this shows. */
.screens-btn,.annotate-btn,.annotate-hint,.screen-dots,.rx-mini,.screens-sheet,.composer .cnum,.cb-grip,.cb-icon,.cb-about,.composer .btn svg{display:none}
@media (max-width:760px){
  :root{--sheet-down:calc(164px + env(safe-area-inset-bottom,0px))}
  #review{--sheet:var(--sheet-down);padding-bottom:var(--sheet);transition:padding-bottom .28s cubic-bezier(.2,.8,.2,1)}
  #review:has(#panel.open){--sheet:min(60dvh,560px)}
  #review.sheet-moving{transition:none}
  #review.sheet-moving .panel{transition:none}
  .timeline,.toolrail{display:none!important}
  .stage{overflow:hidden}
  .topbar{min-height:52px}
  .screens-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:600 13px var(--label);font-variant-numeric:tabular-nums;white-space:nowrap}
  .screens-btn[hidden]{display:none}
  .screens-btn svg.i{width:15px;height:15px}

  /* At fit a finger scrolls a tall screen up and down itself; sideways is the app's, for the next screen */
  .canvas:not(.zoomed){touch-action:pan-y}
  .canvas:not(.zoomed) .imgbox:not(.commenting){touch-action:pan-y}
  .canvas.swiping{transition:none}
  .screen-dots{position:absolute;left:50%;bottom:16px;z-index:5;display:flex;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(3,12,20,.6);transform:translateX(-50%);pointer-events:none;transition:opacity .2s}
  .screen-dots[hidden]{display:none}
  .screen-dots i{width:6px;height:6px;border-radius:3px;background:rgba(241,245,248,.35);transition:width .2s,background .2s}
  .screen-dots i.on{width:16px;background:var(--text)}
  .screen-dots i.more{transform:scale(.6)}

  /* Annotate, floating at the foot of the screen: frost when on, when the screen gets a frost edge and a line saying what each touch does */
  .annotate-btn{position:absolute;left:10px;bottom:8px;z-index:6;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px 0 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised);color:var(--text);font:600 14px var(--label);box-shadow:var(--sea-shadow)}
  .annotate-btn[hidden]{display:none}
  .annotate-btn svg.i{width:20px;height:20px}
  .annotate-btn[aria-pressed=true]{background:var(--button-bg);border-color:transparent;color:var(--button-text)}
  .stage.commenting::after{content:'';position:absolute;inset:0;z-index:4;border:2px solid var(--link);pointer-events:none}
  .annotate-hint{position:absolute;left:50%;top:10px;z-index:5;display:flex;gap:10px;margin:0;padding:6px 12px;border-radius:999px;background:rgba(3,12,20,.8);font:500 12px var(--label);color:var(--text-secondary);white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .2s}
  .annotate-hint b{font-weight:600;color:var(--text)}
  .stage.commenting .annotate-hint{opacity:1}
  .stage.commenting .screen-dots,.stage.commenting .stagebar{opacity:0}
  .imgbox.commenting,.pdfdoc.commenting{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

  /* The sheet */
  .panel,.panel.open{height:var(--sheet);border-radius:14px 14px 0 0;transition:height .28s cubic-bezier(.2,.8,.2,1)}
  .panel-head{position:relative;min-height:52px;padding:10px 8px 2px 16px;gap:8px;touch-action:none;cursor:grab}
  .panel-head::before{content:'';position:absolute;left:50%;top:6px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border)}
  .panel-head h2{font-size:17px;white-space:nowrap}
  .rx-mini{display:flex;gap:4px;margin-left:auto;min-width:0;overflow:hidden}
  .panel.open .rx-mini{display:none}
  .rx-mini .rx-chip{height:28px;padding:0 8px;gap:3px;flex:none}

  /* The zoom: a small pill, a magnifier and the level beside it (Adam: the Fit button was “way too large”) */
  .viewbar{bottom:12px}
  .zoombar{padding:0;border-radius:999px}
  #zoom-level{display:inline-flex;align-items:center;gap:5px;min-width:0;height:36px;padding:0 12px 0 10px;border-radius:999px;font:600 13px var(--label);color:var(--text)}
  #zoom-level svg{display:block;width:16px;height:16px}
  .panel.open .panel-actions{margin-left:auto}
  .panel:not(.open) .tabs,.panel:not(.open) .panel-sub{display:none}
  /* Folded: the first comment on one line, its number, who wrote it and the start of it */
  .panel:not(.open) .list{display:block;flex:1;min-height:0;overflow:hidden;padding:0 16px}
  .panel:not(.open) .list .rx-summary,.panel:not(.open) .list .c~.c,.panel:not(.open) .c :is(.spot,.quote,.replies,footer,.tags,time){display:none}
  .panel:not(.open) .c{display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;box-shadow:none}
  .panel:not(.open) .c header{display:contents}
  .panel:not(.open) .c .text{flex:1;min-width:0;margin:0;font-size:15px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary)}
  .panel:not(.open) .c .text>*{display:inline;margin:0}
  .panel:not(.open) .empty{margin:0;padding:2px 0;font-size:14px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .c{padding:14px}

  /* Every screen at once */
  .screens-sheet{position:fixed;inset:0;z-index:45;display:flex;align-items:flex-end;background:rgba(3,12,20,.7)}
  .screens-sheet[hidden]{display:none}
  .ss-in{width:100%;max-height:80dvh;overflow:auto;padding:16px max(14px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));border:1px solid var(--border);border-bottom:0;border-radius:14px 14px 0 0;background:var(--surface-raised)}
  .ss-in h2{margin:0 0 12px;font:600 16px var(--label)}
  .ss-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ss-cell{position:relative;min-width:0}
  .ss-tile{position:relative;display:grid;gap:6px;width:100%;min-width:0;padding:0;border:0;background:none;color:var(--text);text-align:left}
  .ss-tile .thumb{width:100%;height:auto;aspect-ratio:3/4;border-radius:8px;font-size:15px}
  .ss-tile .thumb img{object-position:left top}
  .ss-tile[aria-current=true] .thumb{outline:2px solid var(--text);outline-offset:2px}
  .ss-tile b{display:block;font:600 13px var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ss-tile small{display:block;font:500 12px var(--label);color:var(--text-secondary)}
  .ss-more{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:8px;background:rgba(3,12,20,.75);color:var(--text)}
  .ss-adds{display:grid;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:3/4}
  .ss-add{width:100%;display:grid;place-items:center;align-content:center;gap:6px;border:1px dashed var(--dashed);border-radius:8px;background:none;color:var(--text-secondary);font:600 13px var(--label)}

}
@media (max-width:760px) and (prefers-reduced-motion:reduce){#review,.panel{transition:none}}

/* A PDF (prototype/pdf.html, revision 1): its pages one under another, each a white sheet with its text laid over it, invisible but
   selectable. Comments sit in the overlay over the whole column: text comments as highlights numbered just after the text. */
.pdfdoc{position:relative;width:fit-content;margin:0 auto;padding-bottom:24px}
.pdfdoc .sheets{display:grid;gap:20px}
.sheet{position:relative;overflow:hidden;background:#fff;border-radius:4px;box-shadow:var(--sea-shadow);--scale-round-x:1px;--scale-round-y:1px}
.sheet canvas{display:block;width:100%;height:100%}
.pdfdoc.commenting .sheet{cursor:crosshair}
.pdfdoc.drawing{touch-action:none}
.pdfdoc .overlay{z-index:3}
/* pdf.js's text layer (its own viewer's rules, trimmed) */
.textLayer{position:absolute;inset:0;overflow:clip;text-align:initial;opacity:1;line-height:1;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:1;
  --min-font-size:1;--text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv:calc(1 / var(--min-font-size))}
.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%}
.textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){z-index:1;--font-height:0;font-size:calc(var(--text-scale-factor) * var(--font-height));--scale-x:1;--rotate:0deg;transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}
.textLayer .markedContent{display:contents}
.textLayer ::selection{background:rgba(110,160,255,.38)}
.textLayer br::selection{background:transparent}
.textLayer .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:0;cursor:default;user-select:none}
.textLayer.selecting .endOfContent{top:0}
.pdfdoc.drawing .textLayer{pointer-events:none;user-select:none}
.marks rect.hl{stroke:none;fill-opacity:.32;mix-blend-mode:multiply}
.marks rect.hl.sel{fill-opacity:.5}
.tpin{position:absolute;display:grid;place-items:center;min-width:20px;height:20px;margin:-10px 0 0 4px;padding:0 5px;border:2px solid #fff;border-radius:10px;background:var(--c,var(--accent));color:#fff;font:700 11px var(--label);box-shadow:0 2px 6px rgba(0,0,0,.25);pointer-events:auto;cursor:pointer;transition:transform .12s}
.tpin:hover,.tpin.sel{transform:scale(1.15);z-index:2}
.tpin.sel{box-shadow:0 0 0 3px rgba(203,184,209,.55),var(--sea-shadow)}
.tpin.resolved{background:#9b9b94}
.tpin.draft{background:linear-gradient(135deg,var(--aurora-green),var(--aurora-violet) 55%,var(--aurora-pink));color:var(--pink-text)}
.tpin[style*="#cbb8d1"]{color:var(--pink-text)}
/* The bar over selected text */
.selbar{position:fixed;z-index:45;display:flex;gap:4px;padding:6px;border-radius:12px;background:var(--surface-raised);border:1px solid var(--border);box-shadow:var(--sea-shadow);transform:translateX(-50%)}
.selbar[hidden],.selbar [hidden]{display:none}
.selbar .rx-in-bar{display:flex;align-items:center;gap:0;padding:0 2px}
.selbar .rx{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:none;font-size:19px;line-height:1;transition:transform .1s,background .1s}
.selbar .rx:hover,.selbar .rx:focus-visible{background:var(--surface);transform:scale(1.12)}
/* Comment and Copy are icons, so the bar stays one short row */
.selbar .ico{width:34px;padding:0;justify-content:center}
.selbar .ico svg{margin:0}

/* Reactions (prototype/reactions.html revision 1): pins of an emoji, how many when several people reacted the same way at one spot, the six
   by a spot, who reacted, and a row of chips above the comments */
.rx-pin{position:absolute;display:inline-flex;align-items:center;justify-content:center;gap:3px;height:30px;min-width:30px;padding:0 4px;translate:-50% -50%;border:0;border-radius:999px;background:none;color:#fff;font:700 12px var(--label);text-shadow:0 1px 3px rgba(1,8,15,.8);pointer-events:auto;cursor:pointer;transition:transform .12s}
.rx-pin:not(:has(b)){padding:0}
.rx-pin span{font-size:20px;line-height:1;filter:drop-shadow(0 1px 2px rgba(1,8,15,.55)) drop-shadow(0 2px 6px rgba(1,8,15,.35))}
.rx-pin:hover,.rx-pin.lit{transform:scale(1.12)}
.rx-pin.new{animation:rx-pop .28s ease-out}
@keyframes rx-pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.zoomer.zoomed .rx-pin{scale:var(--unzoom)}
.rx-picker{position:fixed;z-index:60;display:flex;gap:2px;padding:5px;border:1px solid var(--border);border-radius:999px;background:var(--surface-raised);box-shadow:var(--sea-shadow)}
.rx-picker button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;font-size:22px;line-height:1;transition:transform .1s,background .1s}
.rx-picker button:hover,.rx-picker button:focus-visible{background:var(--surface);transform:scale(1.15)}
.rx-who{position:fixed;z-index:60;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 16px);padding:8px 8px 8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised);box-shadow:var(--sea-shadow);font:500 13px var(--label);color:var(--text)}
.rx-who span{font-size:18px}
.rx-who .icon-btn{flex:none;width:32px;height:32px}
.rx-picker[hidden],.rx-who[hidden]{display:none}
/* Pins and reactions (just their emoji) are see-through at rest so the screen shows through them, and solid when pointed at,
   picked or clicked */
.pin,.tpin,.rx-pin{opacity:.6;transition:transform .12s,opacity .12s}
.pin:is(:hover,:focus-visible,.sel,.draft),.tpin:is(:hover,:focus-visible,.sel,.draft),.rx-pin:is(:hover,:focus-visible,.open,.lit,.new){opacity:1}
.rx-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.rx-summary h3{margin:0 4px 0 0;font:600 12px var(--label);color:var(--muted)}
.rx-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-raised);color:var(--text);font:600 12px var(--label)}
.rx-chip span{font-size:15px;line-height:1}
.rx-chip.mine{border-color:var(--link)}
.rx-chip:hover{border-color:var(--edge-hover)}
@media (max-width:760px){
  .rx-pin{height:28px;min-width:28px}
  .rx-picker button{width:38px;height:38px;font-size:21px}
  .selbar .rx{width:32px;height:32px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){.rx-pin.new{animation:none}}

/* The field under the comments for the whole screen: a quiet strip at the panel's foot */
.whole{flex:none;padding:10px 12px 12px;border-top:1px solid var(--border)}
.whole textarea{display:block;width:100%;min-height:44px;max-height:160px;padding:11px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:400 16px/1.35 var(--body);resize:none}
.whole textarea::placeholder{color:var(--text-secondary)}
.whole textarea:focus{outline:2px solid var(--link);outline-offset:3px}
@media (max-width:760px){.whole{padding-bottom:max(12px,env(safe-area-inset-bottom))}}

/* The landing scrolls (prototype/landing-more.html, revision 4): the drop zone still fills the first view, its footer leads down to how it
   works, what people use it for, other ways to give feedback and questions, then the site's footer. The sections are written by scripts/pages.mjs,
   and the static pages (site.css) use the same cards. */
.fold{flex:none;display:flex;flex-direction:column;min-height:calc(100dvh - 36px)}
.fold .zone{flex:1}
.foot{flex-direction:column;align-items:center;gap:8px;margin-top:10px}
.foot>span:empty{display:none}
.how-btn{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-height:44px;padding:4px 14px;border:0;border-radius:8px;background:none;font:500 14px var(--label);color:var(--text-secondary)}
.how-btn:hover{color:var(--text)}
.how-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}

.home-more{width:100%;max-width:1080px;margin:0 auto;padding:0 8px}
.home-more section{padding:96px 0 0}
/* The bento under its heading (built from stage/, its own styles scoped under .dc-bento) */
.bento-slot{margin-top:32px;min-height:720px}
@media (max-width:899px){.bento-slot{min-height:0}}
.home-more h2,.site-main h2{margin:0;font:600 clamp(28px,3.4vw,40px)/1.15 var(--display);letter-spacing:-.02em;text-wrap:balance}
.lede{margin:12px 0 0;max-width:56ch;font-size:18px;color:var(--text-secondary);text-wrap:pretty}
.home-more h3,.site-main h3{margin:0;font:600 18px/1.3 var(--body)}
.card{border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--sea-shadow);color:inherit}
a.card{text-decoration:none;transition:border-color .15s,background .15s}
a.card:hover{border-color:var(--edge-hover);background:var(--surface-raised)}
.eyebrow{display:block;margin:0 0 6px;font:600 11px var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.small-print{margin:16px auto 0;max-width:46ch;font-size:13px;color:var(--text-secondary)}

/* The old How it works pictures, now drawn only in the invite welcome's tiles */
.pic .dash{fill:rgba(16,40,59,.7);stroke:var(--edge);stroke-width:1.5;stroke-dasharray:6 5}
.pic .file path{fill:var(--surface-raised);stroke:var(--edge-hover);stroke-width:1.25;stroke-linejoin:round}
.pic .file text{font:600 9px var(--label);fill:var(--text-secondary);text-anchor:middle}
.pic .down{fill:none;stroke:var(--link);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pic .win{fill:var(--surface-raised);stroke:var(--border)}
.pic .bar{fill:#0c2131}
.pic .line{fill:#2a4458}
.pic .img{fill:#1d3a50}
.pic .mark{fill:none;stroke:url(#how-aurora);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pic .pin-dot{fill:var(--pink)}
.pic .pin-num{font:700 9px var(--label);fill:var(--pink-text);text-anchor:middle}
.pic .note-box{fill:#10283B;stroke:var(--border)}
.pic .note-edge{fill:var(--pink)}
.pic .link-pill{fill:#06141f;stroke:var(--edge-hover)}
.pic .link-icon{fill:none;stroke:var(--link);stroke-width:1.5;stroke-linecap:round}
.pic .url{font:500 9.5px var(--label);fill:var(--text)}
.pic .face{stroke:#0c2131;stroke-width:2}
.pic .face-n{font:700 10px var(--label);fill:#0c2131;text-anchor:middle}
.pic .bubble{fill:var(--surface-raised);stroke:var(--border)}
.pic .say{font:500 9px var(--label);fill:var(--text-secondary)}
.pic .live{fill:var(--aurora-green)}
.pic .spark{fill:none;stroke:var(--link);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pic .back{fill:none;stroke:var(--pink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 4}

/* What people use it for, each tile a link to its page */
.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:36px 0 0}
.use{display:block;padding:20px 20px 22px}
.use .hl-icon,.related .hl-icon,.hero>.hl-icon{display:grid;width:40px;height:40px;margin:0 0 16px;top:0;border-radius:9px}
.use .hl-icon svg,.related .hl-icon svg,.hero>.hl-icon svg{width:20px;height:20px}
.use p{margin:8px 0 0;color:var(--text-secondary)}

/* Another way to give feedback: the usual way, then the same with DropComments; each row a link to its page */
.swaps{display:grid;gap:12px;margin:36px 0 0;padding:0;list-style:none}
.swap{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1.15fr);align-items:center;gap:8px;padding:18px 22px}
.swap-was p{margin:4px 0 0;font-size:15px;color:var(--text-secondary);opacity:.8}
.swap-to{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);color:var(--link)}
.swap-to svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.swap-now p{margin:0;color:var(--text)}
.swap-now .eyebrow{color:var(--link)}

/* Questions, each opening in place */
.faq{display:grid;gap:8px;margin:28px 0 0;max-width:760px}
.faq details{border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 18px;font:600 16px/1.4 var(--body);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{margin:0;padding:0 18px 16px;max-width:62ch;color:var(--text-secondary)}
.faq a,.prose a{color:var(--link);text-decoration:underline;text-underline-offset:2px}

/* The last word: back to dropping a file */
.home-end{padding:112px 0 72px;text-align:center}
.home-end .lede{margin:12px auto 0}
.home-end .btn{margin-top:28px}

/* The site's footer, on the landing and every static page */
.site-foot{width:100%;max-width:1080px;margin:24px auto 0;padding:40px 8px 8px;border-top:1px solid var(--border)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-cols h2{margin:0 0 10px;font:600 13px var(--label);color:var(--text)}
.foot-cols ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.foot-cols a,.foot-line a:not(.wordmark){display:inline-flex;align-items:center;min-height:32px;font-size:14px;color:var(--text-secondary);text-decoration:none}
.foot-cols a:hover,.foot-line a:hover{color:var(--text)}
.foot-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:32px 0 0;font-size:13px;color:var(--text-secondary)}
.foot-line .wordmark{font-size:16px;gap:8px}
.foot-line .wordmark img{width:20px;height:20px;border-radius:5px}
.foot-line a:last-child{margin-left:auto}

@media (max-width:960px){
  .uses{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .fold{min-height:calc(100dvh - 24px)}
  .home-more{padding:0 4px}
  .home-more section{padding-top:72px}
  .lede{font-size:16px}
  .uses{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
  .swaps{margin-top:24px}
  .swap{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 18px}
  .swap-to{transform:rotate(90deg)}
  .home-end{padding:88px 0 48px}
  .foot-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-cols nav:last-child{grid-column:1/-1}
  .foot-line a:last-child{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.how-btn svg{animation:none}}

/* ---------- Agents (prototype/agents.html revision 3) ---------- */
/* The landing's three ways in: Drop a file (Choose a file on a touch screen), Paste from clipboard, Connect an AI agent */
.ways{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px}
.ways .way{gap:10px;padding:0 22px}
.ways svg.i{width:18px;height:18px}
.ways kbd{margin-left:2px;padding:1px 6px;border:1px solid var(--border);border-radius:4px;font:500 12px var(--label);color:#8fa3b3}
@media (pointer:coarse){.ways kbd{display:none}}
@media (max-width:760px){.ways{flex-direction:column;align-items:stretch;gap:14px;width:min(320px,100%);margin:0 auto}.go{justify-items:stretch;width:100%}}

/* An agent's mark, a rounded square with a spark where a person has a round initial, and "Agent" beside its name */
.bot{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:9px;background:#0c2131;border:1px solid var(--edge-hover);color:var(--link);vertical-align:middle}
.bot svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bot.s{width:22px;height:22px;border-radius:6px}
.agent-tag{display:inline-flex;align-items:center;gap:4px;flex:none;height:20px;padding:0 7px;border-radius:6px;border:1px solid var(--edge-hover);background:#0c2131;color:var(--link);font:500 11px var(--label);white-space:nowrap;vertical-align:1px}
.agent-tag svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c header b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c .tags{flex:none}
.c .tags .tag,.c header time{white-space:nowrap}
.c .replies .who{display:flex;align-items:center;gap:6px;margin-bottom:2px;min-width:0}
.c .replies .who b{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.by{display:inline-flex;align-items:center;gap:6px}

/* The account's agents */
.agents-sec{display:grid;gap:12px}
.agents{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.agents[hidden]{display:none}
.agents li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.agents li.none{display:block;color:var(--text-secondary);font-size:14px}
.agents b{display:block;font:500 15px/1.3 var(--label);color:var(--text);overflow-wrap:anywhere}
.agents small{display:block;margin-top:2px;font:400 13px/1.4 var(--label);color:var(--text-secondary)}
.agents .used{color:#8fa3b3}
.agents .revoke{color:var(--lost)}
.agents .acts{display:flex;align-items:center;gap:2px}
.add-agent{justify-self:start}
/* Learn more, from Agents and Apps to their pages: a badge you see (Adam: a link in the sentence was too subtle) */
.learn{display:inline-flex;align-items:center;gap:7px;justify-self:start;height:32px;padding:0 12px 0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-raised);color:var(--text);font:500 13px var(--label);text-decoration:none;white-space:nowrap}
.learn:hover{border-color:var(--link);background:var(--surface);text-decoration:none}
.learn svg{width:16px;height:16px;fill:none;stroke:var(--aurora-teal,#78C8B5);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.learn span{color:var(--text-secondary)}

/* Adding one */
.cans{margin:0;padding:0;border:0;display:grid;gap:10px}
.cans legend{padding:0;margin-bottom:8px}
.can{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 10px;align-items:start;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.can input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--link)}
.can span{font:500 15px/1.35 var(--label);color:var(--text)}
.can small{grid-column:2;font:400 13px/1.4 var(--label);color:var(--text-secondary)}
.where{grid-column:2;display:grid;gap:8px;margin-top:6px}
.where label{display:flex;align-items:center;gap:8px;font:400 14px var(--label);color:var(--text-secondary)}
.where input{margin:0;accent-color:var(--link)}
.where select,.expiry select{min-height:44px;max-width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);color:var(--text);padding:0 10px;font:400 16px var(--body)}
.where select{margin-left:26px;width:calc(100% - 26px)}
.where select:disabled{opacity:.6}
.where select[hidden]{display:none}
.expiry{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.field .hint-line,.cans .hint-line{font:400 13px var(--label);color:var(--text-secondary)}

/* Its key, once, inside what to paste to the agent: wrapped, scrolling past a few lines, and copied whole with the button under it */
pre.brief{margin:0;max-height:220px;padding:12px 14px;border-radius:8px;background:#06141f;border:1px solid var(--border);overflow:auto;font:400 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary);white-space:pre-wrap;overflow-wrap:anywhere}
pre.brief:focus-visible{outline:2px solid var(--link);outline-offset:2px}
#key-copy{width:100%}
/* What to say to the agent once it's connected */
.asks{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.asks li{padding:8px 12px;border-left:2px solid var(--aurora-violet);border-radius:0 8px 8px 0;background:rgba(6,20,31,.45);font:400 14px/1.45 var(--label);color:var(--text)}
/* The MCP server's address, with Copy */
.keyline{display:flex;gap:8px;align-items:center;padding:6px 6px 6px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.keyline code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);user-select:all}
.warnline{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font:500 13px/1.4 var(--label)}
.warnline svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
pre.snippet{margin:0;padding:12px 14px;border-radius:8px;background:#06141f;border:1px solid var(--border);overflow:auto;font:400 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary);white-space:pre}
.summary-can{margin:0;padding:0;list-style:none;display:grid;gap:4px;font:400 14px var(--label);color:var(--text-secondary)}
.summary-can li::before{content:'✓';color:var(--aurora-green);margin-right:8px}
#key-dialog .account-head h2{font-size:22px}
#key-dialog form,#agent-dialog form,#app-key-dialog form,#app-form{grid-template-columns:minmax(0,1fr)}
#app-key-dialog .account-head h2{font-size:22px}
#app-origins{font:400 15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.app-projects{display:grid;gap:8px;max-height:260px;overflow:auto}
.app-projects small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* API key or MCP, a tab each */
.ag-panel{display:grid;gap:16px;min-width:0}
.ag-panel[hidden],.ag-tabs[hidden],.ag-key-form[hidden]{display:none}
.ag-key-form{display:contents}
/* Signed out: what you get, and on the API key tab, sign in to make one */
.ag-lede{margin:-6px 0 0;font:400 15px/1.5 var(--body);color:var(--text-secondary)}
.ag-lede[hidden]{display:none}
.ag-guest{display:grid;gap:14px;padding:16px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35)}
.ag-guest b{display:block;font:600 15px/1.3 var(--label);color:var(--text)}
.ag-guest small{display:block;margin-top:2px;font:400 13px/1.45 var(--body);color:var(--text-secondary)}
.ag-guest .rw-go{width:100%}
#mcp-app{min-height:44px;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);color:var(--text);padding:0 10px;font:400 16px var(--body)}
/* The dialog's menus draw their own chevron, inset like the text, instead of the system's pressed against the edge */
.where select,.expiry select,#mcp-app{appearance:none;-webkit-appearance:none;padding:0 40px 0 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BAC8D3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
#mcp-app:focus-visible,.where select:focus-visible,.expiry select:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.mcp-steps{margin:0;padding:0 0 0 22px;display:grid;gap:10px;font:400 15px/1.45 var(--label);color:var(--text)}
.mcp-steps li::marker{color:var(--text-secondary);font-weight:600}
.mcp-steps b{font-weight:600}
.mcp-steps pre.snippet{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}

/* The landing's use for agents: a wide tile across the top of the others, with its three steps */
.use.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;gap:28px;padding:24px}
.wide-copy{display:block}
.wide-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.wide-flow li{display:grid;align-content:start;gap:2px;padding:14px 14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface-raised)}
.wide-flow .n{display:grid;place-items:center;width:26px;height:26px;margin-bottom:8px;border-radius:50%;background:var(--pink);color:var(--pink-text);font:700 12px var(--label)}
.wide-flow b{font:600 15px/1.3 var(--body);color:var(--text)}
.wide-flow span:last-child{font-size:13px;line-height:1.4;color:var(--text-secondary)}
@media (max-width:960px){.use.wide{grid-template-columns:minmax(0,1fr);gap:20px}}
@media (max-width:760px){
  .wide-flow{grid-template-columns:minmax(0,1fr);gap:8px}
  .wide-flow li{grid-template-columns:26px minmax(0,1fr);column-gap:12px;padding:12px}
  .wide-flow .n{grid-row:span 2;margin:0}
}

/* Drop zone, from Adam's comments on the phone landing (1 November 2026): what you can drop as chips, and smaller ways in on a phone */
.kinds{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.kinds li{padding:4px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(6,20,31,.55);font:500 13px var(--label);color:var(--text-secondary)}
@media (max-width:760px){
  .ways{gap:10px;width:min(280px,100%)}
  .btn.big.way{min-height:46px;padding:0 18px;font-size:15px}
  .ways svg.i{width:16px;height:16px}
  .kinds li{padding:3px 10px;font-size:12px}
}

/* ---------- Share (prototype/share-dialog.html revision 2): why, who it's for, the link, then its settings ---------- */
dialog.share{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
/* One column no wider than the dialog: Safari sizes a text field wide by default, which would push the dialog past a phone's edge */
dialog.share form{padding:28px;gap:20px;grid-template-columns:minmax(0,1fr)}
.sh-link input,.sh-emails input{width:0}
dialog.share .d-actions{margin-top:0}

/* Two tabs, Share link and Export (prototype/export.html revision 2), then why */
.sh-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.45)}
.sh-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:0;border-radius:9px;background:none;font:600 15px var(--label);color:var(--text-secondary)}
.sh-tabs button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sh-tabs button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--border),var(--sea-shadow)}
.sh-tabs button:not([aria-selected=true]):hover{color:var(--text)}
.sh-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.sh-panel[hidden]{display:none}
.sh-why{margin:0;font:400 17px/1.5 var(--body);color:var(--text)!important;text-wrap:pretty}

/* Export: Image or PDF, each previewed; portrait or landscape; one bright button */
.ex-formats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex-card{position:relative;display:grid;align-content:start;gap:3px;padding:10px 10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35);cursor:pointer}
.ex-card:has(input:checked){border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.ex-card:has(input:focus-visible),.ex-orient label:has(input:focus-visible){outline:2px solid var(--link);outline-offset:2px}
.ex-card input,.ex-orient input{position:absolute;opacity:0;pointer-events:none}
.ex-thumb{display:block;width:100%;aspect-ratio:16/10;margin-bottom:8px;border-radius:7px;background:#06141f;object-fit:contain}
.ex-formats.portrait .ex-thumb{aspect-ratio:5/6}
.ex-card b{display:flex;align-items:center;gap:8px;font:600 15px var(--label);color:var(--text)}
.ex-card b svg,.ex-fine svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--text-secondary);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ex-card small{font:400 13px/1.35 var(--body);color:var(--text-secondary)}
.ex-orient{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:-8px;padding:4px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.45)}
.ex-orient label{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border-radius:9px;font:600 14px var(--label);color:var(--text-secondary);cursor:pointer}
.ex-orient svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.ex-orient label:has(input:checked){background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.ex-go{min-height:46px;gap:8px;background:var(--button-bg)!important;border-color:var(--button-bg)!important;color:var(--button-text)!important;font:600 15px var(--label);box-shadow:var(--aurora-glow)}
.ex-go:disabled{opacity:.7;cursor:progress}
.ex-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ex-fine{display:flex;gap:10px;align-items:flex-start;margin:-6px 0 0!important;font:400 13px/1.45 var(--body);color:var(--text-secondary)}
.ex-fine svg{margin-top:1px}

/* Who it's for */
.sh-who{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.sh-who li{display:grid;align-content:start;gap:4px;padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35)}
.sh-who .hl-icon{width:30px;height:30px;margin:0 0 8px;top:0;border-radius:8px}
.sh-who .hl-icon svg{width:16px;height:16px}
.sh-who b{font:600 15px var(--label);color:var(--text)}
.sh-who span{font:400 14px/1.45 var(--body);color:var(--text-secondary)}

/* The link: the one call to act */
.sh-link{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid #4f6b80;border-radius:10px;background:#06141f}
.sh-link>svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sh-link input{flex:1;min-width:0;min-height:40px;border:0;background:none;padding:0;font:500 16px var(--label);color:var(--text);text-overflow:ellipsis}
.sh-link input:focus{outline:none}
.sh-copy{min-height:40px;padding:0 16px;background:var(--button-bg)!important;border-color:var(--button-bg)!important;color:var(--button-text)!important;font-weight:600;box-shadow:var(--aurora-glow)}

/* Its settings */
.sh-settings{display:grid;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sh-row{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px}
.sh-row+.sh-row{border-top:1px solid var(--border)}
.sh-row>svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--text-secondary);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sh-row>span{flex:1;min-width:0;display:grid;gap:2px}
.sh-row b{font:600 14px var(--label);color:var(--text)}
.sh-row small{font:400 13px/1.35 var(--body);color:var(--text-secondary)}
.sh-row .btn{flex:none;gap:6px;min-height:36px;padding:0 12px;font-size:13px}
.sh-row .btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


@media (max-width:560px){
  dialog.share form{padding:22px 18px 18px;gap:18px}
  .sh-who{grid-template-columns:1fr}
  .sh-who li{grid-template-columns:auto 1fr;column-gap:12px;align-items:start}
  .sh-who .hl-icon{grid-row:span 2;margin:2px 0 0}
  .sh-why{font-size:16px}
  .sh-tabs button{font-size:14px}
  .ex-formats{gap:8px}
  .sh-who{gap:8px}
  .sh-who li{padding:12px}
  .sh-who .hl-icon{width:28px;height:28px;margin-top:0}
  .sh-who b{font-size:14px}
  .sh-who span{font-size:13px}
  .sh-row{padding:10px 10px 10px 12px;gap:10px}
}
@media (prefers-reduced-motion:reduce){.sh-copy,.ex-go{animation:none}}

/* A private drop's two parts: people, and your AI agent */
.sh-part{display:grid;gap:10px;padding:16px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35)}
.sh-part h3{display:flex;align-items:center;gap:10px;margin:0;font:600 15px var(--label);color:var(--text)}
.sh-part .hl-icon{width:28px;height:28px;margin:0;top:0;border-radius:8px}
.sh-part .hl-icon svg{width:15px;height:15px}
.sh-part p{margin:0;font:400 14px/1.45 var(--body);color:var(--text-secondary)}
.sh-invite{display:flex;align-items:flex-start;gap:8px}
.sh-emails{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px;padding:6px 8px;border:1px solid #4f6b80;border-radius:10px;background:#06141f}
.sh-emails:focus-within{outline:2px solid var(--link);outline-offset:2px}
.sh-emails .chip{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-raised);font:500 13px var(--label);color:var(--text)}
.sh-emails .chip button{display:grid;place-items:center;width:20px;height:20px;border:0;border-radius:50%;background:none;color:var(--text-secondary);font:400 15px/1 var(--label)}
.sh-emails .chip button:hover{background:var(--surface);color:var(--text)}
.sh-emails input{flex:1;min-width:120px;min-height:28px;border:0;background:none;padding:0 4px;font:400 16px var(--body);color:var(--text)}
.sh-emails input:focus{outline:none}
.sh-emails input::placeholder{color:var(--text-secondary)}
.sh-invite .sh-copy{min-height:44px}
.sh-link.quiet{border-color:var(--border);background:rgba(6,20,31,.6)}
.sh-link.quiet input{font-size:15px;color:var(--text-secondary)}
.sh-link .btn:not(.sh-copy){min-height:36px;padding:0 12px;font-size:13px}
.sh-temp{justify-self:start;gap:8px}
.sh-temp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sh-part .sh-fine{font-size:13px}
.sh-fine a,.sh-fine button{padding:0;border:0;background:none;font:inherit;color:var(--link);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.sh-part{padding:14px 12px}}
.sh-emails .sh-copy{min-height:32px;margin-left:auto;padding:0 14px}
.sh-part .sh-link{padding:4px 4px 4px 12px}
.sh-part .sh-link input{min-height:36px}
@media (max-width:560px){
  dialog.share form{gap:14px}
  .sh-part{gap:8px}
  .sh-part p{font-size:13px}
}
/* The 1-day link's off and on states, and the fine print's buttons */
.sh-temp-off,.sh-temp-on{display:grid;gap:8px}
.sh-temp-off[hidden],.sh-temp-on[hidden],.sh-body[hidden],.sh-row[hidden]{display:none}
.sh-body{display:grid;gap:inherit}

/* ---------- Someone opening a link (prototype/reviewer-dialog.html revision 1): who shared it, what it is, a name, one way in ---------- */
dialog.rv{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
dialog.rv form{padding:28px;gap:0;grid-template-columns:minmax(0,1fr)}
.rv-name input{width:0}

/* Who shared it */
.rv-from{display:flex;align-items:center;gap:10px;font:400 14px var(--body);color:var(--text-secondary)}
.rv-from b{font-weight:600;color:var(--text)}
.rv-avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font:600 13px var(--label);box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--c) 55%,transparent)}

/* What it is */
dialog.rv h2{margin:18px 0 0;font:600 26px/1.2 var(--display);letter-spacing:-.01em;text-wrap:balance}
.rv-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0!important;font:500 13px var(--label);color:var(--text-secondary)!important}
.rv-stats span{display:inline-flex;align-items:center;gap:6px}
.rv-stats svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* What you can do */
.rv-can{display:grid;gap:10px;margin:22px 0 0;padding:16px;list-style:none;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35)}
.rv-can li{display:flex;align-items:flex-start;gap:12px;font:400 15px/1.45 var(--body);color:var(--text)}
.rv-can svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--link);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Your name, as you'll appear */
.rv-field{display:grid;gap:8px;margin:22px 0 0}
.rv-field .label{font:600 13px var(--label);color:var(--text)}
.rv-name{display:flex;align-items:center;gap:10px;padding:0 14px 0 10px;border:1px solid #4f6b80;border-radius:10px;background:#06141f}
.rv-name:focus-within{outline:2px solid var(--link);outline-offset:2px}
.rv-name .rv-avatar{width:28px;height:28px;box-shadow:none}
.rv-name .rv-avatar:empty{background:var(--surface-raised);border:1px dashed var(--border)}
.rv-name input{flex:1;min-width:0;min-height:50px;border:0;background:none;padding:0;font:400 16px var(--body);color:var(--text)}
.rv-name input:focus{outline:none}
.rv-name input::placeholder{color:#7f95a6}

/* One way in, and Google */
.rv-go{width:100%;min-height:52px;margin-top:14px;gap:10px;background:var(--button-bg)!important;border-color:var(--button-bg)!important;color:var(--button-text)!important;font:600 16px var(--label);box-shadow:var(--aurora-glow)}
.rv-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rv-or{display:flex;align-items:center;gap:12px;margin:20px 0 0;font:500 12px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.rv-or::before,.rv-or::after{content:"";flex:1;height:1px;background:var(--border)}
.rv-google{width:100%;min-height:48px;margin-top:16px;gap:10px;background:rgba(6,20,31,.45);color:var(--text);font:500 15px var(--label)}
.rv-google svg{width:18px;height:18px}

@media (max-width:560px){
  dialog.rv form{padding:22px 18px 18px}
  dialog.rv h2{font-size:23px}
  .rv-can{padding:14px}
  .rv-can li{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.rv-go{animation:none}}

/* ---------- Invites (prototype/referrals.html revision 1, the ladder from prototype/invite-ladder.html revision 2): the account's Invite section, Pro free on the paywall, an invite's welcome ---------- */
/* ---------- Your account, a page each (prototype/account-pages.html revision 1): the avatar's menu, and Plan, Agents, Apps and Invites ---------- */
#account{overflow:auto}
#account[hidden]{display:none}
.ac-wrap{max-width:1120px;margin:0 auto;padding:0 24px 80px}
.ac-top{display:flex;align-items:center;gap:12px;min-height:44px;padding:18px 0}
.ac-top .wordmark{margin-right:auto}
.avatar[aria-expanded=true]{box-shadow:0 0 0 3px rgba(195,219,234,.35)}
.ac-body{display:grid;grid-template-columns:272px minmax(0,640px);gap:40px;padding-top:24px}
.ac-nav{display:grid;align-content:start;gap:2px;position:sticky;top:24px}
.ac-nav .ac-who{border:0;padding:0 10px 16px;margin:0}
.ac-main{display:grid;align-content:start;min-width:0}
.ac-page{gap:16px}
.ac-page[hidden]{display:none}
.ac-page h1{margin:0;font:600 30px/1.15 var(--display);letter-spacing:-.01em;color:var(--text)}
.ac-page > .fine:first-of-type{margin:0;font:400 16px/1.5 var(--body);color:var(--text-secondary);max-width:560px}
.ac-back{display:none}
/* The menu under the avatar, and the same list down the side of each page */
.ac-menu{position:fixed;z-index:60;width:300px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--sea-shadow),0 24px 60px -20px rgba(1,8,15,.6)}
.ac-menu[hidden]{display:none}
.ac-who{display:flex;align-items:center;gap:12px;padding:10px 10px 12px;border-bottom:1px solid var(--surface-raised);margin-bottom:6px}
.ac-who .avatar{width:40px;height:40px;flex:none;font-size:16px}
.ac-who b{display:block;font:600 16px/1.3 var(--label);color:var(--text);overflow-wrap:anywhere}
.ac-who small{display:block;font:400 13px/1.4 var(--label);color:var(--text-secondary);overflow-wrap:anywhere}
.ac-item{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:10px;border:0;border-radius:9px;background:none;color:var(--text);text-align:left;text-decoration:none;font:500 15px/1.3 var(--label);cursor:pointer}
.ac-item:hover,.ac-item.on{background:var(--surface-raised);text-decoration:none}
.ac-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--text-secondary)}
.ac-item small{display:block;margin-top:1px;font:400 13px/1.35 var(--label);color:var(--text-secondary)}
.ac-item .n{min-width:22px;padding:0 7px;border-radius:11px;background:var(--surface-raised);color:var(--text-secondary);font:600 12px/22px var(--label);text-align:center}
.ac-item.on .n{background:var(--surface)}
.ac-item .earn{padding:0 8px;border-radius:11px;background:rgba(110,231,168,.12);color:#a9eccb;font:600 12px/22px var(--label);white-space:nowrap}
.ac-sep{height:1px;margin:6px 4px;background:var(--surface-raised)}
.ac-out,.ac-out svg{color:var(--lost)}
@media (max-width:760px){
  .ac-wrap{padding:0 16px 80px}
  .ac-top{padding:14px 0 calc(14px + env(safe-area-inset-top))}
  .ac-body{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:0}
  .ac-nav{display:none}
  .ac-back{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-bottom:8px;padding:6px 0;border:0;background:none;color:var(--link);font:500 15px var(--label)}
  .ac-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ac-page h1{font-size:26px}
  .ac-menu{left:16px;right:16px!important;width:auto}
  .ac-page .agents li{grid-template-columns:auto minmax(0,1fr)}
  .ac-page .agents .acts{grid-column:1/-1;justify-content:flex-end;border-top:1px solid var(--surface-raised);padding-top:6px}
}
.ac-plan{display:grid;gap:12px}
.plan-now{display:grid;gap:2px;padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35)}
.plan-now b{font:600 22px/1.25 var(--display);color:var(--text)}
.plan-now small{font:400 14px/1.4 var(--label);color:var(--text-secondary)}
.ac-plan .rw-pro{margin:0}
.plan-go{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:6px}
.plan-invite{background:none;border:0;padding:0;color:var(--link);font:500 14px var(--label);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.plan-invite[hidden]{display:none}
/* The account's Invite section */
.ref{display:grid;gap:12px}
.ref h3{margin:0;font:600 17px/1.3 var(--display)}

/* Where you are on the ladder, with a bar from the last step to the next */
.lad-now{display:grid;gap:4px;padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35)}
.lad-now b{font:600 15px/1.3 var(--label);color:var(--text)}
.lad-now small{font:400 13px/1.4 var(--label);color:var(--text-secondary)}
.lad-bar{display:block;height:6px;margin-top:10px;border-radius:3px;background:#22405a;overflow:hidden}
.lad-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--aurora-green),var(--aurora-violet),var(--aurora-pink))}
.lad-ends{display:flex;justify-content:space-between;font:500 11px var(--label);color:var(--text-secondary)}
.lad-bar[hidden],.lad-ends[hidden]{display:none}

/* The ladder: each step lit once reached, the next outlined with how many more */
.lad-steps{list-style:none;margin:0;padding:0;display:grid}
.lad-steps li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 10px 7px 6px;border-radius:10px}
.lad-steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:calc(50% + 12px);height:calc(100% - 24px);width:2px;background:#22405a}
.lad-steps li.done:not(:last-child)::after{background:var(--aurora-green)}
.lad-steps .node{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid #2a4a64;background:var(--surface-raised)}
.lad-steps .node svg{width:13px;height:13px;fill:none;stroke:var(--text-secondary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lad-steps li.done .node{border-color:var(--aurora-green);background:var(--aurora-green)}
.lad-steps li.done .node svg{stroke:#06231a}
.lad-steps li.next{background:rgba(6,20,31,.35);box-shadow:inset 0 0 0 1px var(--border)}
.lad-steps li.next .node{border-color:var(--aurora-violet)}
.lad-steps li.top .node svg{stroke:var(--aurora-pink)}
.lad-steps li.top.done .node{border-color:var(--aurora-pink);background:var(--aurora-pink)}
.lad-steps li.top.done .node svg{stroke:#2a0d1f}
.lad-steps b{display:block;font:600 14px/1.3 var(--label);color:var(--text)}
.lad-steps small{display:block;margin-top:1px;font:400 13px/1.35 var(--label);color:var(--text-secondary)}
.lad-steps li.later b,.lad-steps li.later small{color:var(--text-secondary)}
.lad-steps li.top small{color:var(--aurora-pink)}
.lad-steps em{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--label);font-style:normal;color:var(--aurora-green);white-space:nowrap}
.lad-steps em svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lad-steps em.more{color:var(--aurora-violet)}

/* Who you invited: the active ones as faces, then up to three on their way with their 2 weeks */
.lad-people{display:grid;gap:10px}
.lad-people[hidden]{display:none}
.lad-people .faces{display:flex;align-items:center;flex-wrap:wrap}
.lad-people .avatar{width:28px;height:28px;margin-right:-4px;font-size:12px;background:var(--c,var(--link));color:var(--button-text);box-shadow:0 0 0 2px var(--surface-raised)}
.lad-people .avatar.more{background:#22405a;color:var(--text);font:600 11px var(--label)}
.lad-people .faces small{display:inline-flex;align-items:center;gap:5px;margin-left:16px;font:400 13px/1.35 var(--label);color:var(--text-secondary)}
.lad-people .faces small svg{width:14px;height:14px;fill:none;stroke:var(--aurora-green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lad-way{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lad-way li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border:1px dashed var(--dashed);border-radius:10px}
.lad-way .avatar{margin:0;box-shadow:none}
.lad-way b{display:block;font:500 14px/1.3 var(--label);color:var(--text);overflow-wrap:anywhere}
.lad-way small{display:block;font:400 12.5px/1.35 var(--label);color:var(--text-secondary)}
.lad-way .weeks{display:flex;gap:4px}
.lad-way .weeks i{width:18px;height:6px;border-radius:3px;background:#22405a}
.lad-way .weeks i.on{background:var(--aurora-violet)}

/* Your invite link */
.ref-link{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid var(--border);border-radius:10px;background:rgba(6,20,31,.6)}
.ref-link>svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ref-link input{flex:1;width:0;min-width:0;min-height:36px;border:0;background:none;padding:0;font:500 16px var(--label);color:var(--text);text-overflow:ellipsis}
.ref-link input:focus{outline:none}
.ref-link .btn{flex:none;min-height:36px}

/* The paywall: Pro for free */
.ref-free{display:grid;width:100%;font:inherit;text-align:left;cursor:pointer;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;max-width:520px;margin:20px auto 0;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--sea-shadow);color:inherit;text-decoration:none}
.ref-free:hover{border-color:var(--edge-hover)}
.ref-free .hl-icon{width:36px;height:36px;margin:0;top:0;border-radius:9px}
.ref-free .hl-icon svg{width:18px;height:18px}
.ref-free b{display:block;font:600 15px/1.3 var(--label);color:var(--text)}
.ref-free small{display:block;margin-top:2px;font:400 13px/1.4 var(--label);color:var(--text-secondary)}
.ref-free>svg{width:18px;height:18px;fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The invited person's welcome */
dialog.ref-welcome{width:min(480px,calc(100vw - 32px))}
dialog.ref-welcome form{padding:28px;gap:20px}
.ref-welcome header{display:grid;gap:10px;justify-items:start}
.ref-welcome header .avatar{width:44px;height:44px;font-size:18px;background:var(--c,var(--link));color:var(--button-text)}
.ref-welcome h2{text-wrap:balance}
.ref-welcome header p{font-size:15px;line-height:1.5}
/* What you can do: four tiles with the landing's pictures */
.rw-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rw-tiles li{display:grid;align-content:start;gap:4px;padding:8px 8px 10px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35)}
.rw-tiles .pic{display:block;width:100%;height:auto;margin:0 0 6px;border-radius:7px;background:rgba(8,28,44,.6)}
.rw-tiles b{display:flex;align-items:center;gap:7px;font:600 14px/1.3 var(--label);color:var(--text)}
.rw-tiles b .hl-icon{flex:none;width:22px;height:22px;margin:0;top:0;border-radius:6px}
.rw-tiles b .hl-icon svg{width:12px;height:12px}
.rw-tiles small{font:400 12.5px/1.4 var(--body);color:var(--text-secondary)}
.rw-gift{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35)}
.rw-gift .hl-icon{width:32px;height:32px;margin:0;top:0;border-radius:8px}
.rw-gift .hl-icon svg{width:16px;height:16px}
.rw-gift b{display:block;font:600 15px/1.3 var(--label);color:var(--text)}
.rw-gift small{display:block;margin-top:2px;font:400 13px/1.4 var(--label);color:var(--text-secondary)}
.rw-pro{list-style:none;margin:-4px 0 0;padding:0;display:grid;gap:8px}
.rw-pro li{display:flex;align-items:center;gap:10px;font:400 14px/1.4 var(--body);color:var(--text-secondary)}
.rw-pro svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rw-go{display:inline-flex;justify-content:center;gap:10px;box-shadow:var(--aurora-glow)}
.rw-go svg{width:18px;height:18px}
.ref-welcome .fine{text-align:center}
.rw-later{background:none;border:0;padding:0;color:var(--link);font:500 13px var(--label);text-decoration:underline;text-underline-offset:3px}

/* Someone opening a drop's link: a week of Pro on whoever shared it, under Continue with Google */
.rv-gift{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;margin:14px 0 0!important;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.35)}
.rv-gift[hidden]{display:none}
.rv-gift .hl-icon{width:32px;height:32px;margin:0;top:0;border-radius:8px}
.rv-gift .hl-icon svg{width:16px;height:16px}
.rv-gift b{display:block;font:600 14px/1.35 var(--label);color:var(--text)}
.rv-gift small{display:block;margin-top:2px;font:400 13px/1.4 var(--body);color:var(--text-secondary)}
@media (max-width:560px){
  .lad-steps li{padding:6px 8px 6px 4px;gap:10px}
  .lad-steps li:not(:last-child)::after{left:15px}
  .lad-people .faces small{flex-basis:100%;margin:8px 0 0}
  dialog.ref-welcome form{padding:22px 18px 18px;gap:16px}
  .rw-tiles{gap:8px}
  .rw-tiles li{padding:6px 6px 8px}
  .rw-tiles small{font-size:12px}
  .ref-free{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.rw-go{animation:none}}

/* ---------- Unlocking a reward (prototype/invite-unlock.html revision 1): the gift opens, with a burst in the aurora's colours ---------- */
dialog.unlock{width:min(400px,calc(100vw - 32px));overflow:visible;text-align:center}
dialog.unlock form{padding:28px 28px 20px;gap:10px;justify-items:center}
dialog.unlock button{width:100%}
dialog.unlock button[hidden]{display:none}
.ul-stage{position:relative;display:grid;place-items:center;width:132px;height:132px;margin:-4px 0 6px}
.ul-rays{position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 6%,rgba(110,231,168,.35) 8%,transparent 11% 23%,rgba(156,130,234,.38) 25%,transparent 28% 40%,rgba(236,140,198,.35) 42%,transparent 45% 57%,rgba(110,231,168,.35) 59%,transparent 62% 74%,rgba(156,130,234,.38) 76%,transparent 79% 91%,rgba(236,140,198,.35) 93%,transparent 96%);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);opacity:.55;animation:ul-spin 18s linear infinite}
.ul-gift{position:relative;width:84px;height:84px;overflow:visible;filter:drop-shadow(0 10px 22px rgba(156,130,234,.45))}
.ul-gift .box rect{fill:#1d3a50;stroke:var(--aurora-violet);stroke-width:2}
.ul-gift .lid rect{fill:#24485f;stroke:var(--aurora-pink);stroke-width:2}
.ul-gift path{fill:none;stroke:var(--aurora-green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ul-gift .lid{transform-box:fill-box;transform-origin:20% 100%;transition:transform .55s cubic-bezier(.2,1.6,.4,1)}
dialog.unlock:not(.open) .ul-gift{animation:ul-wiggle 2.4s ease-in-out infinite}
dialog.unlock.open .ul-gift .lid{transform:translate(-6px,-20px) rotate(-24deg)}
dialog.unlock.open .ul-rays{opacity:1;inset:-34px;transition:opacity .4s,inset .5s}
.ul-sparks{position:absolute;inset:0;pointer-events:none}
.ul-sparks i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:2px;opacity:0;background:var(--aurora-green)}
.ul-sparks i:nth-child(3n+2){background:var(--aurora-violet);border-radius:50%}
.ul-sparks i:nth-child(3n){background:var(--aurora-pink);width:6px;height:12px}
dialog.unlock.open .ul-sparks i{animation:ul-burst .9s cubic-bezier(.15,.7,.3,1) forwards}
.ul-kicker{margin:0;font:600 12px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--aurora-green)}
dialog.unlock h2{margin:0;font:600 24px/1.2 var(--display);text-wrap:balance}
.ul-prize{display:grid;gap:4px;margin:6px 0 12px}
.ul-prize b{font:700 44px/1 var(--display);letter-spacing:-.02em;color:var(--text);text-shadow:var(--aurora-glow-text)}
.ul-prize small{font:400 14px/1.4 var(--label);color:var(--text-secondary);text-wrap:balance}
dialog.unlock.open .ul-prize b{animation:ul-pop .5s cubic-bezier(.2,1.6,.4,1)}
.ul-later{background:none;border:0;padding:6px;color:var(--text-secondary);font:500 14px var(--label);cursor:pointer}
/* Waiting to be unlocked: a dot on the avatar and the Invites tab, and the step glows with Unlock */
.ul-dot{position:relative}
.ul-dot::after{content:"";position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--aurora-pink);box-shadow:0 0 0 2px var(--bg)}
.lad-steps li.ready{background:rgba(236,140,198,.08);box-shadow:inset 0 0 0 1px var(--aurora-pink)}
.lad-steps li.ready .node{border-color:var(--aurora-pink);background:none}
.lad-steps li.ready .node svg{stroke:var(--aurora-pink)}
@keyframes ul-spin{to{transform:rotate(360deg)}}
@keyframes ul-wiggle{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-7deg)}82%{transform:rotate(6deg)}88%{transform:rotate(-4deg)}94%{transform:rotate(2deg)}}
@keyframes ul-burst{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(90deg) scale(1)}}
@keyframes ul-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .ul-rays,dialog.unlock:not(.open) .ul-gift,.ul-go,.ul-step,dialog.unlock.open .ul-prize b{animation:none}
  dialog.unlock.open .ul-sparks i{animation:none;opacity:0}
  .ul-gift .lid{transition:none}
}

/* ---------- Editors (prototype/editors.html revision 1) ---------- */
/* An editor, beside the drop's name */
.ed-tag{display:inline-flex;align-items:center;gap:4px;flex:none;height:20px;padding:0 7px;border-radius:6px;border:1px solid var(--edge-hover);background:#0c2131;color:var(--aurora-green);font:500 11px var(--label);white-space:nowrap}
.ed-tag svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The drop's menu, someone else's: once you've asked */
.ms-note{grid-column:2;display:flex;gap:6px;margin:6px 0 0;font:500 13px/1.4 var(--label);color:var(--text-secondary)}
.menu-status .ms-note svg{flex:none;width:15px;height:15px;margin-top:1px;color:var(--text-secondary)}
/* A screen's menu says who added it */
.screen-by{display:flex;align-items:center;gap:8px;margin:0;padding:0 10px 6px;font:500 12px var(--label);color:var(--text-secondary)}
.screen-by>span:first-child{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--c);color:#fff;font:600 10px var(--label)}
/* Share: Who can edit, a two-way switch under its words */
.sh-row.sh-edits{flex-wrap:wrap}
.sh-row.sh-edits>span{flex:1 1 calc(100% - 40px)}
.sh-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:1 1 100%;margin-left:32px;padding:4px;border:1px solid var(--border);border-radius:12px;background:rgba(6,20,31,.45)}
.sh-seg label{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 8px;border-radius:9px;font:600 13px var(--label);color:var(--text-secondary);text-align:center;white-space:nowrap;cursor:pointer}
.sh-seg input{position:absolute;opacity:0;pointer-events:none}
.sh-seg label:has(input:checked){background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.sh-seg label:has(input:focus-visible){outline:2px solid var(--link);outline-offset:2px}
.sh-warn{display:flex;gap:10px;margin:-6px 0 0;padding:12px 14px;border:1px solid var(--warn);border-radius:12px;background:var(--warn-bg);font:400 13px/1.45 var(--body);color:var(--warn)}
.sh-warn svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sh-warn[hidden],.sh-part[hidden]{display:none}
/* Share: people by email, whoever asked, and a private drop's roles */
.sh-person,.sh-asking{display:flex;align-items:center;gap:10px;min-height:44px}
.sh-face{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface-raised);border:1px solid var(--border);color:var(--text);font:600 12px var(--label)}
.sh-email{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 14px var(--label);color:var(--text)}
.sh-asking{flex-wrap:wrap;padding:10px 12px;border:1px solid var(--edge-hover);border-radius:10px;background:var(--surface)}
.sh-asking>span:not(.sh-face){flex:1 1 calc(100% - 40px);min-width:0;display:grid;gap:1px}
.sh-asking b{font:600 14px var(--label);color:var(--text)}
.sh-asking small{font:400 13px var(--body);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis}
.sh-asking .btn{flex:1}
.sh-asks:empty{display:none}
.sh-asks{display:grid;gap:8px}
.sh-role{flex:none;min-height:36px;padding:0 30px 0 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BAC8D3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center/16px;color:var(--text);font:500 16px var(--label);appearance:none;-webkit-appearance:none}
.sh-role:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.sh-role-row{flex-wrap:nowrap}
.sh-role-row .sh-role{min-height:32px}
.sh-x{flex:none;width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--text-secondary);font-size:20px;cursor:pointer}
.sh-x:hover{background:var(--surface);color:var(--text)}
/* Someone asking the owner to let them edit: a card under the topbar, at its right */
.ask-card{position:fixed;top:64px;right:16px;left:auto;bottom:auto;z-index:45;width:340px;max-width:calc(100vw - 16px);padding:14px;display:grid;gap:12px}
.ask-card[hidden]{display:none}
.ask-head{display:flex;gap:12px;align-items:start}
.ask-head>span:last-child{display:grid;gap:3px}
.ask-head b{font:600 15px var(--label);color:var(--text)}
.ask-head small{font-size:13px;line-height:1.4}
.ask-face{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);font:600 12px var(--label)}
.ask-actions{display:flex;gap:8px;justify-content:flex-end}
.menu .ask-actions .btn{width:auto;min-height:36px;justify-content:center;gap:6px;padding:0 14px;font:600 13px var(--label)}
.menu .ask-actions .btn.primary{background:var(--button-bg);color:var(--button-text)}
.menu .ask-actions .btn.primary:hover{background:var(--ink-hover)}
.ask-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){
  .sh-seg{margin-left:0}
  .ask-card{left:8px;right:8px;width:auto;height:auto;max-height:none}
  /* A private drop's people: the email on its own line, what they can do under it */
  .sh-person:has(.sh-role){flex-wrap:wrap;row-gap:4px}
  .sh-person:has(.sh-role) .sh-email{flex-basis:calc(100% - 84px)}
  .sh-person .sh-x{order:2}
  .sh-person .sh-role{order:3;margin-left:38px}
  .sh-role-row{flex-wrap:wrap}
  .sh-role-row input{flex:1 1 100%;min-height:36px}
  .sh-role-row .sh-role{flex:1}
}

/* ---------- The Drop screen in Midnight navy (prototype/drop-colors.html revision 2, Adam, 3 November 2026) ----------
   Aurora's blue two steps darker, with depth from light and shadow rather than colour: each surface is lit from the top and darkens
   down, with a faint light line along its top edge; what rests on the water casts a long, soft shadow; fields are set in. Only the Drop
   screen and its composer: the rest of the app keeps Aurora's colours. The aliases are declared again so they pick up the darker blues. */
#review,#composer{
  --bg:#050E18;--surface:#0B1A2A;--surface-raised:#10233A;--border:#1F3449;--edge-hover:#2E4A63;--text:#EEF3F7;--text-secondary:#A9B8C6;
  --paper:var(--bg);--white:var(--surface-raised);--line:var(--border);--ink:var(--text);--muted:var(--text-secondary);
  /* A raised surface, lit from the top; the light line along its top edge; the shadows beneath */
  --lift:linear-gradient(180deg,#152B45,#0E2035);
  --rim:inset 0 1px 0 rgba(255,255,255,.06);
  --sea-shadow:0 1px 2px rgba(0,0,0,.55),0 12px 28px -10px rgba(0,0,0,.85);
  --deep-shadow:0 2px 4px rgba(0,0,0,.5),0 24px 48px -14px rgba(0,0,0,.95)}
#review{background:linear-gradient(180deg,#0B1C2E 0%,#081626 30%,#050E18 65%,#03080F 100%)}
/* The bars: the header over the stage and the screens strip under it, each casting onto the water */
#review .topbar{position:relative;z-index:3;border-bottom-color:transparent;background:linear-gradient(180deg,#10233A,#0A1828);box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 8px 18px -8px rgba(0,0,0,.9)}
#review .timeline{position:relative;z-index:3;border-top-color:transparent;background:linear-gradient(180deg,#0C1C2E,#060F1A);box-shadow:var(--rim),0 -8px 18px -8px rgba(0,0,0,.85)}
/* The stage: deep water darkening down, with fainter dots; the screen on it casts the long shadow */
#review .stage,#review .stage.alive{--dot:rgba(140,170,200,.10);background:linear-gradient(180deg,#0A1A2B 0%,#071321 45%,#03080F 100%)}
#review :is(.imgbox img,.device iframe,.pdfdoc canvas){box-shadow:var(--deep-shadow)}
/* The comments panel (on a phone, the sheet) and its cards */
#review .panel{border-left-color:transparent;background:linear-gradient(180deg,#0C1D30,#060F1A);box-shadow:var(--rim),-14px 0 32px -14px rgba(0,0,0,.85)}
@media (min-width:761px){#review .panel{position:relative;z-index:2}}
#review .tabs{border-bottom-color:rgba(255,255,255,.05)}
#review .tabs button[aria-pressed=true]{background:var(--lift);box-shadow:var(--rim),0 4px 10px -4px rgba(0,0,0,.7),inset 0 0 0 1px var(--border)}
#review .c{border-color:rgba(31,52,73,.8);background:var(--lift);box-shadow:var(--rim),0 10px 22px -10px rgba(0,0,0,.85)}
#review .c:hover{border-color:var(--edge-hover)}
#review .c.sel{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink),var(--rim),0 10px 22px -10px rgba(0,0,0,.85)}
#review .c .spot{border-color:rgba(255,255,255,.05);background:#060F1A;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
/* Fields are set into the surface rather than raised from it */
#review .whole{border-top-color:rgba(255,255,255,.05)}
#review .whole textarea,#composer-text{border-color:rgba(31,52,73,.9);background:#050D17;box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
/* What floats over the stage: the tools, the zoom, Annotate, Screens, the menus, the composer */
#review :is(.toolrail .toolseg,.zoombar,.viewbar .widthseg,.annotate-btn:not([aria-pressed=true]),.screens-btn,.menu),#composer{border-color:rgba(31,52,73,.9);background:var(--lift);box-shadow:var(--rim),var(--sea-shadow)}
#review .shot{border-color:rgba(31,52,73,.9);background:var(--lift);box-shadow:var(--rim),0 6px 14px -6px rgba(0,0,0,.85)}
#review .shot[aria-current=true]{border-color:var(--link);box-shadow:0 0 0 1px var(--link),var(--rim),0 6px 14px -6px rgba(0,0,0,.85)}
#review .chip{border-color:rgba(31,52,73,.9);background:var(--lift);box-shadow:var(--rim)}
:is(#review,#composer) .btn.primary{background:linear-gradient(180deg,#0A1A2A,#040B13);border-color:#2E4A63}
@media (max-width:760px){
  #review .panel{background:linear-gradient(180deg,#132840 0%,#0C1D30 40%,#081521 100%);box-shadow:var(--rim),0 -14px 30px -10px rgba(0,0,0,.85)}
  #review .whole{background:transparent}
  #review .panel:not(.open) .c{background:none;box-shadow:none}
}

/* ---------- Projects (prototype/projects.html revision 2, without teams) ---------- */
/* My Drops: a small label over each part of the list */
.pj-label{margin:10px 10px 4px;font:500 12px var(--label);color:var(--text-secondary);letter-spacing:.02em}
.pj-label:first-child{margin-top:2px}
/* A project's row, like a drop's: a folder with its newest drop peeking out, its name, how many drops, and its people or a chevron */
.pj-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--text);text-align:left;cursor:pointer}
.pj-item:hover{background:var(--surface)}
.pj-item h3{margin:0;font:500 15px/1.3 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-item .meta{display:block;font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-item .dot{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;vertical-align:1px}
.pj-chev{width:16px;height:16px;fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pj-folder{position:relative;width:48px;height:36px}
.pj-folder svg{position:absolute;inset:0;width:48px;height:36px}
.pj-folder .back{fill:#1d3a50;stroke:var(--border);stroke-width:1}
.pj-folder .front{fill:#24465f;stroke:#4f6b80;stroke-width:1}
.pj-folder img{position:absolute;left:9px;top:5px;width:30px;height:20px;border-radius:3px;object-fit:cover;opacity:.95}
/* Dragging one of your drops onto a project (desktop) */
.pj-item.pj-over{background:var(--surface-raised);box-shadow:inset 0 0 0 1.5px var(--link)}
.drop-item.pj-dragging{opacity:.35}
.pj-new{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--text-secondary);font:500 14px var(--label);text-align:left;cursor:pointer}
.pj-new:hover{background:var(--surface);color:var(--text)}
.pj-new .pj-plus{display:grid;place-items:center;width:48px;height:36px;border:1px dashed var(--dashed);border-radius:7px}
.pj-new svg,.pj-back svg,.pj-zone-chip svg,.pj-crumb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pj-empty{margin:8px 10px;padding:18px 16px;border:1px dashed var(--dashed);border-radius:10px;font:400 14px/1.45 var(--body);color:var(--text-secondary)}
/* People's initials, overlapping */
.pj-faces{display:inline-flex}
.pj-face{display:grid;place-items:center;flex:none;width:26px;height:26px;margin-left:-6px;border-radius:50%;border:2px solid var(--bg);background:var(--c,#24465f);color:#fff;font:600 11px var(--label)}
.pj-face:first-child{margin-left:0}
.pj-item .pj-face{width:20px;height:20px;font-size:9px;border-width:1.5px}

/* Inside a project: back to My Drops above its name, its menu beside it, its people and Invite below */
.side-head.pj-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:center;row-gap:2px;min-height:0;padding-bottom:12px}
.side-head[hidden]{display:none}
.pj-back{display:inline-flex;align-items:center;justify-self:start;gap:4px;grid-column:1/-1;min-height:28px;margin-left:-6px;padding:0 6px;border:0;border-radius:6px;background:none;color:var(--text-secondary);font:500 13px var(--label);cursor:pointer}
.pj-back:hover{color:var(--text);background:var(--surface)}
.pj-back svg{width:16px;height:16px}
.pj-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-tools{position:relative}
.pj-menu{top:44px;min-width:260px}
.pj-people{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:8px}
.pj-people small{font:400 13px var(--body);color:var(--text-secondary)}
.pj-people .btn svg{width:16px;height:16px}
.pj-people #project-link{margin-left:auto}
.pj-people small{white-space:nowrap}
.btn.pj-link{padding:0 9px}

/* The drop zone says where a new drop goes while a project is open */
.zone .pj-chip-row{display:flex;justify-content:center}
.zone .pj-chip-row[hidden]{display:none}
.pj-zone-chip{display:inline-flex;align-items:center;gap:8px;margin:0 auto 22px;min-height:36px;padding:0 4px 0 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-raised);font:500 14px var(--label);color:var(--text)}
.pj-zone-chip b{font-weight:600}
.pj-zone-chip button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--text-secondary);cursor:pointer}
.pj-zone-chip button:hover{background:var(--surface);color:var(--text)}
.pj-zone-chip button svg{width:14px;height:14px}

/* Review: the project before the drop's name, which is where Back goes */
.pj-crumb{display:inline-flex;align-items:center;gap:6px;flex:none;max-width:220px;min-height:32px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--text-secondary);font:500 14px var(--label);white-space:nowrap;cursor:pointer}
.pj-crumb span{overflow:hidden;text-overflow:ellipsis}
.pj-crumb:hover{background:var(--surface);color:var(--text)}
.pj-crumb[hidden],.pj-slash[hidden]{display:none}
.pj-slash{color:var(--border);font:400 18px var(--label)}
@media (max-width:760px){.pj-crumb,.pj-slash{display:none}}

/* The drop's menu: Move to project…, and the list it opens */
.menu #move-project>span{flex:1}
.pj-pick-head{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 4px;font:600 14px var(--label);color:var(--text)}
.menu .pj-pick-head button{width:32px;min-height:32px;padding:0;justify-content:center}
.menu .pj-opt[aria-checked=true]{background:var(--surface)}
.menu .pj-opt>span:not(.pj-mini){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-tick{width:18px;height:18px;margin-left:auto;fill:none;stroke:var(--aurora-green);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.menu .pj-opt[aria-checked=true] .pj-tick{visibility:visible}
.pj-mini{display:grid;place-items:center;flex:none;width:24px;height:18px;color:var(--text-secondary)}
.pj-mini svg{width:20px;height:16px;fill:#24465f;stroke:#4f6b80;stroke-width:1}
.pj-mini svg.i{width:16px;height:16px;fill:none;stroke:currentColor}
.pj-pick{max-height:min(70vh,520px);overflow:auto}

/* A project's people */
dialog.pj-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
dialog.pj-dialog .d-in{padding:28px;gap:16px}
.pj-lede{font:400 15px/1.5 var(--body)}
.pj-fine{margin-top:-6px!important;font:400 13px/1.4 var(--body)}
.pj-dialog .pj-invite{display:flex;gap:8px;padding:0}
.pj-invite input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid #4f6b80;border-radius:10px;background:#06141f;color:var(--text);font:400 16px var(--body)}
.pj-invite input:focus{outline:2px solid var(--link);outline-offset:2px}
.pj-section{display:grid;gap:8px}
.pj-section h3{margin:0;font:600 13px var(--label);color:var(--text-secondary);letter-spacing:.02em}
.pj-list{display:grid;gap:2px}
.pj-row{display:flex;align-items:center;gap:12px;min-height:48px}
.pj-row .pj-face{width:32px;height:32px;margin:0;border:0;font-size:13px}
.pj-row>span:not(.pj-face):not(.pj-role){flex:1;min-width:0;display:grid;gap:1px}
.pj-row b{font:600 14px var(--label);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-row small{font:400 13px var(--body);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-role{flex:none;margin-left:auto;font:500 13px var(--label);color:var(--text-secondary)}
@media (max-width:560px){dialog.pj-dialog .d-in{padding:22px 18px}}

/* ---------- The comment box on a phone (prototype/comment-box.html revision 2, Adam, 3 November 2026) ----------
   Like Reddit's: a card floating just above the keyboard, rounded all round, with a handle. Its first line says what you're writing about
   and has Expand; the field has no border and grows from one line to five; Discard and Send are icons, Send round and the landing's blue
   once there's something to send. Expanded, it fills the screen above the keyboard: your name, the screen's name with a picture of the
   spot, and the field filling the rest. app.js places it from the visual viewport (--y) and sizes it when expanded (--vh). */
@media (max-width:760px){
  #composer{left:8px!important;right:8px;top:0!important;bottom:auto;width:auto;min-height:0;display:flex;flex-direction:column;padding:0 6px 6px;border:0;border-radius:22px;
    background:var(--lift);box-shadow:var(--rim),0 0 0 1px rgba(195,219,234,.45),0 -10px 30px -8px rgba(0,0,0,.85),0 18px 30px -12px rgba(0,0,0,.9);
    --safe:env(safe-area-inset-bottom,0px);transform:translateY(calc(var(--y,calc(100dvh - 100%)) - 8px - var(--safe)));transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  #composer.over-keys{--safe:0px}
  #composer.big{height:calc(var(--vh,100dvh) - 16px - env(safe-area-inset-top,0px) - var(--safe))}
  .cb-grip{display:block;align-self:center;flex:none;width:56px;height:20px;margin:0 0 -6px;padding:8px 6px;border:0;background:none;touch-action:none}
  .cb-grip::before{content:"";display:block;height:4px;border-radius:2px;background:rgba(195,219,234,.35)}
  #composer .who{display:flex;align-items:center;gap:10px;margin:0;padding:0 0 0 10px;min-height:44px;font-size:14px;color:var(--text-secondary)}
  #composer .who i{display:none}
  #composer .cnum{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid #fff;background:linear-gradient(135deg,var(--aurora-green),var(--aurora-violet) 55%,var(--aurora-pink));color:var(--pink-text);font:700 13px var(--label)}
  #composer-who{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #composer-who b,#composer.big #composer-who{color:var(--text);font-weight:600}
  .cb-icon,#composer-cancel{display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;color:var(--text-secondary)}
  .cb-icon:hover,#composer-cancel:hover{color:var(--text);background:rgba(255,255,255,.05)}
  .cb-icon svg,#composer .btn svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .cb-icon .cb-shrink,#composer.big .cb-icon .cb-grow{display:none}
  #composer.big .cb-icon .cb-shrink{display:block}
  #composer .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #composer.big .cb-about{display:flex;gap:14px;align-items:flex-start;padding:4px 10px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin:0 0 4px}
  .cb-about h3{flex:1;min-width:0;margin:4px 0 0;font:700 19px/1.3 var(--label);overflow-wrap:anywhere}
  .cb-about small{display:block;margin-top:6px;font:500 13px var(--label);color:var(--text-secondary)}
  .cb-spot{flex:none;width:112px;height:112px;border-radius:12px;background:#060F1A;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 18px -8px #000}
  #composer .quote{margin:0 10px 4px}
  #composer .quote:empty{display:none}
  #composer-text{display:block;min-height:0;max-height:calc(5 * 1.45em + 16px);margin:0;padding:6px 10px 10px;border:0;border-radius:0;background:none;box-shadow:none;outline:none;resize:none;font-size:16px;line-height:1.45}
  #composer-text::placeholder{color:#7d8fa1}
  #composer.big #composer-text{flex:1;max-height:none;padding-top:12px}
  #composer .row{display:flex;margin:0;padding:0 2px}
  #composer .row small{display:none}
  #composer .row-actions{flex:1;display:flex;align-items:center;justify-content:space-between}
  #composer #composer-post{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#2F7BEA;color:#fff;box-shadow:0 6px 16px -6px rgba(47,123,234,.7);transition:background .2s,color .2s,box-shadow .2s}
  #composer #composer-post:hover{background:#3D88F2}
  #composer-post svg{fill:currentColor;stroke:none;margin-left:2px}
  #composer[data-empty] #composer-post,#composer[data-empty] #composer-post:hover{background:rgba(255,255,255,.06);color:#6c7e90;box-shadow:none;cursor:default}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){#composer{transition:none}}

/* ---------- Opening a Drop's link (prototype/drop-loading.html revision 3, Fade, Adam, 3 November 2026) ----------
   Shown only while <html> has class="drop-link", which the Worker gives a Drop link's page, so it's up before any script runs; app/opening.js
   draws the slow rings on its canvas and fades it away once the Drop is on screen. In Midnight navy, as the Drop screen under it. */
.opening{display:none}
html.drop-link .opening{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:linear-gradient(180deg,#0B1C2E 0%,#071423 40%,#040C16 75%,#03080F 100%),#050E18;transition:opacity 1.2s ease}
.opening canvas{position:absolute;inset:0;width:100%;height:100%;filter:blur(5px)}
.opening-mid{position:relative;display:grid;justify-items:center;gap:18px}
/* The logo's drop and wave on the water itself, without its tile; it dips as each ring starts */
.opening-drop{width:84px;height:84px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 14px 18px rgba(0,0,0,.6));animation:opening-bob 2.8s ease-in-out infinite}
.opening p{margin:0;font:500 15px/1 var(--label);letter-spacing:.01em;color:#A9B8C6;text-shadow:0 1px 6px rgba(0,0,0,.8)}
@keyframes opening-bob{0%{transform:translateY(0)}14%{transform:translateY(3px) scale(.975)}45%{transform:translateY(-2px)}80%,100%{transform:translateY(0)}}
html.drop-link .opening.lift{opacity:0;pointer-events:none}
.opening.lift .opening-mid{transition:opacity .7s ease,transform 1.2s ease;opacity:0;transform:scale(.94)}

/* Dragging a Drop to file it: its row is a link (so it drags everywhere) that looks like the rest; while it's dragged, every place it can go
   is outlined, and the one under it fills */
a.drop-item{color:inherit;text-decoration:none;-webkit-user-drag:element}
a.drop-item[draggable=true]{cursor:grab}
a.drop-item:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.pj-tip{font-weight:400;color:var(--text-secondary);opacity:.8}
.side.dragging .pj-tip{opacity:0}
.side.dragging [data-drop-to]{box-shadow:inset 0 0 0 1px var(--dashed);transition:box-shadow .15s,background .15s}
.side.dragging [data-drop-to].pj-over{background:var(--surface-raised);box-shadow:inset 0 0 0 2px var(--link)}
.side.dragging .pj-new .pj-plus{border-color:var(--link)}
.pj-targets{display:grid;gap:4px;padding:0 10px 10px;border-bottom:1px solid var(--border)}
.pj-targets[hidden]{display:none}
.pj-target{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--text);font:500 14px var(--label);text-align:left}
.pj-target svg{width:16px;height:16px;flex:none;color:var(--text-secondary)}
.pj-target span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.side.dragging [data-drop-to]{transition:none}}
/* My Drops: Public or Private as an icon before a drop's date; Recent, Past 7 days and Everything else under Not in a project */
.drop-item .vis{position:relative;display:inline-flex;vertical-align:-2px;margin-right:5px;color:var(--text-secondary)}
.drop-item .vis svg.i{width:13px;height:13px}
.pj-label.pj-sub{margin-top:6px;font-size:11px;color:var(--muted)}

/* ---------- A Drop's status and a project's link (prototype/project-status.html revision 1) ---------- */
/* Aurora's amber, violet and green: In progress, In review, Resolved; To do is the muted dashed ring */
[data-st]{--st:var(--text-secondary)}
[data-st=in_progress]{--st:#F2D083;--st-bg:rgba(242,208,131,.12)}
[data-st=in_review]{--st:#B9A6F2;--st-bg:rgba(185,166,242,.14)}
[data-st=resolved]{--st:#6EE7A8;--st-bg:rgba(110,231,168,.12)}
.st-i{width:14px;height:14px;flex:none;color:var(--st)}
.st-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 6px;border-radius:11px;background:var(--st-bg);color:var(--st);font:500 12px/1 var(--label);white-space:nowrap;vertical-align:middle}
.st-chip .st-i{width:13px;height:13px}
.drop-item .meta .st-chip{margin-right:6px;height:20px}
/* The topbar's button, and its menu (a sheet on a phone) */
.status-wrap{position:relative}
.status-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--lift);box-shadow:var(--rim);color:var(--st);font:500 14px var(--label);white-space:nowrap;cursor:pointer}
.status-btn .st-i{width:16px;height:16px}
.status-btn .caret{width:14px;height:14px;fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.status-btn:disabled{cursor:default}
.status-btn:not(:disabled):hover{border-color:var(--edge-hover)}
.status-menu{min-width:290px}
.menu.status-menu [role=menuitemradio]{min-height:46px}
.status-menu [role=menuitemradio] .st-i{width:16px;height:16px}
.status-menu [role=menuitemradio] span{flex:1;font:500 14px var(--label);color:var(--text)}
.status-menu [role=menuitemradio] .tick{margin-left:auto;color:var(--text)}
.status-menu [aria-checked=false] .tick{visibility:hidden}
.st-who{margin:0;padding:6px 10px 8px;font:400 12.5px/1.4 var(--body);color:var(--text-secondary)}
.status-menu .grab,.status-scrim{display:none}
.st-note{display:grid;gap:6px;padding:4px 10px 6px}
.menu .st-note label{display:block;min-height:0;padding:0;font:500 13px var(--label);color:var(--text);cursor:default}
.menu .st-note label:hover{background:none}
.st-note label small{font:400 12px var(--body);color:var(--text-secondary)}
.st-note textarea{min-height:60px;max-height:160px;font:400 14px/1.4 var(--body)}
.menu .st-note .btn{justify-self:end;width:auto;justify-content:center;background:transparent;border:1px solid var(--border);color:var(--text)}
@media (max-width:760px){
  .status-btn .st-name{display:none}
  #review.status-open .topbar{z-index:60}
  .status-btn{padding:0 8px}
  .status-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:40;background:rgba(3,8,15,.6)}
  #review .menu.status-menu{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:41;min-width:0;padding:8px 10px max(14px,env(safe-area-inset-bottom));border-radius:16px 16px 0 0}
  .status-menu .grab{display:block;width:36px;height:4px;margin:2px auto 8px;border-radius:2px;background:var(--border)}
  .menu.status-menu [role=menuitemradio]{min-height:54px}
  .status-menu [role=menuitemradio] span{font-size:16px}
  .st-note textarea{font-size:16px}
}
@media (pointer:coarse){.st-note textarea{font-size:16px}}
/* A status set with a note, at the top of the comments */
.status-note{margin:0 12px 10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--st) 35%,transparent);border-radius:10px;background:color-mix(in srgb,var(--st) 7%,transparent)}
.status-note .sn-top{display:flex;align-items:center;gap:6px;font:500 13px var(--label);color:var(--st)}
.status-note .sn-top small{margin-left:auto;font:400 12px var(--body);color:var(--text-secondary)}
.status-note p{margin:6px 0 0;font:400 14px/1.45 var(--body);color:var(--text);overflow-wrap:anywhere}
/* An agent's links under its words (prototype/agent-links.html revision 1): one card each, the whole card the link */
.links{display:flex;flex-direction:column;gap:6px;margin-top:8px;min-width:0}
.lk{display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--text);text-decoration:none;min-width:0}
.lk:hover{border-color:var(--edge-hover,var(--border));background:var(--surface-raised)}
.lk-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:color-mix(in srgb,var(--link) 9%,transparent);color:var(--link);flex:none}
.lk svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.lk-ic svg{width:16px;height:16px}
.lk-tx{min-width:0;flex:1;display:flex;flex-direction:column}
.lk-tx b{font:500 13.5px/1.3 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-tx small{font:400 12px/1.35 var(--body);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-tx code{font:500 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--link)}
.lk-out{width:14px;height:14px;color:var(--text-secondary);flex:none;stroke-width:2}
.c .replies .r{min-width:0}
.replies .links{margin-top:6px}
/* A project's Drops by status */
.pj-filters{display:flex;gap:6px;padding:0 16px 10px 20px;overflow-x:auto;scrollbar-width:none}
.pj-filters button{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--border);border-radius:15px;background:none;color:var(--text-secondary);font:500 12.5px var(--label);white-space:nowrap;cursor:pointer}
.pj-filters button:hover{color:var(--text)}
.pj-filters button b{font-weight:600;color:var(--text)}
.pj-filters button[aria-pressed=true]{border-color:transparent;background:var(--button-bg);color:var(--button-text)}
.pj-filters button[aria-pressed=true] :is(b,.st-i){color:var(--button-text)}
/* The project's link, and what to send an AI */
.pj-ask{margin:0;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#050D17;font:400 15px/1.45 var(--body);color:var(--text)!important;overflow-wrap:anywhere}
.pj-ask-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pj-connect{padding:0;border:0;background:none;color:var(--link);font:500 14px var(--label);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pj-ask-row .btn svg{width:16px;height:16px}