/* One visual system for Butler's front door and working environment.
   Aurora is the default; saved colour, density, motion and shell choices persist. */
:root {
  --butler-font: "Geist", system-ui, -apple-system, sans-serif;
  --butler-editorial: "Cormorant Garamond", Georgia, serif;
  --butler-night: #080c12;
  --butler-panel: #101721;
  --butler-ink: #f2f2ee;
  --butler-muted: #aebbc6;
  --butler-accent: #b3e4e9;
  --butler-rule: #b8d0dd26;
  --butler-header: 64px;
}
[data-theme="aurora"], html[data-auth="true"] {
  --surface-sunken: var(--butler-night);
  --surface: var(--butler-panel);
  --surface-raised: #18222e;
  --surface-overlay: #202e3d;
  --ink: var(--butler-ink);
  --ink-2: #c5d0d9;
  --ink-3: var(--butler-muted);
  --ink-4: #8799aa;
  --line: var(--butler-rule);
  --line-strong: #b8d0dd42;
  --accent: var(--butler-accent);
  --accent-soft: #b3e4e914;
  --accent-ink: #102026;
  --brand-1: #b3e4e9;
  --brand-2: #e6b09a;
  --text-font: var(--butler-font);
  --display-font: var(--butler-font);
  --display-weight: 650;
  --display-tracking: -.035em;
  color-scheme: dark;
}
/* Current identity, identical optical scale and alignment on every surface. */
.brand-lockup, .sidebar-brand, .butler-dark .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--butler-font); white-space: nowrap;
}
.brand-lockup img, html[data-auth="true"] .brand-lockup img, .sidebar-brand img, .butler-dark .brand img {
  display: block; width: 32px; height: 32px; flex: 0 0 32px;
  padding: 3px; margin: 0; border: 1px solid #e3f1ed; border-radius: 7px;
  background: #dcebe8; box-shadow: none;
}
.brand-wordmark, .butler-dark .brand {
  font-family: var(--butler-font); font-size: 19px; line-height: 1;
  font-weight: 650; letter-spacing: -.65px;
}
.brand-wordmark > span, .butler-dark .brand > span {
  color: var(--ink-2, #c5d0d9); font-weight: 400; margin-left: 3px;
}
.butler-dark .brand { gap: 0; }
.butler-dark .brand img { margin-right: 10px; }
.brand-eyebrow { font: 600 12px/1.5 var(--butler-font); letter-spacing: .13em; text-transform: uppercase; color: var(--butler-accent); }
/* Account access belongs to the same environment. */
html[data-auth="true"] body { font-family: var(--butler-font); }
html[data-auth="true"] .auth-utility {
  min-height: 52px; padding-inline: clamp(20px, 5vw, 80px);
  border-bottom: 1px solid var(--butler-rule); color: var(--butler-muted);
  font-size: 13px; background: var(--butler-night);
}
.auth-utility > li:first-child { overflow-wrap: anywhere; }
.auth-skip { position: fixed; top: -100px; left: 16px; z-index: 100; }
.auth-skip:focus { top: 12px; padding: 12px 16px; background: var(--butler-accent); color: #102026; }
html[data-auth="true"] .auth-shell {
  min-height: calc(100dvh - 52px); padding: 0;
  background: radial-gradient(ellipse at 18% 40%, #17314155, transparent 60%), var(--butler-night);
}
.auth-composition { width: min(1280px, 100%); min-height: inherit; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; }
.auth-story { display: flex; flex-direction: column; padding: clamp(32px, 5vw, 72px); border-right: 1px solid var(--butler-rule); min-width: 0; }
.auth-brand { align-self: flex-start; color: var(--butler-ink); }
.auth-story-copy { margin-block: auto; padding-block: 64px; }
.auth-statement { margin: 24px 0 32px; font: 500 clamp(54px, 5.7vw, 82px)/1.05 var(--butler-font); letter-spacing: -.055em; color: var(--butler-ink); }
.auth-statement em { font-family: var(--butler-editorial); font-weight: 500; font-size: 1.3em; line-height: .9; color: #d8e9e7; }
.auth-description { font-size: 16px; line-height: 1.8; color: var(--butler-muted); }
.auth-continuity { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--butler-muted); }
.auth-continuity i { height: 1px; background: var(--butler-rule); flex: 1; }
.auth-entry { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 48px clamp(24px, 5vw, 72px); }
html[data-auth="true"] .auth-card { width: 100%; max-width: 440px; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.auth-card > div { max-width: none; }
.auth-card .text-center { text-align: left; }
html[data-auth="true"] .auth-card h1 { font: 650 30px/1.2 var(--butler-font); letter-spacing: -.035em; }
.auth-card header { margin-bottom: 28px; }
.auth-card header p { line-height: 1.6; }
.auth-card .input, .auth-card .select { min-height: 48px; background: #101923; border-color: #b8d0dd42; border-radius: 7px; font-size: 16px; }
.auth-card .input:focus-within { outline: 2px solid var(--butler-accent); outline-offset: 3px; }
.auth-card .btn { min-height: 48px; border-radius: 7px; font-size: 14px; font-weight: 600; }
.auth-card .btn-primary { background: #dcebe8; color: #102026; border-color: #dcebe8; box-shadow: none; }
.auth-card .btn-primary:hover { background: #eef8f4; }
.auth-card .btn-soft { background: transparent; color: var(--butler-ink); border-color: #b8d0dd42; }
.auth-card .btn-soft:hover { background: #b3e4e914; }
.auth-card .divider { margin-block: 24px; font-size: 12px; color: var(--butler-muted); }
.auth-card .label, .auth-card label { color: #d4dee5; }
.auth-card .text-error { color: #ffb9b4; }
.auth-entry-note { margin: 28px auto 0; font-size: 12px; line-height: 1.6; color: var(--butler-muted); }
/* Operational type is functional under every saved colour theme. */
.crm-shell { font-family: var(--butler-font); height: 100dvh; }
html[data-theme] .crm-shell :is(h1, h2, h3) { font-family: var(--butler-font); font-weight: 650; letter-spacing: -.025em; }
.crm-shell h1 { line-height: 1.2; }
.crm-shell h2, .crm-shell h3 { line-height: 1.35; }
.crm-shell .crm-topbar, .crm-shell .crm-sidebar-header {
  height: var(--butler-header); min-height: var(--butler-header); max-height: var(--butler-header);
  padding-block: 0; border-bottom: 1px solid var(--line-strong); background: var(--surface); box-shadow: none;
}
.crm-topbar::after { display: none; }
.crm-topbar-kicker { font: 500 11px/1.3 var(--butler-font); letter-spacing: .04em; text-transform: none; color: var(--ink-3); margin-bottom: 3px; }
.crm-shell #app-sidebar.crm-sidebar { background: var(--surface); box-shadow: none; }
.crm-sidebar-header { gap: 6px; padding-inline: 16px; }
.crm-sidebar-header .sidebar-user-info { white-space: nowrap; }
.crm-sidebar-header > .sidebar-user-info { display: none; }
.crm-sidebar-header .sidebar-toggle { flex-shrink: 0; width: 28px; }
.crm-shell #app-sidebar:not(.sidebar-collapsed) { width: 224px; }
.crm-sidebar-nav > a { color: var(--ink-2); }
.crm-sidebar-nav > a[aria-current] { color: var(--ink); background: var(--accent-soft); }
.crm-sidebar-nav > a:hover { background: var(--lift-2); color: var(--ink); }
.crm-shell .context-navigation { flex-shrink: 0; min-height: 46px; padding: 4px 20px; gap: 4px; border-bottom: 1px solid var(--line); background: var(--surface-sunken); }
.crm-shell .context-navigation a { min-height: 36px; display: inline-flex; align-items: center; padding: 6px 12px; font: 500 13px/1.2 var(--butler-font); color: var(--ink-2); border-radius: 6px; }
.crm-shell .context-navigation a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
.crm-shell .context-nav-label { display: none; }
.focus-navigation { flex-shrink: 0; }
html[data-shell="focus"] .crm-topbar .focus-navigation { padding: 0; border: 0; background: transparent; }
.focus-navigation-hint { display: none; }
.crm-shell .crm-main { padding: 20px; background: var(--surface-sunken); }
.crm-shell .crm-main-mission { padding: 0; }
.crm-shell :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.crm-shell .project-board-page { gap: 12px; }
.crm-shell .project-board-header { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: none; }
.crm-shell .project-board-header h1 { font-size: 22px; }
.crm-shell .project-board-canvas { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; gap: 12px; box-shadow: none; }
.crm-shell .project-board-focus { padding: 12px; }
/* Public storytelling retains its orbital/reveal choreography. */
.butler-dark { font-family: var(--butler-font); --muted: var(--butler-muted); }
.butler-dark .nav { height: 80px; }
.butler-dark .nav nav, .butler-dark .request-link { font-size: 14px; }
.butler-dark .button, .butler-dark .text-link { font-size: 14px; }
.butler-dark .button.small { min-height: 44px; font-size: 13px; }
.butler-dark .kicker, .butler-dark .hero-copy .kicker { font-size: 12px; letter-spacing: .13em; }
.butler-dark .intro { font-size: 18px; }
.butler-dark .entry-note { font-size: 12px; color: var(--butler-muted); }
.butler-dark .scene-copy > p, .butler-dark .journey-heading > p:last-child,
.butler-dark .continuity-copy > p:not(.kicker), .butler-dark .review-copy > p:not(.kicker) { font-size: 16px; line-height: 1.8; }
.butler-dark .chapter span { font: 600 11px var(--butler-font); }
.butler-dark .detail-line { font-size: 12px; }
.butler-dark .capability-strip span { font-size: 11px; }
.butler-dark .hero-bottom { font-size: 11px; }
.butler-dark .hero-bottom a { font-size: 11px; min-height: 44px; display: inline-flex; align-items: center; }
.butler-dark .scene-visual :is(small, .window-bar, .record-tabs, .record-heading p, .record-body small, .timeline p span, .board-foot, .work-lane > span, .work-lane p, .work-lane footer, .breadcrumb, .commitment-properties span) { font-size: 11px; }
.butler-dark .scene-visual :is(.timeline strong, .context-note p, .work-lane strong) { font-size: 13px; }
.butler-dark .motion-toggle { font-size: 11px; min-height: 40px; }
@media (max-width: 1023px) {
  .crm-shell #app-sidebar.crm-sidebar.sidebar-collapsed { width: 224px !important; }
  .crm-shell .sidebar-collapsed :is(.nav-label, .nav-badge, .sidebar-user-info) { display: revert; }
  .crm-shell .sidebar-collapsed .sidebar-brand { display: inline-flex; }
  .crm-shell .sidebar-collapsed .crm-sidebar-header { justify-content: flex-start; }
  .crm-shell .crm-topbar { padding-inline: 8px; }
  .mobile-brand { margin-inline: 8px; }
  .crm-shell .crm-main { padding: 12px; }
  .crm-shell .crm-main-mission { padding: 0; }
  .crm-shell .context-navigation { padding-inline: 12px; }
  .auth-story { padding: 32px; }
  .auth-statement { font-size: 60px; }
  .auth-entry { padding: 40px 28px; }
}
@media (max-width: 760px) {
  .auth-composition { display: block; }
  .auth-story { border-right: 0; padding: 28px 24px 0; }
  .auth-story-copy { padding: 0; margin: 20px 0 0; }
  .auth-story-copy .brand-eyebrow { font-size: 11px; }
  .auth-statement, .auth-description, .auth-continuity { display: none; }
  .auth-entry { padding: 32px 24px 40px; }
  .auth-brand, .auth-story-copy { width: 100%; max-width: 440px; margin-inline: auto; }
  html[data-auth="true"] .auth-utility { gap: 8px; padding-inline: 16px; font-size: 12px; }
}
@media (max-width: 560px) {
  .butler-dark .hero-copy .kicker { font-size: 11px; }
  .butler-dark .intro { font-size: 16px; max-width: 320px; }
  .butler-dark .hero-actions { gap: 12px; flex-wrap: wrap; }
  .butler-dark .hero-actions .button, .butler-dark .hero-actions .text-link { font-size: 13px; }
  .butler-dark .capability-strip .wrap { flex-wrap: wrap; justify-content: flex-start; gap: 12px 20px; }
  .butler-dark .capability-strip i { display: none; }
  .butler-dark .hero-bottom { font-size: 10px; gap: 20px; }
  .butler-dark .scene-copy > p, .butler-dark .journey-heading > p:last-child,
  .butler-dark .continuity-copy > p:not(.kicker), .butler-dark .review-copy > p:not(.kicker) { font-size: 15px; }
  .butler-dark .scene-visual .record-tabs { gap: 16px; }
  .crm-shell .project-board-header h1 { font-size: 20px; }
  .crm-shell .project-board-canvas { padding: 8px; }
  .crm-shell .project-board-focus { padding: 8px; }
}