/* The staff chamber. A console rather than a page: scanned and operated,
   not read, so state is worn as a shape and the summary comes before the
   detail. The elements do the work a generic success/warning/danger ramp
   would do elsewhere — earth for entitled, gold for a trial, fire for
   dunning, water for the house's own grace — which keeps the chamber
   inside the same world as the rest of the app. */
@layer components {

/* Wraps to a second line rather than scrolling. A nav you have to drag
   sideways to see the rest of is a nav that hides half the app. */
.rooms {
  display: flex;
  flex-wrap: wrap;
  margin: 1.25rem 0 1.75rem;
  border-bottom: 1px solid var(--line);
}
.rooms__tab {
  padding: 0.6rem 0.95rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .rooms__tab:hover { color: var(--ink); }
}
.rooms__tab[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.total {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  background: var(--paper-high);
}
.total__label {
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.total__value {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.total__note { color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.75rem; }
.total--alert .total__value { color: var(--fire); }
.total--calm .total__value { color: var(--earth); }

.band__title {
  margin: 2rem 0 0.75rem;
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* State as a shape, so an exception reads at a glance on a page that is
   otherwise all numbers. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}
.pill--active { color: var(--earth); }
.pill--trial { color: var(--gold); }
.pill--grace { color: var(--fire); }
.pill--canceled { color: var(--ink-dim); }
.pill--comped { color: var(--water); }
.pill--none { color: var(--ink-dim); }
.pill--none::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }

.rail {
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rail--stripe { color: var(--air); }
.rail--apple { color: var(--ink-dim); }
.rail--house { color: var(--water); }

/* Sideways scrolling is the last resort, not the layout. The ledgers
   carry no min-width, so they fit the console at any desktop size and
   this only ever engages on a phone. */
.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  background: var(--paper-high);
}
.scroller .ledger { margin: 0; }
.ledger__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger__who { font-family: var(--font-body); }
.ledger th { white-space: nowrap; }
.ledger .button { white-space: nowrap; }

/* Two buttons in one cell sit side by side and stay on their own line. */
.ledger__doing { display: flex; gap: 0.3rem; }
.ledger__doing form { margin: 0; }
.ledger__standing { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.ledger__gain { color: var(--earth); }
.ledger__loss { color: var(--fire); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
/* A card carrying a table takes the whole row of the grid. */
.card--wide { grid-column: 1 / -1; }
.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.card__title {
  margin: 0;
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.card__doing { display: flex; gap: 0.4rem; margin: 0.8rem 0 0; }
.card__aside { margin: 0.7rem 0 0; color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.8rem; }

.rows { display: flex; flex-direction: column; gap: 0.45rem; }
.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-ui);
  font-size: 0.87rem;
}
.row + .row { padding-top: 0.45rem; border-top: 1px solid var(--line); }
.row__key { color: var(--ink-dim); }
.row__val { font-variant-numeric: tabular-nums; text-align: right; }
.row__val--ok { color: var(--earth); }
.row__val--warn { color: var(--gold); }
.row__val--bad { color: var(--fire); }

.attention {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--fire);
  background: var(--paper-high);
}
.attention__title {
  margin: 0 0 0.5rem;
  color: var(--fire);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.attention ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.attention li + li { margin-top: 0.3rem; }

/* Says why a thing is absent, so a page that deliberately withholds does
   not read as a page that is broken. */
.curtain {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  max-width: 68ch;
  margin: 0 0 1.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--water);
  background: var(--paper-high);
  color: var(--ink-dim);
  font-size: 0.88rem;
}
.curtain strong { color: var(--ink); }
.curtain__mark { flex: 0 0 auto; color: var(--water); font-family: var(--font-ui); }

.hunt { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.hunt__field {
  flex: 1 1 22rem;
  max-width: 28rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line-strong);
  background: var(--paper-high);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.hunt__field:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.hunt__result { margin: 0 0 1rem; color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.85rem; }

/* The order, under the search that narrows it. Quieter than .rooms — the
   rooms are where you are, these only say which way the same room is
   pointing — so the mark is the ink rather than a rule beneath it. */
.sorts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
}
.sorts__tab { color: var(--ink-dim); letter-spacing: 0.03em; text-decoration: none; }
@media (hover: hover) {
  .sorts__tab:hover { color: var(--ink); }
}
.sorts__tab[aria-current="true"] { color: var(--gold); text-decoration: underline; text-underline-offset: 0.3em; }
.sorts__note { color: var(--ink-dim); font-size: 0.78rem; font-style: italic; }

/* A free sky with nothing left in the day's pool. The one number on the
   list support is looking for when a seeker writes to say the Seer has
   gone quiet on them. */
.spent-out { color: var(--fire); }

.spark { display: block; width: 100%; height: 3rem; }
.spark__area { fill: rgba(154, 117, 25, 0.09); stroke: none; }
.spark__line { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.spark__caption {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.72rem;
}

.formula {
  overflow-x: auto;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  background: var(--wash);
  color: var(--ink-dim);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre;
}

.seeker__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.seeker__name { margin: 0; }
.seeker__meta { margin: 0.35rem 0 0; color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.85rem; }
.backlink { display: inline-block; margin-bottom: 0.5rem; font-family: var(--font-ui); font-size: 0.8rem; }

.staff-badge {
  display: inline-block;
  margin-left: 0.45rem;
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  /* .card lives here, not in layout.css: this file's unconditional .card
     above must lose to it, exactly as in the original single file. */
  .card { padding: 1.1rem; }
  .totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

}