/* ── EnCode workspace ──────────────────────────────────────────────────────── */

/* tailwind.css (vendored from Cortex) carries `html,body{font-family:DM Sans,
   sans-serif}` — a font this app has never shipped a @font-face for, so every
   element that inherited from body silently rendered in the generic sans-serif
   fallback (Helvetica/Arial) while the .encode-* rules below rendered in Inter.
   Two typefaces on one page, and any element whose Inter rule resolved later
   than its first paint visibly restyled. This override runs last in the link
   order, so it wins. Fix here rather than in tailwind.css: that file is a build
   artifact and the DM Sans line would come back with the next regeneration. */
html, body {
  font-family: 'Inter', sans-serif;
}

.encode-workspace {
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--surface-bg);
  color: var(--text-primary);
}

/* Header */
.encode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 54px;
  background: var(--surface-white);
  border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
  gap: 16px;
}

.encode-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-blue);
  letter-spacing: -0.01em;
}

.encode-deploy-badge {
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--text-secondary);
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* Main split */
.encode-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Sidebar */
.encode-sidebar {
  width: 208px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface-sidebar);
  border-right: 1px solid var(--surface-border);
  flex-shrink: 0;
  padding: 12px 0;
  overflow: hidden;
  transition: width 0.15s, padding 0.15s, border-color 0.15s;
}

/* Collapsed by the header's show/hide button (encode#toggleSidebar) -- gives
   the review workspace (documents + codes) the full window width instead of
   losing 208px to case navigation the reviewer isn't using right now. Width
   collapses rather than `display:none` so the transition doesn't jump. */
.encode-sidebar--collapsed {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
}

/* The sidebar is 208px wide to hold session titles; these nav rows are sized
   and inset to match .encode-session-item so both read as one list, rather
   than the 36px centred icon squares left over from when it was an icon rail. */
.encode-sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
}

.encode-sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 8px 0;
  padding-top: 8px;
  /* Inset by the shared 8px margin so the rule lines up with the row edges. */
  border-top: 1px solid var(--surface-border);
}

.encode-sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.encode-sidebar-item svg { flex-shrink: 0; }

.encode-sidebar-item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Right panel */
.encode-right {
  flex: 1.25;
  display: flex;
  flex-direction: column;
  background: var(--surface-bg);
  overflow: hidden;
  min-width: 0;
}

/* Tabs */
.encode-tabs {
  display: flex;
  padding: 0 24px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-white);
  flex-shrink: 0;
}

.encode-tab {
  padding: 14px 4px;
  margin-right: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.encode-tab:hover { color: var(--text-secondary); }
.encode-tab--active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.encode-tab--disabled { color: var(--surface-border); cursor: default; }

/* Left content */
.encode-left-content.hidden {
  display: none;
}

.encode-left-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  gap: 16px;
  overflow: hidden;
}

.encode-left-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* Notes textarea */
.encode-notes-wrap--fill {
  flex: 1;
  min-height: 0;
}

.encode-notes-wrap {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  display: flex;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.encode-notes-wrap:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(30, 111, 191, 0.1);
}

.encode-notes-textarea {
  flex: 1;
  width: 100%;
  padding: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  font-family: 'Inter', sans-serif;
}

.encode-notes-textarea::placeholder { color: var(--text-muted); }

/* Upload zone */
.encode-upload-zone {
  flex: 1;
  min-height: 0;
  border: 2px dashed var(--surface-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.encode-upload-zone:hover,
.encode-upload-zone--drag {
  border-color: var(--brand-blue);
  background: var(--surface-blue-tint);
}

/* Staged file preview */
.encode-upload-preview {
  flex-shrink: 0;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--surface-white);
}

.encode-upload-preview-file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.encode-upload-clear {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}

.encode-upload-clear:hover {
  color: var(--text-danger);
  background: var(--surface-danger);
}

/* Buttons */
.encode-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--brand-blue);
  color: white;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.encode-btn-primary:hover { background: var(--brand-blue-light); }
.encode-btn-primary:disabled { background: var(--surface-hover); color: var(--text-muted); cursor: not-allowed; }
.encode-btn-primary--stop { background: var(--text-danger) !important; }
.encode-btn-primary--stop:hover { background: var(--text-danger-strong) !important; }

.encode-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.encode-btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }

.encode-btn-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--brand-blue);
  color: white;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.encode-btn-export:hover { background: var(--brand-blue-light); }
.encode-btn-export:disabled { background: var(--surface-hover); color: var(--text-muted); cursor: not-allowed; }


.encode-right-subtitle { font-size: 12px; color: var(--text-muted); }
.encode-cost-line { font-size: 11px; color: var(--text-muted); opacity: 0.7; margin-top: 2px; }


