/* Insula — the design system, in daylight.
   Marmor for the ground, Nox for the words, Aurum for anything you can do, Terracotta for warnings,
   Saxum for quiet text. Headings are carved (Marcellus, after Trajan's column); body text is
   Alegreya Sans; Latin mottoes are set in Cormorant italic, as a painter would letter them. */

:root {
  color-scheme: light;

  /* brand palette */
  --nox: #0d0c0a;
  --marmor: #efe7d8;
  --aurum: #c9a35a;
  --aurum-hover: #d9b66e;
  --aurum-dark: #9e7e40;
  --terracotta: #b5583a;
  --saxum: #8f877a;

  --bg: #f3eee3;
  --bg-deep: #e9e1d2;
  --surface: #fbf8f2;
  --surface-2: #f2ebde;
  --surface-sunk: #ebe3d4;
  --line: #ddd3c2;
  --line-strong: #c9bda8;
  --ink: var(--nox);
  --ink-soft: #464035;
  /* Saxum, darkened just enough to read on Marmor */
  --ink-faint: #6b6457;

  --gold: var(--aurum);
  --on-gold: #17130b;
  /* gold for words on a light ground (plain Aurum is too pale to read there) */
  --aurum-ink: #866424;

  /* Fresco pigments, muted to sit on Nox: providers, tenants, charts. Text on them is dark. */
  --apricot: #c98a5c;
  --mint: #8fb39b;
  --sky: #8ea4c9;
  --lilac: #a996c2;
  --rose: #c98a8a;
  --sage: #a8b07a;
  --butter: #d8bd78;
  --blue: #6f8fc9;
  --ochre: var(--aurum);
  --verdigris: #7fa391;

  --ok: #5e8a4c;
  --danger: var(--terracotta);
  --danger-soft: rgba(181, 88, 58, 0.14);

  /* older names, same roles */
  --red: var(--aurum);
  --red-deep: var(--aurum-dark);
  --on-red: var(--on-gold);
  --sodium: var(--aurum);
  --on-sodium: var(--on-gold);
  --caution: var(--aurum);

  --r-s: 3px;
  --r: 5px;
  --r-l: 8px;

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 18px 36px -26px rgba(60, 44, 20, 0.45);
  --frame: inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgba(201, 163, 90, 0.45);
  --soft: cubic-bezier(0.22, 1, 0.36, 1);
  --snap: cubic-bezier(0.34, 1.4, 0.64, 1);

  --font-carve: 'Marcellus', 'Trajan Pro', Georgia, serif;
  --font-body: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-latin: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --font-sign: var(--font-carve);

  --dock-h: 84px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  overflow-x: hidden;
}

/* Travertine: warm light from above, faint grain and bedding lines. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(255, 250, 238, 0.9), transparent 70%),
    repeating-linear-gradient(178deg, transparent 0 46px, rgba(150, 120, 70, 0.03) 46px 48px, transparent 48px 120px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-carve);
  font-weight: 400;
  text-wrap: balance;
}

h1,
h2 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.04;
}

h1 {
  font-size: clamp(2.5rem, 6.6vw, 5.2rem);
}

h2 {
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
}

h3 {
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

p {
  margin: 0;
}

a {
  color: var(--aurum-ink);
  font-weight: 700;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--aurum-dark);
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.84em;
}

:focus-visible {
  outline: 2px solid var(--aurum);
  outline-offset: 3px;
  border-radius: 2px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.muted {
  color: var(--ink-soft);
}

.faint {
  color: var(--ink-faint);
  font-size: 0.9rem;
}

/* Carved caption: wide-spaced capitals in gold. */
.eyebrow {
  font: 400 0.78rem/1.3 var(--font-carve);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aurum-ink);
}

