/* ═══════════════════════════════════════════════════════════════════════════
   AtlasLO — Visual Identity & Component Sheet
   Class prefix: .al-       •       Author: Design Lead
   Version: 1.0.0           •       2026-04-29

   ───────────────────────────────────────────────────────────────────────────
   RESEARCH SUMMARY  (Clio, Filevine, Smokeball, MyCase, PracticePanther,
                      LeanLaw, Litify, Rocket Matter, NetDocuments)

   What works (LIFTED):
     1. Filevine's case-as-spine: every case is a stack of typed sections
        navigated by a tab bar. We adopt .al-tab-bar for case detail.
     2. NetDocuments' document-row density: hairline-bordered rows scale
        to thousands of items without feeling cramped. We use .al-row.
     3. LeanLaw's time-entry simplicity: a single horizontal bar — duration,
        matter, narrative, rate, total. We mirror it in .al-time-entry.
     4. Litify's KPI tiles, but stripped of color: .al-stat is monochrome,
        the number does the talking.

   What we REJECT:
     1. Clio's powder-blue chrome. Generic SaaS blue is the visual default
        in every legal product — that's exactly why we won't use it.
     2. Rounded corners and "friendly" cards (MyCase, PracticePanther).
        Lawyers aren't your friend. Sharp corners only.
     3. Customizable widget dashboards (Clio's pet feature). Opinionated,
        prescribed views are more authoritative. We pick the layout.

   What nobody else does (BOLD MOVE):
     The case detail page opens with a "cover sheet" hero — typeset like
     the front of a legal brief. Caption number, In Re ___, court of
     filing, parties, set in display serif. It's a piece of typography,
     not a header bar. Every case feels like a document, not a record.

   ───────────────────────────────────────────────────────────────────────────
   IDENTITY DECISIONS

   Typography:
     Display:  Cormorant Garamond  (700/600/500)
       Why: Sharper, more contemporary than Playfair (which has become the
       default "elegant" choice and now reads as wedding-invitation).
       Cormorant has narrow apertures and high contrast — feels like a
       reset Caslon. Reads as 1920s law-review masthead.
     Body:     Inter  (400/500/600/700)
       Why: Highest legibility grotesque at small sizes. IBM Plex was
       considered but its slight quirkiness fights the serif's gravitas.
       Inter disappears, which is what a body face should do.
     Numerals: Inter tabular figures for tables; Cormorant lining
       figures for display.

   Color (paper + ink + oxblood):
     --al-paper:        #F4F1EA   warm off-white, low-chroma cream
     --al-paper-2:      #EAE5DA   slightly deeper for inset surfaces
     --al-ink:          #1A1714   near-black with brown undertone (not #000)
     --al-ink-2:        #3D3833   secondary text
     --al-ink-3:        #6B645B   tertiary / meta
     --al-hairline:     #C9C0B0   the rule between rows
     --al-accent:       #6B1F1F   oxblood — the only color that earns
                                   its keep
     --al-accent-hover: #8A2828
     --al-accent-soft:  rgba(107,31,31,0.08)
     --al-cognac:       #8B5A2B   aged cognac, used sparingly for labels
     --al-success:      #4A6B3F   muted moss, not saturated
     --al-warning:      #9B6E1F   muted brass
     --al-danger:       #6B1F1F   same as accent — danger IS oxblood here

   Corners:    0px everywhere. Period. (per platform memory)
   Density:    Compact. 13–14px body, 12px tables. Lawyers scan.
   Texture:    Subtle paper grain on .al-hero only (SVG noise data-uri).
               Hairlines between every row.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ───────────────────────────── TOKENS ───────────────────────────── */
:root {
  /* Paper / ink palette */
  --al-paper:         #F4F1EA;
  --al-paper-2:       #EAE5DA;
  --al-paper-3:       #DFD8C8;
  --al-ink:           #1A1714;
  --al-ink-2:         #3D3833;
  --al-ink-3:         #6B645B;
  --al-ink-4:         #8F887D;
  --al-hairline:      #C9C0B0;
  --al-hairline-soft: #DFD8C8;

  /* Accent (oxblood) + cognac */
  --al-accent:        #6B1F1F;
  --al-accent-hover:  #8A2828;
  --al-accent-deep:   #4A1414;
  --al-accent-soft:   rgba(107, 31, 31, 0.08);
  --al-accent-line:   rgba(107, 31, 31, 0.35);
  --al-cognac:        #8B5A2B;
  --al-cognac-soft:   rgba(139, 90, 43, 0.10);

  /* Semantic — all muted */
  --al-success:       #4A6B3F;
  --al-success-soft:  rgba(74, 107, 63, 0.10);
  --al-warning:       #9B6E1F;
  --al-warning-soft:  rgba(155, 110, 31, 0.10);
  --al-danger:        #6B1F1F;
  --al-danger-soft:   rgba(107, 31, 31, 0.10);
  --al-neutral-soft:  rgba(26, 23, 20, 0.06);

  /* Type */
  --al-font-display:  'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --al-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --al-font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing — compact rhythm */
  --al-s-1: 4px;
  --al-s-2: 8px;
  --al-s-3: 12px;
  --al-s-4: 16px;
  --al-s-5: 24px;
  --al-s-6: 32px;
  --al-s-7: 48px;
  --al-s-8: 64px;

  /* Sharp corners always */
  --al-radius: 0;

  /* Transitions */
  --al-t-fast: 120ms ease;
  --al-t: 180ms ease;
}

/* ─────────────────────────── PAGE WRAPPER ─────────────────────────── */
.al-page,
.al-page * {
  box-sizing: border-box;
}

.al-page {
  background: var(--al-paper);
  color: var(--al-ink);
  font-family: var(--al-font-body);
  font-size: 13px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11', 'tnum' 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  padding: var(--al-s-5) var(--al-s-5);
}

.al-page a:not(.al-btn) {
  color: var(--al-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--al-hairline);
  transition: var(--al-t-fast);
}
.al-page a:not(.al-btn):hover {
  color: var(--al-accent);
  border-bottom-color: var(--al-accent);
}

.al-page ::selection {
  background: var(--al-accent);
  color: var(--al-paper);
}

/* Force sharp corners on everything inside .al-page */
.al-page [class^="al-"],
.al-page [class*=" al-"] {
  border-radius: var(--al-radius) !important;
}

