/**
 * JJL Case Screens — Case List + Case Detail
 * Extends acg-os-design-system.css + acg-os-command-center.css.
 * Uses only existing tokens. No new colors or fonts.
 */

/* ── Status badges ───────────────────────────────────────────────── */
.jjl-sb {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 100px;
  white-space: nowrap;
  font-family: var(--font-mono);
}

/* active → neutral */
.jjl-sb-neutral {
  background: var(--overlay);
  color: var(--text-2);
  border: 1px solid var(--border-md);
}
/* closed → green */
.jjl-sb-green {
  background: var(--green-d);
  color: var(--green);
  border: 1px solid rgba(22, 163, 74, 0.22);
}
/* dropped, rejected → red */
.jjl-sb-red {
  background: var(--red-d);
  color: var(--red);
  border: 1px solid rgba(220, 38, 38, 0.2);
}
/* litigation → purple */
.jjl-sb-purple {
  background: var(--purple-dim);
  color: var(--purple);
  border: 1px solid rgba(124, 58, 237, 0.22);
}
/* settled, demand stages, negotiation → gold */
.jjl-sb-gold {
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(155, 133, 83, 0.25);
}
/* withdrawn_lien → amber (#FFC35A already used in app urgency styles) */
.jjl-sb-amber {
  background: rgba(255, 195, 90, 0.12);
  color: #9B6A00;
  border: 1px solid rgba(255, 195, 90, 0.35);
}
/* intake, investigation, treatment, active → teal */
.jjl-sb-teal {
  background: var(--blue-dim);
  color: #8C6D1F;
  border: 1px solid rgba(168, 131, 40, 0.25);
}
/* fallback */
.jjl-sb-default {
  background: var(--overlay);
  color: var(--text-3);
  border: 1px solid var(--border);
}

/* ── Case tags (Minor, Criminal) ─────────────────────────────────── */
.jjl-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  margin-left: 4px;
}
.jjl-tag-minor {
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(155, 133, 83, 0.2);
}
.jjl-tag-criminal {
  background: var(--red-d);
  color: var(--red);
  border: 1px solid rgba(220, 38, 38, 0.18);
}

/* ── Anomaly flag icon ───────────────────────────────────────────── */
.jjl-anomaly-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: rgba(255, 195, 90, 0.85);
  flex-shrink: 0;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
}

/* ── SOL emphasis ────────────────────────────────────────────────── */
.jjl-sol-warn {
  color: #9B6A00;
  font-weight: 700;
  background: rgba(255, 195, 90, 0.1);
  border-radius: 4px;
  padding: 1px 5px;
}
.jjl-sol-crit {
  color: var(--red);
  font-weight: 700;
  background: var(--red-d);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Case list filter bar ────────────────────────────────────────── */
.jjl-cl-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 24px 12px;
}
.jjl-cl-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 2px;
}
.jjl-cl-select {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 140ms;
}
.jjl-cl-select:focus { border-color: var(--border-focus); }
.jjl-cl-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font);
  transition: all 140ms;
}
.jjl-cl-sort-btn:hover { border-color: var(--border-focus); color: var(--text-1); }
.jjl-cl-sort-btn.active { border-color: rgba(168, 131, 40, 0.4); color: #8C6D1F; background: var(--blue-d); }
.jjl-cl-clear-btn {
  font-size: 12px;
  color: var(--text-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font);
  transition: color 120ms;
}
.jjl-cl-clear-btn:hover { color: var(--text-1); }
.jjl-cl-count-label {
  font-size: 11px;
  color: var(--text-3);
  margin-left: 4px;
}

/* ── Case list search ────────────────────────────────────────────── */
.jjl-cl-search-bar {
  margin: 0 24px 12px;
}
.jjl-cl-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 420px;
}
.jjl-cl-search-icon {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--text-3);
  pointer-events: none;
}
.jjl-cl-search-input {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 32px 8px 33px;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}
.jjl-cl-search-input::placeholder { color: var(--text-3); }
.jjl-cl-search-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(168, 131, 40, 0.12);
}
.jjl-cl-search-clear {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color 120ms, background 120ms;
}
.jjl-cl-search-clear:hover { color: var(--text-1); background: var(--overlay); }

/* ── Case list empty state ───────────────────────────────────────── */
.jjl-cl-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-3);
}
.jjl-cl-empty-icon {
  font-size: 28px;
  opacity: 0.25;
  margin-bottom: 10px;
}
.jjl-cl-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 4px;
}
.jjl-cl-empty-sub {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ── Case name cell layout ───────────────────────────────────────── */
.jjl-cl-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.jjl-cl-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-d);
  color: #8C6D1F;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jjl-cl-name-primary {
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.jjl-cl-name-secondary {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ── Case Detail Root ────────────────────────────────────────────── */
.jjl-cd-root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ── Sticky ribbon top ───────────────────────────────────────────── */
.jjl-cd-sticky-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(26, 23, 18, 0.06);
  flex-shrink: 0;
}

/* ── Back bar ────────────────────────────────────────────────────── */
.jjl-cd-back-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border-bottom: 1px solid rgba(196, 188, 170, 0.35);
  font-size: 12px;
}
.jjl-cd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #8C6D1F;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
  transition: color 120ms;
}
.jjl-cd-back-btn:hover { color: var(--blue); }
.jjl-cd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
}
.jjl-cd-breadcrumb-sep { opacity: 0.4; }
.jjl-cd-breadcrumb-current { color: var(--text-2); font-weight: 500; }

/* ── Ribbon ──────────────────────────────────────────────────────── */
.jjl-cd-ribbon {
  padding: 14px 24px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.jjl-cd-ribbon-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.jjl-cd-ribbon-right { display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

.jjl-cd-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.jjl-cd-case-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.jjl-cd-file-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
}
.jjl-cd-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
}
.jjl-cd-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.jjl-cd-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.jjl-cd-meta-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.jjl-cd-sol-val {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Status one-tap dropdown */
.jjl-cd-status-wrap { position: relative; }
.jjl-cd-status-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 22px 3px 9px;
  border-radius: 100px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px;
  transition: all 140ms;
  min-width: 80px;
}
/* SOL edit inline */
.jjl-cd-sol-edit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jjl-cd-sol-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #8C6D1F;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
  transition: color 120ms;
}
.jjl-cd-sol-edit-btn:hover { color: var(--blue); }
.jjl-cd-sol-input-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--surface-raised);
  border: 1px solid var(--border-focus);
  border-radius: 8px;
}
.jjl-cd-sol-input {
  font-family: var(--font-mono);
  font-size: 12px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-1);
  width: 120px;
}
.jjl-cd-sol-save-btn {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #8C6D1F;
  border: none;
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: var(--font);
}
.jjl-cd-sol-cancel-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 2px 4px;
}
.jjl-cd-save-indicator {
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
  opacity: 0;
  transition: opacity 300ms;
}
.jjl-cd-save-indicator.visible { opacity: 1; }

/* ── Summary block ───────────────────────────────────────────────── */
.jjl-cd-summary {
  padding: 16px 24px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}
.jjl-cd-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.jjl-cd-summary-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jjl-cd-summary-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.jjl-cd-summary-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}
.jjl-cd-summary-val-mono {
  font-family: var(--font-mono);
  font-size: 12px;
}
.jjl-cd-summary-val-dim { color: var(--text-3); font-weight: 400; font-style: italic; }

/* Anomaly note inline */
.jjl-cd-anomaly-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 195, 90, 0.08);
  border: 1px solid rgba(255, 195, 90, 0.25);
  border-radius: var(--radius-sm);
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-1);
}
.jjl-cd-anomaly-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #9B6A00;
}

