/* ===================================================================== shared/css/platform.css: the TimeLine family's design system, for Logbook and Flight club. See docs/platform/DESIGN.md section 4. One family with LANDING's V2 "Arena" look (assets/css/v2.css, v2-app.css, admin-v2.css, sub-v2.css at commit 077d424), extracted lean and self-contained: nothing here loads from /assets/. Graphite and white neutrals, V2 Sans (Manrope) for text, V2 Display (Barlow Condensed) in uppercase italics for headings and figures, 2-4px corners, hairlines, no card shadows, the skewed wordmark tick, the 3px section tick, dark mastheads on the 96px grid, a floating dock. THEMES. Day mode first: every page ships . Night is the attribute taken off, so night rules are written html:not([data-theme="light"]). Never prefers-color-scheme, never [data-theme="dark"]. Both theme blocks define the same themed tokens (tests/platform/unit/css.test.js holds them to it). IDENTITY. An app sheet (apps//css/.css) sets the accent on its identity class (.app-logbook, .app-flightclub), which sits on beside .tl-app. The tokens mixed from the brand are declared on :root AND .tl-app, so they are mixed again wherever an identity class sets a brand: a custom property that reads another is resolved on the element that declares it. CONTRAST (WCAG 2.x, both themes): body text >= 4.5:1, large display figures and UI marks >= 3:1. Field borders use --line-strong, which is 3:1 against the paper and the card. Status is never told by colour alone: every status badge, notice, toast and sync pill carries a drawn mark. BREAKPOINTS: 900 / 720 / 640 / 520 only (min-width forms 901 / 721 / 641 / 521). Width queries are screen-only, so a printed page keeps its desktop layout. Motion: short entrances only, no continuous animation; prefers-reduced-motion switches every animation and transition off. ===================================================================== */ /* ---------------------------------------------------------------- fonts Copies in shared/fonts/ (licences beside them). The two text faces claim every character except the regional-indicator letters a flag is written in; a flag face with exactly the same weights claims those, so a flag inside a name in either face is drawn by the flag font (Windows has no emoji flags). Barlow Condensed has no Cyrillic: the stack falls back to Arial Narrow, then Arial. */ @font-face{font-family:'V2 Sans';src:url('/shared/fonts/v2-manrope.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0-1F1E5,U+1F200-10FFFF} @font-face{font-family:'V2 Display';src:url('/shared/fonts/v2-barlow-condensed.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0-1F1E5,U+1F200-10FFFF} @font-face{font-family:'V2 Sans';src:url('/shared/fonts/twemoji-country-flags.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+1F1E6-1F1FF} @font-face{font-family:'V2 Display';src:url('/shared/fonts/twemoji-country-flags.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+1F1E6-1F1FF} @font-face{font-family:'Country Flags';src:url('/shared/fonts/twemoji-country-flags.woff2') format('woff2');font-display:swap;unicode-range:U+1F1E6-1F1FF} /* ---------------------------------------------------------------- tokens Theme-independent: type, spacing, geometry, layers, the family's app colours, the surfaces that are dark in both themes, and the drawn marks. */ :root{ --font:'V2 Sans','Segoe UI',Arial,sans-serif; --font-display:'V2 Display','Arial Narrow',Arial,sans-serif; --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* 11px is the floor for functional text: labels, badges, table headings and dock labels are read outdoors on a phone. LANDING sets some of these at 9-10px; DESIGN §4 says not to copy that. --fs-2xs is the floor, not a smaller step. */ --fs-2xs:11px;--fs-xs:11px;--fs-sm:12px;--fs-base:14px;--fs-md:15px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:22px;--fs-3xl:28px; --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px; --r-1:2px;--r-2:3px;--r-3:4px;--r-4:5px; --maxw:1280px; --topbar-h:64px; /* the shell may measure the bar and write the real height on */ --rail-w:216px; --ease:cubic-bezier(.16,1,.3,1); /* layers: sticky section 30 < top bar and dock 45 < dialogs 50 < toasts and menus 60 < picker 200 < busy bar 300 */ --z-sticky:30;--z-bar:45;--z-modal:50;--z-toast:60;--z-menu:60;--z-pick:200;--z-busy:300; /* the family's apps, as the app switcher draws them (a square in the app's colour) */ --tl-app-landing:#ff4b27;--tl-app-logbook:#1f6feb;--tl-app-flightclub:#8445e8; /* surfaces that are dark in BOTH themes: mastheads, figure bands, the dock */ --tl-dark:#090b10; --tl-dock-bg:#0e141df2;--tl-dock-solid:#0e141d;--tl-dock-line:#ffffff26;--tl-dock-ink:#c3cedb;--tl-dock-count:#d92d20; --tl-hero-eyebrow:#c2d6e5;--tl-hero-sub:#ccd6e1;--tl-hero-k:#b9ccdc;--tl-hero-muted:#9fb3c6; --tl-hero-art:none; /* an app sheet names its masthead art here */ --on-brand:#fff; /* drawn marks (masks painted in currentColor): status is never colour alone */ --i-tick:url("data:image/svg+xml,"); --i-cross:url("data:image/svg+xml,"); --i-clock:url("data:image/svg+xml,"); --i-warn:url("data:image/svg+xml,"); --i-info:url("data:image/svg+xml,"); --i-dash:url("data:image/svg+xml,"); --i-dot:url("data:image/svg+xml,"); --i-lock:url("data:image/svg+xml,"); --i-plus:url("data:image/svg+xml,"); --i-chev:url("data:image/svg+xml,"); --i-search:url("data:image/svg+xml,"); --i-sync:url("data:image/svg+xml,"); --i-offline:url("data:image/svg+xml,"); --i-undo:url("data:image/svg+xml,"); --i-mark:url("data:image/svg+xml,"); --i-emblem:url('/shared/img/timeline-emblem.svg'); } /* Brand-derived and alias tokens, mixed again wherever an identity class sets a brand (see IDENTITY above). The default brand is a neutral platform slate that passes white text 4.6:1 and 3:1 as a mark in both themes; every app sheet replaces it. */ :root,.tl-app{ --v2-brand:#6b7689; --v2-mark:#6b7689; --v2-on-dark:#9aa3b1; --v2-on-dark:color-mix(in srgb,var(--v2-brand) 75%,#fff); --v2-hero-from:#090b10; --v2-hero-to:#0f131b; --brand-hover:#5c6576; --brand-hover:color-mix(in srgb,var(--v2-brand) 86%,#000); --brand-wash:#6b76891f; --brand-wash:color-mix(in srgb,var(--v2-brand) 12%,transparent); --brand-wash-2:#6b76890a; --brand-wash-2:color-mix(in srgb,var(--v2-brand) 4%,transparent); --brand-line:#6b768959; --brand-line:color-mix(in srgb,var(--v2-brand) 35%,transparent); --focus-ring:#6b768942; --focus-ring:color-mix(in srgb,var(--v2-brand) 26%,transparent); /* LANDING-compatible aliases, for code copied from LANDING that reads them (util.js emptyHTML fills its touchdown dot with var(--accent)) */ --accent:var(--v2-brand); --accent-ink:var(--v2-accent-ink); --text:var(--v2-ink); --muted:var(--v2-muted); --bg:var(--v2-paper); --card:var(--v2-card); --line:var(--v2-line); } /* DAY (what every page ships) */ :root[data-theme="light"]{ --v2-paper:#f4f5f7; --v2-card:#ffffff; --v2-ink:#090b10; --v2-muted:#5b6676; --v2-line:#d9dee5; --line-strong:#7f8793; --chip-bg:#eceef2; --hover-bg:#f0f2f5; --ok:#15803d;--ok-bg:#ecfdf3;--ok-line:#9fe0b6; --warn:#9a5b06;--warn-bg:#fffbeb;--warn-line:#f1cf74; --err:#b42318;--err-bg:#fef3f2;--err-line:#f5aaa2; --live:#bf2419; --on-ok:#ffffff;--on-err:#ffffff; --money:#0d7f8c;--money-ink:#0a6874;--money-bg:#0d7f8c0f; --scrim:#0f1b2b6b; --shadow-pop:0 18px 44px -14px #1018283d; --shadow-modal:0 30px 80px -20px #10182859; color-scheme:light; } :root[data-theme="light"],:root[data-theme="light"] .tl-app{ --v2-accent-ink:#4b5361; --v2-accent-ink:color-mix(in srgb,var(--v2-brand) 72%,#000); } /* NIGHT (the attribute removed) */ html:not([data-theme="light"]){ --v2-paper:#090b10; --v2-card:#141820; --v2-ink:#f4f5f7; --v2-muted:#a3adba; --v2-line:#303743; --line-strong:#666f7c; --chip-bg:#1c212b; --hover-bg:#1a1f28; --ok:#4ed492;--ok-bg:#40cd8a1f;--ok-line:#40cd8a5c; --warn:#f4bf62;--warn-bg:#f4bf621f;--warn-line:#f4bf625c; --err:#ff8177;--err-bg:#ff6e611f;--err-line:#ff6e6166; --live:#ff6b6b; --on-ok:#04240f;--on-err:#1b0604; --money:#3ecfd8;--money-ink:#5fdde4;--money-bg:#3ecfd814; --scrim:#02060dbd; --shadow-pop:0 18px 44px -12px #000000b3; --shadow-modal:0 30px 80px -16px #000000cc; color-scheme:dark; } html:not([data-theme="light"]),html:not([data-theme="light"]) .tl-app{ --v2-accent-ink:#b5bcc7; --v2-accent-ink:color-mix(in srgb,var(--v2-brand) 55%,#fff); } /* ---------------------------------------------------------------- base */ *,*::before,*::after{box-sizing:border-box} /* The hidden attribute has to win: any class that sets display would put the element back on screen otherwise (LANDING shipped that bug four times). */ [hidden]{display:none!important} .v2-site [hidden]{display:none!important} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--v2-paper);color:var(--v2-ink);scrollbar-color:var(--line-strong) transparent} body{margin:0;min-height:100vh;background:var(--v2-paper);color:var(--v2-ink);font-family:var(--font);font-size:var(--fs-base);line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto} svg{flex-shrink:0} a{color:var(--v2-accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} a:hover{text-decoration-thickness:2px} button,input,select,textarea{font:inherit;color:inherit} p{margin:0 0 var(--sp-3)} hr{height:0;margin:var(--sp-6) 0;border:0;border-top:1px solid var(--v2-line)} code,kbd,samp{font-family:var(--font-mono);font-size:.92em} ::selection{background:#6b76894d;background:color-mix(in srgb,var(--v2-brand) 30%,transparent);color:inherit} :focus-visible{outline:3px solid var(--v2-accent-ink);outline-offset:3px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .flag{font-family:'Country Flags',sans-serif;font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;margin-right:.3em} .muted{color:var(--v2-muted)} .small{font-size:var(--fs-sm);line-height:1.6;color:var(--v2-muted)} .nowrap{white-space:nowrap} /* headings: display face, uppercase italics (Barlow is upright only; the slant is synthesised, as in LANDING) */ h1,h2,h3,h4{margin:0;color:inherit} h1,.h1{font-family:var(--font-display);font-weight:600;font-style:italic;text-transform:uppercase;font-size:clamp(36px,4.4vw,60px);line-height:.95;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:anywhere} h2,.h2{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.3vw,32px);line-height:1;letter-spacing:-.01em;margin-bottom:var(--sp-4);text-wrap:balance;overflow-wrap:anywhere} h3,.h3{font-family:var(--font);font-size:var(--fs-xl);font-weight:750;line-height:1.3;letter-spacing:-.02em;margin-bottom:var(--sp-2)} .kicker,.section-label{display:block;margin:0 0 var(--sp-2);font-size:var(--fs-2xs);font-weight:800;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-muted)} .fig{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:20px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums} /* same-app navigations cross-fade; the chrome holds still (one of each per page) */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s} body > .topbar{view-transition-name:tl-topbar} body > .tabbar{view-transition-name:tl-nav} @keyframes tl-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes tl-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @keyframes tl-pop-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @keyframes tl-spin{to{transform:rotate(360deg)}} /* ---------------------------------------------------------------- top bar
a.tl-brand (span.tl-brand-mark + span.tl-brand-word) , nav.tl-crumbs
.tl-appswitch , button.theme-toggle (theme.js) , span.lang , .tl-account
*/ .topbar{position:sticky;top:0;z-index:var(--z-bar);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:var(--topbar-h);margin:0;padding:10px 24px;background:var(--v2-paper);background:color-mix(in srgb,var(--v2-paper) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--v2-line)} .tl-topbar-start{display:flex;align-items:center;gap:var(--sp-4);min-width:0;flex:1 1 auto} .tl-brand{position:relative;display:inline-flex;align-items:center;min-height:40px;gap:10px;min-width:0;flex:0 1 auto;color:var(--v2-ink);text-decoration:none} .tl-brand:hover{text-decoration:none} .tl-brand-mark{position:relative;flex:none;display:block;width:30px;height:30px;border-radius:var(--r-2);background:var(--v2-mark)} .tl-brand-mark::before{content:'';position:absolute;inset:0;background:#fff;-webkit-mask:var(--i-mark) center/100% 100% no-repeat;mask:var(--i-mark) center/100% 100% no-repeat} .tl-brand-word{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:23px;font-weight:600;font-style:italic;line-height:1.05;letter-spacing:0;text-transform:uppercase;padding-right:2px} .tl-brand::after{content:'';flex:none;align-self:flex-end;width:16px;height:5px;margin:0 0 6px -2px;background:var(--v2-mark);transform:skewX(-18deg)} @media (forced-colors:active){.tl-brand-mark,.tl-appswitch-mark{forced-color-adjust:none}} .tl-crumbs{min-width:0} .tl-crumbs ol{display:flex;align-items:center;gap:var(--sp-2);min-width:0;margin:0;padding:0;list-style:none} .tl-crumbs li{display:flex;align-items:center;gap:var(--sp-2);min-width:0;font-size:var(--fs-sm);font-weight:700;color:var(--v2-muted);white-space:nowrap} .tl-crumbs li::before{content:'/';font-weight:400;color:var(--line-strong)} .tl-crumbs a{display:inline-flex;align-items:center;min-height:40px;padding:0 2px} .tl-crumbs li:last-child{overflow:hidden} .tl-crumbs li > *{min-width:0;overflow:hidden;text-overflow:ellipsis} .tl-crumbs a{color:var(--v2-muted);text-decoration:none} .tl-crumbs a:hover{color:var(--v2-ink);text-decoration:underline} .tl-crumbs [aria-current="page"]{color:var(--v2-ink)} .topbar-controls{display:flex;align-items:center;gap:var(--sp-2);flex:none;min-width:0} /* icon buttons, and the day/night switch theme.js mounts in front of .lang */ .icon-btn,.theme-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;min-width:40px;padding:0;border:1px solid var(--line-strong);border-radius:var(--r-2);background:transparent;color:var(--v2-ink);cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s} .topbar .icon-btn,.theme-toggle{border-color:var(--v2-line)} .icon-btn:hover,.theme-toggle:hover{background:var(--hover-bg);border-color:var(--v2-ink);text-decoration:none} .icon-btn svg,.theme-toggle svg{display:block;width:18px;height:18px} .icon-btn[aria-expanded="true"]{background:var(--hover-bg);border-color:var(--v2-ink)} .icon-btn-sm{width:32px;height:32px;min-width:32px} .icon-btn-sm svg{width:15px;height:15px} :root[data-theme="light"] .theme-toggle .ico-sun{display:none} html:not([data-theme="light"]) .theme-toggle .ico-moon{display:none} /* the language switcher (TimelineI18n.mountSwitcher): .lang > .lang-pill(button[data-lang].active, button.lang-more) + .lang-menu */ .lang{position:relative;display:inline-flex;min-width:0} .lang-pill{display:inline-flex;align-items:stretch;border:1px solid var(--v2-line);border-radius:var(--r-2);overflow:hidden} .lang button{min-height:40px;min-width:38px;padding:0 10px;border:0;background:transparent;color:var(--v2-ink);font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;line-height:1;text-transform:uppercase;white-space:nowrap;cursor:pointer} .lang-pill button + button{border-left:1px solid var(--v2-line)} .lang-pill button:hover{background:var(--hover-bg)} .lang-pill button.active{background:var(--v2-ink);color:var(--v2-paper)} .lang-pill .lang-more{position:relative;min-width:34px;padding:0;font-size:0} .lang-pill .lang-more::before{content:'';position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6px 0 0 -6px;background:currentColor;-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat} .lang-pill .lang-more[aria-expanded="true"]{background:var(--hover-bg)} /* menus that open from the bar: the app switcher, the account, the languages */ .tl-menu,.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:var(--z-menu);display:flex;flex-direction:column;gap:2px;min-width:250px;max-width:min(340px,calc(100vw - 24px));max-height:min(72vh,540px);overflow:auto;margin:0;padding:6px;background:var(--v2-card);color:var(--v2-ink);border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--shadow-pop);text-align:left;animation:tl-pop .14s var(--ease)} .lang-menu{min-width:210px} .lang-menu button{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;min-height:44px;padding:0 12px;border-radius:var(--r-1);font-size:var(--fs-base);font-weight:650;letter-spacing:0;text-transform:none;text-align:left} .lang-menu button:hover,.lang-menu button:focus-visible{background:var(--hover-bg)} .lang-menu .l-code{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.08em;color:var(--v2-muted)} .tl-menu-label{margin:6px 10px 4px;font-size:var(--fs-2xs);font-weight:800;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-muted)} .tl-menu-head{display:flex;align-items:center;gap:var(--sp-3);padding:10px 10px 12px} .tl-menu-who{display:flex;flex-direction:column;min-width:0;line-height:1.35} .tl-menu-who b{font-size:var(--fs-base);font-weight:750;overflow-wrap:anywhere} .tl-menu-who span{font-size:var(--fs-sm);color:var(--v2-muted);overflow-wrap:anywhere} .tl-menu-badges{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 8px} .tl-menu-badges:empty{display:none} .tl-menu-sep{height:1px;margin:4px 2px;background:var(--v2-line)} .tl-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-1);background:transparent;color:var(--v2-ink);font-size:var(--fs-base);font-weight:650;line-height:1.3;text-align:left;text-decoration:none;cursor:pointer} .tl-menu-item:hover,.tl-menu-item:focus-visible{background:var(--hover-bg);text-decoration:none} .tl-menu-item svg{width:18px;height:18px;color:var(--v2-muted)} .tl-menu-item.is-danger{color:var(--err)} /* the accounts signed in here: one line each, the one this tab speaks as ticked */ .tl-menu-note{margin:4px 12px 2px;font-size:var(--fs-sm);font-weight:500;line-height:1.45;color:var(--v2-muted)} .tl-acct{gap:10px;min-height:52px;padding:6px 12px} .tl-acct.is-now{background:var(--hover-bg)} .tl-acct-who{display:flex;flex:1;flex-direction:column;min-width:0;line-height:1.3} .tl-acct-who b{font-size:var(--fs-base);font-weight:750;overflow-wrap:anywhere} .tl-acct-who span{font-size:var(--fs-sm);font-weight:500;color:var(--v2-muted);overflow-wrap:anywhere} .tl-menu-item .tl-acct-tick{flex:none;color:var(--v2-brand)} .avatar-sm{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:var(--r-1);background:var(--v2-line);color:var(--v2-ink);font-size:var(--fs-2xs);font-weight:800;line-height:1} .tl-acct.is-now .avatar-sm{background:var(--v2-brand);color:var(--on-brand)} /* the app switcher: the TimeLine emblem, then each app as its mark on a square in its own colour */ .tl-appswitch,.tl-account{position:relative;display:inline-flex} .tl-emblem{display:block;width:22px;height:13px;background:currentColor;-webkit-mask:var(--i-emblem) center/contain no-repeat;mask:var(--i-emblem) center/contain no-repeat} .tl-appswitch-item{display:flex;align-items:center;gap:var(--sp-3);min-height:56px;padding:8px 36px 8px 10px;position:relative;border-radius:var(--r-1);color:var(--v2-ink);text-decoration:none} .tl-appswitch-item:hover,.tl-appswitch-item:focus-visible{background:var(--hover-bg);text-decoration:none} .tl-appswitch-mark{position:relative;flex:none;width:36px;height:36px;border-radius:var(--r-2);background:var(--v2-muted)} .tl-appswitch-mark::before{content:'';position:absolute;inset:0;background:#fff;-webkit-mask:var(--i-mark) center/100% 100% no-repeat;mask:var(--i-mark) center/100% 100% no-repeat} .tl-appswitch-item[data-app="landing"] .tl-appswitch-mark{background:var(--tl-app-landing)} .tl-appswitch-item[data-app="logbook"] .tl-appswitch-mark{background:var(--tl-app-logbook)} .tl-appswitch-item[data-app="flightclub"] .tl-appswitch-mark{background:var(--tl-app-flightclub)} .tl-appswitch-txt{display:flex;flex-direction:column;min-width:0;line-height:1.35} .tl-appswitch-txt b{font-size:var(--fs-base);font-weight:750} .tl-appswitch-txt span{font-size:var(--fs-sm);color:var(--v2-muted);overflow-wrap:anywhere} .tl-appswitch-item[aria-current="true"]{background:var(--brand-wash)} .tl-appswitch-item[aria-current="true"]::after{content:'';position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--v2-accent-ink);-webkit-mask:var(--i-tick) center/contain no-repeat;mask:var(--i-tick) center/contain no-repeat} /* the account: initials on a square in the brand, the panel under it */ .avatar-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-2);background:var(--v2-brand);color:var(--on-brand);font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em;line-height:1;cursor:pointer} .avatar-btn:hover{background:var(--brand-hover);color:var(--on-brand)} .avatar-btn[aria-expanded="true"]{box-shadow:0 0 0 2px var(--v2-paper),0 0 0 4px var(--v2-accent-ink)} .avatar-lg{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:var(--r-2);background:var(--v2-brand);color:var(--on-brand);font-size:var(--fs-md);font-weight:800;line-height:1} /* ---------------------------------------------------------------- the preview banner
span.tl-preview-tag , span.tl-preview-txt , div.tl-preview-who(label + select#tlPreviewIdentity) , div.tl-preview-actions
*/ .tl-preview{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 24px;background:var(--warn-bg);color:var(--v2-ink);border-bottom:1px solid var(--warn-line);font-size:var(--fs-sm);line-height:1.45} .tl-preview-tag{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 8px;border:1px solid var(--warn);border-radius:var(--r-1);color:var(--warn);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase} .tl-preview-tag::before{content:'';width:11px;height:11px;background:currentColor;-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat} .tl-preview-txt{min-width:0;font-weight:650} .tl-preview-who{display:flex;align-items:center;gap:var(--sp-2);flex:0 1 380px;min-width:0} .tl-preview-who > label{flex:none;font-size:var(--fs-sm);font-weight:750} .tl-preview-who :is(select,.pick-btn){min-height:40px;padding-top:7px;padding-bottom:7px} .tl-preview-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-left:auto} .tl-preview .btn{min-height:40px;background:var(--v2-card)} /* ---------------------------------------------------------------- page */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:28px 24px 56px} .tl-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:4px 0 24px} .tl-head .kicker{display:flex;align-items:center;gap:var(--sp-3)} .tl-head .kicker::before{content:'';width:26px;height:5px;background:var(--v2-brand);transform:skewX(-24deg)} .tl-head h1{margin:0} .actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--sp-4)} .tl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)} .tl-toolbar > .grow{flex:1 1 240px;min-width:0} .tl-spread{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3)} .tl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);position:relative;margin-top:56px;padding-top:24px;border-top:1px solid var(--v2-line);font-size:var(--fs-xs);color:var(--v2-muted)} .tl-foot::before{content:'';position:absolute;left:0;top:-2px;width:64px;height:3px;background:var(--v2-brand)} .tl-foot a{color:var(--v2-muted)} .tl-foot .tl-emblem{width:30px;height:17px} /* ---------------------------------------------------------------- the masthead band
p.tl-eyebrow , h1.tl-hero-title , p.tl-hero-sub , div.tl-hero-actions
div.tl-stats (optional, at the foot)
Dark in both themes, on the 96px grid, the app's art at the right, the brand's clipped rail tick. */ .tl-hero{position:relative;isolation:isolate;overflow:hidden;margin:0 0 24px;padding:32px 36px 30px;color:#fff;border-radius:0;background-color:var(--v2-hero-to);background-image:linear-gradient(90deg,var(--v2-hero-from) 0%,color-mix(in srgb,var(--v2-hero-from) 90%,transparent) 38%,color-mix(in srgb,var(--v2-hero-to) 25%,transparent) 100%),var(--tl-hero-art),linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:auto,auto 100%,96px 96px,96px 96px;background-position:0 0,right center,-1px -1px,-1px -1px;background-repeat:no-repeat,no-repeat,repeat,repeat} .tl-hero::before{content:'';position:absolute;left:0;top:32px;width:10px;height:48px;background:var(--v2-brand);clip-path:polygon(0 0,100% 0,100% 85%,0 100%)} html:not([data-theme="light"]) .tl-hero,html:not([data-theme="light"]) .tl-stats:not(.tl-stats-plain){background-color:color-mix(in srgb,var(--v2-hero-to) 62%,#26303e);box-shadow:inset 0 0 0 1px var(--v2-line)} html:not([data-theme="light"]) .tl-hero > .tl-stats{background-color:transparent;box-shadow:none} .tl-hero-in{position:relative;z-index:1;max-width:920px} .tl-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 10px;color:var(--tl-hero-eyebrow);font-size:var(--fs-sm);font-weight:600;line-height:1.5} .tl-eyebrow .sep{color:var(--tl-hero-muted)} .tl-hero-title{margin:0;color:#fff;font-family:var(--font-display);font-size:clamp(36px,4.2vw,60px);font-weight:600;font-style:italic;line-height:.92;letter-spacing:-.015em;text-transform:uppercase;overflow-wrap:anywhere;text-wrap:balance} .tl-hero-sub{margin:12px 0 0;max-width:62ch;color:var(--tl-hero-sub);font-size:var(--fs-md);line-height:1.6} .tl-hero-sub:empty{display:none} .tl-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .tl-hero .btn:not(.btn-primary){color:#fff;border-color:#ffffff4d;background:#ffffff0d} .tl-hero .btn:not(.btn-primary):hover{background:#ffffff1f;border-color:#fff} .tl-hero :focus-visible,.tl-stats:not(.tl-stats-plain) :focus-visible{outline-color:#fff} .tl-hero a:not(.btn){color:#fff} /* the figure band: .tl-stat > span.n (+ span.u) , span.k , span.stat-sub */ .tl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 0;padding:22px 24px;color:#fff;background-color:var(--v2-hero-to)} .tl-hero > .tl-stats{position:relative;z-index:1;margin:28px 0 0;padding:20px 0 0;background:transparent;border-top:1px solid #ffffff24} .tl-stat{display:flex;flex-direction:column;min-width:0;padding:0 24px;border-left:1px solid #ffffff21} .tl-stat:first-child{padding-left:0;border-left:0} .tl-stat .n{font-family:var(--font-display);font-size:48px;font-weight:600;font-style:italic;line-height:1;letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tl-stat .u{margin-left:4px;font-family:var(--font);font-size:var(--fs-sm);font-style:normal;font-weight:750;letter-spacing:0;color:var(--tl-hero-sub)} .tl-stat .k{margin-top:10px;font-size:var(--fs-2xs);font-weight:750;line-height:1.45;letter-spacing:.11em;text-transform:uppercase;color:var(--tl-hero-k)} .tl-stat .stat-sub{margin-top:6px;font-size:var(--fs-sm);line-height:1.5;color:var(--tl-hero-muted)} .tl-stat .stat-sub strong{font-weight:800;color:var(--v2-on-dark)} .tl-stats-plain{color:var(--v2-ink);background:var(--v2-card);border:1px solid var(--v2-line);border-radius:var(--r-3)} .tl-stats-plain .tl-stat{border-left-color:var(--v2-line)} .tl-stats-plain .u,.tl-stats-plain .k,.tl-stats-plain .stat-sub{color:var(--v2-muted)} .tl-stats-plain .stat-sub strong{color:var(--v2-accent-ink)} /* ---------------------------------------------------------------- cards and sections */ .card{position:relative;margin:20px 0 0;padding:24px;background:var(--v2-card);color:var(--v2-ink);border:1px solid var(--v2-line);border-radius:var(--r-3);box-shadow:none} .card > :last-child{margin-bottom:0} .card h2{font-size:clamp(22px,2vw,28px);font-style:italic;text-transform:uppercase} .card-narrow{max-width:480px;margin-left:auto;margin-right:auto} .card-danger{border-color:var(--err-line)} .card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 18px} .card-head h2,.card-head h3{margin:0} .tl-tick{position:relative} .section::before,.card-narrow::before,.tl-tick::before{content:'';position:absolute;top:-1px;left:24px;width:40px;height:3px;background:var(--v2-brand)} .section > h2{font-style:italic;text-transform:uppercase} /* key-value facts */ .tl-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0} .tl-kv > div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 0;border-bottom:1px solid var(--v2-line)} .tl-kv dt{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--v2-muted)} .tl-kv dd{margin:0;font-size:var(--fs-md);font-weight:650;overflow-wrap:anywhere} /* ---------------------------------------------------------------- forms */ fieldset{min-width:0;margin:0;padding:0;border:0} legend{padding:0} .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .field{display:flex;flex-direction:column;gap:8px;min-width:0} .field.full,.grid > .full{grid-column:1/-1} .field > label,.label,legend.label{font-size:var(--fs-sm);font-weight:750;line-height:1.4;color:var(--v2-ink)} .hint{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--v2-muted)} .req{margin-left:2px;font-weight:800;color:var(--v2-accent-ink)} /* the text fields, and the picker trigger standing among them: 48px, 16px type (iOS does not zoom), 3:1 borders */ input:where(:not([type="checkbox"],[type="radio"],[type="file"],[type="range"],[type="color"],[type="hidden"],[type="submit"],[type="button"],[type="reset"],[type="image"])),select,textarea,.pick-btn{display:block;width:100%;min-width:0;min-height:48px;margin:0;padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--r-2);background-color:var(--v2-card);color:var(--v2-ink);font-size:var(--fs-lg);line-height:24px;box-shadow:none;outline:none;transition:border-color .2s,box-shadow .2s} select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--v2-muted) 50%),linear-gradient(135deg,var(--v2-muted) 50%,transparent 50%);background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat} select[multiple]{padding-right:14px;background-image:none} textarea{min-height:112px;resize:vertical;line-height:1.5} input[type="color"]{width:56px;height:48px;padding:4px;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--v2-card);cursor:pointer} input[type="checkbox"],input[type="radio"]{flex:none;width:22px;height:22px;margin:0;accent-color:var(--v2-brand);cursor:pointer} input[type="range"]{width:100%;accent-color:var(--v2-brand)} input[type="file"]{max-width:100%;font-size:var(--fs-base);color:var(--v2-muted)} input[type="file"]::file-selector-button{margin-right:12px;min-height:40px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-1);background:var(--v2-card);color:var(--v2-ink);font:inherit;font-size:var(--fs-sm);font-weight:800;cursor:pointer} ::placeholder{color:var(--v2-muted);opacity:1} input:focus,select:focus,textarea:focus,.pick-btn:focus-visible,.pick-btn.is-open,.pick-combo.is-open > input{border-color:var(--v2-accent-ink);box-shadow:0 0 0 1px var(--v2-accent-ink),0 0 0 4px var(--focus-ring)} input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"])):focus-visible,select:focus-visible,textarea:focus-visible,.pick-btn:focus-visible{outline:none} input:disabled,select:disabled,textarea:disabled,.pick-btn:disabled{background-color:var(--chip-bg);color:var(--v2-muted);cursor:not-allowed} input[readonly],textarea[readonly]{background-color:var(--v2-paper)} /* invalid: after focus, so a focused invalid field keeps its error border */ input.invalid,select.invalid,textarea.invalid,.pick-btn.invalid,input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],.field.invalid :is(input,select,textarea,.pick-btn){border-color:var(--err);box-shadow:0 0 0 1px var(--err)} input.invalid:focus,select.invalid:focus,textarea.invalid:focus,input[aria-invalid="true"]:focus,.field.invalid :is(input,select,textarea):focus{border-color:var(--err);box-shadow:0 0 0 1px var(--err),0 0 0 4px var(--err-bg)} .field.invalid > label{color:var(--err)} .field-error{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:var(--fs-sm);font-weight:700;line-height:1.45;color:var(--err)} .field-error::before{content:'';flex:none;width:14px;height:14px;margin-top:2px;background:currentColor;-webkit-mask:var(--i-warn) center/contain no-repeat;mask:var(--i-warn) center/contain no-repeat} /* tick boxes are targets: a finger-sized row, the words are the target too */ .checks{display:grid;gap:var(--sp-2)} .check{display:flex;align-items:flex-start;gap:var(--sp-3);min-height:44px;padding:10px 0;font-size:var(--fs-md);font-weight:500;line-height:1.45;cursor:pointer} .check > input{margin-top:0} .check-row{padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--v2-card)} .check-row:hover{border-color:var(--v2-ink)} .check-row:has(input:checked){border-color:var(--v2-brand);box-shadow:inset 3px 0 0 var(--v2-brand);background:var(--brand-wash-2)} /* a password with its reveal toggle */ .pw-wrap{position:relative;display:flex} .pw-wrap > input{padding-right:52px} .pw-toggle{position:absolute;top:50%;right:3px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:42px;padding:0;border:0;border-radius:var(--r-2);background:transparent;color:var(--v2-muted);cursor:pointer;transform:translateY(-50%)} .pw-toggle:hover{color:var(--v2-ink);background:var(--hover-bg)} .pw-toggle svg{display:block;width:19px;height:19px} .pw-toggle .eye-off,.pw-toggle.revealed .eye{display:none} .pw-toggle.revealed .eye-off{display:block} /* a search field with its magnifier drawn inside */ .search-box{position:relative;min-width:0} .search-box::before{content:'';position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--v2-muted);pointer-events:none;-webkit-mask:var(--i-search) center/contain no-repeat;mask:var(--i-search) center/contain no-repeat} .search-box > input{padding-left:42px} /* the searchable picker (TimelinePick): the select stays, hidden, and a .pick-btn stands in for it */ .pick{position:relative} .pick-native{display:none} .pick-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer} .pick-btn .pick-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pick-btn .pick-value:empty::before{content:attr(data-placeholder);color:var(--v2-muted)} .pick-caret{flex:none;width:15px;height:15px;background:var(--v2-muted);transition:transform .15s;-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat} .pick-btn.is-open .pick-caret,.pick-combo.is-open .pick-caret{transform:rotate(180deg);background:var(--v2-accent-ink)} .pick-menu{position:fixed;z-index:var(--z-pick);display:flex;flex-direction:column;gap:6px;padding:6px;background:var(--v2-card);color:var(--v2-ink);border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--shadow-pop);animation:tl-pop .14s var(--ease)} .pick-menu.is-up{animation-name:tl-pop-up} .pick-menu:focus,.pick-menu:focus-visible{outline:none} .pick-searchwrap{flex:none} .pick-menu .pick-search{min-height:44px;padding:9px 12px} .pick-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto} .pick-list button{flex:none;display:block;padding:9px 11px;border:0;border-radius:var(--r-1);background:none;color:var(--v2-ink);font-size:var(--fs-md);line-height:22px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer} .pick-list button:hover,.pick-list button.here{background:var(--hover-bg)} .pick-list button[aria-selected="true"]{font-weight:800;box-shadow:inset 3px 0 0 var(--v2-brand)} .pick-list button[disabled]{color:var(--v2-muted);background:none;cursor:default} .pick-list .pick-group{flex:none;padding:9px 11px 4px;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-muted)} .pick-list .pick-group ~ .pick-group,.pick-list button.after-group{margin-top:5px;padding-top:10px;border-top:1px solid var(--v2-line)} .pick-none{padding:9px 11px;font-size:var(--fs-base);color:var(--v2-muted)} .pick-combo{position:relative;display:flex;align-items:center;min-width:0} .pick-combo > input{flex:1;padding-right:40px} .pick-combo-caret{position:absolute;right:14px;top:calc(50% - 7px);cursor:pointer} .pick-combo > input:disabled ~ .pick-combo-caret{cursor:default;opacity:.45} .pick-list button.pick-free{display:flex;align-items:center;gap:9px;font-weight:750;color:var(--v2-accent-ink)} .pick-list button.pick-free .pf-t{min-width:0;overflow:hidden;text-overflow:ellipsis} .pick-list button.pick-free + button,.pick-list button.pick-free + .pick-group{margin-top:5px;padding-top:10px;border-top:1px solid var(--v2-line)} .pick-plus{flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--i-plus) center/contain no-repeat;mask:var(--i-plus) center/contain no-repeat} /* ---------------------------------------------------------------- buttons */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 18px;border:1px solid var(--line-strong);border-radius:var(--r-1);background:transparent;color:var(--v2-ink);font-size:13px;font-weight:800;line-height:22px;letter-spacing:.015em;text-align:center;text-decoration:none;white-space:normal;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s,color .2s,transform .2s} .btn svg{width:18px;height:18px} .btn:hover{background:var(--hover-bg);border-color:var(--v2-ink);text-decoration:none} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--v2-brand);border-color:var(--v2-brand);color:var(--on-brand)} .btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-brand)} .btn-ghost{border-color:transparent;background:transparent} .btn-ghost:hover{border-color:transparent;background:var(--hover-bg)} .btn-danger{background:var(--err-bg);border-color:var(--err);color:var(--err)} .btn-danger:hover{background:var(--err);border-color:var(--err);color:var(--on-err)} .btn-ok{background:var(--ok);border-color:var(--ok);color:var(--on-ok)} .btn-ok:hover{background:var(--ok);border-color:var(--v2-ink);color:var(--on-ok)} .btn-sm{min-height:40px;padding:8px 14px;font-size:var(--fs-sm)} .btn-sm svg{width:16px;height:16px} .btn-lg{min-height:56px;padding:15px 24px;font-size:var(--fs-md)} .btn-block{display:flex;width:100%} .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none} .btn-primary:disabled:hover{background:var(--v2-brand);border-color:var(--v2-brand)} /* the button that started a wait keeps its label and adds a spinner (TimelineBusy) */ .btn.busy,.icon-btn.busy{pointer-events:none;cursor:progress} .btn.busy::after,.icon-btn.busy::after{content:'';flex:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tl-spin .7s linear infinite} .icon-btn.busy > *{display:none} .btn.busy:disabled,.icon-btn.busy:disabled{opacity:1} :root[data-busy],:root[data-busy] :is(a,button,input,select,.pick-btn){cursor:progress} /* ---------------------------------------------------------------- chips and segments */ .chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)} .chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-1);background:var(--v2-card);color:var(--v2-ink);font-size:13px;font-weight:700;line-height:22px;text-decoration:none;white-space:nowrap;cursor:pointer} .chip:hover{border-color:var(--v2-ink);text-decoration:none} .chip:is(.active,[aria-pressed="true"],[aria-selected="true"]){background:var(--v2-brand);border-color:var(--v2-brand);color:var(--on-brand)} .chip:is(.active,[aria-pressed="true"],[aria-selected="true"])::before{content:'';flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:var(--i-tick) center/contain no-repeat;mask:var(--i-tick) center/contain no-repeat} .chip .n{font-weight:800;font-variant-numeric:tabular-nums} .chip-static{cursor:default} .seg{display:inline-flex;flex-wrap:wrap;gap:3px;max-width:100%;padding:3px;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--v2-card)} .seg > :is(button,a){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;border:0;border-radius:var(--r-1);background:transparent;color:var(--v2-muted);font-size:var(--fs-sm);font-weight:800;line-height:22px;letter-spacing:.04em;text-decoration:none;white-space:nowrap;cursor:pointer} .seg > :is(button,a):hover{background:var(--hover-bg);color:var(--v2-ink);text-decoration:none} .seg > :is(button,a):is(.active,[aria-pressed="true"],[aria-selected="true"],[aria-current="page"]){background:var(--v2-brand);color:var(--on-brand)} .seg .n{font-variant-numeric:tabular-nums} .seg-wide{display:flex;width:100%} .seg-wide > *{flex:1 1 auto} /* ---------------------------------------------------------------- badges: every status carries a mark */ .badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:22px;padding:2px 8px;border:1px solid var(--v2-line);border-radius:var(--r-1);background:transparent;color:var(--v2-muted);font-size:var(--fs-2xs);font-weight:800;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:middle} .badge::before{flex:none;width:10px;height:10px;background:currentColor;-webkit-mask:var(--i-dot) center/contain no-repeat;mask:var(--i-dot) center/contain no-repeat} .badge:is(.badge-ok,.st-ok,.st-confirmed,.st-paid,.badge-paid,.st-approved,.st-flown,.st-fixed,.st-redeemed,.st-synced,.st-airworthy,.st-committed,.st-active,.st-closed){background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)} .badge:is(.badge-ok,.st-ok,.st-confirmed,.st-paid,.badge-paid,.st-approved,.st-flown,.st-fixed,.st-redeemed,.st-synced,.st-airworthy,.st-committed,.st-active,.st-closed)::before{content:'';-webkit-mask-image:var(--i-tick);mask-image:var(--i-tick)} .badge:is(.badge-warn,.st-warn,.st-pending,.st-due,.badge-due,.st-requested,.st-deferred,.st-suggested,.st-claimed,.st-preview){background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)} .badge:is(.badge-warn,.st-warn,.st-pending,.st-due,.badge-due,.st-requested,.st-deferred,.st-suggested,.st-claimed,.st-preview)::before{content:'';-webkit-mask-image:var(--i-clock);mask-image:var(--i-clock)} .badge:is(.badge-err,.st-err,.st-rejected,.st-cancelled,.st-no_show,.st-void,.st-expired,.st-open,.st-grounded,.st-error,.st-suspended){background:var(--err-bg);border-color:var(--err-line);color:var(--err)} .badge:is(.badge-err,.st-err,.st-rejected,.st-cancelled,.st-no_show,.st-void,.st-expired,.st-open,.st-grounded,.st-error,.st-suspended)::before{content:'';-webkit-mask-image:var(--i-cross);mask-image:var(--i-cross)} .badge:is(.badge-info,.st-info,.st-issued,.st-planned,.st-coming){background:var(--brand-wash);border-color:var(--brand-line);color:var(--v2-accent-ink)} .badge:is(.badge-info,.st-info,.st-issued,.st-planned,.st-coming)::before{content:'';-webkit-mask-image:var(--i-info);mask-image:var(--i-info)} .badge:is(.badge-muted,.st-muted,.st-superseded,.st-voided,.st-dismissed,.st-withdrawn,.st-discarded,.st-retired,.st-left,.st-inactive){background:var(--chip-bg);border-color:var(--v2-line);color:var(--v2-muted)} .badge:is(.badge-muted,.st-muted,.st-superseded,.st-voided,.st-dismissed,.st-withdrawn,.st-discarded,.st-retired,.st-left,.st-inactive)::before{content:'';-webkit-mask-image:var(--i-dash);mask-image:var(--i-dash)} .badge:is(.badge-live,.st-live,.st-airborne){background:#d92d201a;background:color-mix(in srgb,var(--live) 10%,transparent);border-color:var(--live);color:var(--live)} .badge:is(.badge-live,.st-live,.st-airborne)::before{content:'';-webkit-mask-image:var(--i-dot);mask-image:var(--i-dot)} .badge-brand{background:var(--brand-wash);border-color:var(--brand-line);color:var(--v2-accent-ink)} .tl-hero .badge{background:#ffffff14;border-color:#ffffff40;color:#e4edf5} /* ---------------------------------------------------------------- notices: ink text, a tinted edge and a mark */ .notice{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;padding:12px 14px;border:1px solid var(--v2-line);border-radius:var(--r-2);background:var(--v2-card);color:var(--v2-ink);font-size:var(--fs-base);font-weight:600;line-height:1.55} .notice::before{content:'';flex:none;width:18px;height:18px;margin-top:2px;background:var(--v2-accent-ink);-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat} .notice > *{margin:0} .notice-body{min-width:0;flex:1 1 auto} .notice-ok{background:var(--ok-bg);border-color:var(--ok-line)} .notice-ok::before{background:var(--ok);-webkit-mask-image:var(--i-tick);mask-image:var(--i-tick)} .notice-warn{background:var(--warn-bg);border-color:var(--warn-line)} .notice-warn::before{background:var(--warn);-webkit-mask-image:var(--i-warn);mask-image:var(--i-warn)} .notice-err{background:var(--err-bg);border-color:var(--err-line)} .notice-err::before{background:var(--err);-webkit-mask-image:var(--i-cross);mask-image:var(--i-cross)} /* ---------------------------------------------------------------- tables */ .tablewrap{position:relative;max-width:100%;overflow-x:auto;border:1px solid var(--v2-line);border-radius:var(--r-3);background:var(--v2-card)} .tablewrap-tall{max-height:min(72vh,760px);overflow:auto} table{width:100%;border-collapse:collapse;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums;color:var(--v2-ink)} caption{padding:12px 14px;caption-side:top;text-align:left;font-size:var(--fs-sm);color:var(--v2-muted)} th,td{padding:12px 14px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--v2-line)} thead th{background:var(--v2-paper);color:var(--v2-muted);font-size:var(--fs-2xs);font-weight:800;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} .tablewrap thead th{position:sticky;top:0;z-index:2} table.tl-sticky thead th{position:sticky;top:var(--topbar-h);z-index:2} tbody th{font-weight:700} tbody tr:hover{background:var(--brand-wash-2)} table > :last-child > tr:last-child > *{border-bottom:0} tfoot :is(td,th){border-top:2px solid var(--v2-ink);border-bottom:0;background:var(--v2-paper);font-weight:800} .num,th.num,td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} td.fig{font-size:20px} td.cell-actions{text-align:right;white-space:nowrap} td.cell-actions > .btn{margin:2px 0 2px 6px;vertical-align:middle} /* Opens the rest of a card. A table shows every column already, so it is not drawn at all until the rows become cards. */ .row-open-btn{display:none} table.clickable tbody tr{cursor:pointer} tr.is-selected{background:var(--brand-wash)} /* superseded rows: muted, with a rule; locked (club-made) rows: a lock after the first value. Say it in words too: a badge (st-superseded) or sr-only text in the row. */ tr.row-muted > td{color:var(--v2-muted)} tr.row-muted > :first-child{box-shadow:inset 3px 0 0 var(--line-strong)} tr.row-locked > :first-child::after{content:'';display:inline-block;width:12px;height:12px;margin-left:6px;vertical-align:-1px;background:var(--v2-muted);-webkit-mask:var(--i-lock) center/contain no-repeat;mask:var(--i-lock) center/contain no-repeat} /* ---------------------------------------------------------------- lists: the badge names the state, the edge only tints it */ .tl-list{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none} .tl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 16px;min-height:64px;padding:12px 16px;background:var(--v2-card);color:var(--v2-ink);border:1px solid var(--v2-line);border-radius:var(--r-1);text-decoration:none} a.tl-row:hover,button.tl-row:hover{border-color:var(--v2-ink);background:var(--hover-bg);text-decoration:none} button.tl-row{width:100%;font:inherit;text-align:left;cursor:pointer} .tl-row-lead{display:flex;flex-direction:column;align-items:flex-start;min-width:52px;line-height:1} .tl-row-lead .d{font-family:var(--font-display);font-size:30px;font-style:italic;font-weight:600;line-height:.95;font-variant-numeric:tabular-nums} .tl-row-lead .m{margin-top:3px;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--v2-accent-ink)} .tl-row-main{display:flex;flex-direction:column;gap:2px;min-width:0} .tl-row > a.tl-row-main{align-self:stretch;justify-content:center;min-height:44px;color:inherit;text-decoration:none} .tl-row > a.tl-row-main:hover .tl-row-title{text-decoration:underline} .tl-row-title{font-size:var(--fs-md);font-weight:750;line-height:1.35;overflow-wrap:anywhere} .tl-row-meta{font-size:var(--fs-sm);line-height:1.5;color:var(--v2-muted);overflow-wrap:anywhere} .tl-row-aside{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 10px;text-align:right} .tl-row.is-muted{border-color:var(--line-strong)} .tl-row.is-warn{border-color:var(--warn-line)} .tl-row.is-err{border-color:var(--err-line)} .tl-row.is-money{border-color:color-mix(in srgb,var(--money) 45%,var(--v2-line))} /* ---------------------------------------------------------------- money, in the fee teal (never added across currencies) */ .money{color:var(--money-ink);font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap} .money .cur{margin-left:.3em;font-size:.8em;font-weight:800;letter-spacing:.04em} .money-fig{font-family:var(--font-display);font-size:28px;font-style:italic;font-weight:600;line-height:1;letter-spacing:-.01em;color:var(--money);font-variant-numeric:tabular-nums;white-space:nowrap} .money-fig .cur{margin-left:.25em;font-family:var(--font);font-size:var(--fs-sm);font-style:normal;font-weight:800;letter-spacing:.04em;color:var(--money-ink)} .money-box{padding:14px 16px;background:var(--money-bg);border:1px solid var(--v2-line);border-radius:var(--r-1)} /* ---------------------------------------------------------------- the month calendar .tl-cal > .tl-cal-head(button.icon-btn , h3.tl-cal-title , button.icon-btn) , .tl-cal-grid(.tl-cal-dow x7 , .tl-cal-day ...) , ul.tl-cal-list */ .tl-cal{min-width:0} .tl-cal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)} .tl-cal-title{flex:1 1 auto;margin:0;text-align:center;font-family:var(--font-display);font-size:24px;font-style:italic;font-weight:600;line-height:1;letter-spacing:0;text-transform:uppercase} .tl-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:16px} .tl-cal-dow{padding:0 0 6px;text-align:center;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--v2-muted)} .tl-cal-day{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;height:48px;padding:0;border:1px solid transparent;border-radius:var(--r-1);background:transparent;color:var(--v2-ink);font-size:var(--fs-base);font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none} :is(a,button).tl-cal-day{cursor:pointer} :is(a,button).tl-cal-day:not(.is-selected,[aria-pressed="true"],[aria-selected="true"]):hover{border-color:var(--line-strong);background:var(--hover-bg);text-decoration:none} :is(a,button).tl-cal-day:is(.is-selected,[aria-pressed="true"],[aria-selected="true"]):hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-brand);text-decoration:none} .tl-cal-day.is-out{color:var(--v2-muted);font-weight:500} .tl-cal-day.is-today{box-shadow:inset 0 0 0 2px var(--v2-ink);font-weight:800} .tl-cal-day.has-session{background:var(--brand-wash);color:var(--v2-accent-ink);font-weight:800} .tl-cal-day.has-session::after{content:'';position:absolute;left:50%;bottom:7px;width:14px;height:3px;margin-left:-7px;background:var(--v2-brand)} .tl-cal-day.is-cancelled{color:var(--v2-muted);text-decoration:line-through} .tl-cal-day.is-cancelled::after{background:var(--line-strong)} .tl-cal-day:is(.is-selected,[aria-pressed="true"],[aria-selected="true"]){background:var(--v2-brand);border-color:var(--v2-brand);color:var(--on-brand)} .tl-cal-day:is(.is-selected,[aria-pressed="true"],[aria-selected="true"])::after{background:var(--on-brand)} .tl-cal-list{display:grid;gap:6px;margin:16px 0 0;padding:14px 0 0;list-style:none;border-top:1px solid var(--v2-line)} .tl-cal-list:empty{display:none} .tl-cal-item{display:flex;align-items:center;gap:var(--sp-3);min-height:52px;padding:8px 12px;border:1px solid var(--v2-line);border-radius:var(--r-1);background:var(--v2-paper);color:var(--v2-ink);text-decoration:none} a.tl-cal-item:hover{border-color:var(--v2-ink);background:var(--hover-bg);text-decoration:none} .tl-cal-d{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:36px;height:36px;padding:0 4px;border-radius:var(--r-1);background:var(--v2-brand);color:var(--on-brand);font-family:var(--font-display);font-size:20px;font-style:italic;font-weight:600} .tl-cal-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-base);font-weight:750} .tl-cal-meta{flex:none;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--v2-muted)} /* ---------------------------------------------------------------- dialogs */ .modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal);display:flex;flex-direction:column;align-items:center;padding:clamp(16px,6vh,72px) 16px 24px;overflow-y:auto;overscroll-behavior:contain;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .modal{position:relative;flex:none;width:100%;max-width:640px;background:var(--v2-card);color:var(--v2-ink);border:1px solid var(--v2-line);border-radius:var(--r-3);box-shadow:var(--shadow-modal);animation:tl-rise .22s var(--ease) backwards} .modal::before{content:'';position:absolute;top:-1px;left:24px;width:40px;height:3px;background:var(--v2-brand)} .modal-sm{max-width:440px} .modal-lg{max-width:880px} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:20px 18px 16px 24px;border-bottom:1px solid var(--v2-line)} .modal-head :is(h2,h3){margin:0;font-family:var(--font-display);font-size:26px;font-style:italic;font-weight:600;line-height:1;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:anywhere} .modal-body{padding:20px 24px} .modal-body > :first-child{margin-top:0} .modal-body > :last-child{margin-bottom:0} .modal-body .field + .field{margin-top:var(--sp-4)} .modal-body .grid > .field + .field{margin-top:0} .modal-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px 20px;border-top:1px solid var(--v2-line)} .modal-foot .spacer{flex:1 1 auto} body.tl-modal-open{overflow:hidden} /* ---------------------------------------------------------------- the toast
…
The mark is drawn by CSS from the kind (ok | info | warn | err); ink text stays readable in every kind. */ .toast{position:fixed;z-index:var(--z-toast);top:calc(var(--topbar-h) + 12px);left:50%;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(560px,calc(100vw - 32px));padding:12px 18px 12px 14px;border:1px solid var(--ok);border-radius:var(--r-2);background:var(--v2-card);color:var(--v2-ink);font-size:var(--fs-base);font-weight:700;line-height:1.4;box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transform:translate(-50%,-8px);transition:opacity .2s,transform .25s var(--ease);cursor:pointer} .toast.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)} .toast::before{content:'';flex:none;width:20px;height:20px;background:var(--ok);-webkit-mask:var(--i-tick) center/contain no-repeat;mask:var(--i-tick) center/contain no-repeat} .toast .toast-ico{display:none} .toast-txt{min-width:0;overflow-wrap:anywhere} .toast-info{border-color:var(--v2-brand)} .toast-info::before{background:var(--v2-accent-ink);-webkit-mask-image:var(--i-info);mask-image:var(--i-info)} .toast-warn{border-color:var(--warn)} .toast-warn::before{background:var(--warn);-webkit-mask-image:var(--i-warn);mask-image:var(--i-warn)} .toast-err{border-color:var(--err)} .toast-err::before{background:var(--err);-webkit-mask-image:var(--i-cross);mask-image:var(--i-cross)} /* ---------------------------------------------------------------- empty, error, loading TimelineUtil emits .empty (svg.empty-glide + h3 + p), .empty.load-error (h3 + .btn.js-retry) and skeleton placeholders (.tl-skeleton; .plat-skeleton from LANDING's copy is drawn the same). */ .empty{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:40px 16px;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-3);color:var(--v2-muted)} .empty h3{margin:0;color:var(--v2-ink);font-family:var(--font-display);font-size:26px;font-style:italic;font-weight:600;line-height:1;text-transform:uppercase} .empty p{max-width:52ch;margin:0;font-size:var(--fs-base)} .empty .empty-glide{display:block;margin:0 auto 6px;color:var(--v2-muted)} .empty .btn{margin-top:var(--sp-3)} .empty.load-error{border-color:var(--err)} .empty.load-error h3{display:flex;align-items:center;gap:10px} .empty.load-error h3::before{content:'';flex:none;width:22px;height:22px;background:var(--err);-webkit-mask:var(--i-warn) center/contain no-repeat;mask:var(--i-warn) center/contain no-repeat} .tl-skeleton,.plat-skeleton{display:block;height:56px;margin-top:10px;border-radius:var(--r-2);background:var(--chip-bg);background-image:linear-gradient(90deg,transparent 0 16px,var(--hover-bg) 16px 38%,transparent 38% 46%,var(--hover-bg) 46% 62%,transparent 62%);background-size:100% 12px;background-position:0 50%;background-repeat:no-repeat} .tl-skeleton-sm{height:28px} .tl-skeleton-lg{height:120px} /* the thin bar along the top of the window while something is loading (TimelineBusy) */ .busybar{position:fixed;top:0;left:0;right:0;z-index:var(--z-busy);height:3px;pointer-events:none;opacity:0;transition:opacity .22s} .busybar.on{opacity:1} .busybar-fill{display:block;width:0;height:100%;background:var(--v2-brand);transition:width .3s cubic-bezier(.25,.8,.3,1)} /* ---------------------------------------------------------------- the dock Floats at the foot of the screen at every width (Logbook), dark in both themes, with the primary action raised out of the bar in the middle. */ .tabbar{position:fixed;z-index:var(--z-bar);left:50%;bottom:max(12px,env(safe-area-inset-bottom));width:min(640px,calc(100vw - 24px));padding:6px;background:var(--tl-dock-bg);color:var(--tl-dock-ink);border:1px solid var(--tl-dock-line);border-radius:var(--r-4);box-shadow:0 16px 46px #00000061;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);transform:translateX(-50%)} .tabbar-inner{display:flex;align-items:stretch;gap:2px} .tabbar .tab{position:relative;flex:1 1 0;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;padding:9px 4px 8px;border:0;border-radius:var(--r-2);background:none;color:var(--tl-dock-ink);font-size:var(--fs-2xs);font-weight:750;line-height:1.2;letter-spacing:.06em;text-align:center;text-decoration:none;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s} .tabbar .tab-ico{display:block;flex:none;width:22px;height:22px} .tabbar .tab > span:not(.tab-fab):not(.tab-n){display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tabbar .tab:hover{background:#ffffff16;color:#fff;text-decoration:none} .tabbar .tab:is(.active,[aria-current="page"]){background:var(--v2-brand);color:#fff} .tabbar .tab:focus-visible{outline:2px solid #fff;outline-offset:2px} .tabbar .tab-group{display:none} .tab-fab{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;margin:-34px 0 1px;border:4px solid var(--tl-dock-solid);border-radius:var(--r-3);background:var(--v2-brand);color:#fff;box-shadow:0 8px 22px #0000004d} .tab-fab svg{width:24px;height:24px} .tabbar .tab-cta:hover{background:none} .tabbar .tab-cta:hover .tab-fab{background:var(--brand-hover);color:#fff} .tabbar .tab-cta:is(.active,[aria-current="page"]){background:none;color:#fff} .tabbar .tab-cta:is(.active,[aria-current="page"]) .tab-fab{background:#fff;color:var(--v2-brand)} .tab-n{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-1);background:var(--tl-dock-count);color:#fff;font-size:var(--fs-2xs);font-weight:800;line-height:18px;letter-spacing:0;text-align:center} /* the page stops above the floating dock */ body:has(> .tabbar:not([hidden])){padding-bottom:calc(112px + env(safe-area-inset-bottom))} /* ---------------------------------------------------------------- the console rail (Flight club: #tlNav.tabbar.tl-rail) A left rail from 901px, the dock below. In the rail, span.tab-group names a group of tabs; .tab-extra tabs show in the rail only; a .tab-more tab (opening the rest) shows in the dock only. */ @media screen and (min-width:901px){ .tabbar.tl-rail{left:0;right:auto;top:var(--topbar-h);bottom:0;width:var(--rail-w);padding:14px 12px 24px;overflow-y:auto;background:var(--v2-card);color:var(--v2-ink);border:0;border-right:1px solid var(--v2-line);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none} .tl-rail .tabbar-inner{flex-direction:column;gap:2px} .tl-rail .tab{flex:none;flex-direction:row;justify-content:flex-start;gap:var(--sp-3);min-height:44px;padding:10px 12px;color:var(--v2-muted);font-size:13px;font-weight:700;letter-spacing:0;text-align:left;text-transform:none} .tl-rail .tab-ico{width:20px;height:20px} .tl-rail .tab:hover{background:var(--hover-bg);color:var(--v2-ink)} .tl-rail .tab:is(.active,[aria-current="page"]){background:var(--brand-wash);color:var(--v2-accent-ink);box-shadow:inset 3px 0 0 var(--v2-brand)} .tl-rail .tab:focus-visible{outline:3px solid var(--v2-accent-ink);outline-offset:-3px} .tl-rail .tab-group{display:block;margin:18px 12px 6px;font-size:var(--fs-2xs);font-weight:800;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-muted)} .tl-rail .tab-group:first-child{margin-top:4px} .tl-rail .tab-more{display:none} .tl-rail .tab-fab{width:28px;height:28px;margin:0;border:0;box-shadow:none} .tl-rail .tab-fab svg{width:16px;height:16px} .tl-rail .tab-cta:is(.active,[aria-current="page"]){background:var(--brand-wash);color:var(--v2-accent-ink)} .tl-rail .tab-cta:is(.active,[aria-current="page"]) .tab-fab{background:var(--v2-brand);color:#fff} .tl-rail .tab-n{position:static;margin-left:auto} body:has(> .tabbar.tl-rail:not([hidden])){padding-left:var(--rail-w);padding-bottom:0} /* the top bar still spans the window, over the rail's column */ body:has(> .tabbar.tl-rail:not([hidden])) > .topbar{margin-left:calc(-1 * var(--rail-w))} } @media screen and (max-width:900px){ .tabbar.tl-rail .tab-extra{display:none} } /* ---------------------------------------------------------------- the launch point and the landing area Built for sunlight: one decision per screen, targets of 72px and more (never under 56px), 2px ink borders, a tick on the chosen answer. */ .tl-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} .tl-big-1{grid-template-columns:minmax(0,1fr)} .tl-big-3{grid-template-columns:repeat(3,minmax(0,1fr))} .tl-big-q{margin:0 0 14px;font-size:var(--fs-2xl);font-weight:800;line-height:1.25;letter-spacing:-.01em} .tl-big-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0;min-height:72px;padding:14px 44px 14px 18px;border:2px solid var(--v2-ink);border-radius:var(--r-3);background:var(--v2-card);color:var(--v2-ink);font-size:var(--fs-xl);font-weight:800;line-height:1.2;text-align:left;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .tl-big-btn:hover{background:var(--hover-bg);text-decoration:none} .tl-big-btn:active{transform:translateY(1px)} .tl-big-btn:focus-visible{outline:4px solid var(--v2-accent-ink);outline-offset:3px} .tl-big-label{max-width:100%;overflow-wrap:anywhere;font-family:var(--font-display);font-size:30px;font-style:italic;font-weight:600;line-height:1;text-transform:uppercase} .tl-big-sub{max-width:100%;font-size:var(--fs-base);font-weight:650;line-height:1.35;color:var(--v2-muted);overflow-wrap:anywhere} .tl-big-btn:is(.is-selected,[aria-pressed="true"]){background:var(--v2-brand);border-color:var(--v2-brand);color:var(--on-brand)} .tl-big-btn:is(.is-selected,[aria-pressed="true"]) .tl-big-sub{color:var(--on-brand)} .tl-big-btn:is(.is-selected,[aria-pressed="true"])::after{content:'';position:absolute;top:12px;right:12px;width:22px;height:22px;background:currentColor;-webkit-mask:var(--i-tick) center/contain no-repeat;mask:var(--i-tick) center/contain no-repeat} .tl-big-btn:disabled{opacity:.45;cursor:not-allowed} .tl-big-primary,.tl-big-ok,.tl-big-danger{min-height:96px;align-items:center;padding:16px 20px;text-align:center;font-family:var(--font-display);font-size:34px;font-style:italic;font-weight:600;line-height:1;letter-spacing:.01em;text-transform:uppercase} .tl-big-primary{background:var(--v2-brand);border-color:var(--v2-brand);color:var(--on-brand)} .tl-big-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-brand)} .tl-big-ok{background:var(--ok);border-color:var(--ok);color:var(--on-ok)} .tl-big-ok:hover{background:var(--ok);border-color:var(--v2-ink);color:var(--on-ok)} .tl-big-danger{background:var(--err-bg);border-color:var(--err);color:var(--err)} .tl-big-danger:hover{background:var(--err);color:var(--on-err)} .tl-big-time{display:block;font-family:var(--font-display);font-size:clamp(56px,14vw,96px);font-style:italic;font-weight:600;line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums} /* body.tl-field: the field pages in day mode go to pure black on white for sunlight */ :root[data-theme="light"] body.tl-field{--v2-paper:#ffffff;--v2-ink:#000000;--v2-muted:#3b4450;--v2-line:#b3bac4;--line-strong:#4d5561} /* the sync state: */ .tl-sync{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px 6px 10px;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--v2-card);color:var(--v2-ink);font-size:var(--fs-sm);font-weight:800;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .tl-sync::before{content:'';flex:none;width:16px;height:16px;background:var(--v2-muted);-webkit-mask:var(--i-sync) center/contain no-repeat;mask:var(--i-sync) center/contain no-repeat} .tl-sync .n{font-variant-numeric:tabular-nums} .tl-sync[data-state="synced"]{background:var(--ok-bg);border-color:var(--ok)} .tl-sync[data-state="synced"]::before{background:var(--ok);-webkit-mask-image:var(--i-tick);mask-image:var(--i-tick)} .tl-sync[data-state="pending"]{background:var(--warn-bg);border-color:var(--warn)} .tl-sync[data-state="pending"]::before{background:var(--warn)} .tl-sync[data-state="offline"]{border-style:dashed;border-color:var(--v2-ink)} .tl-sync[data-state="offline"]::before{background:var(--v2-ink);-webkit-mask-image:var(--i-offline);mask-image:var(--i-offline)} .tl-sync[data-state="error"]{background:var(--err-bg);border-color:var(--err)} .tl-sync[data-state="error"]::before{background:var(--err);-webkit-mask-image:var(--i-warn);mask-image:var(--i-warn)} /* ---------------------------------------------------------------- responsive */ @media screen and (max-width:900px){ .tl-stat .n{font-size:40px} .tl-hero{padding:28px 28px 26px} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media screen and (max-width:720px){ .tl-crumbs{display:none} /* tables marked .tl-cards become one card per row: td[data-label] shows its column name, .cell-main is the card's title line, .cell-aside rides beside it, .cell-actions closes it, .cell-hide goes */ .tablewrap:has(> table.tl-cards){overflow:visible;border:0;border-radius:0;background:transparent} table.tl-cards,table.tl-cards > tbody,table.tl-cards > tfoot{display:block;width:100%} table.tl-cards > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} table.tl-cards > caption{display:block} table.tl-cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;margin:0 0 8px;padding:12px 14px;background:var(--v2-card);border:1px solid var(--v2-line);border-radius:var(--r-3)} table.tl-cards tbody tr:hover{background:var(--v2-card)} /* a cell is a block with its column name floated left, so a value made of words and tags stays one run of text */ table.tl-cards :is(td,th){display:flow-root;grid-column:1/-1;min-width:0;padding:3px 0;border:0;background:transparent;text-align:right;white-space:normal;overflow-wrap:anywhere;box-shadow:none} table.tl-cards :is(td,th)[data-label]::before{content:attr(data-label);float:left;max-width:48%;margin-right:var(--sp-3);text-align:left;font-size:var(--fs-2xs);font-weight:800;line-height:2.15;letter-spacing:.08em;text-transform:uppercase;color:var(--v2-muted)} table.tl-cards .cell-main{grid-column:1;padding-bottom:6px;text-align:left;font-size:var(--fs-md);font-weight:750} table.tl-cards .cell-aside{grid-column:2;grid-row:1;padding-bottom:6px} /* :is(td,th) here only to outweigh the [data-label] rule above, which is one step more specific than a bare class and would otherwise put a column name on the card's own title line. */ table.tl-cards :is(td,th):is(.cell-main,.cell-aside)::before{content:none} table.tl-cards .cell-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);margin-top:6px;padding-top:10px;border-top:1px solid var(--v2-line)} table.tl-cards :is(td,th).cell-actions::before{content:none} table.tl-cards .cell-actions > .btn{margin:0} table.tl-cards .cell-hide{display:none} /* A card carries the few facts that say which row this is; the rest of the columns wait behind the row's own button. A table on a wide screen has every column in view, so neither the class nor the button means anything there — .cell-more is only hidden here, and .row-open only exists here. */ table.tl-cards .cell-more{display:none} table.tl-cards tr.row-open .cell-more:not(.cell-hide){display:flow-root} table.tl-cards .row-open-btn{display:inline-flex;margin-right:auto} table.tl-cards tr.row-muted{background:var(--v2-paper);border-style:dashed} table.tl-cards tr.row-muted > :first-child{box-shadow:none} table.tl-cards tfoot tr{border:2px solid var(--v2-ink);background:var(--v2-paper)} } @media screen and (max-width:640px){ .wrap{padding:18px 16px 40px} .topbar{gap:var(--sp-2);padding:8px 12px;min-height:56px} .tl-preview{padding:8px 16px} .tl-preview-who{flex:1 1 100%} .tl-preview-actions{margin-left:0} .tl-topbar-start{gap:var(--sp-3)} .topbar-controls{gap:6px} .tl-brand-word{font-size:20px} .tl-hero{margin-bottom:18px;padding:24px 20px 22px;background-image:linear-gradient(180deg,color-mix(in srgb,var(--v2-hero-from) 92%,transparent),color-mix(in srgb,var(--v2-hero-to) 72%,transparent)),var(--tl-hero-art),linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px)} .tl-hero::before{top:24px;width:6px;height:40px} .tl-hero-title{font-size:clamp(32px,9vw,44px)} .tl-hero-sub{font-size:var(--fs-base)} .tl-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px;padding:18px 16px} .tl-hero > .tl-stats{padding:18px 0 0} .tl-stat{padding:0 14px} .tl-stat:nth-child(odd){padding-left:0;border-left:0} .tl-stat .n{font-size:34px} .card{padding:20px 16px;margin-top:16px} .section::before,.card-narrow::before,.tl-tick::before,.modal::before{left:16px} .grid,.grid-3{grid-template-columns:minmax(0,1fr);gap:16px} .tl-kv{grid-template-columns:minmax(0,1fr)} .tl-row{grid-template-columns:minmax(0,1fr) auto} .tl-row-lead{flex-direction:row;align-items:baseline;gap:6px;grid-column:1/-1} .tl-row-aside{grid-column:1/-1;justify-content:flex-start;text-align:left} .modal-head{padding:18px 14px 14px 16px} .modal-body{padding:18px 16px} .modal-foot{padding:14px 16px 18px} .tl-big-3{grid-template-columns:repeat(2,minmax(0,1fr))} .tl-big-label{font-size:26px} } @media screen and (max-width:520px){ /* The masthead earns its place on a phone by being shorter, not by saying less: the eyebrow still names the page, the sentence under the title still explains it and the figures still carry their comparison. What goes is white space and display type — 500px of masthead before the first card was more than half a phone screen. */ .tl-hero{margin-bottom:14px;padding:18px 18px 16px} .tl-hero::before{top:18px;height:32px} .tl-eyebrow{margin-bottom:6px} .tl-hero-title{font-size:clamp(28px,8.2vw,38px)} .tl-hero-sub{margin-top:8px;line-height:1.5} .tl-hero-actions{gap:8px;margin-top:14px} .tl-hero > .tl-stats{margin-top:18px;padding-top:14px} .tl-stats{row-gap:14px;padding:14px} .tl-stat .n{font-size:30px} .tl-stat .k{margin-top:6px} .tl-stat .stat-sub{margin-top:4px} .topbar-controls{gap:4px} .tl-brand{gap:8px} .tl-brand-mark{width:28px;height:28px} .tl-brand-word{font-size:17px} .tl-brand::after{width:8px;height:4px;margin:0 0 7px -5px} /* A thumb, not a mouse: every control in the bar is 44 px on a phone. The bar is 64 px, so they fit without it growing. */ .btn-sm,.chip,.tl-preview .btn,.tl-preview-who :is(select,.pick-btn){min-height:44px} .seg > :is(button,a){min-height:44px} .icon-btn,.theme-toggle,.avatar-btn{width:44px;height:44px;min-width:44px} .icon-btn-sm{width:44px;height:44px;min-width:44px} .lang button{min-height:44px;min-width:44px;padding:0 8px} /* The mark is how people get back to the club, so it is a target too. */ .tl-brand{min-height:44px} .topbar .tl-menu,.topbar .lang-menu{position:fixed;top:calc(var(--topbar-h) + 4px);left:12px;right:12px;min-width:0;max-width:none} .tabbar{width:calc(100vw - 16px);bottom:max(8px,env(safe-area-inset-bottom));padding:5px} .tabbar .tab{min-height:54px;padding:8px 2px 7px;font-size:var(--fs-2xs);letter-spacing:.01em} .tabbar .tab-ico{width:20px;height:20px} .tab-fab{width:48px;height:48px;margin-top:-32px} /* a dialog becomes a sheet from the foot of the screen */ .modal-backdrop{padding:12px 0 0} .modal{max-width:none;margin-top:auto;border-bottom:0;border-radius:var(--r-3) var(--r-3) 0 0} .modal-foot{position:sticky;bottom:0;z-index:1;background:var(--v2-card);padding-bottom:max(18px,env(safe-area-inset-bottom))} .modal-foot > .btn{flex:1 1 auto} .toast{top:auto;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,8px)} .toast.show{transform:translate(-50%,0)} .tl-cal-grid{gap:2px} .tl-cal-day{height:44px;font-size:13px} .tl-big{gap:10px} .tl-big-primary,.tl-big-ok,.tl-big-danger{font-size:30px} } /* touch screens: every target at least 44px */ @media (hover:none) and (pointer:coarse){ .btn-sm,.chip,.seg > :is(button,a),.lang button,.tl-brand{min-height:44px} .lang-pill button{min-width:44px} .icon-btn,.icon-btn-sm,.theme-toggle,.avatar-btn{width:44px;height:44px;min-width:44px} .tabbar .tab{min-height:58px} } /* ---------------------------------------------------------------- spacing utilities: after every component, so they win */ .mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)} /* ---------------------------------------------------------------- print: ink on white, no chrome The :not(#tl-print) in a selector lends it an id's weight, so these rules win over the screen rules without !important. */ @media print{ :root[data-theme="light"],html:not([data-theme="light"]){ --v2-paper:#ffffff;--v2-card:#ffffff;--v2-ink:#000000;--v2-muted:#434a54;--v2-line:#b8bfc8;--line-strong:#6b7480; --chip-bg:#f1f3f5;--hover-bg:#ffffff; --ok:#14532d;--ok-bg:#ffffff;--ok-line:#6b7480;--warn:#713f12;--warn-bg:#ffffff;--warn-line:#6b7480;--err:#7f1d1d;--err-bg:#ffffff;--err-line:#6b7480;--live:#7f1d1d; --money:#0a4f58;--money-ink:#0a4f58;--money-bg:#ffffff; --v2-accent-ink:#000000;--shadow-pop:none;--shadow-modal:none; color-scheme:light; } @page{margin:14mm 12mm} html:not(#tl-print),html:not(#tl-print) body{background:#fff;color:#000} html:not(#tl-print) body{padding:0;font-size:10pt;line-height:1.45} html:not(#tl-print) :is(.no-print,.topbar,.tabbar,.tl-preview,.toast,.busybar,.modal-backdrop,.pick-menu,.tl-sync,.tl-hero-actions,.cell-actions,.actions,.tl-toolbar,.theme-toggle,.lang,.tl-appswitch,.tl-account){display:none} html:not(#tl-print) .wrap{max-width:none;margin:0;padding:0} html:not(#tl-print) a{color:inherit;text-decoration:none} html:not(#tl-print) .tl-hero{margin:0 0 6mm;padding:0 0 4mm;color:#000;background:none;border-bottom:1.5pt solid #000;box-shadow:none} html:not(#tl-print) .tl-hero::before{display:none} html:not(#tl-print) :is(.tl-hero-title,.tl-hero a){color:#000} html:not(#tl-print) .tl-hero-title{font-size:22pt} html:not(#tl-print) :is(.tl-eyebrow,.tl-hero-sub){color:#333} html:not(#tl-print) .tl-stats{margin-top:4mm;padding:3mm 0 0;color:#000;background:none;border:0;border-top:.75pt solid #999;box-shadow:none} html:not(#tl-print) .tl-stat{border-left-color:#bbb} html:not(#tl-print) .tl-stat :is(.k,.u,.stat-sub,.stat-sub strong){color:#333} html:not(#tl-print) .tl-stat .n{font-size:18pt} html:not(#tl-print) .card{margin-top:5mm;padding:4mm 0 0;border:0;border-top:.75pt solid #999;border-radius:0} html:not(#tl-print) :is(.section,.card-narrow,.tl-tick,.modal,.tl-head .kicker,.tl-foot)::before{background:#000} html:not(#tl-print) .tablewrap{max-height:none;overflow:visible;border:0;border-radius:0} html:not(#tl-print) table{font-size:8.5pt} html:not(#tl-print) thead{display:table-header-group} html:not(#tl-print) tfoot{display:table-footer-group} html:not(#tl-print) tr{break-inside:avoid} html:not(#tl-print) thead th{position:static;background:none;color:#000;border-bottom:1pt solid #000} html:not(#tl-print) :is(th,td){padding:1.4mm 2mm} html:not(#tl-print) tbody tr:hover{background:none} html:not(#tl-print) :is(.badge,.chip){background:none;border-color:#666;color:#000} html:not(#tl-print) :is(.money,.money-fig,.money-fig .cur){color:#000} html:not(#tl-print) :is(.empty,.notice){border-color:#999;background:none} html:not(#tl-print) .tl-row{border-color:#bbb;border-left-color:#000;break-inside:avoid} } /* ---------------------------------------------------------------- reduced motion Everything arrives in its place; the busy spinner stands still as a dotted ring. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .btn.busy::after,.icon-btn.busy::after{border-style:dotted;border-right-color:currentColor} @view-transition{navigation:none} }