/* ─────────────────────────── TYPOGRAPHY ─────────────────────────── */
.al-eyebrow {
  font-family: var(--al-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-cognac);
  margin: 0 0 var(--al-s-2) 0;
  display: inline-block;
}
.al-eyebrow--ink { color: var(--al-ink-3); }
.al-eyebrow--accent { color: var(--al-accent); }

.al-h1 {
  font-family: var(--al-font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--al-ink);
  margin: 0 0 var(--al-s-3) 0;
}

.al-h2 {
  font-family: var(--al-font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--al-ink);
  margin: 0 0 var(--al-s-3) 0;
}

.al-h3 {
  font-family: var(--al-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-ink-2);
  margin: 0 0 var(--al-s-3) 0;
  padding-bottom: var(--al-s-2);
  border-bottom: 1px solid var(--al-hairline);
}

.al-display {
  font-family: var(--al-font-display);
  font-weight: 500;
  font-style: italic;
  color: var(--al-ink-2);
}

.al-meta {
  font-size: 11.5px;
  color: var(--al-ink-3);
  letter-spacing: 0.01em;
}

.al-meta--mono {
  font-family: var(--al-font-mono);
  font-size: 11px;
  letter-spacing: 0;
}

/* ───────────────────────────── HERO ─────────────────────────────
   The "cover sheet" — designed to feel like the front of a brief.
   ──────────────────────────────────────────────────────────────── */
.al-hero {
  position: relative;
  background: var(--al-paper-2);
  border: 1px solid var(--al-hairline);
  border-top: 3px solid var(--al-accent);
  padding: var(--al-s-6) var(--al-s-6) var(--al-s-5) var(--al-s-6);
  margin: 0 0 var(--al-s-5) 0;
  overflow: hidden;
}

/* Subtle paper grain on hero */
.al-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

.al-hero > * { position: relative; z-index: 1; }

.al-hero__caption {
  font-family: var(--al-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-ink-3);
  margin-bottom: var(--al-s-3);
}
.al-hero__caption strong {
  color: var(--al-accent);
  font-weight: 600;
  margin-right: var(--al-s-2);
}

.al-hero__title {
  font-family: var(--al-font-display);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--al-ink);
  margin: 0 0 var(--al-s-3) 0;
  max-width: 900px;
}
.al-hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--al-ink-2);
}

.al-hero__court {
  font-family: var(--al-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--al-ink-2);
  margin-bottom: var(--al-s-4);
}

.al-hero__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-s-5);
  padding-top: var(--al-s-4);
  border-top: 1px solid var(--al-hairline);
}
.al-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}
.al-hero__meta-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-ink-3);
}
.al-hero__meta-value {
  font-family: var(--al-font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--al-ink);
  line-height: 1.2;
}

/* Smaller hero variant for dashboards / index pages */
.al-hero--dash {
  border-top-width: 2px;
  padding: var(--al-s-5) var(--al-s-6);
}
.al-hero--dash .al-hero__title { font-size: 36px; }

/* ───────────────────────────── CARD ───────────────────────────── */
.al-card {
  background: #FCFAF5;
  border: 1px solid var(--al-hairline);
  padding: var(--al-s-5);
  margin-bottom: var(--al-s-4);
  position: relative;
}

.al-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--al-s-3);
  margin: 0 0 var(--al-s-4) 0;
  padding-bottom: var(--al-s-3);
  border-bottom: 1px solid var(--al-hairline);
}

.al-card__title {
  font-family: var(--al-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--al-ink);
  margin: 0;
}

.al-card__actions { display: inline-flex; gap: var(--al-s-2); }

.al-card--quiet {
  background: transparent;
  border: 1px solid var(--al-hairline-soft);
}

.al-card--inset {
  background: var(--al-paper-2);
  border-color: var(--al-hairline);
}

/* ───────────────────────────── STATS ───────────────────────────── */
.al-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: 1px solid var(--al-hairline);
  background: #FCFAF5;
  margin-bottom: var(--al-s-5);
}

.al-stat {
  padding: var(--al-s-5) var(--al-s-5);
  border-right: 1px solid var(--al-hairline);
  border-bottom: 1px solid var(--al-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--al-s-2);
  position: relative;
}
.al-stat:last-child { border-right: 0; }

.al-stat__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-ink-3);
}
.al-stat__value {
  font-family: var(--al-font-display);
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  color: var(--al-ink);
  font-variant-numeric: lining-nums;
}
.al-stat__delta {
  font-size: 11px;
  color: var(--al-ink-3);
  font-family: var(--al-font-mono);
}
.al-stat__delta--up { color: var(--al-success); }
.al-stat__delta--down { color: var(--al-danger); }

.al-stat--accent::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--al-accent);
}

/* ───────────────────────────── TABLE ─────────────────────────────
   Designed to coexist with DataTables.net default markup.
   ──────────────────────────────────────────────────────────────── */
.al-table-wrap {
  background: #FCFAF5;
  border: 1px solid var(--al-hairline);
  margin-bottom: var(--al-s-5);
  overflow-x: auto;
}

.al-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.al-table thead th {
  background: var(--al-paper-2);
  color: var(--al-ink-3);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--al-s-3) var(--al-s-4);
  border-bottom: 2px solid var(--al-ink);
  white-space: nowrap;
}

.al-table tbody td {
  padding: var(--al-s-3) var(--al-s-4);
  border-bottom: 1px solid var(--al-hairline);
  color: var(--al-ink-2);
  vertical-align: middle;
}

.al-table tbody tr {
  transition: background var(--al-t-fast);
}
.al-table tbody tr:hover {
  background: var(--al-accent-soft);
}
.al-table tbody tr:hover td {
  color: var(--al-ink);
}

.al-table tbody tr:last-child td { border-bottom: 0; }

.al-table td.al-td-num,
.al-table th.al-td-num {
  text-align: right;
  font-family: var(--al-font-mono);
  font-size: 11.5px;
}

.al-table .al-td-strong {
  color: var(--al-ink);
  font-weight: 600;
}

.al-table .al-td-display {
  font-family: var(--al-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--al-ink);
}

