/* Ornament layer (loaded last): carries the main map sheet's parchment look — vellum grain,
 * cartouche double rules, walnut-umber ink accents, brass hairlines — into every window and
 * control. Layout lives in the component sheets; this file only paints. */

:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.27  0 0 0 0 0.16  0 0 0 0.075 0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");
  --mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0 0.2  0 0 0 0.12 -0.02'/></filter><rect width='480' height='480' filter='url(%23m)'/></svg>");
  /* Cartouche frame: paper gap then a hairline ink rule, drawn inside the 1px border. */
  --cartouche: inset 0 0 0 3px rgba(250, 246, 237, 0.9), inset 0 0 0 4px rgba(30, 28, 26, 0.28);
  --sel-fill: linear-gradient(180deg, #7A5233 0%, #5C3B22 55%, #4B301B 100%);
  /* Tooled leather: a gilt hairline just inside the edge, a fainter second gilt rule 2px in,
   * a soft top sheen, and a short drop shadow. */
  --sel-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.22), inset 0 0 0 1px rgba(217, 178, 106, 0.55), inset 0 0 0 3px rgba(75, 48, 27, 0.0), inset 0 0 0 4px rgba(217, 178, 106, 0.2), 0 1px 0 rgba(30, 28, 26, 0.25), 0 2px 4px -1px rgba(40, 24, 12, 0.35);
}

/* ---------------------------------------------------------------- windows */
.panel { background-image: var(--grain), var(--mottle); }

.drawer-panel,
.event-modal-panel,
.ledger-overlay, .codex-overlay,
.end-book,
.keyboard-help,
.onboarding-overlay,
.region-inspector,
.weekly-agenda,
.alert-outliner,
.causal-tooltip {
  border-color: #2A2520;
  background-color: #F5EFE3;
}
.drawer-panel { box-shadow: var(--cartouche), 0 12px 30px rgba(40, 28, 14, 0.38); }
.event-modal-panel { box-shadow: var(--cartouche), 0 12px 34px rgba(40, 28, 14, 0.42); }
.ledger-overlay, .codex-overlay, .end-book, .keyboard-help, .onboarding-overlay {
  border-width: 1.5px;
  box-shadow: inset 0 0 0 4px rgba(250, 246, 237, 0.9), inset 0 0 0 5px rgba(30, 28, 26, 0.3), inset 0 0 0 7px rgba(250, 246, 237, 0.9), inset 0 0 0 8px rgba(169, 123, 44, 0.32), 0 14px 36px rgba(40, 28, 14, 0.4);
}
/* Onboarding dossier: same quadruple frontispiece frame as the ledger (above), a red
 * registry stamp for its header, a margin-note for the focus hint, and a dashed brass
 * survey line instead of a solid orange spotlight ring. */
.onboarding-stamp {
  color: rgba(184, 41, 47, 0.88); background: transparent;
  border: 1.5px solid rgba(184, 41, 47, 0.8); border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(250, 246, 237, 0.6), inset 0 0 0 3px rgba(184, 41, 47, 0.35);
  padding: 2px 8px; transform: rotate(-2deg); letter-spacing: 0.1em;
}
.onboarding-spot-badge {
  color: #5E3E0A; background: linear-gradient(90deg, rgba(169, 123, 44, 0.12), rgba(251, 243, 226, 0.7) 60%);
  border: 1px solid rgba(169, 123, 44, 0.45); border-left: 3px solid var(--brass);
}
.onboarding-spotlight {
  border: 2px dashed rgba(138, 90, 12, 0.85); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(250, 246, 237, 0.75), 0 0 0 5px rgba(169, 123, 44, 0.16), 0 0 16px rgba(169, 123, 44, 0.3);
}
.region-inspector, .weekly-agenda, .alert-outliner, .alert-banner, .message-log, .causal-tooltip {
  box-shadow: var(--cartouche), 0 4px 12px rgba(40, 28, 14, 0.22);
}
.causal-tooltip.locked { border-color: var(--brass); box-shadow: inset 0 0 0 3px rgba(250, 246, 237, 0.9), inset 0 0 0 4px var(--brass-soft), 0 4px 12px rgba(40, 28, 14, 0.25); }

