/* ==========================================================================
   panels.css — data panels for SeekFinData.html

   Sits on top of seekfindata.css. Reuses its tokens (--chip-bg, --chip-border,
   --shadow) and its palette rather than introducing a second visual language:
   navy #0021AD / #1e47a8, red #e8000d / #e23d3d, borders #e6ebf5.

   Charts render into <canvas>, which is invisible to crawlers and screen
   readers, so every chart is paired with a real text caption carrying the
   same claim. The caption is content, not a nicety.
   ========================================================================== */

:root{
  /* Series colours. Red is deliberately NOT in this ramp: in a financial
     chart red reads as "negative", and a peer whose line happened to be red
     would be misread as loss-making. Red stays on brand accents only.
     Lightness alone is a weak differentiator, so every series also gets a
     dash pattern (set in panels.js) as a second channel. */
  --pnl-s1:#0021AD;
  --pnl-s2:#4C7DF0;
  --pnl-s3:#9FB6FF;
  --pnl-grid:rgba(16,17,20,.08);
  --pnl-zero:rgba(226,61,61,.35);
  --pnl-ink-soft:rgba(16,17,20,.62);
}

/* ==========================================================================
   CONTAINMENT — must come before anything that sets an intrinsic width.

   The panels live in the 1fr column of .content-grid. A grid (or flex) item
   defaults to min-width:auto, which means it cannot shrink below its
   content's min-content width. .pnl-csv-table is width:max-content with
   nowrap cells across 17 columns, so that intrinsic width propagated up
   through the scroll box, the section card and the grid column, and pushed
   the whole right-hand column past the viewport — taking the series tabs,
   the chart's right edge and the captions off screen with it.

   overflow-x:auto only scrolls once the box is actually constrained, so the
   containment below is what makes it work. min-width:0 at every level from
   the grid column down.
   ========================================================================== */
.content-grid > *{ min-width:0; }
.content-grid .section-card{ min-width:0; max-width:100%; }
[data-panel]{ min-width:0; max-width:100%; }
[data-panel] > *{ min-width:0; max-width:100%; }
.pnl-li-grid > *{ min-width:0; }
.pnl-head, .pnl-chart-head, .pnl-stats, .pnl-csv-meta{ min-width:0; max-width:100%; }

/* The one box that is allowed to scroll rather than shrink. */
.pnl-csv-scroll{ max-width:100%; overflow-x:auto; }

/* ---- panel frame --------------------------------------------------------- */
/* Each panel gets its own card inside the section. Without it the live data
   ran flush into the surrounding prose, so the reader had no cue that the
   tabs, chart and caption were one interactive object rather than more page
   copy. Lighter than the parent .section-card so it reads as nested rather
   than as a sibling. */
[data-panel]{
  background:#fff;
  border:1px solid #e6ebf5;
  border-radius:18px;
  padding:clamp(14px,2.2vw,22px);
  margin-top:16px;
  box-shadow:0 4px 14px rgba(16,17,20,.045);
}
/* The empty/error state carries its own dashed frame; suppress it inside the
   card so the two borders do not nest. */
[data-panel] > .pnl-msg{
  border:0; background:transparent; padding:4px 0;
}
/* First child sits flush against the card padding. */
[data-panel] > .pnl-head{ margin-top:0; }

/* Chart.js sizes to its parent, so the parent must be bounded first. */
.pnl-chart-wrap{ max-width:100%; overflow:hidden; }
.pnl-chart-wrap > canvas{ max-width:100%; }

/* ---- panel head ---------------------------------------------------------- */
.pnl-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
}
.pnl-title{
  font-family:'Josefin Sans',system-ui,sans-serif;
  font-weight:700; font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:#0021AD; line-height:1.25;
}
.pnl-sub{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.9rem; color:var(--pnl-ink-soft); margin-top:2px;
}

