/* Eden MU medieval design system.
 * Shared surfaces, chrome and type for every public page. Materials are the
 * licensed art in /static/img/medieval/ (see ATTRIBUTION.md there). Pages keep
 * their own layout; this sheet only skins them via md-* classes or low
 * specificity rules. Spec: docs/superpowers/specs/2026-09-16-medieval-site-skin-design.md
 */
:root {
  --md-gold: #cfa858; --md-gold-light: #ecd9a5; --md-gold-dark: #7a5f2f;
  --md-crimson: #9b1c1c; --md-crimson-lit: #c62f2f;
  --md-ink: #3a2a16; --md-ink-soft: #6b5638; --md-tan: #d9c9a3; --md-dim: #8a7d66; --md-done: #4f8a63;
  --md-display: 'IM Fell English SC', 'Cinzel', Georgia, serif;
  --md-text: 'Almendra', 'Lora', Georgia, serif;
  --md-img: /static/img/medieval/;
}

/* ---- surfaces ------------------------------------------------------------ */
.md-board { position: relative; border: 29px solid transparent;
  border-image: url('/static/img/medieval/ui/frame.png') 29 round;
  background: linear-gradient(rgba(10,7,5,0.74), rgba(10,7,5,0.74)), url('/static/img/medieval/tex/leather.webp');
  background-size: auto, 512px; background-clip: padding-box; color: var(--md-tan);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 18px 40px rgba(0,0,0,0.7), inset 0 0 70px rgba(0,0,0,0.65); }
.md-board--tight { border-width: 22px; border-image-width: 22px; }
.md-board--flush { border-width: 18px; border-image-width: 18px; }

.md-parchment { position: relative; color: var(--md-ink); border-radius: 3px;
  background: url('/static/img/medieval/tex/parchment.webp'); background-size: 420px;
  box-shadow: inset 0 0 44px rgba(60,35,10,0.55), inset 0 0 6px rgba(60,35,10,0.5), 0 8px 20px rgba(0,0,0,0.65); }