/* Header session status pill */
.encode-session-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.encode-session-status[data-status="incomplete"]  { background: var(--surface-hover); color: var(--text-muted); }
.encode-session-status[data-status="analyzed"]    { background: var(--surface-warning-tint); color: var(--text-warning); }
.encode-session-status[data-status="finalized"]   { background: var(--surface-green-tint); color: var(--text-success); }
.encode-session-status[data-status="no_results"]  { background: var(--surface-danger); color: var(--text-danger); }

.encode-btn-danger {
  color: var(--text-danger) !important;
  border-color: var(--border-danger) !important;
}

.encode-btn-danger:hover {
  background: var(--surface-danger) !important;
}

@keyframes encode-progress {
  0%   { width: 5%;  margin-left: 0; }
  50%  { width: 60%; margin-left: 20%; }
  100% { width: 5%;  margin-left: 95%; }
}

@keyframes encode-pulse-icon {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.92); }
}

@keyframes encode-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.encode-processing-pulse {
  animation: encode-pulse-icon 1.6s ease-in-out infinite;
}

.encode-processing-fade {
  opacity: 0;
  transition: opacity 0.18s ease;
}

[data-encode-target="processingHeading"],
[data-encode-target="processingMsg"] {
  transition: opacity 0.18s ease;
}

/* Results scroll area */
.encode-results {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.encode-results::-webkit-scrollbar { width: 5px; }
.encode-results::-webkit-scrollbar-track { background: var(--surface-bg); }
.encode-results::-webkit-scrollbar-thumb { background: var(--surface-active); border-radius: 3px; }
.encode-results::-webkit-scrollbar-thumb:hover { background: var(--border-blue-tint); }

/* Empty state */
.encode-empty-state.hidden {
  display: none;
}

.encode-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1;
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
  min-height: 300px;
}

/* Section */
.encode-section { display: flex; flex-direction: column; gap: 10px; }

.encode-section-cards { display: flex; flex-direction: column; gap: 10px; }

.encode-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.encode-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.encode-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--surface-active);
  color: var(--brand-blue);
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
}

/* Code card */
.encode-card {
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 16px;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.encode-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.06); }

.encode-card--accepted {
  border-left-width: 3px;
  border-left-color: var(--text-success);
  background: var(--surface-green-tint);
}

.encode-card--rejected { opacity: 0.4; filter: grayscale(60%); }

/* Selected card (click or J/K): outline, not colour alone, so it reads on
   accepted/rejected cards too. */
.encode-card--selected {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}
.encode-card--rejected.encode-card--selected { opacity: 0.75; }

/* Finalise while items are left: focusable, explains itself on click. */
.encode-finalise--locked { color: var(--text-muted) !important; }

.encode-finalise-popover {
  position: fixed;
  z-index: 9990;
  width: 360px;
  max-width: calc(100vw - 16px);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  font-size: 13px;
}
.encode-finalise-popover-head { margin: 0; padding: 12px 14px; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--surface-border); }
.encode-finalise-popover-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--surface-border); }
.encode-finalise-popover-title { margin: 0; font-weight: 600; color: var(--text-primary); }
.encode-finalise-popover-detail { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }
.encode-finalise-popover-foot { margin: 0; padding: 10px 14px; font-size: 12px; color: var(--text-secondary); }

.encode-shortcut-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--text-primary); }
.encode-shortcut-list kbd {
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--surface-border); background: var(--surface-hover);
  justify-self: start;
}

.encode-codefinder-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.encode-codefinder-row {
  display: grid; grid-template-columns: 16px 150px 110px max-content 1fr; gap: 6px 10px; align-items: center;
  padding: 6px 8px; border: 1px solid var(--surface-border); border-radius: 6px; font-size: 13px; color: var(--text-primary);
}
.encode-codefinder-row.is-copied { background: var(--surface-hover); }
.encode-codefinder-row.is-copied .encode-codefinder-code { color: var(--text-muted); }
.encode-codefinder-tick { color: var(--text-success); font-weight: 700; }
.encode-codefinder-slot { font-size: 12px; color: var(--text-secondary); }
.encode-codefinder-code {
  font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; letter-spacing: 0.02em;
  width: 100%; padding: 3px 6px; border: 1px solid var(--surface-border); border-radius: 5px;
  background: var(--surface-bg); color: var(--text-primary);
}
.encode-codefinder-desc { min-width: 0; font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .encode-codefinder-row { grid-template-columns: 16px 1fr max-content; }
  .encode-codefinder-slot { grid-column: 2 / -1; }
  .encode-codefinder-desc { grid-column: 2 / -1; white-space: normal; }
}

