/* ============================================================================ * CoSi Platform — Design System (production stylesheet) * Source of truth: DESIGN.md. Figma mirrors this. Do not add off-system values. * Organized: FOUNDATIONS (tokens) -> COMPONENTS. The legacy assets/css/main.css * is being replaced page-by-page; do NOT merge this into it. * * Class conventions: flat kebab, component-prefixed. Root = DESIGN.md §11 name * (.applet-card, .dynamic-island, .context-menu, .segmented-control). Element = * root-element (.applet-card-name). Variant = compound modifier (.btn-primary, * .pill.solid). State = .is-* (.switch.is-on, .field.is-invalid). Category hue = * .cat-* modifier (works on pill, applet-card, loved-applet). * ============================================================================ */ /* ===== FONTS (self-hosted, #241) ======================================== Was a render-blocking cross-origin Google Fonts fetch — the font-swap pop on first paint was the visible "flash" on nav/island text in Arc. Latin subset; Inter is a variable file covering 400–700. */ @font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/space-mono-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/space-mono-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ===== FOUNDATIONS ===================================================== */ :root{ /* Layer 1 — palette primitives (the only raw hex in the system besides theme chrome). Each hue carries an -rgb triplet twin for rgb(... / alpha) fills. */ --blue:#436FFF; --blue-rgb:67 111 255; --teal:#02C2A5; --teal-rgb:2 194 165; --red:#FA3B2B; --red-rgb:250 59 43; --amber:#FBA603; --amber-rgb:251 166 3; --pink:#F95C9B; --pink-rgb:249 92 155; --purple:#7C5CE1; --purple-rgb:124 92 225; --chartreuse:#DEFE24; --chartreuse-rgb:222 254 36; --slate:#AEC8E1; --slate-rgb:174 200 225; --gray:#8A8F98; --gray-rgb:138 143 152; /* added: was missing its twin */ /* Layer 2 — semantic aliases (role -> primitive) */ /* action */ --accent:var(--blue); --accent-rgb:var(--blue-rgb); --accent-hover:#385FE0; /* state + data valence — same hues, disambiguated by component + label, never hue alone */ --success:var(--teal); --success-rgb:var(--teal-rgb); --error:var(--red); --error-rgb:var(--red-rgb); --warning:var(--amber); --warning-rgb:var(--amber-rgb); /* added twin */ --info:var(--gray); --info-rgb:var(--gray-rgb); /* added twin — neutral, not blue */ /* taxonomy (category sorting) — unified --cat-* prefix (was split --c-* / --cat-*-rgb) */ --cat-create:var(--teal); --cat-create-rgb:var(--teal-rgb); --cat-research:var(--pink); --cat-research-rgb:var(--pink-rgb); --cat-strategy:var(--amber); --cat-strategy-rgb:var(--amber-rgb); --cat-testing:var(--purple); --cat-testing-rgb:var(--purple-rgb); --cat-writing:var(--slate); --cat-writing-rgb:var(--slate-rgb); --cat-thinking:var(--chartreuse); --cat-thinking-rgb:var(--chartreuse-rgb); /* type scale */ --text-xs:10px; --text-sm:12px; --text-base:14px; --text-md:16px; --text-lg:19px; --text-xl:23px; --text-2xl:32px; --text-3xl:40px; --text-4xl:56px; /* spacing */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; /* radius — four named tiers */ --radius-sm:8px; /* controls, inputs, small chrome, nav boxes, tooltips */ --radius-md:10px; /* menus, dropdowns, popovers, flyouts */ --radius-lg:20px; /* cards, widgets, content sections, modals */ --radius-pill:9999px;/* pills, dynamic island, avatar, badges */ --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 4px 16px rgba(0,0,0,.10); --shadow-lg:0 10px 24px rgba(0,0,0,.14); --shadow-overlay:0 25px 50px rgba(0,0,0,.28); --t-fast:150ms ease; --t-base:200ms ease; --t-slide:350ms cubic-bezier(.25,.46,.45,.94); --ease-spring:340ms cubic-bezier(.34,1.56,.64,1); /* overshoot — native, product-grade */ /* Where page content + flyouts begin (below the top chrome). One knob for the whole site — .app-main and .flyout both read it; nav + island keep the 20px viewport gutter above this. */ --content-top:100px; --font-primary:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'Space Mono',ui-monospace,'SF Mono',monospace; --ink-rgb:38 38 38; /* system chrome — surfaces that stay black in BOTH themes (nav, island, context menu). Intentional non-theme-flipping values, tokenized rather than bare hex. */ --chrome-black:#141413; --chrome-black-2:#2c2c2e; --chrome-text:#e8e8e8; --chrome-text-dim:#7d7d7d; } /* LIGHT (secondary option) */ [data-theme="light"]{ --bg:#F7F6F4; --surface:#FFFFFF; --muted:#EFEEEB; --border:#DBDBDB; --secondary:#757575; --primary:#262626; --dark:#141413; --hairline:rgba(0,0,0,.07); --shadow-md:0 4px 16px rgba(0,0,0,.08); --card-rest-shadow:var(--shadow-sm); --ink-rgb:38 38 38; /* nav + dynamic island chrome (2026-07-13: theme-aware by request — was pinned always-black; --chrome-* stays pinned black for the context menu, which wasn't part of this change). */ --nav-chrome:#FFFFFF; --nav-chrome-2:#EFEEEB; --nav-chrome-text:#262626; --nav-chrome-text-dim:#757575; } /* DARK (primary) */ [data-theme="dark"]{ --bg:#0E0E0E; --surface:#212123; --muted:#2d2d2d; --border:#3d3d3d; --secondary:#9a9a9a; --primary:#e8e8e8; --dark:#f5f5f5; --hairline:rgba(255,255,255,.06); --shadow-md:0 6px 22px rgba(0,0,0,.5); /* pixel-identical to the old always-black --chrome-* values (no dark-mode regression from this change). */ --nav-chrome:#141413; --nav-chrome-2:#2c2c2e; --nav-chrome-text:#e8e8e8; --nav-chrome-text-dim:#7d7d7d; --card-rest-shadow:none; --ink-rgb:232 232 232; } /* ===== BASE ============================================================ Minimal app base — converted pages rely on this instead of a page-local reset. Added with the app shell (#19). */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--font-primary);font-size:var(--text-base);line-height:1.45;background:var(--bg);color:var(--primary);-webkit-font-smoothing:antialiased} img,svg,video{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} a{color:inherit;text-decoration:none} /* ===== COMPONENTS ===================================================== */ /* --- Category hue modifiers (cross-component: pill, applet-card, loved-applet) --- Sets --cat (solid hue) + --cat-rgb (triplet) so a component tints itself with no inline style. Replaces the old inline --h/--hs, --ah/--ahr, --lh schemes. */ .cat-create { --cat:var(--cat-create); --cat-rgb:var(--cat-create-rgb); } .cat-research{ --cat:var(--cat-research); --cat-rgb:var(--cat-research-rgb); } .cat-strategy{ --cat:var(--cat-strategy); --cat-rgb:var(--cat-strategy-rgb); } .cat-testing { --cat:var(--cat-testing); --cat-rgb:var(--cat-testing-rgb); } .cat-writing { --cat:var(--cat-writing); --cat-rgb:var(--cat-writing-rgb); } .cat-thinking{ --cat:var(--cat-thinking); --cat-rgb:var(--cat-thinking-rgb); } .cat-blue { --cat:var(--accent); --cat-rgb:var(--accent-rgb); } /* selection / "All" */ /* --- Surface card base (shared borderless-at-rest -> hover stroke+shadow) --- Was copy-pasted across card/applet/loved/module. Owns bg + transparent border + radius + resting shadow. Consumers add size/padding and their hover stroke color. */ .surface-card{ background:var(--surface); border:1px solid transparent; border-radius:var(--radius-lg); box-shadow:var(--card-rest-shadow); transition:box-shadow var(--t-fast), border-color var(--t-fast); } /* ========================================================================== TEMPLATE UTILITIES — graduated here from the page sheets (#1273) ========================================================================== These lived in assets/css/pages/*.css, copied into SEVEN sheets: admin, agents, applet-run, chat, media, projects, settings. settings.css said what should happen to them — "ponytail: utilities stay page-local until a second surface needs them (then they graduate to design-system.css, not get copied again)" — and then six more surfaces needed them and copied them anyway. What that cost, and why this is a bug fix rather than tidying: `.text-2xl` and `.text-lg` were only ever defined in settings.css. So on /projects, `

` got the font-WEIGHT (which projects.css happened to carry) and not the font-SIZE, landing on the browser's default h1 of 28px against 32px everywhere else. Measured: Teams 32px/y=100, Projects 28px/y=119. Tucker reported it twice — once as a bug (#1252) and again as "still slightly off from those". The 19px was the same root cause: settings.css also carries the h1 margin reset, scoped `.app__content > header h1`, and /projects wraps in `.projects-browser` instead. Generalised below. Values are unchanged — the seven copies agreed on every one (four differed only in whitespace), so nothing restyles. */ .text-xs{font-size:var(--text-xs)} .text-sm{font-size:var(--text-sm)} .text-lg{font-size:var(--text-lg)} .text-2xl{font-size:var(--text-2xl)} .font-semibold{font-weight:600} .text-secondary{color:var(--secondary)} .mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mb-2{margin-bottom:var(--space-2)} .mb-4{margin-bottom:var(--space-4)} .flex{display:flex} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)} .gap-4{gap:var(--space-4)} /* A page title sits on the --content-top line, whatever wraps it. Was `.app__content > header h1` in settings.css, so any page using a different wrapper kept the UA h1 margin and sat ~19px low (#1273). */ header > h1{margin:0} /* --- Buttons (controls use radius-sm) --- */ .btn{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px; border-radius:var(--radius-sm); font:inherit; font-size:var(--text-sm); font-weight:600; border:1px solid transparent; cursor:pointer; transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)} .btn-primary{background:var(--accent); color:#fff} .btn-primary:hover{background:var(--accent-hover)} .btn-dark{background:var(--dark); color:var(--bg)} .btn-dark:hover{filter:brightness(1.12)} /* Border at rest, not just on hover: --surface fill matches a white card, so on one the button was invisible until you hovered it. The same --border the .control select uses, so a select + secondary-button pair reads as one control group. Hover deepens the stroke (like .btn-outline) to keep the cue. */ .btn-secondary{background:var(--surface); color:var(--primary); border-color:var(--border)} .btn-secondary:hover{border-color:var(--secondary); background:var(--muted)} .btn-ghost{background:transparent; color:var(--accent)} .btn-ghost:hover{background:rgb(var(--accent-rgb)/.12)} /* Outline: a real action, but not THE action. Where several buttons sit together and only one should carry weight, the rest are borders — .btn-secondary fills with --surface, which reads as a second filled button, and a bare .btn has no background at all so the browser paints its own (illegible on dark). */ .btn-outline{background:transparent; color:var(--primary); border-color:var(--border)} .btn-outline:hover{border-color:var(--secondary); background:var(--muted)} /* A disabled button has to LOOK disabled — the same reasoning (and the same values) as .switch[disabled] below. Without this a blocked primary action renders identically to a live one and only reveals itself on the click that does nothing; #704's Push-to-Figma button is the case that found it. pointer-events, not :not(:disabled) on four hover rules, because a disabled button's click is already inert — it is only the hover paint that lies. */ .btn:disabled{opacity:.45; pointer-events:none} /* A class-level `display` beats the [hidden] attribute's UA rule, so `btn.hidden = true` left the button on screen. Fixed once for .affirm-defer and then hit again on Memory's back button — so it belongs on the kit, not on each caller. */ .btn[hidden]{display:none} /* --- CTA circle (consolidated: was .btn-send + .a-cta + .arrow-cta) --- One round arrow button. Default neutral; .accent = send, .cat-fill = category- colored applet "use", .ink = dark on light (module cta). Per DESIGN.md rule 4 (no hover transforms on the element) the arrow nudges via the inner svg, not the button — a rule-compliant harmonization of the old element translateX. */ .cta-circle{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:none; padding:0; cursor:pointer; background:var(--muted); color:var(--primary); transition:background var(--t-fast),color var(--t-fast)} .cta-circle svg{transition:transform var(--t-fast)} .cta-circle:hover svg{transform:translateX(2px)} .cta-circle.accent{background:var(--accent); color:#fff} .cta-circle.accent:hover{background:var(--accent-hover)} .cta-circle.cat-fill{background:var(--cat,var(--accent)); color:#fff} .cta-circle.ink{background:var(--primary); color:var(--bg)} /* --- Pills (4 fills x md/sm, dot motif). Hue comes from a .cat-* modifier. --- */ .pill{display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px; border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:500; border:1px solid transparent; cursor:default; white-space:nowrap; transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast); line-height:1} .pill.sm{height:24px; padding:0 10px; font-size:11px; gap:6px} .pill .dot{width:7px; height:7px; border-radius:50%; flex:0 0 auto} .pill.sm .dot{width:6px; height:6px} .pill.tonal{background:rgb(var(--cat-rgb)/.15); border-color:rgb(var(--cat-rgb)/.5); color:var(--cat)} .pill.tonal:hover{background:rgb(var(--cat-rgb)/.22)} .pill.tonal .dot{background:var(--cat)} .pill.outline{background:transparent; border-color:rgb(var(--cat-rgb)/.55); color:var(--primary)} .pill.outline .dot{background:var(--cat)} .pill.outline:hover{background:rgb(var(--cat-rgb)/.08)} .pill.solid{background:var(--cat); border-color:transparent; color:#fff} .pill.solid.on-light{color:#141413} .pill.solid:hover{filter:brightness(1.06)} .pill.solid .dot{background:currentColor} .pill.ghost{background:transparent; border-color:transparent; color:var(--cat)} .pill.ghost:hover{background:rgb(var(--cat-rgb)/.1)} .pill.ghost .dot{background:currentColor} .pill.neutral.tonal{background:rgb(var(--ink-rgb)/.08); border-color:rgb(var(--ink-rgb)/.15); color:var(--primary)} .pill.neutral.tonal .dot{background:var(--secondary)} .pill.neutral.outline{border-color:var(--border); color:var(--primary)} .pill.neutral.outline .dot{background:var(--secondary)} .pill.neutral.ghost{color:var(--secondary)} .pill.neutral.ghost .dot{background:var(--secondary)} /* Accessible visually-hidden (sr-only) — in the base sheet so every page has it (it was previously copied into ~6 page stylesheets; design-system pages lacked it). */ .visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} /* --- Segmented control (sliding blue indicator), tab bar, filter bar, divider --- */ .segmented-control{position:relative; display:inline-flex; padding:4px; background:var(--muted); border-radius:var(--radius-pill)} .segmented-control-indicator{position:absolute; left:0; top:4px; bottom:4px; border-radius:var(--radius-pill); background:var(--accent); transition:transform var(--ease-spring), width var(--ease-spring); z-index:0} .segmented-control-item{position:relative; z-index:1; height:30px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; -webkit-appearance:none; appearance:none; font:inherit; font-size:var(--text-sm); font-weight:500; color:var(--secondary); cursor:pointer; white-space:nowrap; transition:color var(--t-base)} .segmented-control-item.is-active{color:#fff} /* Narrow viewports: the control can't wrap (the sliding indicator is absolutely positioned against one row), so it scrolls — the same treatment .applets-filters already uses for its pill row. Without this the last tabs are simply unreachable on a phone (#110). */ @media (max-width:768px){ .segmented-control{max-width:100%; overflow-x:auto; scrollbar-width:none} .segmented-control::-webkit-scrollbar{display:none} } .tab-bar{display:flex; gap:4px; align-items:center; flex-wrap:wrap} .tab-bar.filter-bar{gap:10px} .tab-bar.filter-bar .pill{padding:0 24px} .divider-vertical{width:2px; height:22px; background:var(--secondary); opacity:.4; margin:0 6px; border-radius:2px} /* --- Switch (iOS) + toggle button — product-grade spring motion --- */ .switch{position:relative; width:44px; height:26px; border-radius:9999px; background:var(--muted); border:1px solid var(--hairline); cursor:pointer; flex:0 0 auto; transition:background var(--t-base),border-color var(--t-base)} .switch::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform var(--ease-spring)} .switch.is-on{background:var(--accent); border-color:transparent} .switch.is-on::after{transform:translateX(18px)} /* A locked switch has to LOOK locked — an on-state you can't change is otherwise indistinguishable from one you can, and users click it repeatedly (#417). */ .switch[disabled]{opacity:.45; cursor:not-allowed} /* Search field — pill input with a leading icon. Was page-local to applets.php until #404 needed it too; promoted here rather than copied a second time. Markup:
*/ .search-field{position:relative; flex:1; max-width:560px} .search-field .control{width:100%; height:48px; padding-left:42px; border-radius:var(--radius-pill)} .search-field svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--secondary); pointer-events:none} .switch-row{display:flex; align-items:center; gap:12px; padding:9px 0; font-size:var(--text-sm); cursor:pointer; user-select:none} .toggle-button{width:38px; height:38px; border-radius:var(--radius-sm); background:var(--surface); color:var(--secondary); display:grid; place-items:center; cursor:pointer; transition:background var(--t-fast),color var(--t-fast)} .toggle-button:hover{background:var(--muted)} .toggle-button.is-on{background:rgb(var(--accent-rgb)/.15); color:var(--accent)} .toggle-button.is-on svg{animation:pop var(--ease-spring)} @keyframes pop{0%{transform:scale(.85)}55%{transform:scale(1.18)}100%{transform:scale(1)}} /* --- Form field (the one element that keeps a resting border) --- */ .field{max-width:380px; margin-bottom:18px} .field label{display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:7px} /* Bare form controls read as dark-theme controls BY DEFAULT (Tucker 2026-07-15): a text input / textarea / select that forgets the .control/.input class is no longer a white browser box — the recurring "why is this input white" bug is solved globally at the element level, so new UI can't reintroduce it. Low element-specificity, so .control/.input (and any component rule) still win where used; native checkbox/radio ignore bg/border, range/number keep their dedicated rules below. */ input, textarea, select{background:var(--surface); color:var(--primary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px} textarea{padding:10px 12px} input[type=checkbox], input[type=radio], input[type=range]{padding:0} input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent)} input::placeholder, textarea::placeholder{color:var(--secondary)} /* .control / .input layer the full sizing (width, height, focus ring) on top. */ .control, .input{width:100%; height:38px; padding:0 12px; background:var(--surface); color:var(--primary); border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; font-size:var(--text-base); transition:border-color var(--t-fast),box-shadow var(--t-fast)} textarea.control, textarea.input{height:auto; padding:10px 12px; resize:vertical; min-height:84px} .control:focus, .input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgb(var(--accent-rgb)/.25)} .control::placeholder, .input::placeholder{color:var(--secondary)} .field .help{font-size:11px; color:var(--secondary); margin-top:6px} .field.is-invalid .control, .field.is-invalid .input{border-color:var(--error)} .field.is-invalid .help{color:var(--error)} /* --- Card (unified content card) --- */ .card{padding:24px} .card.clickable{cursor:pointer} .card.clickable:hover{box-shadow:var(--shadow-md); border-color:var(--border)} .card-title{font-weight:600; font-size:var(--text-base)} .card-description{color:var(--secondary); font-size:var(--text-sm); margin-top:6px; line-height:1.5} .card-cta{display:inline-flex; align-items:center; gap:6px; margin-top:16px; height:30px; padding:0 12px; border-radius:var(--radius-pill); background:rgb(var(--accent-rgb)/.15); color:var(--accent); font-size:var(--text-sm); font-weight:600; cursor:pointer; border:1px solid rgb(var(--accent-rgb)/.32); transition:background var(--t-fast)} .card-cta:hover{background:rgb(var(--accent-rgb)/.24)} /* --- Applet library card — rest face is the HEADLINE ONLY (vertically centered, left-aligned; no icon, no category label — Tucker 2026-07-06). Hover: category stroke + name cross-fades to description + actions; icons live only on the reveal side. Category hue via .cat-* on the root. --- */ .applet-card{position:relative; width:200px; height:200px; overflow:hidden; cursor:pointer; transition:box-shadow var(--t-base)} /* hover: thick FADED category stroke, inset (no layout shift), inside the radius */ .applet-card:hover{box-shadow:inset 0 0 0 6px rgb(var(--cat-rgb, var(--gray-rgb)) / .25)} .applet-card-rest, .applet-card-reveal{position:absolute; inset:18px; display:flex; flex-direction:column; transition:opacity 160ms ease} .applet-card-rest{justify-content:center} .applet-card-name{font-weight:600; font-size:var(--text-md); line-height:1.3} .applet-card-reveal{opacity:0; transition:opacity 160ms ease 40ms} .applet-card:hover .applet-card-rest{opacity:0} .applet-card:hover .applet-card-reveal{opacity:1} .applet-card-description{font-size:var(--text-sm); color:var(--primary); line-height:1.45; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden} .applet-card-actions{margin-top:auto; display:flex; align-items:center; justify-content:flex-end; gap:12px} .applet-card-action{display:grid; place-items:center; color:var(--secondary); cursor:pointer; transition:color var(--t-fast); background:none; border:none; padding:0} .applet-card-action:hover{color:var(--primary)} /* --- Loved applet — small square, two-tone name, hover = stroke only --- */ .loved-applet{width:128px; height:104px; padding:16px; display:flex; align-items:flex-start; cursor:pointer; transition:box-shadow var(--t-base); overflow:hidden} .loved-applet:hover{box-shadow:inset 0 0 0 6px rgb(var(--cat-rgb, var(--gray-rgb)) / .25)} .loved-applet-name{font-size:var(--text-base); font-weight:600; line-height:1.22} .loved-applet-name .dim{color:var(--secondary)} /* --- Menu / dropdown (radius-md, theme-aware) --- */ .menu{width:230px; background:var(--surface); color:var(--primary); border-radius:var(--radius-md); padding:8px; box-shadow:var(--shadow-overlay)} .menu-header{padding:10px 12px 12px} .menu-name{font-size:var(--text-base); font-weight:600} .menu-role{font-size:11px; color:var(--secondary); margin-top:2px} .menu-group{padding:6px 0; border-top:1px solid var(--hairline)} .menu-item{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius-sm); font-size:var(--text-sm); cursor:pointer; color:var(--primary); transition:background var(--t-fast); background:none; border:none; width:100%; text-align:left} .menu-item:hover{background:var(--muted)} /* Third time for this exact trap — see the note above .btn[hidden]. The author display:flex above beats the UA sheet's [hidden]{display:none}, so #953 retired the Affirmations row by marking it `hidden` and it stayed on screen for four days: the account menu showed Memory AND Affirmations, which is the one thing that commit existed to stop. The badge vanished correctly because .menu-count[hidden] was already here, so it read as an ordinary empty row. */ .menu-item[hidden]{display:none} /* --- Context menu — horizontal, right-click, always dark (system chrome) --- */ .context-menu{display:inline-flex; align-items:center; gap:2px; background:var(--chrome-black); border-radius:var(--radius-md); padding:6px; box-shadow:var(--shadow-overlay); width:fit-content} .context-menu-item{display:inline-flex; align-items:center; gap:9px; height:32px; padding:0 14px; border-radius:var(--radius-sm); color:var(--chrome-text); font-size:var(--text-sm); font-weight:500; cursor:pointer; transition:background var(--t-fast); white-space:nowrap} .context-menu-item:hover{background:rgba(255,255,255,.09)} .context-menu-item.is-primary::before{content:""; width:13px; height:13px; border-radius:50%; border:2px solid var(--accent); flex:0 0 auto} .context-menu-divider{width:1px; height:18px; background:rgba(255,255,255,.16); margin:0 4px; flex:0 0 auto} /* --- Dynamic island — THEME-AWARE: --nav-chrome is white in light and near-black in dark (#1080 — the old "always black in both themes" line here was wrong). Pill radius, 380px on desktop, fluid on phones (#110). Island pills are island-scoped (NOT the theme-aware .pill) because they sit on the nav-chrome surface, not on the page. --- */ .dynamic-island{position:relative; display:inline-flex; align-items:center; gap:12px; height:48px; width:380px; max-width:380px; padding:0 8px 0 18px; border-radius:var(--radius-pill); background:var(--nav-chrome); color:var(--nav-chrome-text); box-shadow:var(--shadow-md)} .dynamic-island-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto} .dynamic-island-label{flex:1 1 auto; min-width:0; overflow:hidden} .dynamic-island-label-inner{display:inline-block; white-space:nowrap; font-size:var(--text-sm); font-weight:500} .dynamic-island.ticker .dynamic-island-label{-webkit-mask-image:linear-gradient(to right,#000 80%,transparent 100%); mask-image:linear-gradient(to right,#000 80%,transparent 100%)} .dynamic-island.ticker .dynamic-island-label-inner{transition:transform 3.8s linear} .dynamic-island.ticker:hover .dynamic-island-label-inner,.dynamic-island.ticker.cue .dynamic-island-label-inner{transform:translateX(var(--shift,0))} /* .ticker/.cue/--shift are driven by the island ticker block in assets/js/shell.js (#1081). They shipped here with the showcase and sat unused for months — nothing applied either class or set --shift — so a long label just ended in a hard clip mid-word, with the mask gated behind .ticker and therefore also absent. */ @media (prefers-reduced-motion: reduce){ /* Never animate — but keep the mask above, and shell.js keeps the full string on the label's title so it stays reachable. Same shape as the .dynamic-island-progress.indeterminate rule below. */ .dynamic-island.ticker .dynamic-island-label-inner{transition:none} .dynamic-island.ticker:hover .dynamic-island-label-inner,.dynamic-island.ticker.cue .dynamic-island-label-inner{transform:none} } .dynamic-island-meta{margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto} .dynamic-island-progress{width:54px; height:4px; border-radius:9999px; background:rgb(var(--ink-rgb)/.18); overflow:hidden} .dynamic-island-progress i{display:block; height:100%; width:62%; background:var(--accent)} /* Indeterminate: a background task is running but reports no percentage (#399). */ .dynamic-island-progress.indeterminate i{width:38%; animation:island-indeterminate 1.5s ease-in-out infinite} @keyframes island-indeterminate{from{transform:translateX(-100%)} to{transform:translateX(264%)}} @media (prefers-reduced-motion: reduce){.dynamic-island-progress.indeterminate i{width:100%; animation:none; opacity:.55}} .dynamic-island-timer{font-family:var(--font-mono); font-size:12px; color:var(--cat-create)} .dynamic-island-soft{font-family:var(--font-mono); font-size:11px; color:rgb(var(--ink-rgb)/.5)} .dynamic-island-pill{height:22px; padding:0 11px; border-radius:9999px; font-size:11px; font-weight:600; display:inline-flex; align-items:center} /* The pill is an for navigation and a