/* DataTables.net override layer */
.al-table-wrap .dataTables_wrapper {
  font-family: var(--al-font-body);
  color: var(--al-ink-2);
  font-size: 12px;
}
.al-table-wrap .dataTables_filter input,
.al-table-wrap .dataTables_length select {
  border: 1px solid var(--al-hairline);
  background: var(--al-paper);
  padding: 6px 10px;
  font-family: var(--al-font-body);
  font-size: 12px;
  color: var(--al-ink);
}
.al-table-wrap .dataTables_filter input:focus,
.al-table-wrap .dataTables_length select:focus {
  outline: none;
  border-color: var(--al-accent);
}
.al-table-wrap .paginate_button {
  border: 1px solid var(--al-hairline) !important;
  background: var(--al-paper) !important;
  color: var(--al-ink-2) !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  border-radius: 0 !important;
  font-size: 11px !important;
}
.al-table-wrap .paginate_button.current {
  background: var(--al-ink) !important;
  color: var(--al-paper) !important;
  border-color: var(--al-ink) !important;
}
.al-table-wrap .paginate_button:hover {
  background: var(--al-accent) !important;
  color: var(--al-paper) !important;
  border-color: var(--al-accent) !important;
}

/* ───────────────────────────── ROW ─────────────────────────────
   Hairline-bordered list row pattern (used everywhere lists appear).
   ──────────────────────────────────────────────────────────────── */
.al-row-list {
  background: #FCFAF5;
  border: 1px solid var(--al-hairline);
  margin-bottom: var(--al-s-4);
}

.al-row {
  display: flex;
  align-items: center;
  gap: var(--al-s-4);
  padding: var(--al-s-3) var(--al-s-4);
  border-bottom: 1px solid var(--al-hairline);
  transition: background var(--al-t-fast);
  cursor: default;
}
.al-row:last-child { border-bottom: 0; }
.al-row:hover { background: var(--al-accent-soft); }

.al-row__primary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.al-row__title {
  font-weight: 600;
  font-size: 13px;
  color: var(--al-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.al-row__sub {
  font-size: 11.5px;
  color: var(--al-ink-3);
}
.al-row__aside {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--al-s-3);
  color: var(--al-ink-3);
  font-size: 11.5px;
}

/* ───────────────────────────── TAB BAR ─────────────────────────────
   Case detail tabs — under the hero. Looks like file-folder tabs.
   ──────────────────────────────────────────────────────────────── */
.al-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--al-ink);
  margin: 0 0 var(--al-s-5) 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.al-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--al-s-3) var(--al-s-5);
  font-family: var(--al-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-ink-3);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color var(--al-t-fast);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.al-tab:hover { color: var(--al-ink); }

.al-tab.is-active,
.al-tab.active {
  color: var(--al-ink);
  border-bottom-color: var(--al-accent);
}

.al-tab__count {
  display: inline-block;
  margin-left: var(--al-s-2);
  font-family: var(--al-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--al-ink-4);
  padding: 1px 6px;
  background: var(--al-paper-2);
  border: 1px solid var(--al-hairline);
}
.al-tab.is-active .al-tab__count,
.al-tab.active .al-tab__count {
  color: var(--al-accent);
  border-color: var(--al-accent-line);
  background: var(--al-accent-soft);
}

/* ───────────────────────────── FORM ───────────────────────────── */
.al-form { display: flex; flex-direction: column; gap: var(--al-s-4); }

.al-form__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--al-s-4);
  align-items: start;
  padding-bottom: var(--al-s-4);
  border-bottom: 1px solid var(--al-hairline-soft);
}
.al-form__row:last-child { border-bottom: 0; padding-bottom: 0; }

.al-form__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--al-ink-2);
  padding-top: 8px;
}
.al-form__label-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--al-ink-3);
  margin-top: 2px;
  font-style: italic;
  font-family: var(--al-font-display);
}

.al-form__field { display: flex; flex-direction: column; gap: var(--al-s-2); }

.al-input,
.al-textarea,
.al-select {
  appearance: none;
  width: 100%;
  font-family: var(--al-font-body);
  font-size: 13px;
  color: var(--al-ink);
  background: var(--al-paper);
  border: 1px solid var(--al-hairline);
  padding: 9px 12px;
  line-height: 1.4;
  transition: border-color var(--al-t-fast), background var(--al-t-fast);
}
.al-textarea { min-height: 96px; resize: vertical; font-family: var(--al-font-body); }

.al-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%231A1714'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.al-input:hover,
.al-textarea:hover,
.al-select:hover {
  border-color: var(--al-ink-4);
}
.al-input:focus,
.al-textarea:focus,
.al-select:focus {
  outline: none;
  border-color: var(--al-accent);
  background: #FFFCF6;
  box-shadow: inset 0 0 0 1px var(--al-accent);
}
.al-input::placeholder,
.al-textarea::placeholder {
  color: var(--al-ink-4);
  font-style: italic;
  font-family: var(--al-font-display);
  font-size: 14px;
}

.al-input--lg { font-size: 18px; padding: 12px 14px; font-family: var(--al-font-display); font-weight: 500; }

.al-form__hint {
  font-size: 11px;
  color: var(--al-ink-3);
  font-style: italic;
  font-family: var(--al-font-display);
}
.al-form__error {
  font-size: 11px;
  color: var(--al-danger);
  font-weight: 500;
}

.al-form__actions {
  display: flex;
  gap: var(--al-s-2);
  justify-content: flex-end;
  padding-top: var(--al-s-4);
  border-top: 1px solid var(--al-hairline);
}

/* ───────────────────────────── BUTTONS ─────────────────────────── */
.al-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--al-s-2);
  font-family: var(--al-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 18px;
  background: var(--al-paper);
  color: var(--al-ink);
  border: 1px solid var(--al-ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: var(--al-t-fast);
  user-select: none;
}
.al-btn:hover {
  background: var(--al-ink);
  color: var(--al-paper);
}
.al-btn:focus-visible {
  outline: 2px solid var(--al-accent);
  outline-offset: 2px;
}
.al-btn:disabled,
.al-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--al-paper);
  color: var(--al-ink);
}

.al-btn--primary {
  background: var(--al-accent);
  color: var(--al-paper);
  border-color: var(--al-accent);
}
.al-btn--primary:hover {
  background: var(--al-accent-hover);
  border-color: var(--al-accent-hover);
  color: var(--al-paper);
}

