/* Lanes in a browser tab (platform.js): the screens and notes only the web
   has. The shell itself is the desktop's; `data-platform="web"` on <html>
   collapses the window chrome in styles.css. */

/* The gate's web screens: plans and downloads, and the cloud computer being
   built. Same type and buttons as the sign-in. */
.pal-experience .web-gate .gate-wide{margin-top:26px}
.pal-experience .web-gate .gate-quiet{display:block;margin:14px auto 0}
.pal-experience .web-gate .gate-quiet+.gate-quiet{margin-top:4px}
.pal-experience .gate .web-signin-note{margin:18px 0 0;padding:10px 12px;border:1px solid var(--pal-line);border-radius:10px;background:var(--pal-soft);color:var(--pal-ink);font:500 13px/1.45 'Nunito Sans',sans-serif}
.web-downloads-label{margin-top:22px;font:500 12px/1.4 'Nunito Sans',sans-serif;color:var(--pal-muted)}
.web-downloads{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:8px}
.pal-experience .gate .web-download{flex:1 1 0;min-width:0;min-height:40px;padding:10px 12px;border:1px solid var(--pal-line);border-radius:10px;background:var(--pal-paper);color:var(--pal-ink);font:550 13px/1.3 'Nunito Sans',sans-serif;text-decoration:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.pal-experience .gate .web-download:hover{background:var(--pal-soft)}
.pal-experience .gate .web-download:focus-visible{outline:2px solid var(--pal-muted);outline-offset:3px}
.web-setup-bar{width:100%;height:6px;margin-top:28px;border-radius:999px;background:var(--pal-line, rgba(127,127,127,.25));overflow:hidden}
.web-setup-fill{height:100%;width:0;border-radius:inherit;background:var(--pal-ink, currentColor);transition:width 900ms ease-out}
.web-setup-clock{margin-top:8px;font:500 12px/1.4 'Nunito Sans',sans-serif;color:var(--pal-muted);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.web-setup-fill{transition:none}}

/* A note in the corner, in the desktop update banner's grammar: one dark
   slab in both themes, what happened, what to do, Later. */
/* Under dialogs and the gate, over the page. */
.web-banners{position:fixed;right:18px;bottom:18px;z-index:30;display:flex;flex-direction:column;gap:10px;width:min(340px,calc(100vw - 36px))}
.web-banners:empty{display:none}
.web-banner{padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-card);background:var(--grad-dark);color:#fff;box-shadow:var(--inset-cta-top),var(--shadow-toast);font:13px/1.5 var(--font-ui);user-select:text}
.web-banner-title{font-weight:600;margin-bottom:2px}
.web-banner-detail{opacity:.75;margin-bottom:12px}
.web-banner-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.web-banner-later,.web-banner-go{padding:6px 12px;border-radius:var(--radius-btn);cursor:pointer}
.web-banner-later{opacity:.75}
.web-banner-later:hover{opacity:1}
/* Light on the slab in both themes; the pal maps the accent to ink. */
.web-banner .web-banner-go{background:#fff;color:#1b1c20;font-weight:600}
.web-banner .web-banner-go:hover{background:#ececef}
.web-banner button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:600px){.web-banners{right:12px;left:12px;bottom:12px;width:auto}}

/* A New goal dialog on the web has nowhere else to send a goal: the field
   says where, as a fact. */
.where-badge.where-fixed{margin-left:0;vertical-align:0}

/* A part of the web app that ships on its own and is not here yet. */
.web-part-missing{max-width:520px;padding:8px 0}
.web-part-missing h2{font:600 16px/1.4 var(--font-ui);margin-bottom:6px}

/* Connections on the web: its title, as the desktop's page has, above the
   extension's cards (web-connections.js). */
.web-connections-head{max-width:760px;margin:2px 0 20px}
.web-connections-head h2{font:650 25px/1.3 var(--font-ui);letter-spacing:-.7px;color:var(--pal-ink)}
.web-connections-lede{margin-top:4px;font:400 14px/1.55 var(--font-ui);color:var(--pal-muted)}