/* ── PHASE field: pill + age ─────────────────────────────────────── */
/* The pill carries .jjl-sb for its geometry, so it is the same object as the
   STATUS pill beside it and matches its weight. Only the colour is set here,
   and deliberately NOT by reusing a .jjl-sb-* status colour: phase and status
   are orthogonal and must not read as one taxonomy.

   One colour for every phase. A per-phase palette would be a hardcoded map of
   phase names in the stylesheet, and that vocabulary lives in
   public.case_phases as rows — the same reason there is no display-label map
   in the JS. */
.jjl-cd-phase-pill {
  background: var(--blue-dim);
  color: #8C6D1F;
  border: 1px solid rgba(168, 131, 40, 0.25);
}
/* Metadata BENEATH the value, never beside it: the phase name is the value and
   the age only qualifies it. Lighter and smaller than .jjl-cd-summary-val so
   the pill keeps the emphasis. */
.jjl-cd-phase-age {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-3);
}

/* ── Advance Phase control ───────────────────────────────────────── */
/* Sits under the summary grid, beneath the PHASE field it acts on. Rendered
   only for roles entitled to advance; disabled (not hidden) when the case has
   no legal next phase. */
.jjl-cd-phase-advance {
  margin-top: 12px;
}
.jjl-cd-phase-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jjl-cd-phase-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.jjl-cd-phase-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  background: var(--overlay);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
}
.jjl-cd-phase-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  background: var(--overlay);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  cursor: pointer;
}
.jjl-cd-phase-btn:hover:not(:disabled) {
  background: var(--surface-raised);
  border-color: var(--text-3);
}
/* The disabled state is a first-class state here, not an edge case: it is what
   a case with no legal next phase is supposed to look like. */
.jjl-cd-phase-select:disabled,
.jjl-cd-phase-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--text-3);
}
.jjl-cd-phase-hint {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}
.jjl-cd-phase-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--red-d);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.45;
  color: var(--red);
  /* The server's message is a long sentence naming the edge and the case id.
     Wrap it; never truncate the part that says why. */
  overflow-wrap: anywhere;
}

/* ── Tab bar ─────────────────────────────────────────────────────── */
.jjl-cd-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
  flex-shrink: 0;
}
.jjl-cd-tab-bar::-webkit-scrollbar { display: none; }

.jjl-cd-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font);
  white-space: nowrap;
  transition: color 140ms, border-color 140ms;
}
.jjl-cd-tab:hover { color: var(--text-1); }
.jjl-cd-tab.active {
  color: #8C6D1F;
  border-bottom-color: var(--blue);
}

/* ── Tab panels ──────────────────────────────────────────────────── */
.jjl-cd-panels {
  flex: 1;
  min-height: 0;
  padding-bottom: 60px;
}
.jjl-cd-panel {
  display: none;
  padding: 20px 24px;
}
.jjl-cd-panel.active { display: block; }

/* ── Coverage tab ────────────────────────────────────────────────── */
.jjl-cov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 720px) { .jjl-cov-grid { grid-template-columns: 1fr; } }
/* W7-15 / migration 043 — the Treating Providers box sits under the BI and UM
   pair and spans both, because its value is free text that can run to several
   provider names and a half-width column would truncate it. Falls back to the
   single-column rule above at the mobile breakpoint without needing its own. */
.jjl-cov-box-wide { grid-column: 1 / -1; }
.jjl-cov-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.jjl-cov-box-hdr {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border-sub);
  display: flex;
  align-items: center;
  gap: 6px;
}
.jjl-cov-hdr-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.jjl-cov-rows { padding: 4px 0; }
.jjl-cov-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-sub);
  font-size: 12px;
}
.jjl-cov-row:last-child { border-bottom: none; }
.jjl-cov-key { color: var(--text-3); font-weight: 500; }
.jjl-cov-val { color: var(--text-1); font-weight: 600; text-align: right; max-width: 60%; word-break: break-word; }
.jjl-cov-val-dim { color: var(--text-3); font-weight: 400; font-style: italic; }

/* Accident Narrative box (Coverage tab) — read-only, case_source_text */
.jjl-narrative-provenance {
  font-size: 11px;
  font-style: italic;
  color: var(--text-3);
  padding: 10px 16px 0;
}
.jjl-narrative-body {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px 16px 14px;
}
.jjl-narrative-clamped {
  max-height: 6.8em; /* ~4 lines at 1.7 line-height */
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}
.jjl-narrative-toggle {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 16px 12px;
  margin: 0;
}
.jjl-narrative-toggle:hover { text-decoration: underline; }

/* Full adjuster list */
.jjl-adj-section-hdr {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
  margin-top: 20px;
}
.jjl-adj-table { width: 100%; border-collapse: collapse; }
.jjl-adj-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 12px;
  background: rgba(26, 23, 18, 0.04);
  border-bottom: 1px solid var(--border);
}
.jjl-adj-table td {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-1);
  border-bottom: 1px solid rgba(196, 188, 170, 0.25);
  vertical-align: middle;
}
.jjl-adj-table tr:last-child td { border-bottom: none; }
.jjl-adj-current-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 5px;
  vertical-align: middle;
}

/* ── Demands tab ─────────────────────────────────────────────────── */
.jjl-dem-timeline { display: flex; flex-direction: column; gap: 0; }
.jjl-dem-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-sub);
  position: relative;
}
.jjl-dem-row:last-child { border-bottom: none; }
.jjl-dem-step-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 28px;
  flex-shrink: 0;
}
.jjl-dem-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.jjl-dem-step-done {
  background: var(--green-d);
  color: var(--green);
  border: 1px solid rgba(22, 163, 74, 0.22);
}
.jjl-dem-step-pending {
  background: var(--overlay);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.jjl-dem-body { flex: 1; min-width: 0; }
.jjl-dem-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 3px;
}
.jjl-dem-label-pending { color: var(--text-3); font-weight: 400; }
.jjl-dem-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}
.jjl-dem-date-pending { color: var(--text-3); font-style: italic; }

/* ── Documents tab ───────────────────────────────────────────────── */
.jjl-doc-empty-state {
  padding: 36px 24px;
  text-align: center;
  background: var(--surface-raised);
  border: 1px dashed var(--border-md);
  border-radius: var(--radius-md);
  color: var(--text-3);
  font-size: 13px;
}

