/* src/gangtok/static/fund-chart.css
   Fund page NAV chart (Fund_NAV_Chart_PRD.md). Loaded alongside app.css on
   every page (see base.html) — every class here is prefixed .fnc- so it can
   never collide with app.css's own names. The chart panel's own chrome
   (background/border/text) deliberately reuses app.css's existing
   theme-aware variables (--surface/--border/--text/--text-muted) so it
   blends into the rest of the page; only the NAV line/fill/grid colors get
   a dedicated palette below, to keep mfnav-tweet's blue-line visual
   identity independent of the site's own --brass accent. */

.fnc-chart-placeholder {
  /* Aspect-ratio replaces the old vh-driven clamp now that the chart is a
     full-width row with no second column to size against
     (Fund_Chart_Table_Height_Redesign.md Section 5). This element only
     defines the shared ratio (same convention as the old --fnc-chart-h);
     the ratio itself applies to .fnc-skeleton/.fnc-chart-area below, the
     two elements that actually need a concrete box size. min-height is a
     floor for a very narrow/short viewport. Starting values — tune against
     real screenshots. */
  --fnc-chart-ratio: 16 / 7;
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  padding: 10px 4px 4px;
  position: relative;
}
@media (max-width: 480px) {
  /* A 16:7 chart reads too short/squashed on a narrow phone — taller
     ratio there. Starting value — tune against real screenshots. */
  .fnc-chart-placeholder { --fnc-chart-ratio: 4 / 3; }
}

.fnc-skeleton {
  aspect-ratio: var(--fnc-chart-ratio);
  min-height: 220px;
  margin: 4px 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: fnc-skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes fnc-skeleton-sweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.fnc-message {
  padding: 60px 16px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}
.fnc-message.fnc-error { color: var(--rust); }

/* Standard visually-hidden pattern — the SVG's screen-reader text
   alternative (Fund_NAV_Chart_PRD.md Section 5's Accessibility decision). */
.fnc-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Lives inside the chart's .panel-header now (right-aligned next to "NAV
   Chart" via that class's own justify-content:space-between in app.css) —
   scoped to .fnc-chart-col so this doesn't touch .panel-header's other
   uses elsewhere (api-docs, date-page result counts). Wraps to its own
   line under the label on a narrow viewport rather than forcing the
   header taller/overflowing; a starting value, tune against screenshots. */
.fnc-chart-col .panel-header { flex-wrap: wrap; row-gap: 6px; }
.fnc-window-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 8px 8px;
}
.panel-header .fnc-window-selector {
  /* No longer sits alone above the chart area — .panel-header already
     provides its own row padding. */
  padding: 0;
}
.fnc-window-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 2px;
  padding: 4px 11px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}
.fnc-window-btn:hover { border-color: var(--brass); }
.fnc-window-btn[aria-pressed="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--brass-text);
}

/* Explicit height (not the window-buttons row's auto height) — fund-chart.js
   measures this element's real clientWidth/clientHeight and builds the SVG's
   viewBox to match 1:1, so .fnc-svg below can just fill it exactly with no
   distortion (viewBox aspect ratio == container aspect ratio, always). */
.fnc-chart-area { position: relative; aspect-ratio: var(--fnc-chart-ratio); min-height: 220px; }
.fnc-svg { display: block; width: 100%; height: 100%; }
.fnc-axis-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--text-muted);
}
.fnc-axis-x { font-size: 10px; }
/* The x-axis name ("Date"), on its own row below the date ticks. */
.fnc-axis-title { font-size: 10px; }
/* The y-axis name ("NAV (₹)") — same font as .fnc-axis-label but no fill
   here on purpose: it's colored inline (fund-chart.js's palette.line), and
   a CSS fill here would win over that per the SVG/CSS cascade. */
.fnc-panel-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

/* Secondary to the two solid min/max boundary lines — dashed + reduced
   opacity keeps them from competing visually with those two anchors. */
.fnc-gridline {
  stroke-dasharray: 3,3;
  opacity: 0.5;
}

/* NAV line/fill colors themselves (mfnav-tweet's own palette, deliberately
   independent of --brass — see file header) live in fund-chart.js's own
   PALETTE map, not as CSS variables here: fund-chart.js re-paints them via
   its MutationObserver on <body data-theme> rather than a CSS cascade, so
   the chart never lags the rest of the already-CSS-driven page after a
   toggle. */

.fnc-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}

/* .fnc-table-col's own header — deliberately its own class rather than
   reusing .panel-header: unlike that plain label, this element is now
   natively interactive (cursor, native disclosure marker, keyboard focus)
   and shouldn't silently pick up interactive-looking affordances if a
   future style is added to the shared .panel-header class
   (Fund_Chart_Table_Height_Redesign.md Section 5). Keeps the native
   <summary> marker — no display:flex here, same convention as
   .detail-grid-summary/.api-docs-example-summary elsewhere in this
   codebase, since flex on a <summary> element suppresses that marker. */
.fnc-table-summary {
  margin-top: 0;
  cursor: pointer;
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.fnc-table-summary:hover { color: var(--text); }
/* The %-change span inside the stats teaser reuses .tick — the same
   up/down/flat color classes the results table already uses, so it
   repaints correctly on a theme toggle via CSS alone. */
.fnc-table-summary .tick { text-transform: none; letter-spacing: normal; }

/* Once the table is expanded, it scrolls on its own terms rather than
   pushing the page arbitrarily long — independent max-height now that
   there's no second column's height to match (Fund_Chart_Table_Height_Redesign.md
   Section 5). Starting value — tune against real screenshots. */
#fund-history-table-wrap .table-wrap {
  max-height: 420px;
  overflow-y: auto;
}
/* Sticky on <th> itself (not <thead>/<tr>) for cross-browser reliability —
   same reasoning as every other sticky-header case in this codebase. */
#fund-history-table-wrap .results-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
}