/* Material 3 Expressive foundation. This layer changes presentation only.
   Existing layout ownership, permission visibility and character motion remain
   in their respective modules. Load after the legacy presentation sheets. */
html[data-design-system="expressive"] {
  --md-primary: #5946aa;
  --md-on-primary: #ffffff;
  --md-primary-container: #e7dfff;
  --md-on-primary-container: #322366;
  --md-surface: #faf8ff;
  --md-surface-container: #f0eafa;
  --md-surface-high: #e7dfff;
  --md-on-surface: #24212e;
  --md-muted: #656071;
  --md-outline: #d2cbdc;
  --md-accent: #def28c;
  --md-on-accent: #303c10;
  --md-success: #285638;
  --md-success-container: #dcecdf;
  --md-error: #8e2825;
  --md-error-container: #ffdad6;
  --color-primary: var(--md-primary);
  --color-primary-strong: var(--md-on-primary-container);
  --color-secondary: var(--md-primary);
  --color-background: var(--md-surface);
  --color-surface: #fff;
  --color-surface-raised: #fff;
  --color-surface-glass: var(--md-surface-container);
  --color-muted-surface: var(--md-surface-container);
  --color-text: var(--md-on-surface);
  --color-text-strong: var(--md-on-surface);
  --color-text-muted: var(--md-muted);
  --color-border: var(--md-outline);
  --color-border-strong: var(--md-outline);
  --color-focus: var(--md-primary);
  --canvas: var(--md-surface);
  --card: #fff;
  --ink: var(--md-on-surface);
  --muted: var(--md-muted);
  --line: var(--md-outline);
  --line-strong: var(--md-outline);
  --blue: var(--md-primary);
  --blue-soft: var(--md-primary-container);
  --navy: var(--md-on-primary-container);
  --motion-action: var(--md-primary);
  --motion-surface: var(--md-surface);
  --motion-ink: var(--md-on-surface);
  --card-radius: 28px;
  --control-radius: 16px;
  --elevation-card: none;
  --focus-ring: 0 0 0 3px #5946aa33;
  background: var(--md-surface);
}
html[data-design-system="expressive"] body {
  --oa-line: var(--md-outline);
  --oa-muted: var(--md-muted);
  --oa-ink: var(--md-on-surface);
  --oa-blue: var(--md-primary);
  color: var(--md-on-surface);
  background: var(--md-surface);
}
html[data-design-system="expressive"] :is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--md-primary);
  outline-offset: 3px;
}

/* Keep the established shell dimensions and mobile frame/keyboard geometry. */
html[data-design-system="expressive"] body :is(.ticket-sidebar,.management-sidebar,.performance-sidebar) {
  background: var(--md-surface-container);
  border-color: var(--md-outline);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-design-system="expressive"] body :is(.ticket-brand,.management-brand,.performance-brand) { color:var(--md-on-surface); }
html[data-design-system="expressive"] body :is(.ticket-brand-copy,.management-brand-copy) strong { color:var(--md-on-surface); }
html[data-design-system="expressive"] body :is(.ticket-brand-copy small,.management-brand-copy small,.management-sidebar-note,.data-back-link,.people-back-link,.rules-back-link,.records-back-link) { color:var(--md-muted); }
html[data-design-system="expressive"] body :is(.data-back-link,.people-back-link,.rules-back-link,.records-back-link):hover { color:var(--md-on-primary-container); background:var(--md-primary-container); }
html[data-design-system="expressive"] body :is(.ticket-nav-item,.management-nav-item,.performance-nav-item) {
  color: var(--md-muted);
  border-radius: 28px;
  min-height: 48px;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}