.al-btn--ghost {
  background: transparent;
  border-color: var(--al-hairline);
  color: var(--al-ink-2);
}
.al-btn--ghost:hover {
  background: var(--al-accent-soft);
  border-color: var(--al-accent);
  color: var(--al-accent);
}

.al-btn--danger {
  background: transparent;
  border-color: var(--al-danger);
  color: var(--al-danger);
}
.al-btn--danger:hover {
  background: var(--al-danger);
  color: var(--al-paper);
}

.al-btn--sm { padding: 6px 12px; font-size: 10.5px; }

/* ── Header Actions — icon-forward shortcut toolbar ───────────────── */
.al-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.al-header-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  font-family: var(--al-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--al-ink-2);
  text-decoration: none;
  border: 1px solid transparent;
  transition: var(--al-t-fast);
  cursor: pointer;
  line-height: 1;
  min-width: 64px;
}
.al-header-action i {
  font-size: 17px;
  color: var(--al-ink-3);
  transition: var(--al-t-fast);
}
.al-header-action:hover {
  color: var(--al-accent);
  background: var(--al-accent-soft);
  border-color: var(--al-accent);
  text-decoration: none;
}
.al-header-action:hover i {
  color: var(--al-accent);
}
.al-header-actions .al-btn--primary {
  align-self: center;
  margin-left: 8px;
}
@media (max-width: 575.98px) {
  .al-header-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
  }
  .al-header-action {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    font-size: 9px;
  }
  .al-header-action i { font-size: 15px; }
  .al-header-actions .al-btn--primary {
    margin-left: 4px;
  }
}
.al-btn--lg { padding: 12px 24px; font-size: 12px; }
.al-btn--block { display: flex; width: 100%; }

/* ───────────────────────────── STATUS ─────────────────────────── */
.al-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--al-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  color: var(--al-ink-2);
  background: transparent;
  white-space: nowrap;
  line-height: 1;
}
.al-status::before {
  content: '';
  width: 6px;
  height: 6px;
  background: currentColor;
  flex-shrink: 0;
}

.al-status--open    { color: var(--al-success); background: var(--al-success-soft); }
.al-status--active  { color: var(--al-accent);  background: var(--al-accent-soft); }
.al-status--pending { color: var(--al-warning); background: var(--al-warning-soft); }
.al-status--closed  { color: var(--al-ink-3);   background: var(--al-neutral-soft); }
.al-status--archived{ color: var(--al-ink-4);   background: transparent; opacity: 0.75; }

/* ───────────────────────────── PILL ───────────────────────────── */
.al-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 9px;
  background: var(--al-paper-2);
  border: 1px solid var(--al-hairline);
  color: var(--al-ink-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
}
.al-pill--accent { background: var(--al-accent-soft); border-color: var(--al-accent-line); color: var(--al-accent); }
.al-pill--cognac { background: var(--al-cognac-soft); border-color: var(--al-cognac); color: var(--al-cognac); }

/* ───────────────────────────── EMPTY ──────────────────────────── */
.al-empty {
  text-align: center;
  padding: var(--al-s-7) var(--al-s-5);
  background: transparent;
  border: 1px dashed var(--al-hairline);
  color: var(--al-ink-3);
}
.al-empty__title {
  font-family: var(--al-font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--al-ink-2);
  margin: 0 0 var(--al-s-2) 0;
}
.al-empty__body {
  font-size: 12.5px;
  color: var(--al-ink-3);
  max-width: 420px;
  margin: 0 auto var(--al-s-4) auto;
  line-height: 1.55;
}

/* ──────────────────────── TIME ENTRY ─────────────────────────── */
.al-time-entry {
  display: grid;
  grid-template-columns: 90px 1fr 130px 90px 100px 36px;
  gap: var(--al-s-3);
  align-items: center;
  padding: var(--al-s-3) var(--al-s-4);
  border-bottom: 1px solid var(--al-hairline);
  font-size: 12.5px;
  transition: background var(--al-t-fast);
}
.al-time-entry:hover { background: var(--al-accent-soft); }
.al-time-entry:last-child { border-bottom: 0; }

.al-time-entry__date {
  font-family: var(--al-font-mono);
  font-size: 11px;
  color: var(--al-ink-3);
}
.al-time-entry__narrative {
  color: var(--al-ink);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.al-time-entry__narrative-matter {
  font-size: 10.5px;
  color: var(--al-ink-3);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.al-time-entry__hours {
  font-family: var(--al-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--al-ink);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
.al-time-entry__rate,
.al-time-entry__total {
  font-family: var(--al-font-mono);
  font-size: 11.5px;
  text-align: right;
}
.al-time-entry__total { color: var(--al-ink); font-weight: 600; }
.al-time-entry__menu {
  text-align: right;
  color: var(--al-ink-3);
  cursor: pointer;
}

/* ───────────────────────────── NOTE ───────────────────────────── */
.al-note {
  position: relative;
  padding: var(--al-s-4) var(--al-s-5) var(--al-s-4) var(--al-s-6);
  border-bottom: 1px solid var(--al-hairline);
  background: transparent;
}
.al-note::before {
  content: '';
  position: absolute;
  left: var(--al-s-4);
  top: var(--al-s-5);
  bottom: var(--al-s-4);
  width: 2px;
  background: var(--al-hairline);
}
.al-note--private::before { background: var(--al-accent); }

.al-note__head {
  display: flex;
  align-items: baseline;
  gap: var(--al-s-3);
  margin-bottom: var(--al-s-2);
}
.al-note__author {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--al-ink);
}
.al-note__time {
  font-family: var(--al-font-mono);
  font-size: 10.5px;
  color: var(--al-ink-3);
}
.al-note__private-flag {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-accent);
  padding: 1px 6px;
  border: 1px solid var(--al-accent);
  margin-left: auto;
}
.al-note__body {
  color: var(--al-ink-2);
  font-size: 13px;
  line-height: 1.6;
}
.al-note__body p { margin: 0 0 var(--al-s-2) 0; }
.al-note__body p:last-child { margin-bottom: 0; }

/* ───────────────────────── DOC ROW ──────────────────────────── */
.al-doc-row {
  display: grid;
  grid-template-columns: 32px 1fr 110px 100px 100px 36px;
  gap: var(--al-s-3);
  align-items: center;
  padding: var(--al-s-3) var(--al-s-4);
  border-bottom: 1px solid var(--al-hairline);
  font-size: 12.5px;
  transition: background var(--al-t-fast);
  cursor: pointer;
}
.al-doc-row:hover { background: var(--al-accent-soft); }
.al-doc-row:last-child { border-bottom: 0; }

.al-doc-row__icon {
  width: 28px;
  height: 34px;
  background: var(--al-paper-2);
  border: 1px solid var(--al-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--al-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--al-ink-3);
  text-transform: uppercase;
  position: relative;
}
.al-doc-row__icon::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 7px; height: 7px;
  background: linear-gradient(135deg, transparent 50%, var(--al-hairline) 50%);
}
.al-doc-row__icon--pdf { color: var(--al-accent); border-color: var(--al-accent-line); }

