/* MarketScreen  Fear & Greed card
   Override the variables below from your site stylesheet to match the theme. */
/* Η κάρτα ακολουθεί το θέμα της σελίδας: παίρνει τις μεταβλητές του
   ταμπλό, που γυρίζουν μόνες τους σε σκοτεινό. Οι τιμές μετά το κόμμα
   είναι εφεδρικές, αν η κάρτα μπει κάπου χωρίς αυτές τις μεταβλητές. */
.fg-card {
  --fg-bg:     var(--pan,  #fff);
  --fg-border: var(--line, #d9dde3);
  --fg-text:   var(--ink,  #1c1f24);
  --fg-muted:  var(--mut,  #6b727c);
  --fg-track:  var(--pan2, #eef0f3);
  --fg-z1: #c62828;   /* ακραίος φόβος */
  --fg-z2: #ef6c00;   /* φόβος */
  --fg-z3: var(--flat, #9aa0a6);   /* ουδέτερο */
  --fg-z4: #7cb342;   /* απληστία */
  --fg-z5: #2e7d32;   /* ακραία απληστία */
  --fg-accent: var(--lnk, #1a5fb4);
  --fg-on-accent: #fff;
  font: 13px/1.45 inherit;
  color: var(--fg-text);
  background: var(--fg-bg);
  border: 1px solid var(--fg-border);
  border-radius: 6px;
  padding: 10px 12px 8px;
  box-sizing: border-box;
  width: 100%;
}
.fg-card * { box-sizing: border-box; }

.fg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fg-title { margin: 0; font-size: 14px; font-weight: 600; }
.fg-meta { font-size: 11px; color: var(--fg-muted); white-space: nowrap; }

.fg-gauge { margin: 2px auto 0; max-width: 300px; }
.fg-arc { fill: none; stroke-width: 18; }
.fg-z1 { stroke: var(--fg-z1); }
.fg-z2 { stroke: var(--fg-z2); }
.fg-z3 { stroke: var(--fg-z3); }
.fg-z4 { stroke: var(--fg-z4); }
.fg-z5 { stroke: var(--fg-z5); }
.fg-needle line { stroke: var(--fg-text); stroke-width: 3; stroke-linecap: round; }
/* Η περιστροφή δίνεται ως CSS transform (rotate σε μοίρες) και το κέντρο
   ορίζεται ΜΟΝΟ εδώ. Αν το js έδινε rotate(a cx cy) ως attribute, το
   transform-origin θα προσθέτονταν από πάνω και η βελόνα θα ξέφευγε. */
.fg-needle { transition: transform 1.1s cubic-bezier(.2,.8,.3,1);
  transform-box: view-box; transform-origin: 160px 150px; transform: rotate(-90deg); }
.fg-hub { fill: var(--fg-text); }
.fg-score { font-size: 44px; font-weight: 700; fill: var(--fg-text); }
.fg-label { font-size: 15px; font-weight: 600; }
.fg-end { font-size: 11px; fill: var(--fg-muted); }
.fg-zone-1 { fill: var(--fg-z1); color: var(--fg-z1); }
.fg-zone-2 { fill: var(--fg-z2); color: var(--fg-z2); }
.fg-zone-3 { fill: var(--fg-muted); color: var(--fg-muted); }
.fg-zone-4 { fill: var(--fg-z4); color: var(--fg-z4); }
.fg-zone-5 { fill: var(--fg-z5); color: var(--fg-z5); }
@media (prefers-reduced-motion: reduce) { .fg-needle { transition: none; } }

.fg-history { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fg-history li { background: var(--fg-track); border-radius: 4px; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.fg-history span { color: var(--fg-muted); font-size: 11px; }
.fg-history strong { font-size: 14px; font-weight: 600; }
.fg-history strong small { font-weight: 500; font-size: 11px; margin-left: 4px; }

.fg-chart-head { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.fg-chart-title { font-size: 11px; color: var(--fg-muted); }
.fg-ranges { display: flex; gap: 2px; }
.fg-ranges button { font: inherit; font-size: 11px; padding: 2px 8px; border: 1px solid var(--fg-border); background: var(--fg-bg); color: var(--fg-muted); border-radius: 3px; cursor: pointer; }
.fg-ranges button.is-active { color: var(--fg-on-accent); background: var(--fg-accent);
  border-color: var(--fg-accent); }
.fg-ranges button.is-locked::after { content: " \1F512"; font-size: 9px; }
.fg-ranges button:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 1px; }
.fg-chart-wrap { position: relative; height: 150px; margin-top: 4px; }

.fg-details { margin-top: 8px; border-top: 1px solid var(--fg-border); padding-top: 6px; }
.fg-details summary { cursor: pointer; font-size: 12px; color: var(--fg-accent); list-style: none; }
.fg-details summary::-webkit-details-marker { display: none; }
.fg-details summary::before { content: "\25B8 "; }
.fg-details[open] summary::before { content: "\25BE "; }
.fg-components { list-style: none; margin: 6px 0 0; padding: 0; }
.fg-components li { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 4px 0; font-size: 12px; align-items: center; }
.fg-components .fg-bar { grid-column: 1 / -1; height: 4px; background: var(--fg-track); border-radius: 2px; overflow: hidden; }
.fg-components .fg-bar i { display: block; height: 100%; }
.fg-components strong { font-weight: 600; white-space: nowrap; }
.fg-lock { margin: 6px 0 0; font-size: 12px; color: var(--fg-muted); }
.fg-lock a { color: var(--fg-accent); }

.fg-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--fg-muted); }


/* ── σκοτεινό θέμα ────────────────────────────────────────────────
   Οι ζώνες θέλουν λίγο φωτεινότερα χρώματα για να ξεχωρίζουν πάνω σε
   σκούρο φόντο· τα υπόλοιπα τα φέρνουν οι μεταβλητές της σελίδας. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fg-card {
  --fg-z1:#e0554b; --fg-z2:#f2913a; --fg-z4:#84c95f; --fg-z5:#31a75a;
  /* Στο σκοτεινό το --lnk είναι ανοιχτό γαλάζιο: λευκά γράμματα πάνω του
     δεν διαβάζονται, οπότε το κείμενο γίνεται σκούρο. */
  --fg-on-accent:#0b1016;
  }
}
:root[data-theme="dark"] .fg-card {
  --fg-z1:#e0554b; --fg-z2:#f2913a; --fg-z4:#84c95f; --fg-z5:#31a75a;
  /* Στο σκοτεινό το --lnk είναι ανοιχτό γαλάζιο: λευκά γράμματα πάνω του
     δεν διαβάζονται, οπότε το κείμενο γίνεται σκούρο. */
  --fg-on-accent:#0b1016;
}