/* Components. Every colour and size references a §12.2 token from
   tokens.css — no literals. */

/* ---- Shell ---- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  padding-top: max(var(--s-3), env(safe-area-inset-top));
  background: var(--scrim);
  backdrop-filter: blur(var(--s-2));
  border-bottom: var(--hair) solid var(--line);
}

.app-header h1 {
  margin: 0;
  font-size: var(--fs-name);
  font-weight: 650;
  letter-spacing: var(--ls-tight);
}

.app-nav {
  display: flex;
  gap: var(--s-3);
  min-width: 0;
}

/* Six routes and the wordmark do not both fit at 360px. Five plus a shortened
   "WT" mark did; adding Progress (§11) pushed the nav 20px past the header.
   The launcher icon and the tab title already carry the name, so the phone
   gets the routes only.
   The header height is unchanged by this — the nav's 48px links, not the
   wordmark, are what set it, and --header-h (what the rest timer pins below)
   depends on that staying true. Measured, not assumed. */
@media (max-width: 479px) {
  .app-header h1 {
    display: none;
  }
}

.app-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text-dim);
  font-size: var(--fs-label);
  text-decoration: none;
}

.app-nav a:hover {
  color: var(--text);
}

.app-main {
  max-width: var(--w-main);
  margin: 0 auto;
  padding: var(--s-4);
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
}

.loading,
.empty {
  color: var(--text-dim);
}

.error {
  color: var(--bad-text);
}

/* ---- Buttons & inputs ---- */

.btn,
.btn-sm,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  /* Links carrying a button class — the way out of the empty Today states —
     otherwise keep their underline and read as half link, half control. */
  text-decoration: none;
}

.btn {
  min-height: var(--tap);
  padding: 0 var(--s-4);
  font-weight: 550;
}

.btn-sm {
  min-height: var(--tap);
  padding: 0 var(--s-3);
  font-size: var(--fs-label);
}

.btn-icon {
  min-width: var(--tap);
  min-height: var(--tap);
}

.btn:hover,
.btn-sm:hover,
.btn-icon:hover {
  border-color: var(--accent-line);
}

.btn-danger {
  color: var(--bad-text);
}

/* §12.5a input wells: recessed, so the edge inverts — shade on top, lit along
   the bottom, with a shallow inner shadow. */
.sel,
.lib-search,
.pick-search,
.gym-name,
.slot-num {
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-shade);
  border-bottom-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--inset-1);
  color: var(--text);
  font: inherit;
}

/* A <select> sizes itself to its WIDEST OPTION, and as a flex item its default
   `min-width: auto` stops it shrinking below that — so one long option label
   pushes the control off a 360px screen with no page scroll to reveal it
   (§12.4). Found by the B9 pass: the free-text "Trains" select went from
   thirteen bare group names to `shoulders · posterior deltoid` pairs and grew
   to 297px in a 344px row. This is the general rule, not a patch on that one. */
.sel {
  max-width: 100%;
  min-width: 0;
}

.lib-search,
.pick-search {
  width: 100%;
  background: var(--surface);
}

.lib-toggle,
.eq-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}

/* The label is the tap target (min-height --tap) and wraps the box, so the
   control is thumb-sized even though the box itself is smaller. */
.lib-toggle input,
.eq-toggle input,
.cx-main-pick input {
  flex: 0 0 auto;
  width: var(--s-6);
  height: var(--s-6);
  accent-color: var(--accent);
}

/* ---- Chips ---- */

.chip {
  display: inline-block;
  max-width: 100%;
  padding: var(--s-1) var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-dim);
  font-size: var(--fs-label);
  overflow-wrap: anywhere;
}

.chip--warn {
  color: var(--warn);
  border-color: var(--warn-line);
}

.chip--muted {
  color: var(--text-dim);
}

.chip--flag {
  color: var(--accent);
  border-color: var(--accent-line);
}

/* ---- Tier badge: the scale is the palette (§12.2) ---- */

.tier-badge {
  display: inline-block;
  min-width: var(--s-6);
  padding: 0 var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  color: var(--tier-b);
  font-size: var(--fs-label);
  font-weight: 650;
  text-align: center;
}

.tier-badge--s {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--tier-s);
}

.tier-badge--a { color: var(--tier-a); }
.tier-badge--b { color: var(--tier-b); }
.tier-badge--c { color: var(--tier-c); }
.tier-badge--d { color: var(--tier-d); }

/* B9: a rating the USER assigned is a third axis — not quality, not confidence.
   It takes no band from tierBand(), so a self-assigned S+ can never render in
   the accent a sourced S+ earns, and the badge says "your S+" rather than
   relying on a colour difference nobody reads at a glance. */
.tier-badge--user {
  background: none;
  border-style: dashed;
  color: var(--text-dim);
  font-weight: 550;
}

/* Confidence is a different axis from quality — same hue, dotted only. */
.tier-badge--derived {
  text-decoration: underline dotted;
  text-underline-offset: var(--underline-offset);
  cursor: help;
}