html[data-design-system="expressive"] body :is(.ticket-nav-item,.management-nav-item,.performance-nav-item):is(.is-active,[aria-current="page"]) {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-color: transparent;
  box-shadow: none;
  font-weight: 700;
}
html[data-design-system="expressive"] body :is(.ticket-topbar,.management-topbar,.performance-topbar,.character-toolbar-fallback) {
  background: var(--md-surface);
  border-color: var(--md-outline);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-design-system="expressive"] body :is(.ticket-profile,.management-profile,.performance-profile) {
  border-radius: 28px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  border-color: transparent;
  box-shadow: none;
}
html[data-design-system="expressive"] body :is(.ticket-avatar,.management-avatar,.performance-avatar) {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
html[data-design-system="expressive"] body :is(.ticket-main-canvas,.management-main,.profile-settings-shell,.performance-main) { background:var(--md-surface); }
html[data-design-system="expressive"] body .single-page-sidebar-date {
  background: var(--md-surface-high);
  color: var(--md-on-primary-container);
  border-color: transparent;
  border-radius: 24px;
  box-shadow: none;
}
html[data-design-system="expressive"] body :is(.ticket-freshness,.management-status,.single-page-sidebar-date-copy small,.single-page-sidebar-date-copy span) { color:var(--md-muted); }

/* Workbench preserves all six metrics, all matrix details, and three views. */
html[data-design-system="expressive"] #moduleViewWorkbench .filter-panel {
  background: var(--md-surface-container);
  border: 1px solid transparent;
  border-radius: 28px;
  box-shadow: none;
}
html[data-design-system="expressive"] #moduleViewWorkbench .filter-panel .workbench-view-switch {
  background: var(--md-primary-container);
  border: 0;
  border-radius: 32px;
  box-shadow: none;
  gap: 4px;
}
html[data-design-system="expressive"] #moduleViewWorkbench .workbench-view-switch button {
  min-height:48px;
  border-radius:24px;
  color:var(--md-on-primary-container);
  background:transparent;
  border:0;
  box-shadow:none;
  font-size:14px;
}
html[data-design-system="expressive"] #moduleViewWorkbench .workbench-view-switch button[aria-pressed="true"] {
  background:var(--md-primary);
  color:var(--md-on-primary);
  border-radius:28px;
  box-shadow:none;
}
html[data-design-system="expressive"] #moduleViewWorkbench .filter-panel .field label { color:var(--md-muted);font-size:13px; }
html[data-design-system="expressive"] #moduleViewWorkbench .filter-panel .reset-button {
  min-height:48px;
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  border:0;
  border-radius:28px;
  box-shadow:none;
}
html[data-design-system="expressive"] #moduleViewWorkbench :is(.panel,.kpi-card) {
  background:#fff;
  border:1px solid transparent;
  border-radius:28px;
  box-shadow:none;
}
html[data-design-system="expressive"] #moduleViewWorkbench #kpiGrid:has(.work-hour-analysis-card)>.kpi-card {
  background:var(--md-surface-container);
  border-color:transparent;
  padding:18px;
  border-radius:28px 28px 12px 28px;
}
html[data-design-system="expressive"] #moduleViewWorkbench #kpiGrid>.kpi-card:first-child { background:var(--md-primary-container); }
html[data-design-system="expressive"] #moduleViewWorkbench .kpi-card::before { background:transparent; }
html[data-design-system="expressive"] #moduleViewWorkbench .kpi-icon { background:var(--md-primary-container);color:var(--md-primary);border-radius:14px; }
html[data-design-system="expressive"] #moduleViewWorkbench #kpiGrid>.kpi-card:first-child .kpi-icon { background:var(--md-primary);color:var(--md-on-primary); }
html[data-design-system="expressive"] #moduleViewWorkbench .kpi-value { color:var(--md-on-surface); }
html[data-design-system="expressive"] #moduleViewWorkbench :is(.kpi-label,.kpi-sub,.work-hour-analysis-detail,.work-hour-analysis-insight,.work-hour-staffing-table,.work-hour-band-summary,.work-hour-card-rule) {
  font-size:12px;
  line-height:1.6;
}
html[data-design-system="expressive"] #moduleViewWorkbench :is(.kpi-label,.kpi-sub,.work-hour-analysis-detail,.work-hour-analysis-insight) { color:var(--md-muted); }
html[data-design-system="expressive"] #moduleViewWorkbench :is(.kpi-order,.compare-row .compare) { font-size:12px; }
html[data-design-system="expressive"] #moduleViewWorkbench :is(.section-label h2,.panel-title h3) { color:var(--md-on-surface);font-weight:700; }
html[data-design-system="expressive"] #moduleViewWorkbench .section-label h2 { font-size:24px;letter-spacing:-.5px; }
html[data-design-system="expressive"] #moduleViewWorkbench .panel-head { border-color:var(--md-surface-container); }
html[data-design-system="expressive"] #moduleViewWorkbench .segmented { background:var(--md-surface-container);border-radius:28px;box-shadow:none; }
html[data-design-system="expressive"] #moduleViewWorkbench .segmented button { min-height:44px;border-radius:24px;color:var(--md-muted); }
html[data-design-system="expressive"] #moduleViewWorkbench .segmented button.active { background:var(--md-primary);color:var(--md-on-primary);box-shadow:none; }
html[data-design-system="expressive"] #moduleViewWorkbench :is(.matrix-fullscreen-button,.score-note-button) {
  min-height:44px;
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  border-color:transparent;
  border-radius:24px;
  box-shadow:none;
}
html[data-design-system="expressive"] #moduleViewWorkbench :is(.dashboard-state-banner,.filter-chip) { background:var(--md-surface-container);color:var(--md-on-primary-container);border-color:var(--md-outline);box-shadow:none; }