.encode-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.encode-code-meta { display: flex; align-items: center; gap: 8px; }

.encode-type-pill {
  padding: 2px 8px;
  background: var(--surface-blue-tint);
  color: var(--brand-navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
}

.encode-type-pill--cpt {
  background: var(--brand-blue-light);
  color: var(--text-on-dark);
}

.encode-code-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  font-family: 'Inter', monospace;
}

.encode-confidence-pct {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.encode-confidence-pct--high   { background: var(--surface-green-tint); color: var(--text-success); }
.encode-confidence-pct--medium { background: var(--surface-warning-tint); color: var(--text-warning); }
.encode-confidence-pct--low    { background: var(--surface-danger); color: var(--text-danger); }

/* Fallback for legacy High/Medium/Low if returned by a saved custom prompt */
.encode-confidence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.encode-confidence--high   { background: var(--surface-green-tint); color: var(--text-success); }
.encode-confidence--medium { background: var(--surface-warning-tint); color: var(--text-warning); }
.encode-confidence--low    { background: var(--surface-danger); color: var(--text-danger); }

/* Status pill on card */
.encode-card-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.encode-card-status--active       { background: var(--surface-green-tint); color: var(--text-success); }
.encode-card-status--resolved     { background: var(--surface-hover); color: var(--text-muted); }
.encode-card-status--inconclusive { background: var(--surface-warning-tint); color: var(--text-warning); }
.encode-card-status--complication { background: var(--surface-blue-tint); color: var(--brand-navy); }

/* Contradicts DS warning on card */
.encode-card-contradicts {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-danger);
  background: var(--surface-danger);
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 8px;
}

.encode-card-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 10px;
}

.encode-card-excerpt {
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 8px 12px;
  background: var(--surface-bg);
  border-left: 3px solid var(--surface-border);
  border-radius: 0 4px 4px 0;
  margin-bottom: 12px;
}

.encode-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}

/* Clinical-evidence expander on cards */
.encode-card-details { margin-bottom: 12px; }

.encode-card-details summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.encode-card-details summary::-webkit-details-marker { display: none; }

.encode-card-details summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s;
}

.encode-card-details[open] summary::before { transform: rotate(90deg); }

.encode-card-details summary:hover { color: var(--text-primary); }

.encode-card-details .encode-ws-detail-grid { margin-top: 8px; }

.encode-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.01em;
}

.encode-action-btn--accept { background: var(--surface-green-tint); color: var(--text-success); }
.encode-action-btn--accept:hover { background: var(--border-green-tint); }
.encode-action-btn--reject { background: var(--surface-bg); color: var(--text-secondary); }
.encode-action-btn--reject:hover { background: var(--surface-danger); color: var(--text-danger); }

/* Warning card */
/* Inline warning inside a code card */
.encode-inline-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-warning-tint);
  border: 1px solid var(--border-warning-tint);
  border-radius: 6px;
  margin-bottom: 12px;
}

/* Standalone warning card (fallback) */
.encode-warning-card {
  background: var(--surface-warning-tint);
  border: 1px solid var(--border-warning-tint);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.encode-warning-title { font-size: 13px; font-weight: 600; color: var(--text-warning); margin-bottom: 3px; }
.encode-warning-body  { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* Right footer */
.encode-right-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 24px;
  background: var(--surface-white);
  border-top: 1px solid var(--surface-border);
  flex-shrink: 0;
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-secondary);
  gap: 12px;
}

/* Session list */
.encode-sidebar-sessions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

.encode-sidebar-sessions::-webkit-scrollbar { display: none; }

/* Session list item */
.encode-session-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}

.encode-session-item:hover { background: var(--surface-hover); }

.encode-session-item--active { background: var(--surface-active); }

.encode-session-item-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.encode-session-item--active .encode-session-item-title { color: var(--brand-blue); }

.encode-session-item-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-muted);
}

.encode-session-item-status {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--surface-border);
}

.encode-session-item-status--analyzed   { background: var(--text-success); }
.encode-session-item-status--finalized  { background: var(--brand-blue); }
.encode-session-item-status--analyzing  { background: var(--text-warning); }
.encode-session-item-status--error      { background: var(--text-danger); }

/* Sidebar active state — matches the active session row's weight/colour. */
.encode-sidebar-item--active {
  background: var(--surface-active);
  color: var(--brand-blue);
  font-weight: 600;
}

/* Settings page layout */
.encode-settings-content {
  flex: 1;
  overflow-y: auto;
  background: var(--surface-bg);
  padding: 40px 24px;
}

.encode-settings-inner {
  max-width: 680px;
  margin: 0 auto;
}