/* In-app folder browser + viewer (replaces the old "Open in OneDrive" card). */
.jjl-doc-browser { display: flex; flex-direction: column; gap: 10px; }
.jjl-doc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.jjl-doc-breadcrumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.jjl-doc-crumb {
  background: none;
  border: none;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.jjl-doc-crumb:hover { color: #8C6D1F; text-decoration: underline; }
.jjl-doc-crumb:last-child { color: var(--text-0); }
.jjl-doc-crumb-sep { color: var(--text-3); }
.jjl-doc-search {
  font-family: var(--font);
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text-0);
  min-width: 200px;
}
.jjl-doc-body { display: flex; gap: 14px; align-items: flex-start; }
.jjl-doc-list-pane {
  flex: 1 1 55%;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-height: 520px;
  overflow-y: auto;
}
.jjl-doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
}
.jjl-doc-row:last-child { border-bottom: none; }
.jjl-doc-row:hover { background: var(--surface-raised); }
.jjl-doc-row.active { background: var(--blue-d); }
.jjl-doc-row-icon { flex-shrink: 0; color: var(--text-3); display: flex; }
.jjl-doc-row-name { flex: 1; min-width: 0; color: var(--text-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jjl-doc-row-meta { flex-shrink: 0; color: var(--text-3); font-size: 11px; }
.jjl-doc-viewer-pane {
  flex: 1 1 45%;
  min-width: 0;
  min-height: 300px;
  max-height: 520px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.jjl-doc-viewer-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 12px;
  padding: 20px;
  text-align: center;
}
.jjl-doc-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-0);
}
.jjl-doc-viewer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jjl-doc-viewer-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.jjl-doc-viewer-close:hover { color: var(--text-0); }
.jjl-doc-extract-bar { padding: 8px 14px; border-bottom: 1px solid var(--border); }
.jjl-doc-extract-result { padding: 0 14px 10px; font-size: 12px; }
.jjl-doc-extract-done { color: var(--text-2); }
.jjl-doc-extract-link {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: #8C6D1F;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.jjl-doc-viewer-frame { flex: 1; width: 100%; border: none; }
.jjl-doc-viewer-img-wrap { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 10px; }
.jjl-doc-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Plain-language error + Details toggle, same doctrine as the Tasks/Settlement
   panels' .jjl-task-row-error* (ZZ70A/ZZ70C/ZZ71A). */
.jjl-doc-error {
  margin: 12px;
  padding: 10px 12px;
  background: var(--red-d);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 12px;
  line-height: 1.5;
}
.jjl-doc-error-details { margin-top: 6px; }
.jjl-doc-error-details > summary { cursor: pointer; font-size: 11px; font-weight: 600; color: var(--red); }
.jjl-doc-error-detail-body { margin-top: 4px; font-size: 11px; white-space: pre-wrap; opacity: 0.85; }
.jjl-doc-retry-btn {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  background: none;
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
}
.jjl-doc-retry-btn:hover { background: rgba(220, 38, 38, 0.08); }

/* document_ref capture field chip (073, task-detail-drawer.js). */
.jjl-doc-ref { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.jjl-doc-ref-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.jjl-doc-ref-chip.jjl-doc-ref-empty { color: var(--text-3); }
.jjl-doc-ref-name { color: var(--text-0); font-weight: 600; }
.jjl-doc-ref-path { color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.jjl-doc-ref-preview { margin-left: auto; flex-shrink: 0; }

/* Document picker / standalone preview overlays (073, case-documents.js).
   Appended to <body>, so they must out-rank the task drawer's own modal
   (.jjl-modal-box, acg-os-command-center.css:1481, z-index 900) — this is
   opened FROM inside that drawer and has to sit above it. */
.jjl-doc-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.jjl-doc-picker {
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.jjl-doc-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.jjl-doc-picker-title { font-size: 13px; font-weight: 700; color: var(--text-0); }
.jjl-doc-picker .jjl-doc-toolbar { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.jjl-doc-picker-rows { overflow-y: auto; flex: 1; }
.jjl-doc-picker-preview {
  max-width: 900px;
  height: 80vh;
}
.jjl-doc-picker-preview .jjl-doc-viewer-frame,
.jjl-doc-picker-preview .jjl-doc-viewer-img-wrap { flex: 1; }

/* Card E-3: "Upload here" in the document picker (case-documents.js). */
.jjl-doc-upload-open { display: flex; align-items: center; gap: 8px; }
.jjl-doc-upload-hint { font-size: 11px; color: var(--text-3); }
/* The tint is a background-IMAGE laid over the card's own opaque background-color. Replacing the color with a
   translucent one would make the whole dialog see-through while a file is dragged over it. */
.jjl-doc-picker.jjl-doc-picker-drop { outline: 2px dashed var(--border-focus); outline-offset: -8px; background-image: linear-gradient(var(--blue-d), var(--blue-d)); }
.jjl-doc-upload-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--red);
  background: var(--red-d);
  border-bottom: 1px solid var(--border);
}
.jjl-doc-upload { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; overflow-y: auto; }
/* On the Documents tab the panel is a card of its own (in the picker it sits inside the dialog's card). */
.jjl-doc-upload-tab { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); max-width: 640px; }
/* The drag-over highlight is an overlay ABOVE the tab's children (the viewer pane would paint over a plain outline).
   pointer-events: none is what keeps it from taking the drag events away from the tab. */
#jjl-cd-documents-root.jjl-doc-drop { position: relative; }
#jjl-cd-documents-root.jjl-doc-drop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 2px dashed var(--border-focus);
  border-radius: var(--radius-md);
  background: var(--blue-d);
  pointer-events: none;
}
.jjl-doc-upload-where { font-size: 12px; color: var(--text-2); }
.jjl-doc-upload-file { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.jjl-doc-upload-label { font-size: 12px; font-weight: 600; color: var(--text-1); }
.jjl-doc-upload-name { width: 100%; box-sizing: border-box; }
.jjl-doc-upload-msg { min-height: 16px; font-size: 12px; color: var(--red); }
.jjl-doc-upload-note { font-size: 11px; color: var(--text-3); }
.jjl-doc-upload-actions { display: flex; gap: 8px; }
/* The dashboard has no global disabled style, so a disabled Upload looked exactly like an enabled one while doing nothing.
   Scoped to this panel so no other button in the app changes. */
.jjl-doc-upload .action-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; filter: grayscale(0.4); }
.jjl-doc-upload .action-btn:disabled:hover { transform: none; box-shadow: none; }
.jjl-doc-upload-saveas { font-size: 12px; color: var(--text-1); overflow-wrap: anywhere; }
.jjl-doc-upload-bar { height: 8px; border-radius: 4px; background: var(--surface-raised); border: 1px solid var(--border); overflow: hidden; }
.jjl-doc-upload-fill { height: 100%; background: var(--blue); transition: width 0.2s ease; }
.jjl-doc-upload-pct { font-size: 12px; color: var(--text-2); }
.jjl-doc-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--text-0);
  color: #fff;
  font-size: 12px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

@media (max-width: 760px) {
  .jjl-doc-body { flex-direction: column; }
  .jjl-doc-list-pane, .jjl-doc-viewer-pane { flex-basis: auto; width: 100%; }
}

/* ── Tasks tab ───────────────────────────────────────────────────── */
.jjl-task-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.jjl-task-form { margin-bottom: 16px; }

/* Server error text, surfaced verbatim. */
.jjl-task-error {
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--red-d);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.jjl-task-lane { margin-bottom: 20px; }
.jjl-task-lane-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.jjl-task-lane-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
}
.jjl-task-lane-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--overlay);
  border-radius: 10px;
  padding: 1px 7px;
}

/* "Closed by phase advance" (073) — collapsed group, never actionable. */
.jjl-task-lane-superseded { margin-top: 24px; opacity: 0.85; }
.jjl-task-lane-hdr-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
}
.jjl-task-lane-caret { font-size: 10px; color: var(--text-3); }
.jjl-task-row-superseded { opacity: 0.75; }
.jjl-task-status-superseded {
  color: var(--text-3);
  background: none;
  border-color: var(--border);
}

.jjl-task-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.jjl-task-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.jjl-task-main { flex: 1; min-width: 220px; }
.jjl-task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jjl-task-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.jjl-task-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--overlay);
  border: 1px solid var(--border-md);
  border-radius: 10px;
  padding: 1px 8px;
}
.jjl-task-detail {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 4px;
  white-space: pre-wrap;
}
.jjl-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.jjl-task-dim { color: var(--text-3); }

.jjl-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.jjl-task-btn {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-md);
  background: var(--overlay);
  color: var(--text-2);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.jjl-task-btn:hover:not(:disabled) { background: var(--card); }
.jjl-task-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.jjl-task-btn-go {
  border-color: rgba(168, 131, 40, 0.35);
  color: #8C6D1F;
  background: var(--blue-dim);
}

/* A task title turned into a button (cm-queue.js, case-tasks.js) so it can
   open the task detail drawer (SCRUM-182) without a new inline handler.
   Only resets button chrome — .jjl-task-title's own font-size/weight/color
   still apply, since neither rule touches those properties. */
.jjl-task-title-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.jjl-task-title-link:hover,
.jjl-task-title-link:focus-visible {
  text-decoration: underline;
}

/* The plain-language line task-core.js shows next to a disabled Claim button
   at the WIP cap — informational, not an error, so it stays muted rather
   than red. flex-basis:100% forces it onto its own line under the button,
   the same trick .jjl-task-row-error already uses in .jjl-task-actions. */
.jjl-task-cap-note {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-3);
}

