/* Socratii economic cycle chart (cycle-clock.js). */
.cy { --cy-exp: var(--color-success); --cy-down: var(--color-gold); --cy-slow: var(--color-error); --cy-rec: var(--color-primary);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); color: var(--color-text); }
.cy-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; margin-bottom: var(--space-4); }
.cy-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 3px; }
.cy-seg[hidden] { display: none; }
.cy-seg button { font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); background: none; border: 0;
  border-radius: 999px; padding: 0.4rem 0.85rem; cursor: pointer; min-height: 2rem; }
.cy-seg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.cy-seg button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.cy-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr); gap: var(--space-5); align-items: start; }
.cy-figure { margin: 0; position: relative; min-width: 0; }
.cy-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.cy-q { stroke: none; }
.cy-q--expansion { fill: color-mix(in srgb, var(--cy-exp) 9%, transparent); }
.cy-q--downturn { fill: color-mix(in srgb, var(--cy-down) 11%, transparent); }
.cy-q--slowdown { fill: color-mix(in srgb, var(--cy-slow) 8%, transparent); }
.cy-q--recovery { fill: color-mix(in srgb, var(--cy-rec) 8%, transparent); }
.cy-axis { stroke: var(--color-border); stroke-width: 1.5; }
.cy-qlabel { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.cy-qlabel--expansion { fill: var(--cy-exp); } .cy-qlabel--downturn { fill: var(--color-gold-active); }
.cy-qlabel--slowdown { fill: var(--cy-slow); } .cy-qlabel--recovery { fill: var(--cy-rec); }
[data-theme='dark'] .cy-qlabel--downturn { fill: var(--cy-down); }
.cy-alabel { font-size: 12px; fill: var(--color-text-muted); }
.cy-trail { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; }
.cy-trail--expansion { stroke: var(--cy-exp); } .cy-trail--downturn { stroke: var(--cy-down); }
.cy-trail--slowdown { stroke: var(--cy-slow); } .cy-trail--recovery { stroke: var(--cy-rec); }
.cy-trail.is-sel { opacity: 0.9; stroke-width: 2.5; }
.cy-trail.is-dim { opacity: 0.12; }
.cy-dot { cursor: pointer; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s; outline: none; }
.cy-dot circle { stroke: var(--color-surface); stroke-width: 2; transition: r 0.15s; }
.cy-dot--expansion circle { fill: var(--cy-exp); } .cy-dot--downturn circle { fill: var(--cy-down); }
.cy-dot--slowdown circle { fill: var(--cy-slow); } .cy-dot--recovery circle { fill: var(--cy-rec); }
.cy-dlabel { font-size: 13px; font-weight: 600; fill: var(--color-text); paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; stroke-linejoin: round; }
.cy-dot:hover circle, .cy-dot:focus-visible circle, .cy-dot.is-sel circle { r: 9; stroke: var(--color-text); }
.cy-dot.is-dim { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) { .cy-dot { transition: none; } }

.cy-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; z-index: 2;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.14); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: 1.45;
  width: max-content; max-width: 16rem; }
.cy-tip--below { transform: translate(-50%, 22px); }
.cy-tip strong, .cy-tip span { display: block; }
.cy-tip span.cy-tag { display: inline-block; margin-top: 4px; }
.cy-tip span.cy-tag + span { display: inline; color: var(--color-text-muted); }
.cy-tip span:nth-child(2) { color: var(--color-text-muted); }

.cy-time { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.cy-play { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text); display: grid; place-items: center; cursor: pointer; }
.cy-play svg { width: 1rem; height: 1rem; }
.cy-play:hover { border-color: var(--color-primary); }
.cy-play:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cy-slider { flex: 1; display: flex; }
.cy-slider input { width: 100%; accent-color: var(--color-primary); }
.cy-month { flex: none; min-width: 8.5rem; text-align: right; font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.cy-side { min-width: 0; }
.cy-summary { max-width: none; font-size: var(--text-sm); line-height: 1.55; margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.cy-summary strong { color: var(--color-text); }
.cy-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cy-phase { border: 1px solid var(--color-divider); border-left-width: 4px; border-radius: var(--radius-md); padding: var(--space-3); }
.cy-phase--expansion { border-left-color: var(--cy-exp); } .cy-phase--downturn { border-left-color: var(--cy-down); }
.cy-phase--slowdown { border-left-color: var(--cy-slow); } .cy-phase--recovery { border-left-color: var(--cy-rec); }
.cy-phase-head { display: flex; justify-content: space-between; align-items: center; }
.cy-phase p { margin: 2px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.cy-count { font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.cy-tag { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; padding: 1px 8px; }
.cy-tag--expansion { color: var(--color-success); background: var(--color-success-highlight); }
.cy-tag--downturn { color: var(--color-gold-active); background: var(--color-gold-highlight); }
.cy-tag--slowdown { color: var(--color-error); background: var(--color-error-highlight); }
.cy-tag--recovery { color: var(--color-primary); background: var(--color-primary-highlight); }
[data-theme='dark'] .cy-tag--downturn { color: var(--color-gold); }
.cy-chips { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cy-chips button { font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--color-text); background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 9px; cursor: pointer; min-height: 1.75rem; }
.cy-chips button[aria-pressed="true"] { border-color: var(--color-text); background: var(--color-surface); }
.cy-chips button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.cy-lv { color: var(--color-text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.cy-none { font-style: normal; }

.cy-attrib { max-width: none; margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }
.cy-attrib a { color: inherit; text-decoration: underline; }
.cy-loading { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-5); }
.cy-skel { display: block; height: 22rem; border-radius: var(--radius-md); background: var(--color-surface-2); animation: cyPulse 1.4s ease-in-out infinite; }
@keyframes cyPulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .cy-skel { animation: none; } }
.cy-error { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.cy-retry { font: inherit; color: var(--color-primary); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }

@media (max-width: 900px) {
  .cy-body { grid-template-columns: 1fr; }
  .cy-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cy-loading { grid-template-columns: 1fr; } .cy-skel--side { display: none; }
}
@media (max-width: 560px) {
  .cy { padding: var(--space-4) var(--space-3); }
  .cy-phases { grid-template-columns: 1fr; }
  .cy-dlabel { font-size: 15px; }
  .cy-qlabel { font-size: 17px; }
  .cy-alabel { font-size: 14px; }
  .cy-month { min-width: 0; }
}

/* Market Center and Plan2Vest wrappers */
.cy-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.cy-notes > div { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted); }
.cy-notes h3 { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-1); }
.cy-notes a { color: var(--color-primary); font-weight: 600; }
[data-theme='dark'] .cy-notes a { color: var(--color-gold); }
@media (max-width: 760px) { .cy-notes { grid-template-columns: 1fr; } }