/* /eval pages (runs list, run detail, batch status, engine index/diff) are
   table-heavy with many columns — the 680px settings-form width forced
   horizontal scrolling on every table. Use the full width the sidebar layout
   leaves available instead of a fixed max-width. */
.encode-settings-content--wide {
  padding: 32px 24px;
}
.encode-settings-inner--fluid {
  max-width: none;
  width: 100%;
  margin: 0;
}

.encode-settings-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.encode-settings-badge--muted   { background: var(--surface-hover); color: var(--text-muted); }
.encode-settings-badge--active  { background: var(--surface-active); color: var(--brand-blue); }
.encode-settings-badge--success { background: color-mix(in srgb, var(--text-success) 16%, var(--surface-white)); color: var(--text-success); }
.encode-settings-badge--review  { background: color-mix(in srgb, var(--text-warning) 18%, var(--surface-white)); color: var(--text-warning); }
.encode-settings-badge--danger  { background: color-mix(in srgb, var(--text-danger) 14%, var(--surface-white)); color: var(--text-danger); }

.encode-settings-pre {
  margin: 0;
  padding: 16px;
  border-radius: 8px;
  font-size: 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface-bg);
  color: var(--text-secondary);
  border: 1px solid var(--surface-border);
}

/* Icon button (clear) */
.encode-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.encode-icon-btn:hover { background: var(--surface-hover); color: var(--text-secondary); }

/* ACHI pill variant */
.encode-type-pill--achi {
  background: var(--surface-green-tint);
  color: var(--text-success-strong);
}

/* Review-only banner + embedded document panel (redesigned 2026-09-07:
   PDFs used to be a short list of "open in a new tab" links — a reviewer
   working through a multi-document case lost the coding cards every click.
   Both are inserted as direct children of .encode-left (a column flex
   container), ahead of the Paste/Upload tabs, which _hideLeftTabs() hides
   entirely while a review is open. */
.encode-review-banner {
  flex-shrink: 0;
  margin: 16px 24px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  background: #fdf6e6;
  border: 1px solid #d9a441;
  color: #7a5410;
}

.encode-review-documents {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.encode-review-doc-status {
  margin: auto;
  width: min(100%, 520px);
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-bg);
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

.encode-review-doc-status-details {
  margin: 12px 0 0;
  padding: 12px;
  max-height: 220px;
  overflow: auto;
  border-radius: 6px;
  background: var(--surface-white);
  color: var(--text-muted);
  font: 11px/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace;
  text-align: left;
  white-space: pre-wrap;
}

.encode-review-doc-retry {
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-white);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.encode-review-doc-retry:hover { background: var(--surface-hover); }

.encode-review-doc-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-hover);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}

.encode-review-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The document holding the selected card's evidence (encode_controller
   _jumpToEvidence); the label names the code and page. */
.encode-review-doc-divider--evidence { background: var(--surface-blue-tint); color: var(--brand-blue); }
.encode-review-doc-divider--evidence::after {
  content: attr(data-evidence-for);
  flex-shrink: 0;
  font-weight: 700;
}

.encode-review-doc-kind {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-active);
  color: var(--brand-blue);
}

.encode-review-doc-openlink {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  color: var(--brand-blue);
  text-decoration: none;
}
.encode-review-doc-openlink:hover { text-decoration: underline; }

.encode-review-doc-frame {
  width: 100%;
  height: 85vh;
  flex-shrink: 0;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-white);
}

.encode-review-doc-toggle {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-white);
  color: var(--brand-blue);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
}
.encode-review-doc-toggle:hover { background: var(--surface-hover); }

.encode-review-doc-evidence {
  width: 100%;
  min-height: 200px;
  max-height: 85vh;
  overflow-y: auto;
  flex-shrink: 0;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-white);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-secondary);
}

.encode-review-doc-evidence-item { padding: 8px 0; border-bottom: 1px solid var(--surface-border); }
.encode-review-doc-evidence-item:last-child { border-bottom: none; }

.encode-review-doc-evidence-head {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.encode-review-doc-evidence blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid var(--surface-border);
  font-style: italic;
}

/* Left panel — full-height notes */
.encode-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--surface-border);
  background: var(--surface-white);
  overflow: hidden;
  min-width: 0;
}

/* Streaming progress bar — sits above right-panel header */
.encode-stream-bar {
  height: 3px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: var(--surface-border);
}

.encode-stream-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--brand-blue);
  border-radius: 0 2px 2px 0;
  animation: encode-progress 1.8s ease-in-out infinite;
}