/* A Latin line, in a painter's italic. */
.latin {
  font: italic 500 1.18rem/1.3 var(--font-latin);
  color: var(--ink-faint);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- primitives ---------- */

/* A panel of dark stone with a gold hairline carved just inside its edge. */
.slab {
  position: relative;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, #fdfbf7, var(--surface));
  box-shadow: var(--shadow), var(--frame);
}

/* A panel in one colour (the balance on the home page is gold leaf). */
.slab--tint {
  border-color: transparent;
  background: linear-gradient(160deg, var(--tint), color-mix(in srgb, var(--tint) 72%, #000));
  color: var(--on-gold);
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--tint) 85%, #000), inset 0 0 0 6px rgba(13, 12, 10, 0.25), var(--shadow);
}

.well {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-sunk);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 46px;
  padding: 0 1.25em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink);
  font: 700 1rem/1 var(--font-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--snap);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn:hover {
  border-color: var(--aurum-dark);
  color: var(--ink);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  border-color: var(--aurum-dark);
  background: var(--aurum);
  color: var(--on-gold);
}

.btn--primary:hover {
  border-color: var(--aurum);
  background: var(--aurum-hover);
  color: var(--on-gold);
}

.btn--primary:active {
  background: var(--aurum-dark);
}

.btn--big {
  min-height: 56px;
  padding: 0 1.6em;
  font-size: 1.08rem;
}

.btn--small {
  min-height: 38px;
  padding: 0 0.9em;
  font-size: 0.9rem;
}

.btn--icon {
  width: 44px;
  min-height: 44px;
  padding: 0;
}

.btn--icon.btn--small {
  width: 38px;
  min-height: 38px;
}

.btn--danger {
  border-color: rgba(181, 88, 58, 0.5);
  background: var(--danger-soft);
  color: #8e3a22;
}

.btn--ghost {
  border-color: transparent;
  background: transparent;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 30px;
  padding: 0 0.75em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--chip, var(--surface-2));
  color: var(--ink);
  font: 700 0.84rem/1 var(--font-body);
  white-space: nowrap;
}

.chip[style*='--chip'] {
  border-color: rgba(0, 0, 0, 0.2);
  color: #17130b;
}

button.chip {
  min-height: 38px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 160ms, background 160ms;
}

button.chip:hover {
  border-color: var(--aurum-dark);
}

button.chip[aria-pressed='true'] {
  border-color: var(--aurum);
  background: var(--aurum);
  color: var(--on-gold);
}

/* ---------- forms ---------- */

.field {
  display: grid;
  gap: 8px;
}

.field > label,
.field > .label,
.label {
  font-weight: 700;
  font-size: 0.95rem;
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink);
  font: 500 1rem/1.4 var(--font-body);
  transition: border-color 160ms, box-shadow 160ms;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-faint);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--aurum);
  box-shadow: 0 0 0 3px rgba(201, 163, 90, 0.16);
}

.select {
  appearance: none;
  padding-right: 40px;
  background:
    linear-gradient(45deg, transparent 50%, var(--aurum) 50%) calc(100% - 20px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--aurum) 50%, transparent 50%) calc(100% - 14px) 50% / 6px 6px no-repeat,
    var(--surface-2);
  cursor: pointer;
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

.input--mono {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.hint {
  color: var(--ink-faint);
  font-size: 0.88rem;
}

.error-text {
  color: var(--terracotta);
  font-weight: 700;
  font-size: 0.9rem;
}

.with-icon {
  position: relative;
}

.with-icon > .icon {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  color: var(--ink-faint);
  pointer-events: none;
}

.with-icon > .input {
  padding-left: 46px;
}

input[type='range'] {
  width: 100%;
  min-height: 30px;
  accent-color: var(--aurum);
}

/* ---------- shell: the top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(243, 238, 227, 0.9);
  backdrop-filter: blur(10px);
}

/* The column mark, then the name carved on a tabula ansata: a plaque with dovetail handles. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

.brand span {
  position: relative;
  padding: 7px 26px 5px;
  background: linear-gradient(180deg, #fdfbf6, #efe7d8);
  color: var(--nox);
  font: 400 1.12rem/1 var(--font-carve);
  letter-spacing: 0.26em;
  clip-path: polygon(0 50%, 12px 0, 12px 22%, 18px 0, calc(100% - 18px) 0, calc(100% - 12px) 22%, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, calc(100% - 12px) 78%, calc(100% - 18px) 100%, 18px 100%, 12px 78%, 12px 100%);
  box-shadow: inset 0 0 0 1px var(--aurum);
}

/* Balance as a gold denarius and its value. */
.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 700 1.02rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color 160ms;
}

.balance-pill:hover {
  border-color: var(--aurum);
  color: var(--ink);
}

.balance-pill .coin {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ecd496, var(--aurum) 60%, var(--aurum-dark));
  box-shadow: inset 0 0 0 2px rgba(80, 56, 16, 0.45);
  color: #3d2c0b;
  font: 400 0.72rem/1 var(--font-carve);
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font: 500 0.8rem/1 var(--font-mono);
}