.jjl-task-reason {
  flex-basis: 100%;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.jjl-task-reason-label {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 5px;
}

/* Demand lane: a task a reviewer bounced back to the drafter. 022 clears
   review_started_at on send-back so the row itself is indistinguishable from
   a fresh submission — this is the only visual signal that it is not one.
   Gold, matching .jjl-sb-gold / .jjl-tag-minor: attention needed, not an
   error (red) and not a legal move blocked (disabled button). */
.jjl-task-sentback-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(155, 133, 83, 0.25);
  border-radius: 10px;
  padding: 1px 8px;
}
.jjl-task-sentback-notice {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--gold-dim);
  border: 1px solid rgba(155, 133, 83, 0.25);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
}
.jjl-task-sentback-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}
.jjl-task-sentback-reason {
  color: var(--text-1);
  white-space: pre-wrap;
}

/* ── Task action feedback (shared: Tasks tab + Task Queue) ───────────
   Owned by task-core.js, so both surfaces get identical feedback. */

/* The button that was pressed, while its RPC is in flight. Every other action
   button is disabled by the .jjl-task-btn:disabled rule above. */
.jjl-task-btn-pending {
  opacity: 0.75;
  cursor: progress;
}

/* Server error text for ONE task, surfaced verbatim, inline on its row, and
   persistent until the next action on that row. */
.jjl-task-row-error {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--red-d);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Collapsed by default: the server's raw sentence behind a ZZ70A/ZZ70C
   plain-language refusal (task-detail-drawer.js perform()) — present for
   whoever needs it verbatim, not the first thing a case manager reads. */
.jjl-task-row-error-details {
  margin-top: 6px;
}
.jjl-task-row-error-details > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
}
.jjl-task-row-error-detail-body {
  margin-top: 4px;
  font-size: 11px;
  white-space: pre-wrap;
  opacity: 0.85;
}

/* The row that just moved, briefly, after the refetch.
   Two keyframe sets, not one: the Tasks-tab row is a card-backed <div> and has
   to settle back onto var(--card), while a Task Queue row is a <tr> whose cells
   carry no background of their own and has to settle back to transparent.
   Sharing one set makes whichever surface it was not written for flash the
   wrong colour on its last frames. */
.jjl-task-row.jjl-task-flash {
  animation: jjl-task-flash-card 1800ms var(--ease-out);
}
@keyframes jjl-task-flash-card {
  0%   { background: var(--blue-dim); box-shadow: var(--glow-blue); }
  70%  { background: var(--blue-d);   box-shadow: none; }
  100% { background: var(--card);     box-shadow: none; }
}

/* Cells, not the <tr>: with border-collapse the row's own background is the
   less reliable of the two to paint. */
.jjl-tq-row.jjl-task-flash > td {
  animation: jjl-task-flash-cell 1800ms var(--ease-out);
}
@keyframes jjl-task-flash-cell {
  0%   { background: var(--blue-dim); }
  70%  { background: var(--blue-d); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .jjl-task-row.jjl-task-flash { animation: none; box-shadow: var(--glow-blue); }
  .jjl-tq-row.jjl-task-flash > td { animation: none; background: var(--blue-d); }
}

/* Success confirmation. Lives on <body>, outside every surface's mount node,
   so a refetch re-render cannot destroy it mid-read. */
.jjl-task-toast-host {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.jjl-task-toast {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 380px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  color: var(--text-1);
  cursor: pointer;
  pointer-events: auto;
  animation: jjl-task-toast-in 220ms var(--ease-out);
}
@keyframes jjl-task-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jjl-task-toast-check { color: var(--green); font-weight: 700; }
.jjl-task-toast-text  { flex: 1; line-height: 1.45; }
.jjl-task-toast-task  { color: var(--text-2); }
.jjl-task-toast-dismiss {
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
}

/* ── Task Detail Drawer (SCRUM-182) ──────────────────────────────────
   Shell is .jjl-modal-* (acg-os-command-center.css) on the drawer's own
   #jjl-task-drawer container — everything below is content-specific. */
.jjl-td-inset { padding: 12px 14px; }
.jjl-td-description-text { padding: 12px 14px; }

.jjl-td-outcome-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* The one-line caption under each button row, naming what that row does to the
   task. Sits between rows, so the top margin is negative against the row's own
   margin-bottom rather than adding a second gap. */
.jjl-td-act-note {
  margin: -4px 0 12px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-3);
}

/* ── Capture fields (W7-15 / migration 043) ──────────────────────────
   "What this task records". The controls themselves reuse the compact
   .jjl-adj-form-input / .jjl-adj-form-select / .jjl-add-note-textarea idiom the
   rest of the task surfaces use, so only the stacked label-over-control layout
   and the help line are new. Nothing here is keyed to a task type: the number
   of fields and their types arrive from public.task_type_capture_field. */
.jjl-td-cap-fields { padding: 12px 14px; gap: 12px; }

.jjl-td-cap-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Stacked, not inline. A capture label can be as long as "UM coverage (dec
   page)" and the drawer body is narrower than the adjuster form this class
   comes from, so min-width there would push the control off the panel. */
/* Scoped to the field wrapper, NOT written as a bare .jjl-td-cap-label. The
   element also carries .jjl-adj-form-label, which is defined LATER in this file
   at equal specificity and would win every property outright — the class would
   have been entirely dead. The descendant selector lifts specificity above it
   without an !important. */
.jjl-td-cap-field .jjl-td-cap-label {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: default;
}

/* Marks a field public.task_type_capture_field.required is TRUE for. Every row
   043 seeds ships FALSE, so this is unused until somebody flips one — it exists
   so that flipping one is a data edit and not a code change. */
.jjl-td-cap-req {
  margin-left: 3px;
  color: var(--gold, #c9a227);
}

.jjl-td-cap-help {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-3);
}

/* The controls come from the adjuster form, where an input is capped at 280px
   inside a wide panel. In the drawer they should fill the body. */
.jjl-td-cap-field .jjl-adj-form-input,
.jjl-td-cap-field .jjl-adj-form-select {
  max-width: none;
  width: 100%;
}

/* ── LOR fill-and-review letter (send_lor_um / send_lor_bi) ──────────
   The template's own prose, read-only, with only the bracketed tokens turned
   into inputs — CLAUDE.md, "never let a user retype a paragraph". Reuses
   .jjl-sb-* for provenance badges and .jjl-td-cap-help for help text; only
   the letter surface and the slot controls are new. */
.jjl-lor-letter {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 10px 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-1);
}
.jjl-lor-p { margin: 0 0 10px; }
.jjl-lor-p:last-child { margin-bottom: 0; }
.jjl-lor-p-blank { margin: 0 0 4px; }

.jjl-lor-slot {
  display: inline-block;
  vertical-align: baseline;
  background: var(--surface);
  border: 1px solid var(--border-focus);
  border-radius: 5px;
  padding: 2px 7px;
  margin: 0 2px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text-1);
  outline: none;
}
.jjl-lor-slot:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(168, 131, 40, 0.18); }
.jjl-lor-slot-sm { width: 90px; }
.jjl-lor-slot-md { width: 160px; }
.jjl-lor-slot-lg { width: 260px; }
select.jjl-lor-slot { cursor: pointer; }

/* [DATE] — always generated, never an input. Styled to read as computed. */
.jjl-lor-generated {
  color: var(--text-3);
  font-style: italic;
}

.jjl-lor-badge { margin: 0 2px 0 4px; vertical-align: middle; }

.jjl-lor-help { margin: 2px 0 8px; }

.jjl-lor-diverge-note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-3);
  margin: 2px 0 8px;
  border-left: 2px solid var(--border-md);
  padding-left: 8px;
}

