/* Existing SPA components, expressed through the shared light design system. */
:root, :root[data-theme=light], :root[data-theme=dark] {
  --bg: var(--ui-bg); --bg-rgb: 245,247,250; --panel: var(--ui-paper);
  --txt: var(--ui-ink); --txt-dim: var(--ui-muted); --txt-faint: #6b7889;
  --line: var(--ui-line); --line-strong: var(--ui-line-strong); --px: 32,45,64;
  --nav-bg: var(--ui-paper); --invert: 1; --sans: var(--ui-font); --mono: var(--ui-mono);
  --sidebar-width: var(--ui-sidebar); --red-700: var(--ui-danger); --green-700: var(--ui-success);
}
body { font-family: var(--ui-font); background: var(--ui-bg); }
.scanlines, .pixel-field, .hud-corner, .theme-toggle { display: none !important; }
.pixel-corners { clip-path: none; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
.sidebar { background: var(--ui-paper); border-right: 1px solid var(--ui-line); box-shadow: none; }
.sidebar > .brand { padding: 26px 22px 23px; border: 0; gap: 0; min-height: 83px; }
.sidebar > .brand > :not(.ui-workspace-brand) { display: none; }
.sidebar > .brand .ui-wordmark { display: flex; }
.nav-list { padding: 0 12px 18px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.nav-list > .ui-nav-label:first-child { padding-top: 5px; }
.nav-item { margin: 3px 0; height: 38px; padding: 0 13px; border-radius: 6px; font-size: 13px; letter-spacing: 0; gap: 11px; }
.nav-item:hover { background: var(--ui-subtle); }
.nav-item.active { background: var(--ui-accent-soft); color: var(--ui-accent); box-shadow: none; font-weight: 600; }
.nav-item .icon { width: 18px; height: 18px; }
.sidebar-footer { padding: 16px 17px; background: var(--ui-paper); }
.avatar { border: 0; border-radius: 50%; background: var(--ui-subtle); color: var(--ui-accent); width: 34px; height: 34px; font-size: 13px; }
.profile-copy strong { font-size: 13px; font-weight: 600; }
.profile-copy small { color: var(--ui-muted); font-size: 10px; }
.logout-button { border: 0; border-radius: 6px; color: var(--ui-muted); }
.topbar { height: 64px; background: var(--ui-paper); border-bottom: 1px solid var(--ui-line); padding: 0 36px; backdrop-filter: none; }
.breadcrumb { gap: 10px; font-size: 12px; letter-spacing: 0; color: var(--ui-muted); }
.breadcrumb strong { font-weight: 500; }
.topbar .org-context, .topbar .organization-context { border: 0; color: var(--ui-muted); }
.topbar .hud-tag { border: 0; font-family: var(--ui-font); letter-spacing: 0; color: var(--ui-muted); font-size: 11px; }
.topbar-actions > a { display: none; } /* Use the single navigation's guide entry. */
.content { max-width: 1500px; padding: 34px 36px 40px; }
.page-heading { margin-bottom: 25px; gap: 22px; }
.page-heading h1 { font-size: 27px; letter-spacing: -.4px; line-height: 1.4; font-weight: 600; margin: 5px 0 0; }
.page-heading p { font-size: 13px; color: var(--ui-muted); margin-top: 7px; }
.eyebrow { color: var(--ui-muted); font-size: 10px; letter-spacing: 1.6px; }
.compact-upload-row { gap: 10px; }
.compact-upload-field > span { font-size: 11px; letter-spacing: 0; }
.compact-upload-field > input, .compact-upload-row select { height: 38px; border: 1px solid var(--ui-line-strong); border-radius: 6px; background: var(--ui-paper); padding: 0 10px; font-size: 12px; }
.compact-upload-row > :first-child { font-size: 11px; color: var(--ui-muted); }
.compact-upload-row select { max-width: 210px; margin-top: 4px; display: block; }
.compact-upload-field > input { width: 160px; }
.button, .upload-button { min-height: 36px; height: auto; border-radius: 6px; padding: 8px 13px; font-size: 12px; letter-spacing: 0; transition: background .15s, border-color .15s; }
.button.primary, .button-primary, .upload-button[data-ready=true] { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-accent); }
.button.primary:hover:not(:disabled), .button-primary:hover:not(:disabled) { background: var(--ui-accent-hover); color: var(--ui-on-accent); border-color: var(--ui-accent-hover); }
.button.secondary, .button-secondary { background: var(--ui-paper); border-color: var(--ui-line-strong); }
.button.secondary:hover:not(:disabled), .button-secondary:hover:not(:disabled) { background: var(--ui-subtle); border-color: #a5b3c4; }
.button-small { padding: 5px 10px; min-height: 30px; font-size: 11px; }
.button-danger { color: var(--ui-danger); border-style: solid; border-color: #e5c3c3; }
.lawyer-profile { margin: 0 0 24px; padding: 0; border: 0; }
.lawyer-identity strong { font-size: 13px; font-weight: 600; }
.lawyer-identity span, .lawyer-context { font-size: 11px; color: var(--ui-muted); }
.lawyer-identity .avatar { width: 32px; height: 32px; color: var(--ui-accent); }
.lawyer-context small { font-size: 12px; font-family: var(--ui-font); }
.personal-stats { gap: 0; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: 10px; overflow: hidden; margin-bottom: 28px; }
.personal-stats .stat-chip { border: 0; border-right: 1px solid var(--ui-line); background: transparent; padding: 21px 22px; min-height: 103px; gap: 14px; }
.personal-stats .stat-chip:last-child { border-right: 0; }
.personal-stats .stat-chip:hover { background: var(--ui-subtle); }
.personal-stats .stat-chip > .icon { color: #7890aa; width: 22px; height: 22px; align-self: center; }
.personal-stats .summary-copy span { font-size: 12px; letter-spacing: 0; color: var(--ui-muted); }
.personal-stats .summary-copy strong { font-size: 28px; line-height: 1.3; font-weight: 500; color: var(--ui-ink); margin-top: 8px; }
.personal-stats .summary-copy strong small { font-size: 11px; margin-left: 5px; }
.panel { border: 1px solid var(--ui-line); border-radius: 10px; margin-bottom: 24px; background: var(--ui-paper); }
.panel-heading { padding: 19px 22px; border-bottom: 1px solid var(--ui-line); }
.panel-heading h2 { font-size: 15px; letter-spacing: 0; font-weight: 600; }
.panel-heading p { font-size: 12px; margin-top: 5px; color: var(--ui-muted); }
.panel-heading .text-button, .panel-heading > a { color: var(--ui-accent); font-size: 12px; }
.panel-heading h2 .icon { display: none; }
.case-home-counts { padding: 12px 22px; font-size: 12px; background: var(--ui-subtle); border-bottom: 1px solid var(--ui-line); }
.case-home-counts strong { color: var(--ui-accent); font-size: 13px; }
.status-tabs { padding: 10px 20px 0; gap: 22px; margin-bottom: 0; }
.status-tabs button { font-size: 12px; padding-bottom: 10px; }
.status-tabs button.active { color: var(--ui-accent); border-color: var(--ui-accent); font-weight: 600; }
.data-table { font-size: 12px; }
.data-table th { background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px; font-weight: 500; padding: 12px 14px; }
.data-table td { padding: 17px 14px; line-height: 1.8; }
.data-table th:first-child, .data-table td:first-child { padding-left: 22px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 22px; }
.data-table td:first-child { min-width: 200px; }
.data-table td a { color: var(--ui-ink); font-weight: 500; }
.data-table td a:hover { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.data-table small { font-size: 10px; color: var(--ui-muted); }
.data-table tbody tr:hover { background: var(--ui-subtle); }
.status-badge { border: 0; border-radius: 4px; font-size: 10px; padding: 4px 7px; background: var(--ui-subtle); color: var(--ui-muted); }
.status-badge i { border-radius: 50%; width: 4px; height: 4px; }
.status-confirmed, .status-active, .status-completed { background: var(--ui-success-soft); color: var(--ui-success); }
.status-review_required, .status-pending, .status-proposed { background: var(--ui-warning-soft); color: var(--ui-warning); }
.status-failed { background: var(--ui-danger-soft); color: var(--ui-danger); }
.status-processing { background: var(--ui-accent-soft); color: var(--ui-accent); }
.workspace-grid { gap: 22px; }
.filter-bar { gap: 10px; margin: 20px 0; }
.filter-bar input, .filter-bar select { background: var(--ui-paper); font-size: 13px; height: 39px; border-radius: 6px; padding: 0 12px; }
.form-field input, .form-field select, .form-field textarea, .case-field input, .case-field select, .case-field textarea { border-radius: 6px; background: var(--ui-paper); font-size: 13px; border-color: var(--ui-line-strong); padding: 9px 11px; }
.form-field input, .form-field select { min-height: 40px; }
.form-field label { font-size: 12px; letter-spacing: 0; }
input::placeholder, textarea::placeholder { color: #7c8796; }
.notice, .empty-state, .empty, .intake-case-card { border-radius: 7px; }
.read-dialog, .dialog, .modal { border-radius: 12px; box-shadow: 0 18px 60px #20385826; }
.app-footer { border-top: 0; padding: 8px 36px 24px; }
.app-footer > :not(.ui-footer-note) { display: none; }
.ui-footer-note { font-size: 10px; color: #728095; letter-spacing: .05em; }
.ui-footer-note span { margin: 0 8px; }
.assistant-launcher { border-radius: 50%; background: var(--ui-accent); color: var(--ui-on-accent); border: 0; box-shadow: 0 4px 16px #233f5e26; }
.assistant-launcher > i { display: none; }
.assistant-panel { border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: 0 12px 50px #233f5e26; }
.assistant-panel button, .assistant-panel textarea { border-radius: 5px; }
.tutorial-player-frame { border: 1px solid var(--ui-line); border-radius: 10px; overflow: hidden; }
.jw-player-tips { color: var(--ui-muted); font-size: 11px; padding: 12px 0; display: grid; gap: 7px; }
.jw-player-tips span { margin-right: 10px; }
.jw-player-tips kbd { border: 1px solid var(--ui-line-strong); padding: 2px 4px; border-radius: 3px; background: var(--ui-paper); }
.jw-sop-banner { padding: 22px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper); margin-top: 22px; }
.jw-sop-banner h3 { font-size: 15px; }
.jw-sop-banner p { font-size: 12px; color: var(--ui-muted); }
.jw-sop-actions { display: flex; flex-wrap: wrap; gap: 15px; }
.jw-sop-actions a, .jw-chapter-action-btn { color: var(--ui-accent); font-size: 12px; }
.tutorial-chapter-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.tutorial-chapter-grid > li { display: flex; flex-direction: column; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper); min-width: 0; }
.tutorial-chapter-grid .tutorial-chapter { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; min-height: 76px; height: auto; flex: 1; padding: 15px; border: 0; border-radius: 7px 7px 0 0; background: transparent; color: var(--ui-ink); }
.tutorial-chapter-grid .tutorial-chapter:hover { background: var(--ui-subtle); }
.tutorial-chapter-grid .tutorial-chapter.is-current { background: var(--ui-accent-soft); color: var(--ui-accent); box-shadow: inset 3px 0 var(--ui-accent); }
.tutorial-chapter-grid .tutorial-chapter-number { width: 28px; height: 28px; border-radius: 5px; font-size: 10px; }
.tutorial-chapter-grid .tutorial-chapter.is-current .tutorial-chapter-number { background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); }
.tutorial-chapter-grid .tutorial-chapter-title { font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.tutorial-chapter-grid .tutorial-chapter-time { margin: 0; font-size: 11px; white-space: nowrap; }
.jw-chapter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; padding: 11px 15px; border-top: 1px solid var(--ui-line); }
.jw-chapter-action-btn { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; min-height: 34px; border: 1px solid var(--ui-line-strong); background: var(--ui-paper); padding: 6px 9px; border-radius: 5px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; text-align: left; text-decoration: none; }
.jw-chapter-action-btn:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent); text-decoration: none; }
.jw-chapter-badge { color: var(--ui-muted); background: var(--ui-subtle); border-radius: 4px; padding: 3px 6px; font-size: 10px; white-space: nowrap; }
@media (min-width: 1001px) { .sidebar { visibility: visible; transform: none; } .main-column { margin-left: var(--ui-sidebar); width: calc(100% - var(--ui-sidebar)); } }
@media (max-width: 1250px) and (min-width: 801px) { .attorney-workbench .page-heading { align-items: flex-start; flex-wrap: wrap; } .personal-stats .stat-chip { padding: 18px 14px; } .compact-upload-row select { max-width: 200px; } }
@media (max-width: 1000px) { .content { padding: 28px 24px; } .topbar { padding: 0 24px; } }
@media (max-width: 700px) {
  .content { padding: 23px 16px; }
  .topbar { padding: 0 16px; height: 58px; }
  .page-heading, .attorney-workbench .page-heading { flex-direction: column; align-items: flex-start; gap: 20px; }
  .page-heading h1 { font-size: 24px; }
  .page-heading p { font-size: 12px; }
  .compact-upload { width: 100%; }
  .compact-upload-row { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .compact-upload-row > :first-child { grid-column: 1 / -1; }
  .compact-upload-row select, .compact-upload-field > input { width: 100%; max-width: none; font-size: 14px; }
  .compact-upload-row .upload-button { width: 100%; }
  .lawyer-context > .icon, .lawyer-context > span { display: none; }
  .lawyer-profile { flex-direction: row; align-items: center; margin-bottom: 20px; }
  .lawyer-identity > div > span { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .lawyer-context small { font-size: 10px; }
  .personal-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .personal-stats .stat-chip { min-height: 90px; padding: 16px; }
  .personal-stats .stat-chip:nth-child(2) { border-right: 0; }
  .personal-stats .stat-chip:nth-child(-n+2) { border-bottom: 1px solid var(--ui-line); }
  .personal-stats .summary-copy strong { font-size: 25px; }
  .panel-heading { padding: 16px; }
  .data-table th:first-child, .data-table td:first-child { padding-left: 16px; }
  .case-home-counts { padding: 12px 16px; font-size: 11px; }
  .filter-bar input, .filter-bar select { max-width: 100%; flex: 1 1 140px; }
  .app-footer { padding: 0 16px 25px; }
}
@media print { .content { padding: 0; } .main-column { width: 100%; margin-left: 0; } }
.ui-capability-notice { padding: 10px 14px; margin: 0 0 16px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-bg); color: var(--ui-muted); font-size: 12px; line-height: 1.7; }
.assistant-composer > .ui-capability-notice { flex: 0 0 100%; margin-bottom: 6px; }