/* Worksheet panel */
.encode-worksheet {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.encode-worksheet::-webkit-scrollbar { width: 5px; }
.encode-worksheet::-webkit-scrollbar-track { background: var(--surface-bg); }
.encode-worksheet::-webkit-scrollbar-thumb { background: var(--surface-active); border-radius: 3px; }

/* Worksheet blocks */
.encode-ws-block {
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.encode-ws-block--demo {
  border-left: 3px solid var(--brand-blue);
}

/* Skeleton placeholder — shown at bottom of worksheet while streaming */
.encode-ws-skeleton {
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-white), var(--surface-white)) padding-box,
    linear-gradient(90deg, var(--surface-border) 0%, var(--text-muted) 50%, var(--surface-border) 100%) border-box;
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 200% 0;
  animation: encode-skeleton-sweep 2s ease-in-out infinite;
}

/* Header stripe — bottom border sweeps in sync with the outer border */
.encode-ws-skeleton::before {
  content: "";
  display: block;
  height: 33px;     /* matches block-head: 8px + line-height + 8px + 1px border */
  background:
    linear-gradient(var(--surface-bg), var(--surface-bg)) padding-box,
    linear-gradient(90deg, var(--surface-border) 0%, var(--text-muted) 50%, var(--surface-border) 100%) border-box;
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 200% 0;
  border-bottom: 1px solid transparent;
  animation: encode-skeleton-sweep 2s ease-in-out infinite;
}

/* Body area */
.encode-ws-skeleton::after {
  content: "";
  display: block;
  height: 36px;
}

@keyframes encode-skeleton-sweep {
  0%   { background-position: 0 0, 200% 0; }
  100% { background-position: 0 0, -50% 0; }
}

.encode-ws-block--flags {
  border-color: var(--border-warning-tint);
  background: var(--surface-warning-tint);
}

.encode-ws-block-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface-bg);
  border-bottom: 1px solid var(--surface-border);
}

.encode-ws-block--flags .encode-ws-block-head {
  background: var(--surface-warning-tint);
  border-bottom-color: var(--border-warning-tint);
}

.encode-ws-block-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.encode-ws-block-title--flag {
  color: var(--text-warning);
}

.encode-ws-block-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Demographics grid in worksheet */
.encode-ws-demo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 10px 14px;
}

.encode-ws-demo-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 60px;
}

.encode-ws-demo-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.encode-ws-demo-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Code rows in worksheet */
.encode-ws-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.encode-ws-code-type {
  flex-shrink: 0;
}

.encode-ws-code-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Inter', monospace;
  flex-shrink: 0;
  min-width: 72px;
}

.encode-ws-code-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

/* Code entry in worksheet (wraps row + detail grid) */
.encode-ws-code-entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--surface-border);
}

.encode-ws-code-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Contradicts DS warning */
.encode-ws-contradicts {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-danger);
  background: var(--surface-danger);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

/* Detail grid: label + value pairs */
.encode-ws-detail-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 3px 8px;
  padding: 6px 10px;
  background: var(--surface-bg);
  border-radius: 5px;
  border: 1px solid var(--surface-border);
}

.encode-ws-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 1px;
}

.encode-ws-detail-value {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.encode-ws-detail-cite {
  font-style: italic;
}

.encode-ws-detail-cite em {
  font-size: 11px;
  color: var(--text-muted);
  font-style: normal;
  margin-left: 4px;
}

/* Warning injected into worksheet code entry */
.encode-ws-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-warning-tint);
  border: 1px solid var(--border-warning-tint);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
}

.encode-ws-warning-title {
  font-weight: 600;
  color: var(--text-warning);
}

.encode-ws-warning-body {
  color: var(--text-secondary);
}

/* Section finding text in worksheet */
.encode-ws-finding-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* PMH list */
.encode-ws-pmh-list {
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.encode-ws-pmh-item {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Flag list in worksheet */
.encode-ws-flag-list {
  margin: 0;
  padding: 10px 14px 10px 28px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.encode-ws-flag-item {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Right panel header — compact, holds status + tabs */
.encode-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 0 24px;
  height: 44px;
  background: var(--surface-white);
  border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
  gap: 16px;
}

/* Right-panel tab bar — inline in header */
.encode-right-tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0;
}

.encode-right-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  margin-left: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.encode-right-tab:hover { color: var(--text-secondary); }
.encode-right-tab--active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }

/* Worklist tab accepted-count badge */
.encode-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--brand-blue);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
}

/* Right panel containers */
.encode-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Citation block */
.encode-card-citation {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--surface-bg);
  border-left: 3px solid var(--surface-border);
  border-radius: 0 4px 4px 0;
  margin-bottom: 12px;
}

.encode-citation-quote {
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
}