.jjl-lor-ack {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #9B6A00;
  margin: 2px 0 10px;
  cursor: pointer;
}
.jjl-lor-ack input[type="checkbox"] { cursor: pointer; }
.jjl-lor-ack-checked { color: var(--green, #16A34A); }

.jjl-lor-attn-header {
  font-size: 12px;
  font-weight: 700;
  color: #9B6A00;
  background: rgba(255, 195, 90, 0.12);
  border: 1px solid rgba(255, 195, 90, 0.35);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
}
.jjl-lor-ready-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--green, #16A34A);
  background: var(--green-d);
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
}
.jjl-lor-missing-line {
  font-size: 12px;
  font-weight: 600;
  color: #9B6A00;
  margin: 0 0 8px;
}

/* ── case_provider picker (migration 060) ─────────────────────────
   The multi_select renderer's own controls: a filter box, a scrollable
   checkbox list read live from public.providers, and the "+ Add provider"
   row. .jjl-provider-filter / .jjl-provider-add-input pick up
   width:100%/max-width:none from the .jjl-td-cap-field rule above via their
   shared .jjl-adj-form-input class. */
.jjl-provider-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jjl-provider-summary {
  font-size: 11px;
  color: var(--text-3);
}

.jjl-provider-rows {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-raised);
}

.jjl-provider-rows-empty {
  padding: 10px 12px;
  font-size: 12px;
}

.jjl-provider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-1);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.jjl-provider-row:last-child { border-bottom: none; }
.jjl-provider-row:hover { background: var(--overlay); }
.jjl-provider-row-hidden { display: none; }

.jjl-provider-row input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
}

.jjl-provider-name { flex: 1; min-width: 0; }

.jjl-provider-cat {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jjl-provider-unverified {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold, #c9a227);
}

.jjl-provider-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.jjl-provider-add-input { flex: 1; }
.jjl-provider-add-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.jjl-provider-add-error {
  flex-basis: 100%;
  margin: 4px 0 0;
}

/* ── Light task-detail modal ──────────────────────────────────────
   The drawer builds its OWN overlay instead of the #jjl-modal
   singleton, so the ID-scoped light overrides in
   desktop-command-center.html (--lead / --form / --staff) never
   reach it and it falls through to the stale dark
   .jjl-modal-box base in acg-os-command-center.css:1491.
   Same white card theme as the other three variants. */
.jjl-modal--task .jjl-modal-box {
  background: var(--surface) !important;
  border: 1px solid var(--border-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
.jjl-modal--task .jjl-modal-header {
  background: var(--surface-raised) !important;
  border-bottom: 1px solid var(--border) !important;
}
/* Scroll, stated explicitly rather than inherited.
   The base cascade IS a working flex scroll container on paper —
   .jjl-modal-box is display:flex/column with max-height:88vh and
   overflow:hidden (acg-os-command-center.css:1488-1499), and .jjl-modal-body
   already carries flex:1 / min-height:0 / overflow-y:auto (:1542-1546). But
   the box's overflow:hidden means that if that chain fails for ANY runtime
   reason the body is clipped SILENTLY, with no scrollbar and no spill — and
   the drawer stacks four sections, so Log Activity (third of four) and
   Activity History go under the clip line first on a long task. The other two
   long-content variants both pin their own scroll rather than trust the base
   (--form at pipeline-actions.js:783, --lead at
   desktop-command-center.html:368-371); --task was the only one that did not.
   .jjl-modal--task is applied on exactly one element in the repo
   (task-detail-drawer.js:85), so this reaches no other modal. */
.jjl-modal--task .jjl-modal-body {
  background: var(--surface) !important;
  max-height: 62vh;
  overflow-y: auto;
}
.jjl-modal--task .jjl-modal-footer {
  background: var(--surface-raised) !important;
  border-top: 1px solid var(--border) !important;
}
.jjl-modal--task .jjl-modal-kicker { color: #8C6D1F !important; }
.jjl-modal--task .jjl-modal-title  { color: var(--text-1) !important; }
.jjl-modal--task .jjl-modal-close  { color: var(--text-3) !important; }
.jjl-modal--task .jjl-modal-close:hover { color: var(--text-1) !important; }

/* -- Drawer type scale ---------------------------------------------------
   ONE scale for everything the drawer draws, scoped to .jjl-modal--task so no
   other surface moves. Three sizes and nothing between them:
     label    12px / 600 / --text-2   the name of a field, and of one small input
     control  12px / 400 / --text-1   inputs, selects, textareas, option labels
     help     11px / 400 / --text-3   helper text, notes, summaries and every
                                      empty-state line ("Available once ...")
   Before this the same jobs were 10.5px, 11px, an italic 12px and an inherited
   13px depending on the section. .jjl-td-cap-label, .jjl-td-cap-help,
   .jjl-td-act-note, .jjl-provider-summary and .jjl-lor-diverge-note only exist
   in the drawer and were changed where they are defined. The two shared classes,
   .jjl-task-dim and .jjl-task-empty, are brought onto the scale here. */
.jjl-modal--task {
  --td-fs-label: 12px;
  --td-fs-control: 12px;
  --td-fs-help: 11px;
}
.jjl-modal--task .jjl-task-dim,
.jjl-modal--task .jjl-task-empty {
  font-size: var(--td-fs-help);
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  color: var(--text-3);
}

/* Native selects, drawn like the inputs beside them: same box, same 12px, a
   chevron of their own, and the teal focus ring. The chevron is two gradients,
   not an image, so it needs nothing from the CSP. The LOR slot selects sit inside
   a sentence of the letter and keep their own look. */
.jjl-modal--task select:not(.jjl-lor-slot) {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--surface-raised);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 28px 6px 10px;
  min-height: 30px;
  max-width: 100%;
  font-family: var(--font);
  font-size: var(--td-fs-control);
  color: var(--text-1);
  cursor: pointer;
  outline: none;
  transition: border-color 140ms;
}
.jjl-modal--task select:not(.jjl-lor-slot):focus { border-color: var(--border-focus); }
.jjl-modal--task select:not(.jjl-lor-slot):disabled { opacity: 0.5; cursor: not-allowed; }
.jjl-modal--task .jjl-adj-form-input,
.jjl-modal--task .jjl-add-note-textarea {
  font-family: var(--font);
  font-size: var(--td-fs-control);
}

/* A radio or checkbox with its words, at control size. These used to borrow the
   help style and an inline style, which made the choice smaller than the field
   it belonged to. */
.jjl-modal--task .jjl-td-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--td-fs-control);
  line-height: 1.4;
  color: var(--text-1);
  cursor: pointer;
}

/* One small labelled input inside a form row: the reductions list's amounts,
   result and dates. */
.jjl-modal--task .jjl-td-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.jjl-modal--task .jjl-td-mini-label {
  font-size: var(--td-fs-label);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-2);
}
.jjl-modal--task .jjl-td-mini .jjl-adj-form-input,
.jjl-modal--task .jjl-td-mini select {
  width: 100%;
  max-width: none;
}

/* Reductions by provider: a row is one line, the form opens on Edit. */
.jjl-modal--task .jjl-reduction-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border-sub);
}
.jjl-modal--task .jjl-reduction-row:first-of-type { margin-top: 8px; }
.jjl-modal--task .jjl-reduction-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.jjl-modal--task .jjl-reduction-name {
  flex-shrink: 0;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--td-fs-label);
  font-weight: 600;
  color: var(--text-1);
}
.jjl-modal--task .jjl-reduction-summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--td-fs-help);
  color: var(--text-3);
}
.jjl-modal--task .jjl-reduction-toggle { flex-shrink: 0; font-size: var(--td-fs-control); }
.jjl-modal--task .jjl-reduction-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.jjl-modal--task .jjl-reduction-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.jjl-modal--task .jjl-reduction-actions { margin-bottom: 0; align-items: center; }

/* Sign-off readiness: a verdict chip and the reason beside it, then the counts. */
.jjl-modal--task .jjl-signoff-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jjl-modal--task .jjl-signoff-reason {
  font-size: var(--td-fs-control);
  line-height: 1.45;
  color: var(--text-1);
}

