/* ========================================================================== base.css — Wave 0 component kit for the new console shell. RULES THIS FILE MUST FOLLOW (see task spec / semantic variable contract): - Every color reference is one of: --surface, --surface-2, --text, --text-muted, --line, --accent, --on-accent, --focus-ring, --good, --warn, --crisis, --brand-accent. NEVER a literal hex/rgb/hsl anywhere below — this file is grep-gated by check-theme.mjs. - Where a translucent variant of a semantic color is needed (scrims, shimmer, disabled overlays) we use color-mix(in srgb, var(--X) N%, transparent) instead of rgba()/hsla() literals, so no raw color value ever appears in this file. - --accent/--brand-accent resolution (per-theme, per-org) happens in the token stylesheet that defines data-theme/data-mode blocks, NOT here. This file only *consumes* var(--accent) etc. - Nav STRUCTURE (bottom tab bar vs. left rail) is switched by a body class — `nav-compact` or `nav-full` — set by JS via matchMedia at the ~640px breakpoint (wired in a later stage). Both layouts are fully styled here now, keyed off those two body classes. - Class names for toast/modal below are chosen to match what app/ui.js actually renders (kcc-toast / kcc-toast show / kcc-toast show err from toast(); openModal()/closeModal() toggle a bare element's inline display + aria-hidden, so `.kcc-modal-overlay` below supplies the *default* (open) display value that reasserts itself once JS clears the inline `display:none` override — markup for a closed modal must start with an explicit inline `style="display:none"`, same as the existing index.html modals). - prefers-reduced-motion: every transition/animation declared below lives inside a `(prefers-reduced-motion: no-preference)` block, and a single catch-all `(prefers-reduced-motion: reduce)` block at the end forces `animation:none; transition:none` on every animated surface in this file as a belt-and-suspenders backstop. ========================================================================== */ /* ---------- reset / base ---------- Document-level base: this runs regardless of whether a given page wraps its content in .kcc-shell (the tool proof-of-concept in Wave 0 does not, since the full shell chrome — topbar/rail/tabbar — is wired in a later phase). Sets the professional system-font stack (no third-party font request here — Google Fonts vs. self-hosting the brand fonts is still an open plan question; this stack is dependency-free and reads as clean/professional in the interim) plus the base surface/text colors so nothing ever falls back to the browser's default serif + 8px margin. */ html { color-scheme: light dark; /* Root font-size is the anchor for the whole rem-based type/space scale AND for the user-facing TEXT-SIZE control (user menu). Comfortable = 100% (the browser default, ~16px); Large/Larger scale everything that uses rem up together. Stamped pre-paint on as data-textsize by app.html, so there's no flash. */ font-size: 100%; } :root[data-textsize='large'] { font-size: 112.5%; } :root[data-textsize='larger'] { font-size: 125%; } /* ========================================================================== Design-scale tokens (type / weight / spacing / radius / elevation / motion). Colors are NOT here — those live in styles/tokens.css per theme+mode. Every value below is unit-based (rem/ms/cubic-bezier) or a mode-aware color-mix, so this block adds no literal color to the grep-gated surface. ========================================================================== */ :root { /* Heading face — warm, surgical: titles / hero / login only (spec §1). Body stays system. */ --font-heading: 'Fraunces', 'Lora', Georgia, serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Type scale + paired line-heights. */ --fs-display: 1.75rem; --lh-display: 1.15; --fs-title: 1.3125rem; --lh-title: 1.25; --fs-heading: 1.0625rem; --lh-heading: 1.35; --fs-body: 1rem; --lh-body: 1.5; --fs-sm: 0.875rem; --lh-sm: 1.45; --fs-label: 0.8125rem; --lh-label: 1.35; --fs-caption: 0.75rem; --lh-caption: 1.35; --fs-micro: 0.6875rem; --lh-micro: 1.3; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Spacing — 4px grid. */ --space-1: 0.25rem; --space-1_5: 0.375rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; /* Radius. */ --radius-xs: 0.375rem; --radius-sm: 0.5rem; --radius-md: 0.625rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-pill: 999px; /* Elevation — warm + subtle. Mode-aware: shadow color mixes over --text in light. */ --shadow-1: 0 1px 2px 0 color-mix(in srgb, var(--text) 8%, transparent); --shadow-2: 0 4px 12px -2px color-mix(in srgb, var(--text) 14%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--text) 10%, transparent); --shadow-3: 0 14px 34px -6px color-mix(in srgb, var(--text) 22%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--text) 14%, transparent); /* Motion — barely-there, confirms causality (spec §1). */ --dur-1: 80ms; --dur-2: 140ms; --dur-3: 200ms; --dur-4: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); } /* Dark mode: shadows read as a soft dark halo around the (lighter) floating surface, mixed over --surface (the dark page color) since there's no darker semantic token. Elevation in dark leans mostly on the lifted --surface-2 background + hairline, per spec. */ :root[data-mode='dark'] { --shadow-1: 0 1px 2px 0 color-mix(in srgb, var(--surface) 70%, transparent); --shadow-2: 0 4px 14px -2px color-mix(in srgb, var(--surface) 82%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--surface) 72%, transparent); --shadow-3: 0 16px 40px -6px color-mix(in srgb, var(--surface) 88%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--surface) 80%, transparent); } body { margin: 0; min-height: 100dvh; background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Screen-reader-only utility (visible content stays visible; this is for a11y-only labels). */ .kcc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Tabular-numerals utility for meters, %, timestamps, counts, hex (spec §1). */ .kcc-tnum { font-variant-numeric: tabular-nums; } *, *::before, *::after { box-sizing: border-box; } /* Shared focus treatment for every interactive element this kit renders. --focus-ring is intentionally NOT derived from brand hue (contract), so focus stays visible regardless of org accent color. */ .kcc-shell a:focus-visible, .kcc-shell button:focus-visible, .kcc-shell input:focus-visible, .kcc-shell select:focus-visible, .kcc-shell textarea:focus-visible, .kcc-shell [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* ========================================================================== App shell — top bar + content, with either a bottom tab bar (nav-compact) or a left rail (nav-full). Both are written now; JS toggles the body class in a later stage. ========================================================================== */ .kcc-shell { display: flex; flex-direction: column; min-height: 100dvh; background: var(--surface); color: var(--text); } .kcc-topbar { position: sticky; top: 0; z-index: 30; flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); min-height: 3.5rem; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); } .kcc-topbar.is-scrolled { box-shadow: var(--shadow-1); } .kcc-topbar-lead { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .kcc-topbar-mid { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); min-width: 0; } .kcc-topbar-actions { display: flex; align-items: center; gap: var(--space-1_5); flex: 0 0 auto; } /* Brand: logo/monogram + org name (serif). */ .kcc-brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--text); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-1); min-width: 0; } .kcc-brand-mark { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: var(--radius-sm); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--accent); font-weight: var(--fw-bold); font-size: var(--fs-sm); } .kcc-brand-mark .kcc-brand-logo-img { width: 100%; height: 100%; object-fit: cover; display: block; } .kcc-brand-name { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-heading); letter-spacing: 0.005em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; } /* Workspace-lens switcher (a view lens, not a privilege change). */ .kcc-lens { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); } .kcc-lens-btn { display: inline-flex; align-items: center; gap: var(--space-1_5); border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-medium); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; } .kcc-lens-btn:hover { color: var(--text); } .kcc-lens-btn.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } .kcc-lens-ico { display: inline-flex; font-size: 1.05em; } /* Breadcrumb page label (body font — serif is reserved for brand + content H1). */ .kcc-crumb { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; } @media (prefers-reduced-motion: no-preference) { .kcc-crumb.is-rising { animation: kcc-rise var(--dur-3) var(--ease-out); } } @keyframes kcc-rise { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: translateY(0); } } /* Persistent search entry (opens the ⌘K palette). */ .kcc-search-box { display: inline-flex; align-items: center; gap: var(--space-2); width: min(20rem, 100%); max-width: 20rem; padding: var(--space-1_5) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: var(--fs-sm); cursor: text; text-align: left; } .kcc-search-box:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .kcc-search-text { flex: 1 1 auto; } .kcc-search-kbd { margin-left: auto; } .kcc-search-icon-only { display: none; } .kcc-kbd { font-family: var(--font-body); font-size: var(--fs-micro); color: var(--text-muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0.05rem 0.35rem; line-height: 1.4; } /* Row that holds the optional left rail + the main content pane. */ .kcc-body { flex: 1 1 auto; display: flex; min-height: 0; /* allow children to scroll instead of pushing the shell */ } .kcc-content { position: relative; flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: var(--space-4); } .kcc-content:focus { outline: none; } /* it's a scroll/focus target (tabindex=-1), not a control */ .kcc-content-inner { max-width: 60rem; margin: 0 auto; } @media (prefers-reduced-motion: no-preference) { .kcc-content-inner.is-entering { animation: kcc-tool-enter var(--dur-3) var(--ease-out); } } @keyframes kcc-tool-enter { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: translateY(0); } } /* Page head — the H1 (focus target) + short description, above the mounted tool. */ .kcc-page-head { margin-bottom: var(--space-4); } .kcc-page-head:empty { display: none; } .kcc-page-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-title); line-height: var(--lh-title); color: var(--text); margin: 0; } .kcc-page-title:focus { outline: none; } /* moved-to focus target; ring would read as an error */ .kcc-page-desc { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--fs-sm); } /* Hybrid welcome header (role-tailored) — serif hero atop the primary tool. */ .kcc-welcome { margin-bottom: var(--space-2); } .kcc-welcome-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-display); line-height: var(--lh-display); color: var(--text); margin: 0; } .kcc-welcome-title:focus { outline: none; } .kcc-welcome-sub { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--fs-body); } .kcc-welcome-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .kcc-welcome-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .kcc-welcome-nudge { margin-top: var(--space-4); } /* --- nav-full: left rail --- */ .kcc-rail { display: none; /* default: hidden until body.nav-full */ flex-direction: column; flex: 0 0 auto; width: 15rem; padding: var(--space-3); background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; } body.nav-full .kcc-rail { display: flex; } /* Positioned wrapper so the sliding indicator can be absolutely placed against the items. */ .kcc-rail-nav { position: relative; } .kcc-rail-indicator { position: absolute; left: 0; top: 0; width: 3px; height: 0; border-radius: var(--radius-pill); background: var(--accent); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .kcc-rail-indicator { transition: transform var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-standard); } } .kcc-nav-section + .kcc-nav-section { margin-top: var(--space-3); } .kcc-nav-section-title { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); padding: 0 var(--space-2) var(--space-1); } .kcc-rail-list { display: flex; flex-direction: column; gap: 0.15rem; } .kcc-rail-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; background: transparent; border: none; text-align: left; cursor: pointer; font: inherit; font-size: var(--fs-sm); } .kcc-rail-item:hover { background: var(--surface-2); color: var(--text); } .kcc-rail-item.is-active { background: var(--surface-2); color: var(--accent); font-weight: var(--fw-semibold); } .kcc-nav-ico { flex: 0 0 auto; display: inline-flex; font-size: 1.15em; } .kcc-nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kcc-nav-lock { flex: 0 0 auto; display: inline-flex; color: var(--warn); font-size: 0.9em; } @media (prefers-reduced-motion: no-preference) { .kcc-rail-item { transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); } } /* --- nav-compact: bottom tab bar --- */ .kcc-tabbar { display: none; /* default: hidden until body.nav-compact */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: stretch; justify-content: space-around; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0); } body.nav-compact .kcc-tabbar { display: flex; } /* Reserve room so tabbar-fixed content doesn't hide the last bit of content. */ body.nav-compact .kcc-content { padding-bottom: calc(var(--space-4) + 3.5rem + env(safe-area-inset-bottom, 0)); } /* Sliding underline indicator (signature motion, mirrors the rail bar). */ .kcc-tab-indicator { position: absolute; top: 0; left: 0; height: 3px; width: 0; border-radius: var(--radius-pill); background: var(--accent); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .kcc-tab-indicator { transition: transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-standard); } } .kcc-tab-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: var(--space-2) var(--space-1) calc(var(--space-2) + 0.1rem); min-height: 3.5rem; background: transparent; border: none; color: var(--text-muted); font: inherit; font-size: var(--fs-micro); font-weight: var(--fw-medium); cursor: pointer; } .kcc-tab-ico { font-size: 1.35rem; display: inline-flex; } .kcc-tab-item.is-active { color: var(--accent); } /* ========================================================================== Buttons ========================================================================== */ .kcc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: 0.5rem; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; white-space: nowrap; } .kcc-btn:disabled { cursor: not-allowed; /* translucent variant of --text-muted, no literal color values */ color: color-mix(in srgb, var(--text-muted) 70%, transparent); border-color: var(--line); background: var(--surface-2); } .kcc-btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .kcc-btn-primary:hover:not(:disabled) { /* slightly recessed accent on hover, still no literal color */ background: color-mix(in srgb, var(--accent) 88%, var(--text)); } .kcc-btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--line); } .kcc-btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-2) 85%, var(--text)); } .kcc-btn-danger { background: var(--surface-2); color: var(--crisis); border-color: var(--crisis); } .kcc-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-2) 80%, var(--crisis)); } /* ========================================================================== Form inputs ========================================================================== */ .kcc-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } .kcc-field-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); } .kcc-field-hint { font-size: 0.75rem; color: var(--text-muted); } .kcc-input, .kcc-select, .kcc-textarea { width: 100%; padding: 0.55rem 0.7rem; border-radius: 0.5rem; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; } .kcc-input::placeholder, .kcc-textarea::placeholder { color: var(--text-muted); } .kcc-input:disabled, .kcc-select:disabled, .kcc-textarea:disabled { background: var(--surface-2); color: var(--text-muted); } .kcc-textarea { resize: vertical; min-height: 5rem; } .kcc-field.has-error .kcc-input, .kcc-field.has-error .kcc-select, .kcc-field.has-error .kcc-textarea { border-color: var(--crisis); } .kcc-field-error { font-size: 0.75rem; color: var(--crisis); } /* ========================================================================== Toast — must match app/ui.js exactly: toast() sets className to "kcc-toast" (hidden), "kcc-toast show" (visible/ok), or "kcc-toast show err" (visible/error). ========================================================================== */ .kcc-toast { position: fixed; left: 50%; bottom: 1.25rem; z-index: 50; max-width: min(90vw, 22rem); padding: 0.65rem 1rem; border-radius: 0.6rem; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-left: 3px solid var(--good); box-shadow: none; opacity: 0; visibility: hidden; transform: translate(-50%, 0.5rem); pointer-events: none; } .kcc-toast.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); } .kcc-toast.show.err { border-left-color: var(--crisis); } @media (prefers-reduced-motion: no-preference) { .kcc-toast { transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } } /* ========================================================================== Modal / overlay openModal(el)/closeModal() only toggle inline display + aria-hidden on a bare element, so the *stylesheet* default below is the OPEN appearance; markup must start with an inline style="display:none" to be closed. ========================================================================== */ .kcc-modal-overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 1rem; /* scrim: translucent --text over --surface, no rgba()/hex literal */ background: color-mix(in srgb, var(--text) 55%, transparent); } .kcc-modal-overlay[aria-hidden='true'] { display: none; } .kcc-modal { width: 100%; max-width: 30rem; max-height: min(90vh, 40rem); overflow-y: auto; border-radius: 0.75rem; background: var(--surface); color: var(--text); border: 1px solid var(--line); padding: 1.25rem; } .kcc-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .kcc-modal-title { font-weight: 700; color: var(--text); } .kcc-modal-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 1.1rem; line-height: 1; padding: 0.2rem; } .kcc-modal-close:hover { color: var(--text); } .kcc-modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } @media (prefers-reduced-motion: no-preference) { .kcc-modal { animation: kcc-modal-in 0.16s ease; } @keyframes kcc-modal-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } } } /* ========================================================================== Card ========================================================================== */ .kcc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1rem; } .kcc-card + .kcc-card { margin-top: 0.75rem; } .kcc-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; } .kcc-card-title { font-weight: 700; color: var(--text); } .kcc-card-subtitle { font-size: 0.8rem; color: var(--text-muted); } .kcc-card.is-raised { background: var(--surface-2); } /* Status dot for cards that show availability/urgency (good/warn/crisis). */ .kcc-status-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--good); flex: 0 0 auto; } .kcc-status-dot.is-warn { background: var(--warn); } .kcc-status-dot.is-crisis { background: var(--crisis); } /* ========================================================================== Loading state — skeleton + spinner ========================================================================== */ .kcc-skeleton { display: block; border-radius: 0.4rem; background: linear-gradient( 90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 60%, var(--line)) 37%, var(--surface-2) 63% ); background-size: 200% 100%; color: transparent; /* so skeletons can wrap placeholder text without showing it */ } .kcc-skeleton.kcc-skeleton-text { height: 0.8em; margin: 0.2em 0; } .kcc-skeleton.kcc-skeleton-line { height: 1rem; width: 100%; } .kcc-skeleton.kcc-skeleton-block { height: 5rem; width: 100%; } .kcc-skeleton.kcc-skeleton-avatar { height: 2.5rem; width: 2.5rem; border-radius: 999px; } @media (prefers-reduced-motion: no-preference) { .kcc-skeleton { animation: kcc-skeleton-shimmer 1.4s ease-in-out infinite; } @keyframes kcc-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } } .kcc-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 2px solid var(--line); border-top-color: var(--accent); vertical-align: middle; } .kcc-spinner.is-lg { width: 2rem; height: 2rem; border-width: 3px; } @media (prefers-reduced-motion: no-preference) { .kcc-spinner { animation: kcc-spin 0.7s linear infinite; } @keyframes kcc-spin { to { transform: rotate(360deg); } } } /* ========================================================================== Buttons — sizes, ghost, icon-button, block, active press, loading (additive to the base .kcc-btn / primary / secondary / danger above). ========================================================================== */ .kcc-btn { border-radius: var(--radius-sm); } .kcc-btn:active:not(:disabled) { transform: scale(0.98); } .kcc-btn-sm { padding: var(--space-1_5) var(--space-3); font-size: var(--fs-label); } .kcc-btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--fs-body); min-height: 44px; } .kcc-btn-block { width: 100%; } .kcc-btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .kcc-btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); } .kcc-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .kcc-btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.1em; height: 1.1em; margin: -0.55em 0 0 -0.55em; border-radius: var(--radius-pill); border: 2px solid color-mix(in srgb, var(--on-accent) 45%, transparent); border-top-color: var(--on-accent); } @media (prefers-reduced-motion: no-preference) { .kcc-btn { transition: background var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); } .kcc-btn.is-loading::after { animation: kcc-spin 0.7s linear infinite; } } /* Icon-only button (≥44px tap target). */ .kcc-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 1.15rem; } .kcc-iconbtn:hover { background: var(--surface-2); color: var(--text); } .kcc-bell.has-unread { color: var(--text); } .kcc-count-badge { position: absolute; top: 0.35rem; right: 0.35rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: var(--radius-pill); background: var(--crisis); color: var(--on-accent); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } .kcc-count-badge[hidden] { display: none; } /* ========================================================================== Avatar ========================================================================== */ .kcc-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--accent); font-weight: var(--fw-bold); font-size: var(--fs-sm); } .kcc-avatar-lg { width: 2.75rem; height: 2.75rem; font-size: var(--fs-body); } .kcc-avatar-btn { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); cursor: pointer; } .kcc-avatar-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } /* ========================================================================== User menu (dropdown) ========================================================================== */ .kcc-usermenu-wrap { position: relative; } .kcc-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60; width: 18rem; max-width: calc(100vw - 1.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-3); } :root[data-mode='dark'] .kcc-menu { background: var(--surface-2); } .kcc-menu[hidden] { display: none; } .kcc-menu-id { display: flex; gap: var(--space-2); align-items: center; padding-bottom: var(--space-2); } .kcc-menu-id-text { min-width: 0; display: flex; flex-direction: column; } .kcc-menu-id-name { font-weight: var(--fw-semibold); color: var(--text); } .kcc-menu-id-email { font-size: var(--fs-caption); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kcc-menu-group { padding: var(--space-2) 0; } .kcc-menu-group-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-1_5); } .kcc-menu-sep { height: 1px; background: var(--line); margin: var(--space-1) 0; } .kcc-menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 44px; padding: var(--space-2); border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); border-radius: var(--radius-sm); cursor: pointer; text-align: left; } .kcc-menu-item:hover { background: var(--surface-2); } .kcc-menu-item-danger { color: var(--crisis); } .kcc-swatch-row { display: flex; flex-wrap: wrap; gap: var(--space-2); } .kcc-swatch { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); border: 2px solid var(--line); cursor: pointer; padding: 0; background: linear-gradient(135deg, var(--kcc-swatch-b) 0 50%, var(--kcc-swatch-a) 50% 100%); } .kcc-swatch.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } @media (prefers-reduced-motion: no-preference) { .kcc-menu { animation: kcc-pop var(--dur-2) var(--ease-out); } .kcc-menu-item, .kcc-swatch { transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); } } @keyframes kcc-pop { from { opacity: 0; transform: translateY(-0.25rem) scale(0.98); } to { opacity: 1; transform: none; } } /* ========================================================================== Segmented control (light/dark + text-size in the menu; reusable) ========================================================================== */ .kcc-seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .kcc-seg-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1_5); min-height: 40px; padding: var(--space-1_5) var(--space-2); border: 0; background: var(--surface); color: var(--text-muted); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-medium); cursor: pointer; } .kcc-seg-btn + .kcc-seg-btn { border-left: 1px solid var(--line); } .kcc-seg-btn:hover { background: var(--surface-2); color: var(--text); } .kcc-seg-btn.is-active { background: var(--accent); color: var(--on-accent); } /* ========================================================================== Chip / Badge (positive-achievement flavor) ========================================================================== */ .kcc-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); border: 1px solid var(--line); font-size: var(--fs-label); font-weight: var(--fw-medium); } .kcc-chip-good { background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: color-mix(in srgb, var(--good) 72%, var(--text)); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); } .kcc-chip-warn { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: color-mix(in srgb, var(--warn) 72%, var(--text)); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); } .kcc-chip-accent { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: color-mix(in srgb, var(--accent) 78%, var(--text)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .kcc-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: var(--fw-semibold); background: color-mix(in srgb, var(--good) 15%, var(--surface)); color: color-mix(in srgb, var(--good) 70%, var(--text)); border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line)); } .kcc-badge-warn { background: color-mix(in srgb, var(--warn) 15%, var(--surface)); color: color-mix(in srgb, var(--warn) 70%, var(--text)); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); } .kcc-badge-neutral { background: var(--surface-2); color: var(--text-muted); border-color: var(--line); } /* ========================================================================== Switch (toggle). Markup contract: ========================================================================== */ .kcc-switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; flex: 0 0 auto; } .kcc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .kcc-switch-track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); } .kcc-switch-thumb { position: absolute; top: 50%; left: 0.2rem; width: 1.05rem; height: 1.05rem; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-1); transform: translateY(-50%); } .kcc-switch input:checked ~ .kcc-switch-track { background: var(--accent); border-color: var(--accent); } .kcc-switch input:checked ~ .kcc-switch-thumb { transform: translate(1.2rem, -50%); } @media (prefers-reduced-motion: no-preference) { .kcc-switch-track, .kcc-switch-thumb { transition: background var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-out); } } /* ========================================================================== Meter (bar + ring). Bar drives width inline; ring drives --kcc-ring (0-100). ========================================================================== */ .kcc-meter { height: 0.5rem; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; } .kcc-meter-fill { height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--accent); } .kcc-meter-fill.is-good { background: var(--good); } .kcc-meter-fill.is-warn { background: var(--warn); } @media (prefers-reduced-motion: no-preference) { .kcc-meter-fill { transition: width var(--dur-4) var(--ease-out); } } .kcc-meter-ring { width: 3rem; height: 3rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(var(--accent) calc(var(--kcc-ring, 0) * 1%), var(--surface-2) 0); } .kcc-meter-ring::before { content: ''; width: 2.2rem; height: 2.2rem; border-radius: var(--radius-pill); background: var(--surface); } /* ========================================================================== Banner (inline notice / gentle nudge) ========================================================================== */ .kcc-banner { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-2); } .kcc-banner-ico { flex: 0 0 auto; color: var(--accent); margin-top: 0.1rem; display: inline-flex; } .kcc-banner-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .kcc-banner-title { font-weight: var(--fw-semibold); color: var(--text); } .kcc-banner-text { color: var(--text-muted); font-size: var(--fs-sm); } .kcc-banner-close { flex: 0 0 auto; width: 2rem; height: 2rem; font-size: 1rem; } .kcc-banner-info { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); } .kcc-banner-info .kcc-banner-ico { color: var(--accent); } .kcc-banner-good { background: color-mix(in srgb, var(--good) 10%, var(--surface)); border-color: color-mix(in srgb, var(--good) 30%, var(--line)); } .kcc-banner-good .kcc-banner-ico { color: var(--good); } .kcc-banner-warn { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); } .kcc-banner-warn .kcc-banner-ico { color: var(--warn); } .kcc-banner-crisis { background: color-mix(in srgb, var(--crisis) 10%, var(--surface)); border-color: color-mix(in srgb, var(--crisis) 30%, var(--line)); } .kcc-banner-crisis .kcc-banner-ico { color: var(--crisis); } /* ========================================================================== State block (loading/empty/error/offline/forbidden) — one shared pattern. ========================================================================== */ .kcc-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); max-width: 28rem; margin: var(--space-5) auto; } .kcc-state-ico { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); color: var(--accent); font-size: 1.5rem; } .kcc-state-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-title); color: var(--text); margin: 0; } .kcc-state-body { color: var(--text-muted); margin: 0; } .kcc-state-actions { margin-top: var(--space-2); } /* ========================================================================== Tooltip / "what's this?" helper. Contract: a small button.kcc-whatsthis or any element.kcc-tooltip carrying data-tip="one friendly sentence". Suppressed on touch (no hover) so it never gets stuck open on a tap. ========================================================================== */ .kcc-whatsthis { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-micro); font-weight: var(--fw-bold); cursor: help; padding: 0; vertical-align: middle; } .kcc-whatsthis:hover, .kcc-whatsthis:focus-visible { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .kcc-tooltip { position: relative; } @media (hover: hover) { .kcc-whatsthis, .kcc-tooltip[data-tip] { position: relative; } .kcc-whatsthis[data-tip]:hover::after, .kcc-whatsthis[data-tip]:focus-visible::after, .kcc-tooltip[data-tip]:hover::after, .kcc-tooltip[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); width: max-content; max-width: 16rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-2); font-size: var(--fs-caption); font-weight: var(--fw-regular); line-height: 1.4; text-align: left; white-space: normal; z-index: 70; } } /* ========================================================================== Command palette (⌘K) ========================================================================== */ .kcc-palette-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--space-4) var(--space-4); background: color-mix(in srgb, var(--text) 45%, transparent); } .kcc-palette-backdrop[hidden] { display: none; } .kcc-palette { width: 100%; max-width: 34rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; } :root[data-mode='dark'] .kcc-palette { background: var(--surface-2); } .kcc-palette-search { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--line); } .kcc-palette-ico { color: var(--text-muted); display: inline-flex; } .kcc-palette-input { flex: 1 1 auto; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-body); min-width: 0; } .kcc-palette-input:focus { outline: none; } .kcc-palette-results { max-height: 22rem; overflow-y: auto; padding: var(--space-2); } .kcc-palette-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2); border: 0; background: transparent; color: var(--text); font: inherit; border-radius: var(--radius-sm); cursor: pointer; text-align: left; } .kcc-palette-item:hover, .kcc-palette-item.is-sel { background: var(--surface-2); } .kcc-palette-item.is-sel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } .kcc-palette-item-ico { color: var(--text-muted); display: inline-flex; font-size: 1.1em; } .kcc-palette-item-text { display: flex; flex-direction: column; min-width: 0; } .kcc-palette-item-label { font-size: var(--fs-sm); color: var(--text); } .kcc-palette-item-ws { font-size: var(--fs-caption); color: var(--text-muted); } .kcc-palette-empty { padding: var(--space-4); color: var(--text-muted); text-align: center; font-size: var(--fs-sm); } .kcc-palette-foot { display: flex; align-items: center; gap: var(--space-1_5); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--fs-caption); } @media (prefers-reduced-motion: no-preference) { .kcc-palette { animation: kcc-pop var(--dur-3) var(--ease-out); } } /* ========================================================================== Mobile nav sheet (bottom "More/Menu") ========================================================================== */ .kcc-sheet-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, var(--text) 45%, transparent); } .kcc-sheet-backdrop[hidden] { display: none; } .kcc-sheet { width: 100%; max-width: 32rem; max-height: 80vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); padding: var(--space-4); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0)); } :root[data-mode='dark'] .kcc-sheet { background: var(--surface-2); } .kcc-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .kcc-sheet-title { font-family: var(--font-heading); font-size: var(--fs-heading); font-weight: var(--fw-semibold); color: var(--text); } @media (prefers-reduced-motion: no-preference) { .kcc-sheet { animation: kcc-sheet-up var(--dur-4) var(--ease-out); } } @keyframes kcc-sheet-up { from { transform: translateY(100%); } to { transform: none; } } /* ========================================================================== Coach-mark tour (minimal runner) ========================================================================== */ .kcc-tour { position: fixed; inset: 0; z-index: 90; pointer-events: none; } .kcc-tour[hidden] { display: none; } .kcc-tour-ring { position: fixed; border: 2px solid var(--accent); border-radius: var(--radius-md); box-shadow: 0 0 0 9999px color-mix(in srgb, var(--text) 55%, transparent); pointer-events: none; } .kcc-tour-card { position: fixed; width: min(20rem, calc(100vw - 1.5rem)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-4); pointer-events: auto; } :root[data-mode='dark'] .kcc-tour-card { background: var(--surface-2); } .kcc-tour-step { font-size: var(--fs-caption); color: var(--text-muted); } .kcc-tour-title { font-family: var(--font-heading); font-size: var(--fs-heading); font-weight: var(--fw-semibold); color: var(--text); margin: var(--space-1) 0; } .kcc-tour-body { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--space-3); } .kcc-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .kcc-tour-actions-right { display: flex; gap: var(--space-2); } @media (prefers-reduced-motion: no-preference) { .kcc-tour-ring { transition: top var(--dur-3) var(--ease-out), left var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out); } } /* ========================================================================== Card variants — interactive lift + feature (serif + icon tile) ========================================================================== */ .kcc-card-interactive { cursor: pointer; } .kcc-card-interactive:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--shadow-1); } .kcc-card-feature { display: flex; gap: var(--space-3); align-items: flex-start; } .kcc-card-feature .kcc-card-title { font-family: var(--font-heading); } .kcc-feature-tile { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); color: var(--accent); font-size: 1.3rem; } @media (prefers-reduced-motion: no-preference) { .kcc-card-interactive { transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard); } .kcc-card-interactive:hover { transform: translateY(-1px); } } /* ========================================================================== Drawer (right panel desktop / bottom sheet mobile) ========================================================================== */ .kcc-drawer-backdrop { position: fixed; inset: 0; z-index: 75; display: flex; justify-content: flex-end; background: color-mix(in srgb, var(--text) 45%, transparent); } .kcc-drawer-backdrop[hidden] { display: none; } .kcc-drawer { width: min(24rem, 100%); height: 100%; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-3); padding: var(--space-4); } :root[data-mode='dark'] .kcc-drawer { background: var(--surface-2); } @media (max-width: 640px) { .kcc-drawer-backdrop { align-items: flex-end; } .kcc-drawer { width: 100%; height: auto; max-height: 85vh; border-left: 0; border-top: 1px solid var(--line); border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); } } @media (prefers-reduced-motion: no-preference) { .kcc-drawer { animation: kcc-drawer-in var(--dur-4) var(--ease-out); } } @keyframes kcc-drawer-in { from { transform: translateX(4%); opacity: 0; } to { transform: none; opacity: 1; } } /* ========================================================================== Toast — elevation + warn kind + icon slot (component additions; app/ui.js still drives show/err; warn/icon classes are available for later use). ========================================================================== */ .kcc-toast { box-shadow: var(--shadow-2); } .kcc-toast.show.warn { border-left-color: var(--warn); } .kcc-toast-ico { margin-right: var(--space-2); } /* ========================================================================== Live theme morph — one-time cross-fade pulse when appearance changes. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { :root[data-theme-morph] .kcc-shell, :root[data-theme-morph] .kcc-shell * { transition: background-color var(--dur-4) var(--ease-standard), color var(--dur-4) var(--ease-standard), border-color var(--dur-4) var(--ease-standard) !important; } } /* ========================================================================== Responsive topbar (compact ≤640: lens + wide search + breadcrumb give way to the bottom tab bar + an icon-only search entry). ========================================================================== */ body.nav-compact .kcc-lens { display: none; } body.nav-compact .kcc-search-box { display: none; } body.nav-compact .kcc-crumb { display: none; } body.nav-compact .kcc-search-icon-only { display: inline-flex; } body.nav-compact .kcc-brand-name { max-width: 42vw; } /* ========================================================================== Login screen (spec §4) — centered branded card + brand-tinted radial wash ========================================================================== */ .kcc-login-screen { position: relative; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .kcc-login-wash { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); } .kcc-login-main { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; } .kcc-login-card { width: 100%; max-width: 26rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); padding: var(--space-6) var(--space-5); text-align: center; display: flex; flex-direction: column; } :root[data-mode='dark'] .kcc-login-card { background: var(--surface-2); } .kcc-login-brand { display: flex; justify-content: center; margin-bottom: var(--space-3); } .kcc-login-logo { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--radius-md); } .kcc-login-monogram { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--accent); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-title); } .kcc-login-org { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-display); line-height: var(--lh-display); color: var(--text); margin: 0; } .kcc-login-headline { font-size: var(--fs-heading); font-weight: var(--fw-semibold); color: var(--text); margin: var(--space-3) 0 0; } .kcc-login-sub { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--space-1) 0 var(--space-4); } .kcc-login-card .kcc-field { text-align: left; } .kcc-login-card .kcc-btn-block { margin-top: var(--space-2); } .kcc-login-secure { display: flex; align-items: center; justify-content: center; gap: var(--space-1_5); margin-top: var(--space-4); color: var(--text-muted); font-size: var(--fs-caption); } .kcc-login-secure svg { flex: 0 0 auto; } /* ========================================================================== Reduced motion — backstop for every animated surface above. Even if a future edit adds a transition/animation outside a no-preference block, this catch-all still neutralizes it for users who asked for less motion. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .kcc-shell, .kcc-shell * { animation: none !important; transition: none !important; } }