/* views.css — per-view layout. F1: the Wheel landing. */
.view-wheel { max-width: var(--maxw); width: 100%; text-align: center; }
.wheel-mark {
  font-size: 3rem; color: var(--thread); opacity: .8;
  animation: turn 40s linear infinite; display: inline-block;
}
@keyframes turn { to { transform: rotate(360deg); } }
.wheel-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--parchment);
  letter-spacing: .05em;
  margin: .4rem 0 .3rem;
}
.wheel-sub { color: var(--muted); margin: 0 auto 2.2rem; max-width: 620px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.wheel-foot {
  margin-top: 2.4rem;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wheel-nav { margin-top: 1.8rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* The Great Ledger (tables) */
.view-tables { max-width: var(--maxw); width: 100%; }
.tables-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--parchment); letter-spacing: .05em; margin: .3rem 0 1rem; }
.tab-switch { margin-bottom: 1.4rem; }
.tables-mount { min-height: 300px; }

/* The Web of the Pattern (graphs) */
.view-graphs { max-width: var(--maxw); width: 100%; }
.graphs-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--parchment); letter-spacing: .05em; margin: .3rem 0 1rem; }
.graph-bar { display: flex; gap: .6rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.graph-focus { max-width: 260px; }
.graph-depth { background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; font-family: var(--font-body); }
.graph-canvas { height: min(66vh, 620px); background: radial-gradient(600px 400px at 50% 40%, #16132a, var(--ink-2)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.graph-loading { display: flex; align-items: center; justify-content: center; height: 100%; font-style: italic; }
.graph-meta { margin-top: .7rem; text-align: center; letter-spacing: .06em; }

/* The Reading of the Pattern (charts) */
.view-charts { max-width: var(--maxw); width: 100%; }
.charts-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--parchment); letter-spacing: .05em; margin: .3rem 0 1.4rem; }
.chart-card { background: linear-gradient(180deg, var(--ink-2), var(--ink-3)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.2rem 1rem; margin-bottom: 1.4rem; }
.chart-h { font-family: var(--font-display); color: var(--gold); font-size: 1.25rem; margin: 0 0 .1rem; letter-spacing: .03em; }
.chart-sub { margin: 0 0 1rem; }
.chart-canvas { width: 100%; min-height: 300px; }
.chart-note { margin: .8rem 0 0; line-height: 1.4; }
/* uPlot dark theme overrides */
.u-legend { color: var(--muted); font-family: var(--font-body); font-size: .82rem; }
.u-legend .u-marker { border-radius: 2px; }
.u-title { color: var(--parchment); }
.uplot, .u-wrap { color: var(--muted); }
@media (max-width: 720px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* S1 — the Wheel dashboard: the balance of power, the world vs canon, the feed, the mini-web, the notable souls */
.dash-grid {
  display: grid; gap: 1rem; margin-top: 1.8rem; text-align: left;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "a b" "c c" "d e";
}
.dash-a { grid-area: a; } .dash-b { grid-area: b; } .dash-c { grid-area: c; } .dash-d { grid-area: d; } .dash-e { grid-area: e; }
@media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e"; } }

.panel { background: linear-gradient(180deg, var(--ink-2), var(--ink-3)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }
.panel-title { font-family: var(--font-display); color: var(--gold); font-size: 1.05rem; margin: 0; letter-spacing: .03em; }
.panel-sub { color: var(--muted); font-size: .78rem; font-style: italic; margin-top: .1rem; }
.panel-link { color: var(--muted); border: 1px solid var(--line); border-radius: 999px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex: none; }
.panel-link:hover { color: var(--gold); border-color: var(--gold); text-decoration: none; }
.panel-loading { color: var(--muted); font-style: italic; padding: .6rem 0; }

/* balance of power */
.balance { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bal-row { display: grid; grid-template-columns: 2.4ch 1fr auto 4rem 2.4rem; align-items: center; gap: .5rem; }
.bal-rank { color: var(--muted); font-size: .78rem; }
.bal-name { color: var(--parchment); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-sub { font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; padding: .1rem .4rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tag-nation { color: var(--ajah-blue); border-color: var(--ajah-blue); }
.tag-order { color: var(--ajah-yellow); border-color: var(--ajah-yellow); }
.tag-people { color: var(--ajah-green); border-color: var(--ajah-green); }
.tag-shadow { color: var(--ajah-red); border-color: var(--ajah-red); }
.bal-bar { height: 7px; background: var(--ink); border-radius: 999px; overflow: hidden; }
.bal-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--thread), var(--gold)); }
.bal-score { color: var(--gold); font-family: var(--font-display); font-size: .85rem; text-align: right; }

/* vs canon */
.canon-pct { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; }
.canon-pct.good { color: var(--ajah-green); } .canon-pct.fair { color: var(--gold); } .canon-pct.frayed { color: var(--danger); }
.canon-bar { height: 9px; background: var(--ink); border-radius: 999px; overflow: hidden; margin: .5rem 0 .4rem; }
.canon-fill { height: 100%; }
.canon-fill.good { background: var(--ajah-green); } .canon-fill.fair { background: var(--gold); } .canon-fill.frayed { background: var(--danger); }
.canon-label { color: var(--muted); font-size: .82rem; }
.canon-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .9rem 0 .9rem; }
.canon-mini { background: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .2rem; text-align: center; }
.cm-v { font-family: var(--font-display); color: var(--parchment); font-size: 1.1rem; }
.cm-l { color: var(--muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; }
.markers { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .9rem; }
.marker { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line); padding: .18rem 0; }
.mk-k { color: var(--muted); font-size: .76rem; }
.mk-v { color: var(--parchment); font-size: .82rem; font-style: italic; }
.verifier { margin: 0; line-height: 1.4; }

/* the chronicle feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed-row { display: flex; align-items: baseline; gap: .55rem; padding: .35rem 0; border-bottom: 1px dotted var(--line); }
.feed-row:last-child { border-bottom: none; }
.feed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--thread); flex: none; align-self: center; }
.feed-text { color: var(--text); font-size: .9rem; flex: 1; }
.feed-sal { color: var(--gold); font-size: .72rem; font-family: var(--font-display); flex: none; }

/* the mini social-graph */
.wheel-graph { height: 320px; background: radial-gradient(500px 300px at 50% 40%, #16132a, var(--ink-2)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wheel-graph .panel-loading { display: flex; align-items: center; justify-content: center; height: 100%; }

/* notable souls */
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table td { padding: .42rem .3rem; border-bottom: 1px dotted var(--line); font-size: .9rem; }
.mini-table tr:last-child td { border-bottom: none; }
.ms-name { color: var(--parchment); font-family: var(--font-display); font-size: .92rem; }
.ms-her { color: var(--muted); font-style: italic; }
.ms-rank { color: var(--gold); text-align: right; font-family: var(--font-display); }

/* S2 — the Chronicle (the self-written novel reading view) */
.view-chronicle { max-width: 780px; width: 100%; }
.chronicle-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.8rem); color: var(--parchment); letter-spacing: .05em; margin: .3rem 0 .3rem; }
.chronicle-sub { color: var(--muted); font-style: italic; max-width: 620px; margin: 0 0 1.6rem; }
.chronicle-mount { min-height: 300px; }
/* the weave summary */
.weave-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.6rem; }
.ws { background: linear-gradient(180deg, var(--ink-2), var(--ink-3)); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .6rem; text-align: center; }
.ws-v { font-family: var(--font-display); color: var(--gold); font-size: 1.5rem; line-height: 1; }
.ws-l { color: var(--parchment); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .35rem; }
.ws-s { color: var(--muted); font-size: .68rem; font-style: italic; margin-top: .2rem; line-height: 1.25; }
@media (max-width: 640px) { .weave-bar { grid-template-columns: repeat(2, 1fr); } }
/* the chapter strip (pager) */
.chap-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.2rem; }
.chap-tab { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .8rem; cursor: pointer; font-family: var(--font-body); }
.chap-tab:hover { border-color: var(--gold); }
.chap-tab.active { border-color: var(--gold); background: var(--ink-3); }
.ct-num { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }
.ct-pov { color: var(--parchment); font-family: var(--font-display); font-size: .9rem; white-space: nowrap; }
/* the chapter */
.chapter { background: linear-gradient(180deg, var(--ink-2), var(--ink-3)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.7rem; }
.chapter-head { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1.2rem; }
.chapter-eyebrow { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.chapter-pov { font-family: var(--font-display); color: var(--parchment); font-size: 1.8rem; letter-spacing: .03em; margin: .3rem 0 .1rem; }
.chapter-title { color: var(--gold); font-style: italic; font-size: 1.05rem; }
.chapter-coh { margin-top: .5rem; display: inline-block; color: var(--muted); font-size: .74rem; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; letter-spacing: .04em; }
.beats { list-style: none; margin: 0; padding: 0; counter-reset: beat; }
.beat { display: grid; grid-template-columns: 46px 1fr auto; align-items: baseline; gap: .8rem; padding: .55rem 0; border-bottom: 1px dotted var(--line); }
.beat:last-child { border-bottom: none; }
.beat-meter { width: 46px; height: 6px; align-self: center; background: var(--ink); border-radius: 999px; overflow: hidden; }
.beat-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ajah-blue), var(--gold)); }
.beat-text { color: var(--text); font-size: 1.05rem; line-height: 1.5; }
.beat.is-climax .beat-text { color: var(--parchment); font-weight: 600; }
.beat.is-foreshadow .beat-text { color: var(--text); font-style: italic; }
.beat-tag { flex: none; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; padding: .12rem .5rem; border-radius: 999px; align-self: center; }
.beat-tag.climax { color: var(--danger); border: 1px solid var(--danger); }
.beat-tag.foreshadow { color: var(--ajah-blue); border: 1px solid var(--ajah-blue); }
.chapter-foot { margin: 1.2rem 0 0; line-height: 1.5; }
.chap-nav { display: flex; justify-content: space-between; margin-top: 1.4rem; }

/* The Weave gallery */
.view-weave { max-width: var(--maxw); width: 100%; }
.view-weave .back-link { margin-bottom: 1rem; }
.weave-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--parchment); letter-spacing: .05em; margin: .2rem 0 .3rem; }
.weave-sub { max-width: 680px; margin: 0 0 1.8rem; }
.weave-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 860px) { .weave-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .weave-grid { grid-template-columns: 1fr; } }