/* World. Tokens and components come from style.css. */

.world-section .section-head { margin-top: var(--sp-5); }
.world-section:first-child .section-head { margin-top: 0; }

/* ---------- cycles ---------- */

.cycles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); align-items: start; }
.cycles.skeleton span { height: 11rem; }
.cycle { margin-top: 0; }
.cycle h3 { margin: 0; font: 400 var(--step-1)/1.3 var(--display); color: var(--ivory); }
.cycle .eyebrow { color: var(--muted); }

.cycle .now { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.cycle .now .state { font: 600 var(--step-2)/1.1 var(--display); }
.cycle .now .left { color: var(--muted); font-size: var(--step--1); }
.cycle .now .left time { color: var(--ivory); font-size: var(--step-0); }

.cycle .next { list-style: none; margin: 0; padding: var(--sp-2) 0 0; border-top: 1px solid var(--line-soft); font-size: var(--step--1); }
.cycle .next li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 0.15rem 0; }
.cycle .next .quiet { text-align: right; }

/* ---------- Baro Ki'Teer ---------- */

.baro { margin-top: 0; }
.baro .panel-head h3 { font-size: var(--step-2); }
.baro .now { margin: 0; color: var(--muted); }
.baro .now time { color: var(--ivory); font: 600 var(--step-2)/1.2 var(--num); }
.baro .when { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--step--1); }
.inventory td:first-child { min-width: 14rem; }
.inventory a.cell-name { color: inherit; text-decoration: none; }
.inventory a.cell-name:hover span { color: var(--gold-hi); }

.estimates h3 { margin: 0 0 var(--sp-2); font: 400 var(--step-0)/1.3 var(--display); color: var(--ivory); }
.estimates ol { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.estimates li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--sp-3); padding: 0.2rem 0; border-top: 1px solid var(--line-soft); }
.estimates li:first-child { border-top: 0; }
.estimates p { margin: var(--sp-2) 0 0; font-size: var(--step--2); }

/* ---------- Prime Resurgence ---------- */

.rotations { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; }
.rotation { margin-top: 0; }
.rotation h3 { margin: 0; font: 400 var(--step-2)/1.2 var(--display); color: var(--ivory); }
.rotation h4 { margin: var(--sp-4) 0 var(--sp-2); color: var(--muted); font: 600 var(--step--2)/1.3 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; }
.rotation .now { margin: var(--sp-1) 0 0; color: var(--muted); }
.rotation .now time { color: var(--ivory); font: 600 var(--step-1)/1.2 var(--num); }
.rotation .when { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--step--1); }
.rotation .note { margin: var(--sp-2) 0 0; font-size: var(--step--2); }
.frames, .relics, .sets { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.frames a, .sets a, .relics a { color: inherit; text-decoration: none; }
.frames a:hover span:first-of-type, .sets a:hover span:first-of-type, .relics a:hover span:first-of-type { color: var(--gold-hi); }
.cell-name .quiet { font-size: var(--step--1); }
.evergreen { margin-top: var(--sp-3); }
.evergreen summary { cursor: pointer; color: var(--muted); font-size: var(--step--1); }

/* State colours: warm/day in gold, cold/night in void blue */
.state { color: var(--gold-hi); }
.state[data-state="night"], .state[data-state="cold"], .state[data-state="vome"], .state[data-state="corpus"] { color: var(--info); }
.state[data-state="grineer"], .state[data-state="anger"] { color: var(--danger); }
.state[data-state="sorrow"], .state[data-state="fear"] { color: var(--info); }
.state[data-state="joy"] { color: var(--ok); }
.state[data-state="envy"] { color: var(--warn); }