/* ══ controls ════════════════════════════════════════════════════════════
 * Things you press to change what you are looking at rather than to change the
 * world: sub-tabs, segments, filter chips, and the four parts every browser in
 * Orbis is made of.
 */

/* ── sub-tabs ───────────────────────────────────────────────────────── */
/* A tab that outgrew one scroll splits here rather than in the nav - the nav is
   the world, these are rooms inside one part of it. Drawn as a row of capsules
   rather than as an underlined strip: an underline is a document's device;
   these are places you go, and the chosen one is filled the way the chosen
   filter is. */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 0; }
.subtab { background: transparent; border: 1.5px solid var(--border);
  border-radius: var(--r-pill); box-shadow: none;
  color: var(--muted); font-size: 13px; font-weight: 800;
  padding: 8px 16px; margin-bottom: 0; }
.subtab.active { color: var(--on-accent); background: var(--accent);
  border-color: var(--accent); }
button.subtab:active:not(:disabled) { transform: translateY(1px); }
@media (hover: hover) {
  .subtab:hover:not(.active) { color: var(--text); border-color: var(--border-hi);
    background: var(--panel-2); }
  .subtab.active:hover { color: var(--on-accent); border-color: var(--accent); }
}
/* What is waiting behind a door somebody has closed. Splitting a screen into
   rooms hides things, and some of what it hides is a person waiting on an
   answer - so a tab carries the same count the nav does, in the same red, and
   the refactor costs nobody a friend request. */
.subtab .badge.count { margin-left: 7px; }
.subtab.active .badge.count { background: var(--on-accent); color: var(--accent-deep); }

/* ── a room ─────────────────────────────────────────────────────────────
   The panel under a strip of sub-tabs. Every room is drawn and all but one is
   hidden, so a draft, a scroll position and a half-filled form survive a flip
   - see `kit::input::rooms` for why that is not negotiable here. It inherits
   the page's own column so a room's contents space themselves exactly as they
   did before they were in one. */
.room { display: grid; gap: 12px; align-content: start; min-width: 0; }

/* ── the segment ────────────────────────────────────────────────────── */
/* One control, not a row of loose chips: the unpicked options stay visible
   inside the same frame, which is what makes it read as a switch. */
.segment { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  background: var(--panel); border: 1.5px solid var(--border); border-radius: var(--r-pill); }
.seg { padding: 7px 15px; border: 0; border-radius: var(--r-pill); background: transparent;
  box-shadow: none; color: var(--muted); font-size: 12.5px; font-weight: 800;
  white-space: nowrap; }
.seg.active { background: var(--accent); color: var(--on-accent); }
button.seg:active:not(:disabled) { transform: none; }
@media (hover: hover) {
  .seg:hover:not(:disabled):not(.active) { border-color: transparent; color: var(--text); }
  .seg.active:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }
}

/* ── the filter chip ────────────────────────────────────────────────── */
/* Filters are pressed, so they are capsules, and the chosen one is filled - one
   of the few places a whole shape takes the accent. */
.filter-chip { padding: 7px 14px; font-size: 12.5px; font-weight: 800;
  border-radius: var(--r-pill); box-shadow: none;
  background: var(--panel); border: 1.5px solid var(--border); color: var(--muted); }
.filter-chip.active { background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); }
.filter-chip .badge.count { margin-left: 6px; }
/* A chip naming a *person* wears their face. Inline rather than flex so a chip
   with no avatar in it (every filter that isn't a conversation) keeps the
   padding it was drawn with. */
.filter-chip .byline-avatar { width: 20px; height: 20px; font-size: 10px;
  display: inline-flex; vertical-align: -5px; margin-right: 7px; }
button.filter-chip:active:not(:disabled) { transform: translateY(1px); }
@media (hover: hover) {
  .filter-chip:hover:not(.active) { background: var(--panel-2);
    border-color: var(--border-hi); color: var(--text); }
  .filter-chip.active:hover { background: var(--accent); border-color: var(--accent);
    color: var(--on-accent); }
}

/* ── browsing a world that got big ───────────────────────────────────── */
/* Search, filters, sort and a pager: the four controls that turn "a list of
   everything" into "the part of it you asked for". They travel together, so
   they are styled together and every browser in Orbis reads the same. */
.browser-controls { display: grid; gap: 10px; }
/* The controls and the list are one panel, not two cards with a page gap
   between them: the question sits on the panel's face, the answer in the well
   underneath it, and the same border goes round both. A filter row floating
   above an unrelated-looking grid is the version players don't connect. */
.browser { background: var(--panel-2); border: 2px solid var(--border);
  border-radius: var(--r-lg); }
.browser > .browser-controls { padding: 14px 16px 12px; }
.browser-body { padding: 14px; background: rgba(0, 0, 0, .18);
  border-top: 2px solid var(--border-soft);
  border-radius: 0 0 calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px); }
/* Last line of the controls, first thing read about the list: "9 of 35". */
.browser-count { padding-top: 2px; }
/* One line of a browser's controls: a search box that takes the slack and a
   handful of fixed-width things beside it. Without this, each control is a grid
   row of its own and a lone button stretches into a full-width slab - which is
   what a grid item does, and never what a button meant. */
.control-line { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.control-line > .search-row { flex: 1 1 200px; min-width: 0; }
.control-line > button, .control-line > .sort-label { flex: none; margin-left: 0; }
/* The same safety net for controls written straight into the grid: a grid item
   fills its track, so a lone button or a sort picker becomes a full-width bar
   unless it is told which end of the row it belongs at. */
.browser-controls > button { justify-self: start; }
.browser-controls > .sort-label { justify-self: end; }
.search-row { gap: 8px; align-items: center; }
.search-icon { font-size: 14px; opacity: .7; flex-shrink: 0; }
.search-input { flex: 1; min-width: 0; }
.browser-toggles { gap: 8px; align-items: center; flex-wrap: wrap; }
.sort-label { display: flex; gap: 6px; align-items: center; margin-left: auto;
  font-size: 12px; color: var(--muted); }
.sort-label select { min-width: 0; }
/* A pager under three rows is noise, so it only ever appears when it earns its
   place - see `kit::pager`. Centred, because it is navigation, not content. */
.pager { justify-content: center; align-items: center; gap: 12px; margin-top: 10px; }
.pager .fine { color: var(--muted); }

/* ── the phone ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .subtab { min-height: 0; }
  .filter-chip { min-height: 36px; }
  /* Four rooms rarely fit a phone's width; they scroll sideways rather than
     wrap into two rows that shove the page down. */
  .subtabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
    padding-bottom: 2px; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { white-space: nowrap; flex: none; }
  /* On a phone the panel's padding is width the cards want back. */
  .browser > .browser-controls { padding: 12px; }
  .browser-body { padding: 10px; }
}
@media (max-width: 620px) {
  .sort-label { margin-left: 0; width: 100%; }
  .sort-label select { flex: 1; }
}