.al-doc-row__name {
  font-weight: 600;
  color: var(--al-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.al-doc-row__meta {
  font-size: 10.5px;
  color: var(--al-ink-3);
  margin-top: 1px;
}
.al-doc-row__size,
.al-doc-row__date,
.al-doc-row__author {
  font-family: var(--al-font-mono);
  font-size: 11px;
  color: var(--al-ink-3);
  text-align: right;
}

/* ───────────────────────────── PARTY ──────────────────────────── */
.al-party {
  display: grid;
  grid-template-columns: 36px 1fr 140px 110px;
  gap: var(--al-s-3);
  align-items: center;
  padding: var(--al-s-3) var(--al-s-4);
  border-bottom: 1px solid var(--al-hairline);
}
.al-party:last-child { border-bottom: 0; }

.al-party__avatar {
  width: 30px;
  height: 30px;
  background: var(--al-paper-2);
  border: 1px solid var(--al-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--al-font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--al-ink-2);
  text-transform: uppercase;
}
.al-party__avatar--opposing {
  background: var(--al-accent-soft);
  border-color: var(--al-accent-line);
  color: var(--al-accent);
}

.al-party__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--al-ink);
}
.al-party__role {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-cognac);
  margin-top: 1px;
}
.al-party__contact {
  font-size: 11px;
  color: var(--al-ink-3);
  font-family: var(--al-font-mono);
}
.al-party__conflict {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-warning);
  text-align: right;
}

/* ────────────────────── SIDEBAR ACCENT ────────────────────────
   When the AtlasLO module is active, the platform's sidebar item
   (whatever it's wrapped in) gets an oxblood left bar and a subtle
   shift. Scoped to .al-active so the platform default isn't touched
   unless this class is applied.
   ────────────────────────────────────────────────────────────── */
.al-sidebar-active,
.sidebar .nav-item.al-active > a,
.sidebar .nav-link.al-active {
  position: relative;
  background: var(--al-accent-soft) !important;
  color: var(--al-ink) !important;
  font-weight: 600 !important;
}
.al-sidebar-active::before,
.sidebar .nav-item.al-active > a::before,
.sidebar .nav-link.al-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--al-accent);
}

/* Module brand mark — drop into the sidebar header */
.al-brand {
  display: flex;
  align-items: baseline;
  gap: var(--al-s-2);
  padding: var(--al-s-3) var(--al-s-4);
  border-bottom: 1px solid var(--al-hairline);
  font-family: var(--al-font-display);
}
.al-brand__mark {
  font-weight: 700;
  font-size: 22px;
  color: var(--al-ink);
  letter-spacing: -0.01em;
}
.al-brand__mark em {
  font-style: italic;
  font-weight: 500;
  color: var(--al-accent);
}
.al-brand__sub {
  font-family: var(--al-font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--al-ink-3);
}

/* ───────────────────────── UTILITIES ─────────────────────────── */
.al-divider {
  height: 1px;
  background: var(--al-hairline);
  margin: var(--al-s-5) 0;
  border: 0;
}
.al-divider--ornate {
  height: 14px;
  background: transparent;
  text-align: center;
  position: relative;
}
.al-divider--ornate::before {
  content: '§';
  font-family: var(--al-font-display);
  font-size: 18px;
  color: var(--al-cognac);
  background: var(--al-paper);
  padding: 0 var(--al-s-3);
  position: relative;
  z-index: 1;
}
.al-divider--ornate::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--al-hairline);
}

.al-stack-sm > * + * { margin-top: var(--al-s-3); }
.al-stack > * + * { margin-top: var(--al-s-4); }
.al-stack-lg > * + * { margin-top: var(--al-s-6); }

.al-text-center { text-align: center; }
.al-text-right  { text-align: right; }
.al-text-mono   { font-family: var(--al-font-mono); }
.al-text-display{ font-family: var(--al-font-display); }
.al-text-italic { font-style: italic; }
.al-text-accent { color: var(--al-accent); }
.al-text-muted  { color: var(--al-ink-3); }

/* ─────────────────────── RESPONSIVE ──────────────────────────── */
@media (max-width: 992px) {
  .al-page { padding: var(--al-s-4) var(--al-s-3); }
  .al-hero { padding: var(--al-s-5) var(--al-s-4); }
  .al-hero__title { font-size: 36px; }
  .al-hero--dash .al-hero__title { font-size: 28px; }
  .al-h1 { font-size: 32px; }
  .al-h2 { font-size: 22px; }
  .al-stat__value { font-size: 30px; }
}