/* The firm template link under a description. */
.jjl-modal--task .jjl-td-template { padding: 0 14px 12px; }
.jjl-modal--task .jjl-td-template-link {
  font-size: var(--td-fs-control);
  font-weight: 600;
  color: #8C6D1F;
  text-decoration: none;
}
.jjl-modal--task .jjl-td-template-link:hover { text-decoration: underline; }

/* ── Demand generator drawer (demand-drawer.js) ──────────────────────
   Same self-owned-overlay reasoning as .jjl-modal--task directly above,
   and the same explicit-scroll fix: .jjl-modal-body's base overflow-y:auto
   is not trusted to survive .jjl-modal-box's overflow:hidden on its own. */
.jjl-modal--demand .jjl-modal-box {
  background: var(--surface) !important;
  border: 1px solid var(--border-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
.jjl-modal--demand .jjl-modal-header {
  background: var(--surface-raised) !important;
  border-bottom: 1px solid var(--border) !important;
}
.jjl-modal--demand .jjl-modal-body {
  background: var(--surface) !important;
  max-height: 62vh;
  overflow-y: auto;
}
.jjl-modal--demand .jjl-modal-footer {
  background: var(--surface-raised) !important;
  border-top: 1px solid var(--border) !important;
}
.jjl-modal--demand .jjl-modal-kicker { color: #8C6D1F !important; }
.jjl-modal--demand .jjl-modal-title  { color: var(--text-1) !important; }
.jjl-modal--demand .jjl-modal-close  { color: var(--text-3) !important; }
.jjl-modal--demand .jjl-modal-close:hover { color: var(--text-1) !important; }

/* ── jjl-tq-* shell (originally the Task Queue screen, s-tasks, now
   removed) — kept for Demand Queue (s-demand-queue), which reuses these
   rules as-is; see the banner comment below near .jjl-dq-*. Do not delete. */
.jjl-tq-section { margin-bottom: 26px; }
.jjl-tq-section-hdr {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.jjl-tq-section-blurb {
  font-size: 11px;
  color: var(--text-3);
}
.jjl-tq-card { overflow: hidden; }
.jjl-tq-table td { vertical-align: top; }
/* Only the case number and the action buttons are clickable — .table's default
   row cursor would promise a whole-row click that does not exist here. */
.jjl-tq-table tbody tr { cursor: default; }

/* The full-width row carrying a send-back prompt or an inline server error,
   directly under the task it belongs to. */
.jjl-tq-subrow > td { padding-top: 0; }
.jjl-tq-subrow .jjl-task-reason,
.jjl-tq-subrow .jjl-task-row-error,
.jjl-tq-subrow .jjl-task-sentback-notice { margin-top: 0; }
.jjl-tq-subrow .jjl-task-reason { border-top: none; padding-top: 0; }

/* A message whose task has left both sections — see renderOrphanedErrors(). */
.jjl-tq-orphan-error { margin-bottom: 16px; }
.jjl-tq-orphan-task {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 4px;
}
.jjl-tq-orphan-error .jjl-task-row-error { margin-top: 0; }

.jjl-tq-case-cell { display: flex; flex-direction: column; gap: 2px; }
.jjl-tq-case-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: #8C6D1F;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.jjl-tq-case-link:hover { text-decoration: underline; }
.jjl-tq-case-link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Settlement tab (SCRUM-211): reduction_request row actions reuse this class
   on <button> elements that can be role-gated disabled, which no prior caller
   of .jjl-tq-case-link needed. */
.jjl-tq-case-link:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }
.jjl-tq-client { font-size: 12px; color: var(--text-2); }
.jjl-tq-lane {
  font-size: 11px;
  color: var(--text-2);
}
.jjl-tq-when {
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}

/* ── Notes tab ───────────────────────────────────────────────────── */
.jjl-notes-body {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.7;
  white-space: pre-wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  min-height: 80px;
}
.jjl-notes-empty { color: var(--text-3); font-style: italic; }

/* ── Audit log tab ───────────────────────────────────────────────── */
.jjl-audit-list { display: flex; flex-direction: column; gap: 0; }
.jjl-audit-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-sub);
}
.jjl-audit-row:last-child { border-bottom: none; }
.jjl-audit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(168, 131, 40, 0.5);
  flex-shrink: 0;
  margin-top: 5px;
}
.jjl-audit-body { flex: 1; min-width: 0; }
.jjl-audit-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 3px;
}
.jjl-audit-meta {
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.jjl-audit-ts { font-family: var(--font-mono); font-size: 10px; }
.jjl-audit-actor { font-weight: 600; color: var(--text-2); }
.jjl-audit-empty {
  padding: 36px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
}
.jjl-audit-loading {
  padding: 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
}

/* Field-change summary expand (demand_draft_submitted/approved rows) —
   public.v_demand_draft_field_changes, 067 amendment. */
.jjl-audit-fc-details {
  display: inline-block;
  margin-top: 4px;
}
.jjl-audit-fc-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--gold);
  font-size: 12px;
  list-style: none;
}
.jjl-audit-fc-details summary::-webkit-details-marker { display: none; }
.jjl-audit-fc-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  padding: 4px 0 4px 4px;
  border-left: 2px solid var(--border-sub);
  margin-top: 2px;
}
.jjl-audit-fc-token {
  font-family: var(--font-mono);
  color: var(--text-2);
  min-width: 140px;
}
.jjl-audit-fc-kind {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.jjl-audit-fc-vals { color: var(--text-2); word-break: break-word; }

/* ── Referral tab ────────────────────────────────────────────────── */
.jjl-ref-detail-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px 16px;
  box-shadow: var(--shadow-sm);
}
.jjl-ref-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-sub);
  gap: 16px;
  font-size: 13px;
}
.jjl-ref-row:last-child { border-bottom: none; }
.jjl-ref-key { color: var(--text-3); font-weight: 500; flex-shrink: 0; }
.jjl-ref-val { color: var(--text-1); font-weight: 600; text-align: right; word-break: break-word; }
.jjl-ref-val-dim { color: var(--text-3); font-weight: 400; font-style: italic; }

/* ── New lead stub notice ────────────────────────────────────────── */
.jjl-stub-notice {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-0);
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 100px;
  box-shadow: var(--shadow-md);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
  white-space: nowrap;
}
.jjl-stub-notice.visible { opacity: 1; }

/* ── Panel section headers ───────────────────────────────────────── */
.jjl-panel-section-hdr {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
  margin-top: 0;
}

/* ── Inline field edit (pencil → input → save/cancel) ───────────── */
.jjl-ie-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  padding: 1px 3px;
  margin-left: 3px;
  border-radius: 3px;
  opacity: 0.5;
  transition: opacity 120ms, color 120ms;
  vertical-align: middle;
  font-size: 11px;
  font-family: var(--font);
  font-weight: 600;
  gap: 3px;
}
.jjl-ie-btn:hover { opacity: 1; color: #8C6D1F; }
.jjl-ie-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  background: var(--surface-raised);
  border: 1px solid var(--border-focus);
  border-radius: 8px;
}
.jjl-ie-input {
  font-family: var(--font-mono);
  font-size: 12px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-1);
  min-width: 80px;
  max-width: 200px;
}
.jjl-ie-input[type="date"] { width: 120px; min-width: 120px; }

/* W7-15 / migration 043 — the multiline variant, for cases.assigned_providers.
   The task drawer captures that field as "one per line", so the value really
   does contain newlines: an <input type="text"> would return them stripped from
   .value and Save would flatten the list. See renderEditableField(). */
/* No `display` here on purpose: openFE() sets style="display:inline-flex" on
   this element directly, and an inline style beats any stylesheet rule short of
   !important. Declaring one would be dead code that reads as if it worked. */
.jjl-ie-row-multiline {
  align-items: flex-start;
  width: 100%;
}
.jjl-ie-textarea {
  font-family: var(--font);
  min-width: 0;
  max-width: none;
  flex: 1;
  resize: vertical;
  line-height: 1.5;
}
/* The read-only side of the same field. Without this the newlines the drawer
   captured collapse to spaces in the HTML and the list reads as one run-on
   line, which looks like the data is wrong when it is not. */
