/* ==========================================================================
   Components — controls, panels, tables, tiles, badges, modal, toast
   ========================================================================== */

/* ---- Feathered avatar -------------------------------------------------
   The agent portraits carry their own near-black background, and both
   places they appear want that rectangle faded out at the rim so it reads
   as part of the surface rather than a pasted-in tile.

   The fade is drawn OVER the image, never as a mask on it. A mask-image
   promotes the <img> to its own composited layer, and that layer does not
   reliably repaint when the picture decodes after the region was already
   rasterized — the computed style reports it fully opaque while the pixels
   stay blank. That was measured in a browser on 2026-08-18: stripping the
   mask off one Home avatar painted it immediately, while its masked
   neighbour stayed empty even under an active hover. So the image paints on
   the ordinary path and this element's ::after lays the soft edge on top.

   The caller sets the box size and --feather-rgb, which must be the colour
   of whatever sits behind the portrait. It is registered as three numbers
   rather than left as a plain string so a caller that changes it — the Home
   card does, on hover — can transition it in step with the surface it is
   matching. An engine without @property simply swaps it instantly, which is
   the behaviour this replaces.

   The initial value exists only because registration demands one. Every
   caller sets its own, and no correct caller ever falls back to it — a
   portrait showing card grey on the header bar means an assignment broke,
   not that this number was the right default. */
@property --feather-rgb {
  syntax: "<number>+";
  inherits: true;
  initial-value: 33 36 40;
}
.avatar-feather { position: relative; }
.avatar-feather > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The stops the mask used, inverted: clear over the middle of the face,
   solid backdrop by the rim. The clear end names the backdrop colour at
   zero alpha rather than the `transparent` keyword, so no engine can run
   the fade through grey on its way out. */
.avatar-feather::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 68% 68% at 50% 47%,
                              rgb(var(--feather-rgb) / 0) 30%,
                              rgb(var(--feather-rgb)) 76%);
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.75rem var(--s-5);
  min-height: 3rem;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--c-red); color: var(--c-text-on-red); }
.btn--primary:hover:not([disabled]) { background: var(--c-red-hi); }
.btn--primary:active:not([disabled]) { background: var(--c-red-lo); }

.btn--ghost {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-text);
}
.btn--ghost:hover:not([disabled]) {
  background: var(--c-surface-3);
  border-color: var(--c-surface-4);
}

.btn--quiet { background: transparent; color: var(--c-text-2); }
.btn--quiet:hover:not([disabled]) { background: var(--c-surface-2); color: var(--c-text); }

.btn--danger {
  background: transparent;
  border-color: rgba(224, 31, 38, 0.5);
  color: var(--c-red-hi);
}
.btn--danger:hover:not([disabled]) { background: rgba(224, 31, 38, 0.12); }

.btn--lg { min-height: 3.75rem; padding: 0 var(--s-6); font-size: var(--t-h3); }
.btn--sm { min-height: 2.5rem; padding: 0 var(--s-4); font-size: var(--t-sm); }
.btn--block { width: 100%; }

.btn__icon { flex: none; }

/* Icon-only control (trash, close). Keeps a 44px hit area. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-btn);
  color: var(--c-text-3);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--c-surface-3); color: var(--c-text); }
.icon-btn--danger:hover { background: rgba(224, 31, 38, 0.14); color: var(--c-red-hi); }

/* ---- Inputs ------------------------------------------------------------ */
/* align-content keeps a field's rows at their natural height. Without it a
   field sharing a row with a taller sibling (one carrying a hint) stretches
   its input and the two stop lining up. */
.field { display: grid; gap: var(--s-2); text-align: left; align-content: start; }
.field__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.field__hint { font-size: var(--t-xs); color: var(--c-text-3); }
.field__error { font-size: var(--t-xs); color: var(--c-red-hi); font-weight: 600; }

.input,
.select,
.textarea {
  width: 100%;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-btn);
  padding: 0.75rem var(--s-4);
  min-height: 3rem;
  color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--c-text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-surface-4); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--c-gold);
}
.select {
  appearance: none;
  padding-right: var(--s-7);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-text-3) 50%),
    linear-gradient(135deg, var(--c-text-3) 50%, transparent 50%);
  background-position: right 1.35rem center, right 1rem center;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
}

/* ---- The big search bar (Scout / Desk) --------------------------------- */
.searchbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 0 var(--s-5);
  height: 5rem;
  transition: border-color var(--dur) var(--ease);
}
.searchbar:focus-within { border-color: var(--c-gold); }
.searchbar__icon { flex: none; color: var(--c-text-3); }
.searchbar__input {
  flex: 1;
  background: none;
  border: 0;
  height: 100%;
  font-size: var(--t-h2);
  color: var(--c-text);
}
.searchbar__input::placeholder { color: var(--c-text-3); }
.searchbar__clear { flex: none; }