@media (max-width: 768px) {
  .al-page { padding: var(--al-s-3) var(--al-s-3); font-size: 13px; }
  .al-hero {
    padding: var(--al-s-4) var(--al-s-4);
    border-top-width: 2px;
  }
  .al-hero__title { font-size: 28px; }
  .al-hero--dash .al-hero__title { font-size: 24px; }
  .al-hero__meta-row { gap: var(--al-s-3); }
  .al-hero__meta-item { min-width: calc(50% - var(--al-s-3)); }

  .al-h1 { font-size: 26px; }
  .al-h2 { font-size: 20px; }

  .al-card { padding: var(--al-s-4); }
  .al-card__head { flex-direction: column; align-items: flex-start; }
  .al-card__title { font-size: 18px; }

  .al-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .al-stat { padding: var(--al-s-4); border-right: 1px solid var(--al-hairline); }
  .al-stat:nth-child(2n) { border-right: 0; }
  .al-stat__value { font-size: 26px; }

  .al-form__row {
    grid-template-columns: 1fr;
    gap: var(--al-s-2);
  }
  .al-form__label { padding-top: 0; }

  .al-tab-bar { gap: 0; }
  .al-tab { padding: var(--al-s-3) var(--al-s-3); font-size: 10.5px; }

  /* Time entry collapses to two lines on mobile */
  .al-time-entry {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "narrative hours"
      "meta total";
    row-gap: var(--al-s-2);
  }
  .al-time-entry__narrative { grid-area: narrative; }
  .al-time-entry__hours     { grid-area: hours; font-size: 16px; }
  .al-time-entry__date      { grid-area: meta; }
  .al-time-entry__total     { grid-area: total; }
  .al-time-entry__rate,
  .al-time-entry__menu      { display: none; }

  /* Doc rows — drop columns on mobile */
  .al-doc-row {
    grid-template-columns: 32px 1fr 80px;
    grid-template-areas:
      "icon name size"
      "icon meta meta";
  }
  .al-doc-row__icon  { grid-area: icon; }
  .al-doc-row__name  { grid-area: name; }
  .al-doc-row__size  { grid-area: size; }
  .al-doc-row__meta  { grid-area: meta; }
  .al-doc-row__date,
  .al-doc-row__author { display: none; }

  .al-party {
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "avatar name"
      "avatar contact";
    row-gap: 2px;
  }
  .al-party__avatar  { grid-area: avatar; }
  .al-party__name    { grid-area: name; }
  .al-party__contact { grid-area: contact; }
  .al-party__conflict{ display: none; }

  .al-form__actions { flex-direction: column-reverse; }
  .al-form__actions .al-btn { width: 100%; }
}

@media (max-width: 480px) {
  .al-stat-grid { grid-template-columns: 1fr; }
  .al-stat { border-right: 0; }
  .al-hero__title { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════════════
   CONTACT ROSTER (flagship)
   "I need to email everyone on the Whitfield case right now."
   Search-first hero + autocomplete + roster table + contact card.
   ════════════════════════════════════════════════════════════════════ */

/* Mode toggle (Matter | Cross-Case) */
.al-roster-mode {
  display: inline-flex;
  border: 1px solid var(--al-hairline);
  background: var(--al-paper);
}
.al-roster-mode__btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--al-hairline);
  padding: 8px 16px;
  font-family: var(--al-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-ink-3);
  cursor: pointer;
  transition: var(--al-t-fast);
}
.al-roster-mode__btn:last-child { border-right: 0; }
.al-roster-mode__btn:hover { color: var(--al-ink); background: var(--al-accent-soft); }
.al-roster-mode__btn.is-active {
  background: var(--al-ink);
  color: var(--al-paper);
}

/* Big search input with autocomplete dropdown */
.al-search { position: relative; }
.al-search__row {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--al-paper);
  border: 1px solid var(--al-hairline);
  border-bottom-width: 2px;
  transition: border-color var(--al-t-fast);
}
.al-search__row:focus-within {
  border-color: var(--al-accent);
  border-bottom-color: var(--al-accent);
  box-shadow: inset 0 0 0 1px var(--al-accent);
}
.al-search__icon {
  flex: 0 0 auto;
  padding: 0 var(--al-s-3) 0 var(--al-s-4);
  color: var(--al-ink-3);
  font-size: 18px;
}
.al-search__input {
  flex: 1 1 auto;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 16px 4px;
  font-family: var(--al-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--al-ink);
  outline: none;
  min-width: 0;
}
.al-search__input::placeholder {
  font-style: italic;
  color: var(--al-ink-4);
  opacity: 1;
}
.al-search__clear {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 var(--al-s-4);
  cursor: pointer;
  color: var(--al-ink-3);
  font-size: 14px;
}
.al-search__clear:hover { color: var(--al-accent); }

.al-search__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FCFAF5;
  border: 1px solid var(--al-hairline);
  border-top: 2px solid var(--al-accent);
  z-index: 40;
  max-height: 420px;
  overflow-y: auto;
  box-shadow: 0 12px 24px -16px rgba(26, 23, 20, 0.25);
}
.al-search__item {
  display: grid;
  grid-template-columns: 130px 1fr auto auto;
  gap: var(--al-s-3);
  align-items: baseline;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--al-hairline-soft);
  padding: var(--al-s-3) var(--al-s-4);
  text-align: left;
  cursor: pointer;
  transition: var(--al-t-fast);
  font-family: var(--al-font-body);
  color: var(--al-ink);
}
.al-search__item:last-child { border-bottom: 0; }
.al-search__item:hover,
.al-search__item.is-highlighted {
  background: var(--al-accent-soft);
}
.al-search__item-num {
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--al-accent);
  letter-spacing: 0.02em;
}
.al-search__item-name {
  font-family: var(--al-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--al-ink);
}
.al-search__item-meta {
  font-size: 11px;
  color: var(--al-ink-3);
  margin-right: var(--al-s-3);
  text-align: right;
}
.al-search__empty {
  padding: var(--al-s-5);
  color: var(--al-ink-3);
  font-size: 12px;
  text-align: center;
  font-style: italic;
  font-family: var(--al-font-display);
}

/* Filter chips (All | Firm | External | Parties) */
.al-filter-chips {
  display: inline-flex;
  border: 1px solid var(--al-hairline);
  background: var(--al-paper);
}
.al-chip {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--al-hairline);
  padding: 6px 14px;
  font-family: var(--al-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-ink-3);
  cursor: pointer;
  transition: var(--al-t-fast);
}
.al-chip:last-child { border-right: 0; }
.al-chip:hover { color: var(--al-accent); background: var(--al-accent-soft); }
.al-chip.is-active {
  background: var(--al-ink);
  color: var(--al-paper);
}

/* Action bar (Email All / Email Selected / Copy / CSV / Print) */
.al-roster-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-s-3);
  padding: var(--al-s-3) 0;
  border-bottom: 1px solid var(--al-hairline);
  margin-bottom: var(--al-s-3);
}
.al-roster-actions__left,
.al-roster-actions__right {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-s-2);
}

/* Matter caption (when a roster is loaded) */
.al-roster-caption {
  border-top: 2px solid var(--al-accent);
  padding: var(--al-s-3) 0 var(--al-s-4) 0;
  margin-bottom: var(--al-s-3);
  border-bottom: 1px solid var(--al-hairline);
}