/* ---- tab / toggle pills -------------------------------------------------- */
.pnl-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.pnl-tab{
  appearance:none; cursor:pointer;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.82rem; font-weight:600; letter-spacing:.2px;
  padding:.45rem .85rem; border-radius:999px;
  background:#fff; border:1px solid var(--chip-border,#e2ebff); color:#18305a;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.pnl-tab:hover{ background:#f3f7ff; }
.pnl-tab[aria-selected="true"]{
  background:#eaf1ff; color:#0b2a6f;
  box-shadow:inset 0 0 0 1px #dbe6ff;
}
.pnl-tab:focus-visible{ outline:2px solid #0021AD; outline-offset:2px; }

/* ---- shuffle ------------------------------------------------------------- */
.pnl-shuffle{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.82rem; font-weight:600;
  padding:.45rem .9rem; border-radius:999px;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(90deg,#1e47a8,#e23d3d) border-box;
  border:1.5px solid transparent; color:#18213d;
  transition:transform .18s ease, box-shadow .18s ease;
}
.pnl-shuffle:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(16,17,20,.09); }
.pnl-shuffle:focus-visible{ outline:2px solid #0021AD; outline-offset:2px; }

/* ---- chart header -------------------------------------------------------- */
/* Names what is actually plotted. The panel title carries the subject
   (a company, an industry); this carries the measure, its units and its
   source — so a chart lifted out of context still says what it is. */
.pnl-chart-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:0 0 9px; margin-top:6px;
  border-bottom:1px solid #eef2f9;
}
.pnl-metric{
  font-family:'Josefin Sans',system-ui,sans-serif;
  font-weight:700; font-size:1rem; letter-spacing:.2px; color:#18213d;
  display:inline-flex; align-items:center; gap:9px;
  min-width:0; overflow-wrap:anywhere;
}
/* Short navy→red tick borrowed from the nav underline, tying the chart
   header to the site's existing accent device rather than inventing one. */
.pnl-metric::before{
  content:''; width:16px; height:3px; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(90deg,#1e47a8,#e23d3d);
}
.pnl-meta{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.78rem; font-weight:600; letter-spacing:.3px;
  color:var(--pnl-ink-soft); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.pnl-meta span + span::before{
  content:'·'; margin-right:8px; color:rgba(16,17,20,.28);
}

/* ---- chart frame --------------------------------------------------------- */
.pnl-chart-wrap{
  position:relative; height:340px; margin-top:10px;
}
@media (max-width:640px){ .pnl-chart-wrap{ height:260px; } }

/* ---- caption ------------------------------------------------------------- */
/* The caption is content, not a footnote: it is what a crawler and a screen
   reader get instead of the canvas, and often the first thing a skimming
   visitor reads. Given weight accordingly — a tinted panel with the brand
   gradient down its edge, set larger and looser than body copy. */
.pnl-caption{
  position:relative;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:1.02rem; line-height:1.7; color:#16233f;
  margin-top:18px; padding:14px 18px 14px 20px;
  background:linear-gradient(180deg,#fbfcff,#f6f9ff);
  border:1px solid var(--chip-border,#e2ebff);
  border-radius:14px; overflow:hidden;
}
.pnl-caption::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#1e47a8,#e23d3d);
}
/* Figures inside the caption are the point of the sentence; let them read as
   data rather than as running prose. */
.pnl-caption strong{
  font-weight:700; color:#0021AD; font-variant-numeric:tabular-nums;
}

/* ---- notes --------------------------------------------------------------- */
/* Qualifiers, deliberately quieter than the caption. Two levels of emphasis
   is the whole reason caption and caption_notes are separate fields. */
.pnl-notes{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.pnl-note{
  position:relative;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.85rem; line-height:1.6; color:var(--pnl-ink-soft);
  padding-left:26px;
}
.pnl-note::before{
  content:'\f05a'; /* circle-info */
  font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; left:4px; top:1px;
  font-size:.82rem; color:#9fb6ff;
}

/* ---- tag chips ----------------------------------------------------------- */
/* The raw XBRL tag under each chart. On most products this would be clutter;
   here tag-level access IS the product, so showing the element name is a
   demonstration of granularity a summary-level competitor cannot match. */
.pnl-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.pnl-tags-label{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.76rem; font-weight:600; color:var(--pnl-ink-soft);
  text-transform:uppercase; letter-spacing:.6px;
}
.pnl-tag{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.74rem; padding:.28rem .6rem; border-radius:6px;
  background:var(--chip-bg,#f6f9ff); border:1px solid var(--chip-border,#e2ebff);
  color:#1b2440; word-break:break-all;
}

/* ---- headline stat strip (coverage panel) -------------------------------- */
.pnl-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin-bottom:18px;
}
.pnl-stat{
  background:var(--chip-bg,#f6f9ff); border:1px solid var(--chip-border,#e2ebff);
  border-radius:12px; padding:12px 14px;
}
.pnl-stat-n{
  font-family:'Josefin Sans',system-ui,sans-serif;
  font-weight:700; font-size:clamp(1.15rem,2vw,1.5rem); color:#0021AD;
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.pnl-stat-l{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.78rem; color:var(--pnl-ink-soft); margin-top:4px; line-height:1.35;
}

/* ---- footer row: freshness + CTA ----------------------------------------- */
.pnl-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-top:16px;
  padding-top:14px; border-top:1px solid #eef2f9;
}
.pnl-through{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.82rem; color:var(--pnl-ink-soft);
}
.pnl-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.88rem; font-weight:700; text-decoration:none;
  padding:.5rem 1rem; border-radius:999px;
  background:#0021AD; color:#fff;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pnl-cta:hover{ background:#001a8a; transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,33,173,.22); }
.pnl-cta:focus-visible{ outline:2px solid #e8000d; outline-offset:2px; }

/* ---- loading / empty / error --------------------------------------------- */
.pnl-skeleton{
  height:340px; border-radius:14px;
  background:linear-gradient(100deg,#f4f7fd 30%,#eaf1ff 50%,#f4f7fd 70%);
  background-size:200% 100%; animation:pnl-shimmer 1.4s linear infinite;
}
@media (max-width:640px){ .pnl-skeleton{ height:260px; } }
@keyframes pnl-shimmer{ to{ background-position:-200% 0; } }

.pnl-msg{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.95rem; line-height:1.6; color:var(--pnl-ink-soft);
  background:var(--chip-bg,#f6f9ff); border:1px dashed var(--chip-border,#e2ebff);
  border-radius:14px; padding:22px;
}
.pnl-msg a{ color:#0021AD; font-weight:600; }

/* Screen-reader-only table accompanying each canvas. Canvas content is
   invisible to assistive tech, so the numbers exist in the DOM as well. */
.pnl-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* The page background already runs three blurred spheres, a pulsing glow and
   a noise layer on continuous animation. Chart entry animation is kept short
   in panels.js and removed entirely here for reduced-motion users. */
@media (prefers-reduced-motion:reduce){
  .pnl-skeleton{ animation:none; }
  .pnl-shuffle:hover, .pnl-cta:hover{ transform:none; }
}

/* ---- line-item panel (Panel 4) ------------------------------------------- */
/* One XBRL tag, the many labels filers give it, and real reported values.
   Laid out as two columns because those are two different kinds of evidence:
   vocabulary spread on the left, actual data on the right. */
.pnl-li-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:20px; margin-top:14px;
}
@media (max-width:820px){ .pnl-li-grid{ grid-template-columns:1fr; gap:16px; } }

.pnl-li-col-h{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.76rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--pnl-ink-soft); margin-bottom:10px;
}

/* Labels as stacked rows rather than chips: these are sentences filers wrote,
   and chipping them would imply they are short keywords. */
.pnl-li-labels{ display:flex; flex-direction:column; gap:7px; }
.pnl-li-label{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 12px; border-radius:10px;
  background:#fff; border:1px solid #eef2f9;
}
.pnl-li-label-t{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.9rem; color:#16233f; line-height:1.4;
  min-width:0; overflow-wrap:anywhere;
}
.pnl-li-label-n{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem; color:var(--pnl-ink-soft); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.pnl-li-values{ display:flex; flex-direction:column; gap:7px; }
.pnl-li-value{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 12px; border-radius:10px;
  background:var(--chip-bg,#f6f9ff); border:1px solid var(--chip-border,#e2ebff);
}
.pnl-li-co{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.88rem; font-weight:600; color:#16233f;
  min-width:0; overflow-wrap:anywhere;
}
.pnl-li-v{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.84rem; color:#0021AD; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.pnl-li-yr{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.72rem; color:var(--pnl-ink-soft); margin-left:6px;
}

/* Element documentation, straight from the taxonomy. */
.pnl-li-doc{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.84rem; line-height:1.6; color:var(--pnl-ink-soft);
  margin-top:12px; padding-left:12px; border-left:2px solid #e2ebff;
}
.pnl-li-doc em{ font-style:normal; font-weight:600; color:#18305a; }

/* ---- section head above each panel --------------------------------------- */
/* Lives in the HTML, not in JS, so the explanation survives a failed fetch or
   a blocked CDN: the reader still learns what was meant to be here. */
.pnl-section-head{ margin:26px 0 4px; }
.pnl-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  background:var(--chip-bg,#f6f9ff); border:1px solid var(--chip-border,#e2ebff);
  color:#1b2440; padding:6px 11px; border-radius:999px;
}
.pnl-eyebrow i{ color:#e23d3d; font-size:.78rem; }
.pnl-h{
  font-family:'Josefin Sans',system-ui,sans-serif;
  font-weight:700; font-size:clamp(1.15rem,2vw,1.4rem);
  color:#0021AD; margin:10px 0 0; line-height:1.3;
}
.pnl-lead{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.98rem; line-height:1.65; color:#3a4256; margin:6px 0 0; max-width:64ch;
}

/* ---- CSV preview (Panel 5) ----------------------------------------------- */
/* The literal file a subscriber downloads. Values are shown exactly as the
   export writes them — unformatted integers, raw tag names — because the
   point is what lands in Excel, not a prettified version of it. */
.pnl-csv-meta{
  display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 10px;
}
.pnl-csv-pill{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.76rem; font-weight:600; color:#18305a;
  background:#fff; border:1px solid #e6ebf5; border-radius:999px; padding:5px 11px;
}
.pnl-csv-pill b{ color:#0021AD; font-variant-numeric:tabular-nums; }

.pnl-csv-scroll{
  overflow-x:auto; border:1px solid #e6ebf5; border-radius:12px; background:#fff;
  -webkit-overflow-scrolling:touch;
}
.pnl-csv-table{ border-collapse:collapse; width:max-content; min-width:100%; }
.pnl-csv-table th{
  position:sticky; top:0;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:#18305a; background:#f5f8ff; text-align:left;
  padding:9px 12px; border-bottom:1px solid #e6ebf5; white-space:nowrap;
}
.pnl-csv-table td{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.74rem; color:#16233f; padding:8px 12px;
  border-top:1px solid #f2f5fb; white-space:nowrap;
}
.pnl-csv-table tr:nth-child(even) td{ background:#fcfdff; }
.pnl-csv-table td.num{ text-align:right; font-variant-numeric:tabular-nums; color:#0021AD; }
.pnl-csv-table td.lab{ font-family:'Work Sans',system-ui,sans-serif; font-size:.8rem; }
.pnl-csv-table td a{ color:#0021AD; }
.pnl-csv-scrollhint{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.76rem; color:var(--pnl-ink-soft); margin-top:8px;
}

/* Sub-label under each line-item column heading. The columns are not
   self-explanatory — one is vocabulary, the other is data — so each says
   what it contains and how it is ordered. */
.pnl-li-col-note{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.78rem; line-height:1.45; color:var(--pnl-ink-soft);
  margin:-6px 0 10px;
}

/* Two-item legend explaining the line-item table. A list rather than prose
   because it maps one-to-one onto what the reader is looking at, and the
   previous paragraph form made people hunt for which half was which. */
.pnl-legend{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px; max-width:64ch;
}
.pnl-legend li{
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.95rem; line-height:1.6; color:#3a4256;
  padding-left:14px; border-left:2px solid #e2ebff;
}
.pnl-legend-k{
  display:inline-block; margin-right:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:#0021AD;
}