/* ---- Panels ------------------------------------------------------------ */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.panel__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.panel__icon { color: var(--c-text-2); flex: none; }
.panel__title {
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.panel__count {
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--c-text-3);
  font-weight: 600;
}
/* A control group closing out a panel head. The count lives INSIDE it rather
   than in the panel's own count slot whenever both are wanted: each would
   claim the head's slack with `margin-left: auto`, and flexbox splits free
   space evenly between two auto margins — which parks the count in the
   middle of the bar instead of beside the button. */
.panel__action {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: none;
}
.panel__action .panel__count { margin-left: 0; }

.panel__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--c-line-soft);
}
.panel__foot .btn { width: 100%; border-radius: 0; color: var(--c-text-2); }

/* ---- Rows -------------------------------------------------------------- */
.row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line-soft);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.row:first-of-type { border-top: 0; }
button.row:hover, a.row:hover { background: var(--c-surface-2); }
.row__main { flex: 1; min-width: 0; }
.row__title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.01em; }
.row__sub { font-size: var(--t-sm); color: var(--c-text-3); margin-top: 0.1rem; }
.row__meta { font-size: var(--t-sm); color: var(--c-text-3); white-space: nowrap; }
.row__chev { color: var(--c-text-3); flex: none; }

/* ---- Edit / Delete, the pair that sits on every record -----------------
   One shape, one place on the screen, on a work order, a vehicle, a camper
   and a customer alike — see recordActions() in ui.js. `margin-left: auto`
   is what parks it at the end of whatever flex row it is dropped into: the
   breadcrumb on a detail screen, the row on a list. */
.record-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  flex: none;
}
.record-actions .btn { gap: var(--s-2); }

/* ---- Thumbnail tile (stands in for supplier/vehicle photography) ------- */
.thumb {
  flex: none;
  display: grid;
  place-items: center;
  background: var(--c-surface-4);
  border-radius: 10px;
  color: var(--c-text-2);
  overflow: hidden;
}
.thumb--sm { width: 3.875rem; height: 3.875rem; }
.thumb--md { width: 4.5rem; height: 4.5rem; }
.thumb--lg { width: 100%; aspect-ratio: 16 / 10; border-radius: 0; }

/* ---- Data table -------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  background: var(--c-surface-2);
  padding: var(--s-4) var(--s-5);
  text-align: left;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-text-2);
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.table tbody td {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line-soft);
  vertical-align: middle;
}
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr { transition: background var(--dur-fast) var(--ease); }
.table tbody tr:hover { background: var(--c-surface-2); }
.table .cell-right { text-align: right; }

.part-cell { display: flex; align-items: center; gap: var(--s-4); }
.part-cell__name { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.01em; }
.part-cell__fits { font-size: var(--t-sm); color: var(--c-text-3); margin-top: 0.1rem; }

.price {
  font-size: var(--t-h2);
  font-weight: 800;
  color: var(--c-green);
  letter-spacing: -0.02em;
}
.price--plain { color: var(--c-text); }

.supplier__name { font-size: var(--t-h3); font-weight: 600; }
.supplier__rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: var(--t-sm);
  color: var(--c-text-3);
}
.supplier__stars { color: var(--c-star); font-weight: 700; display: inline-flex; gap: 0.25rem; align-items: center; }

.shipping { display: flex; align-items: center; gap: var(--s-3); }
.shipping__icon { color: var(--c-text-2); flex: none; }
.shipping__free { font-size: var(--t-h3); font-weight: 800; color: var(--c-green); }
.shipping__cost { font-size: var(--t-h3); font-weight: 700; color: var(--c-text); }
.shipping__eta { font-size: var(--t-sm); color: var(--c-text-3); margin-top: 0.1rem; }

/* ---- Vehicle type tiles (Scout) ---------------------------------------- */
.type-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
}
.type-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  height: 9rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-tile);
  color: var(--c-text);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.type-tile:hover { background: var(--c-surface-2); border-color: var(--c-surface-4); }
.type-tile__icon { color: var(--c-text); }
.type-tile__label { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.01em; }
/* The red hairline marks the active choice. */
.type-tile[aria-pressed="true"] { background: var(--c-surface-2); border-color: var(--c-line); }
.type-tile[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--c-red);
}

