/*!*************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***! \*************************************************************************************************************************************************************************************************************************************************************/ @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap"); /* Fonts first (CSS @import must precede other rules). */ /* The real neuSprungOS design system (ported from the design handover). Atelier direction is locked via data-direction on . No Tailwind — the blueprint is a complete, self-contained CSS system. */ /* ============================================================ neuSprungOS — Foundational Design Tokens Warm, human-first. Sand / stone / cream + clay accent. All color authored in oklch for harmonic ramps. ============================================================ */ :root { /* ---- Warm neutral ramp (sand → stone → ink) -------------- */ --sand-0: oklch(0.992 0.004 80); /* pure warm white */ --sand-50: oklch(0.975 0.008 78); --sand-100: oklch(0.957 0.011 76); --sand-150: oklch(0.938 0.013 74); --sand-200: oklch(0.910 0.014 72); --sand-300: oklch(0.860 0.015 70); --stone-400:oklch(0.730 0.014 66); --stone-500:oklch(0.605 0.013 62); --stone-600:oklch(0.495 0.012 60); --ink-700: oklch(0.390 0.012 58); --ink-800: oklch(0.300 0.011 56); --ink-900: oklch(0.225 0.010 54); /* warm near-black text */ /* ---- Clay accent ramp ------------------------------------ */ --clay-50: oklch(0.955 0.022 50); --clay-100: oklch(0.918 0.040 49); --clay-200: oklch(0.855 0.066 48); --clay-300: oklch(0.770 0.094 46); --clay-400: oklch(0.685 0.110 44); --clay-500: oklch(0.610 0.116 42); /* ≈ #c2674a — primary accent */ --clay-600: oklch(0.535 0.112 40); --clay-700: oklch(0.455 0.098 39); /* ---- Calm semantic hues (low chroma, never alarming) ----- */ --sage-50: oklch(0.955 0.020 150); --sage-400: oklch(0.660 0.072 152); --sage-500: oklch(0.580 0.074 152); /* success / on-track */ --sage-700: oklch(0.430 0.060 152); --amber-50: oklch(0.962 0.030 80); --amber-400:oklch(0.785 0.092 76); --amber-500:oklch(0.720 0.100 74); /* attention / waiting */ --amber-700:oklch(0.520 0.080 72); --brick-50: oklch(0.955 0.022 32); --brick-400:oklch(0.640 0.108 32); --brick-500:oklch(0.560 0.112 31); /* alert (soft, not red) */ --brick-700:oklch(0.440 0.092 31); --dusk-50: oklch(0.955 0.016 248); --dusk-400: oklch(0.660 0.058 246); --dusk-500: oklch(0.580 0.060 245); /* info / agent-context */ --dusk-700: oklch(0.440 0.052 245); /* ---- Type ------------------------------------------------- */ --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace; --fs-display: clamp(2.4rem, 1.6rem + 2.4vw, 3.3rem); --fs-h1: 2.05rem; --fs-h2: 1.55rem; --fs-h3: 1.22rem; --fs-h4: 1.05rem; --fs-body-lg: 1.06rem; --fs-body: 0.95rem; --fs-sm: 0.85rem; --fs-xs: 0.76rem; --fs-label: 0.70rem; /* mono micro-labels */ --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.58; /* ---- Spacing (4px base) ---------------------------------- */ --space-mult: 1; --s-1: calc(4px * var(--space-mult)); --s-2: calc(8px * var(--space-mult)); --s-3: calc(12px * var(--space-mult)); --s-4: calc(16px * var(--space-mult)); --s-5: calc(20px * var(--space-mult)); --s-6: calc(24px * var(--space-mult)); --s-8: calc(32px * var(--space-mult)); --s-10: calc(40px * var(--space-mult)); --s-12: calc(48px * var(--space-mult)); --s-16: calc(64px * var(--space-mult)); --s-20: calc(80px * var(--space-mult)); /* ---- Radius ---------------------------------------------- */ --r-unit: 14px; --r-xs: calc(var(--r-unit) * 0.36); --r-sm: calc(var(--r-unit) * 0.6); --r-md: var(--r-unit); --r-lg: calc(var(--r-unit) * 1.5); --r-xl: calc(var(--r-unit) * 2.2); --r-pill: 999px; /* ---- Elevation (warm-tinted, diffuse) -------------------- */ --shadow-color: 35 30% 38%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.07); --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 3px 8px hsl(var(--shadow-color) / 0.06); --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.05), 0 8px 20px hsl(var(--shadow-color) / 0.08); --shadow-lg: 0 4px 10px hsl(var(--shadow-color) / 0.06), 0 18px 44px hsl(var(--shadow-color) / 0.11); /* ---- Semantic surface roles (themeable per direction) ---- */ --canvas: var(--sand-50); --surface: var(--sand-0); --surface-2: var(--sand-100); --surface-sunken: var(--sand-150); --border: oklch(0.885 0.013 72); --border-strong: oklch(0.840 0.014 70); --hairline: oklch(0.905 0.012 72); --text: var(--ink-900); --text-secondary: var(--stone-600); --text-muted: var(--stone-500); --text-faint: var(--stone-400); --accent: var(--clay-500); --accent-hover: var(--clay-600); --accent-quiet: var(--clay-50); --accent-on: var(--sand-0); --focus: oklch(0.610 0.116 42 / 0.45); /* surfaces used by patterns */ --shadow-card: var(--shadow-sm); --card-radius: var(--r-lg); --control-radius: var(--r-sm); --motion-quick: 140ms; --motion-base: 240ms; --motion-slow: 420ms; --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ============================================================ DIRECTIONS — three warm-human takes on the same foundation. Each overrides surface roles, radius, density, elevation, and how present the clay accent is. ============================================================ */ /* A — SANCTUARY: calmest. Airy, soft, low-contrast, generous. */ :root[data-direction="sanctuary"] { --canvas: oklch(0.978 0.009 78); --surface: var(--sand-0); --surface-2: oklch(0.964 0.010 76); --surface-sunken: oklch(0.948 0.012 75); --border: oklch(0.905 0.011 74); --border-strong: oklch(0.870 0.013 72); --hairline: oklch(0.922 0.009 74); --r-unit: 18px; --space-mult: 1.08; --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.04), 0 10px 30px hsl(var(--shadow-color) / 0.07); --card-radius: var(--r-lg); } /* B — ATELIER: Swiss-warm precision. Crisper, tighter, structured. */ :root[data-direction="atelier"] { --canvas: oklch(0.969 0.006 82); --surface: var(--sand-0); --surface-2: oklch(0.953 0.008 80); --surface-sunken: oklch(0.936 0.009 78); --border: oklch(0.866 0.012 74); --border-strong: oklch(0.808 0.014 70); --hairline: oklch(0.888 0.011 74); --r-unit: 8px; --space-mult: 0.96; --shadow-card: 0 1px 0 hsl(var(--shadow-color) / 0.04), 0 1px 3px hsl(var(--shadow-color) / 0.06); --card-radius: var(--r-md); } /* C — HEARTH: warmest + most tactile. Clay more present. */ :root[data-direction="hearth"] { --canvas: oklch(0.957 0.019 68); --surface: oklch(0.985 0.010 72); --surface-2: oklch(0.945 0.022 66); --surface-sunken: oklch(0.928 0.026 64); --border: oklch(0.882 0.024 60); --border-strong: oklch(0.832 0.030 56); --hairline: oklch(0.902 0.020 62); --accent-quiet: oklch(0.928 0.040 52); --r-unit: 12px; --space-mult: 1.02; --shadow-card: 0 2px 4px hsl(35 35% 40% / 0.06), 0 12px 28px hsl(35 35% 40% / 0.10); --card-radius: var(--r-lg); } /* ============================================================ nambo — Brand layer tokens (additive over design/tokens.css) Adds the INDIGO companion accent (matched chroma to clay), brand surfaces, and the resonance-mark geometry vars. nambo · /ˈnam.bo/ · presence + active listening Clay = warmth, the human reaching out (stays the ONLY action color). Indigo = depth, the attention that receives — brand / "deep listening" surfaces only; NEVER alerts, success, or primary CTAs. Source: documentation/design/namboOS-design-update.zip → brand/nambo-tokens.css (handover §4). ============================================================ */ :root { /* ---- Indigo companion ramp (mirrors clay L/C, hue ~264) -- */ --indigo-50: oklch(0.955 0.022 268); --indigo-100: oklch(0.918 0.040 267); --indigo-200: oklch(0.855 0.066 266); --indigo-300: oklch(0.770 0.094 265); --indigo-400: oklch(0.685 0.110 264); --indigo-500: oklch(0.610 0.116 263); /* companion accent */ --indigo-600: oklch(0.535 0.112 262); --indigo-700: oklch(0.455 0.098 261); /* ---- Brand semantic roles -------------------------------- */ --brand-warm: var(--clay-500); /* reaching out */ --brand-deep: var(--indigo-500); /* receiving */ --brand-warm-quiet: var(--clay-50); --brand-deep-quiet: var(--indigo-50); /* duo-tone gradient used sparingly on brand surfaces only */ --brand-duo: linear-gradient(135deg, var(--clay-500), var(--indigo-500)); --brand-duo-soft: linear-gradient(135deg, var(--clay-100), var(--indigo-100)); /* ---- Resonance-mark geometry ----------------------------- */ --mark-core: 5; /* core dot radius (the held moment) */ --mark-ring-1: 13; /* first ripple */ --mark-ring-2: 22; /* outer ripple (attention spread) */ --mark-stroke: 3; } /* Indigo as a calm semantic "deep listening" tone. Never used for alerts — it is a brand/attention hue only. */ .tone-indigo { color: var(--indigo-600); } .bg-indigo-quiet { background: var(--indigo-50); color: var(--indigo-700); } /* expand/collapse chevron */ .rot90 { transform: rotate(90deg); transition: transform var(--motion-quick, 140ms); } /* nambo wordmark lockup — lowercase, soft, present by design. */ .nambo-lockup { font-weight: 600; letter-spacing: -0.03em; } .nambo-lockup b { font-weight: 700; color: var(--accent); } /* Quiet sidebar-foot brand moment (handover §6). */ .nav-foot { display: flex; align-items: center; gap: 8px; padding: var(--s-3) var(--s-2); margin-top: auto; /* push the quiet brand moment to the foot */ border-top: 1px solid var(--hairline); color: var(--text-secondary); } /* the user block now sits directly under the foot, no extra gap */ .app-nav .nav-foot + .nav-user { margin-top: var(--s-2); } .nav-foot .nf-glyph { color: var(--clay-400); flex: none; } .nav-foot .nf-aph { font-size: var(--fs-xs); line-height: 1.3; text-wrap: pretty; } /* The resonance mark only "breathes" when motion is welcome, never on a busy screen, and never loops aggressively (handover §3 / §6). */ @keyframes nambo-breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .nambo-breathe { animation: nambo-breathe 4.5s ease-in-out infinite; transform-origin: center; } } /* ============================================================ neuSprungOS — Base styles & document chrome ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv01"; transition: background var(--motion-base) var(--ease-calm), color var(--motion-base) var(--ease-calm); } ::-moz-selection { background: var(--clay-100); color: var(--ink-900); } ::selection { background: var(--clay-100); color: var(--ink-900); } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; } a { color: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* ---- Type primitives ------------------------------------- */ .t-display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.022em; } .t-h1 { font-size: var(--fs-h1); line-height: 1.16; font-weight: 600; letter-spacing: -0.018em; } .t-h2 { font-size: var(--fs-h2); line-height: 1.2; font-weight: 600; letter-spacing: -0.014em; } .t-h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; } .t-h4 { font-size: var(--fs-h4); line-height: 1.4; font-weight: 600; } .t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); } .t-body { font-size: var(--fs-body); line-height: var(--lh-body); } .t-sm { font-size: var(--fs-sm); line-height: var(--lh-snug); } .t-xs { font-size: var(--fs-xs); line-height: 1.4; } .t-secondary { color: var(--text-secondary); } .t-muted { color: var(--text-muted); } .balance { text-wrap: balance; } .pretty { text-wrap: pretty; } /* mono micro-label — used for system/agent/technical metadata */ .label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } /* ---- Layout shell ---------------------------------------- */ #root { min-height: 100vh; } .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; } .page { max-width: 1080px; margin: 0 auto; padding: var(--s-16) var(--s-10) var(--s-20); } @media (max-width: 920px) { .shell { grid-template-columns: 1fr; } .sidenav { display: none; } .page { padding: var(--s-10) var(--s-5) var(--s-16); } } /* ---- Side navigation ------------------------------------- */ .sidenav { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--hairline); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-6); } .brand-mark { display: flex; align-items: center; gap: var(--s-3); } .brand-seed { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(150deg, var(--clay-400), var(--clay-600)); position: relative; flex: none; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.25); } .brand-seed::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 32% 30%, oklch(1 0 0 / 0.5), transparent 42%); border-radius: inherit; } .brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 0.96rem; } .brand-name b { font-weight: 700; } .brand-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; } .nav-group { display: flex; flex-direction: column; gap: 2px; } .nav-group > .label { padding: 0 var(--s-3); margin-bottom: var(--s-2); } .nav-link { display: flex; align-items: center; gap: var(--s-3); padding: 7px var(--s-3); border-radius: var(--r-sm); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: background var(--motion-quick), color var(--motion-quick); } .nav-link:hover { background: var(--surface-2); color: var(--text); } .nav-link.active { background: var(--accent-quiet); color: var(--clay-700); } :root[data-direction="hearth"] .nav-link.active { color: var(--clay-700); } .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; flex: none; } /* ---- Section scaffold ------------------------------------ */ .section { margin-top: var(--s-20); scroll-margin-top: var(--s-6); } .section:first-of-type { margin-top: 0; } .section-head { margin-bottom: var(--s-8); max-width: 64ch; } .section-kicker { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); } .section-kicker .num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); font-weight: 500; } .section-kicker .rule { height: 1px; flex: 1; background: var(--hairline); } .section-intro { color: var(--text-secondary); font-size: var(--fs-body-lg); margin-top: var(--s-3); } /* ---- Generic card ---------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--shadow-card); } .card-pad { padding: var(--s-6); } .grid { display: grid; gap: var(--s-5); } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 760px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .row { display: flex; align-items: center; gap: var(--s-3); } .wrap { flex-wrap: wrap; } .spread { justify-content: space-between; } .col { display: flex; flex-direction: column; } .stack-2 { display: flex; flex-direction: column; gap: var(--s-2); } .stack-3 { display: flex; flex-direction: column; gap: var(--s-3); } .stack-4 { display: flex; flex-direction: column; gap: var(--s-4); } .stack-6 { display: flex; flex-direction: column; gap: var(--s-6); } /* ---- Top bar (sticky, holds direction switcher) ---------- */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-10); background: color-mix(in oklch, var(--canvas) 84%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } @media (max-width: 920px) { .topbar { padding: var(--s-3) var(--s-5); } } .topbar-title { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; } .topbar-title b { color: var(--text); font-weight: 600; } /* ---- Direction switcher ---------------------------------- */ .switcher { display: flex; align-items: center; gap: var(--s-3); } .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); } .seg button { border: none; background: transparent; padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); transition: all var(--motion-quick) var(--ease-calm); display: flex; align-items: center; gap: 7px; } .seg button .swatch { width: 9px; height: 9px; border-radius: 50%; } .seg button:hover { color: var(--text); } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); } /* ---- Swatch utility -------------------------------------- */ .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } /* token-spec helpers used in foundations */ .spec-row { display:flex; justify-content:space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px dashed var(--hairline); } .spec-row:last-child { border-bottom: 0; } .mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); } .note { font-size: var(--fs-sm); color: var(--text-secondary); border-left: 2px solid var(--accent); padding-left: var(--s-4); } .reveal { opacity: 0; transform: translateY(10px); } @media (prefers-reduced-motion: no-preference) { .reveal.in { animation: rise var(--motion-slow) var(--ease-calm) forwards; } } .reveal.in { opacity: 1; transform: none; } @keyframes rise { to { opacity: 1; transform: none; } } /* ---- Hero ------------------------------------------------- */ .hero { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-4); } .hero-kicker { color: var(--accent); } .hero .t-display { margin-top: var(--s-2); } .hero-dir { margin-top: var(--s-4); background: linear-gradient(180deg, var(--surface), var(--surface-2)); } /* ---- Principle cards ------------------------------------- */ .principle { position: relative; } .principle-ic { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-quiet); color: var(--clay-700); } :root[data-direction="atelier"] .principle-ic { border-radius: 8px; } /* ---- Reference surface links ----------------------------------- */ .surface-link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: inherit; transition: border-color var(--motion-quick), box-shadow var(--motion-quick), transform var(--motion-quick); } .surface-link:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .surface-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-quiet); color: var(--clay-700); display: inline-flex; align-items: center; justify-content: center; flex: none; } :root[data-direction="atelier"] .surface-ic { border-radius: 8px; } /* ============================================================ neuSprungOS — Component styles ============================================================ */ /* ---- Buttons --------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--control-radius); font-weight: 600; font-size: var(--fs-sm); line-height: 1; white-space: nowrap; transition: background var(--motion-quick) var(--ease-calm), border-color var(--motion-quick), color var(--motion-quick), box-shadow var(--motion-quick), transform var(--motion-quick); } .btn:active { transform: translateY(0.5px); } .btn-sm { padding: 8px 12px; font-size: var(--fs-xs); } .btn-md { padding: 10px 16px; } .btn-lg { padding: 13px 22px; font-size: var(--fs-body); } .btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: var(--shadow-xs); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-2); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-quiet { background: var(--accent-quiet); color: var(--clay-700); } .btn-quiet:hover { background: var(--clay-100); } /* ---- Badges / status pills ------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; white-space: nowrap; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-soft.badge-neutral { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); } .badge-soft.badge-accent { background: var(--accent-quiet); color: var(--clay-700); } .badge-soft.badge-success { background: var(--sage-50); color: var(--sage-700); } .badge-soft.badge-warning { background: var(--amber-50); color: var(--amber-700); } .badge-soft.badge-alert { background: var(--brick-50); color: var(--brick-700); } .badge-soft.badge-info { background: var(--dusk-50); color: var(--dusk-700); } .badge-solid.badge-accent { background: var(--accent); color: var(--accent-on); } .badge-solid.badge-success { background: var(--sage-500); color: #fff; } .badge-solid.badge-neutral { background: var(--ink-800); color: var(--sand-50); } /* ---- Avatar / agent mark --------------------------------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; flex: none; letter-spacing: -0.02em; } .avatar-stack { display: flex; } .avatar-stack > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); border-radius: 50%; } .avatar-stack > *:first-child { margin-left: 0; } .agent-mark { display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; flex: none; position: relative; background: var(--dusk-50); color: var(--dusk-500); border: 1px solid color-mix(in oklch, var(--dusk-400) 35%, transparent); } .agent-mark.agent-standby { opacity: 0.55; } .agent-active::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--sage-500); box-shadow: 0 0 0 2px var(--surface); } /* ---- Inputs ---------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); } .field-hint { font-size: var(--fs-xs); color: var(--text-muted); } .input, .textarea, .select { width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--control-radius); padding: 10px 13px; transition: border-color var(--motion-quick), box-shadow var(--motion-quick), background var(--motion-quick); } .input::-moz-placeholder, .textarea::-moz-placeholder { color: var(--text-faint); } .input::placeholder, .textarea::placeholder { color: var(--text-faint); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); } .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap .input { padding-left: 38px; } .input-wrap .lead-icon { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; } .textarea { resize: vertical; min-height: 84px; line-height: 1.5; } /* toggle */ .switch { width: 40px; height: 24px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background var(--motion-base); border: none; flex: none; } .switch[aria-checked="true"] { background: var(--accent); } .switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow: var(--shadow-xs); transition: transform var(--motion-base) var(--ease-calm); } .switch[aria-checked="true"]::after { transform: translateX(16px); } /* chip */ .chip { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius: var(--r-pill); border:1px solid var(--border); background: var(--surface); font-size: var(--fs-xs); font-weight:500; color: var(--text-secondary); } .chip.on { background: var(--accent-quiet); border-color: transparent; color: var(--clay-700); } /* ---- Tile (specimen frame) ------------------------------- */ .tile { display: flex; flex-direction: column; gap: var(--s-3); } .tile-body { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); padding: var(--s-5); min-height: 92px; display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap; } .tile-meta { padding: 0 2px; } /* ---- Swatch grid ----------------------------------------- */ .swatches { display: grid; gap: 2px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); } .swatch-row { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 0; } .swatch-cell { aspect-ratio: 1.6; display: flex; align-items: flex-end; padding: 7px 8px; } .swatch-cell .sc-name { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.02em; } .ramp { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); display: flex; } .ramp > div { flex: 1; height: 64px; position: relative; } .ramp > div span { position: absolute; bottom: 5px; left: 6px; font-family: var(--font-mono); font-size: 0.6rem; } .token-swatch { display:flex; align-items:center; gap: var(--s-3); } .token-swatch .chipc { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); flex:none; } /* ---- Data table ------------------------------------------ */ .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 var(--s-4) var(--s-3); } .table td { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--hairline); vertical-align: middle; } .table tr:hover td { background: var(--surface-2); } /* ---- Progress / scorecard -------------------------------- */ .bar { height: 7px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .scorecard { display: flex; gap: 5px; } .scorecard .pip { width: 22px; height: 7px; border-radius: 3px; background: var(--surface-sunken); } .scorecard .pip.on { background: var(--sage-500); } .scorecard .pip.accent { background: var(--accent); } /* ---- Alert ----------------------------------------------- */ .alert { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); } .alert .ic { flex: none; margin-top: 1px; } .alert-info { background: var(--dusk-50); border-color: color-mix(in oklch, var(--dusk-400) 28%, transparent); color: var(--dusk-700); } .alert-success { background: var(--sage-50); border-color: color-mix(in oklch, var(--sage-400) 28%, transparent); color: var(--sage-700); } .alert-warning { background: var(--amber-50); border-color: color-mix(in oklch, var(--amber-400) 30%, transparent); color: var(--amber-700); } .alert .at { font-weight: 600; color: var(--text); margin-bottom: 2px; font-size: var(--fs-sm); } .alert .ab { font-size: var(--fs-sm); color: var(--text-secondary); } /* ---- Type specimen rows ---------------------------------- */ .type-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-6); } .type-row .type-meta { text-align: right; flex: none; width: 168px; } @media (max-width: 620px) { .type-row { flex-direction: column; gap: 4px; } .type-row .type-meta { text-align: left; width: auto; } } /* ---- Icon grid ------------------------------------------- */ .icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); } .icon-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: var(--s-3) 4px; border-radius: var(--r-sm); color: var(--text); border: 1px solid var(--hairline); background: var(--surface-2); } @media (max-width: 620px) { .icon-grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ patterns.css — Case card · Capacity · Conversation · Personas ============================================================ */ /* ---------- CASE CARD ------------------------------------- */ .case-card { overflow: hidden; } .case-top { display: flex; justify-content: space-between; gap: var(--s-4); align-items: flex-start; } .case-fam { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .case-fam .name { font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.01em; } .case-fam .who { font-size: var(--fs-sm); color: var(--text-secondary); } .family-system { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin: var(--s-5) 0; flex-wrap: wrap; } .fs-block { display: flex; align-items: center; gap: var(--s-3); } .fs-block .label { white-space: nowrap; } .fs-divider { width: 1px; height: 26px; background: var(--border); } .tandem { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .tandem-coach { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--hairline); } .tandem-coach .role { font-size: var(--fs-label); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .tandem-coach .nm { font-weight: 600; font-size: var(--fs-sm); } .objective { padding: var(--s-3) 0; } .objective + .objective { border-top: 1px dashed var(--hairline); } .obj-head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; } .obj-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); } .obj-raters { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; } .rater { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-2); padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--hairline); } .case-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); flex-wrap: wrap; } .agent-note { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--dusk-50); border: 1px solid color-mix(in oklch, var(--dusk-400) 26%, transparent); } .agent-note .txt { font-size: var(--fs-sm); color: var(--dusk-700); } .agent-note .txt b { color: var(--text); font-weight: 600; } /* ---------- CAPACITY -------------------------------------- */ .capacity { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-5); } @media (max-width: 860px) { .capacity { grid-template-columns: 1fr; } } .cap-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); } .cap-day { display: flex; flex-direction: column; gap: 6px; } .cap-day .dh { text-align: center; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; padding-bottom: 4px; } .cap-col { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 6px; display: flex; flex-direction: column; gap: 5px; min-height: 220px; } .block { border-radius: 7px; padding: 7px 8px; font-size: 0.68rem; line-height: 1.25; font-weight: 600; border: 1px solid transparent; } .block .bt { font-size: 0.6rem; opacity: 0.8; font-weight: 500; } .block.coaching { background: var(--accent-quiet); color: var(--clay-700); border-color: color-mix(in oklch, var(--clay-400) 30%, transparent); } .block.admin { background: var(--surface-sunken); color: var(--text-secondary); } .block.protected { background: var(--sage-50); color: var(--sage-700); border-color: color-mix(in oklch, var(--sage-400) 30%, transparent); border-style: dashed; } .block.free { background: transparent; color: var(--text-faint); border: 1px dashed var(--border); font-weight: 500; } .cap-side { display: flex; flex-direction: column; gap: var(--s-4); } .cap-metric { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); } .cap-metric .mh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .cap-metric .mh .label { color: var(--text-muted); } .cap-metric .big { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; } .cap-metric .sub { font-size: var(--fs-xs); color: var(--text-muted); } .gauge-track { height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; margin: 8px 0; display: flex; } .gauge-track > i { height: 100%; display: block; } .legend { display: flex; gap: var(--s-3); flex-wrap: wrap; } .legend span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-secondary); } .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } /* ---------- CONVERSATION ---------------------------------- */ .convo { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 720px; } .convo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s-5); flex-wrap: wrap; } .participants { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .party { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--hairline); font-size: var(--fs-xs); font-weight: 500; } .party .pn { color: var(--text); } .party .pr { color: var(--text-muted); } .party.standby { opacity: 0.6; } .msg { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); max-width: 100%; } .msg .who-av { flex: none; } .msg .bubble { border-radius: 4px var(--r-md) var(--r-md) var(--r-md); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); background: var(--surface); } .msg .meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .msg .meta .nm { font-weight: 600; font-size: var(--fs-sm); } .msg .meta .tm { font-size: var(--fs-xs); color: var(--text-faint); } .msg .body { font-size: var(--fs-sm); color: var(--text); line-height: 1.55; } /* human, self-aligned right */ .msg.self { flex-direction: row-reverse; } .msg.self .bubble { background: var(--accent-quiet); border-color: color-mix(in oklch, var(--clay-400) 26%, transparent); border-radius: var(--r-md) 4px var(--r-md) var(--r-md); } .msg.self .meta { flex-direction: row-reverse; } /* agent — lightly differentiated: square avatar + dusk hairline */ .msg.agent .bubble { background: var(--dusk-50); border-color: color-mix(in oklch, var(--dusk-400) 24%, transparent); } .msg.agent .tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dusk-700); padding: 2px 7px; border-radius: var(--r-pill); background: color-mix(in oklch, var(--dusk-400) 16%, transparent); } .agent-suggest { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .slot { padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; transition: all var(--motion-quick); } .slot:hover { border-color: var(--accent); color: var(--clay-700); } .slot.picked { background: var(--accent); color: var(--accent-on); border-color: transparent; } .typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dusk-400); animation: blink 1.2s infinite; } .typing i:nth-child(2){ animation-delay: .2s } .typing i:nth-child(3){ animation-delay: .4s } @keyframes blink { 0%,80%,100%{ opacity:.3; transform: translateY(0) } 40%{ opacity:1; transform: translateY(-2px) } } .composer { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); margin-top: var(--s-2); } .composer input { flex: 1; border: none; background: transparent; font: inherit; font-size: var(--fs-sm); color: var(--text); outline: none; } .composer .standby-note { font-size: var(--fs-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } /* ---------- PERSONAS / CALM MODE -------------------------- */ .persona-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); } @media (max-width: 860px){ .persona-grid { grid-template-columns: repeat(2, 1fr);} } .persona { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: 8px; } .persona .pic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-quiet); color: var(--clay-700); display: inline-flex; align-items: center; justify-content: center; } .persona .pt { font-weight: 600; font-size: var(--fs-sm); } .persona .pd { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.45; } .calm-demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: stretch; } @media (max-width: 760px){ .calm-demo { grid-template-columns: 1fr; } } .calm-sample { padding: var(--s-5); border-radius: var(--r-md); border: 1px solid var(--border); transition: all var(--motion-slow) var(--ease-calm); } .calm-sample.on { --accent: var(--stone-500); background: oklch(0.985 0.004 80); filter: saturate(0.6); } .calm-sample.on * { transition: none !important; animation: none !important; } /* ===================================================================== pcc.css — PCC dashboard surfaces (Atelier-locked foundation) ===================================================================== */ .app { display: grid; grid-template-columns: 244px minmax(0,1fr); min-height: 100vh; } @media (max-width: 900px){ .app { grid-template-columns: 1fr; } .app-nav { display: none; } } /* ---- Left nav ------------------------------------------------------ */ .app-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-6); } .app-brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--s-2); } .app-brand .mark { display: inline-flex; align-items: center; flex: none; } .app-brand .bn { font-weight: 700; letter-spacing: -0.01em; font-size: 0.95rem; } .app-brand .br { font-size: var(--fs-xs); color: var(--text-muted); } .nav-items { display: flex; flex-direction: column; gap: 2px; } .ni { display: flex; align-items: center; gap: 11px; padding: 9px var(--s-3); border-radius: var(--r-sm); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; background: none; border: none; width: 100%; text-align: left; transition: background var(--motion-quick), color var(--motion-quick); } .ni:hover { background: var(--surface-2); color: var(--text); } .ni.active { background: var(--accent-quiet); color: var(--clay-700); font-weight: 600; } .ni .ni-count { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-sunken); color: var(--text-secondary); padding: 1px 7px; border-radius: var(--r-pill); } .ni.active .ni-count { background: var(--clay-100); color: var(--clay-700); } .ni.soon { opacity: 0.5; } .ni.soon .ni-count { background: transparent; color: var(--text-faint); } .nav-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); } .nav-user .nu-n { font-size: var(--fs-sm); font-weight: 600; } .nav-user .nu-r { font-size: var(--fs-xs); color: var(--text-muted); } /* ---- Topbar -------------------------------------------------------- */ .app-main { min-width: 0; display: flex; flex-direction: column; } .app-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-6); background: color-mix(in oklch, var(--canvas) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .app-search { flex: 1; max-width: 420px; position: relative; display: flex; align-items: center; } .app-search .lead-icon { position: absolute; left: 11px; color: var(--text-muted); } .app-search input { width: 100%; font: inherit; font-size: var(--fs-sm); padding: 8px 12px 8px 34px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); } .app-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); } .search-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12)); max-height: 360px; overflow-y: auto; padding: 4px; } .search-empty { padding: 10px 12px; } .search-hit { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-xs, 6px); padding: 8px 10px; cursor: pointer; font: inherit; color: var(--text); } .search-hit:hover { background: var(--surface-2, var(--focus)); } .search-hit-main { display: flex; flex-direction: column; min-width: 0; } .search-hit .sh-t { font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-hit .sh-s { font-size: var(--fs-xs, .75rem); } .hint-i { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--text-muted); font-size: 9px; font-style: normal; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; } .hint-i:hover, .hint-i:focus { border-color: var(--accent); color: var(--accent); outline: none; } .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-col { display: flex; flex-direction: column; gap: 4px; min-height: 60px; } .cal-col-h { font-size: var(--fs-xs, .75rem); font-weight: 600; text-align: center; padding-bottom: 4px; border-bottom: 1px solid var(--hairline); } .cal-ev { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; font-size: .72rem; padding: 4px 6px; border: 1px solid var(--accent); border-left-width: 3px; border-radius: var(--r-xs, 6px); background: var(--accent-soft, var(--focus)); color: var(--text); cursor: pointer; } .cal-ev:hover { background: var(--accent); color: #fff; } .cal-ev-h { font-weight: 600; opacity: .8; } .cal-ev-row { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hairline); padding: 4px 0; font: inherit; font-size: .8rem; cursor: pointer; } .cal-ev-row:hover { color: var(--accent); } .cal-week-h { font-size: var(--fs-xs, .72rem); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; padding: 2px 0; border-bottom: 1px solid var(--hairline); } .top-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); } .langseg, .demoseg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .langseg button, .demoseg button { border: none; background: none; padding: 5px 9px; border-radius: 5px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); } .langseg button[aria-pressed="true"], .demoseg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); } .demoseg { gap: 0; } .icon-btn { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; position: relative; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn .badge-dot-abs { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--clay-500); box-shadow: 0 0 0 2px var(--surface); } /* Notifications bell + dropdown feed (WS-C) */ .notif-wrap { display: inline-flex; } .icon-btn .badge-count-abs { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--clay-500); color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--surface); } .notif-menu { position: absolute; top: 42px; right: 0; width: 320px; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.18)); z-index: 50; } .notif-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-secondary); } .notif-markall { border: none; background: none; color: var(--brand-600, var(--clay-500)); font-size: 11px; cursor: pointer; padding: 0; } .notif-markall:hover { text-decoration: underline; } .notif-empty { padding: 18px 12px; color: var(--text-secondary); font-size: 12px; text-align: center; } .notif-list { list-style: none; margin: 0; padding: 0; } .notif-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border: none; border-bottom: 1px solid var(--border); background: none; cursor: pointer; } .notif-item:hover { background: var(--surface-2); } .notif-item.unread { background: var(--surface-2); } .notif-item.unread .notif-item-title::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--clay-500); margin-right: 6px; vertical-align: middle; } .notif-item-title { font-size: 13px; font-weight: 600; color: var(--text); } .notif-item-body { font-size: 12px; color: var(--text-secondary); } .app-body { padding: var(--s-6); max-width: 1240px; width: 100%; margin: 0 auto; } .page-head { margin-bottom: var(--s-6); } .page-head h1 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.015em; } .page-head p { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 4px; } /* ---- KPI row ------------------------------------------------------- */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-6); } @media (max-width: 760px){ .kpi-row { grid-template-columns: repeat(2,1fr); } } .kpi { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-align: left; transition: border-color var(--motion-quick), box-shadow var(--motion-quick); } .kpi:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); } .kpi.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); } .kpi-ic { width: 36px; height: 36px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; flex: none; } .tone-neutral { background: var(--surface-sunken); color: var(--text-secondary); } .tone-info { background: var(--dusk-50); color: var(--dusk-700); } .tone-warning { background: var(--amber-50); color: var(--amber-700); } .tone-accent { background: var(--accent-quiet); color: var(--clay-700); } .tone-success { background: var(--sage-50); color: var(--sage-700); } .tone-alert { background: var(--brick-50); color: var(--brick-700); } .kpi-body { display: flex; flex-direction: column; min-width: 0; } .kpi-val { font-size: 1.42rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; } .kpi-label { font-size: var(--fs-xs); color: var(--text-muted); } /* ---- Section card -------------------------------------------------- */ .scard { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--s-5); overflow: hidden; } .scard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--hairline); } .scard-title { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.005em; } .scard-count { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); background: var(--surface-sunken); padding: 1px 8px; border-radius: var(--r-pill); } .scard-body { padding: var(--s-2) 0; } .scard-body.pad { padding: var(--s-5); } /* ---- Case rows (inbox) --------------------------------------------- */ .crow { display: grid; grid-template-columns: 1.4fr 1fr auto 1fr auto auto; gap: var(--s-4); align-items: center; padding: 11px var(--s-5); border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background var(--motion-quick); } .crow:last-child { border-bottom: none; } .crow:hover { background: var(--surface-2); } .crow .cid { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); } .crow .cfam { font-weight: 600; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 2px; } .crow .cmeta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .crow .cwait { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; } .crow .cwait.warn { color: var(--amber-700); font-weight: 600; } .crow .cwait.over { color: var(--brick-700); font-weight: 700; } .col-head { display: grid; grid-template-columns: 1.4fr 1fr auto 1fr auto auto; gap: var(--s-4); padding: 8px var(--s-5); font-size: var(--fs-label); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--hairline); } .fund-tag { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-secondary); } /* deadline rows simpler grid */ .drow { display: flex; align-items: center; gap: var(--s-4); padding: 11px var(--s-5); border-bottom: 1px solid var(--hairline); cursor: pointer; } .drow:last-child { border-bottom: none; } .drow:hover { background: var(--surface-2); } .due-pill { font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; } .due-pill.soon { background: var(--amber-50); color: var(--amber-700); } .due-pill.over { background: var(--brick-50); color: var(--brick-700); } .due-pill.ok { background: var(--surface-sunken); color: var(--text-secondary); } /* ---- PII ----------------------------------------------------------- */ .pii-token { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; } .pii-token .pii-ic { opacity: 0.6; } .pii-clear { color: inherit; } .pii-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); } .pii-badge.on { background: var(--accent-quiet); border-color: transparent; color: var(--clay-700); } .pii-badge.locked { opacity: 0.7; cursor: not-allowed; } /* ---- Lifecycle stepper --------------------------------------------- */ .stepper { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 2px; } .step { display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border-radius: var(--r-pill); flex: none; } .step-node { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; background: var(--surface-sunken); color: var(--text-muted); flex: none; } .step-label { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; } .step.done .step-node { background: var(--sage-500); color: #fff; } .step.done .step-label { color: var(--text-muted); } .step.current { background: var(--accent-quiet); } .step.current .step-node { background: var(--accent); color: #fff; } .step.current .step-label { color: var(--clay-700); font-weight: 600; } /* ---- Tier badge ---------------------------------------------------- */ .tier { display: inline-flex; align-items: center; gap: 6px; } .tier-dot { width: 17px; height: 17px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; font-family: var(--font-mono); } .tier-text { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; } .tier-a .tier-dot { background: var(--dusk-50); color: var(--dusk-700); border: 1px solid color-mix(in oklch, var(--dusk-400) 35%, transparent); } .tier-b .tier-dot { background: var(--accent-quiet); color: var(--clay-700); border: 1px solid color-mix(in oklch, var(--clay-400) 35%, transparent); } .tier-c .tier-dot { background: var(--surface-sunken); color: var(--text-secondary); border: 1px solid var(--border-strong); } /* ---- Score ring / bar ---------------------------------------------- */ .ring { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; } .ring-val { position: absolute; font-weight: 700; font-size: 0.85rem; } .sbar { display: flex; flex-direction: column; gap: 4px; } .sbar-top { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-secondary); } .sbar-top b { color: var(--text); } /* ---- Case detail layout -------------------------------------------- */ .case-head { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--s-5); margin-bottom: var(--s-5); } .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; background: none; border: none; margin-bottom: var(--s-4); } .back-link:hover { color: var(--text); } .case-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; } .case-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .case-title h1 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; } .case-title .cid { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); } .case-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .case-meta { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-muted); } .case-meta b { color: var(--text-secondary); font-weight: 600; } .case-stepper-wrap { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--s-5); } .tab { border: none; background: none; padding: 10px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--text); } .tab.active { color: var(--clay-700); border-bottom-color: var(--accent); } .detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: var(--s-5); align-items: start; } @media (max-width: 1000px){ .detail-grid { grid-template-columns: 1fr; } } .guard-banner { display: flex; align-items: center; gap: 10px; padding: 10px var(--s-4); border-radius: var(--r-sm); background: var(--amber-50); border: 1px solid color-mix(in oklch, var(--amber-400) 30%, transparent); color: var(--amber-700); font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--s-4); } /* member / stakeholder / funding / objective rows */ .lrow { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-5); border-bottom: 1px solid var(--hairline); } .lrow:last-child { border-bottom: none; } .lrow .lr-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lr-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lrow .lr-n { font-size: var(--fs-sm); font-weight: 600; } .lrow .lr-s { font-size: var(--fs-xs); color: var(--text-muted); } .lrow .lr-end { margin-left: auto; display: flex; align-items: center; gap: 10px; } .role-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .retired { opacity: 0.55; } .obj { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--hairline); } .obj:last-child { border-bottom: none; } .obj-top { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; } .obj-t { font-size: var(--fs-sm); font-weight: 500; } .obj-r { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; } .obj-rater { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-2); padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--hairline); } .fund { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--hairline); } .fund:last-child { border-bottom: none; } .fund-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); } .fund-name { font-size: var(--fs-sm); font-weight: 600; } .fund-inst { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); } .fund-note { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 6px; } /* ---- Timeline rail ------------------------------------------------- */ .rail { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); position: sticky; top: 78px; } .rail-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--hairline); } .rail-head .rt { font-size: var(--fs-sm); font-weight: 600; } .live-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--sage-700); font-weight: 600; } .live-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-500); animation: pulse 1.8s infinite; } @keyframes pulse { 0%,100%{ opacity: 1; transform: scale(1);} 50%{ opacity:.4; transform: scale(.8);} } .tl { padding: var(--s-4) var(--s-5); max-height: 60vh; overflow-y: auto; } .tl-wf { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin: var(--s-3) 0 var(--s-2); display: flex; align-items: center; gap: 8px; } .tl-wf::after { content: ""; flex: 1; height: 1px; background: var(--hairline); } .tl-item { display: flex; gap: 11px; padding: 7px 0; } .tl-mark { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; } .tl-node { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; } .tl-node.human { background: var(--surface-sunken); color: var(--text-secondary); } .tl-node.agent { background: var(--dusk-50); color: var(--dusk-700); border: 1px solid color-mix(in oklch, var(--dusk-400) 30%, transparent); } .tl-line { width: 1px; flex: 1; background: var(--hairline); } .tl-body { padding-bottom: var(--s-3); min-width: 0; } .tl-subject { font-family: var(--font-mono); font-size: 0.62rem; color: var(--accent); } .tl-text { font-size: var(--fs-sm); font-weight: 500; margin: 1px 0; } .tl-detail { font-size: var(--fs-xs); color: var(--text-muted); } .tl-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .tl-at { font-size: var(--fs-xs); color: var(--text-faint); } /* ---- Sheet / modal (matching) -------------------------------------- */ .scrim { position: fixed; inset: 0; background: oklch(0.25 0.01 60 / 0.42); backdrop-filter: blur(2px); z-index: 60; display: flex; justify-content: flex-end; animation: fade var(--motion-base) var(--ease-calm); } @keyframes fade { from { opacity: 0; } } .sheet { width: min(560px, 100%); height: 100%; background: var(--canvas); border-left: 1px solid var(--border); display: flex; flex-direction: column; animation: slidein var(--motion-base) var(--ease-calm); box-shadow: var(--shadow-lg); } @keyframes slidein { from { transform: translateX(24px); opacity: .6; } } .sheet-head { padding: var(--s-5); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); } .sheet-head h2 { font-size: var(--fs-h3); font-weight: 600; } .sheet-head .sh-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; } .sheet-body { flex: 1; overflow-y: auto; padding: var(--s-5); } .tierb-note { display: flex; align-items: center; gap: 10px; padding: 10px var(--s-4); border-radius: var(--r-sm); background: var(--accent-quiet); color: var(--clay-700); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s-5); } .cand { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-4); background: var(--surface); transition: border-color var(--motion-quick), box-shadow var(--motion-quick); } .cand.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); } .cand-top { display: flex; align-items: center; gap: var(--s-3); } .cand-id { flex: 1; min-width: 0; } .cand-name { font-weight: 600; font-size: var(--fs-body); } .cand-meta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .cand-sub { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); } .cand-foot { margin-top: var(--s-4); display: flex; justify-content: flex-end; } .sheet-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); } /* ---- Toasts -------------------------------------------------------- */ .toasts { position: fixed; bottom: var(--s-5); left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { display: flex; align-items: center; gap: 10px; padding: 11px var(--s-4); border-radius: var(--r-md); background: var(--ink-900); color: var(--sand-50); font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--shadow-lg); animation: toastin var(--motion-base) var(--ease-calm); max-width: 90vw; } .toast .ti { color: var(--sage-400); flex: none; } .toast.info .ti { color: var(--dusk-400); } @keyframes toastin { from { transform: translateY(10px); opacity: 0; } } /* ---- Skeleton ------------------------------------------------------ */ .skel-wrap { padding: var(--s-2) var(--s-5); } .skel-row { display: flex; align-items: center; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--hairline); } .skel-row:last-child { border-bottom: none; } .skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-sunken) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } .skel-av { width: 30px; height: 30px; border-radius: 50%; flex: none; } .skel-l { height: 12px; flex: 1; } .skel-s { height: 12px; width: 90px; } .skel-xs { height: 12px; width: 56px; } /* ---- State boxes --------------------------------------------------- */ .state-box { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: var(--s-12) var(--s-6); } .state-ic { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; } .state-ic.err { background: var(--brick-50); color: var(--brick-700); } .state-title { font-weight: 600; font-size: var(--fs-body); } .state-body { font-size: var(--fs-sm); color: var(--text-secondary); max-width: 42ch; } /* ---- Handoff ------------------------------------------------------- */ .ho-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; } @media (max-width: 860px){ .ho-grid { grid-template-columns: 1fr; } } .ho-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .ho-table td { padding: 9px var(--s-5); border-bottom: 1px solid var(--hairline); vertical-align: top; } .ho-table tr:last-child td { border-bottom: none; } .ho-table .k { font-weight: 600; white-space: nowrap; } .ho-table .v { color: var(--text-secondary); } .ho-code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--clay-700); } .ho-key { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); display: block; padding: 5px var(--s-5); border-bottom: 1px solid var(--hairline); } .ho-key:last-child { border-bottom: none; } .ho-key b { color: var(--accent); font-weight: 500; } /* ---- Case index ---------------------------------------------------- */ .idx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); } .idx-toolbar .seg button { display: inline-flex; align-items: center; gap: 7px; } .idx-filters { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .idx-filters .select { width: auto; padding: 8px 12px; font-size: var(--fs-xs); } .idx-meta { margin-bottom: var(--s-4); } .idx-group { display: flex; align-items: center; gap: 9px; padding: 11px var(--s-5); border-bottom: 1px solid var(--border); background: var(--surface-2); } .idx-group-name { font-size: var(--fs-sm); font-weight: 600; } .xhead, .xrow { display: grid; grid-template-columns: 1.5fr 1fr auto 1.2fr 1fr auto 0.8fr; gap: var(--s-4); align-items: center; } .xhead { padding: 8px var(--s-5); font-size: var(--fs-label); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--hairline); } .xrow { padding: 11px var(--s-5); border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background var(--motion-quick); } .xrow:last-child { border-bottom: none; } .xrow:hover { background: var(--surface-2); } @media (max-width: 1000px){ .xhead { display: none; } .xrow { grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); } } /* ---- Capacity planning (PCC) --------------------------------------- */ .spread-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; } .seg.seg-sm button { padding: 5px 11px; font-size: var(--fs-xs); } .seg.seg-sm { background: var(--surface-2); border: 1px solid var(--border); } .seg.seg-sm button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); border-radius: var(--r-pill); } svg.chart { width: 100%; height: auto; display: block; overflow: visible; } .ch-forecast { fill: var(--surface-sunken); opacity: 0.45; } .ch-corridor { fill: var(--sage-50); } .ch-grid { stroke: var(--hairline); stroke-width: 1; } .ch-axis { fill: var(--text-faint); font-family: var(--font-mono); font-size: 10px; } .ch-band-lbl { fill: var(--text-muted); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; } .ch-area { fill: color-mix(in oklch, var(--clay-400) 16%, transparent); } .ch-line { fill: none; stroke: var(--clay-500); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .ch-line.forecast { stroke-dasharray: 5 4; opacity: 0.85; } .ch-supply { stroke: var(--stone-500); stroke-width: 1.6; stroke-dasharray: 2 3; } .ch-cost { stroke: var(--stone-500); stroke-width: 1.6; stroke-dasharray: 4 3; } .ch-dot { fill: var(--clay-500); stroke: var(--surface); stroke-width: 1.5; } .ch-dot.fc { fill: var(--surface); stroke: var(--clay-500); } .ch-today { stroke: var(--ink-700); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.5; } .ch-today-lbl { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; } .ch-bar { fill: var(--sage-400); } .ch-bar.pos { fill: color-mix(in oklch, var(--sage-500) 80%, transparent); } .ch-bar.neg { fill: color-mix(in oklch, var(--brick-500) 70%, transparent); } .ch-bar.fc { opacity: 0.6; } .chart-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); } .chart-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-secondary); } .chart-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; } .lg-supply { background: repeating-linear-gradient(90deg, var(--stone-500) 0 3px, transparent 3px 6px); height: 2px !important; border-radius: 0 !important; } .lg-committed { background: var(--clay-500); } .lg-healthy { background: var(--sage-50); border: 1px solid var(--sage-400); } .lg-rev-pos { background: var(--sage-500); } .lg-rev-neg { background: var(--brick-500); } .lg-cost { background: repeating-linear-gradient(90deg, var(--stone-500) 0 4px, transparent 4px 7px); height: 2px !important; border-radius: 0 !important; } /* agentic signal banner */ .pcap-signal { display: flex; gap: var(--s-4); padding: var(--s-5); border: 1px solid color-mix(in oklch, var(--clay-400) 30%, transparent); background: var(--accent-quiet); border-radius: var(--r-md); margin-bottom: var(--s-5); } .pcap-signal .ps-mark { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(150deg, var(--clay-400), var(--clay-600)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .ps-body { flex: 1; min-width: 0; } .ps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ps-head b { font-size: var(--fs-body); font-weight: 600; } .ps-sum { font-size: var(--fs-sm); color: var(--text); line-height: 1.55; margin-top: 8px; max-width: 76ch; } .ps-reco { font-size: var(--fs-sm); color: var(--clay-700); font-weight: 600; line-height: 1.5; margin-top: 6px; max-width: 76ch; } .ps-act { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; } /* per-team table */ .xhead.cap-thead, .xrow.cap-trow { grid-template-columns: 1.5fr 1.2fr 0.9fr 0.8fr 1.1fr; } .cap-util { display: flex; align-items: center; gap: 10px; } .cap-util b { font-variant-numeric: tabular-nums; } .trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; } .trend.up { color: var(--sage-700); } .trend.down { color: var(--brick-700); } .sig { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; } .sig-build { background: var(--accent-quiet); color: var(--clay-700); } .sig-acquire { background: var(--amber-50); color: var(--amber-700); } .sig-healthy { background: var(--sage-50); color: var(--sage-700); } .cap-scroll { overflow-x: auto; } .cap-scroll .xhead.cap-thead, .cap-scroll .xrow.cap-trow { min-width: 560px; } @media (max-width: 1000px){ .cap-scroll .xhead.cap-thead { display: grid; } .cap-scroll .xrow.cap-trow { grid-template-columns: 1.5fr 1.2fr 0.9fr 0.8fr 1.1fr; } } @media (max-width: 1000px){ .xrow.cap-trow { grid-template-columns: 1fr 1fr; } } /* App glue (a few utilities the design CSS doesn't ship) */ .muted-link { color: var(--text-muted); text-decoration: none; } .muted-link:hover { color: var(--text); } .full-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .hidden { display: none; } .ml-auto { margin-left: auto; } .w-full { width: 100%; } .gap-2 { gap: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .text-brick { color: var(--brick-700); } .text-sage { color: var(--sage-700); } /* Card row edit affordance — always right-aligned, revealed on row hover. */ .lrow .lr-edit { margin-left: auto; flex: none; opacity: 0; transition: opacity 120ms; } .lrow:hover .lr-edit, .lr-edit:focus-visible { opacity: 1; } /* Clickable user card in the side nav (opens the self-service menu). */ .nav-user-main { display: flex; align-items: center; gap: var(--s-2); background: none; border: none; padding: 0; cursor: pointer; min-width: 0; flex: 1; text-align: left; } .nav-user-main:hover .nu-n { color: var(--accent); } .menu-scrim { position: fixed; inset: 0; z-index: 40; } .nav-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; } .nav-menu-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--r-sm); background: none; border: none; cursor: pointer; font: inherit; color: var(--text); text-decoration: none; text-align: left; } .nav-menu-item:hover { background: var(--surface-2); color: var(--accent); } /* Weekly timesheet grid. */ .ts-grid { display: grid; align-items: stretch; gap: 0; padding: 0 var(--s-5) var(--s-3); } .ts-h { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); padding: 8px 6px; border-bottom: 1px solid var(--border); } .ts-h.ts-c, .ts-cell.ts-total { text-align: center; } .ts-label { display: flex; flex-direction: column; justify-content: center; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); } .ts-cell { padding: 4px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; } .ts-input { width: 100%; max-width: 64px; padding: 6px 4px; text-align: center; } .ts-foot { border-top: 1px solid var(--border); border-bottom: none; padding-top: 8px; } /* Full case lifecycle transition controls (case head). */ .lifecycle-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); } .lifecycle-actions .select { width: auto; padding: 6px 10px; font-size: var(--fs-xs); }