/* =============================================================================
   08-print.css, Print stylesheet for the dashboard library.
   Triggers when the user hits Cmd/Ctrl+P or clicks the ⎙ button. Browsers'
   built-in "Save as PDF" produces a clean institutional-memo-style document.

   Design intent:
   - Hide the interactive chrome (sidebar, toggles, sticky header, sliders, AI widget)
   - Force the slide-mode collapse off (every section visible)
   - Restyle to single-column 8.5×11 with reliable page breaks
   - Force light backgrounds + inked text regardless of the user's dark-mode toggle
   - Keep every chart and table, analysts want the data, not a marketing brochure

   To preview without printing:
     - Chrome: DevTools → ⋮ → "More tools" → "Rendering" → emulate "print"
     - Firefox: File → Print Preview
   ============================================================================= */

@page {
  size: letter;
  margin: 0.55in 0.5in 0.6in 0.5in;
}

@media print {
  /* ===== Force light theme + color fidelity for print ======================
     The print button in the header strips body.dark BEFORE snapshotting
     charts (navigation.js bindPrintButton). But Ctrl/Cmd+P bypasses that JS
     path entirely, so inline style="background:var(--accent-soft)" or
     style="color:var(--accent)", common in hero KPI cells across dashboards
    , leak the dark-mode values. Re-pin the theme variables to safe light
     anchors INSIDE @media print so the keyboard-print path is also safe.
     Per-dashboard theme.css accent (red/green/blue/burgundy) still wins for
     the accent colors; we only neutralize backgrounds + greyscale neutrals. */
  :root, body, body.dark {
    --bg: #ffffff;
    --panel: #fafafa;
    --ink: #1c1a17;
    --muted: #56514a;
    --line: #c5c5c5;
    --chip: #f0ede5;
    --accent-soft: #f0ede5;
  }
  html, body, body.dark {
    background: #fff !important;
    color: #1c1a17 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
  body {
    font-size: 10pt;
    line-height: 1.45;
    font-family: Georgia, "Times New Roman", serif;
  }

  /* ===== Hide all interactive chrome =====
     NOTE: .top-row is intentionally NOT in this list. The ticker / company /
     pill / asOf-stamp live inside the FIRST .top-row; only the SECOND .top-row
     (controls cluster) should hide, that selector is below.
     NOTE: .calc-grid is NOT hidden because it wraps every .calc card (PT calc,
     EV/Sales model output, R/R output), interactive controls inside it are
     hidden individually via .calc-row input rules. */
  .menu-toggle,
  .top-controls,
  .toggle-btn,
  .lib-btn,
  .slide-nav,
  .slide-progress-bar,
  .overview,
  .overview-grid,
  .back-to-top,
  nav.side,
  .ov-close,
  .ov-hint,
  .ai-widget,
  .ai-row,
  .ai-examples,
  textarea#aiQuestion,
  #aiSubmit,
  #aiResponse,
  #aiError,
  #aiMeta,
  #aiStatusBadge,
  #aiCharCount,
  .calc-row input[type="range"],
  .prob-matrix,
  .chart-controls,
  .tabs,
  .tab-btn,
  .drop-all,
  .drop-allrow,
  .drop-chev,
  #tourBtn,
  #tourCaption,
  #priceBrush,
  /* Hide ONLY the controls .top-row (second one, the one whose inline style
     has `margin-left:auto`). Ticker/company/pill/stamp live in the FIRST. */
  header.top > .top-row:nth-of-type(2),
  /* Hub-only elements when printing the hub */
  #atAGlance,
  #thesisGraph,
  .top-segments,
  .rating-strip,
  .clear-btn,
  #search,
  #searchInput,
  .hero .cta-row {
    display: none !important;
  }
  /* Force .calc-grid to single-column print layout (was previously hidden, killing the model) */
  .calc-grid {
    display: block !important;
  }

  /* Range sliders look terrible in print, always hide globally so they can't
     leak even from dashboards that nest them outside .calc-row (SMCI). */
  input[type="range"] { display: none !important; }
  /* Number inputs (R/R entry/target/stop on AVGO etc.), keep visible but
     render as inline text so the typed value prints next to the label. */
  input[type="number"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 0 4pt !important;
    margin: 0 !important;
    font: inherit !important;
    font-weight: 700 !important;
    color: #1c1a17 !important;
    width: auto !important;
    display: inline !important;
  }

  /* ===== Hide all chart visualizations in print ============================
     Decision (Jun 2026): Chart.js canvases do not render reliably across the
     print pipeline, snapshot timing, label color, axis-tick truncation, and
     forward-period bars all diverge from screen rendering. Institutional
     research PDFs work better with prose + tables + KPI cards anyway. Hide
     every chart container so the analytical text remains the source of truth
     in print. Screen view is unaffected.

     The :has(canvas) qualifier preserves containers that re-use the same
     class names but hold non-chart content, e.g. MU's Support/Resistance
     table card and IONQ's "Why it matters" text card both use .chart-card
     for layout but contain no canvas, so they MUST stay visible. */
  canvas,
  img.chartjs-print-snapshot,
  .chart-card:has(canvas),
  .chart-row:has(canvas),
  .chart-wrap:has(canvas) {
    display: none !important;
  }

  /* ===== Defeat slide-mode collapse so every section is visible ===== */
  body.slide-mode .hero,
  body.slide-mode footer.site-footer,
  body.slide-mode main > section.block,
  body.slide-mode main > section.sources {
    display: block !important;
  }

  /* ===== Page layout: single column, no sidebar ===== */
  .layout {
    display: block !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
  }

  /* ===== Sticky header collapses to a single-line ribbon strip ===== */
  header.top {
    position: static !important;
    box-shadow: none !important;
    border-bottom: 1.5pt solid #1c1a17 !important;
    background: #fff !important;
    padding: 0 0 6pt !important;
    margin: 0 0 12pt !important;
    display: block !important;
  }
  header.top .ticker {
    font-family: Georgia, serif;
    font-size: 14pt;
    font-weight: 700;
    color: #1c1a17 !important;
    margin-right: 8pt;
  }
  header.top .company {
    font-family: Georgia, serif;
    font-size: 11pt;
    color: #56514a !important;
  }
  header.top .pill {
    display: inline-block !important;
    border: 0.5pt solid #1c1a17;
    padding: 1pt 6pt;
    margin: 0 6pt 0 8pt;
    font-size: 8.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4pt;
    color: #1c1a17 !important;
    background: #fff !important;
  }
  header.top .stamp {
    font-size: 8.5pt;
    color: #56514a !important;
  }
  header.top .ribbon {
    display: flex !important;
    gap: 12pt;
    margin-top: 6pt;
    padding-top: 4pt;
    border-top: 0.5pt solid #ccc;
    flex-wrap: wrap;
    font-size: 9pt;
  }
  header.top .ribbon .kv {
    display: inline-flex !important;
    gap: 3pt;
  }
  header.top .ribbon .lbl {
    color: #56514a !important;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    font-size: 7.5pt;
  }
  header.top .ribbon .val {
    font-weight: 700;
    color: #1c1a17 !important;
  }

  /* ===== Hero block (Executive Summary header) becomes the cover ===== */
  .hero {
    padding: 0 0 12pt !important;
    border-bottom: 1.5pt solid #1c1a17;
    margin-bottom: 14pt;
    text-align: left !important;
  }
  .hero .eyebrow {
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 1.5pt;
    color: #56514a !important;
    margin-bottom: 4pt;
  }
  .hero h1 {
    font-family: Georgia, serif;
    font-size: 24pt;
    font-weight: 700;
    line-height: 1.15;
    margin: 4pt 0 8pt;
    color: #1c1a17 !important;
  }
  .hero .lede {
    font-size: 11pt;
    line-height: 1.5;
    color: #1c1a17 !important;
    margin: 4pt 0 8pt;
  }
  .hero .byline {
    font-size: 8.5pt;
    color: #56514a !important;
    margin: 4pt 0 8pt;
    line-height: 1.5;
  }
  .hero-stats {
    display: flex !important;
    gap: 18pt;
    border-top: 0.5pt solid #ccc;
    border-bottom: 0.5pt solid #ccc;
    padding: 8pt 0;
    margin: 8pt 0 0;
    flex-wrap: wrap;
  }
  .hero-stat .num {
    font-family: Georgia, serif;
    font-size: 16pt;
    font-weight: 700;
    color: #1c1a17 !important;
    line-height: 1;
  }
  .hero-stat .lbl {
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.8pt;
    color: #56514a !important;
    margin-top: 2pt;
  }

  /* ===== Typography ===== */
  h1, h2, h3, h4, h5 {
    color: #1c1a17 !important;
    page-break-after: avoid;
    break-after: avoid;
  }
  h2 {
    font-family: Georgia, serif;
    font-size: 14pt;
    margin: 18pt 0 6pt;
    padding: 0 0 3pt;
    border-bottom: 1pt solid #1c1a17;
    page-break-before: auto;
  }
  h3 {
    font-family: Georgia, serif;
    font-size: 11.5pt;
    margin: 12pt 0 4pt;
    color: #1c1a17 !important;
  }
  h4 {
    font-family: Georgia, serif;
    font-size: 10pt;
    margin: 8pt 0 4pt;
    color: #1c1a17 !important;
  }
  .sub {
    font-size: 9pt;
    color: #56514a !important;
    font-style: italic;
    margin-bottom: 6pt;
  }
  p { margin: 4pt 0 6pt; font-size: 10pt; }
  ul, ol { margin: 4pt 0 6pt 14pt; padding: 0; }
  li { margin-bottom: 2pt; font-size: 9.5pt; }
  strong, b { font-weight: 700; color: #1c1a17 !important; }
  sup.fn a {
    font-size: 7pt;
    color: #56514a !important;
    text-decoration: none;
  }

  /* ===== Section blocks ===== */
  section.block {
    padding: 0 !important;
    margin: 0 0 6pt !important;
    page-break-inside: auto;
  }
  section.sources {
    page-break-before: always;
    padding: 0 !important;
  }

  /* ===== Charts ===== */
  .chart-row {
    display: block !important;
  }
  .chart-card {
    border: 0.5pt solid #ccc !important;
    background: #fafafa !important;
    padding: 6pt 8pt !important;
    margin: 6pt 0 8pt !important;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  .chart-card h4 {
    margin: 0 0 4pt !important;
    font-size: 9.5pt !important;
  }
  .chart-wrap {
    height: 200pt !important;
    max-height: 200pt !important;
    width: 100% !important;
  }
  canvas {
    max-height: 200pt !important;
    height: auto !important;
    width: 100% !important;
  }
  /* PNG snapshot of each Chart.js canvas, swapped in by navigation.js bindPrintButton
     on `beforeprint`, bulletproof against Chart.js layout-resize timing issues. */
  img.chartjs-print-snapshot {
    display: block !important;
    width: 100% !important;
    max-height: 200pt !important;
    height: auto !important;
    margin: 0 auto !important;
    page-break-inside: avoid;
  }

  /* ===== Tables, aggressive sizing prevents column spill on letter paper ===== */
  table.fin {
    font-size: 7.5pt !important;
    line-height: 1.25;
    border-collapse: collapse;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;   /* equal column widths, prevents horizontal spill */
    margin: 6pt 0 !important;
    page-break-inside: auto;
    word-break: break-word;
  }
  table.fin th, table.fin td {
    padding: 2pt 4pt !important;
    border: 0.4pt solid #c5c5c5 !important;
    color: #1c1a17 !important;
    background: #fff !important;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left;
    vertical-align: top;
  }
  table.fin thead th {
    background: #f0ede5 !important;
    font-weight: 700;
    font-size: 7pt !important;
    letter-spacing: 0.2pt;
  }
  /* Numeric / currency cells right-align for readability */
  table.fin td.numeric, table.fin th.numeric { text-align: right; }
  table.fin .pos { color: #1f7a4d !important; }
  table.fin .neg { color: #b3261e !important; }
  /* Wrap any table-containing card in a wrapper that allows page breaks across rows */
  .chart-card table.fin, section.block table.fin {
    page-break-inside: auto;
  }
  /* Long-table rows can break, but headers should never widow alone */
  table.fin thead { display: table-header-group; }
  table.fin tr { page-break-inside: avoid; }

  /* ===== Defensive: every table fits the page width ===== */
  /* Wide multi-column prose tables (e.g. AVGO Bull vs Bear) were overflowing
     the right page edge on print, cutting off entire columns. Force fixed
     layout + word-wrap so the table reflows inside the column instead. */
  section.block table:not(.fin),
  section.block .tbl-wrap > table:not(.fin) {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 8.5pt !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    page-break-inside: auto;
  }
  section.block table:not(.fin) th,
  section.block table:not(.fin) td {
    padding: 3pt 5pt !important;
    border: 0.4pt solid #c5c5c5 !important;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* Hide horizontal-scroll affordance UI (red bar with arrows, scroll hints) */
  .tbl-scroll, .tbl-scroll-indicator, .scroll-hint,
  .tbl-wrap::before, .tbl-wrap::after,
  [aria-label*="scroll" i] {
    display: none !important;
  }
  .tbl-wrap, .tbl-scroll {
    overflow: visible !important;
  }

  /* ===== KPI grid (force a denser 3- or 4-col print layout) ===== */
  .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6pt !important;
    margin: 6pt 0 !important;
  }
  .kpi {
    border: 0.5pt solid #c5c5c5 !important;
    background: #fafafa !important;
    padding: 6pt 8pt !important;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  .kpi.accent {
    background: #f0ede5 !important;
    border-color: #1c1a17 !important;
  }
  .kpi .lbl {
    font-size: 7.5pt !important;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    color: #56514a !important;
  }
  .kpi .val {
    font-family: Georgia, serif;
    font-size: 13pt !important;
    font-weight: 700;
    color: #1c1a17 !important;
    margin: 1pt 0;
  }
  .kpi .delta {
    font-size: 7.5pt !important;
    color: #56514a !important;
  }
  .kpi .delta.pos { color: #1f7a4d !important; }
  .kpi .delta.neg { color: #b3261e !important; }
  .drop-desc { font-size: 8.5pt !important; color: #56514a !important; margin-top: 3pt; }

  /* ===== Bull / Base / Bear thesis cards ===== */
  .thesis-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6pt !important;
    margin: 6pt 0 !important;
  }
  .thesis {
    border: 0.5pt solid #c5c5c5 !important;
    padding: 6pt 8pt !important;
    page-break-inside: avoid;
    font-size: 8.5pt !important;
    background: #fafafa !important;
  }
  .thesis.bull { border-top: 2pt solid #1f7a4d !important; }
  .thesis.base { border-top: 2pt solid #56514a !important; }
  .thesis.bear { border-top: 2pt solid #b3261e !important; }
  .thesis h4 { font-size: 9.5pt !important; margin: 0 0 3pt !important; }
  .thesis .pt {
    font-family: Georgia, serif;
    font-size: 16pt !important;
    font-weight: 700;
    color: #1c1a17 !important;
    margin: 2pt 0;
  }
  .thesis .ret {
    font-size: 8pt !important;
    color: #56514a !important;
    margin-bottom: 4pt;
  }
  .thesis ul { margin-left: 12pt !important; }

  /* ===== Risk cards ===== */
  .risk-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5pt !important;
  }
  .risk-card {
    border: 0.5pt solid #c5c5c5 !important;
    padding: 5pt 8pt !important;
    background: #fafafa !important;
    page-break-inside: avoid;
    font-size: 8.5pt !important;
  }
  .risk-card.sev-high { border-left: 3pt solid #b3261e !important; }
  .risk-card.sev-med  { border-left: 3pt solid #b4690e !important; }
  .risk-card.sev-low  { border-left: 3pt solid #1f7a4d !important; }
  .risk-card .sev {
    font-size: 7pt !important;
    font-weight: 700;
    color: #1c1a17 !important;
    text-transform: uppercase;
    letter-spacing: 0.6pt;
    margin-bottom: 2pt;
  }
  .risk-card h5 { margin: 0 0 2pt !important; font-size: 9pt !important; }
  .risk-card p { margin: 0 !important; font-size: 8.5pt !important; }

  /* ===== Data-gaps callout boxes ===== */
  .data-gaps {
    border-left: 2pt solid #1c1a17 !important;
    background: #f7f5f1 !important;
    padding: 6pt 10pt !important;
    margin: 6pt 0 !important;
    font-size: 9pt !important;
    page-break-inside: avoid;
  }

  /* ===== Editorial in-content price header (.phead) + PT box ===== */
  .phead {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 14pt !important;
    margin: 6pt 0 10pt !important;
    padding-bottom: 8pt !important;
    border-bottom: 0.5pt solid #ccc !important;
    flex-wrap: wrap;
    page-break-inside: avoid;
  }
  .price-big {
    font-family: Georgia, serif !important;
    font-size: 22pt !important;
    font-weight: 700 !important;
    color: #1c1a17 !important;
    line-height: 1.1;
  }
  .price-meta {
    font-size: 8.5pt !important;
    color: #56514a !important;
    display: flex; flex-wrap: wrap; gap: 8pt;
  }
  .price-meta b { color: #1c1a17 !important; }
  .pt-box {
    border: 0.5pt solid #c5c5c5 !important;
    background: #fafafa !important;
    padding: 6pt 10pt !important;
    text-align: right;
  }
  .pt-box .lbl { font-size: 7.5pt !important; color: #56514a !important; text-transform: uppercase; letter-spacing: 0.6pt; }
  .pt-box .pt { font-family: Georgia, serif !important; font-size: 17pt !important; font-weight: 700; color: #1c1a17 !important; line-height: 1.1; }
  .pt-box .pd { font-size: 8.5pt !important; color: #56514a !important; }

  /* ===== Blended FV summary block + tactical PT status banner ===== */
  .blended-fv, #blendedFV {
    background: #fafafa !important;
    border: 0.5pt solid #c5c5c5 !important;
    border-left: 2pt solid #1c1a17 !important;
    padding: 5pt 8pt !important;
    margin: 6pt 0 !important;
    font-size: 9pt !important;
    color: #1c1a17 !important;
    page-break-inside: avoid;
  }
  #ptStatus {
    background: #f7f5f1 !important;
    border-left: 2pt solid #1c1a17 !important;
    padding: 5pt 8pt !important;
    margin: 6pt 0 !important;
    font-size: 9pt !important;
    color: #1c1a17 !important;
    border-radius: 0 !important;
    page-break-inside: avoid;
  }

  /* ===== Fund-stamp and freshness badge (IONQ-style stamps) ===== */
  .fund-stamp-line {
    background: #f7f5f1 !important;
    border-left: 2pt solid #1f7a4d !important;
    color: #1c1a17 !important;
    font-size: 8.5pt !important;
    padding: 4pt 8pt !important;
    margin: 4pt 0 !important;
  }
  .fund-stamp-line.stale { border-left-color: #b4690e !important; }
  .fresh-badge { color: #56514a !important; font-size: 7pt !important; font-weight: 600; }

  /* ===== Brush panel (technicals price-path zoom output) ===== */
  .brush-panel {
    background: #fafafa !important;
    border: 0.5pt solid #c5c5c5 !important;
    border-left: 2pt solid #1c1a17 !important;
    padding: 4pt 8pt !important;
    font-size: 8.5pt !important;
    color: #1c1a17 !important;
  }

  /* ===== Calculator/model output (keep static defaults, hide sliders) ===== */
  .calc {
    border: 0.5pt solid #c5c5c5 !important;
    background: #fafafa !important;
    padding: 8pt !important;
    margin: 6pt 0 !important;
    page-break-inside: avoid;
  }
  .calc h4 { margin: 0 0 4pt !important; }
  .calc .calc-output {
    padding: 6pt 0 !important;
    border-top: 0.5pt solid #c5c5c5 !important;
    margin-top: 4pt !important;
  }
  .calc .pt-val {
    font-family: Georgia, serif;
    font-size: 18pt !important;
    font-weight: 700;
    color: #1c1a17 !important;
  }
  .calc .pt-lbl { font-size: 8pt !important; color: #56514a !important; }
  .calc .pt-delta { font-size: 9pt !important; }
  .val-badge {
    font-size: 8pt !important;
    color: #1c1a17 !important;
    background: #f0ede5 !important;
    padding: 1pt 4pt !important;
    border-radius: 2pt;
  }

  /* ===== Links: keep clickable in PDF, drop URL suffix ===== */
  a {
    color: #1c1a17 !important;
    text-decoration: underline;
  }
  a[href^="http"]::after {
    content: "";
  }
  sup.fn a, a.sort-arrow, a[href^="#"] {
    text-decoration: none !important;
  }

  /* ===== Footnotes ===== */
  ol.footnotes {
    font-size: 8pt !important;
    margin: 6pt 0 0 16pt !important;
    padding: 0;
  }
  ol.footnotes li {
    margin-bottom: 3pt;
    color: #1c1a17 !important;
  }

  /* ===== Footer / disclaimer always on its own page ===== */
  footer.site-footer {
    page-break-before: always;
    border-top: 1pt solid #1c1a17;
    padding: 10pt 0 0 !important;
    margin-top: 14pt;
    font-size: 8.5pt !important;
    color: #1c1a17 !important;
  }
  footer.site-footer h5 {
    font-size: 9.5pt !important;
    margin: 0 0 3pt !important;
  }
  footer.site-footer .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14pt !important;
  }
  footer.site-footer .footer-inner > div:nth-child(2) {
    display: none !important;   /* hide "Navigate" links, useless on paper */
  }
  footer.site-footer .disclaimer-box {
    font-size: 7.5pt !important;
    border: 0.5pt solid #c5c5c5 !important;
    padding: 5pt 7pt !important;
    background: #fafafa !important;
  }
  footer.site-footer .copyright {
    font-size: 7pt !important;
    color: #56514a !important;
    margin-top: 8pt;
    padding-top: 6pt;
    border-top: 0.5pt solid #c5c5c5;
  }

  /* ===== Print-only header strip on every page ===== */
  /* (uses CSS running headers, supported by most modern browsers) */
  @page {
    @bottom-center {
      content: "Equity Research · Naina Garg · Illustrative, not investment advice · Page " counter(page) " of " counter(pages);
      font-family: Georgia, serif;
      font-size: 7pt;
      color: #56514a;
    }
  }

  /* ===== Hub-specific (when someone prints the landing page) ===== */
  .category-section {
    page-break-inside: avoid;
    margin-bottom: 14pt !important;
  }
  .category-section .grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6pt !important;
  }
  a.card {
    border: 0.5pt solid #c5c5c5 !important;
    padding: 6pt 8pt !important;
    page-break-inside: avoid;
    background: #fafafa !important;
  }
  .ai-tag, .pill { font-size: 7.5pt !important; }

  /* ===== Force expand any collapsible dropbox state ===== */
  /* Note: .drop-desc on IONQ is position:absolute on screen, flatten to static so it
     doesn't overlay following content on paper. */
  .dropbox, .dropbox .drop-desc {
    display: block !important;
    position: static !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  .dropbox .drop-desc {
    margin-top: 4pt !important;
    border: 0.5pt solid #c5c5c5 !important;
    border-left: 2pt solid #1c1a17 !important;
    padding: 4pt 6pt !important;
    background: #fafafa !important;
    font-size: 8.5pt !important;
  }
  .category-section.collapsed .category-desc,
  .category-section.collapsed .grid {
    display: block !important;
  }
  .category-section.collapsed .grid {
    display: grid !important;
  }
}