/* ---- Tabs (Bay) -------------------------------------------------------- */
.tabs {
  display: inline-flex;
  gap: var(--s-1);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-tile);
  padding: var(--s-1);
}
.tab {
  position: relative;
  padding: var(--s-3) var(--s-6);
  border-radius: 9px;
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--c-text-3);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--c-text); }
.tab[aria-pressed="true"] { background: var(--c-surface-3); color: var(--c-text); }
.tab[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: var(--s-4); right: var(--s-4); bottom: 0.3rem;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--c-red);
}
.tab__count {
  margin-left: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

/* ---- Badges ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.3rem var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }

.badge--green  { color: var(--c-green); border-color: rgba(53, 201, 90, 0.35);  background: rgba(53, 201, 90, 0.10); }
.badge--amber  { color: var(--c-amber); border-color: rgba(217, 144, 42, 0.38); background: rgba(217, 144, 42, 0.10); }
.badge--red    { color: var(--c-red-hi); border-color: rgba(224, 31, 38, 0.40); background: rgba(224, 31, 38, 0.10); }
.badge--blue   { color: var(--c-blue);  border-color: rgba(74, 144, 217, 0.38); background: rgba(74, 144, 217, 0.10); }
.badge--grey   { color: var(--c-text-2); border-color: var(--c-line); background: var(--c-surface-2); }

/* ---- Empty + result states --------------------------------------------- */
.empty {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  text-align: center;
}
.empty__icon { color: var(--c-surface-4); }
.empty__title { font-size: var(--t-h2); font-weight: 700; }
.empty__body { color: var(--c-text-3); max-width: 34rem; font-size: var(--t-sm); }

/* ---- Modal ------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(4, 5, 6, 0.72);
  display: grid;
  place-items: center;
  padding: var(--s-6);
  animation: fade-in var(--dur) var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 46rem;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  animation: modal-in var(--dur) var(--ease) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.modal--wide { max-width: 62rem; }
.modal__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
}
.modal__title { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.01em; flex: 1; }
.modal__body { padding: var(--s-5); overflow-y: auto; display: grid; gap: var(--s-5); }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-5);
  border-top: 1px solid var(--c-line-soft);
}
.modal__consequence {
  padding: var(--s-4);
  border-radius: var(--r-btn);
  border: 1px solid rgba(224, 31, 38, 0.32);
  background: rgba(224, 31, 38, 0.08);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.form-grid { display: grid; gap: var(--s-4); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.form-grid .span-2 { grid-column: span 2; }

/* ---- Choice chips (problem type) --------------------------------------- */
.chip-set { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chip {
  position: relative;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-btn);
  background: var(--c-surface-2);
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--c-text-2);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.chip:hover { background: var(--c-surface-3); color: var(--c-text); }
.chip[aria-pressed="true"] {
  background: var(--c-surface-3);
  color: var(--c-text);
  border-color: var(--c-surface-4);
}
.chip[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0.75rem 0.35rem;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--c-red);
}

/* ---- Connectors panel (Settings) --------------------------------------
   Presentation only. The switches are demo toggles — see connectors.js. */
.connector-intro { font-size: var(--t-sm); color: var(--c-text-2); line-height: 1.5; }
.connector-note { font-size: var(--t-xs); color: var(--c-text-3); line-height: 1.5; }

.connector-list { display: grid; gap: var(--s-3); }
.connector {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-btn);
}
.connector__icon {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--c-surface-4);
  color: var(--c-text-2);
}
.connector__text { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.connector__head { display: flex; align-items: center; gap: var(--s-3); }
.connector__name { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.01em; }
.connector__agent {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-3);
  padding: 0.1rem var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.connector__desc { font-size: var(--t-sm); color: var(--c-text-3); }
.connector__state { font-size: var(--t-xs); font-weight: 600; color: var(--c-text-3); margin-top: 0.15rem; }
.connector__state--on { color: var(--c-green); }

/* Demo toggle. It flips a visual state and nothing else — no wire behind. */
.switch {
  position: relative;
  flex: none;
  width: 3.6rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: var(--c-surface-4);
  border: 1px solid var(--c-line);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch__knob {
  position: absolute;
  top: 50%;
  left: 0.2rem;
  transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--c-text);
  transition: left var(--dur) var(--ease);
}
.switch[aria-checked="true"] {
  background: var(--c-green-dim);
  border-color: var(--c-green);
}
.switch[aria-checked="true"] .switch__knob { left: calc(100% - 1.7rem); }

/* ---- Build credit — persistent bottom-right stamp ---------------------
   "Built by BakerXLabs" (no Care, so never "managed") + the demo notice.
   Non-interactive: it must never intercept a click in that corner. */
.build-credit {
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-5);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  text-align: right;
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
}
.build-credit__mark { height: 1.9rem; width: auto; }
.build-credit__by {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-text-3);
}
.build-credit__demo {
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--c-text-3);
}

/* ---- Toast ------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  right: var(--s-6);
  /* Sits above the persistent build credit in the same corner. */
  bottom: 7.5rem;
  z-index: 200;
  display: grid;
  gap: var(--s-3);
  width: 26rem;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-green);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-lift);
  animation: toast-in var(--dur) var(--ease) both;
}
.toast--error { border-left-color: var(--c-red); }
.toast--info  { border-left-color: var(--c-blue); }
.toast__text { flex: 1; font-size: var(--t-sm); line-height: 1.45; }
.toast__title { font-weight: 700; }
.toast__body { color: var(--c-text-2); margin-top: 0.1rem; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Misc -------------------------------------------------------------- */
.stack { display: grid; gap: var(--s-5); }
.stack--tight { gap: var(--s-4); }
.cluster { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.push { margin-left: auto; }

/* justify-items keeps a badge or pill sized to its own content instead of
   stretching across the grid cell it sits in. */
.definition { display: grid; gap: var(--s-1); justify-items: start; }
.definition__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.definition__value { font-size: var(--t-h3); font-weight: 600; }