/* each wallet gets a tessera in its own colour */
.who .blob {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(0, 0, 0, 0.3) 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(0, 0, 0, 0.3) 48% 52%, transparent 52%),
    linear-gradient(135deg, hsl(var(--h) 35% 55%), hsl(calc(var(--h) + 40) 35% 38%));
}

@media (max-width: 560px) {
  .who .addr {
    display: none;
  }

  .who {
    padding-right: 6px;
  }
}

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px var(--gutter) calc(var(--dock-h) + 48px + env(safe-area-inset-bottom));
}

.view-enter {
  animation: rise 480ms var(--soft) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- shell: the dock is a Roman road with milestones ---------- */

.dock {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  padding: 10px 12px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  /* paving stones laid in a running pattern */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(180deg, #221f19, #17150f);
  box-shadow: 0 18px 34px -16px rgba(40, 28, 12, 0.55), inset 0 1px 0 rgba(239, 231, 216, 0.06);
}

.dock a {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 6px;
  width: clamp(50px, 14vw, 82px);
  color: #b9b0a1;
  text-decoration: none;
  font: 400 0.64rem/1 var(--font-carve);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* a milestone: a squat marble post with a rounded top and the station's numeral */
.dock .stop {
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  border-radius: 14px 14px 3px 3px;
  background: linear-gradient(90deg, #b9b0a1, var(--marmor) 45%, #a9a091);
  color: #2a241b;
  font: 400 0.68rem/1 var(--font-carve);
  box-shadow: 0 3px 0 -1px rgba(0, 0, 0, 0.6);
  transition: transform 220ms var(--snap), background 200ms, color 200ms;
}

.dock .stop::before {
  content: attr(data-n);
}

.dock a:hover {
  color: var(--marmor);
}

.dock a:hover .stop {
  transform: translateY(-3px);
}

.dock a[aria-current='page'] {
  color: var(--aurum);
}

.dock a[aria-current='page'] .stop {
  background: linear-gradient(90deg, var(--aurum-dark), var(--aurum-hover) 45%, var(--aurum-dark));
  color: var(--on-gold);
  transform: translateY(-4px);
}

/* ---------- toast + dialog ---------- */

.toasts {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(var(--dock-h) + 28px + env(safe-area-inset-bottom));
  translate: -50% 0;
  display: grid;
  gap: 8px;
  width: min(92vw, 440px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--aurum);
  border-radius: var(--r);
  background: var(--surface-2);
  font-weight: 700;
  box-shadow: 0 16px 32px -18px rgba(40, 28, 12, 0.5);
  animation: pop 320ms var(--snap) both;
  pointer-events: auto;
}

.toast--ok {
  border-left-color: var(--ok);
}

.toast--err {
  border-left-color: var(--terracotta);
  color: #8e3a22;
}

.toast.leaving {
  animation: pop 180ms var(--soft) reverse both;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

dialog.clay-dialog {
  max-width: min(92vw, 540px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(40, 28, 12, 0.55), var(--frame);
}

dialog.clay-dialog[open] {
  animation: pop 320ms var(--snap) both;
}

dialog.clay-dialog::backdrop {
  background: rgba(40, 32, 22, 0.45);
  backdrop-filter: blur(3px);
}

.dialog-body {
  display: grid;
  gap: 16px;
  padding: 28px;
}

.dialog-body h2 {
  font-size: 1.8rem;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* ---------- page heads: a gold meander runs under every title ---------- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 28px;
  padding-bottom: 18px;
  border-bottom: 10px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 9h18V1H6v5h8V4H9' fill='none' stroke='%23b5583a' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 10 0 round;
}

.page-head > div {
  display: grid;
  gap: 10px;
}

.page-head h2 {
  max-width: 22ch;
}

.page-head .muted {
  max-width: 62ch;
}

/* An empty state is an amphora lying on its side. */
.empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 44px 16px;
  text-align: center;
}

.empty .lump {
  position: relative;
  width: 44px;
  height: 76px;
  border-radius: 40% 40% 46% 46% / 28% 28% 66% 66%;
  background: linear-gradient(90deg, #7e3c26, var(--terracotta) 45%, #74371f);
  rotate: -70deg;
}

.empty .lump::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;
  width: 16px;
  height: 14px;
  translate: -50% 0;
  border-radius: 3px 3px 0 0;
  background: #74371f;
}

.gate {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 560px;
  margin: 56px auto;
  text-align: center;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(181, 88, 58, 0.4);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--r);
  background: rgba(181, 88, 58, 0.07);
  font-size: 0.95rem;
}

.notice .icon {
  margin-top: 2px;
  color: var(--terracotta);
}

.notice ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* ---------- domus (home bento) ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.span-7 {
  grid-column: span 7;
}

.span-5 {
  grid-column: span 5;
}

.span-12 {
  grid-column: span 12;
}

.money {
  font: 400 clamp(2.4rem, 6vw, 4rem) / 1 var(--font-carve);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.kv {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* daily spend as a row of marble columns on a stylobate, each with a gold capital */
.bars {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  align-items: end;
  gap: 8px;
  height: 150px;
  padding: 14px 12px 0;
  border-bottom: 8px solid #d8ccb6;
}

.bar {
  position: relative;
  height: max(6px, var(--h));
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 6px),
    linear-gradient(90deg, #d9cfbe, #fbf8f2 50%, #cfc4b1);
  transform-origin: bottom;
  animation: grow 600ms var(--soft) both;
  animation-delay: calc(var(--i) * 30ms);
}

.bar::before {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: -5px;
  height: 5px;
  border-radius: 2px;
  background: var(--aurum);
}

.bar.zero {
  background: transparent;
}

.bar.zero::before {
  background: var(--line-strong);
}

@keyframes grow {
  from {
    transform: scaleY(0.05);
  }
}

.bar-labels {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 8px;
  padding: 6px 12px 0;
  color: var(--ink-faint);
  font: 500 0.7rem/1 var(--font-mono);
  text-align: center;
}

.receipts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 10px 14px;
}

.receipt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--aurum));
  border-radius: var(--r-s);
  background: var(--surface);
}

.receipt .cost {
  font: 600 0.95rem/1 var(--font-mono);
}

.receipt .meta {
  grid-column: 2 / 4;
  color: var(--ink-faint);
  font-size: 0.82rem;
}

.receipt.err .cost {
  color: var(--terracotta);
}

.code-block {
  position: relative;
  padding: 16px 18px;
  overflow-x: auto;
  background: #1b1813;
  color: #efe2c4;
  font: 500 0.8rem/1.65 var(--font-mono);
  white-space: pre;
}

.code-block .copy {
  position: absolute;
  top: 8px;
  right: 8px;
}

.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r);
}

