/* Goblinwise – design tokens */
:root {
  --bg: #f6f3ec; --surface: #ffffff; --surface-2: #f0ebe0; --border: #e0d8c8;
  --text: #1f1b14; --muted: #6d6556; --accent: #a86a00; --accent-text: #ffffff;
  --good: #1d8a3a; --bad: #c0392b; --ok: #a86a00;
  --chart-1: #c98a00; --chart-2: #3a6fd8; --chart-3: #8a8270; --chart-bar: rgba(58,111,216,.22);
  --q-poor: #6f6f6f; --q-common: #1f1b14; --q-uncommon: #128a00; --q-rare: #0062c4; --q-epic: #8a2bd1; --q-legendary: #c25e00; --q-artifact: #a7863e; --q-heirloom: #0098b8;
  --radius: 12px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141a; --surface: #1a1d25; --surface-2: #222632; --border: #2c3140;
    --text: #e9e6df; --muted: #9a968c; --accent: #f2b43c; --accent-text: #1a1206;
    --good: #4cc66a; --bad: #ff6b5b; --ok: #f2b43c;
    --chart-1: #f2b43c; --chart-2: #7aa2ff; --chart-3: #8f8b80; --chart-bar: rgba(122,162,255,.22);
    --q-poor: #9d9d9d; --q-common: #ffffff; --q-uncommon: #1eff00; --q-rare: #3d9bff; --q-epic: #b65cff; --q-legendary: #ff8000; --q-artifact: #e6cc80; --q-heirloom: #00ccff;
    --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12141a; --surface: #1a1d25; --surface-2: #222632; --border: #2c3140;
  --text: #e9e6df; --muted: #9a968c; --accent: #f2b43c; --accent-text: #1a1206;
  --good: #4cc66a; --bad: #ff6b5b; --ok: #f2b43c;
  --chart-1: #f2b43c; --chart-2: #7aa2ff; --chart-3: #8f8b80; --chart-bar: rgba(122,162,255,.22);
  --q-poor: #9d9d9d; --q-common: #ffffff; --q-uncommon: #1eff00; --q-rare: #3d9bff; --q-epic: #b65cff; --q-legendary: #ff8000; --q-artifact: #e6cc80; --q-heirloom: #00ccff;
  --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; padding-top: 20px; padding-bottom: 40px; }
