/* Open spots (spots.html). Layout and the few blocks only this page has;
   everything else comes from styles.css. */

/* ---------- Wallet bar ---------- */

.walletbar__id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.walletbar__sub { display: flex; align-items: center; gap: var(--s-2); }
.walletbar__who .stamp { margin-left: var(--s-2); }
.walletbar .seal { background: var(--sheet); }
.walletbar__sign { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: var(--s-5); border-left: 1px solid var(--blush-a35); }
.walletbar__hint { max-width: 26ch; color: var(--blush); font-size: var(--t-micro); line-height: 1.35; }
.walletbar__signed { font-family: var(--f-display); font-weight: 800; font-size: var(--t-h5); line-height: 1; }
.walletbar .btn--on-dark:focus-visible { outline-color: var(--sheet); }

/* ---------- Board: list and detail ---------- */

.spots-board { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s-5); align-items: stretch; }
/* List and detail share one bottom edge; the shorter one keeps its spare room inside. */
.spots-list { display: flex; flex-direction: column; }
.spots-list .spotlist { flex: 1; }
.spotdetail { position: static; display: flex; flex-direction: column; }
.spotdetail > .detail__body { flex: 1; }

.spots-sort { width: auto; height: 32px; font-size: var(--t-small); background-color: var(--sheet); }

.spots-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--ink-a14);
}
.spots-filter .seg__opt .swatch { width: 12px; height: 12px; }

.spotlist { min-height: 240px; background: var(--sheet); border-radius: 0 0 var(--r-panel) var(--r-panel); overflow: hidden; }
.spotrow:focus-visible { outline-offset: -2px; border-radius: 0; }
.spotrow__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spotrow__line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.spotrow__title { margin-right: var(--s-1); }
.spotrow__squadname { color: var(--ink); font-weight: 600; }
.spotrow__fee { white-space: nowrap; }
.spotrow__alt { color: var(--muted); font-weight: 400; }
.spotrow__seats { font-size: var(--t-micro); color: var(--muted); white-space: nowrap; }
.spotrow__seats b { color: var(--ink); font-weight: 700; }
.spotrow__reqs > span { display: inline-flex; align-items: center; gap: 4px; }
.spotrow__reqs b { display: inline-flex; align-items: center; gap: 2px; }
.spotrow__reqs b.is-fail { color: var(--warn); }
.spotrow__reqs b svg { stroke-width: 2.5; }
.spotrow [data-f="style"].is-fail .styletag { border: 1px dashed var(--warn); color: var(--warn); }
.spotrow.is-filled .spotrow__main, .spotrow.is-filled .spotrow__end, .spotrow.is-filled .spotrow__reqs { opacity: 0.62; }
.spotrow.is-filled .stamp { opacity: 1; }

/* Detail */
.detail__head { align-items: flex-start; padding-top: var(--s-4); padding-bottom: var(--s-4); }
.detail__heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detail__title { font-size: var(--t-d3); line-height: 0.92; }
.detail__body { display: flex; flex-direction: column; gap: var(--s-5); }