.jjl-cov-val-multiline {
  white-space: pre-wrap;
  word-break: break-word;
}
.jjl-ie-save {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #8C6D1F;
  border: none;
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}
.jjl-ie-save:hover { background: var(--blue); }
.jjl-ie-cancel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 2px 4px;
}
.jjl-ie-cancel:hover { color: var(--text-1); }

/* ── Adjuster management ─────────────────────────────────────────── */
.jjl-adj-add-btn {
  font-size: 11px;
  font-weight: 700;
  color: #8C6D1F;
  background: var(--blue-d);
  border: 1px solid rgba(168, 131, 40, 0.28);
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 140ms;
}
.jjl-adj-add-btn:hover { background: rgba(168, 131, 40, 0.2); }

.jjl-adj-actions { white-space: nowrap; text-align: right; }
.jjl-adj-action-btn {
  font-size: 11px;
  font-weight: 600;
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text-2);
  margin-left: 4px;
  transition: all 120ms;
}
.jjl-adj-action-btn:hover { border-color: var(--border-md); color: var(--text-1); background: var(--overlay); }
.jjl-adj-action-remove:hover { border-color: rgba(220,38,38,0.3); color: var(--red); background: var(--red-d); }

.jjl-adj-form {
  margin-top: 14px;
  padding: 16px 18px;
}
.jjl-adj-form-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.jjl-adj-form-fields { display: flex; flex-direction: column; gap: 8px; }
.jjl-adj-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.jjl-adj-form-label {
  min-width: 50px;
  font-weight: 600;
  color: var(--text-3);
  font-size: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.jjl-adj-form-input {
  flex: 1;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text-1);
  outline: none;
  transition: border-color 140ms;
  max-width: 280px;
}
.jjl-adj-form-input:focus { border-color: var(--border-focus); }
.jjl-adj-form-select {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text-1);
  outline: none;
  cursor: pointer;
}
.jjl-adj-form-btns { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.jjl-adj-form-save {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, #A88328, #8C6D1F);
  border: none;
  border-radius: 7px;
  padding: 6px 16px;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity 140ms;
}
.jjl-adj-form-save:hover { opacity: 0.9; }
.jjl-adj-form-save:disabled { opacity: 0.5; cursor: not-allowed; }
.jjl-adj-form-cancel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 4px 8px;
}
.jjl-adj-form-cancel:hover { color: var(--text-1); }

/* "+ Add task" event-type menu (073, case-tasks.js). */
.jjl-event-menu-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.jjl-event-menu-item {
  text-align: left;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-0);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}
.jjl-event-menu-item:hover { background: var(--surface-raised); }
.jjl-event-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Notes tab: section header ───────────────────────────────────── */
.jjl-notes-section-hdr {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Notes tab: legacy imported note (read-only) ─────────────────── */
.jjl-legacy-note-block {
  margin-bottom: 20px;
  border: 1px solid rgba(155, 133, 83, 0.3);
  border-radius: var(--radius-md);
  background: rgba(155, 133, 83, 0.05);
  overflow: hidden;
}
.jjl-legacy-note-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9B6A00;
  padding: 7px 14px 6px;
  border-bottom: 1px solid rgba(155, 133, 83, 0.2);
  background: rgba(155, 133, 83, 0.08);
}
.jjl-legacy-note-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 14px 16px;
  font-style: italic;
}

/* ── Add note form + note history ────────────────────────────────── */
.jjl-add-note-form { display: flex; flex-direction: column; gap: 8px; }
.jjl-add-note-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-1);
  outline: none;
  resize: vertical;
  transition: border-color 140ms;
  line-height: 1.6;
}
.jjl-add-note-textarea:focus { border-color: var(--border-focus); }
.jjl-add-note-btns { display: flex; justify-content: flex-end; gap: 8px; }

.jjl-note-hist-list { display: flex; flex-direction: column; gap: 0; }
.jjl-note-hist-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-sub);
}
.jjl-note-hist-row:last-child { border-bottom: none; }
.jjl-note-hist-text {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 4px;
}

/* ── Auth gate / login (Supabase Auth) ───────────────────────────── */
/* On-brand JJL login overlay. Covers the app until a session is verified.
   Reuses brand palette: deep teal #141414, teal CTA #A4812A,
   brass #A87C2A, warm-white #F6F4EF, serif display via --font-display. */
.jjl-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(125% 125% at 50% 0%, #2A2418 0%, #141414 56%, #0F0F0F 100%);
  font-family: var(--font);
}

/* State machine: one panel visible per [data-state]. */
.jjl-auth-checking,
.jjl-auth-form,
.jjl-auth-notprov { display: none; }
.jjl-auth-gate[data-state="checking"] .jjl-auth-checking { display: block; }
.jjl-auth-gate[data-state="login"] .jjl-auth-form { display: block; }
.jjl-auth-gate[data-state="not-provisioned"] .jjl-auth-notprov { display: block; }

.jjl-auth-card {
  width: 100%;
  max-width: 384px;
  box-sizing: border-box;
  background: #F6F4EF;
  border-radius: 16px;
  padding: 38px 36px 30px;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.36);
}

.jjl-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.jjl-auth-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #141414;
  color: #F6F4EF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.05em;
}
.jjl-auth-wordmark-1 {
  font-family: var(--font-display);
  font-size: 19px;
  color: #141414;            /* deep forest green — firm wordmark */
  line-height: 1.1;
  letter-spacing: 0.005em;
  font-weight: 600;
}
.jjl-auth-wm-accent {
  color: #A87C2A;            /* gold / khaki accent — evokes the firm logo */
  font-weight: 600;
}
.jjl-auth-wordmark-2 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A87C2A;
  font-weight: 600;
  margin-top: 3px;
}

.jjl-auth-title {
  font-family: var(--font-display);
  font-size: 25px;
  color: #141414;
  margin-bottom: 4px;
}
.jjl-auth-sub {
  font-size: 13px;
  color: #55524A;
  margin-bottom: 22px;
}

.jjl-auth-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #55524A;
  margin-bottom: 6px;
}
.jjl-auth-input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(20, 20, 20, 0.18);
  border-radius: 9px;
  background: #FFFFFF;
  color: #191A1A;
  font-size: 15px;
  font-family: var(--font);
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.jjl-auth-input:focus {
  border-color: #A4812A;
  box-shadow: 0 0 0 3px rgba(164, 129, 42, 0.18);
}

.jjl-auth-error {
  display: none;
  margin: 2px 0 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #b91c1c;
  font-size: 12.5px;
  line-height: 1.45;
}

