/* ==========================================================================
   Lucosky Brookman — Firm Intelligence, shared report layer
   --------------------------------------------------------------------------
   One stylesheet for every report. Holds ONLY what cannot be an inline style:
   token definitions, resets, focus, responsive overrides, print, keyframes.
   Component styling stays inline on the element, as before.

   Load after the design system:
     <link rel="stylesheet" href="_ds/…/colors_and_type.css">
     <link rel="stylesheet" href="firm.css">
   ========================================================================== */

:root {
  /* ---- Status colour: five jobs, no sixth ------------------------------- */
  /* Mapped onto the design system's own tokens. Reports must use these five
     and nothing else. Retires: #3FB579, #6FD79E, #1F8A5B, #9B3535, #B22625,
     and the six per-group directory accents. */
  --st-good:        var(--status-success, #2F7A4D);
  --st-bad:         var(--status-danger,  #A5322B);
  --st-attention:   var(--lb-gold,        #FFC101);
  --st-neutral:     var(--lb-navy,        #1A3E6E);
  --st-quiet:       var(--lb-slate,       #B6BFCE);

  /* On navy, the same five lightened to hold contrast against #132E52. */
  --st-good-dark:   #7FD3A6;
  --st-bad-dark:    #E99A93;
  --st-fill-dark:   #4E9E77;
  --st-quiet-dark:  #9FB2CE;

  /* ---- Report chrome: one header, one height ---------------------------- */
  --chrome-h:       52px;   /* shell bar */
  --chrome-logo:    18px;   /* logo in the shell bar */
  --chrome-rule:    2px;    /* gold rule under any navy bar */
  --title-size:     26px;   /* Barlow Condensed, uppercase, gold period */

  /* ---- Layout ----------------------------------------------------------- */
  /* ONE measure for every report: masthead, grey subbar and body all align to it.
     Modelled on Today's Agenda. Change here and all fifty reports follow. */
  --page-w:         1180px;
  --page-pad:       clamp(20px, 5vw, 48px);
  --marker-w:       44px;   /* section marker bar — one width everywhere */
}

/* The measure grows with the display. Below 1500px nothing changes; above it the
   banner, the grey subbar and the body all widen together, so a full-screen monitor
   is filled rather than showing a narrow column in a sea of navy. Prose stays
   readable because lead paragraphs and decks carry their own ch limits. */
@media (min-width: 1500px) { :root { --page-w: 1360px; } }
@media (min-width: 1800px) { :root { --page-w: 1560px; } }
@media (min-width: 2100px) { :root { --page-w: 1760px; } }
@media (min-width: 2500px) { :root { --page-w: 1960px; } }
@media (min-width: 1500px) { :root { --page-pad: 56px; } }
@media (min-width: 2100px) { :root { --page-pad: 64px; } }

/* ==========================================================================
   The masthead system — navy band, grey control subbar, aligned body.
   Reports use these three classes so the geometry cannot drift again.
   ========================================================================== */

/* Navy band. Title, eyebrow and deck live inside .fi-head-in. */
.fi-head {
  background: var(--lb-navy-deep, #132E52);
  color: #FFFFFF;
  border-bottom: var(--chrome-rule) solid var(--lb-gold, #FFC101);
  padding: 24px var(--page-pad) 20px;
}
.fi-head-in,
.fi-sub-in,
.fi-wrap-in { max-width: var(--page-w); margin: 0 auto; }

/* Title row: identity left, actions right, both baselines meeting. */
.fi-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.fi-eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.17em;
  text-transform: uppercase; color: #9FB2CE; margin-bottom: 11px;
}
.fi-title {
  margin: 0; font-family: var(--font-condensed), 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 34px; line-height: 0.98;
  text-transform: uppercase; letter-spacing: 0.01em; color: #FFFFFF;
}
.fi-deck { font-size: 13.5px; line-height: 1.5; color: #C7D6EA; margin-top: 7px; max-width: 74ch; }

/* Grey control subbar — searches, filters, chips, scope pickers. */
.fi-sub {
  background: #F7F9FB;
  border-bottom: 1px solid var(--lb-mist, #E7E7E7);
  padding: 11px var(--page-pad);
}
.fi-sub-in { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.fi-sub-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: #5B6472; flex: none;
}

/* Body, aligned to the same measure. */
.fi-wrap { padding: 0 var(--page-pad) 56px; }

@media (max-width: 760px) {
  /* Lucosky Litigation Originations: the five-track client/matter rows stack on a phone. */
  .jl-head { display: none !important; }
  .jl-row, .jl-sub { grid-template-columns: 1fr 1fr !important; gap: 4px 10px !important; }
  .jl-row > div:first-child, .jl-sub > div:first-child { grid-column: 1 / -1 !important; }

  /* Master Reporting Schedule: name, cadence, timing and tag stack rather than
     squeezing five tracks into a phone width. */
  .sch-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .sch-row > div:first-child { display: none !important; }
  .sch-row > div:nth-child(5) { text-align: left !important; }

  .fi-head { padding: 20px var(--page-pad) 18px; }
  .fi-title { font-size: 28px; }
}
@media print {
  .fi-head {
    background: #FFFFFF !important; color: var(--lb-ink, #212121) !important;
    border-bottom: 2px solid var(--lb-ink, #212121) !important; padding: 0 0 8px !important;
  }
  .fi-title, .fi-eyebrow, .fi-deck { color: var(--lb-ink, #212121) !important; }
  .fi-sub { display: none !important; }
  .fi-head-in, .fi-sub-in, .fi-wrap-in { max-width: none !important; }
  .fi-wrap { padding: 0 !important; }
}

/* ---- Reset ------------------------------------------------------------- */
html, body { margin: 0; padding: 0; }
body {
  background: var(--lb-paper, #FFFFFF);
  color: var(--lb-ink, #212121);
  font-family: var(--font-sans, 'Barlow', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

/* ---- Links: gold-deep on hover, per the design system ------------------ */
a { color: var(--fg-link, #1A3E6E); text-decoration: none; }
a:hover { color: var(--fg-link-hover, #C2940B); }

/* ---- Focus: 2px gold, 2px offset, always visible ---------------------- */
:focus-visible {
  outline: 2px solid var(--lb-gold, #FFC101);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--lb-gold, #FFC101);
  outline-offset: 2px;
}

/* ---- Numerals ---------------------------------------------------------- */
/* Tabular by default. This is a financial reporting product: every column of money,
   every KPI and every date should hold its columns as digits change. Set once here
   rather than annotated onto thousands of elements across fifty reports. */
body { font-variant-numeric: tabular-nums; }
[data-num], .num, table, td, th,
input[type="number"] { font-variant-numeric: tabular-nums; }
/* Opt back out where proportional figures read better — long prose passages. */
[data-prose], [data-prose] * { font-variant-numeric: normal; }

/* ---- The signature hover: navy rule sliding in from the left ---------- */
.slide-rule {
  background-image: linear-gradient(var(--lb-navy, #1A3E6E), var(--lb-navy, #1A3E6E));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 200ms ease-out;
  padding-bottom: 2px;
}
.slide-rule:hover, a:hover > .slide-rule { background-size: 100% 2px; }

/* ---- Card raise -------------------------------------------------------- */
.raise { transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
.raise:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(19, 46, 82, 0.14); }

/* ---- Skeleton, for pages that fetch ----------------------------------- */
@keyframes lbPulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } }
.skeleton {
  background: var(--lb-mist, #E7E7E7);
  animation: lbPulse 1.4s ease-in-out infinite;
  color: transparent !important;
}

/* ---- Shared keyframes ------------------------------------------------- */
@keyframes lbRise { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
@keyframes lbFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes lbRule { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ==========================================================================
   Responsive — replaces the thirty-rule block pasted into every report.
   Reports opt in with data attributes instead of bespoke class names.
     data-cols   → collapses to one column on phones
     data-cols2  → collapses 3-up/4-up to 2-up on tablets, 1-up on phones
     data-pad    → page gutter shrinks
     data-shrink → display type steps down
     data-first  → jumps this block above its siblings on phones
   ========================================================================== */
@media (max-width: 1080px) {
  [data-cols2] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-pad] { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 820px) {
  [data-cols], [data-cols2] { grid-template-columns: 1fr !important; }
  [data-pad] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-shrink] { font-size: 30px !important; }
  [data-split] { grid-template-columns: 1fr !important; }
  [data-split] > [data-split-left] { border-right: none !important; border-bottom: 1px solid var(--lb-mist, #E7E7E7) !important; }
  [data-stack] { display: flex !important; flex-direction: column !important; }
  [data-first] { order: -1 !important; }
}

/* ==========================================================================
   Phone catch-alls — the safety net (restored 7/31/26 from the archived rule).
   The opt-in attributes above only fire on pages that carry them, which is the
   exact fragility the original standing rule was hardened against: a renamed
   class or a missing attribute silently kills the phone layout. These rules are
   LAYOUT-AGNOSTIC — they work off inline styles and tag names, so they hold on
   any page whether or not it opted in. Scoped to <=760px, so desktop is
   untouched, and the shell's own chrome is excluded (it has its own rules).
   ========================================================================== */
@media (max-width: 760px) {
  body { overflow-x: hidden; }

  /* Any inline grid collapses to one column; children may not force width. */
  [style*="grid-template-columns"]:not(#bar):not(#pal):not(#stage) { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] > * { min-width: 0 !important; }

  /* Any inline flex row may wrap, and nothing may hold a min-width open. */
  [style*="display:flex"]:not(#bar):not(.fi-sub-in), [style*="display: flex"]:not(#bar):not(.fi-sub-in) { flex-wrap: wrap !important; }
  [style*="min-width"]:not(#bar):not(#pal) { min-width: 0 !important; }

  /* Display type steps DOWN only, never up. The guards exempt any heading whose
     authored size already starts with 1 or 2 (10–29px) — this project uses small
     semantic headings as section labels, and forcing those UP inverts the type
     hierarchy on the very surface this block exists to protect. Both spacing
     variants of the inline declaration are covered. */
  h1:not(.name):not([style*="font-size:1"]):not([style*="font-size: 1"]):not([style*="font-size:2"]):not([style*="font-size: 2"]) {
    font-size: 28px !important; line-height: 1.05 !important;
  }
  h2:not([style*="font-size:1"]):not([style*="font-size: 1"]):not([style*="font-size:2"]):not([style*="font-size: 2"]) {
    font-size: 24px !important; line-height: 1.1 !important;
  }
  h3:not([style*="font-size:1"]):not([style*="font-size: 1"]):not([style*="font-size:2"]):not([style*="font-size: 2"]) {
    font-size: 18px !important;
  }

  /* Page gutters. */
  section, header, footer, main { padding-left: 20px !important; padding-right: 20px !important; }
  #stage, #viewer, #bar, #missing { padding-left: 0 !important; padding-right: 0 !important; }

  /* Hit targets. Selects need `appearance:none` first — WebKit ignores author
     height/min-height on a menulist control, so the rule silently did nothing
     (66 21px-tall selects on Revenue Projection alone). Resetting appearance
     drops the native chevron, so one is drawn back in as a background image. */
  button:not(#print):not(.ghost), summary, [role="button"],
  input:not([type="checkbox"]):not([type="radio"]), textarea {
    min-height: 44px !important;
  }
  select {
    -webkit-appearance: none !important; appearance: none !important;
    min-height: 44px !important;
    padding: 0 30px 0 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6472' stroke-width='1.6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px 6px !important;
  }

  /* A sticky control bar is right on a desktop and wrong on a phone: it wraps to
     three or four rows and then permanently occupies half the screen. Unstick the
     page-level chrome bars only — sticky table headers and frozen first columns
     live inside their own scrollers and carry no data-noprint, so they stay. */
  [data-noprint="1"][style*="position:sticky"],
  [data-noprint="1"][style*="position: sticky"] {
    position: static !important;
    box-shadow: none !important;
  }

  /* Wide tables scroll rather than blow out the viewport. */
  table { display: block !important; overflow-x: auto !important; max-width: 100% !important; }

  img, svg, canvas { max-width: 100% !important; height: auto; }
  * { overflow-wrap: anywhere; }


  /* Fixed-width layout blocks — option canvases, mockup frames — must yield. */
  [style*="width:760px"], [style*="width: 760px"] { width: 100% !important; }
  [style*="flex:none"], [style*="flex: none"] { flex: 0 1 auto !important; }
}

/* A <doc-page> is a letter-width paper box (8.5in / 816px). It needs the reflow
   treatment on any screen narrower than the sheet plus its desk margin, which is
   wider than the phone breakpoint — tablets hit it too. --doc-page-w inherits into
   the component's shadow root; the host's own min-width defaults to max-content.
   Screen only: print geometry is the component's business. */
@media screen and (max-width: 940px) {
  doc-page {
    --doc-page-w: calc(100vw - 60px) !important;
    padding: 16px 12px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   Print — partners forward these. Every report is printable, not just two.
   ========================================================================== */
@media print {
  @page { margin: 12mm; }
  html, body { background: #FFFFFF !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  [data-noprint], [data-noprint] * { display: none !important; }
  /* Controls are chrome, not content: a forwarded report should not carry its own
     filter bar, search field or buttons. Opt an individual control back in with
     data-print-keep when it carries meaning on paper. */
  button:not([data-print-keep]),
  input:not([data-print-keep]),
  select:not([data-print-keep]),
  [role="button"]:not([data-print-keep]) { display: none !important; }
  a { color: var(--lb-ink, #212121) !important; text-decoration: none !important; }
  [data-page-break] { break-before: page; page-break-before: always; }
  [data-keep], tr, li { break-inside: avoid; page-break-inside: avoid; }
  [data-split], [data-cols], [data-cols2] { display: block !important; }
  [data-print-wide] { max-width: none !important; }
  .raise:hover { transform: none !important; box-shadow: none !important; }
  .skeleton { animation: none !important; }
}

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-curtain] { display: none !important; }
}