/* The Main Street story on the home page. Loads after site.css and uses its tokens. */
/* The story: one pinned stage. It is an illustration with its own fixed palette, the same in either theme. */
#story{position:relative}
.stage{
  position:sticky;top:env(safe-area-inset-top,0px);
  height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow:hidden;background:#CFE6EE;color:#1B1F24;
  --app-ground:#F4F2EC; --app-surface:#FFFFFF; --app-ink:#1B1F24; --app-muted:#5B6470; --app-line:#E7E3DA;
  --app-trusted:#1F5F66; --app-trusted-soft:#DDEDEA; --app-needs:#B26A00; --app-needs-soft:#FFF6E6;
  --app-person:#4B3A7A; --app-person-soft:#E7E0F5; --app-turned:#56606B; --app-turned-soft:#ECEEF0;
  --cap-ink:#14202A; --cap-muted:#33434F;
}
.stage[data-sky="dark"]{--cap-ink:#F7F2E8;--cap-muted:#DCD5E6}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
#scene text{font-family:"Bricolage Grotesque","Arial Narrow",sans-serif;font-stretch:75%}

.captions{position:absolute;z-index:5;left:var(--gutter);top:calc(var(--nav-h) + clamp(18px,4.5vh,48px));width:min(34rem,40vw);pointer-events:none}
.cap{position:absolute;left:0;top:0;width:100%;color:var(--cap-ink);opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease,color .6s ease;visibility:hidden}
.cap.on{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.cap .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:600 13px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--cap-muted);transition:color .6s ease}
.cap .eyebrow .clock{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.cap h1{font-size:clamp(2.35rem,4.7vw,4.5rem);font-weight:720;font-stretch:88%;letter-spacing:-0.028em;line-height:.98}
.cap h2{font-size:clamp(1.65rem,2.9vw,2.7rem);font-weight:660;font-stretch:92%;letter-spacing:-0.02em}
.cap p{margin-top:14px;max-width:31rem;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--cap-muted);transition:color .6s ease}
.cap .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.stage.short .cap p{display:none}
.stage[data-sky="dark"] .cap{text-shadow:0 1px 10px rgba(16,20,44,.6),0 0 2px rgba(16,20,44,.4)}
.stage .btn{text-shadow:none}
.stage .btn-primary{background:#1F5F66;color:#fff}
.stage .btn-quiet{background:rgba(255,255,255,.72);color:#1B1F24;border-color:rgba(27,31,36,.16)}

/* Name tags for the two walkers, shown before the walk starts */
.tag{position:absolute;z-index:6;left:0;top:0;padding:7px 10px 8px;border-radius:10px;background:rgba(255,255,255,.92);color:#1B1F24;font:650 13px/1.2 var(--text);white-space:nowrap;box-shadow:0 2px 8px rgba(20,30,40,.12);opacity:0;transition:opacity .35s ease;pointer-events:none}
.tag small{display:block;margin-top:2px;font-weight:500;font-size:12px;color:#5B6470}
.tag.on{opacity:1}
.tag::after{content:"";position:absolute;bottom:-6px;left:var(--tip,16px);width:12px;height:12px;background:rgba(255,255,255,.92);transform:rotate(45deg);border-radius:2px}
.tag.you{color:#4B3A7A}
.tag.cos{color:#1F5F66}

/* The chief of staff's speech */
.bubble{position:absolute;z-index:7;left:0;top:0;width:min(360px,calc(100vw - 32px));padding:12px 15px 13px;border-radius:16px;background:#fff;color:#1B1F24;box-shadow:0 12px 32px rgba(18,28,38,.18),0 1px 3px rgba(18,28,38,.12);opacity:0;transform:translateY(8px) scale(.98);transform-origin:var(--tail,40px) 100%;transition:opacity .28s ease,transform .28s ease;pointer-events:none}
.bubble.on{opacity:1;transform:none}
.bubble::after{content:"";position:absolute;left:calc(var(--tail,40px) - 9px);bottom:-8px;width:18px;height:18px;background:#fff;transform:rotate(45deg);border-radius:3px}
.bubble .who{display:flex;align-items:center;gap:8px;margin-bottom:7px;font:650 11.5px/1 var(--text);letter-spacing:.07em;text-transform:uppercase;color:#1F5F66}
.bubble .who i{position:relative;width:15px;height:15px;border-radius:5px;background:#1F5F66}
.bubble .who i::after{content:"";position:absolute;inset:4.5px;border-radius:2px;background:#9EE0D6}
.bubble .text{position:relative;z-index:1;font:500 16px/1.42 var(--text)}
.chip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 9px 5px 7px;border-radius:8px;font:650 12.5px/1.2 var(--text)}
.chip[hidden]{display:none}
.chip svg{width:14px;height:14px;flex:none}
.chip.done{background:#DDEDEA;color:#1F5F66}
.chip.ask{background:#FFF1D9;color:#8A5200}
.chip.you{background:#E7E0F5;color:#4B3A7A}
.chip.quiet{background:#ECEEF0;color:#46505B}
.chip.know{background:#E6F0EE;color:#1F5F66;box-shadow:inset 0 0 0 1px #C3DBD6}
.cites{position:relative;z-index:1;display:grid;gap:5px;margin:10px 0 0;padding:0;list-style:none}
.cites[hidden]{display:none}
.cites li{display:flex;align-items:center;gap:7px;font:600 12.5px/1.25 var(--text);color:#33434F}
.cites svg{flex:none;width:14px;height:14px;color:#1F5F66}

/* Play control and the day's timeline */
.controls{position:absolute;z-index:8;left:var(--gutter);right:var(--controls-right,40%);bottom:clamp(14px,3vh,28px);display:flex;align-items:flex-start;gap:22px}
.play{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 11px;border-radius:12px;border:1px solid rgba(27,31,36,.14);background:rgba(255,255,255,.84);color:#1B1F24;font:650 14px/1 var(--text);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex:none}
.play svg{width:16px;height:16px}
.play .i-pause{display:none}
.stage.playing .play .i-pause{display:block}
.stage.playing .play .i-play{display:none}
.day{position:relative;flex:1;min-width:0;height:44px}
.day .rail,.day .fill{position:absolute;left:0;top:19px;height:2px;border-radius:2px}
.day .rail{right:0;background:rgba(255,255,255,.3)}
.day .fill{width:0;background:#9EE0D6}
.day button{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;min-width:44px;padding:0 2px;border:0;background:none;color:#EEF0EE;font:600 11.5px/1.2 var(--text);cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.day button::before{content:"";margin-top:13px;width:10px;height:10px;border-radius:50%;background:#5A6068;border:2px solid rgba(255,255,255,.7);box-sizing:border-box;transition:background .3s,border-color .3s}
.day button.past::before{background:#9EE0D6;border-color:#9EE0D6}
.day button span{white-space:nowrap;font-variant-numeric:tabular-nums}
.day button em{margin-left:5px;font-style:normal;font-weight:500}
@media (max-width:1499px){.day button em{display:none}}
/* The phone: Symbolon's Home, drawn with the wallet's tokens and texts */
.phone-wrap{position:absolute;z-index:9;top:var(--phone-top,96px);right:var(--gutter);width:320px;height:660px;transform:scale(var(--phone-scale,1));transform-origin:top right}
.phone-cap{position:absolute;top:-26px;right:8px;font:650 11.5px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--cap-muted);transition:color .6s ease}
.phone-glow{position:absolute;inset:-8px;border-radius:56px;pointer-events:none;transition:box-shadow .5s ease}
.phone-wrap.asking .phone-glow{box-shadow:0 0 0 5px rgba(178,106,0,.3),0 0 46px 10px rgba(178,106,0,.22)}
.phone{position:relative;width:320px;height:660px;padding:11px;border-radius:50px;background:#0F1316;box-shadow:0 34px 60px -24px rgba(12,22,32,.55),0 14px 26px -14px rgba(12,22,32,.4),inset 0 0 0 1.5px #2C3237}
.phone::before,.phone::after{content:"";position:absolute;left:-3px;width:3px;border-radius:2px 0 0 2px;background:#22282C}
.phone::before{top:120px;height:34px}
.phone::after{top:170px;height:58px}
.screen{position:relative;height:100%;border-radius:40px;overflow:hidden;background:var(--app-ground);color:var(--app-ink);font-family:var(--text)}
.island{position:absolute;z-index:6;top:10px;left:50%;width:94px;height:28px;margin-left:-47px;border-radius:15px;background:#0A0D0F}
.statusbar{position:relative;z-index:4;height:48px;padding:5px 24px 0 32px;display:flex;align-items:center;justify-content:space-between;font:650 13.5px/1 var(--text);font-variant-numeric:tabular-nums}
.sig{display:flex;align-items:center;gap:5px}
.sig svg{height:11px;width:auto}
.sig .nosvc{display:none;font:600 11.5px/1 var(--text);color:var(--app-muted)}
.screen.offline .sig .bars,.screen.offline .sig .wifi{display:none}
.screen.offline .sig .nosvc{display:inline}
.app{position:absolute;top:48px;left:0;right:0;bottom:76px;padding:4px 16px 0;overflow:hidden;transition:opacity .35s ease}
.screen.offline .app{opacity:.5}
.offline-note{display:none}
.greet{margin-top:6px;font:500 12.5px/1.2 var(--text);color:var(--app-muted)}
.heading{margin-top:4px;font:650 25px/1.1 var(--display);letter-spacing:-.012em}
.quiet{margin-top:6px;font:400 12.5px/1.45 var(--text);color:var(--app-muted)}
.card-slot{display:grid;grid-template-rows:0fr;margin-top:0;transition:grid-template-rows .45s ease,margin-top .45s ease}
.card-slot.open{grid-template-rows:1fr;margin-top:12px}
.card-slot>div{min-height:0;overflow:hidden}
.card{padding:12px 13px 13px;border-radius:16px;background:var(--app-surface);box-shadow:inset 0 0 0 1px rgba(178,106,0,.32)}
.card .label{display:flex;align-items:center;gap:6px;font:700 10.5px/1 var(--text);letter-spacing:.07em;text-transform:uppercase;color:var(--app-needs)}
.card .label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--app-needs)}
.card .title{margin-top:8px;font:650 16px/1.22 var(--display)}
.card .detail{margin-top:3px;font:500 12px/1.35 var(--text);color:var(--app-muted);font-variant-numeric:tabular-nums}
.card .why{margin-top:9px;padding-top:9px;border-top:1px solid var(--app-line);font:400 11.5px/1.42 var(--text)}
.card .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.card .b{position:relative;height:38px;border-radius:12px;overflow:hidden;font:650 13px/38px var(--text);text-align:center;transition:filter .2s ease,transform .2s ease}
.card .b.decline{background:#ECE8DF;color:var(--app-ink)}
.card .b.approve{background:var(--app-trusted);color:#fff}
.card .b.pressed{filter:brightness(.86);transform:scale(.97)}
.card .done-state{display:none;align-items:center;gap:8px;padding:2px 0;font:650 13px/1.3 var(--text);color:var(--app-trusted)}
.card .done-state svg{width:18px;height:18px;flex:none}
.card.resolved{box-shadow:inset 0 0 0 1px rgba(31,95,102,.28)}
.card.resolved .ask-state{display:none}
.card.resolved .done-state{display:flex}
.card.resolved.declined{box-shadow:inset 0 0 0 1px var(--app-line)}
.card.resolved.declined .done-state{color:var(--app-muted)}
.touch{position:absolute;z-index:3;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(27,31,36,.2);border:2px solid rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.2);pointer-events:none;opacity:0;transform:scale(1.5);transition:opacity .18s ease,transform .18s ease}
.touch.on{opacity:1;transform:scale(1)}
.cos-row{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:16px;background:var(--app-surface)}
.badge{position:relative;flex:none;width:30px;height:30px;border-radius:9px;background:var(--app-trusted-soft)}
.badge::after{content:"";position:absolute;inset:9px;border-radius:3px;background:var(--app-trusted)}
.cos-row .t{font:650 12.5px/1.2 var(--text)}
.cos-row .s{margin-top:3px;font:500 11.5px/1.3 var(--text);color:var(--app-muted);font-variant-numeric:tabular-nums}
.list-h{margin:14px 2px 6px;font:700 10.5px/1 var(--text);letter-spacing:.07em;text-transform:uppercase;color:var(--app-muted)}
.entries{list-style:none;margin:0;padding:0;border-radius:16px;background:var(--app-surface);overflow:hidden}
.entry{display:none;grid-template-columns:22px 1fr;gap:9px;padding:9px 11px;border-top:1px solid var(--app-line)}
.screen.final .greet{display:none}
.screen.final .entry{padding-block:8px}
.entry.show{display:grid}
.entry.top{border-top:0}
.entry .ic{display:grid;place-items:center;width:22px;height:22px;border-radius:7px}
.entry .ic svg{width:12px;height:12px}
.entry.done .ic{background:var(--app-trusted-soft);color:var(--app-trusted)}
.entry.you .ic{background:var(--app-person-soft);color:var(--app-person)}
.entry.turned .ic{background:var(--app-turned-soft);color:var(--app-turned)}
.entry .w{font:650 12px/1.3 var(--text)}
.entry .r{margin-top:2px;font:400 11px/1.35 var(--text);color:var(--app-muted)}
.entry .tm{font-variant-numeric:tabular-nums;white-space:nowrap}
.entry.fresh{animation:fresh 1.4s ease}
@keyframes fresh{0%{background:#FFF0CC}100%{background:transparent}}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:76px;padding:9px 8px 22px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.92);border-top:1px solid var(--app-line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;font:650 10px/1 var(--text);color:#8A929B}
.tab svg{width:20px;height:20px}
.tab.on{color:var(--app-trusted)}
.notif{position:absolute;z-index:5;top:8px;left:9px;right:9px;display:grid;grid-template-columns:32px 1fr auto;gap:9px;align-items:start;padding:10px 12px 11px;border-radius:22px;background:rgba(251,250,247,.97);box-shadow:0 10px 26px rgba(0,0,0,.2);transform:translateY(-135%);transition:transform .45s cubic-bezier(.2,.9,.25,1.08)}
.notif.on{transform:none}
.notif .ai{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#F4F2EC}
.notif .ai svg{width:24px;height:24px}
.notif .nt{font:700 12px/1.25 var(--text)}
.notif .nb{margin-top:2px;font:400 11.5px/1.35 var(--text);color:#3B444D}
.notif .now{font:500 10.5px/1 var(--text);color:#8A929B}

/* Phones and portrait windows: the device you are holding is the phone, so the app becomes a sheet */
@media (max-width:760px),(max-aspect-ratio:4/5){
  .captions{left:16px;right:16px;width:auto;top:calc(var(--nav-h) + 12px)}
  .cap h1{font-size:clamp(1.85rem,8.2vw,2.6rem)}
  .cap h2{font-size:clamp(1.3rem,5.8vw,1.8rem)}
  .cap p{margin-top:8px;font-size:14.5px}
  .cap .eyebrow{margin-bottom:8px;font-size:12px}
  .cap .actions{margin-top:14px}
  .stage.short .cap p{display:none}
  .bubble .text{font-size:15px}
  .phone-wrap{top:auto;bottom:0;left:10px;right:10px;width:auto;height:auto;transform:none}
  .phone-cap,.phone-glow,.island,.statusbar,.tabbar,.notif,.touch{display:none}
  .phone{width:auto;height:auto;padding:0;border-radius:22px 22px 0 0;background:transparent;box-shadow:0 -8px 28px rgba(12,22,32,.2)}
  .phone::before,.phone::after{display:none}
  .screen{height:auto;border-radius:22px 22px 0 0}
  .app{position:relative;top:0;bottom:auto;padding:8px 14px 14px}
  .app::before{content:"";display:block;width:36px;height:4px;margin:0 auto 8px;border-radius:2px;background:#D3CEC2}
  .greet,.quiet,.list-h{display:none}
  .heading{margin-top:0;font-size:19px}
  .cos-row{margin-top:8px;padding:8px 10px}
  .entries{margin-top:8px}
  .entry.show:not(.latest){display:none}
  .screen.final .entry.show.recent{display:grid}
  .screen.carding .cos-row,.screen.carding .entries{display:none}
  .screen.offline .app{opacity:1}
  .screen.offline .offline-note{display:block;margin-top:6px;padding:6px 10px;border-radius:9px;background:#ECEEF0;color:#46505B;font:600 12.5px/1.3 var(--text)}
  .controls{left:auto;right:16px;bottom:auto;top:calc(var(--nav-h) + 10px);display:none}
  .stage.playing .controls{display:flex}
  .day{display:none}
  .play span{display:none}
  .play{padding:0 11px}
}


@media (prefers-reduced-motion:reduce){
  .cap,.bubble,.notif,.card-slot,.tag,.card .b,.touch,.phone-glow{transition:none}
  .entry.fresh{animation:none}
}