.encode-citation-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* 3M Worklist panel */
.encode-worklist {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.encode-worklist::-webkit-scrollbar { width: 5px; }
.encode-worklist::-webkit-scrollbar-track { background: var(--surface-bg); }
.encode-worklist::-webkit-scrollbar-thumb { background: var(--surface-active); border-radius: 3px; }

.encode-worklist-pre {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-primary);
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 20px 24px;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}

/* Worksheet inline accept/reject actions */
.encode-ws-entry-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Active state styling for worksheet accept/reject buttons (reuses encode-action-btn base) */
.encode-ws-accept-btn[data-active="true"] {
  background: var(--border-green-tint);
}

.encode-ws-reject-btn[data-active="true"] {
  background: var(--surface-danger);
  color: var(--text-danger);
}


/* Worksheet code entry state tinting */
.encode-ws-code-entry[data-ws-state="accepted"] {
  background: var(--surface-green-tint);
  border-radius: 5px;
  padding: 6px 8px 10px;
  margin: -2px -4px;
}

.encode-ws-code-entry[data-ws-state="rejected"] {
  opacity: 0.45;
  filter: grayscale(50%);
}

/* Flat codes table */
.encode-codes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.encode-codes-table thead tr {
  border-bottom: 1px solid var(--surface-border);
}

.encode-codes-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 10px 8px;
}

.encode-codes-th-conf,
.encode-codes-th-status { width: 90px; }

.encode-codes-table tbody tr {
  border-bottom: 1px solid var(--surface-border);
  transition: background 0.1s;
}

.encode-codes-table tbody tr:last-child { border-bottom: none; }
.encode-codes-table tbody tr:hover { background: var(--surface-hover); }

.encode-codes-row--accepted { background: var(--surface-green-tint); }
.encode-codes-row--accepted:hover { background: var(--surface-green-tint); }
.encode-codes-row--rejected { opacity: 0.4; filter: grayscale(50%); }

.encode-codes-table td {
  padding: 10px;
  vertical-align: middle;
}

.encode-codes-td-code {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.encode-codes-code-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Inter', monospace;
}

.encode-codes-td-desc {
  color: var(--text-secondary);
  line-height: 1.4;
}

.encode-codes-td-conf,
.encode-codes-td-status { white-space: nowrap; }

/* Global destinations stay fixed; only coding shows its case history. */
.encode-brand { text-decoration: none; }
.encode-sidebar { min-height: 0; }
.encode-sidebar-top { flex-shrink: 0; }
.encode-sidebar-bottom { margin-top: auto; flex-shrink: 0; }
/* Coder's own pages (pick, code, done) above; overview and testing below. */
.encode-sidebar-divider { border: 0; border-top: 1px solid var(--surface-border); margin: 6px 1px; }
.encode-case-history {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  margin: 16px 0 8px; border-top: 1px solid var(--surface-border);
}
.encode-case-history-controls { padding: 16px 12px 8px; display: grid; gap: 8px; }
.encode-case-history h2 { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.encode-case-history input, .encode-case-history select {
  width: 100%; min-width: 0; min-height: 36px; border: 1px solid var(--surface-border);
  border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px;
  background: var(--surface-white); color: var(--text-primary);
}
.encode-case-history input:focus-visible, .encode-case-history select:focus-visible {
  outline: 2px solid var(--brand-blue); outline-offset: 2px;
}
.encode-case-history-empty { padding: 8px 16px; font-size: 12px; color: var(--text-muted); }
.encode-sidebar-sessions { min-height: 0; scrollbar-width: thin; }
.encode-sidebar-sessions::-webkit-scrollbar { display: block; width: 4px; }
.encode-sidebar-sessions::-webkit-scrollbar-thumb { background: var(--surface-border); border-radius: 4px; }
.encode-session-item[hidden], .encode-sidebar-sessions[hidden], .encode-case-history-empty[hidden] { display: none; }
.encode-session-item-meta { flex-wrap: wrap; }
.encode-session-item-date { flex-basis: 100%; padding-left: 11px; }
.encode-session-item-status--truncated { background: var(--text-warning); }
.encode-validation-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--surface-border); margin-bottom: 24px; }
.encode-validation-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px;
  color: var(--text-secondary); text-decoration: none; font-size: 13px; border-bottom: 2px solid transparent;
}
.encode-validation-nav a:hover { background: var(--surface-hover); }
.encode-validation-nav a[aria-current="page"] { color: var(--brand-blue); border-bottom-color: var(--brand-blue); font-weight: 600; }
.encode-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Code search dropdown in the Edit / Add code dialog (encode_controller
   _attachCodeSearch). Text styles reset the dialog label's uppercase. */
