/* App screens. Builds on the landing page's /style.css tokens. */
[hidden]{display:none!important}
body{min-height:100vh}
.nav nav{margin-left:28px;margin-right:auto}
.nav nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.nav>.who{margin-left:auto}
.nav nav:not([hidden])+.who{margin-left:0}
.who{display:flex;align-items:center;gap:14px;font-size:.9rem;color:var(--ink-2)}
.linkbtn{border:0;background:none;padding:0;font:600 .9rem var(--body);color:var(--blue);cursor:pointer;text-decoration:none}
.linkbtn:hover{text-decoration:underline}
.page{max-width:1120px;margin:0 auto;padding:clamp(28px,5vw,56px) var(--gutter) 96px}
.page--narrow{max-width:580px}
.page h1{font-size:clamp(2.1rem,4.8vw,3.2rem);font-weight:800}
.page .lead{margin-top:12px;color:var(--ink-2);font-size:1.08rem;max-width:42em}
.panel{position:relative;margin-top:28px;padding:clamp(20px,3vw,28px);background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--ink)}
.panel h2{font-size:1.5rem}
.panel p{margin-top:10px;color:var(--ink-2)}
.field{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.field label{font-weight:600;font-size:.92rem}
.input{font:inherit;padding:13px 14px;border:2px solid var(--ink);border-radius:9px;background:#fff;color:var(--ink);width:100%}
.input:focus{outline:none;box-shadow:3px 3px 0 var(--red)}
.input--code{font:800 1.9rem/1 var(--head);letter-spacing:.4em;text-align:center}
.row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:22px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.err{min-height:1.4em;margin-top:12px;color:var(--red);font-weight:600}
.note{margin-top:12px;font-size:.9rem;color:var(--ink-2)}
.spinner{display:inline-block;width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-mini{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:28px;align-items:center}
.hero-mini img{width:100%}

/* Setup stepper */
.stepper{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;font:700 .85rem/1 var(--body)}
.stepper span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink-2)}
.stepper span::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--ink)}
.stepper [data-s=done]{background:var(--mint);color:var(--ink)}
.stepper [data-s=done]::before{background:var(--green);border-color:var(--green)}
.stepper [data-s=now]{background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.stepper [data-s=now]::before{background:var(--red);border-color:var(--red)}

/* Bookmarklet install */
.install{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:28px}
.install .panel{margin-top:0}
.drag{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:12px 22px 12px 12px;border:2.5px dashed var(--ink);border-radius:999px;background:var(--yellow);color:var(--ink);font:800 1.15rem/1 var(--head);text-decoration:none;cursor:grab;box-shadow:4px 4px 0 var(--ink);animation:wiggle 3s ease-in-out infinite}
.drag img{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink)}
.drag:active{cursor:grabbing;animation:none}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-3deg)}94%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.drag{animation:none}}
.kbd{display:inline-block;padding:2px 8px;border:2px solid var(--ink);border-bottom-width:4px;border-radius:6px;background:#fff;font:600 .9rem/1.4 var(--body);color:var(--ink)}
.tip{margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--manila);border:2px solid var(--ink);font-size:.95rem}
.tip b{display:block;margin-bottom:4px}
.fakebar{margin-top:18px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:2px solid var(--line);border-radius:10px;background:#f7f3ea;font-size:.82rem;color:var(--ink-2)}
.fakebar span{padding:4px 10px;border-radius:6px;background:#fff;border:1px solid var(--line)}
.fakebar .you{background:var(--yellow);border-color:var(--ink);color:var(--ink);font-weight:700}
details.copy{margin-top:16px;font-size:.92rem}
details.copy summary{cursor:pointer;font-weight:600;color:var(--blue)}
details.copy textarea{width:100%;margin-top:10px;font:12px/1.4 ui-monospace,monospace;padding:10px;border:2px solid var(--line);border-radius:8px;resize:vertical}
.install__art img{width:100%;max-width:320px;margin:8px auto 0}

/* Provider picker */
.providers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:28px}
.provider{position:relative;display:flex;align-items:center;gap:14px;padding:18px;background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .12s,box-shadow .12s}
.provider:hover:not([disabled]){transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.provider:active:not([disabled]){transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.provider i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:#fff;font:800 1.15rem/1 var(--head);font-style:normal;border:2px solid var(--ink)}
.provider b{display:block;font:700 1.1rem/1.15 var(--head)}
.provider small{display:block;margin-top:3px;font-size:.82rem;color:var(--ink-2)}
.provider[disabled]{cursor:not-allowed;background:#f4f1ea;border-color:#c9c3b6;box-shadow:none;color:#9b958a}
.provider[disabled] i{filter:grayscale(1);opacity:.45;border-color:#c9c3b6}
.provider[disabled] small{color:#9b958a}
.provider .soon{position:absolute;right:10px;top:-11px;padding:3px 8px;border:2px solid #9b958a;border-radius:5px;background:#f4f1ea;font:700 .7rem/1.2 var(--type);letter-spacing:.05em;color:#7d776c;transform:rotate(3deg)}
.provider--live{background:var(--mint)}
.provider--live .soon{border-color:var(--green);background:#fff;color:var(--green)}

/* Run in Gmail */
.run{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:28px}
.run .panel{margin-top:0}
.howto{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.howto li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:2px solid var(--line);border-radius:12px;background:var(--paper)}
.howto li svg{flex:none;width:30px;height:30px}
.howto li b{display:block}
.howto li span{color:var(--ink-2);font-size:.95rem}
.live{text-align:center}
.live img{width:min(240px,70%);margin:0 auto}
.live h2{margin-top:6px}
.live .counts{display:flex;gap:12px;margin-top:18px}
.live .counts div{flex:1;padding:12px;border:2px solid var(--ink);border-radius:12px;background:var(--paper)}
.live .counts b{display:block;font:800 1.7rem/1.1 var(--head);font-variant-numeric:tabular-nums}
.live .counts span{font-size:.8rem;color:var(--ink-2)}
.pulse{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 12px;border-radius:999px;background:var(--manila);font-weight:600;font-size:.9rem}
.pulse::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);animation:blink 1.2s ease-in-out infinite}
.pulse--idle::before{background:#b9b3a6;animation:none}
@keyframes blink{50%{opacity:.25}}

/* Notion-style database page */
.db{max-width:1240px}
.db__icon{width:78px;height:78px;border-radius:50%;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.db h1{margin-top:18px}
.db__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;color:var(--ink-2);font-size:.95rem}
.db__meta b{color:var(--ink);font-weight:600}
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:20px;padding:12px 16px;border:2px solid var(--ink);border-radius:12px;background:var(--manila);font-weight:600}
.views{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.views .tab{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-weight:600;font-size:.92rem;border-bottom:2px solid var(--ink);border-radius:6px 6px 0 0}
.views .tab svg{width:16px;height:16px}
.views .grow{flex:1}
.search{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;min-width:220px}
.search svg{width:15px;height:15px;flex:none;color:var(--ink-2)}
.search input{border:0;outline:0;font:inherit;font-size:.92rem;width:100%;background:none;color:var(--ink)}
.search:focus-within{border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.tool{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:7px;background:#fff;font:600 .88rem var(--body);color:var(--ink);cursor:pointer;text-decoration:none}
.tool:hover{background:#f6f2e9}
.tool--danger{color:var(--red)}
.tablewrap{margin-top:4px;overflow-x:auto;background:#fff;border:2.5px solid var(--ink);border-radius:12px;box-shadow:6px 6px 0 var(--ink)}
table.grid{width:100%;border-collapse:collapse;font-size:.92rem;min-width:860px}
.grid th{position:sticky;top:0;z-index:1;background:#fbf8f1;padding:0;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.grid th button{display:flex;align-items:center;gap:7px;width:100%;padding:9px 12px;border:0;background:none;font:500 .86rem var(--body);color:var(--ink-2);cursor:pointer;text-align:left}
.grid th button:hover{background:#f3eee3}
.grid th svg{width:15px;height:15px;flex:none;opacity:.75}
.grid th .arrow{margin-left:auto;font-size:.8rem;color:var(--ink)}
.grid td{padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.grid th+th,.grid td+td{border-left:1px solid var(--line)}
.grid tbody tr{cursor:pointer}
.grid tbody tr:hover{background:#faf6ee}
.grid .num{text-align:right;font-variant-numeric:tabular-nums}
.grid th.num button{justify-content:flex-end}
.title{display:flex;align-items:center;gap:10px;font-weight:600;max-width:280px}
.title span{overflow:hidden;text-overflow:ellipsis}
.title .open{margin-left:auto;padding:2px 7px;border:1px solid var(--line);border-radius:5px;background:#fff;font:600 .72rem var(--body);color:var(--ink-2);opacity:0}
tr:hover .title .open,tr:focus-within .title .open{opacity:1}
.fav{flex:none;width:20px;height:20px;border-radius:5px;object-fit:contain;background:#fff}
.fav--letter{display:grid;place-items:center;color:#fff;font:800 .68rem/1 var(--head)}
.domain{color:var(--ink-2)}
.chips{display:flex;gap:4px;max-width:340px;overflow:hidden}
.tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:.82rem;white-space:nowrap;color:#3b3530}
.t0{background:#fde4d6}.t1{background:#dcecff}.t2{background:#e2f3df}.t3{background:#efe1fb}.t4{background:#fdf0c2}.t5{background:#fbdde8}.t6{background:#e3e2de}
.more{font-size:.8rem;color:var(--ink-2);padding:1px 4px}
.bar{display:block;height:4px;margin-top:4px;border-radius:2px;background:var(--red);opacity:.35}
.grid tfoot td{padding:9px 12px;color:var(--ink-2);font-size:.84rem;border-bottom:0;background:#fbf8f1}
.grid tfoot b{color:var(--ink);font-weight:600;margin-left:6px}
.loadmore{display:block;width:100%;padding:12px;border:0;border-top:1px solid var(--line);background:#fbf8f1;font:600 .9rem var(--body);color:var(--ink-2);cursor:pointer}
.empty{text-align:center}
.empty img{width:min(300px,70vw);margin:0 auto 12px}

/* Side peek */
.peek-bg{position:fixed;inset:0;z-index:30;background:rgba(29,27,47,.18)}
.peek{position:fixed;z-index:31;top:0;right:0;bottom:0;width:min(520px,100vw);overflow:auto;background:#fff;border-left:2.5px solid var(--ink);box-shadow:-8px 0 0 rgba(29,27,47,.12);padding:22px 28px 60px;animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.peek__top{display:flex;justify-content:flex-end}
.peek__x{width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;background:#fff;font:700 18px/1 var(--body);cursor:pointer}
.peek .fav{width:52px;height:52px;border-radius:12px}
.peek .fav--letter{font-size:1.4rem}
.peek h2{margin-top:14px;font-size:2rem}
.props{margin-top:18px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:0;font-size:.94rem}
.props dt{display:flex;align-items:center;gap:8px;padding:9px 0;color:var(--ink-2)}
.props dt svg{width:15px;height:15px}
.props dd{margin:0;padding:9px 0;display:flex;flex-wrap:wrap;gap:5px}
.peek h3{margin-top:26px;font-size:1.1rem}
.peek ul{list-style:none;margin:10px 0 0;padding:0}
.peek li{padding:8px 0;border-bottom:1px solid var(--line);font-size:.94rem;word-break:break-all}

@media (max-width:900px){
  .install,.run,.hero-mini{grid-template-columns:1fr}
  .hero-mini img{max-width:200px;margin:0 auto}
}
@media (max-width:860px){
  .nav nav#appnav{display:flex;gap:16px;margin-left:12px}
}
@media (max-width:640px){
  .who span{display:none}
  .nav .brand b{display:none}
  .search{min-width:0;flex:1 1 100%}
  .props{grid-template-columns:120px minmax(0,1fr)}
}