/* ==========================================================================
   form345_panels.css
   Panels and tables for SeekForm345.html

   Built to sit INSIDE the existing .section-card containers rather than
   drawing its own boxes. Surfaces are translucent so the gradient spheres
   and grid overlay show through, matching .neo-glass rather than covering
   it with opaque white.

   Typography inherits Work Sans for body and Josefin Sans for headings,
   both already loaded by the page.

   Everything is scoped under .f345 so nothing here can reach the existing
   page styles. Retheming is the token block below and nothing else.
   ========================================================================== */

.f345 {
  /* Brand blue and red, tuned for chart legibility against the light
     gradient background. The page's .blue / .red spans use the CSS colour
     keywords; these are the same hues with the glare taken out. */
  --f345-blue:      #1656c4;
  --f345-blue-deep: #0e3a86;
  --f345-blue-soft: #5b8ee0;
  --f345-red:       #cf2438;
  --f345-amber:     #c0851b;
  --f345-teal:      #147a70;
  --f345-slate:     #4a5a70;

  --f345-ink:       #14213d;
  --f345-muted:     #4d5d75;
  --f345-faint:     #7c8aa0;

  /* Translucent, not opaque: the background is part of the design. */
  --f345-surface:     rgba(255, 255, 255, 0.58);
  --f345-surface-hi:  rgba(255, 255, 255, 0.78);
  --f345-surface-low: rgba(255, 255, 255, 0.34);
  --f345-line:        rgba(22, 86, 196, 0.16);
  --f345-line-soft:   rgba(22, 86, 196, 0.09);

  --f345-radius: 14px;

  color: var(--f345-ink);
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  display: block;
  margin: 26px 0 0;
}

.f345 *,
.f345 *::before,
.f345 *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Panel shell -- a glass pane, not a white card
   -------------------------------------------------------------------------- */

.f345-panel {
  /* Opaque by default; the translucent value is applied in the @supports
     block at the end of this file, so browsers without backdrop-filter get
     a readable surface instead of text over gradient spheres. */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--f345-line);
  border-radius: var(--f345-radius);
  box-shadow: 0 6px 26px rgba(14, 58, 134, 0.07);
  overflow: hidden;
}

.f345-panel + .f345-panel { margin-top: 20px; }

.f345-panel__head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--f345-line-soft);
}

.f345-panel__title {
  margin: 0;
  font-family: "Josefin Sans", "Work Sans", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--f345-blue-deep);
}

.f345-panel__sub {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--f345-muted);
  max-width: 68ch;
}

.f345-panel__body { padding: 18px 22px 22px; }

.f345-panel__note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--f345-line-soft);
  font-size: 12px;
  line-height: 1.5;
  color: var(--f345-faint);
}

/* --------------------------------------------------------------------------
   Tabs -- pill chips, echoing .toc-mobile .chip
   -------------------------------------------------------------------------- */

.f345-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--f345-line-soft);
}

.f345-tab {
  appearance: none;
  border: 1px solid var(--f345-line);
  background: var(--f345-surface-low);
  padding: 7px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--f345-muted);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.f345-tab:hover {
  color: var(--f345-blue-deep);
  background: var(--f345-surface-hi);
}

.f345-tab[aria-selected="true"] {
  color: #fff;
  background: var(--f345-blue);
  border-color: var(--f345-blue);
  box-shadow: 0 3px 12px rgba(22, 86, 196, 0.28);
}

.f345-tab:focus-visible {
  outline: 2px solid var(--f345-blue);
  outline-offset: 2px;
}

.f345-tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Chart frame
   -------------------------------------------------------------------------- */

.f345-chart { position: relative; width: 100%; height: 340px; }
.f345-chart--tall { height: 430px; }

/* --------------------------------------------------------------------------
   Headline figures
   -------------------------------------------------------------------------- */

.f345-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}

.f345-stat {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--f345-line);
  border-radius: var(--f345-radius);
  padding: 16px 18px;
}

.f345-stat__value {
  display: block;
  font-family: "Josefin Sans", "Work Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--f345-blue);
  font-variant-numeric: tabular-nums;
}

.f345-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--f345-muted);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.f345-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.f345-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  white-space: nowrap;
  /* Floor width so the wrapper scrolls instead of the browser compressing
     the name columns until company names wrap one word per line. */
  min-width: 620px;
}

.f345-table--wide { min-width: 840px; }

/* Text columns need room; the numeric ones can stay tight. */
.f345-table td:first-child  { min-width: 150px; }
.f345-table td:nth-child(2) { min-width: 168px; }

.f345-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--f345-faint);
  padding: 0 12px 9px;
  border-bottom: 1px solid var(--f345-line);
}

.f345-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--f345-line-soft);
  vertical-align: top;
}

.f345-table tr:last-child td { border-bottom: none; }
.f345-table tbody tr:hover { background: var(--f345-surface-hi); }
.f345-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

.f345-name { font-weight: 600; color: var(--f345-ink); white-space: normal; }
.f345-sub  { display: block; font-size: 12px; color: var(--f345-faint);
             white-space: normal; }

.f345-ticker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--f345-blue);
}

/* Pills */
.f345-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.f345-pill--buy  { background: rgba(20, 122, 112, 0.13); color: var(--f345-teal); }
.f345-pill--sell { background: rgba(207, 36, 56, 0.11);  color: var(--f345-red); }
.f345-pill--flag { background: rgba(192, 133, 27, 0.14); color: var(--f345-amber); }
.f345-pill--amd  { background: var(--f345-surface-low); color: var(--f345-muted);
                   border: 1px solid var(--f345-line); }

.f345-badges { display: inline-flex; gap: 5px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Research links
   -------------------------------------------------------------------------- */

.f345-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.f345-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--f345-line);
  background: var(--f345-surface);
  color: var(--f345-blue-deep);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

.f345-links a:hover {
  background: var(--f345-surface-hi);
  transform: translateY(-1px);
}

.f345-links a:focus-visible {
  outline: 2px solid var(--f345-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */

.f345-msg {
  padding: 30px 22px;
  text-align: center;
  font-size: 13.5px;
  color: var(--f345-muted);
}

.f345-msg--error { color: var(--f345-red); }

.f345-skeleton {
  height: 340px;
  border-radius: var(--f345-radius);
  border: 1px solid var(--f345-line-soft);
  background: linear-gradient(90deg,
              var(--f345-surface-low) 25%,
              var(--f345-surface-hi) 37%,
              var(--f345-surface-low) 63%);
  background-size: 400% 100%;
  animation: f345-shimmer 1.5s ease infinite;
}

@keyframes f345-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.f345-updated {
  font-size: 12px;
  color: var(--f345-faint);
  margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
   Responsive and accessibility
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .f345-chart { height: 300px; }
  .f345-chart--tall { height: 370px; }
}

@media (max-width: 640px) {
  .f345 { font-size: 14px; }
  .f345-chart { height: 260px; }
  .f345-chart--tall { height: 320px; }
  .f345-stat__value { font-size: 24px; }
  .f345-panel__head { padding: 15px 16px 12px; }
  .f345-panel__body { padding: 15px 16px 18px; }
  .f345-tabs { padding: 12px 16px; gap: 6px; }
  .f345-tab { padding: 6px 12px; font-size: 12.5px; }
  .f345-stats { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .f345-skeleton { animation: none; }
  .f345 *, .f345 *::before, .f345 *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Glass only where it actually works. Written as enhancement rather than
   "@supports not", which is both better supported and means the fallback is
   the default rather than an afterthought. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .f345-panel, .f345-stat { background: var(--f345-surface); }
}