.encode-code-search-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-white);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.encode-code-search-option {
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1.35;
}
.encode-code-search-option strong { font-variant-numeric: tabular-nums; margin-right: 4px; }
.encode-code-search-via { display: block; font-size: 11px; color: var(--text-muted); }
.encode-code-search-option[aria-selected="true"],
.encode-code-search-option:hover { background: var(--surface-blue-tint); }
.encode-code-search-more { padding: 6px 8px; font-size: 12px; color: var(--text-secondary); }
.encode-code-search-hint {
  min-height: 1em;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
.encode-code-search-hint[data-state="ok"] { color: var(--text-success); }
.encode-code-search-hint[data-state="warn"] { color: var(--text-warning); }

/* Official code title, filled from the code set and not editable. */
.encode-edit-dialog textarea.encode-desc-locked {
  background: var(--surface-hover) !important;
  color: var(--text-secondary) !important;
  cursor: default;
  resize: none;
}

/* "Source & history" panel (encode_controller _openWhyPanel). */
.encode-why-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(15, 23, 42, 0.35); display: flex; justify-content: flex-end; }
.encode-why-panel {
  width: 430px; max-width: 100vw; height: 100%; overflow-y: auto;
  background: var(--surface-white); color: var(--text-primary);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px; font-size: 13px;
}
.encode-why-panel:focus { outline: none; }
.encode-why-head { display: flex; align-items: center; justify-content: space-between; }
.encode-why-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.encode-why-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--surface-border); }
.encode-why-tabs button { background: none; border: 0; padding: 8px 10px; font: inherit; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; }
.encode-why-tabs button[aria-selected="true"] { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.encode-why-body h4 { margin: 12px 0 6px; font-size: 13px; font-weight: 700; }
.encode-why-muted { margin: 4px 0; color: var(--text-secondary); font-size: 12px; }
.encode-why-legend { margin: 6px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 12px; }
.encode-why-timeline { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.encode-why-timeline li { display: flex; flex-direction: column; }
.encode-why-timeline time { font-size: 11px; color: var(--text-muted); }
.encode-why-foot { margin-top: auto; font-size: 12px; color: var(--text-muted); }

/* Possible codes (score below the check band, not yet approved). */
.encode-section-sub { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 8px; text-transform: none; letter-spacing: normal; }
.encode-card--possible { border-style: dashed; }
.encode-possible-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; font-size: 12px; color: var(--text-secondary); }

/* Worklist page (app/templates/worklist.html). */
.encode-worklist-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 12px; border-bottom: 1px solid var(--surface-border); }
.encode-worklist-tabs a { padding: 8px 10px; font-size: 13px; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; }
.encode-worklist-tabs a[aria-current="page"] { color: var(--brand-blue); border-bottom-color: var(--brand-blue); font-weight: 600; }
.encode-worklist-tabs a span { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.encode-worklist-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.encode-worklist-tools input, .encode-worklist-tools select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--surface-border); border-radius: 6px; background: var(--surface-white); color: var(--text-primary); }
.encode-worklist-tools input { min-width: 240px; }
.encode-worklist-table { border: 1px solid var(--surface-border); border-radius: 10px; overflow: hidden; background: var(--surface-white); }
.encode-worklist-row { display: grid; grid-template-columns: 2fr 1fr 1.2fr 2fr 0.9fr 0.8fr; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--surface-border); font-size: 13px; color: var(--text-primary); text-decoration: none; }
.encode-worklist-row:hover { background: var(--surface-hover); }
.encode-worklist-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.encode-worklist-head:hover { background: none; }
.encode-worklist-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-hover); color: var(--text-secondary); }
.encode-worklist-chip[data-status="attention"] { background: var(--surface-danger); color: var(--text-warning); }
.encode-worklist-chip[data-status="review"] { background: var(--surface-blue-tint); color: var(--brand-blue); }
.encode-worklist-chip[data-status="done"] { background: var(--surface-green-tint); color: var(--text-success); }
.encode-worklist-empty { padding: 32px; text-align: center; color: var(--text-secondary); font-size: 13px; }
@media (max-width: 860px) {
  .encode-worklist-row { grid-template-columns: 1fr 1fr; }
  .encode-worklist-head { display: none; }
}