/* ---------- forum (model catalog): stone stelae with a pigment band ---------- */

.shelf-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.chip-row {
  display: flex;
  gap: 8px;
  padding: 6px 2px 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 16px;
}

.capsule {
  --c: var(--lilac);
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--c);
  border-radius: 2px 2px var(--r) var(--r);
  background: var(--surface);
  content-visibility: auto;
  contain-intrinsic-size: 230px;
  transition: transform 200ms var(--soft), border-color 200ms;
}

.capsule:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  border-top-color: var(--c);
}

.capsule-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-blob {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--c);
  color: #17130b;
  font: 400 1.2rem/1 var(--font-carve);
}

.capsule h3 {
  font: 700 1.05rem/1.2 var(--font-body);
  overflow-wrap: anywhere;
}

.capsule .id {
  color: var(--ink-faint);
  font: 500 0.72rem/1.3 var(--font-mono);
  overflow-wrap: anywhere;
}

.prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.price {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface-2);
}

.price b {
  display: block;
  font: 600 1rem/1.1 var(--font-mono);
}

.price span {
  color: var(--ink-faint);
  font-size: 0.74rem;
  font-weight: 700;
}

/* price heat as gold coins */
.heat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.heat i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.heat i.on {
  background: radial-gradient(circle at 35% 30%, #ecd496, var(--aurum) 70%);
  box-shadow: none;
}

.capsule-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* A provider's mark on a light tile; the letter shows when there is no logo. */
.brand-tile {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: calc(var(--size) * 0.2);
  background: var(--c);
  color: #17130b;
  font: 400 calc(var(--size) * 0.5) / 1 var(--font-carve);
}

.brand-tile.has-logo {
  background: var(--marmor);
  color: transparent;
}

.brand-tile img {
  position: absolute;
  inset: 16%;
  width: 68%;
  height: 68%;
  object-fit: contain;
}

.chip .brand-tile {
  margin-left: -5px;
}

.picker-list li .brand-tile {
  grid-row: span 2;
}

/* ---------- oraculum (playground) ---------- */

.kiln-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 18px;
}

