/* ============================================================
   Coindaily - Composite Score (/indicators/composite/)
   Complements styles.css + indicator-page.css.
   Zone palette matches the RSI heatmap ladder:
     deep value #4F9E7C · cool #5F9E9A · balanced #C99A4B
     heating #CC8A6A · overheated #BE5E6C
   ============================================================ */

/* gauge tick labels reuse .ig-* kit; page-specific bits below */

/* ---------- component board ---------- */
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table thead th { text-align: left; font-size: 10px; color: var(--tx-dim); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; padding: 11px 14px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.cs-table thead th:nth-child(n+2) { text-align: right; }
.cs-table thead th:last-child { text-align: left; width: 30%; }
.cs-table td { padding: 11px 14px; border-bottom: 1px solid var(--hairline-2); font-family: var(--mono); font-size: 12.5px; color: var(--tx); text-align: right; white-space: nowrap; }
.cs-table tbody tr:last-child td { border-bottom: none; }
.cs-table tbody tr:hover { background: rgba(255,255,255,.018); }
.cs-name { text-align: left !important; font-family: var(--sans) !important; }
.cs-name a { font-weight: 600; color: var(--tx-hi); }
.cs-name a:hover { color: var(--amber); }
.cs-name .cs-pillar { display: block; font-size: 10px; color: var(--tx-dim); margin-top: 2px; }
.cs-heat .v { display: inline-block; min-width: 36px; text-align: center; border-radius: 4px; padding: 3px 7px; font-weight: 600; }
.cs-heat .v.off { color: var(--tx-faint); }
.cs-w { color: var(--tx-dim); }
.cs-bar { width: 30%; }
.cs-bar .tr { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.cs-bar .tr i { display: block; height: 100%; border-radius: 3px; transition: width .5s ease; }

/* ---------- trajectory lean ---------- */
.cs-lean-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cs-lean-head .w { font-size: 19px; font-weight: 700; }
.cs-lean-head .n { font-size: 12px; color: var(--tx-dim); }
.cs-lean-bar { display: flex; height: 26px; border-radius: 5px; overflow: hidden; gap: 1px; background: var(--hairline-2); margin-bottom: 8px; }
.cs-lean-bar i { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 34px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; transition: width .5s ease; }
.cs-lean-bar .up   { background: rgba(79,158,124,.28); color: #63C199; }
.cs-lean-bar .side { background: rgba(116,128,143,.25); color: #9AA4B2; }
.cs-lean-bar .down { background: rgba(190,94,108,.26); color: #D97D8A; }
.cs-lean-ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-dim); margin-bottom: 16px; }
.cs-drivers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-drivers li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--tx-mid); }
.cs-drivers li i { flex: none; width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 700; font-style: normal; margin-top: 1px; }
.cs-drivers li.pos i { color: #63C199; background: rgba(79,158,124,.14); }
.cs-drivers li.neg i { color: #D97D8A; background: rgba(190,94,108,.14); }
.cs-drivers li.mid i { color: var(--tx-dim); background: rgba(116,128,143,.14); }
.cs-model-note { display: flex; gap: 9px; align-items: flex-start; font-size: 11.5px; line-height: 1.55; color: var(--tx-dim); border-top: 1px solid var(--hairline-2); margin-top: 16px; padding-top: 12px; }
.cs-model-note svg { flex: none; margin-top: 2px; color: var(--tx-faint); }

/* two-up layout for board + lean */
.cs-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 20px; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }

/* five zone cards */
.cs-zones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .cs-zones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cs-zones { grid-template-columns: 1fr; } }

/* ---------- loading skeleton ---------- */
body.cs-loading #cs-now, body.cs-loading #cs-zone, body.cs-loading #cs-mean,
body.cs-loading #cs-lean-word,
body.cs-loading .ig-substats b {
  color: transparent !important; border-radius: 5px;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--elevated) 37%, var(--panel-2) 63%);
  background-size: 400% 100%; animation: as-shimmer 1.3s ease-in-out infinite; }
body.cs-loading #cs-marker { visibility: hidden; }
body.cs-loading .cs-lean-bar i { color: transparent; }
body.cs-loading #cs-board tr { opacity: 0; }
body.cs-loading .cs-drivers { visibility: hidden; }