/* Design tokens — "Precision instrument, alive". Two first-class moods on one system, switched by [data-theme] on : light "Studio" (warm paper, ink navy, hairline rules) and dark "Command" (blue-cast near-black, luminous signals, lit hairlines, glass). Full spec, alias map and verified WCAG tables: DESIGN_TOKENS.md. Type (self-hosted, /css/fonts.css): Alioro Display for names and titles, Alioro Sans for everything read for hours, Alioro Mono for ids and counts. */ :root { /* ---- Surfaces: near-white ramp, a whisper warm (page -> raised -> inset -> deep) ---- */ --surface-0: #f4f5f8; --surface-1: #ffffff; --surface-2: #eef0f4; --surface-3: #e4e7ee; /* ---- Text: ink-navy ramp ---- */ --text-1: #141a2b; --text-2: #3d475c; --text-3: #5a6478; --text-inverse: #f2f4fa; /* ---- Rules ---- */ --line-1: #d3d7e0; --line-2: #e6e9ef; --line-strong: #7f8798; /* form-control boundary: >=3:1 on surface-0/1/2 */ /* ---- THE PERMANENT PALETTE ---------------------------------------- Five hues, sampled from the mark (public/img/logo.png and design/assets/logo-mark.svg carry exactly these values). Every other colour in the product is DERIVED from them by a fixed rule, so a new tint is never invented: see DESIGN_TOKENS.md §0. light signal = hue mixed with 8% black (holds on paper) dark signal = hue mixed with 14% white (lamp grade at night) brand = logo blue mixed with 18% black (AA on paper, AA with white text, the same fill in both themes) soft tint = signal at 12% over transparent The raw hues are for the mark, the loader, the rings and tags — never for text. ---- */ --logo-1: #ff3229; /* red */ --logo-2: #ffa00a; /* orange */ --logo-3: #ffcc00; /* yellow */ --logo-4: #00b842; /* green */ --logo-5: #0089eb; /* blue */ --logo-teal: #00a096; /* the sixth signal: halfway between green and blue on the fan */ /* ---- Brand: the logo blue, deepened so it reads as text and carries white ---- */ --brand: #0070c1; --brand-fg: #ffffff; --brand-hover: #0064ad; --brand-soft: color-mix(in srgb, var(--brand) 11%, transparent); --brand-fill: #0070c1; /* filled controls: white text on both grounds (5.1:1) */ --brand-fill-hover: #0064ad; /* ---- Signals: the fan, 8% deeper than the mark ---- */ --signal-1: #eb2e26; --signal-2: #eb9309; --signal-3: #ebbc00; --signal-4: #00a93d; --signal-5: #00948a; --signal-6: #007ed8; --signal-1-soft: color-mix(in srgb, var(--signal-1) 12%, transparent); --signal-2-soft: color-mix(in srgb, var(--signal-2) 13%, transparent); --signal-3-soft: color-mix(in srgb, var(--signal-3) 14%, transparent); --signal-4-soft: color-mix(in srgb, var(--signal-4) 13%, transparent); --signal-5-soft: color-mix(in srgb, var(--signal-5) 13%, transparent); --signal-6-soft: color-mix(in srgb, var(--signal-6) 12%, transparent); /* ---- Semantic states: aliases into the fan (declared once; dark overrides the primitives and these re-resolve automatically) ---- */ --ok: var(--signal-4); --warn: var(--signal-2); --danger: var(--signal-1); --info: var(--signal-6); --ok-soft: var(--signal-4-soft); --warn-soft: var(--signal-2-soft); --danger-soft: var(--signal-1-soft); --info-soft: var(--signal-6-soft); /* ---- Interaction washes ---- */ --hover-ground: rgba(20, 26, 43, .05); --active-ground: rgba(20, 26, 43, .09); --selection-bg: color-mix(in srgb, var(--brand) 16%, transparent); --star: #eba705; /* favourite star: orange and yellow of the mark, halfway */ /* ---- Focus, overlay, glass ---- */ --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--brand); --scrim: rgba(24, 26, 31, .44); /* ONE frost for the whole product: the board head's recipe. Every glass surface (head, rail, cards, popovers, modals, drawer, hover cards) reads these two lines; there is no second setting to drift from. */ --glass: rgba(251, 251, 253, .74); --glass-bg: var(--glass); --glass-chrome: var(--glass); --glass-card: var(--glass); --glass-line: rgba(255, 255, 255, .55); /* the lit top edge of any glass */ --glass-blur: 20px; --ambient: radial-gradient(1100px 620px at 88% -8%, color-mix(in srgb, var(--logo-5) 9%, transparent), transparent 62%), radial-gradient(900px 560px at -6% 108%, color-mix(in srgb, var(--logo-4) 7%, transparent), transparent 60%), radial-gradient(700px 420px at 55% 118%, color-mix(in srgb, var(--logo-2) 5%, transparent), transparent 60%); /* ---- Typography ---- */ --font-display: "Alioro Display", "Schibsted Grotesk", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-body: "Alioro Sans", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "Alioro Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fw-body: 450; /* variable weight: a hair above regular on paper... */ --fs-2xs: 11px; --fs-xs: 12.5px; --fs-sm: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 29px; --fs-4xl: 35px; --fs-5xl: 42px; --fs-6xl: 52px; --fs-7xl: 64px; --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.5; --lh-loose: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 800; --ls-display: -0.02em; --ls-caps: 0.08em; /* uppercase mono micro-labels: the control-room voice */ --ls-mono: 0; /* ---- Spacing: 4px base; the name is the value / 4 ---- */ --sp-0: 0; --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; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ---- Radius: ownable odd-number scale ---- */ --r-1: 3px; --r-2: 5px; --r-3: 9px; --r-4: 14px; --r-round: 999px; --r-dot: 50%; /* ---- Elevation: soft warm ink-on-paper ---- */ --elev-1: 0 1px 2px rgba(32, 38, 50, .05), 0 1px 1px rgba(20, 26, 43, .05); --elev-2: 0 2px 6px rgba(32, 38, 50, .06), 0 8px 20px rgba(20, 26, 43, .08); --elev-3: 0 4px 12px rgba(32, 38, 50, .07), 0 18px 44px rgba(20, 26, 43, .14); /* ---- Motion ---- */ --dur-micro-1: 120ms; --dur-micro-2: 180ms; --dur-micro-3: 240ms; --dur-scene-1: 300ms; --dur-scene-2: 400ms; --dur-scene-3: 450ms; --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-settle: cubic-bezier(0.22, 1.20, 0.36, 1); } [data-theme="dark"] { /* ---- Surfaces: night ramp. The page sits deepest, the table lifts off it, hover and inset rise again — four visibly distinct steps. ---- */ --surface-0: #16181d; --surface-1: #1d2025; --surface-2: #262a30; --surface-3: #30353c; /* ---- Text: cool off-white ramp, every step readable on every surface ---- */ --text-1: #f2f3f5; --text-2: #c5c9d0; --text-3: #9ca2ac; --text-inverse: #f2f4fa; /* ---- Rules: lit hairlines that actually read as a grid ---- */ --line-1: rgba(255, 255, 255, .13); --line-2: rgba(255, 255, 255, .075); --line-strong: #6e7480; /* ---- Brand: the logo blue lifted 35% toward white for text on the night ground; filled controls keep the paper fill so white text passes ---- */ --brand: #59b2f2; --brand-fg: #06101f; --brand-hover: #7cc3f5; --brand-soft: color-mix(in srgb, var(--brand) 15%, transparent); --brand-fill: #0070c1; --brand-fill-hover: #0a7fd6; /* ---- Signals: the fan, 14% toward white (lamp grade) ---- */ --signal-1: #ff4f47; --signal-2: #ffad2c; --signal-3: #ffd324; --signal-4: #24c25c; --signal-5: #24aea5; --signal-6: #249aee; --signal-1-soft: color-mix(in srgb, var(--signal-1) 13%, transparent); --signal-2-soft: color-mix(in srgb, var(--signal-2) 12%, transparent); --signal-3-soft: color-mix(in srgb, var(--signal-3) 11%, transparent); --signal-4-soft: color-mix(in srgb, var(--signal-4) 12%, transparent); --signal-5-soft: color-mix(in srgb, var(--signal-5) 12%, transparent); --signal-6-soft: color-mix(in srgb, var(--signal-6) 13%, transparent); /* ---- Interaction washes ---- */ --fw-body: 420; /* ...a hair below on the night ground, where light text renders heavier */ --hover-ground: rgba(255, 255, 255, .06); --active-ground: rgba(255, 255, 255, .11); --selection-bg: color-mix(in srgb, var(--brand) 30%, transparent); --star: #ffc028; /* ---- Overlay, glass ---- */ --scrim: rgba(0, 0, 0, .64); --glass: rgba(28, 30, 34, .8); --glass-bg: var(--glass); --glass-chrome: var(--glass); --glass-card: var(--glass); --glass-line: rgba(255, 255, 255, .08); --glass-blur: 20px; --ambient: radial-gradient(1100px 620px at 88% -8%, color-mix(in srgb, var(--logo-5) 12%, transparent), transparent 62%), radial-gradient(900px 560px at -6% 108%, color-mix(in srgb, var(--logo-4) 7%, transparent), transparent 60%), radial-gradient(700px 420px at 55% 118%, color-mix(in srgb, var(--logo-2) 5%, transparent), transparent 60%); /* ---- Elevation: lit top edge + depth + azure bloom ---- */ --elev-1: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .35); --elev-2: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .45); --elev-3: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 56px rgba(0, 0, 0, .55); } @media (prefers-reduced-motion: reduce) { :root { --dur-micro-1: 0.01ms; --dur-micro-2: 0.01ms; --dur-micro-3: 0.01ms; --dur-scene-1: 0.01ms; --dur-scene-2: 0.01ms; --dur-scene-3: 0.01ms; } } :root { /* ---- Legacy bridge: old vars resolve into the new system so all existing consumers pick it up without edits. Declared in :root only — the dark block overrides the primitives and every var() here re-resolves. Delete lines as later phases rewire consumers to the tokens above. --ink family are pinned literals BY DESIGN: marketing ink bands stay dark with light text in both themes. ---- */ --font: var(--font-body); --primary: var(--brand); --primary-hover: var(--brand-hover); --primary-soft: var(--brand-soft); --accent-2: var(--signal-3); --amber: var(--signal-2); --green: var(--ok); --orange: var(--warn); --red: var(--danger); --teal: var(--signal-5); --grad: linear-gradient(135deg, var(--brand), var(--signal-5)); --ink: #141a2b; --ink-2: #1c2440; --on-ink: #f2f4fa; --on-ink-soft: #9aa4c7; --bg: var(--surface-0); --surface: var(--surface-1); --text: var(--text-1); --text-soft: var(--text-2); --border: var(--line-1); --border-soft: var(--line-2); --hover: var(--surface-2); --cell-empty: var(--text-3); --shadow: var(--elev-1); --shadow-lg: var(--elev-3); --radius: var(--r-3); --sidebar-bg: var(--surface-1); --topbar-bg: var(--surface-1); --display: var(--font-display); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; font-weight: var(--fw-body); font-optical-sizing: auto; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* numbers line up wherever they are compared: ids, dates, counts */ .cell-text.num, .cell-date, .group-count, .pill-count, .sum-cell, .ch-time, .ch-meta span, .attach-ver-chip, .qf-chip b, .fv-meta, .pf-meta { font-variant-numeric: tabular-nums; } /* Theme switch: every transition is suppressed for the frame the attribute flips, so light and dark swap in one paint instead of cross-fading. */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; } a { color: var(--primary); text-decoration: none; } h1, h2, h3, h4, h5 { margin: 0 0 .4em; font-weight: 700; font-family: var(--font-display); letter-spacing: -.02em; } input, select, textarea, button { font-family: var(--font); font-size: 14px; color: var(--text); } input, select, textarea { background: var(--surface); border: 1px solid var(--line-strong); /* control boundary: >=3:1 on its grounds (1.4.11) */ border-radius: 6px; padding: 8px 10px; outline: none; transition: border-color var(--dur-micro-2) var(--ease-out); } input:focus, select:focus, textarea:focus { border-color: var(--primary); } label { display: block; margin-bottom: 12px; font-weight: 600; font-size: 13px; color: var(--text-soft); } label input, label select { display: block; width: 100%; margin-top: 5px; font-weight: 400; } .muted { color: var(--text-soft); } .sm { font-size: 12px; } .center { text-align: center; } .pad { padding: 18px; } .w-full { width: 100%; } .hint { font-size: 11px; color: var(--text-soft); margin-top: 6px; } /* ------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 8px; cursor: pointer; padding: 9px 16px; font-weight: 600; font-size: 14px; background: var(--surface-2); color: var(--text); transition: transform .12s ease, background .15s, box-shadow .15s; text-decoration: none; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn.primary { background: var(--brand-fill); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(20,26,43,.18); } .btn.primary:hover { background: var(--brand-fill-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px color-mix(in srgb, var(--brand-fill) 32%, transparent); } .btn.ghost { background: transparent; color: var(--text); } .btn.ghost:hover { background: var(--hover); } .btn.ghost.on { background: var(--primary-soft); color: var(--primary); } .btn.outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn.outline:hover { background: var(--primary-soft); } .btn.ink { background: var(--ink); color: #fff; } .btn.ink:hover { background: var(--ink-2); box-shadow: 0 10px 26px rgba(18, 23, 43, .3); } [data-theme="dark"] .btn.ink { background: var(--primary); } [data-theme="dark"] .btn.ink:hover { background: var(--primary-hover); } .btn.sm { padding: 6px 11px; font-size: 13px; } .btn .arrow { transition: transform .18s ease; display: inline-block; } .btn:hover .arrow { transform: translateX(4px); } .btn:disabled { opacity: .55; cursor: default; transform: none; } .icon-btn { position: relative; background: transparent; border: none; cursor: pointer; font-size: 17px; padding: 7px 9px; border-radius: 6px; color: var(--text); transition: background .15s; } .icon-btn:hover { background: var(--hover); } .icon-btn.sm { font-size: 13px; padding: 4px 6px; } .icon-btn.star.on { color: var(--star); } /* --------------------------------------------------------------- logo Four board-status dots in a 2×2 grid. On hover they rotate one seat clockwise — work moving around a board. */ .logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.4px; } .logo-word b { color: var(--primary); font-weight: 800; } .logo-mark { width: 22px; height: 24px; flex: none; overflow: visible; } .logo-mark circle { transform-box: fill-box; transform-origin: center; } .logo:hover .logo-mark circle { animation: logoWave .65s ease both; } .logo:hover .logo-mark circle:nth-child(n+6) { animation-delay: .07s; } .logo:hover .logo-mark circle:nth-child(n+11) { animation-delay: .14s; } .logo:hover .logo-mark circle:nth-child(n+16) { animation-delay: .21s; } .logo:hover .logo-mark circle:nth-child(n+21) { animation-delay: .28s; } /* app-shell logo: columns pop in left to right once, then a slow wave keeps travelling across the fan (one pass every 8 s) under a soft light */ .app .logo-mark { filter: drop-shadow(0 1px 4px rgba(0, 137, 235, .22)); } [data-theme="dark"] .app .logo-mark { filter: drop-shadow(0 0 7px rgba(140, 190, 255, .38)); } .app .logo-mark circle { animation: logoIn .38s ease backwards, logoDrift 8s var(--ease-in-out) 1.4s infinite; } .app .logo-mark circle:nth-child(n+6) { animation-delay: .05s, 1.8s; } .app .logo-mark circle:nth-child(n+11) { animation-delay: .10s, 2.2s; } .app .logo-mark circle:nth-child(n+16) { animation-delay: .15s, 2.6s; } .app .logo-mark circle:nth-child(n+21) { animation-delay: .20s, 3.0s; } @keyframes logoDrift { 0%, 100% { transform: scale(1); opacity: 1; } 6% { transform: scale(1.15); opacity: .82; } 13% { transform: scale(1); opacity: 1; } } @keyframes logoIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes logoWave { 45% { transform: scale(1.45); } 100% { transform: scale(1); } } .logo.sm { font-size: 17px; } .logo.sm .logo-mark { width: 18px; height: 20px; } /* ---------------------------------------------------------- marketing */ .marketing { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; } .mk-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 5vw; position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease; } .mk-header.scrolled { border-bottom-color: var(--border-soft); box-shadow: 0 4px 24px rgba(18, 23, 43, .06); } .mk-header nav { display: flex; align-items: center; gap: 20px; } .mk-header nav a { color: var(--text); font-weight: 600; font-size: 14.5px; } .mk-header nav a.active, .mk-header nav a:hover { color: var(--primary); } .mk-login { color: var(--text-soft) !important; } .mk-header .logo-mark { width: 30px; height: auto; } .mk-header .logo-word { font-size: 20px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .marketing .btn { border-radius: var(--r-round); } .marketing .btn .arrow { display: inline-flex; transition: transform var(--dur-micro-2) var(--ease-out); } .marketing .btn:hover .arrow { transform: translateX(3px); } /* mini board remnants: the auth page's side panel (and footer live-dot) */ .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; animation: livePulse 2s ease infinite; } .lb-body { padding: 12px 14px 16px; } .lb-group { font-size: 12px; font-weight: 800; color: var(--gcol, var(--primary)); padding: 4px 6px 8px; } .lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 8px; border-left: 3px solid var(--gcol, var(--primary)); background: var(--surface); margin-bottom: 5px; border-bottom: 1px solid var(--border-soft); } .lb-name { flex: 1; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-status { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--text-1); font-size: 11px; font-weight: 700; padding: 5px 0; border-radius: var(--r-1); width: 92px; text-align: center; flex: none; position: relative; background: color-mix(in srgb, var(--lab, var(--text-3)) 14%, transparent); } .lb-status::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-dot); background: var(--lab, var(--text-3)); flex: none; } /* ---- CTA band + footer ----------------------------------------------- */ /* soft glows via radial gradients — no filter: blur, keeps compositing cheap */ .cta-orb { position: absolute; border-radius: 50%; z-index: 0; background: radial-gradient(circle, var(--oc) 0%, transparent 62%); opacity: .5; } .cta-orb.o1 { --oc: var(--signal-6); width: 560px; height: 560px; top: -230px; left: 2%; animation: float 11s ease-in-out infinite; } .cta-orb.o2 { --oc: var(--signal-5); width: 460px; height: 460px; bottom: -200px; right: 4%; animation: float 9s 1s ease-in-out infinite; } .mk-footer { background: var(--surface-1); color: var(--text-2); margin-top: auto; border-top: 1px solid var(--line-1); } .mk-footer-inner { max-width: 1240px; margin: 0 auto; padding: 52px 6vw 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; } .mk-footer h5 { margin-bottom: 12px; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: var(--fw-semibold); } .mk-footer a, .mk-footer span { display: block; color: var(--text-2); padding: 4px 0; font-size: 13px; } .mk-footer a:hover { color: var(--brand); } .mk-footer p { color: var(--text-3); font-size: 13px; line-height: 1.6; } .footer-base { max-width: 1240px; margin: 0 auto; padding: 18px 6vw 30px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); } /* ---- scroll reveals --------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); } .reveal.in { opacity: 1; transform: none; } /* ------------------------------------------------------------- auth */ .auth-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--bg); } .auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 40px 22px; } .auth-logo { font-size: 24px; } .auth-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 20px; box-shadow: var(--shadow); padding: 38px; width: min(420px, 94vw); animation: fadeUp .45s ease both; } .auth-card h2 { font-size: 24px; } .auth-alt { margin-top: 18px; text-align: center; color: var(--text-soft); font-size: 13px; } .auth-forgot { text-align: right; font-size: 13px; margin: -6px 0 10px; } .auth-error { color: var(--red); font-weight: 600; font-size: 13px; margin-bottom: 10px; display: none; } .auth-side { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 6vw 5vw; } .auth-side .cta-orb { opacity: .35; } .auth-side > *:not(.cta-orb) { position: relative; z-index: 1; } .auth-quote { font-size: 19px; line-height: 1.6; color: var(--on-ink); max-width: 420px; font-weight: 500; } .auth-quote footer { margin-top: 14px; font-size: 13.5px; color: var(--on-ink-soft); font-weight: 600; } .auth-board { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 16px; max-width: 420px; backdrop-filter: blur(6px); } .auth-board .lb-row { background: rgba(255, 255, 255, .06); border-bottom: none; } .auth-board .lb-name { color: var(--on-ink); } .auth-board .lb-group { color: #9ab6ff; } /* ---------------------------------------------------------- app shell Slim icon rail + expand-on-demand board drawer + per-page context header. The drawer keeps the legacy .sidebar identity because JS toggles #sidebar.open and refreshSidebarSoon re-renders it. */ body.in-app { overflow: hidden; } .app { display: flex; height: 100vh; } .rail { width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-3) 0; background: var(--surface-1); border-right: 1px solid var(--line-2); z-index: 46; } .rail-logo { display: block; margin-bottom: var(--sp-3); line-height: 0; } .rail-logo .logo-mark { width: 26px; height: auto; } .rail-logo .logo-word { display: none; } .rail-btn { position: relative; width: 40px; height: 40px; border: none; background: none; border-radius: var(--r-2); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .rail-btn:hover { background: var(--surface-2); color: var(--text-1); } .rail-btn.active { background: var(--brand-soft); color: var(--brand); } /* the active page carries a pill on the rail's edge that springs between items */ .rail-btn::before { content: ""; position: absolute; left: -8px; top: 50%; width: 3px; height: 0; border-radius: 2px; background: var(--brand); transform: translateY(-50%); transition: height var(--dur-micro-3) var(--ease-spring); } .rail-btn.active::before { height: 22px; } [data-theme="dark"] .rail { background: linear-gradient(180deg, var(--surface-1), color-mix(in srgb, var(--surface-1) 86%, var(--surface-0))); } [data-theme="dark"] .board-table { color-scheme: dark; } .rail-spacer { flex: 1; } .sidebar { position: fixed; left: 56px; top: 0; bottom: 0; width: 288px; z-index: 45; display: flex; flex-direction: column; background: var(--surface-1); border-right: 1px solid var(--line-1); box-shadow: var(--elev-2); transform: translateX(-120%); visibility: hidden; transition: transform var(--dur-scene-1) var(--ease-out), visibility 0s linear var(--dur-scene-1); } .sidebar.open { transform: translateX(0); visibility: visible; transition: transform var(--dur-scene-1) var(--ease-out); } .drawer-scrim { display: none; position: fixed; inset: 0 0 0 56px; z-index: 44; background: transparent; } .sidebar.open + .drawer-scrim { display: block; } .drawer-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--line-2); flex: none; } .side-scroll { flex: 1; overflow-y: auto; padding: 8px 10px 30px; } .drawer-close { flex: none; color: var(--text-3); } .badge { position: absolute; top: 1px; right: 1px; background: var(--red); color: #fff; min-width: 16px; height: 16px; font-size: 10px; font-weight: 700; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; animation: badgePulse 2.4s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } } .avatar-btn { background: none; border: none; cursor: pointer; padding: 3px; border-radius: 50%; } .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 600; letter-spacing: .02em; flex: none; } .avatar.all { background: var(--text-soft); width: 26px; height: 26px; font-size: 12px; } /* drawer rows: the card grammar (icon plates, calm labels), the workspace as a tile, boards with a glyph in the workspace colour, a pill on the active one */ .side-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; } .side-link { display: flex; width: 100%; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text-1); font-weight: 500; font-size: 13.5px; background: none; border: none; cursor: pointer; text-align: left; } .side-link > .ic { box-sizing: border-box; width: 24px; height: 24px; padding: 5px; border-radius: 7px; background: var(--surface-2); color: var(--text-2); flex: none; transition: background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .side-link:hover { background: var(--hover-ground); } .side-link:hover > .ic, .side-link.active > .ic { background: var(--brand-soft); color: var(--brand); } .side-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .side-link.ws-add { margin-top: 14px; color: var(--text-2); } .side-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); } .side-title { display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); } .side-title > .ic { color: var(--star); } .side-title.ws { padding: 6px 8px; border-radius: 8px; cursor: pointer; } .side-title.ws:hover { background: var(--hover-ground); } .ws-icon { width: 24px; height: 24px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 700; flex: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .ws-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); } .ws-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); } .ws-dots { display: inline-flex; padding: 3px; border-radius: 5px; color: var(--text-3); opacity: 0; transition: opacity var(--dur-micro-1) var(--ease-out); } .side-title.ws:hover .ws-dots, .side-title.ws:focus-visible .ws-dots { opacity: 1; } .side-board { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 12px; margin: 1px 0; color: var(--text-1); border-radius: 8px; font-size: 13.5px; } .side-board .board-glyph { width: 22px; height: 22px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--wc, var(--brand)); background: color-mix(in srgb, var(--wc, var(--brand)) 14%, transparent); } .side-board .sb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-board .sb-fav { color: var(--star); display: inline-flex; flex: none; } .side-board .sb-fav .ic { fill: currentColor; } .side-board:hover { background: var(--hover-ground); } .side-board.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .side-board.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--brand); } .side-add { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; color: var(--text-3); font-size: 12.5px; padding: 6px 10px 6px 14px; cursor: pointer; border-radius: 8px; } .side-add:hover { background: var(--hover-ground); color: var(--brand); } .main { flex: 1; overflow-y: auto; min-width: 0; display: flex; flex-direction: column; } .loading { padding: 60px; text-align: center; color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 13.5px; } .load-dots { display: inline-flex; gap: 8px; align-items: flex-end; height: 18px; } .load-dots i { width: 10px; height: 10px; border-radius: 50%; animation: dotBounce 1.15s var(--ease-in-out) infinite; } .load-dots i:nth-child(1) { background: var(--logo-1); } .load-dots i:nth-child(2) { background: var(--logo-2); animation-delay: .11s; } .load-dots i:nth-child(3) { background: var(--logo-3); animation-delay: .22s; } .load-dots i:nth-child(4) { background: var(--logo-4); animation-delay: .33s; } .load-dots i:nth-child(5) { background: var(--logo-5); animation-delay: .44s; } @keyframes dotBounce { 0%, 55%, 100% { transform: translateY(0); opacity: .55; } 28% { transform: translateY(-8px); opacity: 1; } } .empty-state::before { content: ""; display: block; width: 74px; height: 14px; margin: 0 auto var(--sp-4); background: radial-gradient(circle 5px at 7px 7px, var(--logo-1) 98%, transparent 100%), radial-gradient(circle 5px at 22px 7px, var(--logo-2) 98%, transparent 100%), radial-gradient(circle 5px at 37px 7px, var(--logo-3) 98%, transparent 100%), radial-gradient(circle 5px at 52px 7px, var(--logo-4) 98%, transparent 100%), radial-gradient(circle 5px at 67px 7px, var(--logo-5) 98%, transparent 100%); background-repeat: no-repeat; } .empty-state::before { opacity: .45; } .page-pad { padding: 26px 30px; max-width: 1100px; } .empty-state { text-align: center; padding: 70px 20px; color: var(--text-soft); } /* ------------------------------------------------- context header (board) */ .board-head { padding: var(--sp-4) var(--sp-6) var(--sp-3); position: sticky; top: 0; z-index: 20; background: var(--surface-0); border-bottom: 1px solid var(--line-2); transition: box-shadow var(--dur-micro-3) var(--ease-out), border-color var(--dur-micro-3) var(--ease-out); } .board-head.scrolled { border-bottom-color: var(--line-1); box-shadow: 0 10px 28px -14px rgba(20, 26, 43, .22); } [data-theme="dark"] .board-head.scrolled { box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .6); } .board-title-row { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; } .board-name { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); outline: none; border-radius: var(--r-2); padding: 2px 8px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-name:hover, .board-name:focus { background: var(--surface-2); } .board-right { margin-left: auto; display: flex; gap: var(--sp-1); align-items: center; flex: none; } .pill-count { background: var(--brand-soft); color: var(--brand); border-radius: var(--r-round); padding: 1px 7px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .board-switch-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); } .view-tabs { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--r-2); flex: none; } .view-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-1); color: var(--text-2); font-weight: var(--fw-semibold); font-size: 13px; white-space: nowrap; transition: background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .view-tab:hover { color: var(--text-1); } .view-tab.active { background: var(--surface-1); color: var(--text-1); box-shadow: var(--elev-1); } .board-tools { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; min-width: 0; } .board-filter { width: 170px; padding: 6px 10px; border-radius: var(--r-2); font-size: 13px; } .board-tools .tool-chip { gap: 4px; } .view-tab { position: relative; padding-right: 10px; } .view-tab.active { padding-right: 26px; } .vt-menu { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--r-1); color: var(--text-3); cursor: pointer; } .vt-menu:hover { background: var(--hover); color: var(--text-1); } .view-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-3); border-radius: var(--r-1); cursor: pointer; transition: background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .view-add:hover { background: var(--surface-1); color: var(--brand); } .board-table th.sorted .col-head { color: var(--brand); } .board-body { padding: 20px 26px 80px; flex: 1; } /* --------------------------------------------------------------- table */ /* Group header: a tinted band in the group's own colour so every group reads as its own section (and a new group arrives with its own hue), the title in display type, the count as a mono chip. Dark lifts the hue toward white so saturated data colours never sink into the night surfaces. */ .group { margin-bottom: 28px; animation: fadeUp .3s ease both; } .group-head { --gc: var(--gcolor); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; padding: 5px 8px 5px 4px; border-radius: var(--r-2); background: color-mix(in srgb, var(--gc) 7%, transparent); } [data-theme="dark"] .group-head { --gc: color-mix(in srgb, var(--gcolor) 66%, #fff); background: color-mix(in srgb, var(--gcolor) 17%, transparent); } .group-caret { background: none; border: none; cursor: pointer; color: var(--gc); padding: 0; flex: none; width: 26px; height: 26px; border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; } .group-caret:hover { background: color-mix(in srgb, var(--gc) 16%, transparent); } .group-title { color: var(--text-1); font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; outline: none; padding: 2px 6px; border-radius: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .group-title:hover, .group-title:focus { background: color-mix(in srgb, var(--gc) 14%, transparent); } .group-title:focus { white-space: normal; } .group-count { flex: none; margin-left: auto; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); padding: 0 4px; letter-spacing: .01em; } .group-count b { font-weight: 600; color: var(--text-1); } .group-count i { font-style: normal; color: var(--text-2); } .group-head .group-menu { flex: none; width: 28px; height: 28px; border-radius: var(--r-1); color: var(--text-2); opacity: .9; margin-right: 2px; } .group-head:hover .group-menu, .group-head .group-menu:focus-visible { opacity: 1; } .group-head .group-menu:hover { background: color-mix(in srgb, var(--gc) 16%, transparent); color: var(--text-1); } .group-head .icon-btn { color: var(--text-3); opacity: .7; } .group-head:hover .icon-btn { opacity: 1; } .table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--elev-1); --shade: 0; } .board-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 100%; background: var(--surface); } /* the name column stays put while a wide register scrolls sideways */ .board-table th.col-name, .board-table td.col-name { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--border-soft); } .item-row:hover td.col-name { background: var(--surface-2); } .board-table td.cell { white-space: nowrap; } .board-table th { font-size: 13px; font-weight: 600; color: var(--text-2); text-align: center; padding: 9px 6px; border-bottom: 1px solid var(--line-1); border-left: 1px solid var(--border-soft); white-space: nowrap; background: color-mix(in srgb, var(--surface-2) 55%, var(--surface-1)); } .board-table th.col-name { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface-1)); } .board-table th.col-name { text-align: left; padding-left: 16px; border-left: none; min-width: 260px; } .board-table th.col-add { width: 44px; border-left: 1px solid var(--border-soft); } .col-head { cursor: pointer; padding: 3px 8px; border-radius: 4px; } .col-head:hover { background: var(--hover); } .board-table td { border-bottom: 1px solid var(--border-soft); border-left: 1px solid var(--border-soft); padding: 0; height: 42px; text-align: center; position: relative; } .board-table td.col-name { text-align: left; border-left: none; } .board-table tr:last-child td { border-bottom: none; } .item-row { transition: background .12s; } .item-row:hover { background: var(--surface-2); } .item-row.dragging { opacity: .4; } .row-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--gcolor); } td.col-name { padding: 0 6px 0 16px !important; } .item-name { outline: none; padding: 3px 6px; border-radius: 4px; font-weight: 500; font-size: 13.5px; color: var(--text-1); display: inline-block; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .item-name:hover, .item-name:focus { background: var(--hover); white-space: normal; } .chat-btn { background: none; border: none; cursor: pointer; color: var(--cell-empty); font-size: 13px; padding: 3px 5px; border-radius: 4px; vertical-align: middle; } .chat-btn.has { color: var(--text-2); } .chat-btn.has span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-1); background: var(--surface-2); border-radius: var(--r-round); padding: 1px 6px; margin-left: 1px; } .chat-btn:hover { background: var(--hover); } .chat-btn span { font-size: 11px; margin-left: 2px; } /* name cell: title flexes, the open and options controls sit in fixed slots */ td.col-name .cn { display: flex; align-items: center; gap: 2px; min-width: 0; } td.col-name .item-name { flex: 1 1 auto; min-width: 0; max-width: none; display: block; } .chat-btn { flex: none; width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 26px; } .row-menu { flex: none; opacity: .75; width: 26px; height: 26px; border-radius: 7px; margin: 0; color: var(--text-2); transition: opacity var(--dur-micro-1) var(--ease-out), background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .item-row:hover .row-menu, .row-menu:focus-visible { opacity: 1; background: var(--hover); color: var(--text-1); } .row-menu:hover { box-shadow: inset 0 0 0 1px var(--border-soft); } .cell { cursor: pointer; font-size: 13px; } .cell:hover { box-shadow: inset 0 0 0 1px var(--primary); } .cell.inline { display: inline-flex; align-items: center; min-height: 30px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--border-soft); } /* Status language: dot-plus-label chip on tinted ground (never full-bleed). --lab is fed per-chip from the label's stored color. */ .status-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--text-1); font-weight: 600; font-size: 12.5px; padding: 4px 10px; border-radius: var(--r-1); background: color-mix(in srgb, var(--lab, var(--text-3)) 13%, transparent); max-width: 100%; } .status-pill::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-dot); background: var(--lab, var(--text-3)); flex: none; } .status-pill.unset { background: none; padding: 4px 6px; } .status-pill.unset::before { background: var(--cell-empty); opacity: .45; } .cell.inline .status-pill { min-height: 26px; } .status-pill.sm { font-size: 11px; padding: 2px 8px; } .cell-text { padding: 0 8px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-text.num { font-variant-numeric: tabular-nums; } .cell-people { display: inline-flex; align-items: center; } .cell-people .avatar:not(:only-child) { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3px var(--line-1); } .cell-people .avatar:first-child { margin-left: 0; } .cell-people .more { font-size: 11px; color: var(--text-soft); margin-left: 3px; } .cell-empty-people { color: var(--cell-empty); font-size: 15px; } .cell-date { font-size: 12.5px; font-variant-numeric: tabular-nums; } .cell-date.overdue { color: var(--red); font-weight: 700; } .cell-date.soon { color: var(--amber); font-weight: 700; } .cell-muted { display: inline-block; min-height: 1em; } .timeline-pill { background: var(--grad); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px; white-space: nowrap; } .cell-check { width: 20px; height: 20px; border: 2px solid var(--cell-empty); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; } .cell-check.on { background: var(--green); border-color: var(--green); } .cell-link { font-size: 13px; text-decoration: underline; } .cell-rating span { color: var(--cell-empty); font-size: 14px; } .cell-rating span.on { color: var(--accent-2); } .cell-rating span.on .ic, .rate-opt .ic { fill: currentColor; } /* small circular markers that replaced text bullets */ .dot-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .mode-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-soft); margin-right: 5px; vertical-align: 1px; } .ai-mode.live .mode-dot { background: #fff; } .add-row td { padding: 0 !important; } .add-item-input { width: 100%; border: none; background: transparent; padding: 10px 16px; border-radius: 0; color: var(--text); font-size: 13px; } .add-item-input::placeholder { color: var(--text-soft); } .add-item-input:focus { background: var(--surface-2); } .summary-row td { height: 30px; background: var(--surface-2); } .summary-row td.col-name, .summary-row td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface-2); } .dist-bar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; margin: 0 8px; } .dist-seg.empty { background: var(--cell-empty); } .dist-seg { min-width: 4px; } .sum-cell { font-size: 12px; font-weight: 700; color: var(--text-soft); } .add-group { margin-top: 6px; color: var(--text-soft); } .drop-hint { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--primary-soft) !important; } /* --------------------------------------------------------------- kanban */ .kanban { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 20px; } .kanban-col { min-width: 250px; width: 250px; flex: none; } .kanban-col-head { color: var(--text-1); font-weight: 700; padding: 9px 12px 8px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: var(--r-2) var(--r-2) 0 0; border-top: 3px solid var(--lab, var(--line-1)); } .kanban-col-head::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-dot); background: var(--lab, var(--text-3)); flex: none; } .kanban-col-head > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanban-count { background: var(--surface-1); color: var(--text-2); border-radius: var(--r-round); padding: 0 8px; font-size: 12px; margin-left: auto; flex: none; } .kanban-list { background: var(--surface-2); border-radius: 0 0 8px 8px; padding: 10px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; } .kanban-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 8px; padding: 12px; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.07); transition: transform .15s, box-shadow .15s; } .kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .kanban-card.dragging { opacity: .4; } .kanban-card-name { font-weight: 600; margin-bottom: 8px; } .kanban-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .kanban-group { font-size: 11px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanban-meta { display: inline-flex; align-items: center; gap: 6px; flex: none; } .kanban-meta .cell-date { font-size: 11px; color: var(--text-3); } .kanban-files { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--text-3); } .kanban-empty { color: var(--text-3); font-size: 12px; text-align: center; padding: 26px 0; border: 1.5px dashed var(--border-soft); border-radius: 8px; } /* ------------------------------------------------------------- calendar */ .calendar { animation: fadeUp .3s ease both; } .cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .cal-head h3 { margin: 0; min-width: 170px; text-align: center; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; } .cal-dow { background: var(--surface-2); padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-soft); } .cal-cell { background: var(--surface); min-height: 96px; padding: 6px; } .cal-cell.empty { background: var(--surface-2); } .cal-cell.today { background: var(--primary-soft); } .cal-day { font-size: 12px; font-weight: 700; color: var(--text-soft); margin-bottom: 4px; } .cal-cell.today .cal-day { color: var(--primary); } .cal-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: none; color: var(--text-1); background: color-mix(in srgb, var(--lab, var(--brand)) 14%, transparent); font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 4px; margin-bottom: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lab, var(--brand)); flex: none; } .cal-item:hover { background: color-mix(in srgb, var(--lab, var(--brand)) 26%, transparent); } .cal-cell.past .cal-day { color: var(--text-3); } .cal-more { font-size: 10.5px; color: var(--text-soft); background: none; border: none; cursor: pointer; padding: 2px 4px; } .cal-more:hover { color: var(--brand); } .cal-note { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; } /* ------------------------------------------------------------- timeline */ .timeline-view { animation: fadeUp .3s ease both; } .tl-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 14px 20px; } .tl-header { display: flex; margin-bottom: 8px; align-items: flex-end; } .tl-corner { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; } .tl-day { flex: none; font-size: 10px; color: var(--text-soft); text-align: center; border-left: 1px dashed var(--border-soft); } .tl-day.weekend { color: var(--text-3); opacity: .7; } .tl-day.today { color: var(--primary); font-weight: 800; border-left-color: var(--primary); } .tl-row { display: flex; align-items: center; height: 38px; } .tl-label { width: 220px; flex: none; font-size: 13px; font-weight: 500; padding-right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-track { position: relative; height: 28px; background: repeating-linear-gradient(90deg, transparent 0, transparent 100%); } .tl-bar { position: absolute; top: 2px; height: 24px; border: none; border-radius: 12px; background: var(--lab, var(--brand)); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; text-align: left; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .12s; } .tl-bar:hover { transform: scaleY(1.12); } /* ------------------------------------------------------------ dashboard */ .legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; } .legend-row b { margin-left: auto; } .legend { flex: 1; min-width: 140px; } .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; } .dot.lg { width: 14px; height: 14px; } .wl-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; } .wl-name { width: 110px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-bar { flex: 1; height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; } .wl-fill { height: 100%; border-radius: 6px; transition: width .5s ease; } .stat-pair { display: flex; gap: 14px; margin-bottom: 12px; } .stat { flex: 1; background: var(--surface-2); border-radius: 10px; padding: 14px; text-align: center; } .stat b { font-size: 26px; display: block; } .stat span { font-size: 12px; color: var(--text-soft); } .stat.bad b { color: var(--red); } .stat.warn b { color: var(--amber, #b26a00); } .legend-row .muted { margin-left: 6px; } .mini-item { display: flex; width: 100%; align-items: center; gap: 8px; background: none; border: none; padding: 6px 4px; cursor: pointer; font-size: 13px; color: var(--text); border-radius: 6px; text-align: left; } .mini-item:hover { background: var(--hover); } /* ------------------------------------------------------- popover & menu */ .popover { position: fixed; z-index: 90; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 180px; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-micro-2) var(--ease-out), transform var(--dur-micro-2) var(--ease-out); max-height: 70vh; overflow-y: auto; } .popover.show { opacity: 1; transform: none; } .menu { display: flex; flex-direction: column; min-width: 190px; } .menu-item { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--text); text-align: left; width: 100%; } .menu-item:hover { background: var(--hover); } .menu-item.danger { color: var(--red); } .menu-item.on { background: var(--primary-soft); color: var(--primary); } .menu-item.on > .ic:last-child:not(:first-child) { color: var(--primary); margin-left: auto; } .menu-item:disabled { opacity: .4; cursor: default; } .menu-item:disabled:hover { background: none; } .menu-item b { font-weight: 700; } .menu-sep { height: 1px; background: var(--border-soft); margin: 6px 4px; } .menu-row { display: flex; gap: 6px; padding: 4px 10px 8px; flex-wrap: wrap; } .chip-btn { border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-round); cursor: pointer; transition: background var(--dur-micro-1) var(--ease-out), border-color var(--dur-micro-1) var(--ease-out); } .chip-btn:hover { border-color: var(--brand); color: var(--brand); } .chip-btn.on { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); } .col-menu, .cols-menu { min-width: 240px; } .col-menu .edit-box, .menu .edit-box { padding: 4px 4px 8px; } .menu .hint, .edit-box .hint { font-size: 11px; color: var(--text-3); padding: 0 2px; } .check-row { cursor: pointer; } .check-row input { width: 16px; height: 16px; flex: none; margin: 0; padding: 0; accent-color: var(--brand); } .check-row .cr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cols-menu { max-height: 70vh; overflow-y: auto; } .edit-row { display: flex; gap: 6px; align-items: center; justify-content: flex-end; } .dd-add { margin-top: 4px; } .dd-add input { font-size: 12.5px; } .label-opt.on { box-shadow: inset 0 0 0 2px var(--brand); } .color-dot.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); } .menu-label { font-size: 11px; font-weight: 800; color: var(--text-soft); padding: 8px 10px 4px; letter-spacing: .5px; text-transform: uppercase; } .menu.cols { max-height: 320px; overflow-y: auto; } .menu-colors { display: flex; gap: 6px; padding: 8px 10px; flex-wrap: wrap; } .color-dot { width: 22px; height: 22px; border-radius: 6px; border: none; cursor: pointer; } .color-dot:hover { transform: scale(1.15); } .me-head { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; } .label-menu { display: flex; flex-direction: column; gap: 5px; min-width: 190px; } .label-opt { display: flex; align-items: center; gap: 8px; border: none; color: var(--text-1); font-weight: 600; padding: 8px 10px; border-radius: var(--r-2); cursor: pointer; font-size: 13px; text-align: left; background: color-mix(in srgb, var(--lab, var(--text-3)) 12%, transparent); transition: background var(--dur-micro-1) var(--ease-out); } .label-opt::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-dot); background: var(--lab, var(--text-3)); flex: none; } .label-opt:hover { background: color-mix(in srgb, var(--lab, var(--text-3)) 24%, transparent); } .label-opt.plain { background: var(--surface-2); color: var(--text); } .label-opt.plain::before { display: none; } .label-edit { background: none; border: none; color: var(--text-soft); font-size: 12px; cursor: pointer; padding: 7px; border-radius: 5px; } .label-edit:hover { background: var(--hover); } .label-row { display: flex; gap: 8px; margin-bottom: 8px; } input[type=color] { width: 44px; padding: 2px; height: 36px; } .label-row .lab-text { flex: 1; } .people-menu { display: flex; flex-direction: column; min-width: 220px; max-height: 300px; overflow-y: auto; } .people-opt { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 7px 9px; border-radius: 6px; font-size: 13.5px; color: var(--text); text-align: left; } .people-opt:hover { background: var(--hover); } .people-opt.on { background: var(--primary-soft); } .edit-box { display: flex; flex-direction: column; gap: 8px; min-width: 220px; } .edit-box input { width: 100%; } .timeline-edit label { margin-bottom: 4px; } .rating-menu { display: flex; flex-direction: column; gap: 4px; } .rate-opt { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--accent-2); text-align: left; padding: 5px 9px; border-radius: 5px; } .rate-opt:hover { background: var(--hover); } .search-pop { min-width: 320px; } .search-results .menu-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --------------------------------------------------------------- modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(23, 25, 44, .55); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .18s; } .modal-overlay.show { opacity: 1; } .modal { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 26px; width: min(480px, 94vw); max-height: 88vh; overflow-y: auto; transform: translateY(10px); transition: transform .18s; } .modal-overlay.show .modal { transform: none; } .modal.wide { width: min(700px, 94vw); } .modal.wide.tall { width: min(860px, 96vw); } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .modal-foot.left { justify-content: flex-start; } /* ------------------------------------------------------------ item card */ .item-card h3 { outline: none; padding: 2px 6px; border-radius: 6px; } .item-card h3:hover, .item-card h3:focus { background: var(--hover); } .ic-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 6px 0; } .ic-meta .btn { margin-left: auto; } .ic-group { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--gcolor, var(--text-2)); } .item-values { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 20px; } .iv-row { display: flex; align-items: center; gap: 12px; } .iv-label { width: 120px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--text-soft); } .modal { position: relative; } .modal-x { position: absolute; top: 12px; right: 12px; color: var(--text-soft); z-index: 2; } .item-attach.drop-hover { outline: 1.5px dashed var(--brand); outline-offset: -6px; background: var(--brand-soft); } .attach-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .attach-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .attach-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .attach-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; } .attach-row:hover { background: var(--hover); } .attach-name { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .attach-name:hover { color: var(--primary); text-decoration: underline; } .attach-row .icon-btn { margin-left: auto; } .attach-empty { margin: 8px 2px 2px; } .cell-files { display: inline-flex; align-items: center; gap: 5px; color: var(--text-soft); font-weight: 600; } .cell-files.empty { opacity: 0; } .cell:hover .cell-files.empty { opacity: .7; } .item-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; } .item-tab { background: none; border: none; padding: 9px 14px; cursor: pointer; font-weight: 600; color: var(--text-soft); border-bottom: 2px solid transparent; font-size: 13.5px; } .item-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .update-composer { display: flex; gap: 8px; margin-bottom: 16px; } .update-composer textarea { flex: 1; resize: vertical; } .update { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .update-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .update-body { line-height: 1.55; white-space: pre-wrap; } .like-btn { background: none; border: 1px solid var(--border-soft); border-radius: 12px; cursor: pointer; font-size: 12px; padding: 3px 10px; margin-top: 8px; color: var(--text-soft); } .like-btn.on { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); } .activity-list { max-height: 340px; overflow-y: auto; } .activity-list.tall { max-height: 55vh; } .act-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-soft); font-size: 13px; } .act-row span:nth-child(2) { flex: 1; } /* ---------------------------------------------------------- automations */ .auto-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .auto-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 10px; padding: 11px 14px; font-size: 13.5px; } .auto-row.off { opacity: .5; } .auto-text { flex: 1; line-height: 1.5; } .switch { position: relative; width: 36px; height: 20px; flex: none; margin: 0; } .switch input { display: none; } .switch span { position: absolute; inset: 0; background: var(--line-strong); border-radius: 10px; cursor: pointer; transition: background .18s; } .switch span::after { content: ""; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: left .18s; } .switch input:checked + span { background: var(--green); } .switch input:checked + span::after { left: 18px; } .auto-builder { background: var(--surface-2); border-radius: 12px; padding: 16px; margin-top: 10px; } .auto-line { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; font-weight: 600; } .auto-line select, .auto-line input { padding: 6px 9px; } /* ------------------------------------------------------------ templates */ .tpl-ai { display: flex; gap: 8px; margin-bottom: 18px; } .tpl-ai input { flex: 1; } .tpl-cat h4 { margin: 16px 0 10px; color: var(--text-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .6px; } .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); } .tpl-card { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; transition: transform .15s, box-shadow .15s; } .tpl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .tpl-card p { font-size: 12px; color: var(--text-soft); margin: 0; flex: 1; line-height: 1.45; } .tpl-cols { display: flex; gap: 4px; flex-wrap: wrap; } .tpl-cols span { background: var(--surface); border: 1px solid var(--border-soft); font-size: 10.5px; padding: 2px 7px; border-radius: 9px; color: var(--text-soft); } .tpl-actions { display: flex; gap: 6px; align-items: center; margin-top: 8px; } .tpl-card.tpl-lib { border-color: var(--brand); background: linear-gradient(180deg, var(--brand-soft), var(--surface-2) 70%); } .tpl-chip { display: inline-block; margin-left: 8px; vertical-align: 2px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--surface-1); padding: 2px 7px; border-radius: var(--r-round); } /* -------------------------------------------------------- notifications */ .notif-pop { min-width: 340px; max-width: 90vw; } .notif-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 10px; } .notif-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; background: none; border: none; text-align: left; cursor: pointer; padding: 10px 8px; border-radius: 8px; color: var(--text); } .notif-row:hover { background: var(--hover); } .notif-row.unread { background: var(--primary-soft); } .notif-text { flex: 1; font-size: 13px; line-height: 1.45; } .notif-icon { font-size: 16px; } /* --------------------------------------------------------------- my work */ .mywork-group { margin-top: 22px; } .mywork-group h4 { color: var(--text-soft); } .mywork-row { display: flex; align-items: center; gap: 14px; width: 100%; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 9px; padding: 12px 16px; cursor: pointer; margin-bottom: 8px; text-align: left; transition: transform .12s, box-shadow .12s; } .mywork-row:hover { transform: translateX(3px); box-shadow: var(--shadow); } .mw-name { flex: 1; font-weight: 600; color: var(--text); } /* ----------------------------------------------------------------- admin */ .admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); margin: 14px 0 22px; } .admin-tab { padding: 9px 16px; font-weight: 600; color: var(--text-soft); border-bottom: 2px solid transparent; } .admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .admin-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 22px; margin-bottom: 18px; } .admin-card.narrow { max-width: 440px; } .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .card-head h4 { margin: 0; } .invite-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); } .invite-link { background: var(--surface-2); border: 1px dashed var(--border); border-radius: 8px; padding: 12px; font-family: monospace; font-size: 12px; word-break: break-all; margin-top: 10px; } .storage-line { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; font-size: 13px; font-weight: 600; } .storage-bar { flex: 1; height: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; } .storage-fill { height: 100%; background: var(--brand); border-radius: 6px; min-width: 2px; } /* ----------------------------------------------------------- legal pages */ .legal-page { max-width: 760px; margin: 0 auto; padding: 60px 24px 90px; } .legal-page h1 { font-family: var(--display, inherit); font-size: 40px; margin-bottom: 6px; } .legal-page h3 { margin: 26px 0 8px; font-size: 18px; } .legal-page p, .legal-page li { line-height: 1.65; color: var(--text-soft); font-size: 14.5px; } .legal-page ul { padding-left: 20px; margin: 8px 0; } .legal-page li { margin: 5px 0; } .legal-page b { color: var(--text); } .auth-legal { margin: 10px 0 2px; text-align: center; } /* -------------------------------------------------------------- AI panel */ .ai-panel { position: fixed; top: 52px; right: 0; bottom: 0; width: 0; z-index: 50; background: var(--surface); border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; overflow: hidden; transition: width .25s ease; box-shadow: -8px 0 30px rgba(0,0,0,.08); } .ai-panel.open { width: min(380px, 92vw); } .main { transition: margin-right .25s ease; } @media (min-width: 901px) { body.ai-open .main { margin-right: 380px; } } .ai-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); } .ai-title { font-weight: 800; font-size: 15px; } .ai-mode { font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--surface-2); padding: 3px 9px; border-radius: 10px; white-space: nowrap; } .ai-mode.live { color: #fff; background: var(--green); } .ai-head .icon-btn { margin-left: auto; } .ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .ai-msg { display: flex; gap: 8px; align-items: flex-end; } .ai-msg.user { justify-content: flex-end; } .ai-bubble { background: var(--surface-2); border-radius: 14px 14px 14px 4px; padding: 10px 14px; max-width: 85%; line-height: 1.55; font-size: 13.5px; } .ai-msg.user .ai-bubble { background: var(--primary); color: var(--brand-fg); border-radius: 14px 14px 4px 14px; } .ai-empty { text-align: center; margin: auto 0; color: var(--text-soft); } .ai-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; } .ai-chip { background: var(--primary-soft); color: var(--primary); border: none; border-radius: 16px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .ai-chip:hover { background: var(--primary); color: #fff; } .ai-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-soft); } .ai-input textarea { flex: 1; resize: none; } /* --------------------------------------------------------------- toasts */ #toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { background: var(--text); color: var(--bg); padding: 11px 22px; border-radius: 10px; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; max-width: 90vw; } .toast.show { opacity: 1; transform: none; } .toast.success { background: var(--green); color: #fff; } .toast.error { background: var(--red); color: #fff; } .toast.notif { background: var(--primary); color: #fff; } /* ------------------------------------------------------------- icons */ .ic { flex: none; vertical-align: -3.5px; } h3 .ic { vertical-align: -2.5px; margin-right: 4px; color: var(--primary); } .view-tab { display: inline-flex; align-items: center; gap: 6px; } .view-tab .ic, .btn .ic { opacity: .85; } .chat-btn .ic { vertical-align: -2px; } .board-glyph { display: inline-flex; color: var(--text-soft); } .icon-btn .ic { vertical-align: -4px; } .icon-btn.star.on .ic { fill: currentColor; } .notif-icon { display: inline-flex; color: var(--primary); margin-top: 2px; } .ai-avatar { display: inline-flex; color: var(--brand); } .ai-title { display: inline-flex; align-items: center; gap: 7px; } .ai-title .ic { color: var(--brand); } .menu-item .ic { color: var(--text-soft); } .menu-item.danger .ic { color: var(--red); } .side-link .ic { color: var(--text-soft); } .side-link.active .ic { color: var(--primary); } /* theme toggle shows the mode you'd switch to: moon in light, sun in dark */ .theme-btn .ic + .ic { display: none; } [data-theme="dark"] .theme-btn .ic { display: none; } [data-theme="dark"] .theme-btn .ic + .ic { display: inline-block; } /* ------------------------------------------------- premium quality floor */ ::selection { background: var(--selection-bg); } a:focus-visible, button:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-2); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } * { scrollbar-width: thin; scrollbar-color: var(--line-1) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--line-1); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* ----------------------------------------------------------- animations */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 55% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); } } /* ----------------------------------------------------------- responsive */ @media (max-width: 1100px) { .act-label { display: none; } } @media (max-width: 1020px) { .auth-page { grid-template-columns: 1fr; } .auth-side { display: none; } } @media (max-width: 700px) { .rail { width: 48px; } .rail-btn { width: 38px; height: 38px; } .sidebar { left: 48px; width: min(288px, calc(100vw - 48px)); } .drawer-scrim { inset: 0 0 0 48px; } .vt-label { display: none; } .view-tab.active .vt-label { display: inline; } .board-head { padding: var(--sp-2) var(--sp-3); } .board-title-row { flex-wrap: wrap; row-gap: var(--sp-2); } .board-name { font-size: var(--fs-lg); flex: 1 1 auto; min-width: 0; } .board-right { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; gap: 4px; } .board-right .btn { padding: 6px 8px; } .board-switch-row { flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); } .view-tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; } .view-tabs::-webkit-scrollbar { display: none; } .board-tools { margin-left: 0; flex: 1 1 100%; } .board-search { flex: 1 1 auto; min-width: 0; } .board-search .board-filter { flex: 1; width: 100%; min-width: 0; } #qf-btn { flex: none; padding: 0 9px; } .board-body { padding: 12px 10px 80px; } .board-table th.col-name { min-width: 180px; } .page-pad { padding: 18px 14px; } } @media (max-width: 900px) { .mk-header nav { gap: 10px; } .mk-header nav a.mk-nav-link { display: none; } .mk-footer-inner { grid-template-columns: 1fr 1fr; } .board-body { padding: 14px; } .tl-label { width: 130px; } } /* ------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------- motion & life (P5) */ /* (theme cross-fade removed in phase-28: the switch is a single paint) */ /* The logo is the heartbeat: sequential column pulse on live traffic. */ .logo-mark.beat circle { animation: logoBeat .55s var(--ease-spring); transform-origin: center; transform-box: fill-box; } .logo-mark.beat circle:nth-child(n+6) { animation-delay: .06s; } .logo-mark.beat circle:nth-child(n+11) { animation-delay: .12s; } .logo-mark.beat circle:nth-child(n+16) { animation-delay: .18s; } .logo-mark.beat circle:nth-child(n+21) { animation-delay: .24s; } @keyframes logoBeat { 0%, 100% { opacity: 1; transform: scale(1); } 35% { opacity: .5; transform: scale(1.3); } } /* Live arrival: a teammate's edit sweeps in and settles. */ .cell { position: relative; } .cell.live-arrive::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 15%, var(--brand-soft) 50%, transparent 85%); border-bottom: 2px solid var(--brand); opacity: 0; animation: liveSweep .9s var(--ease-out); } @keyframes liveSweep { 0% { opacity: 0; transform: translateX(-25%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(25%); } } /* ------------------------------------------------- command palette (P5) */ #cmd-palette .palette-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 120; } #cmd-palette .palette { position: fixed; left: 50%; top: 14vh; transform: translateX(-50%); width: min(560px, 92vw); z-index: 121; border-radius: var(--r-4); background: var(--surface-1); box-shadow: var(--elev-3); border: 1px solid var(--line-1); overflow: hidden; animation: paletteIn var(--dur-micro-3) var(--ease-settle); } @keyframes paletteIn { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.98); } } .palette-input-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-2); color: var(--text-3); } .palette-input-row input { flex: 1; border: none; background: none; font-size: var(--fs-md); padding: 4px 0; } .palette-input-row input:focus { border: none; } .pr-kbd { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line-1); border-radius: var(--r-1); padding: 2px 6px; flex: none; } .palette-list { max-height: 46vh; overflow-y: auto; padding: var(--sp-2); } .palette-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 9px 10px; border-radius: var(--r-2); color: var(--text-1); font-size: var(--fs-sm); } .palette-row .ic { color: var(--text-3); flex: none; } .palette-row .pr-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette-row .pr-hint { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); flex: none; } .palette-row:hover, .palette-row.sel { background: var(--brand-soft); } .palette-row.sel .ic { color: var(--brand); } .pr-none { padding: var(--sp-4); color: var(--text-3); text-align: center; } /* -------------------------------------------------- audit mode (P7) */ #audit-view { position: fixed; inset: 0; z-index: 200; overflow-y: auto; background: var(--surface-0); } .audit-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--surface-1); border-bottom: 1px solid var(--line-1); box-shadow: var(--elev-1); } .audit-bar-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-right: auto; } .audit-doc { max-width: 900px; margin: 0 auto; padding: var(--sp-8) var(--sp-5) var(--sp-16); } .audit-head { border-bottom: 2px solid var(--text-1); padding-bottom: var(--sp-4); margin-bottom: var(--sp-6); } .audit-brand .logo-word { display: none; } .audit-brand .logo-mark { width: 30px; height: auto; } .audit-doc h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-4xl); letter-spacing: var(--ls-display); margin: var(--sp-2) 0 var(--sp-4); } .audit-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2) var(--sp-4); } .audit-meta span { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); } .audit-doc section { margin-bottom: var(--sp-8); } .audit-doc h2 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); border-bottom: 1px solid var(--line-1); padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); } .audit-no { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--brand); border: 1px solid var(--line-1); border-radius: var(--r-1); padding: 1px 7px; } .audit-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); } .audit-table th { text-align: left; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); font-weight: var(--fw-medium); padding: 6px 8px; border-bottom: 1px solid var(--line-1); } .audit-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; } .audit-table .ad-item { font-weight: 600; } .audit-table .ad-mono { font-family: var(--font-mono); font-size: var(--fs-2xs); white-space: nowrap; } .audit-foot { border-top: 1px solid var(--line-1); padding-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-3); } @media print { body.audit-open .app, body.audit-open #toasts, body.audit-open .modal-overlay, body.audit-open #cmd-palette, .no-print { display: none !important; } body.audit-open { overflow: visible !important; } #audit-view { position: static !important; overflow: visible !important; /* print is always Studio-on-white regardless of screen theme */ --surface-0: #ffffff; --surface-1: #ffffff; --surface-2: #f2f2f2; --text-1: #141a2b; --text-2: #333c50; --text-3: #5a6478; --line-1: #8a8a8a; --line-2: #cccccc; --brand: #0f62b8; } .audit-doc { max-width: none; padding: 0; } .audit-doc section { break-inside: auto; } .audit-table tr { break-inside: avoid; } } /* ------------------------------------------- attachments preview (P13) */ .attach-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 58px auto auto; grid-template-areas: "badge name ver dl del" "badge meta meta meta meta"; column-gap: 8px; row-gap: 2px; align-items: center; padding: 8px 6px; border-radius: var(--r-2); } .attach-row:hover { background: var(--surface-2); } .attach-row .attach-name { grid-area: name; } .attach-row .attach-ver { grid-area: ver; width: 100%; } .attach-row .attach-ver-chip { grid-area: ver; justify-self: start; } .attach-row > a.icon-btn { grid-area: dl; } .attach-row > button.icon-btn { grid-area: del; } .attach-row .muted.sm { grid-area: meta; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-2xs); } .modal.wide { max-width: min(920px, 92vw); width: 100%; } .att-modal h3 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-3); } .att-preview { display: block; max-width: 100%; max-height: 64vh; margin: 0 auto; border-radius: var(--r-2); } .att-preview.pdf { width: 100%; height: 64vh; border: 1px solid var(--line-2); } .att-nopreview { text-align: center; padding: var(--sp-10) 0; color: var(--text-3); } .attach-name { border: none; background: none; cursor: pointer; color: var(--brand); font-weight: var(--fw-semibold); font-size: var(--fs-sm); padding: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-name:hover { text-decoration: underline; } .attach-ver { width: 64px; flex: none; font-family: var(--font-mono); font-size: var(--fs-2xs); padding: 3px 7px; border-radius: var(--r-1); text-align: center; } .attach-ver-chip { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-2); background: var(--surface-2); border-radius: var(--r-1); padding: 2px 7px; flex: none; } /* row-reorder drop hint */ .item-row.drop-above td { border-top: 2px solid var(--brand) !important; } /* column reorder */ th[data-colid] { cursor: grab; } th[data-colid].col-drop { box-shadow: inset 3px 0 0 var(--brand); } .cell-files.has { display: inline-flex; align-items: center; gap: 4px; } /* person filter clear */ .pf-clear { margin-left: -6px; } /* item card: two columns, the right side is files + a living viewer */ .modal.wide { max-width: min(980px, 94vw); } .ic-viewer { border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--surface-2); min-height: 0; flex: 1; overflow: hidden; display: flex; flex-direction: column; } .ic-viewer-empty { margin: auto; text-align: center; color: var(--text-3); } .ic-viewer-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-2); background: var(--surface-1); } .ic-viewer-head b { flex: 1; min-width: 0; font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ic-viewer .att-preview { max-height: none; flex: 1; object-fit: contain; min-height: 0; padding: var(--sp-2); } .ic-viewer .att-preview.pdf { flex: 1; height: auto; min-height: 0; border: none; padding: 0; } .ic-viewer .att-nopreview { margin: auto; } .attach-name.viewing { text-decoration: underline; } /* rail logo: same life as the marketing mark (hover wave; heartbeat via .beat) */ .rail-logo:hover .logo-mark circle { animation: logoWave .65s ease both; } .rail-logo:hover .logo-mark circle:nth-child(n+6) { animation-delay: .07s; } .rail-logo:hover .logo-mark circle:nth-child(n+11) { animation-delay: .14s; } .rail-logo:hover .logo-mark circle:nth-child(n+16) { animation-delay: .21s; } .rail-logo:hover .logo-mark circle:nth-child(n+21) { animation-delay: .28s; } /* -------------------------------------------------- snapshots (P7) */ .snap-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 44vh; overflow-y: auto; margin: var(--sp-3) 0; } .snap-row { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--line-2); border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-1); } .snap-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .snap-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .snap-meta { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-3); } #snap-name { flex: 1; min-width: 0; } /* ------------------------------------------------ density modes (P7) */ [data-density="compact"] .board-table td { height: 30px; } [data-density="compact"] .board-table th { padding-top: 4px; padding-bottom: 4px; } [data-density="compact"] .cell.inline { min-height: 24px; } [data-density="compact"] .status-pill { padding-top: 2px; padding-bottom: 2px; } [data-density="compact"] .kanban-card { padding: 8px 10px; } [data-density="compact"] .kanban-list { gap: 5px; } [data-density="compact"] .side-link, [data-density="compact"] .side-board { padding-top: 4px; padding-bottom: 4px; } [data-density="compact"] .board-head { padding-top: var(--sp-2); padding-bottom: var(--sp-1); } [data-density="compact"] .board-body { padding-top: 10px; } [data-density="compact"] .group { margin-bottom: var(--sp-4); } [data-density="compact"] .summary-row td { height: 22px; } /* ------------------------------------------------------------ phase-27 polish */ /* cells: content centred in every column, same rhythm on every row */ td.cell { text-align: center; } td.cell > * { vertical-align: middle; } td.cell .cell-people { display: inline-flex; justify-content: center; } td.cell .status-pill { margin: 0 auto; } /* toolbar: search on the left with the primary action, tools with the header actions */ .board-search { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; height: 34px; margin: 0; font-weight: 400; border-radius: var(--r-2); border: 1px solid var(--border-soft); background: var(--surface-1); color: var(--text-3); transition: box-shadow var(--dur-micro-1) var(--ease-out), border-color var(--dur-micro-1) var(--ease-out); } .board-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } .board-search .board-filter { border: none; background: transparent; padding: 0; margin: 0; width: 200px; box-shadow: none; outline: none; height: 100%; line-height: 1; align-self: stretch; } .board-search > .ic { flex: none; } .board-tools { margin-left: 0; align-items: center; } .board-tools .btn { height: 34px; white-space: nowrap; } .load-more { display: block; margin: 16px auto 0; } .board-switch-row { justify-content: space-between; } /* popovers and modals: solid, lifted */ .popover, .modal { box-shadow: 0 20px 48px -16px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.15); } [data-theme="dark"] .popover, [data-theme="dark"] .modal { box-shadow: 0 24px 56px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(160,180,225,.08); } /* ============================================================ phase-28 polish Register table: every cell honours its column width (--cw is set per cell by the renderer), status chips share one width per column, long text clips with a hover peek instead of stretching the table, typed file glyphs carry per-kind counts, and the sticky name column casts a shade over content that slides under it. */ /* text: the column is exactly its width (fixed layout); anything longer clips with a peek — widen the column from its menu when ids need room */ .board-table td.cell { width: var(--cw); } .board-table .cell-text { display: inline-block; max-width: calc(var(--cw, 200px) - 12px); padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-1); vertical-align: middle; } .board-table .cell-text.left { display: block; width: calc(var(--cw, 200px) - 16px); max-width: none; margin: 0 auto; padding: 0 2px; } .board-table .cell-text.left { text-align: left; } .board-table .cell-text:empty { min-height: 1em; } .cell.inline .cell-text { display: inline-block; width: auto; max-width: 100%; white-space: normal; line-height: 1.45; padding: 4px 2px; text-align: left; } /* status / priority: one width per column, dot + label centred */ .board-table .status-pill { width: calc(var(--cw, 140px) - 20px); min-width: 0; justify-content: center; box-sizing: border-box; padding: 5px 8px; font-size: 12.5px; letter-spacing: .005em; } .board-table .status-pill.unset { background: transparent; border: 1px dashed var(--line-1); padding: 4px 8px; } .board-table .status-pill.unset::before { opacity: .35; } .board-table .status-pill > span, .board-table .status-pill { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* files: typed document glyphs, count under each kind */ .cell-files.has { display: inline-flex; align-items: flex-start; justify-content: center; gap: 9px; padding: 3px 4px; } .fglyph { --fg-fill: #fff; overflow: visible; } .fglyph .fg-band { fill: var(--fb); } .fglyph .fg-body { fill: var(--fg-fill); stroke: var(--fb); } .fglyph .fg-fold { fill: color-mix(in srgb, var(--fb) 22%, var(--surface-1)); stroke: var(--fb); } .fglyph .fg-line { stroke: color-mix(in srgb, var(--fb) 45%, transparent); } .fglyph text { fill: #fff; font-family: var(--font-body); font-weight: 800; letter-spacing: .02em; } [data-theme="dark"] .fglyph text { fill: #fff; } [data-theme="dark"] .fglyph { --fg-fill: #f4f6fa; } .fglyph .fg-fold { fill: #e9ecf2; } .fglyph .fg-line { stroke: rgba(60, 70, 90, .28); } [data-density="compact"] .fglyph { width: 16px; height: 19px; } [data-density="compact"] .cell-files.has { padding: 0 4px; } .attach-row .fglyph { grid-area: badge; } .att-nopreview .fglyph { display: block; margin: 0 auto var(--sp-3); } /* sticky name column: shade that appears as content slides under it */ .board-table th.col-name, .board-table td.col-name { box-shadow: none; } .board-table th.col-name::after, .board-table td.col-name::after { content: ""; position: absolute; top: 0; bottom: 0; right: -18px; width: 18px; pointer-events: none; opacity: var(--shade, 0); background: linear-gradient(90deg, rgba(20, 26, 43, .07), rgba(20, 26, 43, .025) 45%, rgba(20, 26, 43, 0)); transition: opacity var(--dur-micro-2) var(--ease-out); } [data-theme="dark"] .board-table th.col-name::after, [data-theme="dark"] .board-table td.col-name::after { background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .07) 50%, rgba(0, 0, 0, 0)); } .board-table th.col-name, .board-table td.col-name { box-shadow: inset -1px 0 0 var(--line-2); } .table-wrap.scrolled .board-table th.col-name, .table-wrap.scrolled .board-table td.col-name { box-shadow: inset -1px 0 0 var(--line-1); } .summary-row td.col-name::after, .summary-row td:first-child::after { display: none; } /* hover peek for clipped text: the whole note, without widening the table */ .peek { position: fixed; z-index: 95; max-width: min(440px, calc(100vw - 16px)); background: var(--surface-1); color: var(--text-1); border: 1px solid var(--line-1); border-radius: var(--r-3); padding: 10px 12px; font-size: 13px; line-height: 1.5; box-shadow: var(--elev-3); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity var(--dur-micro-2) var(--ease-out), transform var(--dur-micro-2) var(--ease-out); white-space: pre-wrap; word-break: break-word; } .peek.show { opacity: 1; transform: none; } .peek .peek-col { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; } /* rows */ .item-row:hover td { background: var(--surface-2); } .item-row:hover td.col-name { background: var(--surface-2); } .board-table td.cell:hover { box-shadow: inset 0 0 0 1.5px var(--brand); z-index: 1; } .cell-empty-people, .cell-files.empty { color: var(--text-3); } .cell:hover .cell-empty-people, .cell:hover .cell-files.empty { color: var(--brand); } .add-item-input { height: 40px; } .add-item-input:focus { background: var(--brand-soft); } .summary-row td { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface-1)); } .summary-row td.col-name, .summary-row td:first-child { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface-1)); } .dist-bar { border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-2); } .add-group { margin-top: 2px; } .board-body { padding-top: 18px; } /* chrome consistency */ .board-name { font-size: var(--fs-2xl); } .pill-count { font-family: var(--font-mono); } #qf-btn.on { background: var(--brand-soft); color: var(--brand); } .view-tab { font-size: 13px; } .board-filter::placeholder { color: var(--text-3); } .icon-btn.star { transition: transform var(--dur-micro-2) var(--ease-spring); } .icon-btn.star.on:hover { transform: scale(1.12); } /* phone: the register stays a register, just tighter */ @media (max-width: 700px) { .group-head { padding: 4px 6px 4px 2px; gap: 6px; } .group-title { font-size: 15px; } .group-count i { display: none; } .board-table td { height: 44px; } .board-table th.col-name { min-width: 0; width: 236px; } .board-table th.col-name, .board-table td.col-name { position: static; box-shadow: none; } .board-table th.col-name::after, .board-table td.col-name::after { display: none; } .board-table td.col-name .cn { width: 220px; gap: 0; } .board-table .chat-btn { width: 34px; } .board-table .row-menu { width: 22px; } .board-table td.col-name .item-name { font-size: 14px; } .row-menu { opacity: .55; } .board-tools .btn.primary { width: 40px; justify-content: center; padding: 0; flex: none; } .peek { max-width: calc(100vw - 16px); } } .ch-window { width: min(560px, calc(100vw - 24px)); height: min(600px, calc(100vh - 100px)); display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-4); box-shadow: var(--elev-3); animation: paletteIn var(--dur-micro-3) var(--ease-settle); } .ch-list { border-right: 1px solid var(--line-2); background: var(--surface-0); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 8px; } .ch-list-head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 8px 10px; } .ch-list-head b { font-family: var(--font-display); font-size: 16px; letter-spacing: -.01em; } .ch-list-head span { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; } .ch-list-label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); padding: 12px 8px 4px; } .ch-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: none; background: none; border-radius: var(--r-2); cursor: pointer; text-align: left; color: var(--text-1); min-width: 0; } .ch-row:hover { background: var(--hover-ground); } .ch-row.sel { background: var(--surface-1); box-shadow: var(--elev-1); } .ch-row .avatar { position: relative; flex: none; } .ch-row .avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); border: 2px solid var(--surface-0); } .ch-row.sel .avatar::after { border-color: var(--surface-1); } .ch-row.on .avatar::after { background: var(--ok); } .ch-row.off .avatar { filter: saturate(.4); opacity: .8; } .ch-room-ic { width: 30px; height: 30px; border-radius: var(--r-2); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); } .ch-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ch-text b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-text span { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-unread { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-round); background: var(--brand); color: var(--brand-fg); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .ch-time { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); } .ch-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .ch-thread-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--line-2); } .ch-thread-title { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; } .ch-thread-title b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-thread-title span { font-size: 11.5px; color: var(--text-3); } .ch-back { display: none; } .ch-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 6px; display: flex; flex-direction: column; } .ch-empty { margin: auto; text-align: center; color: var(--text-3); font-size: 13px; } .ch-empty p { margin: 8px 0 0; } .ch-day { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; } .ch-day::before, .ch-day::after { content: ""; flex: 1; height: 1px; background: var(--line-2); } .ch-msg { display: flex; gap: 10px; padding: 3px 6px; margin: 2px -6px 0; border-radius: var(--r-2); align-items: flex-start; } .ch-msg:hover { background: var(--hover-ground); } .ch-msg.cont { margin-top: 0; } .ch-msg .avatar { flex: none; margin-top: 2px; } .ch-gutter { width: 30px; flex: none; font-family: var(--font-mono); font-size: 9.5px; color: transparent; text-align: right; padding-top: 4px; } .ch-msg.cont:hover .ch-gutter { color: var(--text-3); } .ch-body { min-width: 0; flex: 1; } .ch-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; } .ch-meta b { font-size: 13px; } .ch-msg.mine .ch-meta b { color: var(--brand); } .ch-meta span { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); } .ch-line { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .ch-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line-2); background: var(--surface-1); } .ch-compose textarea { flex: 1; resize: none; min-height: 38px; max-height: 120px; padding: 9px 12px; border-radius: var(--r-3); background: var(--surface-2); border-color: transparent; line-height: 1.4; font-size: 13.5px; } .ch-compose textarea:focus { border-color: var(--brand); background: var(--surface-1); } .ch-send { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: var(--r-3); flex: none; } .ch-send .ic { opacity: 1; } @media (max-width: 700px) { .ch-window { grid-template-columns: 1fr; width: calc(100vw - 24px); height: min(560px, calc(100vh - 90px)); } .ch-window.view-list .ch-thread { display: none; } .ch-window.view-thread .ch-list { display: none; } .ch-back { display: inline-flex; } .ch-list { border-right: none; } } /* column header: sort caret on hover */ .board-table th { position: relative; } .th-in { display: flex; align-items: center; justify-content: center; gap: 0; min-width: 0; padding: 0 2px; } .th-in .col-head { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 6px; } /* the sort control takes no room until the header is hovered or sorted, so a narrow title keeps its full width and the two never share a pixel */ .th-sort { flex: none; width: 0; height: 20px; margin-left: 0; border: none; border-radius: var(--r-1); background: transparent; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; overflow: hidden; transition: width var(--dur-micro-2) var(--ease-out), margin var(--dur-micro-2) var(--ease-out), opacity var(--dur-micro-1) var(--ease-out), background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .board-table th:hover .th-sort, .board-table th.sorted .th-sort { width: 20px; margin-left: 2px; } .board-table th.sorted .th-sort { background: var(--brand-soft); } .board-table th:hover .th-sort, .board-table th.sorted .th-sort { opacity: 1; } .th-sort:hover { background: var(--hover-ground); color: var(--brand); } .board-table th.sorted .th-sort { color: var(--brand); } /* hover cards: person and files */ .peek.peek-card { padding: 12px 14px; max-width: min(380px, calc(100vw - 16px)); } .peek-person { display: flex; align-items: center; gap: 12px; } .pp-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .pp-text b { font-size: 14px; } .pp-text span { font-size: 12px; color: var(--text-3); } .pp-text .pp-mail { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); } .pp-state { margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); flex: none; } .pp-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); } .pp-state.on { color: var(--ok); } .pp-state.on i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); } .peek-files { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .pf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "g n v" "g m m"; column-gap: 8px; align-items: center; padding: 4px 0; } .pf-row .fglyph { grid-area: g; } .pf-name { grid-area: n; font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-row .attach-ver-chip { grid-area: v; } .pf-meta { grid-area: m; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-more { font-size: 11.5px; color: var(--text-3); padding-top: 4px; } /* files view */ .files-view { animation: fadeUp .3s ease both; } .fv-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .fv-search .board-filter { width: 220px; } .fv-kinds { display: flex; gap: 6px; flex-wrap: wrap; } .fv-mode .view-tab { padding: 5px 8px; } .fv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .fv-list { display: flex; flex-direction: column; gap: 4px; } .fv-card { position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 14px 14px 12px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--surface-1); color: var(--text-1); cursor: pointer; box-shadow: var(--elev-1); transition: transform var(--dur-micro-2) var(--ease-out), box-shadow var(--dur-micro-2) var(--ease-out), border-color var(--dur-micro-2) var(--ease-out); } .fv-card:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--line-1); } .fv-card .fglyph { flex: none; margin-top: 1px; } .fv-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .fv-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fv-doc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fv-doc .dot-mark { width: 7px; height: 7px; flex: none; } .fv-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fv-dl { position: absolute; right: 8px; top: 8px; opacity: 0; color: var(--text-3); } .fv-card:hover .fv-dl { opacity: 1; } .fv-list .fv-card { padding: 8px 12px; align-items: center; box-shadow: none; border-radius: var(--r-2); } .fv-list .fv-card:hover { transform: none; } .fv-list .fv-text { flex-direction: row; align-items: center; gap: 14px; } .fv-list .fv-name { flex: 1 1 40%; } .fv-list .fv-doc { flex: 1 1 30%; } .fv-list .fv-meta { flex: 1 1 30%; } .fv-list .fv-dl { position: static; opacity: .6; } @media (max-width: 700px) { .fv-list .fv-text { flex-direction: column; align-items: flex-start; gap: 2px; } .fv-search .board-filter { width: 140px; } } /* chat: take back a line */ .ch-del { position: absolute; right: 6px; top: 4px; opacity: 0; color: var(--text-3); } .ch-msg { position: relative; } .ch-msg:hover .ch-del { opacity: .8; } .ch-del:hover { color: var(--danger); opacity: 1; } /* ============================================================ phase-30 life Tooltips that explain the chrome, a rainbow trail while a page loads, the logo's slow wave, breathing presence, a dock that tucks itself away, real document thumbnails, and a calmer quick-filter card. */ /* tooltips: dark on paper, lifted on the night ground; slide in from the anchor */ #tip { position: fixed; z-index: 130; pointer-events: none; max-width: 280px; background: var(--text-1); color: var(--surface-1); font: 500 12px/1.35 var(--font-body); padding: 6px 10px; border-radius: 7px; box-shadow: var(--elev-2); width: max-content; text-align: center; opacity: 0; transform: translateY(4px); transition: opacity var(--dur-micro-2) var(--ease-out), transform var(--dur-micro-2) var(--ease-out); } #tip.right { transform: translateX(-4px); } #tip.show { opacity: 1; transform: none; } #tip kbd { font-family: var(--font-mono); font-size: 10px; opacity: .7; margin-left: 8px; } [data-theme="dark"] #tip { background: var(--surface-3); color: var(--text-1); box-shadow: var(--elev-3); } /* rainbow trail: a 2px line of the mark's five hues runs while a page loads */ #trail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 140; pointer-events: none; background: linear-gradient(90deg, #ff3229, #ffa00a, #ffcc00, #00b842, #0089eb, #ff3229); background-size: 240% 100%; opacity: 0; transition: opacity .45s ease; box-shadow: 0 0 12px rgba(0, 137, 235, .4); } html.nav-busy #trail { opacity: 1; animation: trailMove 2.2s linear infinite; transition-delay: 0s; } @keyframes trailMove { to { background-position: -240% 0; } } /* a teammate's edit sweeps in wearing the fan's colours, faintly */ .cell.live-arrive::after { background: linear-gradient(100deg, transparent 8%, rgba(255, 50, 41, .16) 28%, rgba(255, 204, 0, .16) 44%, rgba(0, 184, 66, .16) 60%, rgba(0, 137, 235, .16) 76%, transparent 92%); } /* group count: the number catches the light once when it changes */ .group-count.bump b { background: linear-gradient(90deg, var(--text-1) 0 34%, #ff3229 42%, #ffa00a 47%, #ffcc00 52%, #00b842 57%, #0089eb 62%, var(--text-1) 70% 100%); background-size: 320% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: countShine 1.5s ease-out both; } @keyframes countShine { from { background-position: 100% 0; } to { background-position: 0% 0; } } @keyframes breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); } 50% { transform: scale(1.18); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 9%, transparent); } } .ch-row.on .avatar::after { animation: breathe 3.4s var(--ease-in-out) infinite; box-shadow: 0 0 0 2px var(--surface-0); } /* the item-label header: only the word is editable, the cell keeps its shade */ .th-label { display: inline-block; min-width: 40px; outline: none; padding: 2px 6px; border-radius: 4px; } .th-label:hover, .th-label:focus { background: var(--hover-ground); } /* document thumbnails: a small page of the real file, the glyph until it arrives */ .file-mini { position: relative; display: inline-block; width: var(--tw, 22px); height: var(--th, 28px); flex: none; } .file-mini .fm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 2.5px; background: #fff; opacity: 0; box-shadow: 0 0 0 1px var(--line-1), 0 1px 2px rgba(20, 26, 43, .16); } .file-mini .fm-img.loaded { opacity: 1; animation: thumbPop .5s var(--ease-spring) both; } .file-mini .fglyph { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur-micro-2) var(--ease-out); } .file-mini .fm-img.loaded + .fglyph { opacity: 0; } .file-mini.nothumb .fglyph { position: absolute; inset: 0; } [data-theme="dark"] .file-mini .fm-img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 3px rgba(0, 0, 0, .5); } @keyframes thumbPop { from { opacity: 0; transform: scale(.6) translateY(4px); } 60% { opacity: 1; } to { transform: none; } } .cell-files.has:hover .file-mini .fm-img.loaded { box-shadow: 0 0 0 1px var(--brand), 0 3px 8px rgba(20, 26, 43, .22); } .attach-row .file-mini { grid-area: badge; } .fv-card .file-mini { flex: none; } .pf-row .file-mini { grid-area: g; } /* quick filters: one calm card — search on top, sections with room to breathe */ .qf-popover { padding: 0; overflow: hidden; } .qf-pop { width: min(600px, calc(100vw - 32px)); display: flex; flex-direction: column; max-height: 72vh; } .qf-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line-2); flex: none; } .qf-head .qf-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .qf-head .qf-t b { font-family: var(--font-display); font-size: 16px; letter-spacing: -.01em; } .qf-head .qf-t span { font-size: 12px; color: var(--text-3); white-space: nowrap; } .qf-search { flex: 1; min-width: 120px; margin-left: auto; height: 32px; } .qf-search .board-filter { width: 100%; font-size: 13px; } .qf-head .btn { flex: none; } .qf-body { overflow-y: auto; padding: 6px 18px 14px; } .qf-section { padding: 12px 0 10px; border-bottom: 1px solid var(--line-2); } .qf-section:last-child { border-bottom: none; } .qf-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .qf-sec-head .qf-ic { width: 22px; height: 22px; border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-3); flex: none; } .qf-sec-head b { font-size: 13px; font-weight: 600; } .qf-sec-head .qf-sel { font-size: 11.5px; color: var(--brand); font-weight: 600; } .qf-sec-head .qf-x { margin-left: auto; color: var(--text-3); font-size: 11.5px; background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .qf-sec-head .qf-x:hover { background: var(--hover-ground); color: var(--text-1); } .qf-chips { display: flex; flex-wrap: wrap; gap: 8px; } .qf-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 9px; border: 1px solid transparent; border-radius: var(--r-round); background: var(--surface-2); color: var(--text-1); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background var(--dur-micro-1) var(--ease-out), border-color var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .qf-chip:hover { background: var(--surface-3); } .qf-chip.on { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--brand); font-weight: 600; } .qf-chip.empty { color: var(--text-3); background: transparent; border-color: var(--line-1); border-style: dashed; } .qf-chip.empty.on { color: var(--brand); border-style: solid; background: var(--brand-soft); } .qf-chip b { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--text-3); } .qf-chip.on b { color: var(--brand); } .qf-chip .qf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lab, var(--text-3)); flex: none; } .qf-chip .avatar { margin-left: -3px; } .qf-chip .fglyph { margin-left: -2px; } .qf-chip.more { background: transparent; color: var(--text-2); border-color: var(--line-2); } .qf-chip.more:hover { border-color: var(--line-strong); } .qf-none { padding: 24px 0; text-align: center; color: var(--text-3); font-size: 13px; } @media (max-width: 700px) { .qf-head { flex-wrap: wrap; padding: 14px; } .qf-search { flex: 1 1 100%; margin-left: 0; } .qf-body { padding: 4px 14px 12px; } } /* ============================================================ phase-31 polish Presence lives in the chrome (rail + Team button) and the chat is a side panel; the register's file cell is a small stack of real pages; icons answer every click; the board description sits behind an info control. */ @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .78; } } .pp-state.on i, .ch-row.on .avatar::after, .rail-dot, .team-dot { animation: breathe 3.4s var(--ease-in-out) infinite; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); } /* rail: team chat entry with unread count and a live dot */ .rail-dot { position: absolute; right: 7px; bottom: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--surface-1); } /* board header: the Team control carries who is here */ #team-btn { position: relative; gap: 6px; } #team-btn .team-stack { display: inline-flex; align-items: center; } #team-btn .team-stack .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface-0); } #team-btn .team-stack .avatar:first-child { margin-left: 0; } .team-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; } .team-dot.none { background: var(--text-3); animation: none; box-shadow: none; } #team-btn .pill-count.unread { background: var(--brand-fill); color: #fff; } /* team popover: everyone, who is online, message or filter */ .team-pop { min-width: 300px; padding: 4px; } .team-pop .tp-head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px 6px; } .team-pop .tp-head b { font-family: var(--font-display); font-size: 15px; } .team-pop .tp-head span { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); } .tp-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-2); cursor: pointer; width: 100%; border: none; background: none; text-align: left; color: var(--text-1); } .tp-row:hover { background: var(--hover-ground); } .tp-row .avatar { position: relative; flex: none; } .tp-row .avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); border: 2px solid var(--surface-1); } .tp-row.on .avatar::after { background: var(--ok); } .tp-row.off .avatar { filter: saturate(.4); opacity: .8; } .tp-row .tp-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .tp-row .tp-text b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-row .tp-text span { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-row .tp-act { display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--dur-micro-1) var(--ease-out); } .tp-row:hover .tp-act, .tp-row:focus-within .tp-act { opacity: 1; } .tp-row .tp-act .icon-btn.on { color: var(--brand); background: var(--brand-soft); opacity: 1; } .tp-row .ch-unread { flex: none; } .tp-room .ch-room-ic { width: 30px; height: 30px; } /* chat: a side panel, like the assistant */ .chat-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 0; z-index: 52; overflow: hidden; border-left: 1px solid var(--line-1); box-shadow: -12px 0 40px -20px rgba(0, 0, 0, .35); transition: width var(--dur-scene-1) var(--ease-out); } .chat-panel.open { width: min(560px, 100vw); } @media (min-width: 1280px) { body.chat-open .main { margin-right: 560px; } } .chat-panel .ch-window { width: min(560px, 100vw); height: 100%; border: none; border-radius: 0; box-shadow: none; background: transparent; animation: none; } .chat-panel .ch-list { background: transparent; } .chat-panel .ch-compose { background: transparent; } .ch-unread { background: var(--brand-fill); color: #fff; } .ch-send { background: var(--brand-fill); } /* file cell: the newest pages, slightly fanned, no numbers */ .cell-files.has { gap: 0; padding: 4px 6px; align-items: center; position: relative; isolation: isolate; } /* the pages stack among themselves, never over the sticky column */ .cell-files.has .file-mini { margin-left: -20px; transition: transform var(--dur-micro-2) var(--ease-out), margin var(--dur-micro-2) var(--ease-out); } .cell-files.has .file-mini:first-child { margin-left: 0; z-index: 3; } .cell-files.has .file-mini:nth-child(2) { transform: translate(2px, -2px); z-index: 2; } .cell-files.has .file-mini:nth-child(3) { transform: translate(4px, -4px); z-index: 1; } .cell-files.has:hover .file-mini { transform: none; margin-left: 3px; } .cell-files.has:hover .file-mini:first-child { margin-left: 0; } .cell-files.has .file-more { transition: opacity var(--dur-micro-2) var(--ease-out); opacity: .7; } .cell-files.has:hover .file-more { opacity: 1; } .cell-files.has .file-more { margin-left: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); } /* board description: behind an info control, not in the title row */ .board-info { color: var(--text-3); } .board-info.has { color: var(--text-2); } .info-pop { max-width: 360px; padding: 4px 6px 2px; } .info-pop p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; } .info-pop p.empty { color: var(--text-3); font-style: italic; } /* icons answer the click: a spring, and a quarter turn for a plus */ .ic { transform-origin: 50% 50%; } @keyframes icSpin { 0% { transform: rotate(-90deg) scale(.7); } 100% { transform: none; } } @media (max-width: 700px) { #team-btn .team-stack { display: none; } .chat-panel.open { width: 100vw; } } @media (prefers-reduced-motion: reduce) { .app .logo-mark circle, .ch-row.on .avatar::after, .pp-state.on i, .rail-dot, .team-dot, #trail, .group-count.bump b, .ic, .load-dots i, .team-stack .avatar { animation: none !important; } } /* ============================================================ phase-32 polish One card grammar for every popover, icons that move on hover, the file stack that rests as one page, the Team control that arrives and pops, rainbow row hover, glass tags, bouncing loading dots. */ /* every card: the filter card's grammar (icon plates, calm labels, glass) */ .popover { padding: 8px; border-radius: 12px; } .menu-item { padding: 8px 10px; border-radius: 8px; gap: 10px; font-size: 13.5px; } .menu-item > .ic:first-child, .people-opt > .ic:first-child, .label-edit > .ic:first-child, .palette-row > .ic:first-child, .tp-row .ch-room-ic .ic { box-sizing: border-box; width: 24px; height: 24px; padding: 5px; border-radius: 7px; flex: none; background: var(--surface-2); color: var(--text-2); transition: background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .menu-item:hover > .ic:first-child, .palette-row:hover > .ic:first-child, .palette-row.sel > .ic:first-child { background: var(--brand-soft); color: var(--brand); } .menu-item.danger > .ic:first-child { background: var(--danger-soft); color: var(--danger); } .menu-item.on > .ic:first-child { background: var(--brand-soft); color: var(--brand); } .menu-item:disabled > .ic:first-child { background: transparent; } .menu-label { font: 600 12.5px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-2); padding: 10px 10px 6px; } .menu-sep { margin: 6px 6px; } .menu > .edit-box:first-child, .col-menu > .edit-box:first-child, .cols-menu > .edit-box:first-child { padding: 4px 4px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line-2); } .edit-box input, .edit-box select { height: 34px; border-radius: 8px; } .menu .hint, .edit-box .hint { padding: 4px 2px 0; } .chip-btn { height: 28px; border-radius: var(--r-round); background: var(--surface-2); border-color: transparent; font-weight: 500; padding: 0 11px; } .chip-btn:hover { background: var(--surface-3); color: var(--text-1); } .chip-btn.on { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--brand); font-weight: 600; } .label-opt { border-radius: 8px; padding: 8px 10px; } .people-opt { padding: 7px 10px; border-radius: 8px; gap: 10px; } .notif-row { padding: 9px 10px; border-radius: 8px; } .me-head { padding: 8px 10px 10px; } .menu-colors { padding: 6px 10px 8px; } .color-dot { border-radius: 7px; } .info-pop .menu-label { padding-top: 6px; } .team-pop .tp-head { padding: 8px 10px 8px; } /* icons move when their control is hovered — one spring, and a few icons that do what they are: the bell rings, the bolt jumps, the sun turns */ .ic { transform-origin: 50% 50%; } button:hover > .ic, a:hover > .ic, label:hover > .ic, .view-tab:hover > .ic, .rail-btn:hover > .ic, .icon-btn:hover > .ic, .btn:hover > .ic, .qf-sec-head:hover .qf-ic > .ic, .menu-item:hover > .ic:first-child, .theme-btn:hover .ic { animation: icHover .5s var(--ease-spring); } button:hover > .ic[data-ic="bell"] { animation: icRing .7s var(--ease-in-out); } button:hover > .ic[data-ic="bolt"] { animation: icZap .5s var(--ease-spring); } button:hover > .ic[data-ic="plus"], .view-add:hover > .ic { animation: icSpin .48s var(--ease-spring); } .theme-btn:hover .ic, button:hover > .ic[data-ic="sun"], button:hover > .ic[data-ic="moon"] { animation: icTurn .6s var(--ease-spring); } button:hover > .ic[data-ic="star"], .icon-btn.star:hover > .ic { animation: icTwinkle .6s var(--ease-spring); } button:hover > .ic[data-ic="spark"], button:hover > .ic[data-ic="sparkle"] { animation: icPulse .6s var(--ease-in-out); } button:hover > .ic[data-ic="clock"] { animation: icTick .55s var(--ease-spring); } button:hover > .ic[data-ic="message"], a:hover > .ic[data-ic="message"] { animation: icBob .5s var(--ease-spring); } button:hover > .ic[data-ic="sliders"] { animation: icSlide .5s var(--ease-spring); } button:hover > .ic[data-ic="search"], label:hover > .ic[data-ic="search"] { animation: icPeek .5s var(--ease-spring); } @keyframes icHover { 0% { transform: none; } 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: none; } } @keyframes icRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } } @keyframes icZap { 0%, 100% { transform: none; } 40% { transform: translateY(-3px) scale(1.2); } } @keyframes icTurn { 0% { transform: rotate(0); } 50% { transform: rotate(40deg) scale(1.15); } 100% { transform: rotate(0); } } @keyframes icTwinkle { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(72deg) scale(1.25); } 100% { transform: rotate(72deg) scale(1); } } @keyframes icPulse { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.3); opacity: .7; } } @keyframes icTick { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-18deg); } 70% { transform: rotate(12deg); } } @keyframes icBob { 0%, 100% { transform: none; } 40% { transform: translateY(-3px) scale(1.12); } } @keyframes icSlide { 0%, 100% { transform: none; } 40% { transform: translateX(3px) scale(1.1); } } @keyframes icPeek { 0%, 100% { transform: none; } 40% { transform: translate(-2px, 2px) scale(1.15); } } /* the Team control arrives with its people and pops on hover */ #team-btn .team-stack .avatar { animation: teamIn .55s var(--ease-spring) both; transition: transform var(--dur-micro-2) var(--ease-spring), margin var(--dur-micro-2) var(--ease-out); } #team-btn .team-stack .avatar:nth-child(2) { animation-delay: .08s; } #team-btn .team-stack .avatar:nth-child(3) { animation-delay: .16s; } @keyframes teamIn { from { opacity: 0; transform: translateX(-10px) scale(.5); } to { opacity: 1; transform: none; } } #team-btn:hover .team-stack .avatar { transform: translateY(-1px) scale(1.1); margin-left: -2px; } #team-btn:hover .team-stack .avatar:first-child { margin-left: 0; } #team-btn .team-dot { transition: transform var(--dur-micro-2) var(--ease-spring); } #team-btn:hover .team-dot { transform: scale(1.3); } /* the hovered cell wears a ring in the mark's five hues (a gradient cannot be a box-shadow, so it is a masked gradient layer just inside the cell edge); rows keep their plain hover */ @property --ring-a { syntax: ""; inherits: false; initial-value: 0deg; } .board-table td.cell:hover { box-shadow: none; } .board-table td.cell:hover::before, .board-table td.col-name:hover::before { content: ""; position: absolute; inset: 0 0 -1px -1px; z-index: 1; pointer-events: none; border-radius: 0; padding: 1px; background: conic-gradient(from var(--ring-a), var(--logo-1), var(--logo-2), var(--logo-3), var(--logo-4), var(--logo-5), var(--logo-1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: .9; animation: ringSpin 2.6s linear infinite; } [data-theme="dark"] .board-table td.cell:hover::before, [data-theme="dark"] .board-table td.col-name:hover::before { opacity: 1; } @keyframes ringSpin { to { --ring-a: 360deg; } } /* tags: glass chips with a dot in one of the mark's hues; overflow ellipsises, "+N" stays */ .cell-tags { display: inline-flex; gap: 4px; align-items: center; justify-content: center; padding: 0 6px; max-width: 100%; overflow: hidden; } .tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 7px; min-width: 0; border-radius: 7px; font: 500 11.5px/1 var(--font-body); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--surface-1) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); } .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tc, var(--brand)); flex: none; } .tag.more { flex: none; color: var(--text-3); font-family: var(--font-mono); font-size: 10.5px; padding: 0 7px; } .tag.more::before { display: none; } /* ============================================================ phase-35 polish Drawer header, group-menu header, the labels editor, the automations card. */ .drawer-head { padding: 12px 12px 10px; } .drawer-search { flex: 1; min-width: 0; height: 36px; border-radius: 10px; margin: 0; } .drawer-search .board-filter { width: 100%; } .sidebar { width: 304px; } @media (max-width: 700px) { .sidebar { width: calc(100vw - 48px); } } /* a card header for menus: colour dot, title in display type, a mono count */ .menu-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line-2); min-width: 0; } .menu-head .dot-mark { width: 9px; height: 9px; flex: none; } .menu-head b { font-family: var(--font-display); font-size: 14px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-head span { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); } .group-pop { min-width: 250px; } .menu-colors { gap: 8px; padding: 4px 10px 10px; } .color-dot { width: 22px; height: 22px; border-radius: 50%; transition: transform var(--dur-micro-2) var(--ease-spring); } .color-dot.on { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--text-1); } [data-theme="dark"] .color-dot.on { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--text-1); } /* modal header block */ .modal-head { margin-bottom: 14px; } .modal-head h3 { margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .modal-head p { margin: 0; line-height: 1.5; } /* labels editor: handle, swatch, name, remove — rows that can be dragged */ .label-rows { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; } .label-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 8px 6px 4px; border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; transition: box-shadow var(--dur-micro-2) var(--ease-out), background var(--dur-micro-2) var(--ease-out); } .label-row.dragging { background: var(--surface-1); border-color: var(--line-1); box-shadow: var(--elev-2); position: relative; z-index: 2; } .lab-handle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 28px; color: var(--text-3); cursor: grab; border-radius: 6px; touch-action: none; flex: none; } .lab-handle:hover { color: var(--text-1); background: var(--hover-ground); } .label-row.dragging .lab-handle { cursor: grabbing; } .lab-swatch { position: relative; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--lab); cursor: pointer; margin: 0; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--surface-1); } .lab-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: none; } .label-row .lab-text { flex: 1; min-width: 0; height: 34px; border-radius: 8px; background: var(--surface-1); border-color: transparent; } .label-row .lab-text:focus { border-color: var(--brand); } .lab-remove { flex: none; color: var(--text-3); } .lab-remove:hover { color: var(--danger); } /* automations */ .auto-list { gap: 6px; margin: 4px 0 18px; } .auto-row { background: var(--surface-1); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; gap: 12px; } .auto-row.off { opacity: .6; } .auto-ic { box-sizing: border-box; width: 28px; height: 28px; padding: 6px; border-radius: 8px; flex: none; display: inline-flex; background: var(--brand-soft); color: var(--brand); } .auto-runs { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); white-space: nowrap; } .auto-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 0; color: var(--text-3); font-size: 13px; } .auto-empty p { margin: 0; } .auto-builder { background: var(--surface-2); border-radius: 12px; padding: 16px 16px 14px; margin-top: 0; } .auto-builder h4 { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-2); margin: 0 0 12px; letter-spacing: 0; } .auto-line { font-weight: 500; gap: 8px; margin-bottom: 10px; } .auto-kw { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); width: 42px; flex: none; } .auto-line select, .auto-line input { height: 34px; border-radius: 8px; background: var(--surface-1); border-color: transparent; padding: 0 10px; } .auto-line select:focus, .auto-line input:focus { border-color: var(--brand); } .auto-builder .btn.primary { margin-top: 4px; } .switch span { background: var(--line-strong); } .switch input:checked + span { background: var(--ok); } /* ============================================================ phase-36 polish Dashboard widgets (drag by the header, a dashed slot, cards glide), the collapsed group band that answers hover, tags that fan out. */ .dash { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: stretch; } .dw { grid-column: span 2; min-height: 150px; display: flex; flex-direction: column; min-width: 0; background: var(--surface-1); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--elev-1); animation: fadeUp .3s ease backwards; contain: content; /* backwards, not both: a held final keyframe would pin the transform and block the hover lift */ transition: transform var(--dur-micro-2) var(--ease-out), box-shadow var(--dur-micro-2) var(--ease-out), border-color var(--dur-micro-2) var(--ease-out); } .dw:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--line-1); } body.dragging-widget .dw { transition: none; transform: none; } .dw-m { grid-column: span 3; } .dw-l { grid-column: span 6; } .dw-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 4px 12px; cursor: grab; user-select: none; } .dw-head h4 { flex: 1; margin: 0; font: 600 13px/1.3 var(--font-body); color: var(--text-1); letter-spacing: 0; } .dw-grip { display: inline-flex; color: var(--text-3); opacity: .45; transition: opacity var(--dur-micro-1) var(--ease-out); } .dw:hover .dw-grip { opacity: 1; } .dw-menu { opacity: 0; color: var(--text-3); transition: opacity var(--dur-micro-1) var(--ease-out); } .dw:hover .dw-menu, .dw-menu:focus-visible { opacity: 1; } .dw-body { flex: 1; padding: 6px 16px 16px; min-width: 0; display: flex; flex-direction: column; } .dw-body > .mini-list { margin-top: auto; } .dw-hint, .dw-note { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; } .dw-note { margin-top: 8px; } /* lifted card and the slot it left behind (the same dashed language as an unset status) */ .dw-lift { z-index: 120; box-shadow: var(--elev-3); transform: scale(1.02) rotate(.4deg); cursor: grabbing; opacity: .97; animation: none; pointer-events: none; } .dw-ghost { border: 1.5px dashed var(--line-1); background: color-mix(in srgb, var(--surface-2) 45%, transparent); box-shadow: none; animation: none; } body.dragging-widget { cursor: grabbing; user-select: none; } body.dragging-widget .dw-head { cursor: grabbing; } .dw-add { align-items: center; justify-content: center; flex-direction: row; gap: 8px; cursor: pointer; border: 1.5px dashed var(--line-1); background: transparent; box-shadow: none; color: var(--text-3); font: 500 13px var(--font-body); transition: color var(--dur-micro-1) var(--ease-out), border-color var(--dur-micro-1) var(--ease-out); } .dw-add:hover { color: var(--brand); border-color: var(--brand); } /* KPI tiles */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .kpi { --kc: var(--brand); position: relative; padding: 12px 14px 12px 16px; border-radius: 10px; background: var(--surface-2); min-width: 0; transition: background var(--dur-micro-2) var(--ease-out); } .kpi::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--kc); transition: width var(--dur-micro-2) var(--ease-out), top var(--dur-micro-2) var(--ease-out), bottom var(--dur-micro-2) var(--ease-out); } .kpi:hover { background: var(--surface-3); } .kpi:hover::before { width: 4px; top: 6px; bottom: 6px; } .kpi.ok { --kc: var(--ok); } .kpi.warn { --kc: var(--warn); } .kpi.bad { --kc: var(--danger); } .kpi-n { display: block; font: 700 26px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-1); } .kpi.bad .kpi-n { color: var(--danger); } .kpi-l { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-top: 2px; } .kpi-s { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi-single { --kc: var(--brand); margin-bottom: 8px; } .kpi-single.ok { --kc: var(--ok); } .kpi-single.warn { --kc: var(--warn); } .kpi-single .kpi-n { color: var(--kc); } /* bars, lists, stats used by several widgets */ .cbar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 6px 0 10px; } .cbar i { display: block; height: 100%; background: var(--ok); border-radius: 4px; transition: width .5s var(--ease-out); } .cbar-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; margin-top: 4px; } .sbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 6px 0 10px; background: var(--surface-2); } .sbar i { display: block; min-width: 0; } .mini-list { display: flex; flex-direction: column; gap: 1px; } .mini-item { gap: 9px; padding: 6px 6px; border-radius: 8px; } .mini-item .dot-mark { width: 8px; height: 8px; flex: none; } .mini-item .dot-mark.bad { color: var(--danger); } .mini-item .dot-mark.warn { color: var(--warn); } .mini-item .mi-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-item .mi-meta { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); } .stat { border-radius: 10px; padding: 12px 10px; } .stat b { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; } .stat.warn b { color: var(--warn); } .wl-row { padding: 4px 0; gap: 10px; } .wl-row b { min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; } .wl-name { width: auto; flex: 0 0 40%; } .wl-fill { transition: width .6s var(--ease-out); } .legend-row b { min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; } .legend-row .muted { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; } .stat { flex: 1; } .stat-pair { gap: 10px; } .mini-item:hover { background: var(--hover-ground); } .legend-row { font-size: 12.5px; padding: 2px 0; } @media (max-width: 1100px) { .dw, .dw-m { grid-column: span 3; } .dw-l { grid-column: span 6; } } /* wide and ultrawide: twelve columns; small cards a quarter, then a sixth */ @media (min-width: 1500px) { .dash { grid-template-columns: repeat(12, minmax(0, 1fr)); } .dw { grid-column: span 3; } .dw-m { grid-column: span 4; } .dw-l { grid-column: span 6; } } @media (min-width: 2200px) { .dw { grid-column: span 2; } .dw-m { grid-column: span 3; } .dw-l { grid-column: span 4; } } .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } @media (max-width: 700px) { .dw, .dw-m, .dw-l { grid-column: span 6; } .dash { gap: 10px; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* the group band answers hover: tint deepens, a light passes, the caret nods */ .group-head { position: relative; overflow: hidden; transition: background var(--dur-micro-2) var(--ease-out), box-shadow var(--dur-micro-2) var(--ease-out); } .group-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%); background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); } [data-theme="dark"] .group-head::after { background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .09) 50%, transparent 65%); } .group-head:hover { background: color-mix(in srgb, var(--gc) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 24%, transparent); } [data-theme="dark"] .group-head:hover { background: color-mix(in srgb, var(--gcolor) 24%, transparent); } .group-head:hover::after { animation: bandShine .9s var(--ease-out); } @keyframes bandShine { to { transform: translateX(110%); } } .group-caret { transition: transform var(--dur-micro-2) var(--ease-spring), background var(--dur-micro-1) var(--ease-out); } .group.collapsed .group-head:hover .group-caret { transform: translateX(3px); } .group:not(.collapsed) .group-head:hover .group-caret { transform: translateY(2px); } /* ============================================================ phase-37 perf Offscreen groups and cards skip layout and paint; on phones the chrome is solid (no per-frame blur), the ambient animations rest, and hover-only motion is not compiled at all. */ .group { content-visibility: auto; contain-intrinsic-size: auto 640px; } .group.collapsed { contain-intrinsic-size: auto 52px; } .fv-card { contain: content; } @media (max-width: 700px) { .board-head, .rail, .sidebar, .popover, .modal, .peek, .chat-panel { -webkit-backdrop-filter: none; backdrop-filter: none; } .board-head, .rail { background: var(--surface-1); } .sidebar, .popover, .modal, .peek, .chat-panel, .card, .dw, .fv-card, .tpl-card, .admin-card, .kanban-card, .cal-cell, .tl-scroll { background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; } .app .logo-mark { filter: none; } .app .logo-mark circle { animation: logoIn .38s ease backwards; } .rail-dot, .team-dot, .ch-row.on .avatar::after { animation: none; } .group-head::after { display: none; } .dw, .group, .files-view, .calendar, .timeline-view { animation: none; } .dw:hover { transform: none; box-shadow: var(--elev-1); } .item-row { transition: none; } .file-mini .fm-img.loaded { animation: none; } .board-table td.cell:hover::before { animation: none; } .btn:hover { transform: none; } } @media (hover: none) { .ic { animation: none !important; } .cell-files.has .file-mini:nth-child(2), .cell-files.has .file-mini:nth-child(3) { transform: none; margin-left: 3px; } .dw-menu, .row-menu, .group-head .group-menu { opacity: 1; } } /* ============================================================ phase-39 The fan palette everywhere, a grey scale instead of grey, glass with a purpose, the status ring, one tab grammar, a library you can sort by revision, sheets on phones. Every rule here is written for both themes: colour comes from tokens, never from a literal. */ /* ---- the ground has a little light in it, so glass has something to show; cards are a lighter step of the same ground, not a grey box ---- */ :root { --wash: color-mix(in srgb, var(--text-1) 5%, transparent); --wash-2: color-mix(in srgb, var(--text-1) 9%, transparent); } [data-theme="dark"] { --wash: rgba(255, 255, 255, .055); --wash-2: rgba(255, 255, 255, .1); } .app { background: var(--ambient), var(--surface-0); } .card, .dw, .fv-card, .tpl-card, .admin-card, .kanban-card, .snap-row, .auto-row { background: var(--glass-card); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-1); } .card { border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; } .card-head { gap: 12px; } .card-head h4 { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--font-display); letter-spacing: -.01em; } .card-head h4 > .ic { color: var(--brand); } .card-foot { margin: 14px 0 0; line-height: 1.5; } .kpi, .stat, .wl-bar, .cbar, .sbar, .kanban-col-head, .kanban-list, .cal-dow, .cal-cell.empty, .auto-builder { background: var(--wash); } .kpi:hover { background: var(--wash-2); } .kanban-count { background: var(--glass-card); } .table-wrap, .tl-scroll, .cal-grid { box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-1); } .page-pad { max-width: 1180px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .page-head h2 { margin: 0 0 4px; font-size: var(--fs-2xl); } .page-head p { margin: 0; } /* ---- glass: ONE recipe, defined once. Blur only where a surface floats over content. Saturation is mild: the earlier 1.7 lifted the blue ambient under a card into a violet cast, which read as a different colour of glass from surface to surface. ---- */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { /* blur only where something scrolls or floats underneath: the head, the rail, popovers, modals, the drawer, hover cards. A card on the page has nothing behind it but the ground, and blurring a smooth ground gives the same pixels back; a library page holds 120 cards, and 120 blur layers is what made scrolling drag. The cards keep the same tint. */ .popover, .modal, .peek, .peek.peek-card, .chat-panel, .sidebar, #cmd-palette .palette, .board-head, .rail { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15); backdrop-filter: blur(var(--glass-blur)) saturate(1.15); } .card, .dw, .fv-card, .tpl-card, .admin-card, .kanban-card, .snap-row, .auto-row, .cal-cell, .tl-scroll { background: var(--glass); } .popover, .modal, .peek, .peek.peek-card, .chat-panel, .sidebar, #cmd-palette .palette { box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-3); } .popover, .peek, .modal { border: 1px solid color-mix(in srgb, var(--line-1) 70%, transparent); } } .modal-overlay { background: var(--scrim); } /* ---- every search box answers focus with the fan ring, and only then ---- */ .board-search { position: relative; border-color: var(--line-2); background: color-mix(in srgb, var(--surface-1) 72%, transparent); color: var(--text-3); } .board-search::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; background: conic-gradient(from var(--ring-a), var(--logo-1), var(--logo-2), var(--logo-3), var(--logo-4), var(--logo-5), var(--logo-1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; transition: opacity var(--dur-micro-2) var(--ease-out); } .board-search:focus-within { border-color: transparent; box-shadow: none; background: var(--surface-1); color: var(--text-2); } .board-search:focus-within::before { opacity: 1; animation: ringSpin 2.6s linear infinite; } .drawer-search { border-radius: 10px; } .drawer-search::before { border-radius: 10px; } /* ---- board head: the tabs sit on the glass; the active one wears a plate and a bar that glides between views ---- */ .view-tabs { position: relative; background: transparent; padding: 0 0 6px; gap: 2px; border-radius: 0; } .view-tab { padding: 5px 10px 5px 7px; border-radius: 8px; color: var(--text-2); font-weight: 500; } .view-tab > .ic { box-sizing: border-box; width: 22px; height: 22px; padding: 4px; border-radius: 6px; opacity: 1; color: var(--text-3); transition: background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .view-tab:hover { background: var(--hover-ground); color: var(--text-1); } .view-tab:hover > .ic { color: var(--text-1); } .view-tab.active { background: transparent; box-shadow: none; color: var(--text-1); font-weight: 600; padding-right: 26px; } .view-tab.active > .ic { background: var(--brand-soft); color: var(--brand); } .vt-menu { right: 5px; } .vt-ind { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: var(--brand); opacity: 0; transition: transform .4s var(--ease-settle), width .4s var(--ease-settle), opacity var(--dur-micro-2) var(--ease-out); } .vt-ind.ready { opacity: 1; } .view-add { width: 30px; height: 30px; border-radius: 7px; } .view-add:hover { background: var(--brand-soft); color: var(--brand); } .board-switch-row { align-items: flex-end; } .board-tools { padding-bottom: 6px; } .board-tools .btn.ghost { color: var(--text-2); } .board-tools .btn.ghost:hover { color: var(--text-1); } .board-more { display: none; } .board-head .icon-btn { color: var(--text-2); } .board-head .icon-btn:hover { color: var(--text-1); } /* ---- status ring ---- */ .ring-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .ring { position: relative; width: 136px; height: 136px; flex: none; margin: 4px 0; } .ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; animation: ringIn .9s var(--ease-out) both; } .ring-track { fill: none; stroke: var(--wash-2); stroke-width: 11; } .ring-seg { fill: none; stroke-width: 11; transition: stroke-width var(--dur-micro-2) var(--ease-out), opacity var(--dur-micro-2) var(--ease-out); } .ring-wrap.has-hl .ring-seg:not(.hl) { opacity: .32; } .ring-seg.hl { stroke-width: 14.5; } .ring::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2), inset 0 6px 14px -8px rgba(20, 26, 43, .18); pointer-events: none; } [data-theme="dark"] .ring::after { box-shadow: inset 0 0 0 1px var(--line-2), inset 0 8px 18px -8px rgba(0, 0, 0, .55); } .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 26px; } .ring-center b { font: 700 25px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-1); transition: transform var(--dur-micro-2) var(--ease-spring); } .ring-wrap.has-hl .ring-center b { transform: scale(1.06); } .ring-center span { font-size: 11.5px; color: var(--text-3); margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ring-legend { flex: 1; min-width: 160px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 14px; align-content: center; } .ring-legend .legend-row { padding: 4px 8px; margin: 0 -8px; border-radius: 7px; cursor: default; transition: background var(--dur-micro-1) var(--ease-out); } .ring-legend .legend-row.hl { background: var(--hover-ground); } .ring-legend .lg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-s .ring-wrap { flex-direction: column; align-items: stretch; gap: 8px; } .dw-s .ring { margin: 0 auto; } @keyframes ringIn { from { opacity: 0; transform: rotate(-200deg) scale(.86); } to { opacity: 1; transform: rotate(-90deg); } } /* ---- dashboard cards: quieter heads, tiles as washes ---- */ .dw { border-radius: 14px; } .dw:hover { border-color: var(--line-1); } .dw-head h4 { font-family: var(--font-display); font-size: 13.5px; letter-spacing: -.01em; } .dw-ghost { background: var(--wash); } .dw-add { background: transparent; box-shadow: none; } .legend-row .dot, .wl-row .dot { border-radius: 50%; } /* ---- segmented control (layout switch, appearance) ---- */ .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--wash); } .seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: none; background: transparent; border-radius: 7px; color: var(--text-2); font: 500 12.5px var(--font-body); cursor: pointer; transition: background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .seg-btn:hover { color: var(--text-1); } .seg-btn.on { background: var(--surface-1); color: var(--text-1); box-shadow: var(--elev-1); } .seg-btn.on > .ic { color: var(--brand); } /* ---- library ---- */ .fv-bar { gap: 8px 10px; margin-bottom: 8px; } .fv-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .fv-latest.on > .ic { color: var(--brand); } .fv-sort { height: 30px; } .fv-sum { margin: 0 2px 14px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .01em; } .fv-card { border-radius: 12px; } .fv-card:hover { border-color: var(--line-1); box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-2); } .fv-kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--text-2); background: var(--wash); border-radius: 4px; padding: 1px 5px; } .fv-dl { color: var(--text-2); background: var(--wash); border-radius: 7px; } .fv-dl:hover { color: var(--brand); background: var(--brand-soft); } .fv-list .fv-card { border-radius: 9px; padding: 7px 10px 7px 12px; box-shadow: inset 0 1px 0 var(--glass-line); } .fv-list .fv-card:hover { box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-1); } /* ---- template center ---- */ .tpl-modal { display: flex; flex-direction: column; max-height: 90vh; } .tpl-modal .tpl-cats { overflow-y: auto; margin: 0 -8px; padding: 0 8px 8px; } .tpl-head { margin-bottom: 10px; padding-right: 36px; } .tpl-ai { height: 40px; margin: 0 0 12px; padding-right: 4px; } .tpl-ai .board-filter { width: 100%; } .tpl-ai > .ic { color: var(--brand); } .tpl-ai .btn { height: 30px; flex: none; } .tpl-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 14px; } .tpl-cat h4 { display: flex; align-items: center; gap: 7px; margin: 14px 0 10px; color: var(--text-2); font: 600 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .tpl-cat h4 > .ic { color: var(--text-3); } .tpl-cat:first-child h4 { margin-top: 4px; } .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; } .tpl-card { --h: var(--logo-5); border-radius: 12px; padding: 14px 14px 12px; gap: 5px; transition: transform var(--dur-micro-2) var(--ease-out), box-shadow var(--dur-micro-2) var(--ease-out), border-color var(--dur-micro-2) var(--ease-out); } .tpl-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-2); border-color: var(--line-1); } .tpl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .tpl-ic { box-sizing: border-box; width: 34px; height: 34px; padding: 8px; border-radius: 10px; display: inline-flex; background: color-mix(in srgb, var(--h) 14%, transparent); color: color-mix(in srgb, var(--h) 72%, var(--text-1)); } [data-theme="dark"] .tpl-ic { color: color-mix(in srgb, var(--h) 82%, #fff); } .tpl-card b { font-family: var(--font-display); font-size: 14px; letter-spacing: -.01em; } .tpl-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; } .tpl-cols { margin-top: 4px; } .tpl-cols span { background: var(--wash); border: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; color: var(--text-2); padding: 2px 7px; border-radius: 5px; } .tpl-cols span.more { color: var(--text-3); } .tpl-card.tpl-lib { background: linear-gradient(180deg, var(--brand-soft), transparent 70%), var(--glass-card); border-color: color-mix(in srgb, var(--brand) 40%, transparent); } .tpl-chip { margin: 0; vertical-align: 0; background: var(--brand-soft); color: var(--brand); } .tpl-chip.mine { background: var(--signal-4-soft); color: var(--signal-4); } [data-theme="dark"] .tpl-chip.mine { color: var(--signal-4); } .tpl-actions { margin-top: 6px; } .modal-x { border-radius: 8px; } /* ---- my work ---- */ .mw-kpis { margin-bottom: 14px; } .mw-filters { margin-bottom: 18px; } .qf-chip.bad.on { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .qf-chip.bad.on b { color: var(--danger); } .mywork-group { margin-top: 0; padding: 12px 14px 8px; } .mywork-group .card-head { margin-bottom: 4px; padding: 0 4px; } .mywork-group h4 { color: var(--text-1); } .mywork-row { background: transparent; border: none; border-radius: 9px; padding: 9px 10px; margin: 0; gap: 12px; color: var(--text-1); transition: background var(--dur-micro-1) var(--ease-out); } .mywork-row + .mywork-row { border-top: 1px solid var(--line-2); border-radius: 0; } .mywork-row:hover { transform: none; box-shadow: none; background: var(--hover-ground); } .mywork-row .dot-mark { width: 8px; height: 8px; flex: none; } .mywork-row .mw-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mywork-row .cell-date { flex: none; min-width: 52px; text-align: right; } .mywork-row .cell-date.muted { color: var(--text-3); font-weight: 400; } .mywork-row > .ic:last-child { color: var(--text-3); opacity: 0; transition: opacity var(--dur-micro-1) var(--ease-out), transform var(--dur-micro-2) var(--ease-spring); } .mywork-row:hover > .ic:last-child { opacity: 1; transform: translateX(2px); } /* ---- admin ---- */ .admin-tabs { gap: 2px; border-bottom: 1px solid var(--line-2); margin: 4px 0 20px; } .admin-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 10px; border-radius: 8px 8px 0 0; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-micro-1) var(--ease-out), background var(--dur-micro-1) var(--ease-out); } .admin-tab > .ic { box-sizing: border-box; width: 22px; height: 22px; padding: 4px; border-radius: 6px; color: var(--text-3); } .admin-tab:hover { color: var(--text-1); background: var(--hover-ground); } .admin-tab.active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--brand); } .admin-tab.active > .ic { background: var(--brand-soft); color: var(--brand); } .admin-card { border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; } .admin-card.danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .admin-card.danger .card-head h4 > .ic { color: var(--danger); } .admin-card .kpis { margin-top: 4px; } .member-list { display: flex; flex-direction: column; } .member-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 9px 6px; border-top: 1px solid var(--line-2); } .member-row:first-child { border-top: none; } .member-row .avatar { position: relative; } .member-row.on .avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface-1); } .member-text { display: flex; flex-direction: column; min-width: 0; } .member-text b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-text span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-state { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .member-state.on { color: var(--ok); } .role-select { margin: 0; } .role-select select, .role-chip { height: 30px; padding: 0 28px 0 10px; border-radius: 8px; font: 500 12.5px var(--font-body); color: var(--text-1); background: var(--wash); border: 1px solid transparent; } .role-select select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; } .role-select select:focus { border-color: var(--brand); } .role-chip { display: inline-flex; align-items: center; padding: 0 10px; text-transform: capitalize; } .member-remove { width: 28px; color: var(--text-3); } button.member-remove:hover { color: var(--danger); background: var(--danger-soft); } .invite-row { border-bottom: none; border-top: 1px solid var(--line-2); gap: 12px; padding: 9px 6px; } .invite-row:first-of-type { border-top: none; } .invite-ic { box-sizing: border-box; width: 30px; height: 30px; padding: 7px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); flex: none; display: inline-flex; } .invite-row .member-text { flex: 1; } .profile-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; } .profile-id { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; } .profile-id b { display: block; font-family: var(--font-display); font-size: 16px; } .profile-id .muted { display: block; } .color-field { margin-bottom: 14px; } .color-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .color-row .color-dot { width: 24px; height: 24px; } .color-row input[type=color] { width: 34px; height: 24px; padding: 1px; border-radius: 7px; margin: 0 0 0 4px; display: inline-block; } .pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); } .pref-row:first-of-type { border-top: none; } .pref-l { font-weight: 500; font-size: 13.5px; } .storage-bar { background: var(--wash); } /* ---- drawer contrast ---- */ .side-add { color: var(--text-2); } .ws-count { color: var(--text-2); } .side-title { color: var(--text-1); } .drawer-head { border-bottom-color: var(--line-2); } /* ---- sheets: on a phone every popover slides up from the bottom edge ---- */ .popover.sheet { left: 8px; right: 8px; top: auto; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; min-width: 0; max-height: 78vh; border-radius: 16px; padding-top: 18px; transform: translateY(18px); box-shadow: 0 0 0 100vmax var(--scrim), var(--elev-3); } .popover.sheet::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line-strong); opacity: .6; } .popover.sheet.show { transform: none; } .popover.sheet .qf-pop, .popover.sheet .menu, .popover.sheet .notif-pop, .popover.sheet .team-pop, .popover.sheet .search-results { width: auto; min-width: 0; max-width: none; } .popover.sheet .menu-item, .popover.sheet .people-opt, .popover.sheet .tp-row, .popover.sheet .notif-row { padding-top: 11px; padding-bottom: 11px; } @media (max-width: 700px) { .board-more { display: inline-flex; } .board-right { display: none; } .board-title-row { flex-wrap: nowrap; } .board-name { font-size: var(--fs-xl); } .board-head .icon-btn.sm { padding: 6px; } .view-tabs { padding-bottom: 6px; } .board-switch-row { gap: 6px; } .modal-overlay { align-items: flex-end; padding: 0; } .modal, .modal.wide, .modal.wide.tall { width: 100%; max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 22px 16px 24px; transform: translateY(24px); } .modal::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line-strong); opacity: .6; } .modal, .popover.sheet { background: var(--surface-1); } .ring-wrap { gap: 12px; } .ring-legend { grid-template-columns: 1fr; } .fv-right { margin-left: 0; width: 100%; justify-content: space-between; } .fv-sort .act-label { display: inline; } .profile-grid { grid-template-columns: 1fr; } .member-row { grid-template-columns: auto minmax(0, 1fr) auto; } .member-state { display: none; } .member-row .member-remove { grid-column: 3; } .member-row .role-select { grid-column: 2 / span 2; justify-self: start; } .mw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-head { flex-direction: column; align-items: flex-start; gap: 8px; } .admin-tabs { overflow-x: auto; scrollbar-width: none; } .admin-tab { white-space: nowrap; } .card, .admin-card, .mywork-group { padding: 14px; } .ring-svg { animation: none; } .ring::after { display: none; } } .qf-chip > span, .fv-sort .act-label { white-space: nowrap; } @media (max-width: 700px) { .fv-right { flex-wrap: wrap; gap: 8px; } .mywork-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dot name chev" "dot meta chev"; row-gap: 5px; padding: 10px 8px; } .mywork-row .dot-mark { grid-area: dot; } .mywork-row .mw-name { grid-area: name; white-space: normal; } .mywork-row .status-pill { grid-area: meta; justify-self: start; } .mywork-row .cell-date { grid-area: meta; justify-self: end; align-self: center; } .mywork-row > .ic:last-child { grid-area: chev; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ring-svg, .vt-ind, .board-search::before { animation: none !important; transition: none !important; } } /* ============================================================ phase-40 Every text box answers focus with the fan ring; tags become chips with a card; one glass recipe; the document card; dashboard widgets that can be pointed, sized, hidden and reset; a density that is designed, not squeezed; the views finished; the library's grid and list cleaned up. */ /* ---- inputs: the ring is the border itself (a gradient border on the box, spun by the same property the cells use); the search wrappers keep their own ring and their inner input stays quiet ---- */ input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), select, textarea { background-image: linear-gradient(var(--surface-1), var(--surface-1)), conic-gradient(from var(--ring-a), var(--logo-1), var(--logo-2), var(--logo-3), var(--logo-4), var(--logo-5), var(--logo-1)); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 0 0; } input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]):focus, select:focus, textarea:focus { border-color: transparent; background-size: 100% 100%, 100% 100%; animation: ringSpin 2.6s linear infinite; } .board-search .board-filter, .board-search .board-filter:focus, .palette-input-row input, .tag-input, .role-select select, .attach-ver { background-image: none; animation: none; } .attach-ver:focus { border-color: var(--brand); } .role-select select:focus { border-color: var(--brand); } .label-row .lab-text { background-color: var(--surface-1); } .label-row .lab-text:focus { border-color: transparent; } .auto-line select:focus, .auto-line input:focus, .ch-compose textarea:focus { border-color: transparent; } /* ---- tags: one chip and a count at rest, a card with every tag on hover, an editor of chips ---- */ .cell-tags { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; max-width: 100%; overflow: hidden; } .cell-tags .tag { flex: 0 1 auto; min-width: 0; max-width: calc(var(--cw, 160px) - 52px); } .cell-tags .tag.more { flex: none; } .cell-tags:empty { min-height: 1em; } .peek-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; max-width: 320px; } .peek-tags .tag { max-width: 100%; } .tag-pop { padding: 10px; } .tag-editor { display: flex; flex-direction: column; gap: 4px; width: min(320px, calc(100vw - 32px)); } .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border-radius: 9px; background: var(--wash); min-height: 40px; } .tag-chips .tag { padding-right: 4px; gap: 4px; height: 24px; } .tag-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; padding: 0; margin-left: 2px; } .tag-x:hover { background: var(--danger-soft); color: var(--danger); } .tag-input { flex: 1 1 90px; min-width: 90px; height: 24px; border: none; background: transparent; padding: 0 4px; font-size: 13px; } .tag-input:focus { border: none; } .tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 4px; } .tag-suggest .tag { cursor: pointer; border: none; font-family: var(--font-body); transition: background var(--dur-micro-1) var(--ease-out); } .tag-suggest .tag:hover { background: var(--brand-soft); } .tag-editor .menu-label { padding: 8px 2px 4px; } /* ---- options editor rows without a swatch ---- */ .label-rows.options .lab-text { margin-left: 2px; } /* ---- the document card: details on the left, the page on the right ---- */ .modal.item-modal { padding: 0; width: min(1180px, 96vw); max-height: 90vh; overflow: hidden; } .modal.item-modal .modal-x { top: 10px; right: 10px; background: var(--glass-card); box-shadow: inset 0 0 0 1px var(--line-2); } .item-card.ic3 { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); height: 86vh; } .ic-left { min-height: 0; overflow-y: auto; padding: 20px 20px 16px 22px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 14px; } .ic-head { padding-right: 24px; } .ic-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ic-head h3 { font-size: 19px; line-height: 1.25; margin: 0 0 4px; padding: 2px 6px; margin-left: -6px; } .item-card h3:hover, .item-card h3:focus { background: var(--wash); } .ic-meta { display: flex; align-items: center; gap: 6px; margin: 0; } .ic-meta .icon-btn { color: var(--text-3); } .ic-sec { display: flex; flex-direction: column; gap: 6px; } .ic-sec-t { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 11.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } .ic-sec-t > .ic { color: var(--text-3); } .ic-props { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--wash); } .ic-props .iv-row { gap: 10px; padding: 5px 8px 5px 10px; border-top: 1px solid var(--line-2); min-height: 38px; } .ic-props .iv-row:first-child { border-top: none; } .ic-props .iv-label { width: 108px; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ic-props .cell.inline { flex: 1; min-width: 0; border: none; border-radius: 7px; padding: 2px 6px; min-height: 28px; justify-content: flex-start; } .ic-props .cell.inline:hover { background: var(--hover-ground); box-shadow: none; } .ic-props .cell.inline .cell-text { padding: 2px 0; } .ic-props .cell.inline .status-pill { width: auto; max-width: 100%; } .attach-head { margin-bottom: 2px; } .attach-head .attach-btn { height: 28px; padding: 0 9px; } .attach-list { margin-top: 0; gap: 2px; } .attach-row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "badge name dl del" "badge meta dl del"; padding: 6px 4px 6px 4px; border-radius: 9px; column-gap: 8px; row-gap: 2px; transition: background var(--dur-micro-1) var(--ease-out); } .attach-row:hover { background: var(--hover-ground); } .attach-row.viewing { background: var(--brand-soft); } .attach-row.viewing .attach-name { color: var(--brand); } .attach-row .attach-name { grid-area: name; color: var(--text-1); font-weight: 500; font-size: 13px; } .attach-row .attach-name:hover { color: var(--brand); text-decoration: none; } .attach-row .attach-meta { grid-area: meta; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attach-row .attach-meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .attach-row .attach-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-row .attach-ver { width: 54px; height: 22px; padding: 0 5px; margin: 0; flex: none; font-size: 10.5px; background-color: var(--wash); border-color: transparent; } .attach-row .attach-ver:focus { border-color: var(--brand); background-color: var(--surface-1); } .attach-row .attach-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .attach-row .dl-btn { grid-area: dl; } .attach-row .attach-del { grid-area: del; width: 26px; margin: 0; color: var(--text-3); opacity: .7; } .attach-row .attach-del:hover { color: var(--danger); background: var(--danger-soft); opacity: 1; } .attach-tools { display: inline-flex; gap: 6px; align-items: center; } .attach-tools .btn { height: 28px; padding: 0 9px; } .attach-empty { margin: 4px 2px; } .item-tabs { margin-bottom: 10px; gap: 2px; border-bottom-color: var(--line-2); } .item-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; font-weight: 500; color: var(--text-2); font-size: 13px; } .item-tab.active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--brand); } .item-tab .pill-count { font-size: 10.5px; } .update-composer { gap: 6px; margin-bottom: 12px; } .update-composer textarea { border-radius: 9px; font-size: 13px; } .update { background: var(--wash); border-radius: 10px; } .ic-viewer { border: none; border-radius: 0; background: var(--wash); min-height: 0; } .ic-viewer-head { padding: 10px 14px; background: transparent; border-bottom: 1px solid var(--line-2); gap: 8px; } .ic-viewer-head > .fglyph { flex: none; } .ic-viewer-head b { font-size: 13px; font-weight: 600; } .ic-viewer-acts { display: inline-flex; gap: 2px; margin-left: auto; flex: none; } .ic-viewer-acts .icon-btn { color: var(--text-2); } .ic-viewer .att-preview { padding: 16px; } .ic-viewer .att-preview.pdf { padding: 0; } .ic-viewer-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; } .ic-viewer-empty p { margin: 0; } @media (max-width: 900px) { .ic-fold { display: none; } .modal.item-modal { width: 100%; } .item-card.ic3 { grid-template-columns: 1fr; height: auto; max-height: 90vh; overflow-y: auto; } .ic-left { border-right: none; border-bottom: 1px solid var(--line-2); overflow: visible; } .ic-viewer { min-height: 60vh; } } /* ---- dashboard: the bar above the grid, the widget subtitle ---- */ .dash-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 14px; } .dash-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); } .dash-hint b { font-weight: 700; color: var(--text-1); } .dash-hint > .ic { color: var(--text-3); } .dash-tools { display: inline-flex; gap: 4px; flex: none; } .dw-menu { opacity: .6; } .dw:hover .dw-menu, .dw-menu:focus-visible { opacity: 1; } .dw-head h4 { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .dw-sub { font: 500 11px var(--font-mono); color: var(--text-3); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-pop { min-width: 240px; } .ring-svg { transform: none; animation: ringIn .9s var(--ease-out) backwards; } @keyframes ringIn { from { opacity: 0; transform: rotate(-110deg) scale(.86); } to { opacity: 1; transform: none; } } /* ---- kanban, calendar, timeline in the same grammar ---- */ .kanban { gap: 12px; } .kanban-col { width: 264px; min-width: 264px; } .kanban-col-head { background: transparent; border-top: none; padding: 6px 4px 8px; font: 600 13px var(--font-body); color: var(--text-1); } .kanban-col-head::before { width: 9px; height: 9px; } .kanban-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); background: var(--wash); } .kanban-list { background: var(--wash); border-radius: 12px; padding: 8px; min-height: 140px; gap: 6px; box-shadow: inset 0 0 0 1px var(--line-2); } .kanban-card { border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-1); } .kanban-card:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-2); border-color: var(--line-1); } .kanban-card-name { font-weight: 500; font-size: 13.5px; margin-bottom: 8px; line-height: 1.35; } .kanban-group { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .kanban-empty { border-color: var(--line-1); color: var(--text-2); } .cal-grid { background: var(--line-2); border-color: var(--line-2); border-radius: 12px; } .cal-dow { background: var(--wash); font: 600 11.5px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); padding: 9px 8px; } .cal-cell { background: var(--glass-card); min-height: 104px; padding: 7px; } .cal-cell.empty { background: var(--wash); } .cal-cell.today { background: var(--brand-soft); } .cal-day { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; } .cal-cell.today .cal-day { color: var(--brand); font-weight: 700; } .cal-item { border-radius: 6px; padding: 4px 8px; font-weight: 500; } .cal-more { color: var(--text-2); font-family: var(--font-mono); font-size: 10.5px; } .cal-head { margin-bottom: 12px; } .cal-head h3 { font-size: 17px; } .tl-scroll { background: var(--glass-card); border-color: var(--line-2); border-radius: 12px; box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-1); } .tl-corner { color: var(--text-2); font-family: var(--font-mono); font-weight: 500; } .tl-day { color: var(--text-2); font-family: var(--font-mono); border-left-color: var(--line-2); padding-bottom: 4px; } .tl-day.weekend { color: var(--text-3); opacity: 1; } .tl-day.today { color: var(--brand); font-weight: 700; } .tl-row { height: 40px; } .tl-row:hover .tl-label { color: var(--brand); } .tl-track { background: linear-gradient(90deg, var(--line-2) 1px, transparent 1px) 0 0 / var(--tl-day, 46px) 100%; border-radius: 6px; } .tl-bar { border-radius: 8px; height: 26px; top: 1px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .16); } .tl-bar:hover { transform: translateY(-1px); } /* ---- library grid and list, cleaner ---- */ .fv-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .fv-card { padding: 12px 12px 11px; gap: 11px; } .fv-card .file-mini { flex: none; } .fv-name { font-size: 13px; } .fv-doc { font-size: 12px; } .fv-meta { gap: 5px; margin-top: 2px; } .fv-meta .attach-ver-chip { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .fv-list { gap: 2px; } .fv-list .fv-card { display: grid; grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.4fr) 72px 44px 74px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 8px 6px 10px; } .fv-list .fv-card > .file-mini { grid-column: 1; } .fv-list .fv-text { display: contents; } .fv-list .fv-name, .fv-list .fv-doc { flex: none; } .fv-list .fv-meta { display: contents; } .fv-list .fv-meta .attach-ver-chip { grid-column: 4; justify-self: start; } .fv-list .fv-kind { grid-column: 5; justify-self: start; } .fv-list .fv-card:not(:has(.attach-ver-chip)) .fv-kind { grid-column: 5; } .fv-list .fv-dl { grid-column: 8; position: static; opacity: .8; } .fv-list-head { display: grid; grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.4fr) 72px 44px 74px minmax(0, 1fr) auto; gap: 12px; padding: 0 8px 6px 10px; font: 600 10.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .fv-list-head span:first-child { width: 24px; } @media (max-width: 900px) { .fv-list .fv-card { grid-template-columns: auto minmax(0, 1fr) auto; } .fv-list .fv-text { display: flex; flex-direction: column; gap: 2px; grid-column: 2; } .fv-list .fv-meta { display: inline-flex; } .fv-list .fv-meta .attach-ver-chip, .fv-list .fv-kind { grid-column: auto; } .fv-list .fv-dl { grid-column: 3; } .fv-list-head { display: none; } } /* ---- density: compact is a designed second rhythm, not a squeeze ---- */ [data-density="compact"] { --fs-sm: 13px; } [data-density="compact"] .board-table td { height: 32px; } [data-density="compact"] .board-table th { font-size: 12px; padding-top: 5px; padding-bottom: 5px; } [data-density="compact"] .board-table .cell-text, [data-density="compact"] .cell { font-size: 12.5px; } [data-density="compact"] .board-table .status-pill { padding: 3px 8px; font-size: 12px; } [data-density="compact"] .item-row .avatar { width: 24px !important; height: 24px !important; font-size: 10px !important; } [data-density="compact"] td.col-name .item-name { font-size: 13px; } [data-density="compact"] .chat-btn { height: 22px; } [data-density="compact"] .row-menu { width: 22px; height: 22px; } [data-density="compact"] .group { margin-bottom: 18px; } [data-density="compact"] .group-head { padding: 3px 6px 3px 2px; margin-bottom: 6px; } [data-density="compact"] .group-title { font-size: 15px; } [data-density="compact"] .group-caret { width: 22px; height: 22px; } [data-density="compact"] .add-item-input { height: 32px; font-size: 12.5px; } [data-density="compact"] .cell-date { font-size: 12px; } [data-density="compact"] .cell-files.has .file-mini { --tw: 18px; --th: 23px; } [data-density="compact"] .file-mini { width: var(--tw); height: var(--th); } [data-density="compact"] .fglyph { width: 18px; height: 21px; } [data-density="compact"] .board-head { padding-top: var(--sp-2); padding-bottom: 0; } [data-density="compact"] .board-name { font-size: var(--fs-xl); } [data-density="compact"] .board-switch-row { margin-top: 6px; } [data-density="compact"] .view-tab { padding-top: 3px; padding-bottom: 3px; } [data-density="compact"] .board-tools .btn, [data-density="compact"] .board-search { height: 30px; } [data-density="compact"] .board-body { padding-top: 12px; } [data-density="compact"] .dash { gap: 10px; } [data-density="compact"] .dw-body { padding: 4px 12px 12px; } [data-density="compact"] .dw-head { padding: 9px 8px 2px 10px; } [data-density="compact"] .kpi { padding: 9px 10px 9px 13px; } [data-density="compact"] .kpi-n { font-size: 22px; } [data-density="compact"] .fv-card { padding: 9px 10px; gap: 9px; } [data-density="compact"] .fv-grid { gap: 8px; } [data-density="compact"] .kanban-card { padding: 8px 10px; } [data-density="compact"] .kanban-list { gap: 5px; } [data-density="compact"] .cal-cell { min-height: 84px; } [data-density="compact"] .mywork-row { padding: 6px 10px; } [data-density="compact"] .member-row { padding: 6px; } [data-density="compact"] .side-link, [data-density="compact"] .side-board { padding-top: 4px; padding-bottom: 4px; } [data-density="compact"] .page-pad { padding: 20px 26px; } /* ============================================================ phase-41 One frost for everything, the data palette with presets, the header row that never overlaps, the document card with a fold and a proper close. */ /* ---- swatches: the twelve presets, the current one ringed ---- */ .swatches { display: inline-flex; flex-wrap: wrap; gap: 8px; padding: 4px 10px 8px; max-width: 240px; } .swatches .color-dot { width: 24px; height: 24px; } .palette-pop { min-width: 0; } .palette-pop .menu-label { padding-top: 6px; } .lab-swatch { border: none; } .lab-swatch.custom { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--line-strong); } .lab-swatch:hover { transform: scale(1.08); } .lab-swatch { transition: transform var(--dur-micro-2) var(--ease-spring); } .label-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .color-field .swatches { padding: 0; max-width: none; } /* ---- the document card: a stage bar with fold, file head and close ---- */ .modal.item-modal { width: min(1320px, 97vw); max-height: 94vh; } .modal.item-modal .modal-x { display: none; } .item-card.ic3 { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); height: 90vh; transition: grid-template-columns var(--dur-scene-1) var(--ease-out); } .item-card.ic3.folded { grid-template-columns: 0 minmax(0, 1fr); } .item-card.ic3.folded .ic-left { padding-left: 0; padding-right: 0; overflow: hidden; border-right: none; opacity: 0; } .ic-left { transition: opacity var(--dur-micro-3) var(--ease-out), padding var(--dur-scene-1) var(--ease-out); } .ic-stage { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .ic-stage-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 8px; border-bottom: 1px solid var(--line-2); flex: none; } .ic-stage-bar .ic-viewer-head { flex: 1; min-width: 0; padding: 0; border: none; background: transparent; display: flex; align-items: center; gap: 8px; } .ic-fold, .ic-close { flex: none; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-2); background: var(--wash); } .ic-fold:hover, .ic-close:hover { color: var(--text-1); background: var(--wash-2); } .ic-close:hover { color: var(--danger); background: var(--danger-soft); } .ic-viewer { flex: 1; } .ic-left { padding: 18px 18px 14px 20px; gap: 12px; } .ic-head h3 { font-size: 18px; } .ic-props .iv-row { min-height: 34px; padding: 3px 8px 3px 10px; } .ic-props .iv-label { width: 104px; } .ic-props .cell.inline { min-height: 26px; } @media (max-width: 900px) { .item-card.ic3, .item-card.ic3.folded { grid-template-columns: 1fr; } .item-card.ic3.folded .ic-left { display: none; } .ic-stage { order: -1; } .ic-stage-bar { position: sticky; top: 0; z-index: 2; background: var(--surface-1); } .ic-viewer { min-height: 46vh; } } /* ============================================================ phase-43 Import an archive: a drop zone, a progress bar in the fan's hues, the plan as a card, then the board. */ .tpl-start { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .tpl-start .tpl-ai { flex: 1; margin: 0; } .tpl-import { height: 40px; flex: none; border: 1px dashed var(--line-1); border-radius: 10px; } .tpl-import:hover { border-color: var(--brand); color: var(--brand); } .imp-modal { width: min(640px, 94vw); } .imp-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 190px; padding: 24px; margin: 0; border-radius: 14px; cursor: pointer; font-weight: 400; background: var(--wash); border: 1.5px dashed var(--line-1); color: var(--text-1); transition: background var(--dur-micro-2) var(--ease-out), border-color var(--dur-micro-2) var(--ease-out); } .imp-drop:hover { border-color: var(--brand); background: var(--brand-soft); } .imp-drop.over { border-color: transparent; background: var(--brand-soft); } .imp-drop.over::before { content: ""; position: absolute; inset: -1.5px; border-radius: 14px; padding: 2px; pointer-events: none; background: conic-gradient(from var(--ring-a), var(--logo-1), var(--logo-2), var(--logo-3), var(--logo-4), var(--logo-5), var(--logo-1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: ringSpin 2.6s linear infinite; } .imp-drop b { font-family: var(--font-display); font-size: 15px; } .imp-drop input[type=file] { display: none; } .gjump-chip { max-width: 220px; white-space: nowrap; } .gjump-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imp-ic { box-sizing: border-box; width: 52px; height: 52px; padding: 13px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); display: inline-flex; margin-bottom: 6px; } .imp-progress { padding: 8px 0 4px; } .imp-file { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .imp-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imp-size { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); } .imp-bar { height: 8px; border-radius: 4px; background: var(--wash-2); overflow: hidden; } .imp-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--logo-1), var(--logo-2), var(--logo-3), var(--logo-4), var(--logo-5)); transition: width .25s var(--ease-out); } .imp-status { margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); } .imp-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; } .imp-fields label { margin-bottom: 8px; } .imp-stats { margin: 6px 0 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .imp-shape { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; } .imp-groups { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; max-height: 240px; overflow-y: auto; background: var(--wash); } .imp-group { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line-2); font-size: 13px; } .imp-group:first-child { border-top: none; } .imp-group .dot-mark { color: var(--brand); flex: none; } .imp-group b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .imp-group .muted { flex: none; font-family: var(--font-mono); font-size: 11px; } @media (max-width: 700px) { .imp-fields { grid-template-columns: 1fr; } .tpl-start { flex-wrap: wrap; } .tpl-import { flex: 1 1 100%; } } /* ============================================================ phase-44 phones The rail becomes a bottom bar, the register becomes cards, panels and sheets respect the bar and the safe area, every touch target is 44px. */ @supports (height: 100dvh) { .app { height: 100dvh; } } @media (max-width: 700px) { :root { --bar-h: calc(56px + env(safe-area-inset-bottom, 0px)); } .app { flex-direction: column; } /* the bottom bar: six destinations, the rest live in the drawer and the account menu */ .rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: var(--bar-h); z-index: 60; flex-direction: row; align-items: stretch; justify-content: space-around; gap: 0; padding: 0 6px env(safe-area-inset-bottom, 0px); border-right: none; border-top: 1px solid var(--line-2); box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .25); } .rail-logo, .rail-spacer, .rail .theme-btn, .rail-btn[data-act="open-templates"], .rail-btn[href="#/admin"] { display: none; } .rail-btn, .avatar-btn { width: auto; flex: 1 1 0; height: 56px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; } .rail-btn::before { left: 50%; top: 6px; width: 22px; height: 3px; transform: translateX(-50%) scaleX(0); border-radius: 2px; transition: transform var(--dur-micro-3) var(--ease-spring); } .rail-btn.active::before { height: 3px; transform: translateX(-50%) scaleX(1); } .rail-btn.active { background: transparent; } .rail-btn .badge { top: 8px; right: calc(50% - 20px); } .rail-dot { right: calc(50% - 16px); bottom: 12px; } .main { padding-bottom: var(--bar-h); } .sidebar { left: 0; width: 100vw; bottom: var(--bar-h); } .drawer-scrim { inset: 0; } .ai-panel { top: 0; bottom: var(--bar-h); width: 0; } .ai-panel.open { width: 100vw; } .chat-panel { bottom: 0; } .ch-list-head .ch-close { display: inline-flex; margin-left: auto; } .ch-list-head { align-items: center; gap: 8px; } .ch-list-head span { flex: 1; } .popover.sheet { bottom: calc(var(--bar-h) + 8px); max-height: calc(100vh - var(--bar-h) - 24px); } .modal-overlay { padding-bottom: 0; } .board-body { padding: 10px 10px calc(var(--bar-h) + 40px); } .page-pad { padding-bottom: calc(var(--bar-h) + 30px); } #toasts { bottom: calc(var(--bar-h) + 12px); } /* head: the title row breathes, the tools are 44px */ .board-head .icon-btn.sm, .board-tools .btn, .board-search, #qf-btn { min-height: 40px; } .board-tools .btn.primary { width: 44px; height: 40px; } /* cards for the register */ .cards { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px; } .rcard { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; padding: 12px 14px 10px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-1); color: var(--text-1); cursor: pointer; box-shadow: inset 0 1px 0 var(--glass-line), var(--elev-1); } .rcard::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--gcolor); } .rcard:active { background: var(--surface-2); } .rcard-top { display: flex; align-items: flex-start; gap: 8px; } .rcard-name { flex: 1; min-width: 0; font: 600 14.5px/1.35 var(--font-display); letter-spacing: -.01em; } .rcard-top > .ic { flex: none; margin-top: 3px; color: var(--text-3); } .rcard-cells { display: flex; flex-wrap: wrap; gap: 6px 14px; } .rcard-cell { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 13px; } .rcard-cell em { font: 500 10.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); } .rcard-cell .status-pill { width: auto; padding: 3px 9px; font-size: 12px; } .rcard-cell .cell-text { padding: 0; max-width: 200px; } .rcard-cell .cell-people .avatar { width: 24px !important; height: 24px !important; font-size: 10px !important; } .rcard-cell .cell-tags { padding: 0; } .rcard-foot { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); } .rcard-foot:empty { display: none; } .rcard-foot span { display: inline-flex; align-items: center; gap: 4px; } .rcard-add { flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 10px; color: var(--text-2); background: transparent; border-style: dashed; box-shadow: none; font-size: 13px; } .rcard-add::before { display: none; } .cards .group-count b { color: var(--text-1); } /* kanban: one lane per swipe */ .kanban { scroll-snap-type: x mandatory; padding-left: 2px; } .kanban-col { scroll-snap-align: start; width: min(300px, calc(100vw - 40px)); min-width: 0; } /* calendar: dots in the cells, the list on tap */ .cal-cell { min-height: 60px; padding: 5px 4px; } .cal-cell.has { cursor: pointer; } .cal-cell.has:active { background: var(--brand-soft); } .cal-day { display: flex; align-items: center; justify-content: space-between; } .cal-n { font-size: 10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .cal-item { width: 8px; height: 8px; padding: 0; margin: 2px 2px 0 0; border-radius: 50%; display: inline-block; overflow: hidden; color: transparent; background: var(--lab, var(--brand)); vertical-align: middle; } .cal-item::before { display: none; } .cal-more { display: none; } .cal-head h3 { min-width: 0; font-size: 15px; } /* admin on a phone */ .admin-tabs { gap: 0; } .admin-tab { padding: 8px 8px 10px; font-size: 12.5px; gap: 5px; } .member-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av text rm" "av role rm"; row-gap: 6px; } .member-row .avatar { grid-area: av; align-self: start; } .member-row .member-text { grid-area: text; } .member-row .role-select, .member-row .role-chip { grid-area: role; justify-self: start; } .member-row .member-remove { grid-area: rm; align-self: center; } .card-head .btn.primary { white-space: nowrap; } /* template chips scroll on one line */ .tpl-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; } .tpl-nav::-webkit-scrollbar { display: none; } .tpl-nav .qf-chip { flex: none; } /* landing header */ .mk-header { padding-left: 14px; padding-right: 14px; } } .ch-close { display: none; } .cal-n { display: none; } .cal-pop { min-width: 260px; } .cal-pop .menu-item .status-pill { margin-left: auto; flex: none; } .cal-pop .cr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 700px) { .cal-n { display: inline-flex; } } /* ---- board switcher: every board one tap from the title ---- */ .board-switch-btn { color: var(--text-3); margin-left: -4px; } .board-switch-btn:hover { color: var(--text-1); } .board-switcher { min-width: 300px; max-width: min(380px, calc(100vw - 16px)); } .bs-search { height: 36px; margin: 2px 2px 6px; } .bs-search .board-filter { width: 100%; } .bs-list { max-height: min(52vh, 460px); overflow-y: auto; } .bs-row .board-glyph { box-sizing: border-box; width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--wc, var(--brand)); background: color-mix(in srgb, var(--wc, var(--brand)) 14%, transparent); } .bs-row .sb-fav { color: var(--star); display: inline-flex; } .bs-row .sb-fav .ic { fill: currentColor; } .bs-row.on { background: var(--brand-soft); color: var(--brand); } .bs-none { padding: 14px 10px; color: var(--text-3); font-size: 13px; text-align: center; } .board-name.tap { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100vw - 190px); } .board-name.tap > .ic { color: var(--text-3); flex: none; } /* group index strip above the cards */ .gjump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; } .gjump::-webkit-scrollbar { display: none; } .gjump-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 9px; border: 1px solid var(--line-2); border-radius: var(--r-round); background: var(--glass-card); color: var(--text-1); font: 500 12.5px var(--font-body); cursor: pointer; } .gjump-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--gc); } .gjump-chip b { font: 500 10.5px var(--font-mono); color: var(--text-3); } .gjump-chip:active { background: var(--brand-soft); } @media (max-width: 700px) { .fv-search { display: none; } .fv-bar { gap: 8px; } .fv-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; } .fv-kinds::-webkit-scrollbar { display: none; } .fv-kinds .qf-chip { flex: none; } .popover.sheet .bs-list { max-height: calc(100vh - var(--bar-h) - 240px); } .popover.sheet .bs-search .board-filter { font-size: 15px; } } /* ============================================================ phase-45 Getting a file is one obvious step, everywhere a file is shown. */ .dl-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 8px; border-radius: 8px; flex: none; background: var(--brand-soft); color: var(--brand); font: 600 12px var(--font-body); text-decoration: none; white-space: nowrap; transition: background var(--dur-micro-1) var(--ease-out), color var(--dur-micro-1) var(--ease-out); } .dl-btn:hover { background: var(--brand-fill); color: #fff; } .dl-btn .ic { opacity: 1; } .ic-viewer-acts .btn { height: 30px; padding: 0 10px; } .att-np-name { display: block; margin: 0 0 4px; font-size: 14px; color: var(--text-1); word-break: break-word; } .att-nopreview p { margin: 0 0 14px; } .att-nopreview .btn { display: inline-flex; } /* library: the download is a button, always there */ .fv-dl { position: static; opacity: 1; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px 0 7px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font: 600 12px var(--font-body); flex: none; align-self: center; } .fv-dl:hover { background: var(--brand-fill); color: #fff; } .fv-dl span { display: none; } .fv-card:hover .fv-dl { opacity: 1; } .fv-list .fv-dl span { display: inline; } .fv-list .fv-dl { opacity: 1; } /* hover card: a download on every line and one for all */ .pf-row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "g n v d" "g m m d"; } .pf-row .pf-dl { grid-area: d; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; color: var(--brand); background: var(--brand-soft); } .pf-row .pf-dl:hover { background: var(--brand-fill); color: #fff; } .pf-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); } .pf-foot .btn { height: 28px; padding: 0 9px; } .peek.peek-files { pointer-events: auto; } @media (max-width: 700px) { .attach-row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "badge name del dl" "badge meta del dl"; column-gap: 6px; } .attach-row .attach-del { width: 30px; height: 30px; align-self: center; } .attach-row .attach-del:empty { display: none; } .attach-row .dl-btn { height: 40px; width: 40px; padding: 0; justify-content: center; } .attach-row .dl-btn span { display: none; } .ic-viewer-acts .btn { height: 36px; min-width: 36px; padding: 0 9px; } .fv-dl { height: 36px; min-width: 36px; } .fv-dl span { display: none; } } /* ---- phones: the chrome is solid. This rule sits last so no later glass block can put a blur back under a fixed bar or a sticky header. ---- */ @media (max-width: 700px) { .board-head, .rail, .sidebar, .popover, .modal, .peek, .peek.peek-card, .chat-panel, #cmd-palette .palette { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-1); } .rail { contain: layout paint; } .rail-btn, .avatar-btn { transition: none; } .rail-btn::before { transition: transform var(--dur-micro-2) var(--ease-out); } } /* ============================================================ phase-49 phones Last pass: touch scrolls, empty viewers collapse, reports scroll sideways, the table layout drops its empty summary strip, landscape stays usable. */ .dw-head { touch-action: pan-y; } .dw-grip { touch-action: none; padding: 4px; margin: -4px; } .audit-doc section { overflow-x: auto; -webkit-overflow-scrolling: touch; } .audit-table { min-width: 560px; } @media (max-width: 700px) { .dash-hint { display: none; } .dash-bar { justify-content: flex-end; margin-bottom: 10px; } .summary-row { display: none; } .ic-viewer:has(.ic-viewer-empty) { min-height: 0; padding: 18px 0 6px; } .ic-viewer:has(.ic-viewer-empty) .ic-viewer-empty { flex-direction: row; gap: 10px; text-align: left; } .ic-viewer:has(.ic-viewer-empty) .fglyph { width: 22px; height: 26px; } .ic-viewer:has(.ic-viewer-empty) p { font-size: 12.5px; } .audit-bar { flex-wrap: wrap; gap: 6px; } .audit-doc { padding: 18px 14px 60px; } .audit-doc h1 { font-size: 30px; } } @media (max-width: 900px) and (max-height: 440px) { .board-head { padding-top: 4px; padding-bottom: 0; } .board-title-row { min-height: 36px; } .board-name, .board-name.tap { font-size: 17px; } .board-switch-row { margin-top: 0; gap: 4px; } .view-tabs { padding-bottom: 2px; } .board-tools .btn, .board-search, #qf-btn, .board-tools .btn.primary { min-height: 34px; height: 34px; } .gjump { display: none; } :root { --bar-h: calc(46px + env(safe-area-inset-bottom, 0px)); } .rail-btn, .avatar-btn { height: 46px; } .rail-btn .ic { width: 18px; height: 18px; } } .add-sheet .add-item-input.in-sheet { height: 40px; padding: 0 12px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--line-strong); font-size: 14px; } .add-sheet .edit-row { justify-content: flex-end; }