.chat {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: min(70vh, 720px);
  padding: 0;
  overflow: hidden;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(64vh, 660px);
  padding: 22px;
  overflow-y: auto;
}

.msg {
  max-width: min(85%, 660px);
  padding: 12px 16px;
  border-radius: var(--r);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: pop 300ms var(--snap) both;
}

.msg--user {
  align-self: flex-end;
  background: var(--nox);
  color: var(--marmor);
  font-weight: 600;
}

/* the oracle answers in a framed panel with a gold rule */
.msg--ai {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-left: 3px solid var(--aurum);
  background: var(--surface);
}

.msg--ai .who-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--ink-faint);
  font: 600 0.8rem/1 var(--font-body);
  white-space: normal;
}

.msg--err {
  border: 1px solid rgba(181, 88, 58, 0.4);
  background: var(--danger-soft);
  color: #8e3a22;
}

.msg .stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  white-space: normal;
}

.cursor {
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--aurum);
  animation: blink 900ms steps(2) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
}

.composer .textarea {
  min-height: 52px;
  max-height: 200px;
  resize: none;
}

.model-jump {
  display: none;
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 42ch;
  margin: auto;
  padding: 24px;
  text-align: center;
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.suggestions .chip {
  padding: 8px 14px;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}

.controls {
  display: grid;
  gap: 18px;
}

/* the oracle picker: one tile per provider, like choosing which shrine to ask */
.oracle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.oracle {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink-soft);
  font: 700 0.78rem/1.1 var(--font-body);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--snap);
}

.oracle:hover {
  border-color: var(--aurum-dark);
  color: var(--ink);
}

.oracle[aria-checked='true'] {
  border-color: var(--aurum);
  background: linear-gradient(180deg, rgba(201, 163, 90, 0.22), var(--surface));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--aurum);
}

.all-models summary {
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 0.9rem;
  font-weight: 700;
}

.meter {
  display: grid;
  gap: 8px;
}

.meter-track {
  height: 16px;
  padding: 3px;
  border-radius: 999px;
}

.meter-fill {
  width: var(--p, 0%);
  min-width: 10px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aurum-dark), var(--aurum-hover));
  transition: width 300ms var(--soft);
}

/* ---------- model picker (combobox) ---------- */

.picker {
  position: relative;
}

.picker-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  box-shadow: 0 30px 50px -24px rgba(40, 28, 12, 0.45);
}

.picker-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 9px 11px;
  border-radius: var(--r-s);
  cursor: pointer;
}

.picker-list li small {
  color: var(--ink-faint);
  font: 0.72rem var(--font-mono);
  overflow-wrap: anywhere;
}

.picker-list li[aria-selected='true'],
.picker-list li:hover {
  background: var(--surface);
}

/* ---------- claves (keys): bronze tags on a beam ---------- */

.ring-rail {
  height: 14px;
  margin: 8px 0 -2px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 100%, var(--aurum-dark) 4px, transparent 5px) 0 0 / 60px 100% repeat-x,
    linear-gradient(180deg, #8a6234, #5e4122);
}

.tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  align-items: start;
  gap: 16px;
}

.tag {
  --c: var(--sky);
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 26px;
  padding: 30px 18px 18px;
  border: 1px solid var(--aurum-dark);
  border-radius: var(--r);
  background: linear-gradient(160deg, #ecd9a8, #d8b977 60%, #c9a35a);
  color: #241a0b;
  transform-origin: 50% -26px;
  transition: transform 500ms var(--snap);
}

.tag:hover {
  transform: rotate(-2deg);
}

.tag::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 36px;
  translate: -50% 0;
  background: var(--aurum-dark);
}

.tag::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 12px;
  height: 12px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 2px var(--aurum-dark);
}

.tag h3 {
  font: 700 1.1rem/1.2 var(--font-body);
  overflow-wrap: anywhere;
}

.tag .mono {
  color: #5a4419;
}

.tag .spend {
  height: 10px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(60, 40, 10, 0.2);
}

.tag .spend > i {
  display: block;
  width: var(--p);
  min-width: 6px;
  height: 100%;
  border-radius: 999px;
  background: var(--nox);
}

.tag-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #4a3812;
  font-size: 0.82rem;
  font-weight: 700;
}

.tag.revoked {
  filter: grayscale(1);
  opacity: 0.55;
}

