/* Granite Hill Ledger — worn keep ledger, mobile-first */

:root {
  --bg: #120e0a;
  --bg-2: #1a1410;
  --surface: #1e1712;
  --surface-2: #29201735;
  --card: #211913;
  --card-inset: #16100c;
  --border: #3d2f1f;
  --border-soft: #2e2317;
  --gold: #d4a94e;
  --gold-dim: #9a7c3d;
  --ember: #c96f2f;
  --text: #ece2cf;
  --muted: #a4917a;
  --ok: #7fb069;
  --warn: #e0a458;
  --bad: #c8553d;
  --radius: 8px;
  --font-display: Cinzel, "Palatino Linotype", Palatino, serif;
  --font-body: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-bottom: 5rem;
}
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 70% -10%, #2a1d1040, transparent),
    linear-gradient(180deg, var(--bg-2), var(--bg) 300px);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
}

h1, h2, h3, .brand-name { font-family: var(--font-display); letter-spacing: 0.03em; text-wrap: balance; }
h1 { font-size: 1.5rem; margin: 0.2em 0 0.5em; color: var(--gold); }
h2 { font-size: 1.15rem; margin: 1.4em 0 0.5em; color: var(--gold); }
h3 { font-size: 1rem; margin: 1em 0 0.4em; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .muted { color: var(--muted); }
p, .feed-text, .event-body { text-wrap: pretty; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 80;
  background: #2a2014; color: var(--gold); border: 1px solid var(--gold-dim);
  padding: 8px 12px; border-radius: 6px; font-weight: 600;
}
.skip-link:focus { top: 10px; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- Top bar --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #2a2014, #1c140d);
  border-bottom: 2px solid var(--gold-dim);
  box-shadow: 0 4px 0 #0a0704aa, 0 8px 18px #0006;
  position: sticky; top: 0; z-index: 20;
}
.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.btn-short { display: none; }
@media (max-width: 640px) {
  .btn-full { display: none; }
  .btn-short { display: inline; }
  .topbar { padding: 8px 10px; }
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.brand-crest { font-size: 1.7rem; filter: drop-shadow(0 0 6px #d4a94e55); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { color: var(--gold); font-weight: 700; font-size: 1.05rem; }
.brand-sub { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; }
.user-chip { display: flex; align-items: center; gap: 8px; }
.user-chip img { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--gold-dim); }
.user-chip-text { display: flex; flex-direction: column; line-height: 1.15; }
.user-chip-text strong { font-size: 0.85rem; }
.user-chip-text small { font-size: 0.68rem; color: var(--gold-dim); }
@media (max-width: 480px) { .user-chip-text strong { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #8a6528, #5a4018);
  color: #f5ecd8; border: 1px solid var(--gold-dim);
  padding: 10px 16px; border-radius: 6px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.88rem; letter-spacing: 0.03em;
  cursor: pointer; text-decoration: none !important;
  box-shadow: inset 0 1px 0 #e8c87844, 0 2px 0 #2a1c0a;
  transition: filter 0.12s, transform 0.12s;
}
.btn:hover { filter: brightness(1.12); text-decoration: none !important; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #0004; }
.btn-sm { padding: 6px 11px; font-size: 0.8rem; min-height: 36px; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.btn-discord { background: linear-gradient(180deg, #5865f2, #4450d8); border-color: #6a76ff; }
.btn-danger { background: linear-gradient(180deg, #8a3b2a, #6d2d20); border-color: #a4573f; }
.btn-ok { background: linear-gradient(180deg, #4c7a3f, #3a6130); border-color: #6f9d5f; }
.btn-block { width: 100%; justify-content: center; }
.btn-support {
  background: linear-gradient(180deg, #c9a227, #9a7418);
  border-color: #e0c15a;
  color: #1a140a;
}
.cta-pair {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
}

/* Sister holds + Halfcrest hub on the home page */
.hold-net {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 0 0 16px; padding: 8px 12px;
  font-size: 0.9rem; color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--gold-dim);
  border-radius: 4px 8px 8px 4px;
}
.hold-net a { color: var(--gold); text-decoration: none; }
.hold-net a:hover { text-decoration: underline; }
.hold-net-hub { font-weight: 600; }
.hold-net-here { color: var(--text); font-weight: 600; }
.hold-net-sep { opacity: 0.45; padding: 0 2px; }
@media (max-width: 520px) {
  .topbar-right .btn-support { padding: 6px 9px; font-size: 0.72rem; }
  .topbar-right .btn-discord { padding: 6px 10px; font-size: 0.78rem; }
}

/* --- Cards / layout --- */
.content { max-width: 1080px; margin: 0 auto; padding: 18px 14px 30px; }
.grid { display: grid; gap: 14px; }
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 12%, transparent), 0 6px 16px #00000066;
}
.card .card {
  background: var(--card-inset);
  box-shadow: none;
  padding: 12px 14px;
  border-radius: 6px;
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.stat {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 12px 14px;
}
.stat .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.stat .stat-value { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .stat-value.ok { color: var(--ok); }
.stat .stat-value.bad { color: var(--bad); }

/* --- Flash --- */
.flash {
  max-width: 1080px; margin: 10px auto 0; padding: 10px 16px;
  border-radius: 10px; font-weight: 500; font-size: 0.9rem;
  transition: opacity 0.6s;
}
.flash-ok { background: #2c3f2455; border: 1px solid #4c7a3f; color: #b9d8ad; }
.flash-err { background: #4f261d55; border: 1px solid #8a3b2a; color: #eab5a7; }
.flash-hide { opacity: 0; }

/* --- Tables --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
@media (max-width: 700px) {
  th, td { white-space: normal; }
}
th { color: var(--gold-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
tr:last-child td { border-bottom: none; }
td.wrap { white-space: normal; }

/* --- Badges --- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
}
.badge-ok { background: #2c3f24; color: #a8d59a; }
.badge-warn { background: #4a3517; color: #eec888; }
.badge-bad { background: #4f261d; color: #eaa392; }
.badge-dim { background: #2a2118; color: var(--muted); }
.badge-gold { background: #4a3a15; color: var(--gold); }

/* Row marked paid in place (inline pay fetch) — matches the server-rendered
   paid-row style in payroll.html. */
tr.row-paid { opacity: 0.55; }

/* --- Forms --- */
form.inline { display: inline; }
.form-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--muted); }
input, select, textarea {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 11px; font: inherit; font-size: 0.92rem;
  min-height: 40px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; }
textarea { min-height: 70px; resize: vertical; }

/* --- Feed (mirrored Discord messages) --- */
.feed { display: flex; flex-direction: column; gap: 10px; }
.feed-item {
  display: flex; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 10px 12px;
}
.feed-item img.avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.feed-body { min-width: 0; }
.feed-meta { font-size: 0.75rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.feed-meta strong { color: var(--gold); }
.feed-text { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; margin-top: 2px; }
.feed-attachment { display: block; margin-top: 6px; max-width: 100%; border-radius: 8px; max-height: 260px; }

/* --- Events --- */
.event-card {
  border-left: 3px solid var(--ember);
  background: var(--surface); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px;
}
.event-when { color: var(--warn); font-size: 0.8rem; font-weight: 600; }
.event-title { font-family: var(--font-display); font-weight: 700; color: var(--gold); }
.event-body { font-size: 0.9rem; white-space: pre-wrap; }

/* --- On duty pulse --- */
.pulse {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); margin-right: 7px;
  box-shadow: 0 0 0 0 #7fb06988; animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 #7fb06988; }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .btn { transition: none; }
}

/* --- Bottom navigation: scroll sideways instead of shrinking --- */
.bottomnav-wrap {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
}
.bottomnav-wrap::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 2.4rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg));
  opacity: 0;
  transition: opacity 0.15s;
}
.bottomnav-wrap.has-more::after { opacity: 0.95; }
.bottomnav {
  display: flex; justify-content: flex-start; gap: 2px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
  background: linear-gradient(180deg, #221912f5, #170f09fa);
  border-top: 2px solid var(--gold-dim);
  padding: 4px 8px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: blur(8px);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted); font-size: 0.68rem; font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-decoration: none !important; padding: 6px 10px; border-radius: 6px;
  flex: 0 0 auto;
  min-width: 4.4rem;
  min-height: 48px;
}
.nav-item span { font-size: 1.28rem; line-height: 1.15; filter: grayscale(0.25) opacity(0.9); }
.nav-item.active { color: var(--gold); background: #d4a94e22; box-shadow: inset 0 0 0 1px #d4a94e55; }
.nav-item.active span { filter: none; }
.nav-item:hover { color: var(--gold); text-decoration: none !important; }

@media (min-width: 900px) {
  body { padding-bottom: 70px; }
  .bottomnav {
    justify-content: center;
    gap: 4px;
    padding: 6px 16px;
    overflow-x: auto;
  }
  .nav-item { flex-direction: row; gap: 7px; font-size: 0.82rem; padding: 8px 14px; min-width: unset; min-height: 44px; }
  .nav-item span { font-size: 1.05rem; }
}

/* --- Audit sheet look --- */
.audit-sheet { border: 1px solid var(--gold-dim); border-radius: var(--radius); overflow: hidden; }
.audit-sheet .audit-head {
  background: linear-gradient(180deg, #3a2c15, #2a2011);
  padding: 14px 18px; border-bottom: 1px solid var(--gold-dim);
}
.audit-sheet .audit-head h2 { margin: 0; }
.audit-lines { padding: 6px 0; }
.audit-line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 18px; font-size: 0.94rem;
}
.audit-line.sub { padding-left: 34px; color: var(--muted); font-size: 0.85rem; }
.audit-line.total {
  border-top: 1px solid var(--gold-dim); margin-top: 6px; padding-top: 12px;
  font-weight: 700; font-family: var(--font-display); color: var(--gold);
}
.audit-line .amount { font-variant-numeric: tabular-nums; }

/* Typical watch hours chart (Guard portal) — 15-min slots + traffic light */
.watch-legend {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.watch-pill {
  font-size: 0.72rem; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border);
}
.watch-pill.watch-low { background: #5a1e1e88; color: #f0a0a0; border-color: #a05050; }
.watch-pill.watch-mid { background: #5a4a1e88; color: #e8d080; border-color: #a09040; }
.watch-pill.watch-high { background: #1e5a2e88; color: #90e0a0; border-color: #409050; }
.watch-pill.watch-report { background: #5a401088; color: #f0c060; border-color: #c09030; }

.watch-chart {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 168px;
  padding: 22px 2px 0;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 1.7rem;
  position: relative;
}
.watch-bar {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  cursor: default;
}
.watch-bar-fill {
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  opacity: 0.9;
  transition: opacity 0.12s ease, filter 0.12s ease;
  z-index: 1;
}
.watch-bar.level-none .watch-bar-fill { background: #3a3028; opacity: 0.35; }
.watch-bar.level-low .watch-bar-fill {
  background: linear-gradient(180deg, #e07070, #8a3030);
}
.watch-bar.level-mid .watch-bar-fill {
  background: linear-gradient(180deg, #e0c050, #8a6a20);
}
.watch-bar.level-high .watch-bar-fill {
  background: linear-gradient(180deg, #70d080, #2a7038);
}
.watch-bar:hover .watch-bar-fill {
  opacity: 1;
  filter: brightness(1.12);
}
.watch-report-flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: clamp(0.55rem, 1.1vw, 0.85rem);
  line-height: 1;
  color: #f0b040;
  text-shadow: 0 0 4px #000c, 0 1px 0 #000;
  pointer-events: none;
  opacity: calc(0.55 + (var(--rep, 50) / 100) * 0.45);
}
.watch-report-flag.hot {
  color: #ffcc55;
  filter: drop-shadow(0 0 3px #e0902088);
}
.watch-bar-label {
  position: absolute;
  bottom: -1.35rem;
  font-size: 0.62rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.watch-bar[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 5;
  max-width: 260px;
  white-space: normal;
  width: max-content;
  padding: 6px 8px;
  border-radius: 6px;
  background: #1a120c;
  border: 1px solid var(--border);
  color: var(--ink, #e7dfd2);
  font-size: 0.72rem;
  line-height: 1.3;
  pointer-events: none;
  box-shadow: 0 4px 14px #0008;
}

/* Community Sheets (steward+) */
.community-iframe {
  display: block;
  width: 100%;
  height: min(78vh, 900px);
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0f0a07;
}
.community-tabs { margin: 12px 0 16px; }

/* Utility */
.mt { margin-top: 14px; }
.row-flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
hr.rule { border: none; border-top: 1px solid var(--border-soft); margin: 14px 0; }

/* --- Forge / Smithery: Granite dark-red / ember (same family as granitehill.org) --- */
html[data-theme="ember"] {
  --bg: #120e0a;
  --bg-2: #1a1210;
  --surface: #1e1412;
  --card: #241814;
  --card-inset: #160e0c;
  --gold: #d4a94e;
  --gold-dim: #9a7c3d;
  --ember: #c45c48;
  --border: #4a2f2a;
  --border-soft: #35221e;
}
html[data-theme="ember"] .topbar {
  background: linear-gradient(180deg, #2a1614, #1c100e);
  border-bottom-color: var(--border);
}
html[data-theme="ember"] .brand-crest {
  filter: drop-shadow(0 0 7px #c45c4855);
}
html[data-theme="ember"] .btn {
  background: linear-gradient(180deg, #7a3a32, #5a2a26);
  border-color: #8f4540;
}
html[data-theme="ember"] .bottomnav {
  background: linear-gradient(180deg, #221412f5, #170c0afa);
  border-top-color: var(--border);
}
html[data-theme="ember"] .nav-item.active {
  color: var(--ember);
  background: #c45c4818;
}

.forge-price { font-family: var(--font-display); color: #7dcea0; font-weight: 600; }
.mat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.mat-cell {
  background: rgba(12, 10, 9, 0.65);
  border: 1px solid rgba(196, 92, 72, 0.35);
  border-radius: 8px; padding: 6px 4px; text-align: center;
}
.mat-cell .m-lbl { font-size: 0.65rem; text-transform: uppercase; color: var(--muted); }
.mat-cell .m-qty { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); }
.cost-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.cost-card {
  background: rgba(12, 10, 9, 0.7);
  border: 1px solid rgba(196, 92, 72, 0.32);
  border-radius: 10px; padding: 10px;
}
.cost-card .lbl { font-size: 0.7rem; text-transform: uppercase; color: var(--muted); font-family: var(--font-display); }
.cost-card .val { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold); margin-top: 2px; }
.cost-card.fair .val { color: #7dcea0; }
.cost-card.net .val { color: #ff6a1a; }
.cost-card.mats .val { color: #7ec8e3; }
.item-list li {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 10px 8px; border-bottom: 1px solid rgba(196, 92, 72, 0.18);
}
.item-list a { color: inherit; text-decoration: none; display: flex; justify-content: space-between; width: 100%; }
.tier-h { margin: 18px 0 6px; font-family: var(--font-display); color: var(--ember); }
.search-box {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(196, 92, 72, 0.3);
  background: var(--surface); color: var(--text); margin: 8px 0 12px;
}
.forge-form label { display: block; margin: 8px 0 4px; font-size: 0.85rem; color: var(--muted); }
.forge-form input, .forge-form select, .forge-form textarea {
  width: 100%; padding: 8px; border-radius: 6px;
  border: 1px solid rgba(196, 92, 72, 0.3);
  background: var(--surface); color: var(--text);
}
.qty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.ledger-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.ledger-tabs a {
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid rgba(196, 92, 72, 0.4);
  color: var(--text); text-decoration: none; font-family: var(--font-display);
}
.ledger-tabs a.active {
  background: #3a1e1c; border-color: var(--ember); color: var(--ember);
}
.ledger-card {
  background: rgba(12, 10, 9, 0.7);
  border: 1px solid rgba(196, 92, 72, 0.32);
  border-radius: 12px; padding: 14px;
}
.wanted-banner {
  background: rgba(196, 92, 72, 0.1);
  border: 1px solid rgba(196, 92, 72, 0.4);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 14px;
}
/* --- Hold colour packs (Colours menu) --- */
html[data-theme="watch"] {
  --bg: #0c1016;
  --bg-2: #121820;
  --surface: #151c26;
  --card: #1a2430;
  --card-inset: #10161e;
  --border: #3a4658;
  --border-soft: #2a3340;
  --gold: #c5d0dc;
  --gold-dim: #8a9aab;
  --ember: #6a8aaa;
  --text: #e6edf4;
  --muted: #8b9aab;
}
html[data-theme="watch"] .topbar {
  background: linear-gradient(180deg, #1a2430, #10161e);
}
html[data-theme="watch"] .bottomnav {
  background: linear-gradient(180deg, #1a2430f5, #0e141afa);
}

html[data-theme="wine"] {
  --bg: #14080c;
  --bg-2: #1c0c12;
  --surface: #221018;
  --card: #2a141c;
  --card-inset: #180a10;
  --border: #5a2a38;
  --border-soft: #3a1c26;
  --gold: #d4a94e;
  --gold-dim: #a07040;
  --ember: #a33a4a;
  --text: #f0e4d8;
  --muted: #b08990;
}
html[data-theme="wine"] .topbar {
  background: linear-gradient(180deg, #2e121c, #1a0a10);
}
html[data-theme="wine"] .bottomnav {
  background: linear-gradient(180deg, #2a1018f5, #14080cfa);
}

html[data-theme="moss"] {
  --bg: #0c120e;
  --bg-2: #121a14;
  --surface: #162018;
  --card: #1c281c;
  --card-inset: #101610;
  --border: #3a4a38;
  --border-soft: #2a3428;
  --gold: #c6b06a;
  --gold-dim: #7a8a58;
  --ember: #4a7a48;
  --text: #e8eedc;
  --muted: #8a9a78;
}
html[data-theme="moss"] .topbar {
  background: linear-gradient(180deg, #1a2418, #101610);
}
html[data-theme="moss"] .bottomnav {
  background: linear-gradient(180deg, #1a2418f5, #0c120efa);
}

html[data-theme="vellum"] {
  --bg: #e4d5b8;
  --bg-2: #eadcc4;
  --surface: #f3ead6;
  --card: #f4ebda;
  --card-inset: #e8dcc4;
  --border: #b89a68;
  --border-soft: #d0bc90;
  --gold: #6e4e18;
  --gold-dim: #8a6a32;
  --ember: #8a3a22;
  --text: #2a2118;
  --muted: #6a5a40;
  --ok: #3d6a32;
  --warn: #8a5a10;
  --bad: #8a3020;
}
html[data-theme="vellum"] body {
  background-image: none;
  background-color: var(--bg);
}
html[data-theme="vellum"] .topbar {
  background: linear-gradient(180deg, #efe4cc, #e0d0b0);
  box-shadow: 0 4px 0 #c4a87888;
}
html[data-theme="vellum"] .bottomnav {
  background: linear-gradient(180deg, #efe4ccf5, #e4d5b8fa);
}
html[data-theme="vellum"] .btn {
  color: #f8f0dc;
}
html[data-theme="vellum"] .card {
  box-shadow: inset 0 1px 0 #fff6, 0 4px 12px #6a542244;
}
html[data-theme="vellum"] input,
html[data-theme="vellum"] select,
html[data-theme="vellum"] textarea {
  background: #faf6ea;
  color: var(--text);
}

/* Colours menu */
.theme-menu { position: relative; }
.theme-menu-btn { list-style: none; cursor: pointer; }
.theme-menu-btn::-webkit-details-marker { display: none; }
.theme-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: min(320px, calc(100vw - 24px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 28px #0008;
}
.theme-menu-lead { margin: 0 0 10px; font-size: 0.82rem; color: var(--muted); }
.theme-swatches { display: grid; gap: 6px; }
.theme-swatch {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 40px;
}
.theme-swatch:hover { border-color: var(--gold-dim); }
.theme-swatch.is-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.theme-swatch-chip {
  width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid #0006;
}
.theme-swatch-keep .theme-swatch-chip { background: linear-gradient(135deg, #d4a94e, #1a1410); }
.theme-swatch-watch .theme-swatch-chip { background: linear-gradient(135deg, #c5d0dc, #0c1016); }
.theme-swatch-ember .theme-swatch-chip { background: linear-gradient(135deg, #c45c48, #1c100e); }
.theme-swatch-wine .theme-swatch-chip { background: linear-gradient(135deg, #a33a4a, #14080c); }
.theme-swatch-moss .theme-swatch-chip { background: linear-gradient(135deg, #4a7a48, #0c120e); }
.theme-swatch-vellum .theme-swatch-chip { background: linear-gradient(135deg, #6e4e18, #e4d5b8); }