/* ============================================================ AQUARIUS HD — APP SHELL (shared across all pages) Builds on glass.css. Nav chrome ported verbatim from the V4 Chart View so every screen reads as one product. ============================================================ */ /* ---- SHELL ---- */ .shell{display:flex;flex-direction:column;height:100vh;padding:16px 18px;gap:14px;position:relative;z-index:1} .btn-primary,.btn-secondary,.btn-ghost,.oauth-btn,.btn-tertiary,.danger-link,.nav-link,.brand,.am-item,.set-nav a{text-decoration:none} .btn-primary,.btn-ghost,.btn-secondary,.oauth-btn{white-space:nowrap} .nc-actions .btn-primary{flex:none} .page{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden} .page-inner{max-width:1180px;margin:0 auto;padding:8px 6px 56px} .page-inner.wide{max-width:1320px} /* ---- TOP NAV (verbatim from V4) ---- */ .nav{height:58px;display:flex;align-items:center;gap:26px;padding:0 18px 0 20px; border-radius:var(--r-pill);flex:none; position:relative;z-index:50; background:var(--glass-below-bg);border:1px solid var(--glass-below-border); -webkit-backdrop-filter:var(--glass-above-blur);backdrop-filter:var(--glass-above-blur); box-shadow:var(--glass-below-shadow)} .brand{display:flex;align-items:center;gap:11px;text-decoration:none} .brand .mark{width:30px;height:30px;flex:none} .brand .wordmark{display:flex;flex-direction:column;line-height:1} .brand .wordmark .name{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-0.01em;color:var(--clean-white)} .brand .wordmark .label{font-size:8.5px;letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--blue-grey);margin-top:3px} .nav-links{display:flex;align-items:center;gap:4px;margin-left:8px} .nav-link{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);color:var(--blue-grey);font-size:13px;text-decoration:none;transition:.15s var(--ease)} .nav-link:hover{color:var(--clean-white);background:var(--glass-chrome-bg)} .nav-link.active{color:var(--clean-white);background:var(--glass-chrome-bg)} .nav-link svg{width:16px;height:16px} /* Locked (paid) nav item for free users — dimmed with a small lock glyph. */ /* Locked items read like any other nav row — no dimming, no glass bar — just a small cyan Plus badge on the side marking them as an upgrade. */ .nav-link.locked{color:var(--blue-grey)} .nav-link.locked:hover{color:var(--clean-white)} .nav-link .nav-plus,.drawer-link .nav-plus{display:inline-flex;align-items:center;margin-left:6px;color:var(--cyan)} .nav-link .nav-plus svg,.drawer-link .nav-plus svg{width:13px;height:13px} /* In the drawer, push the Plus to the far right of the row. */ .drawer-link{position:relative} .drawer-link .nav-plus{margin-left:auto} .nav-spacer{flex:1} .nav-new{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px 0 13px;border-radius:var(--r-pill); background:var(--cyan);color:var(--deep-space);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap; box-shadow:0 8px 20px -10px rgba(55,213,232,0.7);transition:.15s var(--ease)} .nav-new:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(55,213,232,0.85)} .nav-new svg{width:15px;height:15px} .nav-icon-btn{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%; background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border);color:var(--blue-grey);transition:.15s var(--ease)} .nav-icon-btn:hover{color:var(--clean-white);border-color:rgba(247,250,250,0.2)} .nav-icon-btn svg{width:16px;height:16px} .nav-search{display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;border-radius:var(--r-pill); background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border);color:var(--blue-grey);width:210px;transition:.15s var(--ease)} .nav-search:hover{border-color:rgba(247,250,250,0.2)} .nav-search svg{width:15px;height:15px} /* ---- VIEW SWITCH (Transit Chart <-> Transit Tools) ---- */ .meta-spacer{flex:1} /* The descriptor bubble must YIELD before the view-switch does. Every page sheet declares `.meta-bubble{flex:none}`, which made the meta-row two non-shrinking items: past a certain width the switch is simply pushed off the viewport and the page scrolls sideways. The width that triggers it is locale-dependent — the Russian chip labels ("ОПРЕДЕЛЁННОСТЬ · Расщеплённая") run ~180px wider than English, so /chart broke from 1440px down and /transits at 1280px, while English only broke at 1200px. A px breakpoint cannot fix that class of bug; letting the bubble shrink can. Chips clip before the tabs do, and Type/Authority/Profile are all repeated in the reading panel's Overview tab, so nothing becomes unreachable. Specificity (0,2,0) beats the page sheets' `.meta-bubble` (0,1,0), so this wins regardless of stylesheet order. practice.css carried this rule for the client-detail header only; it now lives here for every engine page. */ .meta-row .meta-bubble{flex:0 1 auto;min-width:0;overflow:hidden} .view-switch{display:inline-flex;align-items:center;gap:4px;height:60px;padding:6px;flex:none;border-radius:var(--r-pill); background:var(--glass-below-bg);border:1px solid var(--glass-below-border); -webkit-backdrop-filter:var(--glass-below-blur);backdrop-filter:var(--glass-below-blur);box-shadow:var(--glass-below-shadow)} .vs-opt{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 17px;border-radius:var(--r-pill); font-size:13px;font-weight:500;color:var(--blue-grey);white-space:nowrap;text-decoration:none;transition:.15s var(--ease)} .vs-opt .vs-ic{width:16px;height:16px;flex:none;stroke-width:1.9} .vs-opt:hover{color:var(--clean-white)} .vs-opt.active{color:var(--deep-space);background:var(--cyan);box-shadow:0 8px 20px -10px rgba(55,213,232,0.7)} .vs-opt.active:hover{color:var(--deep-space)} @media(max-width:1180px){.vs-opt span{display:none}.vs-opt{padding:0 14px}} /* ---- AVATAR + DROPDOWN ---- */ .avatar-wrap{position:relative;flex:none} .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#13384b,#0b2030); border:1px solid rgba(185,244,248,0.28);display:flex;align-items:center;justify-content:center; font-weight:600;font-size:12px;color:var(--aqua-soft);transition:.15s var(--ease)} .avatar:hover{border-color:rgba(185,244,248,0.5)} .avatar-menu{position:absolute;top:46px;right:0;width:236px;padding:8px;border-radius:var(--r-md);z-index:60; background:linear-gradient(180deg,rgba(13,36,51,0.92),rgba(7,24,39,0.96)); border:1px solid var(--glass-below-border); -webkit-backdrop-filter:var(--glass-above-blur);backdrop-filter:var(--glass-above-blur); box-shadow:0 24px 60px -20px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.06); opacity:0;transform:translateY(-6px) scale(0.98);transform-origin:top right;pointer-events:none;transition:.16s var(--ease)} .avatar-wrap.open .avatar-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .am-head{display:flex;align-items:center;gap:11px;padding:9px 10px 11px;border-bottom:1px solid var(--glass-chrome-border);margin-bottom:6px} .am-head .av{width:38px;height:38px;border-radius:50%;flex:none;background:linear-gradient(135deg,#13384b,#0b2030); border:1px solid rgba(185,244,248,0.28);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:var(--aqua-soft)} .am-head .nm{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--clean-white)} .am-head .em{font-size:11px;color:var(--blue-grey);margin-top:2px} .am-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:9px;text-decoration:none; color:var(--mist-grey);font-size:13px;transition:.12s var(--ease)} .am-item:hover{background:var(--glass-chrome-bg);color:var(--clean-white)} .am-item svg{width:16px;height:16px;color:var(--blue-grey);flex:none} .am-item:hover svg{color:var(--cyan)} /* Current page in the avatar menu. The secondary destinations (account, dictionary, help) live only here and in the mobile drawer, so without this there was no "you are here" anywhere on those pages. */ .am-item.active{background:var(--glass-chrome-bg);color:var(--clean-white)} .am-item.active svg{color:var(--cyan)} .am-item.plus{color:var(--aqua-soft)} .am-item.plus svg{color:var(--cyan)} .am-sep{height:1px;background:var(--glass-chrome-border);margin:6px 4px} /* Language switch — lives inside the avatar menu (and, because responsive.css hides .avatar-wrap at ≤600px, inside the mobile drawer as well). Rows are endonyms: 'Deutsch', never a flag and never 'German'. */ .am-group{margin:0;padding:7px 10px 5px;font-size:10px;font-weight:600;letter-spacing:0.14em; text-transform:uppercase;color:var(--blue-grey)} .am-locales{display:flex;flex-direction:column;gap:1px} .am-locale{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;border-radius:9px; background:transparent;color:var(--mist-grey);font-family:inherit;font-size:13px;text-align:left; cursor:pointer;transition:.12s var(--ease)} .am-locale:hover{background:var(--glass-chrome-bg);color:var(--clean-white)} .am-locale.on{background:var(--glass-chrome-bg);color:var(--clean-white)} .am-locale:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px} .am-lc{flex:none;width:20px;font-family:var(--font-mono);font-size:10px;font-weight:600; letter-spacing:0.06em;color:var(--blue-grey)} .am-locale.on .am-lc{color:var(--cyan)} .am-ln{flex:1} .am-lk{flex:none;width:14px;display:inline-flex;color:var(--cyan)} .am-lk svg{width:14px;height:14px} /* Drawer copy of the same list: the drawer's own links are larger, so match them rather than the compact menu rows. */ .am-locales--drawer .am-locale{padding:11px 12px;font-size:14.5px;border-radius:11px} .am-locales--drawer .am-lc{width:24px;font-size:11px} /* tier chip used in nav / headers */ .tier-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill); font-size:11px;font-weight:600;letter-spacing:0.02em; background:rgba(55,213,232,0.12);border:1px solid rgba(55,213,232,0.3);color:var(--aqua-soft)} .tier-chip svg{width:13px;height:13px;color:var(--cyan)} .tier-chip.free{background:var(--glass-chrome-bg);border-color:var(--glass-chrome-border);color:var(--blue-grey)} .tier-chip.free svg{color:var(--blue-grey)} /* ---- PAGE HEADER ---- */ .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:18px 0 26px} .page-head .ph-titles{min-width:0} .page-head .eyebrow{font-size:11px;letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--cyan);margin-bottom:9px;display:flex;align-items:center;gap:9px} .page-head h1{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3vw,34px);letter-spacing:var(--ls-head);color:var(--clean-white);line-height:1.05} .page-head .sub{font-size:13.5px;color:var(--blue-grey);margin-top:8px} .page-head .ph-actions{display:flex;align-items:center;gap:12px;flex:none} /* generic field search (header) */ .field-search{display:flex;align-items:center;gap:9px;height:40px;padding:0 15px;border-radius:var(--r-pill); background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border);color:var(--blue-grey);min-width:230px;transition:.15s var(--ease)} .field-search:focus-within{border-color:rgba(55,213,232,0.4)} .field-search svg{width:16px;height:16px;flex:none} .field-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--clean-white);font-family:inherit;font-size:13px} .field-search input::placeholder{color:var(--blue-grey)} /* ============================================================ LIBRARY — chart cards ============================================================ */ .lib-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap} .seg-tabs{display:inline-flex;background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border); border-radius:var(--r-pill);padding:3px;-webkit-backdrop-filter:var(--glass-chrome-blur);backdrop-filter:var(--glass-chrome-blur)} .seg-tabs button{padding:7px 15px;border-radius:var(--r-pill);font-size:12.5px;color:var(--blue-grey);font-weight:500;transition:.15s var(--ease)} .seg-tabs button.on{background:var(--glass-above-bg);color:var(--clean-white);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)} .seg-tabs button:not(.on):hover{color:var(--clean-white)} /* A tab that names a feature the current tier does not hold (the library's Clients tab on free/plus) wears the same cyan plus mark as a locked nav link — one visual language for "this exists, it's paid". */ .seg-tabs button .tab-plus{display:inline-flex;align-items:center;margin-left:6px;color:var(--cyan);vertical-align:-2px} .seg-tabs button .tab-plus svg{width:12px;height:12px} .lib-count{margin-left:auto;font-size:12px;color:var(--blue-grey)} /* Sub-filter row (Active/Archived/All) under the main tabs — tighter than a full .lib-toolbar because it hangs off the row above it. */ .lib-subbar{display:flex;align-items:center;gap:10px;margin:-8px 0 20px} /* Section-level paywall: the Clients TAB is gated, not the whole page, so the veil is scoped to the tab body and the user keeps their nav + own charts. Reuses the .paywall-* card styles further down this file. */ .tab-gate{position:relative;min-height:420px} .tab-gate > .paywall-veil{border-radius:var(--r-lg)} /* ---- LIBRARY FILTER BAR (pills + dropdowns) ---- */ .filter-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:20px} .filter-bar .fb-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:0.04em; text-transform:uppercase;color:var(--blue-grey);padding-right:3px} .filter-bar .fb-label svg{width:15px;height:15px} .filter-bar .fb-clear{margin-left:4px;font-size:12px;color:var(--cyan);padding:6px 4px;transition:.13s var(--ease)} .filter-bar .fb-clear:hover{color:var(--cyan-light)} .filter-drop{position:relative} .fdrop-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 14px;border-radius:var(--r-pill); font-size:12.5px;font-weight:500;color:var(--mist-grey);white-space:nowrap; background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border); -webkit-backdrop-filter:var(--glass-chrome-blur);backdrop-filter:var(--glass-chrome-blur);transition:.15s var(--ease)} .fdrop-btn:hover{color:var(--clean-white);border-color:rgba(247,250,250,0.2)} .fdrop-btn .fd-car{width:13px;height:13px;color:var(--blue-grey);transition:transform .18s var(--ease)} .fdrop-btn .fd-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px; border-radius:var(--r-pill);background:var(--cyan);color:var(--deep-space);font-family:var(--font-mono);font-size:10.5px;font-weight:700} .fdrop-btn .fd-badge[hidden]{display:none} .filter-drop.open .fdrop-btn{border-color:rgba(55,213,232,0.45);background:var(--glass-accent-bg);color:var(--clean-white)} .filter-drop.open .fdrop-btn .fd-car{transform:rotate(180deg)} .filter-drop.active .fdrop-btn{border-color:rgba(55,213,232,0.4);color:var(--clean-white)} .fdrop-menu{position:absolute;top:44px;left:0;min-width:210px;z-index:60;padding:6px;display:none; border-radius:var(--r-md); background:var(--glass-above-bg);border:1px solid var(--glass-above-border); -webkit-backdrop-filter:var(--glass-above-blur);backdrop-filter:var(--glass-above-blur);box-shadow:var(--glass-above-shadow)} .filter-drop.open .fdrop-menu{display:block} .fdrop-opt{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:var(--r-sm); font-size:13px;color:var(--mist-grey);text-align:left;transition:.12s var(--ease)} .fdrop-opt:hover{background:rgba(247,250,250,0.06);color:var(--clean-white)} .fdrop-opt .fd-box{flex:none;width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center; border:1.5px solid var(--glass-chrome-border);color:var(--deep-space);transition:.12s var(--ease)} .fdrop-opt .fd-box svg{width:12px;height:12px;opacity:0} .fdrop-opt.on .fd-box{background:var(--cyan);border-color:var(--cyan)} .fdrop-opt.on .fd-box svg{opacity:1} .fdrop-opt .fd-name{flex:1} .fdrop-opt .fd-ct{font-family:var(--font-mono);font-size:10.5px;color:var(--blue-grey)} .lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px} .lib-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; padding:50px 20px;border-radius:var(--r-lg);border:1px dashed var(--glass-chrome-border);color:var(--blue-grey)} .lib-empty .le-t{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--clean-white)} .lib-empty .le-s{font-size:13px} .chart-card{display:flex;flex-direction:column;border-radius:var(--r-lg);padding:18px;text-decoration:none;position:relative;overflow:hidden; background:var(--glass-below-bg);border:1px solid var(--glass-below-border); -webkit-backdrop-filter:var(--glass-below-blur);backdrop-filter:var(--glass-below-blur); box-shadow:var(--glass-below-shadow);transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)} .chart-card.is-open{cursor:pointer} .chart-card.is-open:focus-visible{outline:2px solid rgba(55,213,232,0.7);outline-offset:2px} .chart-card.is-open:hover{transform:translateY(-3px);border-color:rgba(185,244,248,0.34); box-shadow:0 26px 60px -26px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.08)} .chart-card .cc-top{display:flex;gap:15px;align-items:flex-start} .cc-graph{width:78px;height:118px;flex:none;border-radius:var(--r-md);background:var(--bodygraph-bg); display:flex;align-items:center;justify-content:center;padding:8px 6px; border:1px solid rgba(247,250,250,0.07);box-shadow:inset 0 0 24px rgba(0,0,0,0.6)} .cc-graph svg{height:100%;width:auto;display:block} .cc-id{flex:1;min-width:0;padding-top:2px} .cc-id .nm{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--clean-white);letter-spacing:-0.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cc-id .type{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;color:var(--aqua-soft);font-weight:500} .cc-id .type .glyph{font-size:14px} .cc-id .born{font-size:11.5px;color:var(--blue-grey);margin-top:9px;line-height:1.5} .cc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:15px;border-top:1px solid var(--glass-chrome-border)} .cc-tag{font-size:10.5px;padding:4px 9px;border-radius:var(--r-pill);background:var(--glass-chrome-bg); border:1px solid var(--glass-chrome-border);color:var(--mist-grey)} .cc-tag b{color:var(--clean-white);font-weight:600} .cc-fav{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center; color:var(--blue-grey);opacity:0;transition:.13s var(--ease)} .chart-card:hover .cc-fav{opacity:1} .cc-fav svg{width:15px;height:15px} .cc-fav.on{opacity:1;color:var(--cyan)} /* new-chart tile */ .card-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;min-height:172px; border-radius:var(--r-lg);text-decoration:none;cursor:pointer; border:1.5px dashed rgba(159,178,186,0.3);background:rgba(247,250,250,0.015); color:var(--blue-grey);transition:.15s var(--ease)} .card-new:hover{border-color:rgba(55,213,232,0.5);color:var(--clean-white);background:rgba(55,213,232,0.05)} .card-new .pl{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border);transition:.15s var(--ease)} .card-new:hover .pl{background:rgba(55,213,232,0.12);border-color:rgba(55,213,232,0.3);color:var(--cyan)} .card-new .pl svg{width:22px;height:22px} .card-new span.lab{font-size:13px;font-weight:500} /* ============================================================ AUTH — sign in / create account ============================================================ */ .auth-stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;position:relative;z-index:1} .auth-watermark{position:fixed;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;pointer-events:none} .auth-watermark svg{height:118%;width:auto;opacity:0.05} .auth-card{position:relative;z-index:2;width:100%;max-width:432px;border-radius:var(--r-lg);padding:38px 38px 30px; background:var(--glass-above-bg);border:1px solid var(--glass-above-border); -webkit-backdrop-filter:var(--glass-above-blur);backdrop-filter:var(--glass-above-blur);box-shadow:var(--glass-above-shadow)} /* Chrome-free auth screen: the marketing nav is hidden, so this button (below the card) is the way back to the public site. Matches the card width. */ .auth-back-btn{width:100%;max-width:432px;display:inline-flex;align-items:center;justify-content:center;gap:8px; height:44px;border-radius:var(--r-md)} .auth-back-btn svg{flex:none} .auth-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:26px} /* The brand mark doubles as a home link. */ .auth-logo{display:inline-flex;margin-bottom:15px;border-radius:12px;transition:opacity .15s var(--ease)} .auth-logo:hover{opacity:0.82} .auth-brand .mark{width:46px;height:46px;margin-bottom:15px} .auth-brand h1{font-family:var(--font-display);font-weight:600;font-size:23px;color:var(--clean-white);letter-spacing:var(--ls-head)} .auth-brand p{font-size:13px;color:var(--blue-grey);margin-top:8px;max-width:280px;line-height:1.5} .auth-toggle{display:flex;background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border);border-radius:var(--r-pill);padding:3px;margin-bottom:24px} .auth-toggle button{flex:1;height:34px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--blue-grey);transition:.15s var(--ease)} .auth-toggle button.on{background:var(--cyan);color:var(--deep-space);box-shadow:0 6px 16px -8px rgba(55,213,232,0.6)} .oauth-row{display:flex;flex-direction:column;gap:10px;margin-bottom:20px} .oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;border-radius:var(--r-pill); background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border);color:var(--clean-white);font-size:13.5px;font-weight:500; transition:.14s var(--ease)} .oauth-btn:hover{border-color:rgba(247,250,250,0.26);background:rgba(247,250,250,0.08)} .oauth-btn svg{width:18px;height:18px} .auth-or{display:flex;align-items:center;gap:14px;margin:6px 0 18px;color:var(--blue-grey);font-size:11px;letter-spacing:0.1em;text-transform:uppercase} .auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--glass-chrome-border)} /* ============================================================ FORM PRIMITIVES (auth + new chart + settings) ============================================================ */ .field{margin-bottom:16px} .field > label{display:block;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--blue-grey);margin-bottom:8px;font-weight:500} .field .hint{font-size:11px;color:var(--blue-grey);margin-top:7px;line-height:1.5} .inp{display:flex;align-items:center;gap:10px;height:46px;padding:0 15px;border-radius:var(--r-md); background:rgba(7,24,39,0.5);border:1px solid var(--glass-chrome-border);transition:.14s var(--ease)} .inp:focus-within{border-color:rgba(55,213,232,0.45);background:rgba(7,24,39,0.66);box-shadow:0 0 0 3px rgba(55,213,232,0.1)} .inp svg{width:16px;height:16px;color:var(--blue-grey);flex:none} .inp input,.inp select{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--clean-white);font-family:inherit;font-size:14px} .inp input::placeholder{color:var(--blue-grey)} .inp input::-webkit-calendar-picker-indicator{filter:invert(0.7) sepia(1) saturate(2) hue-rotate(140deg);opacity:0.6;cursor:pointer} .inp select{appearance:none;cursor:pointer;color:var(--clean-white)} .inp select option{background:var(--deep-ocean);color:var(--clean-white)} .field-2{display:grid;grid-template-columns:1fr 1fr;gap:13px} /* segmented control (matches V4) */ .seg-ctl{display:inline-flex;background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border); border-radius:var(--r-pill);padding:3px;height:40px} .seg-ctl button{padding:0 16px;border-radius:var(--r-pill);font-size:12.5px;color:var(--blue-grey);font-weight:500;display:flex;align-items:center;transition:.15s var(--ease)} .seg-ctl button.on{background:var(--cyan);color:var(--deep-space);font-weight:600;box-shadow:0 6px 16px -8px rgba(55,213,232,0.6)} .seg-ctl button:not(.on):hover{color:var(--clean-white)} .seg-ctl.full{display:flex} .seg-ctl.full button{flex:1;justify-content:center} /* toggle switch */ .switch{position:relative;width:46px;height:26px;border-radius:var(--r-pill);flex:none;cursor:pointer; background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border);transition:.18s var(--ease)} .switch .kn{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--blue-grey);transition:.2s var(--ease)} .switch.on{background:rgba(55,213,232,0.22);border-color:rgba(55,213,232,0.45)} .switch.on .kn{left:22px;background:var(--cyan);box-shadow:0 2px 8px -2px rgba(55,213,232,0.7)} /* location result dropdown */ .loc-wrap{position:relative} .loc-results{position:absolute;top:52px;left:0;right:0;z-index:30;padding:6px;border-radius:var(--r-md); background:linear-gradient(180deg,rgba(13,36,51,0.96),rgba(7,24,39,0.98));border:1px solid var(--glass-below-border); -webkit-backdrop-filter:var(--glass-above-blur);backdrop-filter:var(--glass-above-blur); box-shadow:0 24px 60px -20px rgba(0,0,0,0.7);display:none} .loc-wrap.open .loc-results{display:block} .loc-item{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;cursor:pointer;transition:.12s var(--ease)} .loc-item:hover,.loc-item.hl{background:var(--glass-chrome-bg)} .loc-item svg{width:15px;height:15px;color:var(--blue-grey);flex:none} .loc-item .lc-city{font-size:13px;color:var(--clean-white)} .loc-item .lc-sub{font-size:11px;color:var(--blue-grey)} .loc-item .lc-tz{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--blue-grey)} /* ============================================================ NEW CHART layout ============================================================ */ .nc-grid{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:20px;align-items:start} .nc-form{border-radius:var(--r-lg);padding:30px 30px 26px; background:var(--glass-above-bg);border:1px solid var(--glass-above-border); -webkit-backdrop-filter:var(--glass-above-blur);backdrop-filter:var(--glass-above-blur);box-shadow:var(--glass-above-shadow)} .nc-form h2{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--clean-white);margin-bottom:5px} .nc-form .lede{font-size:13px;color:var(--blue-grey);margin-bottom:26px;line-height:1.5} .nc-actions{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--glass-chrome-border)} .nc-actions .grow{flex:1} .nc-preview{position:sticky;top:8px;border-radius:var(--r-lg);overflow:hidden; background:var(--glass-below-bg);border:1px solid var(--glass-below-border); -webkit-backdrop-filter:var(--glass-below-blur);backdrop-filter:var(--glass-below-blur);box-shadow:var(--glass-below-shadow)} .nc-preview .pv-graph{height:300px;background:var(--bodygraph-bg);display:flex;align-items:center;justify-content:center;padding:22px; border-bottom:1px solid var(--glass-chrome-border);position:relative} .nc-preview .pv-graph svg{height:248px;width:auto;opacity:0.92} .nc-preview .pv-graph .pv-tag{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11px;color:var(--blue-grey)} .nc-preview .pv-body{padding:18px 20px 20px} .nc-preview .pv-body .pk{font-size:10.5px;letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--cyan);margin-bottom:10px} .nc-preview .pv-body p{font-size:12.5px;color:var(--blue-grey);line-height:1.6} /* ============================================================ ACCOUNT / SETTINGS ============================================================ */ .set-grid{display:grid;grid-template-columns:212px minmax(0,1fr);gap:26px;align-items:start} .set-nav{position:sticky;top:8px;display:flex;flex-direction:column;gap:3px} .set-nav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--r-md);text-decoration:none; font-size:13px;color:var(--blue-grey);transition:.13s var(--ease)} .set-nav a svg{width:16px;height:16px;flex:none} .set-nav a:hover{color:var(--clean-white);background:var(--glass-chrome-bg)} .set-nav a.on{color:var(--clean-white);background:var(--glass-chrome-bg);border:1px solid var(--glass-chrome-border)} .set-nav a.on svg{color:var(--cyan)} .panel-card{border-radius:var(--r-lg);margin-bottom:18px;overflow:hidden; background:var(--glass-below-bg);border:1px solid var(--glass-below-border); -webkit-backdrop-filter:var(--glass-below-blur);backdrop-filter:var(--glass-below-blur);box-shadow:var(--glass-below-shadow)} .pc-head{padding:20px 24px 0} .pc-head h2{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--clean-white)} .pc-head p{font-size:12.5px;color:var(--blue-grey);margin-top:5px} .pc-body{padding:18px 24px 22px} .set-row{display:flex;align-items:center;gap:18px;padding:16px 0;border-top:1px solid var(--glass-chrome-border)} .set-row:first-child{border-top:none} .set-row .sr-main{flex:1;min-width:0} .set-row .sr-label{font-size:13.5px;color:var(--clean-white);font-weight:500} .set-row .sr-desc{font-size:12px;color:var(--blue-grey);margin-top:3px;line-height:1.5} .set-row .sr-ctl{flex:none;display:flex;align-items:center;gap:10px} /* Settings sections (bare .set-card, no panel wrapper): headers must align with the row/field content below them and read clearly as section heads. */ .set-card{margin-bottom:6px} .set-card + .set-card{margin-top:34px} .set-card .pc-head{padding:0 0 16px;margin-bottom:4px;border-bottom:1px solid var(--glass-chrome-border)} .set-card .pc-head h2{font-size:15px;letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--cyan)} .set-card .pc-head p{font-size:12.5px;color:var(--blue-grey);margin-top:6px;text-transform:none;letter-spacing:normal} /* Per-section link into the help centre. Every settings section has an article, and five of these sections carry controls that are not wired up yet — for those, the article is the only working route. */ .set-card .pc-head{position:relative} .set-card .pc-head .pc-help{position:absolute;top:0;right:0;font-size:11px;letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--blue-grey);text-decoration:none} .set-card .pc-head .pc-help:hover{color:var(--cyan)} /* ---- SHARED LINKS: a paged, self-scrolling row list ---- Settings is one long column, so a section that grows with user data has to be bounded or it pushes everything under it off the screen. Three rows are rendered up front; "Load more" reveals three at a time INSIDE this same viewport, which is sized to ~3 rows plus a sliver of the fourth — the sliver and the edge fade are the only honest signals that the region scrolls. --sl-row is one .set-row measured in place (16+16 padding, a 13.5px label, a 12px/1.5 description, 1px rule); the +40px is the sliver. Approximate by design: it decides where the cut falls, not whether anything is reachable. */ .sl-list{--sl-row:77px;--sl-fade-top:0px;--sl-fade-bottom:0px; position:relative;max-height:calc(var(--sl-row) * 3 + 40px);overflow-y:auto;overscroll-behavior:contain; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--sl-fade-top), #000 calc(100% - var(--sl-fade-bottom)),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 var(--sl-fade-top), #000 calc(100% - var(--sl-fade-bottom)),transparent 100%)} /* The scrollbar gutter is carved from OUTSIDE the card (negative margin + equal padding), not out of the rows: taking it from the rows would pull every row rule 20px short of the section rules above and below it, which reads as a ragged right edge. Only applied once the bar is actually there. */ .sl-list[data-over]{margin-right:-12px;padding-right:12px} .sl-list[data-fade-top]{--sl-fade-top:26px} .sl-list[data-fade-bottom]{--sl-fade-bottom:34px} /* Keyboard users get the region itself as a tab stop (Chrome does this for scrollable divs on its own; Firefox and Safari do not), so it needs a ring. */ .sl-list:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--r-sm)} .sl-foot{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-top:15px;border-top:1px solid var(--glass-chrome-border)} .sl-foot .sl-count{font-size:10.5px;letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--blue-grey)} .sl-foot .sl-more{height:36px;padding:0 16px;font-size:12.5px} .profile-row{display:flex;align-items:center;gap:16px;padding-bottom:6px} .profile-row .av-lg{width:62px;height:62px;border-radius:50%;flex:none;background:linear-gradient(135deg,#13384b,#0b2030); border:1px solid rgba(185,244,248,0.28);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--aqua-soft)} /* plan card */ .plan-banner{display:flex;align-items:center;gap:20px;padding:22px 24px;border-radius:var(--r-lg);margin-bottom:18px; background:var(--glass-accent-bg);border:1px solid rgba(55,213,232,0.26);box-shadow:var(--glass-accent-shadow)} .plan-banner .pb-main{flex:1;min-width:0} .plan-banner .pb-k{font-size:11px;letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--cyan);margin-bottom:8px} .plan-banner .pb-name{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--clean-white);display:flex;align-items:center;gap:10px} .plan-banner .pb-desc{font-size:12.5px;color:var(--mist-grey);margin-top:7px;line-height:1.55;max-width:440px} /* Written for an in the original design, but the only real use is the delete-account control, which must be a