.detail__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.detail__facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 6px; border-top: 1px solid var(--ink-a14); }
.detail__facts dt { font-size: var(--t-micro); color: var(--muted); white-space: nowrap; }
.detail__facts dd { font-weight: 600; font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.detail__block { display: flex; flex-direction: column; gap: var(--s-3); }
.detail__blockhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.detail__h { font-family: var(--f-display); font-weight: 800; font-size: var(--t-h5); line-height: 1; }
.detail__met { font-size: var(--t-micro); color: var(--muted); white-space: nowrap; }
.detail__met b { color: var(--ink); }
.detail__block .check__need { white-space: nowrap; }

.detail__pay { margin: 0; padding: 0; border: 0; min-width: 0; }
.detail__pay legend { padding: 0; margin-bottom: var(--s-3); }
.paychoice__bal { margin-top: 4px; font-size: var(--t-micro); color: var(--muted); }
.paychoice__bal b { color: var(--ink); font-weight: 600; }
.detail__sum dd.is-short { color: var(--warn); }

.detail__blocked { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.detail__blocked .notices { align-self: stretch; }
.detail__blocked-title { font-size: var(--t-small); font-weight: 700; }

.detail__mine { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--paper); }
.detail__note { font-size: var(--t-small); color: var(--muted); }

/* Status track */
.track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.track__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--muted);
}
.track__step::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 14px;
  right: 2px;
  height: 2px;
  border-radius: 1px;
  background: var(--rule);
}
.track__step:last-child::before { display: none; }
.track__dot { position: relative; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rule); background: var(--sheet); }
.track__step.is-done { color: var(--ink); }
.track__step.is-done .track__dot { border-color: var(--cobalt); background: var(--cobalt); }
.track__step.is-done:not(.is-current)::before { background: var(--cobalt); }
.track__step.is-current[data-step="invited"] .track__dot,
.track__step.is-current[data-step="joined"] .track__dot { border-color: var(--berry); background: var(--berry); }
.track__step.is-current .track__dot { animation: stampin 640ms var(--ease-snap); }
.track__step.is-off { color: var(--muted); opacity: 0.55; }
.track__step.is-off .track__dot { border-style: dashed; }

/* ---------- Applications and balance history ---------- */

.mine__head { padding-top: 0; padding-bottom: 0; }
.mine__head .tabs { align-self: stretch; border-bottom: 0; }
.mine__head .tab { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0; }
.mine__head .tab .count { transition: background-color var(--d-fast), color var(--d-fast); }
.mine__head .tab[aria-selected="true"] .count { background: var(--cobalt); color: var(--sheet); }
.mine__head .tab:focus-visible { outline-offset: -2px; }

.mine__table th:first-child, .mine__table td:first-child { padding-left: var(--s-5); }
.mine__table th:last-child, .mine__table td:last-child { padding-right: var(--s-5); }
.mine__table tbody tr:last-child td { border-bottom: 0; }
.mine__table tr.is-new { animation: flash 1.2s var(--ease-out); }
.approw__spot { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; line-height: 1.05; text-decoration: none; text-align: left; color: var(--ink); }
.approw__spot:hover { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.approw__squad { display: block; margin-top: 2px; font-size: var(--t-micro); color: var(--muted); }
.mine__table td.num { font-weight: 600; }

/* ---------- Your card ---------- */

.spots-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-4); }
.spots-sechead h2 { font-size: var(--t-d3); }
.spots-sechead p { max-width: 56ch; color: var(--muted); font-size: var(--t-small); text-align: right; }

.cardrow { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-5); align-items: stretch; }
.cardrow__card { display: flex; }
.cardrow__card > .tcard { flex: 1; }
.cardrow__card .tcard__face { height: 150px; }
.record { display: flex; flex-direction: column; }
.record__body { display: flex; flex-direction: column; gap: var(--s-5); flex: 1; }
.record__facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); margin-top: auto; }
.record__facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--ink-a14); }
.record__facts dt { font-size: var(--t-micro); color: var(--muted); }
.record__facts dd { font-family: var(--f-display); font-weight: 800; font-size: var(--t-d4); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 1024 to 1179 ---------- */

@media (max-width: 1179px) {
  .walletbar { gap: var(--s-5); }
  .walletbar__end { gap: var(--s-2); }
  .balance, .walletbar__sign { padding-left: var(--s-4); }
  .balance__value { font-size: 1.5rem; }
  .walletbar__hint { max-width: 20ch; }
  .spots-board { grid-template-columns: minmax(0, 1fr) 380px; }
  .detail__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cardrow { grid-template-columns: 290px minmax(0, 1fr); }
}

#pane-apps .state, #pane-ledger .state { padding: var(--s-7) var(--s-6); }