/* Dashboard page (app/templates/dashboard.html). */
.encode-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 12px; }
@media (max-width: 1179px) { .encode-dash-grid { grid-template-columns: 1fr; } }
.encode-dash-card { background: var(--surface-white); border: 1px solid var(--surface-border); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.encode-dash-card h2 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.encode-dash-big { margin: 4px 0; font-size: 24px; font-weight: 700; color: var(--text-primary); }
.encode-dash-muted { margin: 2px 0; font-size: 12px; color: var(--text-secondary); }
.encode-dash-bar { display: grid; grid-template-columns: 140px 1fr 60px 110px; gap: 10px; align-items: center; font-size: 13px; margin: 8px 0; }
.encode-dash-track { height: 10px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.encode-dash-track > span { display: block; height: 100%; background: var(--brand-blue); }
.encode-dash-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.encode-dash-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 6px 8px; }
.encode-dash-table td { padding: 6px 8px; border-top: 1px solid var(--surface-border); color: var(--text-primary); }

.encode-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--surface-bg); color: var(--text-primary); }
.encode-auth-card { width: 100%; max-width: 380px; background: var(--surface-white); border: 1px solid var(--surface-border); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.encode-auth-title { margin: 0; font-size: 20px; font-weight: 700; }
.encode-auth-lead { margin: 0; font-size: 14px; color: var(--text-secondary); }
.encode-auth-error { margin: 0; padding: 8px 10px; border-radius: 6px; font-size: 13px; background: var(--surface-hover); color: var(--text-primary); border-left: 3px solid #DC2626; }
.encode-auth-form { display: flex; flex-direction: column; gap: 10px; }
.encode-auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.encode-auth-form input { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--surface-border); border-radius: 6px; background: var(--surface-bg); color: var(--text-primary); }
.encode-auth-submit, .encode-auth-microsoft { display: block; text-align: center; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 12px; border-radius: 6px; border: 0; cursor: pointer; text-decoration: none; }
.encode-auth-submit { background: var(--brand-blue); color: #fff; }
.encode-auth-microsoft { background: var(--surface-white); color: var(--text-primary); border: 1px solid var(--surface-border); }
.encode-auth-or { margin: 0; font-size: 12px; text-align: center; color: var(--text-muted); }

/* Account menu: the signed-in name at the foot of the sidebar opens upward
   into Settings, theme, Change password and Sign out. */
.encode-user-menu { position: relative; }
.encode-user-menu-trigger { list-style: none; cursor: pointer; user-select: none; }
.encode-user-menu-trigger::-webkit-details-marker { display: none; }
.encode-user-avatar {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff; background: var(--brand-blue);
}
.encode-user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.encode-user-menu-chevron { color: var(--text-muted); transition: transform 0.15s; }
.encode-user-menu:not([open]) .encode-user-menu-chevron { transform: rotate(180deg); }
.encode-user-menu-panel {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 40;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}
.encode-user-menu-panel .encode-sidebar-item { width: 100%; text-align: left; background: none; border: 0; font-family: inherit; cursor: pointer; }
.encode-user-menu-panel .encode-sidebar-item:hover { background: var(--surface-hover); }
.encode-user-menu-email { margin: 0; padding: 4px 9px 6px; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--surface-border); margin-bottom: 2px; }
.encode-user-menu-signout { margin: 2px 0 0; padding-top: 2px; border-top: 1px solid var(--surface-border); }

.encode-hospital-name { margin: 0 12px 8px; font-size: 12px; color: var(--text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encode-hospital-switch { margin: 0 8px 8px; }
.encode-hospital-switch select { width: 100%; font-size: 12px; }

/* ── New case panel and case status card (Stage 5 workspace) ─────────── */
.encode-session-item-status--queued,
.encode-session-item-status--reading,
.encode-session-item-status--coding,
.encode-session-item-status--checking  { background: var(--text-warning); }
.encode-session-item-status--incomplete,
.encode-session-item-status--cancelled { background: var(--text-danger); opacity: 0.6; }

.encode-case-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-white);
}
.encode-case-status[hidden] { display: none; }
.encode-case-status-msg { font-size: 13px; font-weight: 500; color: var(--text-primary); margin: 0; }
.encode-case-status-msg[hidden] { display: none; }
.encode-case-banner {
  font-size: 13px;
  color: var(--text-danger);
  margin: 0;
}
.encode-case-banner[hidden] { display: none; }
.encode-case-status-actions { display: flex; gap: 8px; justify-content: flex-end; }
.encode-case-status-actions button[hidden] { display: none; }

.encode-case-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.encode-case-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
.encode-case-drop {
  border: 1.5px dashed var(--surface-border);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  color: var(--text-primary);
}
.encode-case-drop--drag { border-color: var(--brand-blue); background: rgba(37, 99, 235, 0.06); }
.encode-link {
  color: var(--brand-blue);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.encode-case-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.encode-case-files:empty { display: none; }
.encode-case-file {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-primary);
  padding: 6px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
}
.encode-case-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encode-case-file-size { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.encode-case-notes-label { display: flex; flex-direction: column; gap: 4px; }
.encode-case-notes {
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-white);
}
.encode-case-notice { font-size: 12px; color: var(--text-muted); margin: 0; }
.encode-case-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.encode-case-footer button:disabled { opacity: 0.5; cursor: not-allowed; }