/* ============================================================================
views.css — page chrome + per-view layout. Depends on tokens.css, base.css,
components.css (uses .card, .btn, .chip, .nav-tabs, .meter, .egg, .dice-*).
---------------------------------------------------------------------------
CONTRACT: page structure this file assumes
---------------------------------------------------------------------------
…
…6 .nav-tab buttons…
… modals …
View switching is pure attribute/DOM state: the router adds/removes the
`hidden` attribute on the target `.view` (never a class-swap, never inline
style writes) and moves `aria-current="page"` to the matching `.nav-tab`.
Exactly one `.view` is unhidden at a time.
Every view section may open with a shared eyebrow+title+intro block:
Breakpoints used throughout this file (mobile-first): 768px (tablet —
2-column layouts switch on), 1024px (desktop — 3-column grids / wide
side-panels switch on). Verified mentally at 375 / 768 / desktop widths.
No layout in this file uses a fixed px width or height on an image
container — the dragon portrait and every card media block use
aspect-ratio so nothing deforms on narrow screens.
============================================================================ */
/* ---------------------------------------------------------------------- */
/* PAGE CHROME */
/* ---------------------------------------------------------------------- */
.app-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: color-mix(in oklab, var(--surface-0) 92%, transparent);
backdrop-filter: blur(10px);
border-bottom: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 25%, transparent);
}
.app-nav {
position: sticky;
top: 0;
z-index: calc(var(--z-sticky) - 1);
padding: var(--space-3) var(--space-4) 0;
max-width: 1180px;
margin-inline: auto;
}
.app-main {
position: relative;
z-index: var(--z-app);
min-height: 60vh;
padding-bottom: var(--space-16);
}
.view {
display: block;
position: relative; /* anchors .coachmark-trigger, the "?" help button */
max-width: 1180px;
margin-inline: auto;
padding: var(--space-5) var(--space-4);
animation: view-in var(--dur-slow) var(--ease-standard);
}
.view[hidden] { display: none; }
@keyframes view-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.view { animation: none; }
}
.view-header {
max-width: 640px;
margin: 0 auto var(--space-8);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.view-header h2 { font-family: var(--font-display); font-size: var(--fs-2xl); }
.view-header p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }
/* ---------------------------------------------------------------------- */
/* VIEW: HATCHERY — 7-species grid + awakening altar */
/* ---------------------------------------------------------------------- */
.species-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
.species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.species-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the 7th, secret-mythic species — always spans the full row */
.species-card--mythic {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.species-card--mythic { flex-direction: row; }
.species-card--mythic .card-media { width: 42%; aspect-ratio: auto; height: auto; }
.species-card--mythic .card-body { width: 58%; justify-content: center; }
}
.hatch-altar {
max-width: 640px;
margin-inline: auto;
text-align: center;
padding: var(--space-8) var(--space-5);
}
.hatch-altar .egg { margin-bottom: var(--space-6); }
.hatch-altar-progress {
max-width: 320px;
margin: var(--space-5) auto 0;
}
.hatch-altar-form {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
margin-top: var(--space-6);
}
.hatch-altar-form input[type="text"] {
flex: 1 1 220px;
padding: 0.75em 1em;
border-radius: var(--radius-md);
border: var(--border-thin) solid color-mix(in oklab, var(--gold-leaf) 45%, transparent);
background: var(--surface-sunken);
color: var(--text-body);
font-family: var(--font-cinzel);
font-size: var(--fs-sm);
}
.hatch-altar-form input[type="text"]::placeholder { color: var(--text-muted); }
.hatch-altar-form input[type="text"]:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--gold-hi); }
/* ---------------------------------------------------------------------- */
/* VIEW: SANCTUARY — dragon portrait + care actions / vitals & stages */
/* ---------------------------------------------------------------------- */
.sanctuary-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 768px) {
.sanctuary-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.dragon-portrait {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-width: 420px;
margin-inline: auto;
border-radius: var(--radius-xl);
overflow: hidden;
border: var(--border-thick) solid var(--gold-leaf);
box-shadow: var(--shadow-lg), var(--shadow-spirit-glow);
cursor: pointer;
}
.dragon-portrait img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
transition: transform var(--dur-slow) var(--ease-standard);
}
.dragon-portrait:hover img { transform: scale(1.05); }
/* js/ui/sanctuary.js sets img.dataset.treatment from each growth stage's
`imageTreatment` field ('none' | 'radiant' | 'ancient') on
#sanctuaryDragonImage directly — matched both scoped to .dragon-portrait
and by id, in case index.html doesn't nest that img in a .dragon-portrait
wrapper. */
.dragon-portrait img[data-treatment="radiant"],
#sanctuaryDragonImage[data-treatment="radiant"] {
filter: saturate(1.3) brightness(1.08) drop-shadow(0 0 20px var(--spirit-glow));
}
.dragon-portrait img[data-treatment="ancient"],
#sanctuaryDragonImage[data-treatment="ancient"] {
filter: sepia(0.3) contrast(1.06) saturate(0.8);
}
.dragon-portrait::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(12,8,6,0.9) 0%, transparent 45%);
pointer-events: none;
}
.dragon-portrait-badge {
position: absolute;
top: var(--space-3); left: var(--space-3);
z-index: 1;
}
.dragon-portrait-hint {
position: absolute;
bottom: var(--space-3); left: var(--space-3); right: var(--space-3);
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-cinzel);
font-size: var(--fs-xs);
color: var(--text-heading);
}
/* container for js/fx.js floating pet-reaction sprites (hearts etc) */
.dragon-portrait-reactions {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.stage-switcher {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
margin: var(--space-4) 0;
}
.care-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
margin-top: var(--space-5);
}
@media (min-width: 480px) {
.care-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.care-action {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding: var(--space-3) var(--space-2);
border-radius: var(--radius-md);
background: var(--surface-2);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 30%, transparent);
color: var(--text-heading);
font-family: var(--font-cinzel);
font-size: var(--fs-xs);
transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.care-action:hover { border-color: var(--gold-hi); transform: translateY(-2px); }
.care-action .icon { width: 1.5rem; height: 1.5rem; color: var(--gold-leaf); }
.vitals-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.stage-row-list { display: flex; flex-direction: column; gap: var(--space-2); }
.stage-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2);
border-radius: var(--radius-lg);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 20%, transparent);
background: var(--surface-sunken);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.stage-row:hover { border-color: var(--gold-leaf); }
.stage-row[data-active="true"] {
border-color: var(--spirit-rim);
background: color-mix(in oklab, var(--surface-2) 80%, var(--spirit) 6%);
box-shadow: var(--shadow-spirit-glow);
}
.stage-row-thumb {
width: 3rem; height: 3rem;
border-radius: var(--radius-md);
object-fit: cover;
border: var(--border-hairline) solid var(--gold-dim);
flex-shrink: 0;
}
.stage-row-copy { flex: 1; min-width: 0; }
.stage-row-copy .title { font-family: var(--font-cinzel); font-weight: 700; font-size: var(--fs-sm); color: var(--text-heading); }
.stage-row-copy .desc { font-size: var(--fs-2xs); color: var(--text-muted); }
/* ---------------------------------------------------------------------- */
/* VIEW: THE CHRONICLE — narrative column + oracle/dice side panel */
/* ---------------------------------------------------------------------- */
.chronicle-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 1024px) {
.chronicle-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
}
.chronicle-column {
background:
var(--noise-grain-coarse),
linear-gradient(165deg, var(--parchment) 0%, var(--parchment-shade) 100%);
background-blend-mode: overlay, normal;
color: var(--ink);
border-radius: var(--radius-lg);
border: var(--border-gold);
box-shadow: var(--shadow-lg), var(--shadow-inset-parchment);
padding: var(--space-8) var(--space-6);
font-family: var(--font-scroll);
font-size: var(--fs-md);
line-height: var(--lh-loose);
}
.chronicle-column p { color: var(--ink); margin-bottom: var(--space-4); }
.chronicle-column h3 { color: var(--iron-gall); font-family: var(--font-display); }
.oracle-panel {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.oracle-panel .dice-scene { margin-block: var(--space-2); }
.chronicle-choices {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-6);
}
.chronicle-choices .btn { justify-content: flex-start; text-align: left; }
/* Oracle widget (js/ui/oracleview.js) — lives inside .oracle-panel above */
.oracle-answer {
font-family: var(--font-cinzel);
font-weight: 700;
font-size: var(--fs-md);
color: var(--text-heading);
padding: var(--space-2) 0;
}
.oracle-answer--yes, .oracle-answer--yesbut, .oracle-answer--yesand { color: var(--gold-hi); }
.oracle-answer--no, .oracle-answer--nobut, .oracle-answer--noand { color: var(--text-muted); }
.oracle-storm-event {
margin-top: var(--space-2);
padding: var(--space-3);
border-radius: var(--radius-md);
background: var(--surface-sunken);
border: var(--border-hairline) solid var(--spirit-rim);
color: var(--text-body);
font-size: var(--fs-sm);
}
/* Threads (open story clocks) */
.threads-empty { color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; }
.thread-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--surface-2);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 25%, transparent);
margin-bottom: var(--space-2);
}
.thread-row.is-resolved { opacity: 0.55; }
.thread-row.is-resolved .thread-clock-fill { background: var(--gold-dim); }
.thread-name { font-family: var(--font-cinzel); font-size: var(--fs-sm); color: var(--text-heading); }
.thread-name em { color: var(--text-muted); font-style: italic; }
.thread-clock {
width: 96px;
height: 0.5rem;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 25%, transparent);
overflow: hidden;
flex-shrink: 0;
}
.thread-clock-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold-dim), var(--gold-leaf));
transition: width var(--dur-slow) var(--ease-standard);
}
/* Sky Roll result card */
.roll-tier {
font-family: var(--font-cinzel);
font-size: var(--fs-md);
padding: var(--space-2) 0;
}
.roll-tier--strong { color: var(--gold-hi); }
.roll-tier--weak { color: var(--text-accent); }
.roll-tier--fail { color: var(--text-muted); }
.roll-detail { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-1); }
.roll-detail--scar { color: var(--spirit-rim); }
.roll-detail--instinct { color: var(--text-accent); font-style: italic; }
.ending-epilogue, .example-play p, .example-play blockquote {
font-family: var(--font-scroll);
line-height: var(--lh-loose);
}
/* Tables Reference (Settings > Sky-Charts) — // */
.table-ref {
border-radius: var(--radius-md);
background: var(--surface-2);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 25%, transparent);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-2);
}
.table-ref summary {
cursor: pointer;
font-family: var(--font-cinzel);
font-weight: 700;
color: var(--text-heading);
}
.table-ref-count { color: var(--text-muted); font-weight: 400; font-size: var(--fs-xs); }
table, .table-ref-table {
width: 100%;
border-collapse: collapse;
margin-top: var(--space-2);
font-size: var(--fs-sm);
}
table th, table td, .table-ref-table th, .table-ref-table td {
padding: var(--space-1) var(--space-2);
border-bottom: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 18%, transparent);
text-align: left;
color: var(--text-body);
}
table th, .table-ref-table th { color: var(--text-heading); font-family: var(--font-cinzel); }
/* ---------------------------------------------------------------------- */
/* VIEW: DICE ALTAR */
/* ---------------------------------------------------------------------- */
.dice-altar {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
text-align: center;
}
.dice-altar .dice-scene { width: calc(var(--dice-size) * 1.35); height: calc(var(--dice-size) * 1.35); }
.dice-result {
font-family: var(--font-display);
font-size: var(--fs-3xl);
color: var(--text-heading);
text-shadow: 0 0 18px var(--spirit-glow);
}
.roll-log {
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
gap: var(--space-1);
max-height: 220px;
overflow-y: auto;
padding: var(--space-3);
border-radius: var(--radius-md);
background: var(--surface-sunken);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 25%, transparent);
text-align: left;
}
.roll-log-entry {
display: flex;
justify-content: space-between;
font-size: var(--fs-xs);
color: var(--text-muted);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
}
.roll-log-entry:nth-child(odd) { background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
/* ---------------------------------------------------------------------- */
/* VIEW: JOURNAL — rider's written entries */
/* ---------------------------------------------------------------------- */
.journal-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 768px) {
.journal-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.journal-list { display: flex; flex-direction: column; gap: var(--space-2); }
.journal-entry-btn {
text-align: left;
padding: var(--space-3);
border-radius: var(--radius-md);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 22%, transparent);
background: var(--surface-2);
color: var(--text-body);
}
.journal-entry-btn:hover { border-color: var(--gold-leaf); }
.journal-entry-btn[aria-current="true"] { border-color: var(--gold-hi); background: var(--surface-raised); }
.journal-entry-btn .date { display: block; font-size: var(--fs-2xs); color: var(--text-muted); }
.journal-page {
background:
var(--noise-grain-coarse),
linear-gradient(165deg, var(--parchment) 0%, var(--parchment-shade) 100%);
background-blend-mode: overlay, normal;
color: var(--ink);
border-radius: var(--radius-lg);
border: var(--border-gold);
box-shadow: var(--shadow-lg), var(--shadow-inset-parchment);
padding: var(--space-8);
font-family: var(--font-scroll);
line-height: var(--lh-loose);
min-height: 320px;
}
.journal-page textarea {
width: 100%;
min-height: 240px;
background: transparent;
border: none;
resize: vertical;
color: var(--ink);
font-family: var(--font-scroll);
font-size: var(--fs-md);
line-height: var(--lh-loose);
}
.journal-page textarea:focus-visible { outline: none; }
/* The REAL rendered lists js/ui/journal.js builds (#journalPastEntries,
#flightLogList) — a flat reverse-chronological feed of articles, not the
.journal-list/.journal-entry-btn sidebar-nav pattern above. Both patterns
are supported; use whichever index.html actually wires up. */
.journal-empty { color: var(--text-muted); font-style: italic; padding: var(--space-3) 0; }
.journal-entry, .flight-entry {
padding: var(--space-4);
border-radius: var(--radius-md);
background: var(--surface-2);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 22%, transparent);
margin-bottom: var(--space-3);
}
.journal-entry-meta, .flight-entry-meta {
font-family: var(--font-cinzel);
font-size: var(--fs-2xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin-bottom: var(--space-2);
}
.journal-entry-text { color: var(--text-body); font-family: var(--font-scroll); line-height: var(--lh-normal); }
.flight-entry p { color: var(--text-body); margin-bottom: var(--space-1); }
.flight-entry strong { color: var(--text-heading); }
.flight-reflection { color: var(--text-accent); font-style: italic; margin-top: var(--space-2); }
/* ---------------------------------------------------------------------- */
/* VIEW: CHARACTER SHEET (rider) — new view, no legacy markup to match */
/* ---------------------------------------------------------------------- */
.sheet-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
padding: var(--space-5);
margin-bottom: var(--space-6);
border-radius: var(--radius-lg);
border: var(--border-gold);
background: var(--surface-2);
box-shadow: var(--shadow-md);
}
.sheet-avatar {
width: 4.5rem; height: 4.5rem;
border-radius: var(--radius-pill);
object-fit: cover;
border: var(--border-thick) solid var(--gold-leaf);
box-shadow: var(--shadow-spirit-glow);
flex-shrink: 0;
}
.sheet-identity { flex: 1; min-width: 180px; }
.sheet-identity h2 { margin-bottom: var(--space-1); }
.sheet-identity .subtitle { font-family: var(--font-scroll); color: var(--text-accent); font-style: italic; }
.sheet-attributes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-6);
}
@media (min-width: 640px) {
.sheet-attributes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.attribute-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding: var(--space-4) var(--space-2);
border-radius: var(--radius-md);
background: var(--surface-2);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 30%, transparent);
text-align: center;
}
.attribute-card .icon { width: 1.75rem; height: 1.75rem; color: var(--gold-leaf); }
.attribute-card .label { font-family: var(--font-cinzel); font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.attribute-card .value { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-heading); }
.sheet-two-col {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 768px) {
.sheet-two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.sheet-section {
padding: var(--space-5);
border-radius: var(--radius-lg);
background: var(--surface-2);
border: var(--border-gold-dim);
}
.sheet-section h3 {
font-size: var(--fs-md);
margin-bottom: var(--space-3);
padding-bottom: var(--space-2);
border-bottom: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 25%, transparent);
}
.sheet-list { display: flex; flex-direction: column; gap: var(--space-2); }
.sheet-list-item {
display: flex;
justify-content: space-between;
gap: var(--space-2);
font-size: var(--fs-sm);
color: var(--text-body);
padding: var(--space-2);
border-radius: var(--radius-sm);
background: var(--surface-sunken);
}
.sheet-list-item .tag { color: var(--text-muted); font-size: var(--fs-2xs); }
/* ---------------------------------------------------------------------- */
/* VIEW: SETTINGS */
/* ---------------------------------------------------------------------- */
.settings-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 640px;
margin-inline: auto;
}
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4);
border-radius: var(--radius-lg);
background: var(--surface-2);
border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 22%, transparent);
}
.settings-row-copy .title { font-family: var(--font-cinzel); color: var(--text-heading); font-size: var(--fs-sm); font-weight: 700; }
.settings-row-copy .desc { font-size: var(--fs-2xs); color: var(--text-muted); }
.settings-row input[type="range"] {
width: 140px;
accent-color: var(--gold-leaf);
}
/* accessible switch: */
.switch {
position: relative;
width: 3rem; height: 1.6rem;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
border: var(--border-hairline) solid var(--gold-dim);
flex-shrink: 0;
}
.switch::before {
content: "";
position: absolute;
top: 2px; left: 2px;
width: calc(1.6rem - 6px);
height: calc(1.6rem - 6px);
border-radius: 50%;
background: var(--gold-dim);
transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.switch[aria-checked="true"] { border-color: var(--gold-hi); }
.switch[aria-checked="true"]::before {
background: var(--gold-hi);
transform: translateX(calc(3rem - 1.6rem));
}
/* ---------------------------------------------------------------------- */
/* SHARED RESPONSIVE UTILITIES */
/* ---------------------------------------------------------------------- */
.text-center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
@media (max-width: 767px) {
.hide-on-mobile { display: none !important; }
}
@media (min-width: 768px) {
.hide-on-desktop { display: none !important; }
}
/* ============================================================================
INTEGRATION PATCH — added by the orchestrator while wiring index.html
against the real, delivered CSS (a handful of layout wrappers and text
atoms were introduced in index.html/js/ui/*.js after the initial design
hand-off and have no equivalent above). Every value here is a token from
tokens.css; nothing here redefines an existing selector. Danger/negative
states use --iron-gall, never --seal-red, per the rule in tokens.css that
the wax-seal red is reserved exclusively for the exported keepsake.
============================================================================ */
/* -- header chrome --------------------------------------------------------- */
/* Below ~480px the naive single-row header (brand + 2 meters + action
button) genuinely does not fit — measured in-browser at 279px viewport,
.app-header scrolled to 616px wide, forcing horizontal scroll on the
ENTIRE page (not just the header). flex-wrap lets the stats/actions row
drop to its own line instead of overflowing; the min-width/gap/font
shrinks below make that second row fit too, rather than just relocating
the same overflow one row down. */
.app-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); max-width: 1180px; margin-inline: auto; width: 100%; }
.brand { display: flex; align-items: center; gap: var(--space-3); background: none; border: none; padding: 0; cursor: pointer; color: inherit; min-width: 0; }
.brand-mark { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.brand-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-heading); letter-spacing: var(--ls-wide); white-space: nowrap; }
.brand-subtitle { font-family: var(--font-cinzel); font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-wider); white-space: nowrap; }
.header-stats { display: flex; align-items: center; gap: var(--space-5); }
.header-stats .meter { min-width: 6.5rem; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 640px) { .header-stats .meter:last-child .meter-track { display: none; } }
@media (max-width: 480px) {
.app-header-inner { gap: var(--space-1) var(--space-2); }
.brand-subtitle { display: none; }
.header-stats { gap: var(--space-3); order: 3; flex-basis: 100%; justify-content: center; }
.header-stats .meter { min-width: 5rem; }
.header-stats .meter-label { font-size: 0.625rem; }
}
/* -- generic view helpers --------------------------------------------------- */
.card-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.card-title--spaced { margin-top: var(--space-5); }
.view-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
.view-actions--stacked { flex-direction: column; align-items: stretch; max-width: 360px; margin-inline: auto; }
.view-actions--tight { margin-top: var(--space-2); margin-bottom: var(--space-6); justify-content: flex-start; }
.empty-state { text-align: center; padding: var(--space-12) var(--space-4); color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.chip--muted { opacity: 0.75; }
/* -- form field atoms (label/value/row/block — used across every view) ----- */
.field-label { display: block; font-family: var(--font-cinzel); font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); margin-bottom: var(--space-1); }
.field-value { color: var(--text-body); font-size: var(--fs-sm); line-height: var(--lh-normal); margin-bottom: var(--space-2); }
.field-block { margin-bottom: var(--space-4); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field-input, .field-select, .field-textarea { width: 100%; margin-bottom: var(--space-1); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; }
.toggle-row small { display: block; color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: var(--space-1); }
.file-btn { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.trait-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
/* -- Hatchery: altar / egg ritual -------------------------------------------- */
.altar-card { margin-top: var(--space-8); text-align: center; }
.egg-zone { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin: var(--space-6) 0; }
.egg-progress-label { font-family: var(--font-cinzel); font-size: var(--fs-xs); color: var(--text-muted); }
.egg-progress-bar { width: min(240px, 80%); height: 0.5rem; border-radius: var(--radius-pill); background: var(--surface-sunken); border: var(--border-hairline) solid color-mix(in oklab, var(--gold-leaf) 25%, transparent); overflow: hidden; }
.egg-progress-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold-dim), var(--gold-hi)); transition: width var(--dur-slow) var(--ease-standard); }
.hatch-controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 360px; margin-inline: auto; }
/* -- Sanctuary layout -------------------------------------------------------- */
.sanctuary-media-card { display: flex; flex-direction: column; gap: var(--space-4); }
.sanctuary-media-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.sanctuary-sub { color: var(--text-accent); font-family: var(--font-scroll); font-style: italic; }
.sanctuary-image-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 420px; margin-inline: auto; border-radius: var(--radius-xl); overflow: hidden; border: var(--border-gold); box-shadow: var(--shadow-lg), var(--shadow-spirit-glow); }
.sanctuary-image-frame img { width: 100%; height: 100%; object-fit: cover; }
.sanctuary-image-frame img[data-treatment="radiant"] { filter: saturate(1.15) brightness(1.06); }
.sanctuary-image-frame img[data-treatment="ancient"] { filter: sepia(0.18) saturate(0.85) contrast(1.05); }
.sanctuary-caption { text-align: center; font-family: var(--font-scroll); font-style: italic; color: var(--text-muted); margin-top: var(--space-2); }
.sanctuary-unlock { text-align: center; font-size: var(--fs-xs); color: var(--text-accent); }
.sanctuary-side { display: flex; flex-direction: column; gap: var(--space-4); }
/* -- Chronicle layout --------------------------------------------------------- */
.chronicle-scene { display: flex; flex-direction: column; gap: var(--space-4); }
.chronicle-scene-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.chronicle-body { color: var(--ink); line-height: var(--lh-loose); }
.chronicle-body p { margin-bottom: var(--space-3); }
.chronicle-hint { font-style: italic; color: color-mix(in oklab, var(--ink) 65%, transparent); font-size: var(--fs-sm); }
/* the Scene Check "twist" banner — an ink-toned callout, not a red one */
.chronicle-twist { font-family: var(--font-cinzel); font-size: var(--fs-sm); color: var(--iron-gall); background: color-mix(in oklab, var(--iron-gall) 8%, var(--parchment-shade)); border: var(--border-hairline) solid color-mix(in oklab, var(--iron-gall) 35%, transparent); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.chronicle-side { display: flex; flex-direction: column; gap: var(--space-4); }
.dice-row { display: flex; justify-content: center; gap: var(--space-6); margin: var(--space-4) 0; }
.momentum-line { text-align: center; font-family: var(--font-cinzel); font-size: var(--fs-sm); color: var(--text-accent); margin-bottom: var(--space-3); }
.action-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.oracle-result { min-height: 1.5em; margin: var(--space-3) 0; }
.roll-result { margin-top: var(--space-3); }
.roll-result .roll-detail { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-1); }
.roll-result .roll-detail--scar { color: var(--text-heading); font-weight: 700; }
.threads-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.prompt-text { font-family: var(--font-scroll); font-style: italic; color: var(--text-body); margin-bottom: var(--space-1); }
.prompt-starter { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
/* -- Journal layout ------------------------------------------------------------ */
.journal-main { display: flex; flex-direction: column; }
.journal-flight { display: flex; flex-direction: column; gap: var(--space-2); }
.journal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.journal-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.journal-entries { display: flex; flex-direction: column; gap: var(--space-3); max-height: 50vh; overflow-y: auto; margin-bottom: var(--space-5); padding-right: var(--space-1); }
.flight-log-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 40vh; overflow-y: auto; margin-bottom: var(--space-3); }
.ink-canvas-frame { border-radius: var(--radius-lg); overflow: hidden; border: var(--border-gold-dim); background: var(--parchment); height: 22rem; }
.ink-canvas-frame canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
/* -- Settings layout ------------------------------------------------------------ */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); max-width: 640px; margin-inline: auto; }
@media (min-width: 768px) { .settings-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.card--danger { border-color: color-mix(in oklab, var(--iron-gall) 70%, var(--gold-leaf) 10%); }
.version-line { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font-size: var(--fs-2xs); margin-top: var(--space-4); }
@media (prefers-reduced-motion: reduce) {
.sanctuary-image-frame img { transition: none; }
}
/* ============================================================================
CONTRAST FIX — dark-theme chrome nested inside the two light-parchment
surfaces (.chronicle-column, .journal-page).
Confirmed live in-browser: .chip, bare headings, .field-label, .card-sub
and .btn-secondary all carry gold/parchment-toned colors meant for the
dark app background (defined once, globally, for the dark theme). Nested
inside a parchment panel they read as light text on a light background —
e.g. the scene title measured at fg rgb(245,217,139) / bg ~rgb(239,226,196),
nowhere near WCAG AA. .chronicle-column p/h3 were already re-themed to ink
by the design agent; h2 and every other dark-theme atom used inside these
two panels were not, so every symptom is fixed here in one place rather
than chasing individual elements as they're found.
============================================================================ */
.chronicle-column h1, .chronicle-column h2, .chronicle-column h4, .chronicle-column h5, .chronicle-column h6,
.journal-page h1, .journal-page h2, .journal-page h3, .journal-page h4, .journal-page h5, .journal-page h6 {
color: var(--iron-gall);
}
.chronicle-column .chip, .journal-page .chip {
color: var(--iron-gall);
background: color-mix(in oklab, var(--iron-gall) 10%, transparent);
border-color: color-mix(in oklab, var(--iron-gall) 35%, transparent);
}
.chronicle-column .chip--muted, .journal-page .chip--muted { opacity: 0.78; }
.chronicle-column .field-label, .journal-page .field-label,
.chronicle-column .card-sub, .journal-page .card-sub,
.chronicle-column .journal-empty, .journal-page .journal-empty {
color: color-mix(in oklab, var(--iron-gall) 65%, transparent);
}
.chronicle-column .btn-secondary, .journal-page .btn-secondary {
color: var(--iron-gall);
background: color-mix(in oklab, var(--parchment-shade) 55%, transparent);
border-color: color-mix(in oklab, var(--iron-gall) 45%, transparent);
}
.chronicle-column .btn-secondary:hover, .journal-page .btn-secondary:hover {
color: var(--iron-gall);
background: color-mix(in oklab, var(--iron-gall) 12%, var(--parchment-shade));
border-color: var(--iron-gall);
}