/* SiteControls owns date selection/focus. Override only its visual surfaces.
   Important is limited to declarations previously locked by legacy controls. */
html[data-design-system="expressive"] body .management-module-nav {
  gap:6px; margin:20px 28px 0; padding:6px; border:0; border-radius:32px;
  background:var(--md-surface-container); flex-wrap:wrap; overflow:visible;
}
html[data-design-system="expressive"] body .management-module-nav a {
  flex:1 1 auto; min-height:48px; padding:10px 20px; border-radius:26px;
  color:var(--md-on-surface); box-shadow:none;
}
html[data-design-system="expressive"] body .management-module-nav a[aria-current="page"] {
  background:var(--md-primary); color:var(--md-on-primary); box-shadow:none;
}
html[data-design-system="expressive"] body .site-date-field>.site-date-trigger,
html[data-design-system="expressive"] #moduleViewWorkbench .filter-panel .site-date-trigger {
  min-height:48px;
  background:#fff!important;
  color:var(--md-on-surface);
  border-color:var(--md-outline)!important;
  border-radius:16px;
  box-shadow:none!important;
  font-size:16px;
}
html[data-design-system="expressive"] body .site-date-panel {
  background:var(--md-surface);
  color:var(--md-on-surface);
  border:0;
  border-radius:28px;
  padding:22px;
  box-shadow:0 18px 54px #24193826;
}
html[data-design-system="expressive"] body .site-date-overlay { background:#24212e66; }
html[data-design-system="expressive"] body .site-date-panel h2 { font-size:22px;line-height:1.35; }
html[data-design-system="expressive"] body .site-date-panel button { min-height:48px;border-radius:24px; }
html[data-design-system="expressive"] body .site-date-panel>header>button { width:48px;height:48px;padding:0; }
html[data-design-system="expressive"] body .site-date-calendar-head>button:is(:first-child,:last-child) { flex-basis:48px;height:48px;padding:0; }
html[data-design-system="expressive"] body .site-date-calendar-head { margin-bottom:12px; }
html[data-design-system="expressive"] body .site-date-calendar-head>button:is([data-date-action="years"],[data-date-action="months"]) { background:var(--md-surface-container);color:var(--md-on-primary-container);font-weight:600; }
html[data-design-system="expressive"] body .site-date-choices { display:grid;gap:6px; }
html[data-design-system="expressive"] body .site-date-choices>button { border-radius:16px; }
html[data-design-system="expressive"] body .site-date-panel button[aria-pressed="true"] { background:var(--md-primary);color:var(--md-on-primary); }
html[data-design-system="expressive"] body .site-date-panel :is(h2,.site-date-grid>span) { color:var(--md-on-surface); }
html[data-design-system="expressive"] body .site-choice-search { background:#fff;color:var(--md-on-surface);border-color:var(--md-outline);border-radius:16px;min-height:48px; }
html[data-design-system="expressive"] body .site-date-calendar-actions { border-color:var(--md-outline); }
html[data-design-system="expressive"] body .site-date-calendar-actions>button { white-space:nowrap;font-size:14px; }
html[data-design-system="expressive"] body .site-date-calendar-actions>[data-date-action="latest"] { background:var(--md-primary-container);color:var(--md-on-primary-container); }
/* The same host handles pickers opened by embedded forms. Keep the companion
   out of modal/keyboard interaction without changing its event lifecycle. */
html[data-design-system="expressive"] body:has(.site-date-overlay) .workspace-character { visibility:hidden;pointer-events:none; }
html[data-design-system="expressive"][data-site-keyboard="true"] body .site-date-field>.site-date-trigger:focus,
html[data-design-system="expressive"][data-site-keyboard="true"] body .site-date-panel button:focus { outline:3px solid var(--md-primary)!important;outline-offset:-3px; }

/* Login and companion retain the existing lifecycle, controls and geometry. */
html[data-design-system="expressive"] body .auth-overlay { background:var(--md-surface);color:var(--md-on-surface); }
html[data-design-system="expressive"] body .auth-card { border:0;border-radius:32px;background:#fff;box-shadow:none; }
html[data-design-system="expressive"] body .auth-mode-tabs { background:var(--md-surface-container);border-radius:28px; }
html[data-design-system="expressive"] body .auth-mode-tab { border-radius:24px;font-size:14px; }
html[data-design-system="expressive"] body .auth-mode-tab.is-active { background:var(--md-primary-container);color:var(--md-on-primary-container);box-shadow:none; }
html[data-design-system="expressive"] body .auth-overlay .auth-button { border-radius:28px;font-size:14px;border-color:var(--md-outline); }
html[data-design-system="expressive"] body .auth-overlay .auth-button.primary { background:var(--md-primary);border-color:var(--md-primary);color:var(--md-on-primary); }
html[data-design-system="expressive"] body .auth-overlay .auth-field input { background:var(--md-surface);border-color:var(--md-outline);color:var(--md-on-surface);border-radius:16px;font-size:16px; }
/* The form card stays narrow even in landscape; its fields need full rows. */
html[data-design-system="expressive"] body .auth-overlay .auth-fields { grid-template-columns:minmax(0,1fr);min-height:0; }
html[data-design-system="expressive"] body .auth-overlay .auth-field { align-content:start; }
html[data-design-system="expressive"] body .auth-overlay .auth-field>.auth-message { margin:4px 0 0;text-align:start; }
html[data-design-system="expressive"] body .auth-overlay .auth-field input[aria-invalid="true"] { border-color:var(--md-error); }
html[data-design-system="expressive"] body :is(.auth-card h1,.auth-hero-title,.auth-brand>span) { color:var(--md-on-surface); }
html[data-design-system="expressive"] body :is(.auth-card-subtitle,.auth-field label,.auth-remember,.auth-brand-subtitle,.auth-hero-footer,.auth-trust-item) { color:var(--md-muted);font-size:12px; }
html[data-design-system="expressive"] body .character-feedback { color:var(--md-on-primary-container); }
html[data-design-system="expressive"] body :is(.character-settings,.character-settings-header) { background:var(--md-surface);color:var(--md-on-surface); }

@media(hover:hover) {
  html[data-design-system="expressive"] body :is(.ticket-nav-item,.management-nav-item,.performance-nav-item):hover { background:var(--md-primary-container);color:var(--md-on-primary-container); }
  html[data-design-system="expressive"] body .site-date-panel button:not(:disabled):hover { background:var(--md-primary-container);color:var(--md-on-primary-container); }
}
@media(max-width:1000px) {
  html[data-design-system="expressive"] #moduleViewWorkbench #kpiGrid:has(.work-hour-analysis-card)>.kpi-card { padding:16px; }
}
@media(max-width:759px) {
  html[data-design-system="expressive"] body .management-module-nav { margin:8px 18px 0; gap:4px; border-radius:24px; }
  html[data-design-system="expressive"] body .management-module-nav a { flex:1 1 28%; padding:8px; font-size:13px; }
  html[data-design-system="expressive"] body .site-date-panel { padding:16px; }
  html[data-design-system="expressive"] body .site-date-calendar-actions { flex-wrap:wrap;gap:6px; }
  html[data-design-system="expressive"] body .site-date-calendar-actions:has(>button:nth-child(3))>[data-date-action="close"] { flex-basis:100%; }
  html[data-design-system="expressive"] body.single-page-root.character-enabled { --single-page-topbar-height:64px;--mobile-nav-height:calc(72px + env(safe-area-inset-bottom)); }
  html[data-design-system="expressive"] body.single-page-root .single-page-topbar { display:flex!important;justify-content:space-between;align-items:center;min-height:64px;height:64px;padding:8px 18px;border:0;position:relative;background:var(--md-surface); }
  html[data-design-system="expressive"] body.single-page-root .single-page-topbar .ticket-mobile-brand { display:none; }
  html[data-design-system="expressive"] body.single-page-root .single-page-topbar .ticket-freshness { display:block;min-width:0;margin:0;font-size:12px; }
  html[data-design-system="expressive"] body.single-page-root .single-page-topbar .ticket-profile { display:none; }
  html[data-design-system="expressive"] body.single-page-root .single-page-topbar .workspace-character { flex-direction:row-reverse;width:auto;max-width:64%;height:48px;margin:0;gap:8px; }
  html[data-design-system="expressive"] body.single-page-root .single-page-topbar .character-feedback { width:auto;max-width:136px;font-size:12px; }
  html[data-design-system="expressive"] body.single-page-root .single-page-topbar .character-feedback progress { max-width:100%; }
  html[data-design-system="expressive"] body.single-page-root .mobile-module-nav { display:flex;gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-radius:0; }
  html[data-design-system="expressive"] body.single-page-root .mobile-module-nav>a { flex:1;min-width:0;min-height:54px;padding:4px 0; }
  html[data-design-system="expressive"] body.single-page-root .mobile-module-nav>a i { width:48px;height:28px;display:grid;place-items:center;border-radius:20px; }
  html[data-design-system="expressive"] body.single-page-root .mobile-module-nav>a[aria-current="page"] { background:transparent; }
  html[data-design-system="expressive"] body.single-page-root .mobile-module-nav>a[aria-current="page"] i { background:var(--md-primary-container); }
  html[data-design-system="expressive"] body :is(.mobile-module-nav,.mobile-bottom-nav,.management-bottom-nav,.performance-bottom-nav,.profile-bottom-nav) {
    background:var(--md-surface-container);
    border-top:1px solid var(--md-outline);
    box-shadow:none;
    backdrop-filter:none;
    border-radius:24px 24px 0 0;
  }
  html[data-design-system="expressive"] body :is(.mobile-module-nav,.mobile-bottom-nav,.management-bottom-nav,.performance-bottom-nav,.profile-bottom-nav)>a {
    color:var(--md-muted);
    font-size:12px;
    border-radius:24px;
  }
  html[data-design-system="expressive"] body :is(.mobile-module-nav,.mobile-bottom-nav,.management-bottom-nav,.performance-bottom-nav,.profile-bottom-nav)>a[aria-current="page"] {
    background:var(--md-primary-container);
    color:var(--md-on-primary-container);
    box-shadow:none;
  }
  html[data-design-system="expressive"] #moduleViewWorkbench .filter-panel { padding:16px;border-radius:24px; }
  html[data-design-system="expressive"] #moduleViewWorkbench .section-label h2 { font-size:22px; }
  html[data-design-system="expressive"] #moduleViewWorkbench #kpiGrid:has(.work-hour-analysis-card)>.kpi-card { padding:12px;border-radius:24px 24px 10px 24px; }
  html[data-design-system="expressive"] #moduleViewWorkbench .panel { border-radius:24px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-design-system="expressive"] :is(.site-date-panel,.site-date-trigger,.ticket-nav-item,.management-nav-item,.performance-nav-item) { transition:none; }
}

/* M3E-VNEXT-20261016 C07/C09: compact choices stay at the thumb edge. */
@media(max-width:599px){
 html[data-design-system="expressive"] body .site-date-overlay{align-items:end;padding:0}
 html[data-design-system="expressive"] body .site-date-panel{width:100%;margin:0;border-radius:28px 28px 0 0;border-bottom:0;padding:20px 16px max(16px,env(safe-area-inset-bottom))}
}

html[data-design-system="expressive"] body .auth-message{font-size:14px;line-height:1.6;min-height:24px;color:var(--md-muted)}
html[data-design-system="expressive"] body .auth-message.error{color:var(--md-error)}
html[data-design-system="expressive"] body .auth-message.success{color:var(--md-success)}
html[data-design-system="expressive"] body :is(.auth-tool-button,.auth-mode-tab,.auth-character-actions button,.auth-remember,.auth-link){min-height:48px;color:var(--md-muted)}
html[data-design-system="expressive"] body .auth-tool-button{width:48px;height:48px}
html[data-design-system="expressive"] body .auth-password-toggle{width:48px;height:48px;top:50%;transform:translateY(-50%);color:var(--md-muted)}
html[data-design-system="expressive"] body #authPassword{padding-right:52px}
html[data-design-system="expressive"] body :is(.auth-card-subtitle,.auth-field label,.auth-remember,.auth-link,.auth-mode-tab,.auth-character-actions button){font-size:14px;line-height:22px}