.jjl-auth-btn {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  background: #A4812A;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.01em;
  margin-top: 4px;
  transition: background 0.15s, transform 0.05s;
}
.jjl-auth-btn:hover { background: #9A7A26; }
.jjl-auth-btn:active { transform: translateY(1px); }
.jjl-auth-btn:disabled { opacity: 0.65; cursor: default; }

/* ── W11-3a: "or" divider + Sign in with Microsoft ────────────────── */
.jjl-auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: var(--text-3, #8585A0);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.jjl-auth-divider::before,
.jjl-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(133, 133, 160, 0.25);
}
.jjl-auth-ms-btn {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(133, 133, 160, 0.35);
  border-radius: 9px;
  cursor: pointer;
  background: #FFFFFF;
  color: #2F2F2F;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.01em;
  transition: background 0.15s, transform 0.05s;
}
.jjl-auth-ms-btn:hover { background: #F3F3F6; }
.jjl-auth-ms-btn:active { transform: translateY(1px); }
.jjl-auth-ms-btn:disabled { opacity: 0.65; cursor: default; }

.jjl-auth-checking {
  font-size: 13px;
  color: #55524A;
  padding: 6px 0 2px;
}

.jjl-auth-notprov-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: #141414;
  margin-bottom: 8px;
}
.jjl-auth-notprov-body {
  font-size: 13px;
  color: #55524A;
  line-height: 1.55;
  margin-bottom: 18px;
}
.jjl-auth-link-btn {
  background: none;
  border: none;
  color: #A4812A;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
  text-decoration: underline;
}

.jjl-auth-foot {
  margin-top: 22px;
  font-size: 11px;
  color: #8F8A7F;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ── Intake Review tab (case-extraction.js) ──────────────────────────
   The review strip over case_field_extraction. Reuses .jjl-sb-*, .card,
   .jjl-task-btn/-error/-row-error, .jjl-audit-loading/-empty and
   .jjl-notes-section-hdr rather than inventing parallel styles.

   Rows are grouped into three consequence tiers (jjl-ext-tier1/2/3) — see
   the "Consequence tiering" section of case-extraction.js. Tier 1 gets a
   visually distinct red-tinted wrapper because it is the one group with a
   direct data-integrity consequence if skipped; Tier 3 gets the collapse
   affordance because it is the one group safe to bulk-accept. */

.jjl-ext-summary {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 16px;
}
.jjl-ext-summary strong { color: var(--text-1); font-size: 15px; }

.jjl-ext-tier { margin-bottom: 22px; }

.jjl-ext-tier-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.jjl-ext-tier-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
}

.jjl-ext-list { display: flex; flex-direction: column; gap: 8px; }

/* Tier 1 — conflicts. A red-tinted outer wrapper, distinct from the per-row
   .jjl-ext-conflict block each row already renders internally, so the
   section reads as urgent before a case manager reads a single row. */
.jjl-ext-tier1 {
  padding: 14px 14px 4px;
  background: var(--red-d);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
}
.jjl-ext-tier1-hdr .jjl-ext-tier-label { color: var(--red); }
.jjl-ext-tier1-icon { font-size: 13px; line-height: 1; }
.jjl-ext-tier1 .jjl-ext-list { margin-bottom: 10px; }
.jjl-ext-row-conflict { border-color: rgba(220, 38, 38, 0.3); }

/* Tier 3 — captured, no case-record impact. Collapsed by default; the
   toggle is a reset <button> (same trick as .jjl-task-title-link) so it is
   keyboard-operable for free instead of a clickable div. */
.jjl-ext-tier3-hdr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.jjl-ext-tier3-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
}
.jjl-ext-tier3-toggle:hover .jjl-ext-tier-label,
.jjl-ext-tier3-toggle:focus-visible .jjl-ext-tier-label {
  color: var(--text-1);
}
.jjl-ext-tier3-chevron {
  font-size: 10px;
  color: var(--text-3);
  width: 10px;
  display: inline-block;
  text-align: center;
}
.jjl-ext-tier3-hint {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}
.jjl-ext-tier3-list { margin-top: 2px; }

.jjl-ext-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.jjl-ext-main { flex: 1; min-width: 240px; }

.jjl-ext-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.jjl-ext-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

.jjl-ext-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.jjl-ext-value {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
  word-break: break-word;
}
.jjl-ext-value-empty {
  color: var(--text-3);
  font-style: italic;
  font-weight: 400;
}
.jjl-ext-confidence {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.jjl-ext-source {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
}

/* Proposed value conflicts with what is already on the case record — the
   feature, not an error state to soften. Same red vocabulary as
   .jjl-task-error / .jjl-sol-crit so it reads with the same urgency. */
.jjl-ext-conflict {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--red-d);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
}
.jjl-ext-conflict-side { flex: 1; min-width: 140px; }
.jjl-ext-conflict-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 2px;
}
.jjl-ext-conflict-val {
  font-size: 12px;
  color: var(--text-1);
  word-break: break-word;
}

.jjl-ext-canonical-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}

.jjl-ext-resolved-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}

.jjl-ext-edit-row {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.jjl-ext-edit-row .jjl-ie-input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }

.jjl-ext-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.jjl-ext-actions-readonly {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  padding-top: 2px;
}

.jjl-ext-source-section { margin-top: 8px; }
.jjl-ext-source-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 10px;
  margin-top: -4px;
}
.jjl-ext-source-block {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--overlay);
  overflow: hidden;
}
.jjl-ext-source-block-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 7px 14px 0;
}
.jjl-ext-source-block-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 6px 14px 12px;
}
/* ── Demand Queue screen (s-demand-queue) ────────────────────────────
   jjl-tq-* (Task Queue) card/table shells are reused as-is; these two
   rules are the only shapes that screen does not already provide. */
.jjl-dq-missing-chip {
  display: inline-block;
  font-size: 11px;
  color: var(--text-2);
  background: var(--overlay);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 2px 9px;
  margin: 0 4px 4px 0;
}
.jjl-dq-not-ready { margin-top: 8px; }
.jjl-dq-not-ready summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  padding: 8px 0;
}
.jjl-dq-not-ready summary:hover { color: var(--text-2); }

/* Not-ready rows: per-criterion chips (case_demand_readiness.criteria) instead
   of the table's Case/Demand/Status/Action columns. */
.jjl-dq-notready-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.jjl-dq-notready-row:last-child { border-bottom: none; }
.jjl-dq-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}
.jjl-dq-crit-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
  background: var(--overlay);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 3px 10px;
}
.jjl-dq-crit-chip .action-btn { padding: 1px 8px; font-size: 10px; }

/* ── Ops Dashboard screen (s-ops-dashboard) ──────────────────────────
   jjl-tq-table / jjl-task-lane-count reused as-is for Panel B's rows. */
.jjl-opsdash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 24px 24px;
}
.jjl-opsdash-panel-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .jjl-opsdash-grid { grid-template-columns: 1fr; }
}
.jjl-opsdash-panel { padding: 18px; }
.jjl-opsdash-panel-hdr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.jjl-opsdash-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.jjl-opsdash-stat {
  cursor: pointer;
  border-radius: 10px;
  padding: 8px;
  margin: -8px;
}
.jjl-opsdash-stat:hover { background: var(--overlay); }
.jjl-opsdash-stat-num {
  font-size: 36px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-1);
  line-height: 1.1;
}
.jjl-opsdash-stat-label {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
}
.jjl-opsdash-stat-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
}
.jjl-opsdash-stat-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  margin-top: 10px;
}
.jjl-opsdash-group { margin-bottom: 18px; }
.jjl-opsdash-group:last-child { margin-bottom: 0; }
.jjl-opsdash-group-hdr {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jjl-opsdash-flag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.jjl-opsdash-flag-tile {
  min-width: 120px;
  flex: 1 1 120px;
  border: 1px solid var(--border-md);
  border-radius: 10px;
  padding: 10px 12px;
}
.jjl-opsdash-flag-count {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-1);
}
.jjl-opsdash-flag-label {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}
.jjl-opsdash-flag-sub {
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px;
}
.jjl-opsdash-week-grid {
  display: flex;
  gap: 24px;
}
.jjl-opsdash-week-tile { min-width: 100px; }

/* Documents tab: large preview pane (override, 2026-09-17) */
.jjl-doc-body {
  display: grid;
  grid-template-columns: minmax(340px, 38%) 1fr;
  gap: 12px;
  align-items: start;
}
.jjl-doc-viewer-pane {
  position: sticky;
  top: 12px;
  height: calc(100vh - 160px);
  min-height: 600px;
  display: flex;
  flex-direction: column;
}
.jjl-doc-viewer-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}
.jjl-doc-viewer-img-wrap {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
}
.jjl-doc-viewer-img { max-width: 100%; height: auto; }
.jjl-doc-viewer-placeholder { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.jjl-doc-list-pane { max-height: calc(100vh - 160px); overflow-y: auto; }
.jjl-doc-row-meta { white-space: nowrap; }
@media (max-width: 1100px) {
  .jjl-doc-body { grid-template-columns: 1fr; }
  .jjl-doc-viewer-pane { position: static; height: 80vh; }
}