.md-parchment::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(70,40,12,0.38) 100%); }
.md-parchment > * { position: relative; }
.md-parchment, .md-parchment p, .md-parchment li, .md-parchment td, .md-parchment label { font-family: var(--md-text); }
.md-parchment p, .md-parchment li, .md-parchment td, .md-parchment th, .md-parchment small { color: var(--md-ink); }
.md-parchment small, .md-parchment .md-muted { color: var(--md-ink-soft); }
.md-parchment h1, .md-parchment h2, .md-parchment h3, .md-parchment h4 { font-family: var(--md-display); color: var(--md-ink); font-weight: 400; text-shadow: none; }
.md-parchment a { color: #5a3a12; text-decoration: underline; text-decoration-color: rgba(58,42,22,0.45); }
.md-parchment a:hover { color: var(--md-crimson); }
.md-parchment strong { color: #2a1c0c; }
.md-parchment code, .md-parchment pre, .md-parchment textarea { background: rgba(255,250,230,0.45); color: var(--md-ink); border: 1px solid rgba(58,42,22,0.35); }

.md-wood { background: linear-gradient(rgba(20,14,9,0.35), rgba(20,14,9,0.35)), url('/static/img/medieval/tex/wood.webp');
  background-size: auto, 260px; border: 2px solid #8f7238; box-shadow: inset 0 0 18px rgba(0,0,0,0.6), 0 0 0 1px #2a1e10; color: var(--md-tan); }

/* ---- banners and headings ------------------------------------------------ */
.md-banner { position: relative; height: 64px; border-style: solid; border-width: 0 46px;
  border-image: url('/static/img/medieval/ui/banner_dark.png') 0 46 0 46 fill / 0 46px 0 46px stretch;
  display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.7)); }
.md-banner--hung { width: min(560px, 100%); margin: -78px auto 14px; }
.md-banner--inline { width: min(520px, 100%); margin: 0 auto 22px; }
.md-banner--left { margin-left: 0; }
.md-banner__title, .md-banner h1, .md-banner h2 { margin: 0; font: 26px/1 var(--md-display); font-weight: 400; color: var(--md-gold-light);
  letter-spacing: 1px; white-space: nowrap; text-shadow: 0 1px 0 #3a2a10, 0 2px 5px rgba(0,0,0,0.85); text-align: center; }
.md-banner--small { height: 44px; border-width: 0 32px; border-image-width: 0 32px; }
.md-banner--small .md-banner__title, .md-banner--small h2 { font-size: 19px; }

.md-h { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font: 20px/1 var(--md-display); font-weight: 400; color: var(--md-gold); text-shadow: 0 1px 0 #1a120a; }
.md-h::after { content: ""; flex: 1; height: 10px; background: url('/static/img/medieval/ui/line.png') repeat-x center / auto 10px; opacity: 0.85; }
.md-parchment .md-h { color: var(--md-ink); text-shadow: none; }
.md-parchment .md-h::after { background: linear-gradient(90deg, rgba(58,42,22,0.55), transparent); height: 1px; opacity: 1; }
.md-divider { height: 10px; background: url('/static/img/medieval/ui/line.png') repeat-x center / auto 10px; opacity: 0.85; border: 0; margin: 14px 0; }

/* ---- plaques, buttons, tags ---------------------------------------------- */
.md-plaque { display: inline-block; padding: 8px 14px; border-style: solid; border-width: 10px 14px;
  border-image: url('/static/img/medieval/ui/plaque.png') 10 14 fill / 10px 14px stretch; color: var(--md-tan);
  font-family: var(--md-text); filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.md-plaque--block { display: block; }
.md-plaque .md-plaque__label { display: block; font: 11px var(--md-text); color: var(--md-dim); }
.md-plaque .md-plaque__value { display: block; font: 18px/1.1 var(--md-display); color: var(--md-gold-light); }

.md-btn { display: inline-block; cursor: pointer; text-decoration: none; text-align: center; background: none;
  font: 15px/1 var(--md-display); letter-spacing: 0.5px; color: var(--md-tan);
  padding: 12px 20px; border-style: solid; border-width: 10px 14px;
  border-image: url('/static/img/medieval/ui/plaque.png') 10 14 fill / 10px 14px stretch;
  text-shadow: 0 1px 0 #2a1e10, 0 0 6px rgba(0,0,0,0.6); filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); transition: filter 120ms; }
.md-btn:hover { filter: brightness(1.15) drop-shadow(0 2px 3px rgba(0,0,0,0.6)); color: var(--md-gold-light); }
.md-btn--primary { color: var(--md-gold-light); }
.md-btn--crimson { color: #f6dccd; }
.md-btn--block { display: block; width: 100%; }
.md-btn--small { font-size: 13px; padding: 8px 14px; border-width: 8px 12px; border-image-width: 8px 12px; }
.md-btn:disabled, .md-btn[aria-disabled="true"] { filter: brightness(0.6) saturate(0.5); cursor: default; }
.md-btn:focus-visible, .md-input:focus-visible, .md-tabs > *:focus-visible { outline: 2px solid var(--md-gold-light); outline-offset: 3px; }

.md-tag { display: inline-block; padding: 2px 8px; font: 12px var(--md-text); color: var(--md-gold-light); border: 1px solid var(--md-gold-dark);
  background: rgba(20,14,9,0.6); box-shadow: inset 0 0 6px rgba(0,0,0,0.6); }
.md-parchment .md-tag { color: var(--md-ink); border-color: rgba(58,42,22,0.5); background: rgba(255,250,230,0.35); box-shadow: none; }

.md-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.md-tabs > * { cursor: pointer; background: none; font: 14px/1 var(--md-display); color: var(--md-tan); padding: 9px 14px;
  border-style: solid; border-width: 8px 12px; border-image: url('/static/img/medieval/ui/plaque.png') 10 14 fill / 8px 12px stretch;
  filter: brightness(0.8) drop-shadow(0 2px 3px rgba(0,0,0,0.6)); text-decoration: none; }
.md-tabs > *:hover { filter: brightness(1) drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.md-tabs > .active, .md-tabs > [aria-selected="true"] { color: var(--md-gold-light); filter: brightness(1.15) drop-shadow(0 0 10px rgba(236,217,165,0.35)); }

/* ---- inputs -------------------------------------------------------------- */
.md-board label, .md-board .input-group label { font-family: var(--md-text); color: var(--md-tan); }
.md-btn, .md-btn:hover, .md-btn:focus { box-shadow: none; border-radius: 0; }

.md-input, .md-parchment input:not([type=checkbox]):not([type=radio]), .md-parchment select, .md-parchment textarea,
.md-board input:not([type=checkbox]):not([type=radio]), .md-board select, .md-board textarea {
  font: 15px var(--md-text); color: var(--md-gold-light); padding: 10px 12px; border: 2px solid #8f7238; border-radius: 2px;
  background: linear-gradient(rgba(20,14,9,0.55), rgba(20,14,9,0.55)), url('/static/img/medieval/tex/wood.webp'); background-size: auto, 220px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.85), 0 0 0 1px #2a1e10; }
.md-input::placeholder, .md-board input::placeholder { color: var(--md-dim); }
.md-parchment input:not([type=checkbox]):not([type=radio]), .md-parchment select, .md-parchment textarea {
  color: var(--md-ink); background: rgba(255,250,230,0.5); border-color: rgba(58,42,22,0.5); box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); }

/* ---- ledger tables ------------------------------------------------------- */
.md-ledger { width: 100%; border-collapse: collapse; font-family: var(--md-text); }
.md-ledger th { font: 15px var(--md-display); font-weight: 400; color: var(--md-gold); text-align: left; padding: 10px 12px;
  border-bottom: 2px solid var(--md-gold-dark); }
.md-ledger td { padding: 10px 12px; border-bottom: 1px solid rgba(207,168,88,0.16); color: var(--md-tan); }
.md-ledger tr:hover td { background: rgba(207,168,88,0.05); }
.md-parchment .md-ledger th { color: var(--md-ink); border-bottom-color: rgba(58,42,22,0.55); }
.md-parchment .md-ledger td { color: var(--md-ink); border-bottom-color: rgba(58,42,22,0.18); }
.md-parchment .md-ledger tr:hover td { background: rgba(58,42,22,0.05); }

/* ---- navigation ---------------------------------------------------------- */
.md-nav { background: linear-gradient(rgba(10,7,5,0.8), rgba(10,7,5,0.8)), url('/static/img/medieval/tex/leather.webp'); background-size: auto, 512px;
  border-bottom: 2px solid #8f7238; box-shadow: 0 2px 0 #2a1e10, 0 8px 24px rgba(0,0,0,0.6); }

.md-sidebar { background: linear-gradient(rgba(10,7,5,0.8), rgba(10,7,5,0.8)), url('/static/img/medieval/tex/leather.webp'); background-size: auto, 512px;
  border-right: 2px solid #8f7238; box-shadow: 2px 0 0 #2a1e10, inset 0 0 40px rgba(0,0,0,0.6); color: var(--md-tan); }
.md-sidebar h2, .md-sidebar h3 { font-family: var(--md-display); font-weight: 400; color: var(--md-gold); text-shadow: 0 1px 0 #1a120a; }
.md-sidebar a { font-family: var(--md-text); color: var(--md-tan); }
.md-sidebar a.active, .md-sidebar a:hover { color: var(--md-gold-light); background: rgba(207,168,88,0.08); box-shadow: inset 3px 0 0 var(--md-gold); }

/* ---- accents ------------------------------------------------------------- */
.md-seal { display: inline-block; width: 28px; height: 28px; background: var(--md-crimson-lit);
  -webkit-mask: url('/static/img/medieval/icons/wax-seal.svg') center/contain no-repeat; mask: url('/static/img/medieval/icons/wax-seal.svg') center/contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8)); vertical-align: middle; }
.md-rivet { display: inline-block; width: 14px; height: 14px; background: url('/static/img/medieval/ui/rivet.png') center/contain no-repeat; vertical-align: middle; }
.md-ico { display: inline-block; width: 20px; height: 20px; background: var(--md-gold-light); vertical-align: middle;
  -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }

/* ---- type helpers -------------------------------------------------------- */
.md-display { font-family: var(--md-display); font-weight: 400; }
.md-text { font-family: var(--md-text); }
.md-muted { color: var(--md-dim); }
.md-gold { color: var(--md-gold-light); }

@media (max-width: 720px) {
  .md-board { border-width: 22px; border-image-width: 22px; }
  .md-banner--hung { margin-top: -70px; }
  .md-banner__title, .md-banner h1, .md-banner h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .md-btn { transition: none; } }