/* © 2026 OV Markets (@OVmarkets) — OV Cycles.
   Built on macro.css (tokens, hero, footer, support panel, disclosure) and the
   shared header stylesheets, like Valuation. The chart gets more width than the
   other sections: a long monthly series needs horizontal room. */

:root {
  --cycles-7: #F39C12;
  --cycles-35: #2ECC71;
  --cycles-105: #E74C3C;
  --cycles-price: #3b4454;
  --cycles-up: #1f9d8b;
  --cycles-down: #d64545;
  --cycles-shmita: rgba(242,54,69,.085);
  --cycles-shmita-edge: rgba(242,54,69,.26);
  --cycles-future-veil: rgba(240,233,218,.5);
  --cycles-sideways: rgba(200,40,56,.12);
  --cycles-sideways-future: rgba(200,40,56,.06);
  --cycles-sideways-edge: rgba(200,40,56,.45);
  --cycles-sideways-text: #c62f3b;
  /* Legend swatches: Shmita a dark wine band, sideways a clear red box. */
  --cycles-legend-shmita: #7a2b48;
  --cycles-legend-shmita-edge: #5a1d33;
  --cycles-legend-sideways: rgba(220,38,48,.26);
  --cycles-legend-sideways-edge: #dc2630;
}
[data-theme="dark"] {
  --cycles-price: #d7dbe3;
  --cycles-up: #26a69a;
  --cycles-down: #ef5350;
  --cycles-shmita: rgba(242,54,69,.11);
  --cycles-shmita-edge: rgba(242,54,69,.32);
  --cycles-future-veil: rgba(15,17,23,.45);
  --cycles-sideways: rgba(214,48,64,.17);
  --cycles-sideways-future: rgba(214,48,64,.08);
  --cycles-sideways-edge: rgba(229,72,77,.5);
  --cycles-sideways-text: #e5484d;
  --cycles-legend-shmita: #6b2340;
  --cycles-legend-shmita-edge: #9a3a5f;
  --cycles-legend-sideways: rgba(239,68,68,.34);
  --cycles-legend-sideways-edge: #ef4444;
}

#cycles-main { width:100%; max-width:1440px; margin:0 auto; padding:12px 20px 76px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.cycles-hero { position:relative; min-height:168px; overflow:hidden; display:flex; align-items:center; padding:24px 34px; border:1px solid var(--border); border-radius:20px; background:var(--paper); box-shadow:0 28px 54px -36px var(--shadow); }
.cycles-hero::before { content:''; position:absolute; top:-190px; right:-70px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(46,204,113,.1),rgba(243,156,18,.05) 40%,transparent 72%); }
.cycles-hero-copy { position:relative; z-index:2; max-width:960px; padding-right:190px; }
.cycles-hero h1 { white-space:nowrap; }

/* The OV Cycles mark: a rotation arrow around a rising price line. */

.cycles-export { flex:0 0 auto; align-self:flex-start; min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 13px; border:1px solid var(--border2); border-radius:8px; background:var(--surface); color:var(--text2); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.cycles-export:hover { border-color:var(--gold); color:var(--gold); }
.cycles-export:disabled { cursor:wait; opacity:.65; }

/* ── Card, header and controls ────────────────────────────────────────────── */
.cycles-card { margin-top:18px; border:1px solid var(--border); border-radius:18px; background:var(--paper); box-shadow:0 24px 52px -40px var(--shadow); }
.cycles-card-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:22px 26px 16px; border-bottom:1px solid var(--border); }
.cycles-card-head h2 { margin-top:6px; font-size:clamp(20px,2.1vw,26px); line-height:1.25; letter-spacing:-.03em; }
.cycles-mode-title { color:var(--gold); }
.cycles-card-note { max-width:620px; margin-top:8px; color:var(--muted); font-size:13px; line-height:1.5; }

