/* dashboard layout; base tokens come from style.css */

.bar {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.2rem clamp(1.2rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
}

.bar .wordmark {
  font-size: 1.3rem;
  text-decoration: none;
}

.crumb {
  color: var(--muted);
  font-size: 0.85rem;
  flex: 1;
}

.bar #wallet,
.bar .xlink {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
}
.bar .xlink { margin-right: 1.4rem; }
.bar #wallet:hover,
.bar .xlink:hover { color: var(--ink); }

/* the UPOTIA registry — land-office ledger aesthetic over the city's navy */

.market-body { background: #0c2340; }
.market-bar { border-bottom: 1px solid rgba(140,170,210,0.14); }

.market-page { max-width: 1140px; margin: 0 auto; padding: 3.2rem 1.5rem 4rem; }

/* ---- registry head: an old land-office title block ---- */
.registry-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.registry-kicker { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: #7f9bc0; margin: 0 0 0.9rem; }
.registry-head h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: #e9f2fb; margin: 0 0 1rem; line-height: 1.05; }
.registry-sub { color: #b9cbe0; line-height: 1.55; font-size: 0.95rem; margin: 0 auto; max-width: 56ch; }
.registry-line { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 0.9rem; }
.registry-line span { flex: 1; height: 1px; background: rgba(140,170,210,0.25); }
.registry-line em { font-family: 'Instrument Serif', serif; font-style: italic; color: #8fb0d4; font-size: 0.82rem; white-space: nowrap; }
.registry-status { color: #8fb0d4; font-size: 0.85rem; }

/* ---- columns ---- */
.market-columns { display: grid; grid-template-columns: 300px 1fr; gap: 2.2rem; align-items: start; }
@media (max-width: 820px) { .market-columns { grid-template-columns: 1fr; } }

/* ---- the ledger (left rail) ---- */
.ledger-block { margin-bottom: 2.2rem; }
.ledger-block h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.35rem; color: #e9f2fb; margin: 0; }
.ledger-note { color: #6f8bb0; font-size: 0.74rem; margin: 0.15rem 0 0.7rem; }
.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rk; }
.rank-list li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0 0.5rem; align-items: baseline;
  padding: 0.5rem 0; border-top: 1px solid rgba(140,170,210,0.12); font-size: 0.86rem; }
.rank-list li a { white-space: nowrap; }
.rank-list li::before { counter-increment: rk; content: counter(rk, decimal-leading-zero);
  font-family: 'Instrument Serif', serif; font-style: italic; color: #55719a; font-size: 0.8rem; }
.rank-list a { color: #cfe0f2; text-decoration-color: rgba(185,211,236,0.35); }
.rank-list .sub { grid-column: 2 / 4; color: #7f9bc0; font-size: 0.72rem; white-space: nowrap; }
.rank-list .val { color: #e3c67b; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.8rem; }

/* ---- the deeds: a proper land title ---- */
.deeds .body { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }

.deed { position: relative; border: 1px solid rgba(140,170,210,0.18); border-radius: 3px;
  background: #0e2748; overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.deed:hover { border-color: rgba(227,198,123,0.45); transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4); }

/* survey banner (the diorama) */
.deed-survey { position: relative; height: 120px;
  background: radial-gradient(120% 90% at 50% 10%, #17386690, #0a1c37);
  border-bottom: 1px solid rgba(140,170,210,0.16); }
.deed-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.deed-no { position: absolute; top: 0.55rem; left: 0.7rem; font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(185,211,236,0.55); }

/* title */
.deed-name { display: flex; align-items: baseline; justify-content: space-between; padding: 0.85rem 1.1rem 0; }
.deed-name h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.65rem; color: #f0f5fb; margin: 0; line-height: 1; }
.deed-loc { font-size: 0.72rem; color: #7f9bc0; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

.deed-district { font-family: 'Instrument Serif', serif; font-style: italic; color: #b9d3ec; font-size: 0.92rem;
  margin: 0.35rem 1.1rem 0; }
.deed-district i { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; margin-right: 0.45em; }

/* ledger facts, evenly ruled */
.deed-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0.9rem 0 0; padding: 0;
  border-top: 1px solid rgba(140,170,210,0.12); }
.deed-facts > div { padding: 0.7rem 1.1rem; }
.deed-facts > div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(140,170,210,0.1); }
.deed-facts > div:nth-child(1) { border-right: 1px solid rgba(140,170,210,0.1); }
.deed-facts dt { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #6f8bb0; margin: 0 0 0.28rem; }
.deed-facts dd { margin: 0; font-size: 0.9rem; color: #dfeaf6; font-variant-numeric: tabular-nums; }
.deed-facts dd a { color: #b9d3ec; }
.deed-facts em { font-style: normal; color: #e3c67b; font-size: 0.8rem; }

/* the foot: price + acquire, one settled bar */
.deed-foot { display: flex; align-items: stretch; border-top: 1px solid rgba(140,170,210,0.16); }
.deed-ask { flex: 1; padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.deed-ask span { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #6f8bb0; }
.deed-ask strong { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.5rem; color: #e3c67b; }
.act { border: none; border-left: 1px solid rgba(140,170,210,0.16); background: transparent; cursor: pointer;
  font: inherit; font-size: 0.9rem; color: #eaf1fb; padding: 0 1.3rem; letter-spacing: 0.03em;
  display: flex; align-items: center; gap: 0.5rem; transition: background 0.25s, color 0.25s; }
.act.buy:hover { background: #e3c67b; color: #0c2340; }
.act .arr { transition: transform 0.25s; }
.act.buy:hover .arr { transform: translateX(4px); }
.act.cancel { color: #d09a9a; }
.act.cancel:hover { background: rgba(200,120,120,0.16); }
.tx { font-size: 0.72rem; color: #8fb0d4; margin: 0; padding: 0 1.1rem; min-height: 0; }
.tx:not(:empty) { padding: 0.5rem 1.1rem; }

@keyframes deal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.deed.deal-in { animation: deal-in 0.55s cubic-bezier(0.2,0.7,0.2,1) both; }
@media (prefers-reduced-motion: reduce) { .deed.deal-in { animation: none; } }

/* stock filter tabs */
.stock-tabs { display: flex; gap: 0.4rem; margin: 0 0 1rem; flex-wrap: wrap; }
.stock-tabs .tab { font: inherit; font-size: 0.78rem; letter-spacing: 0.08em; padding: 0.35rem 0.85rem;
  background: transparent; border: 1px solid rgba(140,170,210,0.25); color: #9db8d6; cursor: pointer; border-radius: 2px;
  transition: all 0.2s; }
.stock-tabs .tab:hover { border-color: rgba(227,198,123,0.4); color: #dfeaf6; }
.stock-tabs .tab.active { background: #e3c67b; border-color: #e3c67b; color: #0c2340; }

/* payroll + city books */
.pay-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.4rem 0;
  border-top: 1px solid rgba(140,170,210,0.12); font-size: 0.85rem; color: #9db8d6; }
.pay-row:first-child { border-top: none; }
.pay-row strong { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.05rem; color: #dfeaf6; }
.pay-row strong.gold, .pay-row .gold { color: #e3c67b; }
.pay-streak { font-size: 0.74rem; color: #8fb0d4; margin: 0.3rem 0 0; }
.pay-warning { font-size: 0.7rem; color: #b08585; margin: 0.55rem 0 0; font-style: italic; }
.act.pay-claim { margin-top: 0.7rem; width: 100%; border: 1px solid rgba(227,198,123,0.5); color: #e3c67b;
  padding: 0.5rem; justify-content: center; }
.act.pay-claim:hover { background: #e3c67b; color: #0c2340; }

/* ---- polish pass: nav, earnings bar, feed, confirm sheet, list form ---- */
.mkt-nav { display: flex; gap: 1.1rem; }
.mkt-nav a { font-size: 0.88rem; color: #9db8d6; text-decoration: none; letter-spacing: 0.03em; }
.mkt-nav a:hover { color: #e9f2fb; }
.mkt-nav a.here { color: #e3c67b; border-bottom: 1px solid rgba(227,198,123,0.5); padding-bottom: 2px; }
.quiet-link { font-size: 0.88rem; color: #9db8d6; text-decoration: none; }

.registry-head.slim { margin-bottom: 1.6rem; }
.registry-head.slim h1 { font-size: clamp(2rem, 4vw, 2.8rem); }

.earnings-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: rgba(140,170,210,0.16); border: 1px solid rgba(140,170,210,0.16); margin: 0 0 0.8rem; }
.earn-cell { background: #0e2748; padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.earn-cell span { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: #6f8bb0; }
.earn-cell strong { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.45rem; color: #e9f2fb; }
.earn-cell strong.gold { color: #e3c67b; }
.earn-cell em { font-style: normal; font-size: 0.7rem; color: #8fb0d4; }
.earn-action { justify-content: center; }
.pay-warning.center { text-align: center; margin-bottom: 2rem; }

.deed-flag { position: absolute; top: 0.55rem; right: 0.7rem; font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #0c2340; background: #e3c67b; padding: 0.2rem 0.5rem; border-radius: 2px; }

.list-form { padding: 0.8rem 1.1rem; border-top: 1px solid rgba(140,170,210,0.16); }
.list-form label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: #9db8d6; }
.list-form input { font: inherit; background: rgba(12,35,64,0.6); border: 1px solid rgba(140,170,210,0.3);
  color: #e9f2fb; padding: 0.45rem 0.6rem; width: 8rem; border-radius: 2px; }
.list-form .act { margin-top: 0.6rem; width: 100%; justify-content: center; border: 1px solid rgba(227,198,123,0.5); }

.empty-state { text-align: center; padding: 3rem 1rem; grid-column: 1 / -1; }
.empty-state p { font-family: 'Instrument Serif', serif; font-size: 1.4rem; color: #9db8d6; margin: 0 0 1rem; }
.browse-link { display: inline-block; width: auto; padding: 0.55rem 1.4rem; border: 1px solid rgba(227,198,123,0.5);
  color: #e3c67b; text-decoration: none; }

.browse-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.browse-controls .stock-tabs { margin: 0; }
.sort-select { font: inherit; font-size: 0.8rem; background: #0e2748; color: #9db8d6;
  border: 1px solid rgba(140,170,210,0.25); padding: 0.4rem 0.6rem; border-radius: 2px; }

/* buy confirm sheet */
.confirm-overlay { position: fixed; inset: 0; background: rgba(6,16,32,0.7); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.confirm-card { background: #0e2748; border: 1px solid rgba(227,198,123,0.35); padding: 1.4rem 1.6rem;
  max-width: 380px; width: 100%; position: relative; }
.confirm-card h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.6rem; margin: 0 0 0.9rem; color: #f0f5fb; }
.confirm-rows div { display: flex; justify-content: space-between; padding: 0.45rem 0;
  border-top: 1px solid rgba(140,170,210,0.12); font-size: 0.85rem; }
.confirm-rows dt { color: #7f9bc0; }
.confirm-rows dd { margin: 0; color: #dfeaf6; font-variant-numeric: tabular-nums; }
.confirm-rows dd.gold { color: #e3c67b; }
.confirm-go { width: 100%; margin-top: 1rem; justify-content: center; border: 1px solid rgba(227,198,123,0.5); }
.confirm-close { position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: none;
  color: #6f8bb0; font: inherit; font-size: 0.78rem; cursor: pointer; }
.confirm-block { font-size: 0.84rem; color: #d9a8a8; line-height: 1.5; margin: 1rem 0 0; }
.confirm-block a { color: #e3c67b; }

/* activity feed */
.feed .body { border: 1px solid rgba(140,170,210,0.16); }
.feed-row { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.3rem 1rem; padding: 0.75rem 1.1rem;
  border-top: 1px solid rgba(140,170,210,0.1); font-size: 0.86rem; align-items: baseline; }
.feed-row:first-child { border-top: none; }
.feed-what { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8ec07c; }
.feed-what.listed { color: #8fb0d4; }
.feed-plot { color: #dfeaf6; }
.feed-plot em { font-style: italic; font-family: 'Instrument Serif', serif; color: #8fb0d4; margin-left: 0.4rem; }
.feed-price { text-align: right; font-variant-numeric: tabular-nums; color: #cfe0f2; }
.feed-price.gold { color: #e3c67b; }
.feed-who { grid-column: 2 / 4; font-size: 0.74rem; color: #6f8bb0; }
.feed-who a { color: #9db8d6; }

@media (max-width: 700px) {
  .mkt-nav { gap: 0.7rem; flex-wrap: wrap; }
  .earnings-bar { grid-template-columns: 1fr 1fr; }
  .deeds .body { grid-template-columns: 1fr; }
}

/* [hidden] must win over display:grid/flex on these */
[hidden] { display: none !important; }