a { color: inherit; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .3em; }
h2 { font-size: 1.05rem; margin: 0 0 .6em; }
h3 { font-size: .95rem; margin: 1.2em 0 .4em; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.pad { padding: 16px; }
.pad-lg { padding: 40px 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tag { display: inline-block; font-size: .75rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.tag.warn { color: var(--bad); }
.btn { display: inline-block; background: var(--accent); color: var(--accent-text); padding: 8px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }

/* mode switch: pro-only elements are hidden in simple mode */
.mode-simple .pro-only { display: none !important; }

/* top bar */
.topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.topbar-main { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.15rem; letter-spacing: -.01em; white-space: nowrap; color: var(--text); }
.brand b { color: var(--accent); }
.search { position: relative; flex: 1; max-width: 560px; margin: 0 auto; }
.search .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input, .search-big input, select { width: 100%; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.search input { border-radius: 999px; padding-left: 38px; }
.search input:focus, .search-big input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.quick-results:not(:empty) { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.28); max-height: 60vh; overflow: auto; }
.tools { display: flex; align-items: center; gap: 8px; }
.lang-picker select { width: auto; padding: 6px 8px; font-size: .88rem; border-radius: 999px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.subbar { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.subbar-inner { display: flex; align-items: center; gap: 20px; min-height: 44px; }
.house-picker { display: flex; align-items: center; gap: 8px; min-width: 0; }
.house-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.house-picker select { width: auto; padding: 4px 28px 4px 10px; font-size: .9rem; font-weight: 600; border-radius: 999px; background-color: var(--surface); }
.house-picker .tag { text-decoration: none; }
.mainnav { display: flex; gap: 4px; margin-left: auto; }
.mainnav a { text-decoration: none; color: var(--muted); font-size: .9rem; padding: 6px 12px; border-radius: 999px; }
.mainnav a:hover { color: var(--text); background: var(--surface-2); }
.mainnav a.active { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.mode-switch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.mode-switch a { text-decoration: none; padding: 3px 12px; border-radius: 999px; font-size: .85rem; color: var(--muted); }
.mode-switch a.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }

.nav-link { text-decoration: none; font-size: .9rem; color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form select { width: auto; padding: 4px 8px; font-size: .9rem; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.card-head h2 { margin: 0; }

/* hero */
.hero { text-align: center; padding: 28px 0 20px; }
.hero h1 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
.lead { color: var(--muted); max-width: 640px; margin: 0 auto 18px; }
.search-big { max-width: 640px; margin: 0 auto 8px; }
.search-big input { padding: 14px 16px; font-size: 1.05rem; border-radius: 12px; }
.home-results { max-width: 640px; margin: 0 auto; text-align: left; }
.home-results:not(:empty) { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }

/* item lists */
.item-list { list-style: none; margin: 0; padding: 4px; }
.item-list a { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; text-decoration: none; }
.item-list a:hover, .item-list a:focus { background: var(--surface-2); }
.item-list .price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-list .qty { font-size: .8rem; white-space: nowrap; }
.icon { border-radius: 6px; border: 1px solid var(--border); vertical-align: middle; background: var(--surface-2); }
.icon-empty { display: inline-block; width: 32px; height: 32px; }
.icon-empty.small { width: 24px; height: 24px; }
.icon.big, .icon-empty.big { width: 56px; height: 56px; border-radius: 10px; }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th { text-align: left; color: var(--muted); font-weight: 600; font-size: .8rem; border-bottom: 1px solid var(--border); padding: 6px 8px; white-space: nowrap; }
table.data td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr.current td { background: var(--surface-2); font-weight: 600; }
.item-link { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }
.item-link:hover span { text-decoration: underline; }

/* quality colours */
.q-poor { color: var(--q-poor); } .q-common { color: var(--q-common); } .q-uncommon { color: var(--q-uncommon); }
.q-rare { color: var(--q-rare); } .q-epic { color: var(--q-epic); } .q-legendary { color: var(--q-legendary); }
.q-artifact { color: var(--q-artifact); } .q-heirloom { color: var(--q-heirloom); }

/* item page */
.crumbs { margin-bottom: 8px; } .crumbs a { text-decoration: none; }
.item-head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding: 8px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.item-id { display: flex; gap: 14px; align-items: center; min-width: 0; }
.item-id > div { min-width: 0; }
.item-id h1 { margin: 0; overflow-wrap: anywhere; }
.item-id p { margin: 2px 0 0; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(90px, auto)); gap: 6px 28px; }
.kpi .label { display: block; color: var(--muted); font-size: .8rem; }
.kpi .value { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trend-up { color: var(--good); } .trend-down { color: var(--bad); }
.item-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.verdict { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid var(--border); background: var(--surface); }
.verdict p { margin: 2px 0 0; color: var(--muted); }
.verdict .dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; flex: none; }
.verdict-good .dot { background: var(--good); } .verdict-bad .dot { background: var(--bad); } .verdict-ok .dot { background: var(--ok); }
.verdict-good { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.verdict-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.tips { display: flex; gap: 24px; flex-wrap: wrap; }
.tips .label { display: block; color: var(--muted); font-size: .8rem; }
.chart { width: 100%; height: 320px; }
.chart.heat { height: 280px; }
.range { display: inline-flex; gap: 4px; }
.range button { font: inherit; font-size: .8rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.range button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
dl.stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: .92rem; }
dl.stats dt { color: var(--muted); } dl.stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tooltip { display: flex; flex-direction: column; gap: 2px; background: #0b0d12; color: #fff; border: 1px solid #3a3f50; border-radius: 8px; padding: 10px 12px; font-size: .9rem; }
.tooltip .ilvl { color: #ffd100; }
.tooltip .q-common { color: #fff; }

/* prose */
.prose { max-width: 820px; margin: 0 auto 16px; }
.prose dt { font-weight: 650; margin-top: 10px; }
.prose dd { margin: 2px 0 0; color: var(--muted); }

/* footer */
.footer { background: var(--surface); border-top: 1px solid var(--border); padding: 20px 0; font-size: .88rem; }
.footer-inner { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; align-items: center; }
.eu-badge { display: flex; gap: 10px; align-items: center; }
.eu-badge span { display: flex; flex-direction: column; line-height: 1.25; }
.eu-badge small { color: var(--muted); }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.footer-links a { color: var(--muted); }
.theme-switch { color: var(--muted); }
.theme-switch a { margin-left: 4px; } .theme-switch a.active { color: var(--accent); font-weight: 600; }
.disclaimer { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; margin: 0; }

/* responsive */
@media (max-width: 900px) {
  .item-grid { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 640px) {
  h1 { font-size: 1.35rem; }
  .topbar { position: static; }
  .topbar-main { height: auto; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .brand { flex: 1; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .subbar-inner { flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .house-picker { flex: 1 1 100%; }
  .house-picker select { flex: 1; min-width: 0; }
  .house-label span { display: none; }
  .mainnav { margin-left: 0; }
  .mainnav a { padding: 6px 8px; }
  .mode-switch { margin-left: auto; }
  .item-head { gap: 12px; }
  .chart { height: 260px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .item-list a { grid-template-columns: 32px 1fr auto; }
  .item-list .qty { display: none; }
}

/* Heatmap card (first block on the item page) */
.heat-card .heat-sub { margin: 0 0 4px; }
.heat-card .chart[hidden] { display: none; }
.heat-card .tips { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.heat-card .tips b { font-size: 1.05rem; }
.chart.heat { height: 300px; }
@media (max-width: 640px) { .chart.heat { height: 250px; } }

/* Market treemap (start page) */
.market-card .card-head h2 .small { font-weight: 400; margin-left: 6px; }
.chart.market-map { height: 560px; }
@media (max-width: 640px) { .chart.market-map { height: 440px; } }


/* Coin colours (WoW money text colours; darker variants on light backgrounds) */
.money { white-space: nowrap; }
.coin-g { color: #ffd700; } .coin-s { color: #c7c7cf; } .coin-c { color: #eda55f; }
.coin-g, .coin-s, .coin-c { font-weight: 700; }
:root:not([data-theme="dark"]) .coin-g { color: #9a7400; }
:root:not([data-theme="dark"]) .coin-s { color: #6b6b75; }
:root:not([data-theme="dark"]) .coin-c { color: #a65a1c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .coin-g { color: #ffd700; }
  :root:not([data-theme="light"]) .coin-s { color: #c7c7cf; }
  :root:not([data-theme="light"]) .coin-c { color: #eda55f; }
}
/* The item tooltip box is always dark, like in game */
.tooltip .coin-g { color: #ffd700; } .tooltip .coin-s { color: #c7c7cf; } .tooltip .coin-c { color: #eda55f; }

/* Wowhead tooltip (sanitised HTML, in-game colours on the dark tooltip box) */
.tooltip.wh { display: block; line-height: 1.45; }
.wh table { width: 100%; border-collapse: collapse; }
.wh td, .wh th { padding: 0; vertical-align: top; text-align: left; font-weight: 400; }
.wh th { text-align: right; }
.wh a { color: inherit; text-decoration: none; }
.wh a:hover { text-decoration: underline; }
.wh b { font-size: 1.05rem; }
.wh .q { color: #ffd100; } .wh .q0 { color: #9d9d9d; } .wh .q1 { color: #ffffff; } .wh .q2 { color: #1eff00; }
.wh .q3 { color: #0070dd; } .wh .q4 { color: #a335ee; } .wh .q5 { color: #ff8000; } .wh .q6 { color: #e6cc80; } .wh .q7 { color: #00ccff; }
.wh .q8 { color: #ffd100; }
.wh .moneygold::after { content: "g"; color: #ffd700; }
.wh .moneysilver::after { content: "s"; color: #c7c7cf; }
.wh .moneycopper::after { content: "k"; color: #eda55f; }
html:lang(en) .wh .moneycopper::after { content: "c"; }
.wh-source { margin: 8px 0 0; }

/* Market treemap legend and movers */
.market-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.legend-bar { width: 160px; height: 10px; border-radius: 999px; border: 1px solid var(--border); }
.legend-hint { margin-left: auto; }
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.movers h3 { margin: 0 0 6px; font-size: .95rem; }
.movers ol { margin: 0; padding: 0; list-style: none; }
.movers li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--border); }
.movers li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .movers { grid-template-columns: 1fr; gap: 12px; } .legend-hint { margin-left: 0; } }

/* Buttons */
.btn { border: 1px solid var(--accent); cursor: pointer; font: inherit; font-weight: 600; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--accent); }
.btn.small { padding: 4px 10px; font-size: .85rem; }
.btn.danger { color: var(--bad); }
.file-btn { position: relative; overflow: hidden; display: inline-block; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tag.accent { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }

/* Ledger */
.ledger-hero { margin: 24px 0 16px; }
.ledger-hero .lead { max-width: 760px; }
.lg-sources { display: grid; gap: 14px; }
.lg-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lg-statusbar { display: none; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-statusbar .lg-ok { color: var(--good); font-weight: 700; font-size: 1.2rem; }
.lg-bar-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.lg-sources.compact { padding-top: 12px; padding-bottom: 12px; }
.lg-sources.compact .lg-statusbar { display: flex; }
.lg-sources.compact .lg-setup { display: none; }
.lg-sources.compact.open .lg-setup { display: grid; }
.lg-realm-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-realm-controls .lg-detected { flex-basis: 100%; }
.lg-realm-controls select { width: auto; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.seg button { font: inherit; font-size: .82rem; border: 0; background: transparent; color: var(--muted); padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.seg button.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.lg-detected { font-size: .75rem; }
.lg-source { padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.lg-recommended { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lg-source-head { display: flex; align-items: center; gap: 10px; }
.lg-source-head h2 { margin: 0; }
.lg-status { display: none; }
.lg-source[data-state="checking"] [data-show="checking"], .lg-source[data-state="connected"] [data-show="connected"],
.lg-source[data-state="missing"] [data-show="missing"], .lg-source[data-state="disabled"] [data-show="disabled"],
.lg-source[data-state="noaddon"] [data-show="noaddon"], .lg-source[data-state="installing"] [data-show="installing"],
.lg-source[data-state="installed"] [data-show="installed"] { display: block; }
.lg-status.bad { color: var(--bad); }
.lg-why { margin-top: 12px; }
.lg-why summary { cursor: pointer; font-weight: 600; }
.lg-why ul { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; }
.lg-status.good b, .lg-status .good b { color: var(--good); }
.lg-status p { margin: 6px 0; }
.lg-steps { padding-left: 20px; margin: 8px 0; display: grid; gap: 10px; }
.lg-steps .btn { margin-top: 6px; }
.lg-more summary { cursor: pointer; color: var(--muted); }
.lg-message { grid-column: 1 / -1; margin: 0; }
.lg-message:empty { display: none; }
.lg-message.bad { color: var(--bad); }
.lg-realm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.lg-realm { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.lg-realm-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lg-realm select { width: auto; max-width: 60%; }
.lg-period-head { margin-top: 24px; }
.lg-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.lg-kpis .kpi { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lg-recent { max-height: 420px; overflow: auto; }
@media (max-width: 900px) { .lg-setup, .lg-grid { grid-template-columns: 1fr; } }

/* Sellability and tips */
.sell-pill { display: inline-block; font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.sell-easy { color: var(--good); } .sell-medium { color: var(--ok); } .sell-hard { color: var(--bad); } .sell-unknown { color: var(--muted); }
.sell-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }
.tips-card .card-head a { text-decoration: none; }
.tip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tip { display: grid; gap: 2px; padding: 10px 12px 10px 14px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--muted); }
.tip span { color: var(--muted); font-size: .9rem; }
.tip-good { border-left-color: var(--good); } .tip-warn { border-left-color: var(--ok); } .tip-info { border-left-color: var(--chart-2); }
.tips-off { margin: 0 0 8px; } .tips-off a { text-decoration: none; }

/* The hidden attribute always wins over display rules of components */
[hidden] { display: none !important; }

/* Ledger: what to show */
.lg-filter { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 20px; padding: 12px 16px; }
.lg-filter-house { display: flex; flex-direction: column; gap: 4px; }
.lg-filter-house select { width: auto; min-width: 200px; font-weight: 600; }
.lg-filter-chars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: .85rem; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.chip[aria-pressed="true"]::before { content: "✓ "; color: var(--accent); }

/* Back link */
.back-link { font-weight: 600; text-decoration: none; color: var(--text); padding: 2px 10px 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.back-link:hover { border-color: var(--accent); color: var(--accent); }
.crumb-sep { margin: 0 8px; }

/* Page transitions (cross-document view transitions, Chromium and Safari). Header and footer
   swap instantly; the old content stays fully visible while the new one fades in on top, so the
   page never shows its empty background in between. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.footer { view-transition-name: footer; }
main.wrap { view-transition-name: content; }
::view-transition-old(root), ::view-transition-new(root),
::view-transition-group(content), ::view-transition-group(topbar), ::view-transition-group(footer) { animation: none; }
::view-transition-old(content) { animation: none; }
::view-transition-new(content) { animation: 180ms ease-out both vt-in; }
@keyframes vt-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(content) { animation: none; }
}


/* Is the AH worth it? */
.worth { border-left: 4px solid var(--border); }
.worth-ah { border-left-color: var(--good); } .worth-marginal { border-left-color: var(--ok); } .worth-vendor { border-left-color: var(--bad); }
.worth-verdict { font-weight: 700; }
.worth-ah .worth-verdict { color: var(--good); } .worth-marginal .worth-verdict { color: var(--ok); } .worth-vendor .worth-verdict { color: var(--bad); }
.worth p { margin: 4px 0 8px; }
.worth-calc dt:nth-last-of-type(2), .worth-calc dd:nth-last-of-type(2) { font-weight: 700; border-top: 1px solid var(--border); padding-top: 4px; }