/* Window titles: engraved serif with a hairline brass underline. */
.drawer-title, .keyboard-help-title, .codex-entry-title, .weekly-agenda-title, .alert-outliner-title,
.region-inspector-title, .event-modal-title {
  color: #241F1A; letter-spacing: 0.04em; text-shadow: 0 1px 0 rgba(255, 252, 244, 0.8);
}
.drawer-header-bar {
  background: linear-gradient(180deg, #EFE6D4 0%, #E6DAC3 100%);
  border-bottom: 1px solid rgba(30, 28, 26, 0.45);
  box-shadow: 0 1px 0 rgba(250, 246, 237, 0.9), 0 2px 0 rgba(169, 123, 44, 0.25);
}
.d-sec-hdr, .weekly-agenda-hdr, .onboarding-header {
  border-bottom-color: rgba(30, 28, 26, 0.3);
  box-shadow: 0 1px 0 rgba(255, 252, 244, 0.7);
}
.weekly-agenda-sec-title::before { content: "❧ "; color: var(--brass); font-weight: 400; }

/* Cards inside windows: lighter vellum leaves. */
.d-card, .weekly-agenda-sec, .onboarding-sec, .d2-top-wrap, .weekly-agenda-slot-bar {
  background-color: #FAF5EA;
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.85), 0 1px 1px rgba(60, 40, 20, 0.06);
}
.d-metric-card, .d3-minister-card, .d3-proposal-card, .d2-demand-card, .weekly-agenda-item, .d-action-item, .d4-lever-row, .d4-slider-card {
  background-color: #FCF8F0;
}
.d-metric-card.active-focus, .d3-minister-card.active-focus {
  background: #F1E4CC; border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--brass), inset 0 0 0 1px rgba(217, 178, 106, 0.35);
}
.d-compact-summary { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(107, 68, 40, 0.07), rgba(232, 223, 209, 0.5) 40%); }
.d-policy-card { border-left-color: var(--accent) !important; }
.d-domain-actions-card { border-left-color: var(--brass) !important; }
.d-pillar-badge.badge-policy { color: var(--accent); background: #F3E8D4; }
.d-pillar-badge.badge-action { background: #FBF1DD; }
.d-badge.badge-blue { background: #F1E4CC; border-color: rgba(107, 68, 40, 0.7); color: var(--accent-deep); }
button.btn.alert-sev-blue { background: var(--corners), linear-gradient(180deg, #F7EEDD, #EEDFC4); border-color: rgba(107, 68, 40, 0.7); color: var(--accent-deep); }

/* Text inputs share the vellum look. */
.d3-search-input:focus { outline: 1px solid var(--brass); outline-offset: 0; border-color: var(--accent); }
.d3-search-input {
  background: #FCF8F0; border-radius: 2px; box-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.12);
}
.d-arg-select {
  -webkit-appearance: none; appearance: none; padding-right: 22px; border-radius: 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0.5 0.5 L5 5 L9.5 0.5' fill='none' stroke='%236B4428' stroke-width='1.4'/></svg>") no-repeat right 8px center,
    linear-gradient(180deg, var(--vellum-hi) 0%, var(--vellum-lo) 100%);
}

/* ---------------------------------------------------------------- top bar & bottom bar */
.topbar {
  background-color: #F3ECDE;
  background-image: linear-gradient(180deg, rgba(255, 252, 244, 0.55), rgba(232, 220, 198, 0.35)), var(--grain), var(--mottle);
  border-bottom: 1px solid #2A2520;
  box-shadow: 0 2px 0 rgba(250, 246, 237, 0.9), 0 3px 0 rgba(30, 28, 26, 0.35), 0 6px 10px -4px rgba(40, 28, 14, 0.3);
}
.topbar-time-panel { background: transparent; border-left: 1px solid rgba(30, 28, 26, 0.3); box-shadow: -2px 0 0 rgba(250, 246, 237, 0.8); }
.topbar-slot.clickable { border-radius: 2px; transition: background 0.15s ease, color 0.15s ease; }
.topbar-slot.clickable:hover { color: var(--accent-deep); background: var(--accent-wash); }
.topbar-overlay-link {
  font-family: var(--font-title); letter-spacing: 0.04em; padding: 3px 7px; border-radius: 2px;
  border: 1px solid transparent; transition: all 0.15s ease;
}
.topbar-overlay-link:hover {
  color: var(--accent-deep); text-decoration: none; border-color: rgba(107, 68, 40, 0.45);
  background: linear-gradient(180deg, var(--vellum-hi), var(--vellum-lo));
}
.time-date-text { font-weight: 600; letter-spacing: 0.04em; }

.map-mode-bar {
  background-color: #E9DFCC;
  background-image: linear-gradient(0deg, rgba(220, 205, 178, 0.45), rgba(250, 244, 232, 0.35)), var(--grain), var(--mottle);
  border-top: 1px solid #2A2520;
  box-shadow: 0 -2px 0 rgba(250, 246, 237, 0.85), 0 -3px 0 rgba(30, 28, 26, 0.3), 0 -6px 10px -4px rgba(40, 28, 14, 0.25);
}
.map-mode-legend-box {
  background: #F7F1E4; border-radius: 2px; box-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.1);
}

/* Top/bottom bar flourishes, matching the map's title cartouche. */
.topbar-overlay-sep { color: var(--brass); }
.time-panel-divider { background: linear-gradient(180deg, transparent, rgba(169, 123, 44, 0.6), transparent); }
.time-speed-group {
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.9), 0 0 0 2px rgba(250, 246, 237, 0.85), 0 0 0 3px rgba(169, 123, 44, 0.4);
}
.map-mode-title-text { display: inline-flex; align-items: center; gap: 7px; }
.map-mode-title-text::before, .map-mode-title-text::after {
  content: ""; width: 18px; height: 3px; flex: 0 0 auto;
  border-top: 1px solid var(--brass); border-bottom: 1px solid rgba(169, 123, 44, 0.45);
}
.map-mode-legend-box::before { content: "❦"; color: var(--brass); font-size: 15px; flex: 0 0 auto; line-height: 1; }
.map-mode-legend-text { font-family: var(--font-title); letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- drawer tabs: folder tabs */
/* Archive folder tabs. Selectors carry button.btn so they outrank the generic engraved frame.
 * Idle tabs sit a shade darker, as if tucked behind; the open one is lighter, wears a brass
 * crown rule, and gilt ticks on its two upper corners only. */
button.btn.drawer-tab {
  --cc: transparent;
  font-family: var(--font-title); letter-spacing: 0.04em;
  color: #3A322A;
  background: linear-gradient(180deg, #EADFC9 0%, #DCCDB0 100%);
  border-color: rgba(30, 28, 26, 0.6); border-radius: 5px 5px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 250, 238, 0.75), inset 0 -4px 6px -4px rgba(60, 40, 20, 0.25), 0 2px 4px -2px rgba(40, 28, 14, 0.3);
  transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
button.btn.drawer-tab:hover:not(:disabled) {
  --cc: transparent;
  color: var(--accent-deep); border-color: rgba(107, 68, 40, 0.7);
  background: linear-gradient(180deg, #F6EEDD 0%, #E8DCC3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 238, 0.9), 0 3px 5px -2px rgba(40, 28, 14, 0.35);
  transform: translateY(-1px);
}
button.btn.drawer-tab.active, button.btn.drawer-tab.active:hover:not(:disabled) {
  --cc: rgba(169, 123, 44, 0.75);
  color: var(--accent-deep); font-weight: 700;
  border-color: rgba(30, 28, 26, 0.7); border-bottom: 1px solid rgba(30, 28, 26, 0.7);
  background:
    linear-gradient(var(--cc), var(--cc)) left 4px top 6px / 5px 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) left 4px top 6px / 1px 5px no-repeat,
    linear-gradient(var(--cc), var(--cc)) right 4px top 6px / 5px 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) right 4px top 6px / 1px 5px no-repeat,
    linear-gradient(180deg, #FCF7EC 0%, #F3E8D0 100%);
  box-shadow: inset 0 3px 0 var(--brass), inset 0 4px 0 rgba(107, 68, 40, 0.5), 0 3px 6px -2px rgba(40, 28, 14, 0.35);
  transform: none;
}

/* ---------------------------------------------------------------- engraved button frame */
/* Every vellum button gets an engraver's frame: a paper gap and an ink hairline inside the
 * border, and four small gilt corner ticks (two 1px strokes per corner) painted as background
 * layers. --cc is the tick colour; --corners is re-resolved per element, so states only need
 * to change --cc. */
button.btn {
  --cc: rgba(169, 123, 44, 0.5);
  --corners:
    linear-gradient(var(--cc), var(--cc)) left 3px top 3px / 5px 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) left 3px top 3px / 1px 5px no-repeat,
    linear-gradient(var(--cc), var(--cc)) right 3px top 3px / 5px 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) right 3px top 3px / 1px 5px no-repeat,
    linear-gradient(var(--cc), var(--cc)) left 3px bottom 3px / 5px 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) left 3px bottom 3px / 1px 5px no-repeat,
    linear-gradient(var(--cc), var(--cc)) right 3px bottom 3px / 5px 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) right 3px bottom 3px / 1px 5px no-repeat;
  --frame: inset 0 0 0 2px rgba(252, 248, 239, 0.85), inset 0 0 0 3px rgba(30, 28, 26, 0.1);
  background: var(--corners), linear-gradient(180deg, var(--vellum-hi) 0%, var(--vellum-lo) 100%);
  box-shadow: var(--frame), inset 0 -1px 0 rgba(120, 92, 52, 0.12), 0 1px 0 rgba(30, 28, 26, 0.14);
  letter-spacing: 0.03em;
}
button.btn:hover:not(:disabled) {
  --cc: var(--brass);
  color: var(--accent-deep); border-color: var(--accent);
  background: var(--corners), linear-gradient(180deg, #FFFCF6 0%, #F4ECDC 100%);
  box-shadow: var(--frame), inset 0 -2px 0 rgba(107, 68, 40, 0.12), 0 2px 5px -2px rgba(60, 40, 20, 0.35);
}
button.btn:active:not(:disabled) {
  background: var(--corners), linear-gradient(180deg, #E6DAC4 0%, #EFE6D4 100%);
  box-shadow: inset 0 2px 3px rgba(60, 40, 20, 0.22);
}
button.btn:disabled { --cc: transparent; }
/* Severity buttons keep their tint on hover. */
button.btn.alert-sev-red:hover:not(:disabled) { color: var(--red); border-color: var(--red); background: var(--corners), linear-gradient(180deg, #FDF4F2, #F5E2DC); }
button.btn.alert-sev-yellow:hover:not(:disabled) { color: #7A4E08; border-color: var(--amber); background: var(--corners), linear-gradient(180deg, #FEF8EA, #F4E5C6); }

/* ---------------------------------------------------------------- selected / primary buttons */
/* One treatment for "this one is chosen" and for the primary call to action: a deep
 * walnut leather leaf with a gilt hairline, like a tooled leather label. */
button.btn.d-subtab.active,
button.btn.d4-tier-btn.active,
button.btn.d4-contra-pill.active,
button.btn.d4-mini-tier.active,
button.btn.d4-pol-btn.active,
button.btn.time-speed-btn.active,
button.btn.onboarding-step-pill.active,
button.btn.end-book-succ-btn,
button.btn.onboarding-next-btn {
  --cc: #D9B26A;
  color: #F6EBD3; border-color: #3A2414;
  background: var(--corners), var(--grain), var(--sel-fill); background-blend-mode: normal, multiply, normal;
  box-shadow: var(--sel-shadow);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
button.btn.d-subtab.active:hover:not(:disabled),
button.btn.d4-tier-btn.active:hover:not(:disabled),
button.btn.d4-contra-pill.active:hover:not(:disabled),
button.btn.d4-mini-tier.active:hover:not(:disabled),
button.btn.d4-pol-btn.active:hover:not(:disabled),
button.btn.time-speed-btn.active:hover:not(:disabled),
button.btn.onboarding-step-pill.active:hover:not(:disabled),
button.btn.end-book-succ-btn:hover:not(:disabled),
button.btn.onboarding-next-btn:hover:not(:disabled) {
  --cc: #E8C887;
  color: #FFF8E8; border-color: #3A2414;
  background: var(--corners), var(--grain), linear-gradient(180deg, #875D3B 0%, #674328 55%, #55361F 100%);
  background-blend-mode: normal, multiply, normal;
  box-shadow: var(--sel-shadow), 0 3px 6px -2px rgba(40, 24, 12, 0.4);
}
button.btn.onboarding-next-btn:disabled { color: rgba(30, 28, 26, 0.42); text-shadow: none; border-color: rgba(30, 28, 26, 0.28); box-shadow: none; background: repeating-linear-gradient(135deg, #EFE8DA 0 5px, #EAE2D1 5px 10px); }
/* Primary calls to action set their label in the title serif; text-only ones get gilt
 * interpuncts either side. (The clock's 继续 carries an SVG icon, so no pseudo-elements.) */
button.btn.onboarding-next-btn, button.btn.end-book-succ-btn, button.btn.time-pause-btn {
  font-family: var(--font-title); letter-spacing: 0.08em;
}
button.btn.onboarding-next-btn::before, button.btn.end-book-succ-btn::before { content: "·"; color: #D9B26A; margin-right: 0.45em; }
button.btn.onboarding-next-btn::after, button.btn.end-book-succ-btn::after { content: "·"; color: #D9B26A; margin-left: 0.45em; }
button.btn.onboarding-next-btn:disabled::before, button.btn.onboarding-next-btn:disabled::after { color: transparent; }

/* Brass-picked state (map layer, active action, paused clock, approve). */
button.btn.map-mode-btn.active,
button.btn.d-act-btn.active,
button.btn.time-pause-btn.paused,
button.btn.onboarding-demo-btn.primary,
button.btn.weekly-agenda-btn.approve {
  --cc: var(--brass);
  background: var(--corners), linear-gradient(180deg, #FBEFD5 0%, #EBD3A3 100%);
  border-color: var(--brass);
  /* Bookmark-ribbon underline: a 2px brass rule along the inside bottom edge. */
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.9), inset 0 0 0 2px rgba(255, 244, 214, 0.45), inset 0 -2px 0 var(--brass), 0 1px 0 rgba(120, 80, 20, 0.25);
}
button.btn.map-mode-btn.active:hover:not(:disabled),
button.btn.d-act-btn.active:hover:not(:disabled),
button.btn.time-pause-btn.paused:hover:not(:disabled),
button.btn.weekly-agenda-btn.approve:hover:not(:disabled),
button.btn.onboarding-demo-btn.primary:hover:not(:disabled) {
  --cc: #8A5A0C;
  color: #5E3E0A; border-color: #8A5A0C; background: var(--corners), linear-gradient(180deg, #FDF3DD 0%, #EFD9AC 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.9), inset 0 0 0 2px rgba(255, 244, 214, 0.45), inset 0 -2px 0 #8A5A0C, 0 2px 5px -2px rgba(120, 80, 20, 0.4);
}

/* Segmented speed control: an inset brass-edged strip. */
.time-speed-group { border-radius: 2px; border-color: rgba(30, 28, 26, 0.72); background: linear-gradient(180deg, var(--vellum-hi), var(--vellum-lo)); box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.9); }
button.btn.time-speed-btn { box-shadow: none; border-radius: 0; background: transparent; }
button.btn.time-speed-btn:hover:not(:disabled) { transform: none; background: var(--accent-wash); box-shadow: none; }

/* Flat buttons that live inside a card keep their flatness, gaining only an ink wash. */
button.btn.d-domain-act-btn, button.btn.d-pol-expand-btn { box-shadow: none; background: transparent; }
button.btn.d-domain-act-btn:hover:not(:disabled) { transform: none; background: var(--accent-wash); box-shadow: none; }
button.btn.d-pol-expand-btn { color: var(--accent-deep); border-color: rgba(107, 68, 40, 0.45); font-family: var(--font-title); letter-spacing: 0.04em; }
button.btn.d-pol-expand-btn:hover:not(:disabled) { transform: none; background: var(--accent-wash); box-shadow: none; }

/* Severity buttons keep their hue but share the vellum relief. */
button.btn.alert-sev-red { --cc: rgba(184, 41, 47, 0.45); background: var(--corners), linear-gradient(180deg, #FCEFEC, #F3DCD6); }
button.btn.alert-sev-yellow { background: var(--corners), linear-gradient(180deg, #FDF5E4, #F2E1BE); }

/* Close glyph buttons: a small round seal. Round and flat controls carry no corner ticks. */
.region-inspector-close.btn, .map-zoom-btn.btn, button.btn.time-speed-btn, button.btn.d-domain-act-btn, button.btn.d-pol-expand-btn { --cc: transparent; }
.region-inspector-close.btn { border-radius: 50%; width: 30px; height: 30px; padding: 0; line-height: 28px; text-align: center; }
.region-inspector-close.btn:hover:not(:disabled) { color: var(--red); border-color: var(--red); }

/* Event options: index-card leaves with a brass margin rule on hover. */
button.btn.event-option {
  border-left: 3px solid rgba(169, 123, 44, 0.45); padding-left: 14px;
}
button.btn.event-option:hover:not(:disabled) {
  border-left-color: var(--accent); background: linear-gradient(90deg, rgba(107, 68, 40, 0.08), #FFFCF6 30%, #F4ECDC 100%);
}

/* Event title sits over a gilt rule that fades out at both ends, with a small lozenge at the
 * centre; codex terms are clipped index tabs. */
.event-modal-title {
  padding-bottom: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9'%3E%3Crect x='0' y='0' width='22' height='9' fill='%23F4EFE6'/%3E%3Cpath d='M11 0.5L15 4.5L11 8.5L7 4.5Z' fill='%23A97B2C'/%3E%3Ccircle cx='3' cy='4.5' r='1' fill='%23A97B2C'/%3E%3Ccircle cx='19' cy='4.5' r='1' fill='%23A97B2C'/%3E%3C/svg%3E") center bottom 0 / 22px 9px no-repeat,
    linear-gradient(90deg, transparent, rgba(169, 123, 44, 0.65) 25%, rgba(169, 123, 44, 0.65) 75%, transparent) center bottom 4px / 100% 1px no-repeat;
}
.event-modal-hero { border-top-color: transparent; }
button.btn.codex-term-btn { border-radius: 2px 9px 2px 9px; font-family: var(--font-title); }
button.btn.codex-term-btn:hover:not(:disabled) { border-radius: 2px 9px 2px 9px; }

/* Map zoom: engraved round-cornered stamps. */
.map-zoom-btn.btn { background: linear-gradient(180deg, #F7F0E2, #E9DDC6); box-shadow: inset 0 0 0 2px #F4ECDD, inset 0 0 0 3px rgba(30, 28, 26, 0.45), 0 1px 0 rgba(30, 28, 26, 0.18); }

/* Onboarding step pills done state. */
button.btn.onboarding-step-pill.done { background: linear-gradient(180deg, #EFE7D6, #E4D8C1); color: var(--ink); }

/* ---------------------------------------------------------------- meters, keys, misc */
.d-meter { border-radius: 1px; box-shadow: inset 0 1px 1px rgba(30, 28, 26, 0.15); }
.d-meter-fill.tone-blue { background: linear-gradient(180deg, #8A6440, #5C3B22); }
.keyboard-help-key {
  display: inline-block; padding: 0 6px; border: 1px solid rgba(30, 28, 26, 0.45); border-radius: 2px;
  background: linear-gradient(180deg, var(--vellum-hi), var(--vellum-lo)); box-shadow: 0 1px 0 rgba(30, 28, 26, 0.25);
  justify-self: start;
}
.event-perspectives { border-left-color: var(--brass); }
.option-preview-card { border-color: rgba(30, 28, 26, 0.55); background-color: rgba(236, 226, 206, 0.6); }

/* Range sliders: an inked groove with a brass knob. */
input[type=range].hslider { -webkit-appearance: none; appearance: none; background: transparent; }
input[type=range].hslider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: rgba(30, 28, 26, 0.22);
  box-shadow: inset 0 1px 1px rgba(30, 28, 26, 0.3), 0 1px 0 rgba(255, 252, 244, 0.8);
}
input[type=range].hslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F3DCA4 0%, #D9B26A 35%, #A97B2C 100%);
  border: 1px solid #4A2E1A; box-shadow: 0 1px 2px rgba(40, 24, 12, 0.45), inset 0 0 0 2px rgba(255, 240, 200, 0.25);
}
input[type=range].hslider:hover::-webkit-slider-thumb { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169, 123, 44, 0.2), 0 1px 2px rgba(40, 24, 12, 0.45); }
input[type=range].hslider::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(30, 28, 26, 0.22); }
input[type=range].hslider::-moz-range-progress { height: 4px; border-radius: 2px; background: rgba(107, 68, 40, 0.55); }
input[type=range].hslider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid #4A2E1A;
  background: radial-gradient(circle at 35% 30%, #F3DCA4 0%, #D9B26A 35%, #A97B2C 100%);
}

/* Parchment scrollbars. */
.panel ::-webkit-scrollbar, .panel::-webkit-scrollbar { width: 9px; height: 9px; }
.panel ::-webkit-scrollbar-track, .panel::-webkit-scrollbar-track { background: rgba(232, 223, 209, 0.6); border-left: 1px solid rgba(30, 28, 26, 0.12); }
.panel ::-webkit-scrollbar-thumb, .panel::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #B9A788, #A08C6B); border: 2px solid rgba(232, 223, 209, 0.9); border-radius: 6px;
}
.panel ::-webkit-scrollbar-thumb:hover, .panel::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #9A7550, #7C5A38); }