/* Shared chrome: the tab strip and the daily listings-report banner.
 * Tokens come from app.css; this file adds no colours of its own. */

.shell {
  position: sticky; top: 0; z-index: 30;
  background: var(--card); border-bottom: 1px solid var(--rule);
}
.shell__bar { display: flex; align-items: baseline; gap: 10px; padding: 9px var(--pad) 0; }
.shell__brand {
  font: 800 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
}
.shell__who { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--ink-faint); }

.tabs { display: flex; gap: 2px; padding: 8px var(--pad) 0; overflow-x: auto; }
/* Every tab reads as a tab, not as a line of text. The inactive ones sit on a
 * faint ground with a hairline; the active one lifts to white and gains the
 * navy underline, so the difference is depth rather than presence. */
.tab {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 500 13.5px/1 var(--sans); color: var(--ink-soft); text-decoration: none;
  padding: 9px 14px; border-radius: 8px 8px 0 0;
  background: var(--field); border: 1px solid var(--rule); border-bottom: 2px solid var(--rule);
}
.tab:hover { color: var(--ink); border-color: var(--ink-faint); }
.tab--on {
  color: var(--navy); font-weight: 700;
  background: var(--card); border-color: var(--rule); border-bottom-color: var(--navy);
}
/* The count is a badge in its own right, so a waiting number is legible from
   across the room rather than being a grey afterthought. */
.tab__n {
  font: 600 11px/1 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink-soft); background: var(--card);
  border: 1px solid var(--rule); border-radius: 999px; padding: 3px 7px;
}
.tab--on .tab__n { color: #fff; background: var(--navy); border-color: var(--navy); }
.tab__n[hidden] { display: none; }

/* A prompt, never a gate — see the note in shell.js. */
.mlsbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 12px var(--pad); border-top: 1px solid var(--rule);
  background: var(--warn-bg); color: var(--warn);
}
.mlsbar--bad { background: var(--signal-bg); color: var(--signal); }
.mlsbar__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 260px; }
.mlsbar__text b { font: 700 13.5px/1.3 var(--sans); }
.mlsbar__text span { font: 400 12.5px/1.45 var(--sans); color: var(--ink-soft); }
.mlsbar__list { margin: 5px 0 3px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.mlsbar__list li { font: 400 12.5px/1.45 var(--sans); color: var(--ink-soft); }
.mlsbar__list b { font-weight: 700; color: inherit; }
.mlsbar__how { font-family: var(--mono); font-size: 11.5px !important; color: var(--ink-faint) !important; }

.mlsbar__drop {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  min-width: 240px; padding: 13px 18px; border-radius: 9px;
  border: 1.5px dashed currentColor; background: var(--card);
  font: 500 13px/1.3 var(--sans); color: inherit; text-align: center;
}
.mlsbar__drop:hover, .mlsbar__drop.is-over { background: var(--field); }
.mlsbar__drop.is-over { border-style: solid; }

.mlssync { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--pad) 12px; }
.mlssync__box {
  flex: 1; min-width: 280px; padding: 10px 13px; border-radius: 8px;
  background: var(--go-bg); border: 1px solid rgba(15,123,95,.22);
}
.mlssync__box--warn { background: var(--signal-bg); border-color: rgba(178,34,52,.22); }
.mlssync__box b { font: 700 12.5px/1.3 var(--sans); color: var(--go); }
.mlssync__box--warn b { color: var(--signal); }
.mlssync__box ul { margin: 7px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mlssync__box li { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/1.4 var(--sans); color: var(--ink-soft); }
.mlssync__box li em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--ink); white-space: nowrap; }

/* Placeholder for tabs that are not built yet, so the navigation is honest
 * about what exists rather than linking to a blank page. */
.soon { max-width: 620px; margin: 60px auto; padding: 0 var(--pad); text-align: center; }
.soon h1 { font: 700 22px/1.25 var(--sans); margin: 0 0 10px; }
.soon p { font: 400 15px/1.6 var(--sans); color: var(--ink-soft); margin: 0 0 10px; }
.soon ul { text-align: left; display: inline-block; color: var(--ink-soft); font: 400 14px/1.7 var(--sans); }

@media (max-width: 600px) {
  .tab { padding: 9px 10px; font-size: 12.5px; }
  .mlsbar__drop { min-width: 0; width: 100%; }
}

/* Data-staleness warning. Amber, not red: red on this console means a person is
 * waiting on you, and this is the tool admitting a fault of its own. */
.stalebar {
  padding: 9px var(--pad); background: var(--warn-bg);
  border-bottom: 1px solid var(--warn);
  font: 400 12.5px/1.45 var(--sans); color: var(--warn);
}
.stalebar b { font-weight: 700; }