.key-reveal {
  padding: 14px 16px;
  color: #6b4f1c;
  font: 600 0.92rem/1.5 var(--font-mono);
  overflow-wrap: anywhere;
  user-select: all;
}

.allow-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- aerarium (top up): an amphora that fills with gold ---------- */

.jar-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: 20px;
}

.jar-stage {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 30px 20px;
}

.amphora {
  position: relative;
  width: 150px;
  height: 250px;
}

.amphora-body {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 46px;
  bottom: 22px;
  overflow: hidden;
  border-radius: 45% 45% 46% 46% / 30% 30% 70% 70%;
  background: linear-gradient(90deg, #6e3320, var(--terracotta) 42%, #8a4128 70%, #5d2a1a);
  box-shadow: inset 0 -8px 16px rgba(60, 20, 0, 0.35);
}

.amphora-fill {
  position: absolute;
  inset: auto 0 0;
  height: var(--fill, 0%);
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(13, 12, 10, 0.3) 16px 18px),
    linear-gradient(180deg, var(--aurum-hover), var(--aurum-dark));
  transition: height 1.2s var(--soft);
}

.amphora-neck {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 40px;
  height: 40px;
  translate: -50% 0;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(90deg, #6e3320, #a6503a, #5d2a1a);
}

.amphora-neck::before {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: -6px;
  height: 10px;
  border-radius: 4px;
  background: #5d2a1a;
}

.amphora-neck::after {
  content: '';
  position: absolute;
  left: -26px;
  right: -26px;
  top: 6px;
  z-index: -1;
  height: 46px;
  border: 7px solid #7a3a24;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
}

.amphora-foot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 30px;
  translate: -50% 0;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(90deg, #5d2a1a, #8a4128, #5d2a1a);
}

.amphora.wobble {
  animation: amphora-rock 650ms var(--snap);
}

@keyframes amphora-rock {
  30% {
    transform: rotate(-5deg);
  }
  60% {
    transform: rotate(4deg);
  }
}

.falling-coin {
  position: absolute;
  left: 50%;
  top: -24px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ecd496, var(--aurum) 60%, var(--aurum-dark));
  color: #3d2c0b;
  font: 400 0.75rem/1 var(--font-carve);
  animation: drop 800ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes drop {
  to {
    transform: translateY(80px) scaleX(0.3);
    opacity: 0;
  }
}

.feed {
  display: grid;
  gap: 18px;
}

.feed h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

/* on a phone the amount gets the full width, so a coin amount in the millions stays readable */
@media (max-width: 520px) {
  .amount-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.addr-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 16px;
  font: 500 0.82rem/1.4 var(--font-mono);
  overflow-wrap: anywhere;
}

.addr-box span {
  flex: 1;
}

.progress-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* progress as oil lamps: unlit, flickering, lit */
.progress-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-faint);
  font-weight: 700;
}

.progress-steps li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.progress-steps li.active {
  color: var(--ink);
}

.progress-steps li.active::before {
  background: radial-gradient(circle at 50% 70%, #fff1c4, var(--aurum) 60%);
  box-shadow: 0 0 12px var(--aurum);
  animation: blink 1s steps(2) infinite;
}

.progress-steps li.done {
  color: var(--ok);
}

.progress-steps li.done::before {
  background: var(--ok);
}

.ledger {
  display: grid;
  gap: 8px;
}

.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
}

.ledger-row .amt {
  color: var(--ok);
  font: 600 1rem/1.2 var(--font-mono);
}

.ledger-row .amt.neg {
  color: var(--terracotta);
}

/* ---------- responsive (shared) ---------- */

@media (max-width: 1020px) {
  .kiln-layout,
  .jar-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .model-jump {
    display: inline-flex;
  }

  .span-7,
  .span-5 {
    grid-column: span 12;
  }

  .oracle-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .shelf-tools {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .brand span {
    display: none;
  }

  .messages {
    padding: 14px;
  }

  .msg {
    max-width: 92%;
  }

  .oracle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* On phones the road runs the full width: six equal stations, tighter lettering so every name fits. */
@media (max-width: 520px) {
  .dock {
    left: 8px;
    right: 8px;
    translate: none;
    justify-content: space-between;
    padding: 8px 2px 7px;
  }

  .dock a {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    gap: 5px;
    font-size: 0.56rem;
    letter-spacing: 0.02em;
  }

  .dock .stop {
    width: 27px;
    height: 31px;
  }
}