/* The roster table itself — extends .al-table */
.al-table.al-roster .al-roster__check-cell {
  width: 36px;
  text-align: center;
  padding-left: var(--al-s-3);
  padding-right: 0;
}
.al-table.al-roster .al-roster__name-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--al-font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--al-ink);
  cursor: pointer;
  text-align: left;
  transition: color var(--al-t-fast);
  border-bottom: 1px dashed transparent;
}
.al-table.al-roster .al-roster__name-btn:hover {
  color: var(--al-accent);
  border-bottom-color: var(--al-accent);
}
.al-table.al-roster .al-roster__contact {
  border-bottom: 0;
  font-family: var(--al-font-mono);
  font-size: 11.5px;
  color: var(--al-ink-2);
}
.al-table.al-roster .al-roster__contact:hover { color: var(--al-accent); }

/* Cross-Case lookup result rows */
.al-cross-row {
  border: 1px solid var(--al-hairline);
  background: #FCFAF5;
  padding: var(--al-s-4) var(--al-s-5);
  margin-bottom: var(--al-s-3);
}
.al-cross-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-s-3);
  border-bottom: 1px solid var(--al-hairline-soft);
  padding-bottom: var(--al-s-3);
  margin-bottom: var(--al-s-3);
}
.al-cross-row__name {
  font-family: var(--al-font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--al-ink);
}
.al-cross-row__cases {
  list-style: none;
  margin: 0;
  padding: 0;
}
.al-cross-row__cases li {
  padding: var(--al-s-2) 0;
  border-bottom: 1px dashed var(--al-hairline-soft);
  font-size: 12.5px;
}
.al-cross-row__cases li:last-child { border-bottom: 0; }
.al-cross-row__cases a { font-weight: 600; }

/* Contact card slide-out */
.al-contact-card {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  background: #FCFAF5;
  border-left: 3px solid var(--al-accent);
  box-shadow: -16px 0 32px -16px rgba(26, 23, 20, 0.3);
  padding: var(--al-s-5);
  z-index: 1050;
  transform: translateX(100%);
  transition: transform 220ms ease;
  overflow-y: auto;
}
.al-contact-card.is-open { transform: translateX(0); }
.al-contact-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--al-s-3);
  border-bottom: 1px solid var(--al-hairline);
  padding-bottom: var(--al-s-3);
  margin-bottom: var(--al-s-3);
}
.al-contact-card__name {
  font-family: var(--al-font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--al-ink);
  line-height: 1.2;
}
.al-contact-card__role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-cognac);
  margin-top: 4px;
}
.al-contact-card__line {
  display: flex;
  align-items: baseline;
  gap: var(--al-s-2);
  padding: var(--al-s-2) 0;
  font-size: 13px;
  color: var(--al-ink-2);
  border-bottom: 1px dashed var(--al-hairline-soft);
}
.al-contact-card__line i {
  width: 14px;
  color: var(--al-ink-3);
  text-align: center;
}
.al-contact-card__scrim {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.35);
  z-index: 1040;
}

/* Mobile — collapse the roster table to two columns of essential info */
@media (max-width: 768px) {
  .al-roster-mode__btn { padding: 8px 12px; font-size: 10px; }
  .al-search__input    { font-size: 17px; padding: 12px 4px; }
  .al-search__icon     { font-size: 14px; padding: 0 var(--al-s-2) 0 var(--al-s-3); }
  .al-search__item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .al-search__item-meta { text-align: left; margin-right: 0; }

  .al-roster-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .al-roster-actions__left,
  .al-roster-actions__right {
    justify-content: flex-start;
  }

  .al-table.al-roster thead { display: none; }
  .al-table.al-roster tbody tr {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "check name"
      "check role"
      "check email"
      "check phone";
    border: 1px solid var(--al-hairline);
    margin-bottom: var(--al-s-2);
    padding: var(--al-s-3);
    gap: 2px;
  }
  .al-table.al-roster tbody td {
    border: 0;
    padding: 0;
  }
  .al-table.al-roster tbody td:nth-child(1) { grid-area: check; align-self: center; }
  .al-table.al-roster tbody td:nth-child(2) { grid-area: name; }
  .al-table.al-roster tbody td:nth-child(3) { grid-area: role; }
  .al-table.al-roster tbody td:nth-child(5) { grid-area: email; }
  .al-table.al-roster tbody td:nth-child(6) { grid-area: phone; }
  .al-table.al-roster tbody td:nth-child(4),
  .al-table.al-roster tbody td:nth-child(7),
  .al-table.al-roster tbody td:nth-child(8) {
    display: none;
  }

  .al-contact-card { width: 100vw; border-left-width: 2px; }
}