.cycles-controls { position:relative; display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 18px; padding:14px 20px 12px; border-bottom:1px solid var(--border); background:var(--surface); border-radius:0; }
.cycles-control-group { display:grid; gap:6px; }
.cycles-view-group { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
.cycles-view-group .cycles-control-label { flex-basis:100%; }
.cycles-control-label { color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
.cycles-segment { display:inline-flex; padding:2px; border:1px solid var(--border2); border-radius:9px; background:var(--paper); }
.cycles-segment button { min-height:32px; padding:0 11px; border:0; border-radius:7px; background:transparent; color:var(--text2); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.05em; cursor:pointer; }
.cycles-segment button[aria-pressed="true"] { background:var(--gold); color:#101218; }
.cycles-segment button:hover:not([aria-pressed="true"]) { color:var(--text); }
.cycles-segment button:focus-visible,.cycles-chip:focus-visible,.cycles-fullscreen-btn:focus-visible,.cycles-export:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.cycles-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cycles-chip { min-height:34px; display:inline-flex; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--border2); border-radius:999px; background:var(--paper); color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.04em; cursor:pointer; transition:border-color .15s,color .15s,opacity .15s; }
.cycles-chip[aria-pressed="true"] { border-color:color-mix(in srgb,var(--text2) 45%,transparent); color:var(--text); }
.cycles-chip[aria-pressed="false"] .cycles-swatch,.cycles-chip[aria-pressed="false"] { opacity:.55; }
.cycles-chip.is-sub { min-height:30px; padding:0 9px; font-size:10px; }
.cycles-chip.is-sub:disabled { cursor:not-allowed; opacity:.35; }
.cycles-swatch { display:inline-block; width:12px; height:12px; border-radius:3px; flex:0 0 auto; }
.cycles-swatch.shmita { background:rgba(242,54,69,.35); border:1px solid rgba(242,54,69,.6); }
.cycles-swatch.c7 { background:var(--cycles-7); }
.cycles-swatch.c35 { background:var(--cycles-35); }
.cycles-swatch.c105 { background:var(--cycles-105); }
.cycles-swatch.sideways { width:14px; background:var(--cycles-sideways); border:1px solid var(--cycles-sideways-edge); border-radius:2px; }
.cycles-swatch.arc { width:14px; height:8px; border:2px solid var(--cycles-35); border-bottom:0; border-radius:10px 10px 0 0; background:rgba(46,204,113,.15); }


/* ── Chart ───────────────────────────────────────────────────────────────── */
.cycles-chart-shell { position:relative; height:clamp(480px,70vh,780px); margin:12px 12px 8px; overflow:hidden; border:1px solid var(--border); border-radius:13px; background:var(--surface2); display:flex; flex-direction:column; }
/* The plot fills what the status strip leaves (all of it on desktop). */
.cycles-plot { position:relative; flex:1 1 auto; min-height:0; }
.cycles-chart-shell canvas { position:relative; z-index:1; width:100%; height:100%; cursor:crosshair; touch-action:pan-y; outline:none; }
.cycles-chart-shell canvas.is-panning { cursor:grabbing; }
.cycles-chart-shell canvas:focus-visible { box-shadow:inset 0 0 0 2px var(--gold); }
.cycles-chart-loading,.cycles-chart-error { position:absolute; inset:0; z-index:3; display:grid; place-items:center; align-content:center; gap:12px; background:var(--surface2); color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.05em; text-align:center; padding:20px; }
.cycles-chart-shell.is-ready .cycles-chart-loading { display:none; }
.cycles-chart-error[hidden] { display:none; }
.cycles-chart-error p { max-width:420px; color:var(--text2); line-height:1.55; }
.cycles-chart-error button { min-height:36px; padding:0 14px; border:1px solid var(--gold); border-radius:8px; background:transparent; color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; }
.cycles-chart-shell.is-refreshing::after { content:''; position:absolute; z-index:4; top:0; left:0; height:2px; width:36%; background:var(--gold); animation:cycles-progress 1.1s ease-in-out infinite; }

.cycles-tooltip { position:absolute; z-index:5; max-width:300px; padding:9px 11px; border:1px solid var(--border2); border-radius:9px; background:var(--paper); color:var(--text); box-shadow:0 14px 30px -18px var(--shadow); font-size:12px; line-height:1.45; pointer-events:none; }
.cycles-tooltip[hidden] { display:none; }
.cycles-tooltip strong { display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; }
.cycles-tooltip dl { display:grid; grid-template-columns:auto 1fr; gap:1px 10px; margin-top:5px; }
.cycles-tooltip dt { color:var(--muted); }
.cycles-tooltip dd { margin:0; font-family:'IBM Plex Mono',monospace; text-align:right; }
.cycles-tooltip .cycles-tip-note { margin-top:6px; color:var(--muted); font-size:11px; }
.cycles-tooltip .cycles-tip-block { margin-top:7px; padding-top:6px; border-top:1px solid var(--border); }
.cycles-tooltip .cycles-tip-block b { font-weight:700; }
.cycles-tooltip .c7 { color:var(--cycles-7); } .cycles-tooltip .c35 { color:var(--cycles-35); } .cycles-tooltip .c105 { color:var(--cycles-105); } .cycles-tooltip .shmita { color:#f26b76; }

.cycles-fullscreen-btn { margin-left:auto; align-self:flex-end; min-height:34px; padding:0 13px; border:1px solid var(--border2); border-radius:8px; background:var(--surface); color:var(--text2); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.cycles-fullscreen-btn:hover,.cycles-fullscreen-btn[aria-pressed="true"] { border-color:var(--gold); color:var(--gold); }

/* The status box: the model's current outputs, nothing about how they are made. */
.cycles-status { position:absolute; z-index:2; top:10px; left:10px; min-width:176px; padding:10px 12px 9px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb, var(--surface2) 94%, transparent); font-family:'IBM Plex Mono',monospace; font-size:11px; pointer-events:none; }
.cycles-status-heading { display:block; color:var(--gold); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cycles-status-heading.is-shmita { margin-top:7px; padding-top:7px; border-top:1px solid var(--border); color:var(--muted); }
.cycles-status dl { display:grid; gap:3px; margin:5px 0 0; }
.cycles-status dl div { display:flex; justify-content:space-between; gap:14px; }
.cycles-status dt { color:var(--muted); }
.cycles-status dd { margin:0; color:var(--text); font-weight:600; }

/* Full chart — the same two routes as OV Valuation: the native Fullscreen API,
   and a CSS fallback for browsers (iOS in-app) that have none. */
.cycles-interactive { position:relative; }
.cycles-interactive:fullscreen { overflow:auto; padding:18px; background:var(--paper); }
.cycles-interactive:fullscreen .cycles-chart-shell { height:calc(100vh - 250px); min-height:420px; }
.cycles-interactive.is-css-fullscreen {
  position:fixed; inset:0; z-index:1000; margin:0; max-width:100vw;
  overflow:auto; -webkit-overflow-scrolling:touch;
  background:var(--paper);
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
}
.cycles-interactive.is-css-fullscreen .cycles-chart-shell { height:calc(100vh - 272px); height:calc(100dvh - 272px); min-height:300px; }
html.cycles-fullscreen-open, body.cycles-fullscreen-open { overflow:hidden; }
.cycles-fullscreen-close {
  position:absolute; z-index:6; top:10px; right:12px;
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border2); border-radius:999px;
  background:var(--surface2); color:var(--text2);
  font-family:'IBM Plex Mono',monospace; font-size:15px; line-height:1; cursor:pointer;
}
.cycles-fullscreen-close[hidden] { display:none; }
.cycles-fullscreen-close:hover { border-color:var(--gold); color:var(--gold); }
.cycles-fullscreen-close:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.cycles-interactive.is-css-fullscreen .cycles-fullscreen-close { position:fixed; top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); }

.visually-hidden { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.cycles-chart-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; padding:2px 20px 6px; }
.cycles-legend { display:flex; flex-wrap:wrap; gap:6px 16px; list-style:none; margin:0; padding:0; color:var(--text2); font-size:12px; }
.cycles-legend li { display:inline-flex; align-items:center; gap:7px; }
.cycles-line { display:inline-block; width:22px; height:0; border-top:2px solid; }
.cycles-line.c7 { border-color:var(--cycles-7); } .cycles-line.c7.dotted { border-top-style:dotted; }
.cycles-line.c35 { border-color:var(--cycles-35); }
.cycles-line.c105 { border-top-width:3px; border-color:var(--cycles-105); }
/* In the legend, the two red overlays are told apart at a glance: Shmita as a
   narrow dark wine band (like its yearly columns), sideways as a clear red box. */
.cycles-legend .cycles-swatch.shmita { width:7px; height:15px; border:0; border-left:2px solid var(--cycles-legend-shmita-edge); border-radius:1px; background:var(--cycles-legend-shmita); }
.cycles-legend .cycles-swatch.sideways { width:17px; height:11px; border:1.5px solid var(--cycles-legend-sideways-edge); border-radius:2px; background:var(--cycles-legend-sideways); }
.cycles-data-line { padding:6px 20px 16px; color:var(--muted); font-size:12px; line-height:1.55; }
.cycles-data-line strong { color:var(--text2); font-weight:600; }
.cycles-data-line .is-warning { color:var(--red); }

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.cycles-dashboard { margin-top:18px; padding:22px 24px 20px; border:1px solid var(--border); border-radius:18px; background:var(--paper); box-shadow:0 24px 52px -40px var(--shadow); }
.cycles-dashboard-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.cycles-dashboard-head h2 { margin-top:6px; font-size:22px; letter-spacing:-.025em; }
.cycles-dashboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.cycles-stat { position:relative; display:grid; align-content:start; gap:5px; min-width:0; padding:16px 16px 15px 19px; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.cycles-stat::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--muted); }
.cycles-stat.c7::before { background:var(--cycles-7); } .cycles-stat.c35::before { background:var(--cycles-35); } .cycles-stat.c105::before { background:var(--cycles-105); }
.cycles-stat.grand::before { background:var(--gold); } .cycles-stat.shmita::before { background:#f26b76; }
.cycles-stat-label { color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
.cycles-stat strong { font-family:'IBM Plex Mono',monospace; font-size:clamp(21px,2.2vw,28px); font-weight:700; letter-spacing:-.02em; color:var(--text); }
.cycles-stat.c7 strong { color:var(--cycles-7); } .cycles-stat.c35 strong { color:var(--cycles-35); } .cycles-stat.c105 strong { color:var(--cycles-105); } .cycles-stat.grand strong { color:var(--gold); }
.cycles-stat-sub { color:var(--text2); font-size:13px; }
.cycles-stat-sub.is-exact { font-family:'IBM Plex Mono',monospace; font-size:12px; }
.cycles-stat-note { color:var(--muted); font-size:12px; line-height:1.45; }
.cycles-stat-note:empty { display:none; }
.cycles-dashboard-disclaimer { margin-top:14px; color:var(--muted); font-size:12px; line-height:1.55; }

/* ── Marker table ────────────────────────────────────────────────────────── */

/* ── Methodology ─────────────────────────────────────────────────────────── */
.cycles-methodology { margin-top:18px; padding:28px 30px; border:1px solid var(--border); border-radius:17px; background:var(--surface); }
.cycles-methodology.is-collapsible.is-open .methodology-content { padding:24px 26px; border-radius:14px; background:var(--surface); }
.cycles-methodology-badge { padding:7px 10px; border:1px solid rgba(var(--gold-rgb),.35); border-radius:999px; background:rgba(var(--gold-rgb),.07); color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cycles-about { display:grid; gap:12px; max-width:880px; margin-top:18px; }
.cycles-about p { color:var(--text2); font-size:14.5px; line-height:1.65; }
.cycles-about .cycles-about-data { padding-top:12px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
.cycles-about .cycles-about-data strong { color:var(--text2); }
.cycles-about .cycles-about-sources { color:var(--muted); font-size:12px; }
.cycles-about-credit { display:grid; justify-items:start; gap:10px; padding-top:12px; border-top:1px solid var(--border); }
.cycles-about .cycles-about-credit p { font-size:13.5px; }
.cycles-about .cycles-about-credit strong { color:var(--text); }
.cycles-credit-follow { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border:1px solid var(--border2); border-radius:8px; background:var(--surface); color:var(--text2); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.06em; text-decoration:none; transition:border-color .15s,color .15s; }
.cycles-credit-follow:hover { border-color:var(--gold); color:var(--gold); }
.cycles-credit-follow:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.cycles-noscript { max-width:1200px; margin:16px auto; padding:15px 20px; color:var(--red); }

@keyframes cycles-progress { 0% { transform:translateX(-100%); } 100% { transform:translateX(290%); } }

@media(max-width:1100px) {
  .cycles-dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:700px) {
  #cycles-main { padding:8px 10px 55px; }
  .cycles-hero { min-height:180px; padding:21px 18px; border-radius:16px; }
  .cycles-hero-copy { padding-right:0; }
  .cycles-hero h1 { max-width:80%; font-size:clamp(22px,7vw,28px); line-height:1.1; white-space:normal; }
  .cycles-hero .hero-description { max-width:88%; }
  .cycles-card { margin-top:14px; border-radius:15px; }
  .cycles-export { width:100%; min-height:42px; }
  .cycles-fullscreen-btn { margin-left:0; width:100%; min-height:38px; }
  /* On a phone the box would cover the plot: it becomes a strip above it. */
  .cycles-status { position:static; display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 12px; min-width:0; padding:7px 10px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; font-size:10px; }
  .cycles-status-heading { display:none; }
  .cycles-status dl, .cycles-status dl:first-of-type { display:contents; }
  .cycles-status dl div { gap:5px; }
  .cycles-interactive:fullscreen { padding:10px; }
  .cycles-interactive:fullscreen .cycles-chart-shell { height:70vh; min-height:390px; }
  .cycles-interactive.is-css-fullscreen .cycles-chart-shell { height:calc(100vh - 380px); height:calc(100dvh - 380px); min-height:260px; }
  .cycles-card-head { flex-direction:column; align-items:flex-start; gap:8px; padding:18px 16px 14px; }
  .cycles-controls { gap:10px 12px; padding:12px; }
  .cycles-control-group { width:100%; }
  .cycles-view-group { width:100%; }
  .cycles-segment button { min-height:36px; padding:0 10px; }
  .cycles-chip { min-height:36px; }
  .cycles-chart-shell { height:clamp(400px,66vh,560px); margin:10px 4px 6px; border-radius:10px; }
  .cycles-chart-foot,.cycles-data-line { padding-inline:12px; }
  .cycles-dashboard { padding:18px 14px; border-radius:15px; }
  .cycles-dashboard-head { flex-direction:column; align-items:flex-start; }
  .cycles-dashboard-grid { grid-template-columns:1fr; }
  .cycles-methodology { padding:24px 16px; }
  #cycles-main .macro-footer-links { flex-wrap:wrap; gap:2px 7px; }
}

@media(prefers-reduced-motion:reduce) {
  .cycles-chip { transition:none; }
}