/* Parchment — page and map styles. Color tokens live in tokens.css. */
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; font-display: block; src: url('../assets/fonts/libre-baskerville-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: block; src: url('../assets/fonts/libre-baskerville-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: block; src: url('../assets/fonts/libre-baskerville-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 700; font-display: block; src: url('../assets/fonts/libre-baskerville-latin-700-italic.woff2') format('woff2'); }

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--parchment-deep); font-family: var(--font); color: var(--ink); }
#app { position: fixed; inset: 0; display: grid; place-items: center; }
#map { width: 100vw; height: 100vh; display: block; font-family: var(--font); }

/* ---------- ground ---------- */
.paper { fill: var(--parchment); }
.paper-overlay { fill: #fff; mix-blend-mode: multiply; opacity: 0.45; pointer-events: none; }
.paper-vignette { mix-blend-mode: multiply; pointer-events: none; }
.ocean { fill: var(--ocean); }
.bathymetry path { fill: none; stroke: var(--bathy); stroke-width: 0.5; stroke-opacity: 0.7; }
.land { fill: var(--cream); }
.relief { opacity: 0.6; mix-blend-mode: multiply; }

/* ---------- fills and borders (grammar §5) ---------- */
.polity { stroke: none; fill: var(--cream); fill-opacity: 0; }
.polity.highlight { fill: var(--fill-P); fill-opacity: 0.65; }
/* Diff: appeared = focus fill; vanished = rust outline + rust hatch; persisted = muted. */
.polity.appeared { fill: var(--focus); fill-opacity: 0.62; }
.polity.vanished { fill: url(#hatch-rust); fill-opacity: 1; stroke: var(--rust); stroke-width: 1.1; stroke-linejoin: round; }
.hatch-line { stroke: var(--rust); stroke-width: 1; stroke-opacity: 0.6; }
.label.polity.vanished { fill: var(--rust); font-style: italic; font-weight: 400; }
.border { fill: none; stroke: var(--navy); stroke-width: 0.8; stroke-linejoin: round; }
.border.approximate { stroke-dasharray: 3 2.5; stroke-opacity: 0.55; }
.border.legal { stroke-opacity: 0.75; }

/* ---------- water lines ---------- */
.rivers path { fill: none; stroke: var(--water-line); stroke-opacity: var(--water-line-opacity); stroke-width: 0.6; }
.lakes { fill: var(--ocean); stroke: var(--water-line); stroke-opacity: var(--water-line-opacity); stroke-width: 0.6; }
.coastline { fill: none; stroke: var(--steel); stroke-width: 0.7; stroke-opacity: 0.8; }
.graticule { fill: none; stroke: var(--gold-hair); stroke-width: 0.6; stroke-opacity: 0.9; }

/* ---------- labels: navy ink, thin cream halo ---------- */
.label { fill: var(--ink); paint-order: stroke fill; stroke: var(--cream); stroke-width: 3px; stroke-linejoin: round; stroke-opacity: 0.85; pointer-events: none; }
.label.region { font-size: 24px; font-variant: small-caps; letter-spacing: 0.42em; fill-opacity: 0.6; }
.label.water { font-size: 16px; font-style: italic; letter-spacing: 0.1em; fill: var(--steel); fill-opacity: 0.9; }
.label.polity { font-variant: small-caps; letter-spacing: 0.12em; font-weight: 700; fill-opacity: 0.92; }

/* ---------- apparatus ---------- */
.frame { fill: none; stroke: var(--gold); stroke-width: 3; }

.legend-box, .cartouche-box { fill: var(--cream); fill-opacity: 0.92; stroke: var(--navy); stroke-width: 0.8; }
.legend text, .cartouche text { fill: var(--ink); }
.legend-title { font-size: 13px; font-variant: small-caps; letter-spacing: 0.2em; }
.legend .row text { font-size: 13px; }
.legend .swatch { stroke: var(--navy); stroke-width: 0.6; fill-opacity: 0.65; }
.legend .swatch.fill-P { fill: var(--fill-P); }
.legend .swatch.fill-In { fill: var(--fill-In); }
.legend .swatch.fill-S { fill: var(--fill-S); }
.legend .swatch.fill-E { fill: var(--fill-E); }
.legend .swatch.fill-C { fill: var(--fill-C); }
.legend .swatch.fill-T { fill: var(--fill-T); }
.legend .swatch.fill-focus { fill: var(--focus); }
.legend .swatch.hatch { fill: url(#hatch-rust); fill-opacity: 1; stroke: var(--rust); }
.legend .swatch-line { stroke: var(--navy); stroke-width: 1.2; }
.difflist-box { fill: var(--cream); fill-opacity: 0.92; stroke: var(--navy); stroke-width: 0.8; }
.difflist text { fill: var(--ink); font-size: 12px; }
.difflist-head { font-variant: small-caps; letter-spacing: 0.16em; font-size: 13px; }
.difflist-head.appeared { fill: var(--focus); } .difflist-head.vanished { fill: var(--rust); }
.difflist-more { font-style: italic; fill-opacity: 0.7; }
.legend .swatch-line.dashed { stroke-dasharray: 4 3; }
.mark.rust-diamond { fill: var(--rust); } .mark.moss-circle { fill: var(--moss); } .mark.navy-square, .mark.navy-triangle { fill: var(--navy); }

.cartouche .bracket { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.cartouche .wordmark { font-size: 13px; letter-spacing: 0.45em; font-weight: 700; }
.cartouche .rule { stroke: var(--gold); stroke-width: 1.2; }
.cartouche .map-title { font-size: 21px; font-variant: small-caps; letter-spacing: 0.14em; }
.cartouche .year { font-size: 30px; font-weight: 700; }
.cartouche .year.range { font-size: 20px; }
.cartouche .base-note { font-size: 12px; font-style: italic; fill-opacity: 0.8; }
.scalebar line { stroke: var(--navy); stroke-width: 1; }
.scalebar rect { fill: var(--navy); }
.scalebar text { font-size: 12px; }

.strip .baseline { stroke: var(--navy); stroke-width: 1.5; }
.strip .tick { stroke: var(--navy); stroke-width: 1; }
.strip .tick.minor { stroke-opacity: 0.6; }
.strip .tick-label { font-size: 12px; fill: var(--ink); }
.strip .snapshot { fill: var(--gold); stroke: var(--navy); stroke-width: 1; cursor: pointer; }
.strip .snapshot:hover { fill: var(--focus); }
.strip .marker path { fill: var(--focus); stroke: var(--navy); stroke-width: 1.2; }
.strip .marker text { font-size: 13px; font-weight: 700; fill: var(--ink); }
.strip .marker.start path { fill: var(--cream); }
.strip .range { stroke: var(--navy); stroke-width: 4; stroke-opacity: 0.8; }

/* ---------- chrome (never exported) ---------- */
#toolbar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); width: max-content; white-space: nowrap; display: flex; gap: 6px; align-items: center; background: rgba(247, 245, 239, 0.9); border: 1px solid var(--gold); border-radius: 4px; padding: 5px 8px; font-size: 13px; }
#toolbar button { font: inherit; background: none; border: 1px solid transparent; color: var(--ink); padding: 2px 7px; border-radius: 3px; cursor: pointer; }
#toolbar button:hover { border-color: var(--gold); }
#toolbar button.active { background: var(--navy); color: var(--cream); }
#toolbar .seg { display: inline-flex; border: 1px solid var(--navy); border-radius: 3px; overflow: hidden; margin-right: 6px; }
#toolbar .seg button { border-radius: 0; padding: 2px 9px; }
#toolbar .years { display: inline-flex; gap: 2px; align-items: center; }
#toolbar .years label { font-size: 11px; font-variant: small-caps; letter-spacing: 0.1em; margin: 0 4px 0 6px; opacity: 0.8; }
#toolbar .sep { width: 1px; height: 18px; background: var(--gold); margin: 0 6px; }
#toolbar #scope { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; cursor: pointer; }
#toolbar .menu { position: relative; display: inline-block; }
#toolbar .menu .popover { display: none; position: absolute; top: calc(100% + 6px); right: 0; flex-direction: column; gap: 2px; min-width: 180px; background: var(--cream); border: 1px solid var(--gold); border-radius: 4px; padding: 6px; box-shadow: 0 2px 8px rgba(31, 42, 68, 0.15); }
#toolbar .menu.open .popover { display: flex; }
#toolbar .popover button { text-align: left; white-space: nowrap; }
#toolbar .popover label { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 7px 2px; border-top: 1px solid var(--gold-hair); margin-top: 3px; cursor: pointer; }
#toolbar button[disabled] { opacity: 0.6; cursor: wait; }
body:not(.mode-diff) #toolbar #scope { display: none; }
body:not(.mode-diff) #years-a { display: none; }
body:not(.mode-diff) #years label { display: none; }
#year-readout { display: none; }
#problems { position: fixed; left: 12px; top: 10px; max-width: 40vw; background: var(--cream); border: 1px solid var(--rust); color: var(--rust); padding: 8px 10px; font-size: 13px; }
.hidden { display: none; }
body.shot #toolbar, body.shot #problems { display: none; }

/* ---------- point marks (grammar §5): shape = event type ---------- */
.marks .mark { stroke: var(--cream); stroke-width: 1.5; stroke-linejoin: round; }
.marks .mark.rust-diamond { fill: var(--rust); }
.marks .mark.moss-circle { fill: var(--moss); }
.marks .mark.navy-square, .marks .mark.navy-triangle { fill: var(--navy); }
.marks .mark-label { font-size: 13px; font-weight: 700; fill: var(--ink); paint-order: stroke fill; stroke: var(--cream); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.marks .mark-label .when { font-weight: 400; font-style: italic; }

/* ---------- data problems panel (chrome; never exported) ---------- */
#data-problems { position: fixed; left: 12px; top: 10px; max-width: 46vw; max-height: 60vh; overflow: auto; background: var(--cream); border: 1px solid var(--rust); color: var(--ink); padding: 8px 12px 10px; font-size: 13px; box-shadow: 0 2px 8px rgba(31, 42, 68, 0.15); }
#data-problems h2 { margin: 0 0 6px; font-size: 13px; font-variant: small-caps; letter-spacing: 0.16em; color: var(--rust); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#data-problems h2 button { font: inherit; background: none; border: 0; color: var(--ink); cursor: pointer; letter-spacing: 0; font-variant: normal; }
#data-problems ol { margin: 0; padding-left: 22px; }
#data-problems li { margin: 3px 0; }
#data-problems li b { font-weight: 700; }
#data-problems .note { margin: 6px 0 0; font-style: italic; opacity: 0.8; }
#toolbar select { font: inherit; font-size: 12px; background: var(--cream); color: var(--ink); border: 1px solid var(--navy); border-radius: 3px; padding: 1px 4px; }
body.shot #data-problems { display: none; }
#toolbar .popover.about { min-width: 300px; max-width: 360px; white-space: normal; font-size: 12px; line-height: 1.45; padding: 8px 10px; }
#toolbar .popover.about p { margin: 0 0 7px; } #toolbar .popover.about p:last-child { margin: 0; }
#toolbar .popover.about a { color: var(--steel); }
#toolbar a.admin-link { font-size: 12px; color: var(--ink); text-decoration: none; border: 1px solid transparent; padding: 2px 7px; border-radius: 3px; }
#toolbar a.admin-link:hover { border-color: var(--gold); }