/* ────────────────────────── PRINT ────────────────────────────── */
@media print {
  .al-page { background: #fff; padding: 0; }
  .al-hero { border-color: #000; background: #fff; }
  .al-hero::before { display: none; }
  .al-btn, .al-tab-bar, .al-form__actions { display: none; }
  .al-card, .al-table-wrap, .al-row-list { border-color: #000; box-shadow: none; }
  .al-table thead th { border-bottom-color: #000; }
}

/* ══════════════════════ DARK MODE ══════════════════════════════════
   Strategy: re-tint the paper/ink token layer only. Every component
   already reads from these vars, so the cascade re-skins the whole
   module without touching individual rules. We preserve the legal
   aesthetic — warm dark brown-black "paper at night," cream "ink,"
   slightly brighter oxblood for legibility on dark surfaces.
   ─────────────────────────────────────────────────────────────── */
[data-theme-mode="dark"] {
  --al-paper:         #1C1A17;
  --al-paper-2:       #25221E;
  --al-paper-3:       #2D2924;
  --al-ink:           #ECE6D6;
  --al-ink-2:         #C9BFA8;
  --al-ink-3:         #968D78;
  --al-ink-4:         #6E6759;
  --al-hairline:      #3A352D;
  --al-hairline-soft: #2D2924;

  --al-accent:        #C24F4F;
  --al-accent-hover:  #D86060;
  --al-accent-deep:   #8A2828;
  --al-accent-soft:   rgba(194, 79, 79, 0.14);
  --al-accent-line:   rgba(194, 79, 79, 0.45);
  --al-cognac:        #B98559;
  --al-cognac-soft:   rgba(185, 133, 89, 0.14);

  --al-success:       #8FB07F;
  --al-success-soft:  rgba(143, 176, 127, 0.14);
  --al-warning:       #D4A656;
  --al-warning-soft:  rgba(212, 166, 86, 0.14);
  --al-danger:        #C24F4F;
  --al-danger-soft:   rgba(194, 79, 79, 0.14);
  --al-neutral-soft:  rgba(236, 230, 214, 0.06);
}

/* The hero block uses an SVG paper-grain noise overlay — fade it on
   dark surfaces so the grain reads as smoke, not static. */
[data-theme-mode="dark"] .al-hero::before { opacity: 0.18; }

/* Scrim over the contact card slide-out — darken further so the
   card stands cleanly off the page. */
[data-theme-mode="dark"] .al-contact-card__scrim { background: rgba(0, 0, 0, 0.55); }

/* Borders on inputs / selects that may have been set with rgba(0,0,0,…)
   in older rules — bump them to use the tokenized hairline so they
   stay visible on dark paper. */
[data-theme-mode="dark"] .al-input,
[data-theme-mode="dark"] .al-select,
[data-theme-mode="dark"] .al-textarea {
  background: var(--al-paper-2);
  color: var(--al-ink);
  border-color: var(--al-hairline);
}
[data-theme-mode="dark"] .al-input::placeholder,
[data-theme-mode="dark"] .al-textarea::placeholder { color: var(--al-ink-4); }

/* Bootstrap modal — neutralize the platform's white modal-content so
   AtlasLO modals match the paper-and-ink aesthetic in dark mode. */
[data-theme-mode="dark"] #alConflictsAttachModal .modal-content,
[data-theme-mode="dark"] #alConflictsManualClearModal .modal-content,
[data-theme-mode="dark"] #alRosterModal .modal-content,
[data-theme-mode="dark"] #alReportModal .modal-content {
  background: var(--al-paper);
  color: var(--al-ink);
  border: 1px solid var(--al-hairline);
}
[data-theme-mode="dark"] #alConflictsAttachModal .modal-header,
[data-theme-mode="dark"] #alConflictsManualClearModal .modal-header,
[data-theme-mode="dark"] #alRosterModal .modal-header,
[data-theme-mode="dark"] #alReportModal .modal-header,
[data-theme-mode="dark"] #alConflictsAttachModal .modal-footer,
[data-theme-mode="dark"] #alConflictsManualClearModal .modal-footer,
[data-theme-mode="dark"] #alRosterModal .modal-footer,
[data-theme-mode="dark"] #alReportModal .modal-footer {
  border-color: var(--al-hairline);
}
[data-theme-mode="dark"] #alConflictsAttachModal .btn-close,
[data-theme-mode="dark"] #alConflictsManualClearModal .btn-close,
[data-theme-mode="dark"] #alRosterModal .btn-close {
  filter: invert(1) opacity(0.7);
}

/* Bootstrap nav-tabs (used on /roster/) — recolor for dark paper. */
[data-theme-mode="dark"] #alRosterTabs { border-bottom-color: var(--al-hairline) !important; }
[data-theme-mode="dark"] #alRosterTabs .nav-link {
  color: var(--al-ink-3);
  background: transparent;
  border-color: transparent;
}
[data-theme-mode="dark"] #alRosterTabs .nav-link.active {
  color: var(--al-ink);
  background: var(--al-paper-2);
  border-color: var(--al-hairline) var(--al-hairline) var(--al-paper-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFLICTS CHECK — Verdict & Match Cards
   Dark-mode-safe classes replacing hard-coded hex in JS.
   ═══════════════════════════════════════════════════════════════════════════ */
.al-verdict {
  padding: 14px 18px;
  border-width: 2px;
  border-style: solid;
}
.al-verdict--clear {
  border-color: #1a7a3a;
  background: #e8f5ec;
  color: #0d3d1d;
}
.al-verdict--match {
  border-color: #a82018;
  background: #fbe9e7;
  color: #5a1810;
}
.al-verdict__title {
  font-size: 1.1rem;
  font-weight: 600;
}
.al-verdict__body {
  font-size: 0.85rem;
  margin-top: 4px;
}

.al-match-card {
  border-left: 3px solid #a82018;
  padding: 8px 10px 8px 12px;
  margin-bottom: 8px;
  background: #fff7f6;
}
.al-match-card__name {
  font-weight: 600;
  color: #5a1810;
}
.al-match-card__refs {
  font-size: 0.78rem;
  color: #666;
}

.al-match-pill--current { font-size: 0.65rem; border-color: #1a7a3a !important; color: #1a7a3a !important; }
.al-match-pill--former  { font-size: 0.65rem; border-color: #a82018 !important; color: #a82018 !important; }
.al-match-pill--legal   { font-size: 0.65rem; border-color: #5b2c1f !important; color: #5b2c1f !important; }
.al-match-pill--samg    { font-size: 0.65rem; border-color: #1a4480 !important; color: #1a4480 !important; }

/* Dark mode overrides */
[data-theme-mode="dark"] .al-verdict--clear {
  border-color: #7A8C6E;
  background: rgba(34, 197, 94, 0.08);
  color: #B5C5A8;
}
[data-theme-mode="dark"] .al-verdict--clear .al-verdict__body { color: #B5C5A8; }

[data-theme-mode="dark"] .al-verdict--match {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
}
[data-theme-mode="dark"] .al-verdict--match .al-verdict__body { color: #fca5a5; }

[data-theme-mode="dark"] .al-match-card {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}
[data-theme-mode="dark"] .al-match-card__name { color: #fca5a5; }
[data-theme-mode="dark"] .al-match-card__refs { color: var(--al-ink-3); }

[data-theme-mode="dark"] .al-match-pill--current { border-color: #7A8C6E !important; color: #7A8C6E !important; }
[data-theme-mode="dark"] .al-match-pill--former  { border-color: #ef4444 !important; color: #ef4444 !important; }
[data-theme-mode="dark"] .al-match-pill--legal   { border-color: #f97316 !important; color: #f97316 !important; }
[data-theme-mode="dark"] .al-match-pill--samg    { border-color: #C5B9A7 !important; color: #C5B9A7 !important; }