/* ==========================================================================
   gadgets-views.css — the gadget views (assets/js/gadgets-views.js).
   Every selector begins `.gxv-` (the view root is `.gxv`). Tokens only — see
   assets/css/tokens.css; no hard-coded colours. `--accent` is decorative
   (bars, dots); anything readable in orange uses `--accent-ink`.

   Layout adapts to the width of the view itself, not the viewport: `.gxv` is a
   size container, so the `@container gxv` rules at the end hold anywhere from
   300px to 640px wide. Wide grids (bookings, rota, stock) scroll inside their
   own `.gxv-scroll`, never the page.
   ========================================================================== */

/* ---- Root + resets ---------------------------------------------------------
   Resets sit in :where() so they have zero specificity and every component
   class below can override them without a fight. */
.gxv {
  container: gxv / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-body);
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
  overflow-wrap: break-word;
}
.gxv > * { min-width: 0; }
:where(.gxv) *, :where(.gxv) *::before, :where(.gxv) *::after { box-sizing: border-box; }
:where(.gxv) p, :where(.gxv) dl, :where(.gxv) dd, :where(.gxv) ul, :where(.gxv) ol { margin: 0; max-width: none; }
:where(.gxv) ul, :where(.gxv) ol { padding: 0; list-style: none; }
:where(.gxv) button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
:where(.gxv) input { margin: 0; font: inherit; color: inherit; }
:where(.gxv) a { color: inherit; }
:where(.gxv) svg { display: block; max-width: none; }

/* Visible focus: the shared ring. The transparent outline keeps a focus
   indicator in forced-colours mode, where box-shadow is dropped. */
.gxv button:focus-visible,
.gxv input:focus-visible,
.gxv a:not(.text-link):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
.gxv button:focus-visible, .gxv input:focus-visible { position: relative; z-index: 2; }

.gxv-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gxv-ic { display: inline-flex; flex: 0 0 auto; }
.gxv-ic svg { width: 14px; height: 14px; }
.gxv-ic--ok { color: var(--ok); }
.gxv-ic--warn { color: var(--accent-ink); }
.gxv-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--ink-soft); }

/* ---- Card, head, key/value rows -------------------------------------------- */
.gxv-card {
  min-width: 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--rule-warm);
  border-radius: var(--radius-card);
}
.gxv-card--dashed { border: 1px dashed var(--line-dashed); }

.gxv-head { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 8px; }
.gxv-head__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-chip);
  background: var(--paper-2);
  color: var(--ink-soft);
}
.gxv-head__icon .gxv-ic svg { width: 15px; height: 15px; }
.gxv-head__title {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gxv-head__aside { display: inline-flex; flex: 0 0 auto; align-items: center; margin-left: auto; }

.gxv-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; }
.gxv-kv dt { flex: 0 0 auto; color: var(--ink-soft); }
.gxv-kv dd { min-width: 0; text-align: right; color: var(--ink); overflow-wrap: anywhere; }

/* Bracket label ("[ Activity ]") — same look as the page's .kicker; brackets drawn by CSS. */
.gxv-section-label {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
}
.gxv-section-label::before { content: "[\00a0"; content: "[\00a0" / ""; }
.gxv-section-label::after { content: "\00a0]"; content: "\00a0]" / ""; }
.gxv-fine { font-size: 12px; color: var(--ink-subtle); }
.gxv-fine--pad { padding: 4px 4px 0; }
.gxv-note { font-size: 12.5px; color: var(--ink-2); }
.gxv-note--icon { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.gxv-note--icon .gxv-ic { color: var(--ink-faint); }

/* ---- Scroll wrapper ------------------------------------------------------------
   The 3px padding/negative margin pair leaves room for the focus ring, which
   overflow would otherwise clip, without moving anything. */
.gxv-kv + .gxv-scroll { margin-top: 8px; }
.gxv-scroll {
  min-width: 0;
  max-width: 100%;
  margin: -3px;
  padding: 3px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  /* Scroll hint: a soft edge shows on a side only while there is more to scroll to.
     The "local" covers move with the content and hide the fixed edges at each end. */
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0 / 28px 100% no-repeat local,
    linear-gradient(to right, var(--rule-warm), transparent) 0 0 / 12px 100% no-repeat scroll,
    linear-gradient(to left, var(--rule-warm), transparent) 100% 0 / 12px 100% no-repeat scroll;
}

/* ---- Table (echoes .demo-table) --------------------------------------------------- */
.gxv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gxv-table th, .gxv-table td { text-align: left; vertical-align: middle; }
.gxv-table thead th {
  padding: 0 8px 8px;
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  white-space: nowrap;
  border-bottom: 1px solid var(--rule-warm);
}
.gxv-table tbody th, .gxv-table td {
  padding: 8px;
  font-weight: var(--fw-body);
  color: var(--ink);
  border-bottom: 1px solid var(--rule-warm);
}
.gxv-table tbody tr:last-child th, .gxv-table tbody tr:last-child td { border-bottom: 0; }
.gxv-table .gxv-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gxv-table .gxv-item { overflow-wrap: anywhere; }
.gxv-table tr.is-featured > * { background: var(--accent-wash); }
.gxv-table tr.is-featured > :first-child { border-radius: var(--radius-chip) 0 0 var(--radius-chip); }
.gxv-table tr.is-featured > :last-child { border-radius: 0 var(--radius-chip) var(--radius-chip) 0; }

/* Sums under a table of lines. */
.gxv-table tfoot th, .gxv-table tfoot td {
  padding: 3px 8px;
  border-bottom: 0;
  font-weight: var(--fw-body);
  text-align: right;
  color: var(--ink-soft);
}
.gxv-table tfoot .gxv-sumrow:first-child > * { padding-top: 10px; border-top: 1px solid var(--rule-warm); }
.gxv-table tfoot .gxv-num { color: var(--ink); }
.gxv-table tfoot .gxv-sumrow.is-off .gxv-num { color: var(--ink-soft); }
.gxv-table tfoot .gxv-total > * {
  padding-top: 8px;
  border-top: 1px solid var(--line-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
}
.gxv-card.is-paid .gxv-table tfoot .gxv-total .gxv-num { color: var(--ok-ink); }

/* ---- Pill --------------------------------------------------------------------------- */
.gxv-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}
.gxv-pill .gxv-ic svg { width: 11px; height: 11px; }
.gxv-pill--ok { background: var(--ok-wash); color: var(--ok-ink); }
.gxv-pill--warn { background: var(--accent-wash); color: var(--accent-ink); }
.gxv-pill--urgent { background: var(--accent-ink); color: var(--surface); }
.gxv-slot { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; }

/* ---- Buttons -------------------------------------------------------------------------- */
.gxv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line-pill);
  border-radius: 0;
  background: var(--surface-1);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.gxv-btn::after { content: ""; position: absolute; inset: -6px -2px; } /* ~40px touch target, no visual change */
.gxv-btn:hover { background: var(--surface-hover); }
.gxv-btn:active { background: var(--surface-active); transform: scale(0.97); }
.gxv-btn--accent { border-color: transparent; background: var(--btn-dark); color: var(--btn-dark-ink); }
.gxv-btn--accent:hover { background: var(--btn-dark-hover); }
.gxv-btn--accent:active { background: var(--btn-dark-hover); }
.gxv-btn--sm { height: 24px; padding: 0 10px; font-size: 12px; }
.gxv-btn .gxv-ic svg { width: 13px; height: 13px; }
.gxv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- Segmented toggle + switch ------------------------------------------------------------ */
.gxv-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-chip); background: var(--paper-2); }
.gxv-seg__btn {
  position: relative;
  height: 24px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-chip) - 2px);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.gxv-seg__btn::after { content: ""; position: absolute; inset: -8px 0; }
.gxv-seg__btn:hover { color: var(--ink); }
.gxv-seg__btn[aria-pressed="true"] { border-color: var(--rule-warm); background: var(--surface); color: var(--ink-strong); }

.gxv-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--ink);
  font-size: 12.5px;
}
.gxv-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 18px;
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.gxv-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-soft);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.gxv-switch[aria-checked="true"] .gxv-switch__track { border-color: var(--accent-ink); background: var(--accent-ink); }
.gxv-switch[aria-checked="true"] .gxv-switch__thumb { background: var(--surface); transform: translateX(12px); }

/* ---- Chips (topic chips, the automation rule) ---------------------------------------------- */
.gxv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gxv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.3;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
button.gxv-chip:hover { background: var(--rule-warm); }
.gxv-chip--static { align-self: flex-start; }
.gxv-chip .gxv-ic { color: var(--ink-soft); }

/* ---- Toolbar rows ------------------------------------------------------------------------------ */
.gxv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.gxv-toolbar__label { font-size: 12.5px; color: var(--ink-soft); }
.gxv-toolbar--tight { padding: 2px 0 10px; }
.gxv-toolbar--foot { padding-top: 10px; }
.gxv-toolrow { display: flex; padding-top: 8px; }

/* ---- 1–2. Quote and invoice ------------------------------------------------------------------------ */
.gxv-terms { margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.gxv-terms__k {
  margin-right: 4px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--ink-subtle);
}
.gxv-card > .gxv-fine { margin-top: 8px; }

/* ---- 3. Payment reminder ------------------------------------------------------------------------------ */
.gxv-remind .gxv-head { margin-bottom: 4px; }
.gxv-letter { padding: 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.gxv-letter__p { margin: 0 0 12px; overflow-wrap: anywhere; }
.gxv-letter__p:last-child { margin-bottom: 0; }
.gxv-letter__close, .gxv-letter__sign { display: block; }
.gxv-letter__sign { color: var(--ink-strong); font-weight: var(--fw-medium); }

/* ---- 4. Price list ----------------------------------------------------------------------------------------- */
.gxv-price {
  position: relative;
  margin: -3px -8px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted var(--ink-faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: background var(--dur-fast) var(--ease-out);
}
.gxv-price::after { content: ""; position: absolute; inset: -8px -4px; }
.gxv-price:hover { background: var(--paper-2); }
.gxv-price-input {
  width: 7ch;
  margin: -4px 0;
  padding: 3px 6px;
  border: 1px solid var(--ink-subtle);
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.gxv-price-input::-webkit-outer-spin-button, .gxv-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (pointer: coarse) {
  .gxv-price-input { font-size: 16px; } /* 16px stops iOS zooming the page on focus */
}

/* ---- 5. Who owes us ------------------------------------------------------------------------------------------ */
.gxv-summary__big { font-size: 16px; font-weight: var(--fw-regular); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.gxv-summary__sub { margin-top: 2px; color: var(--ink-soft); }
.gxv-callfirst {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--accent-ink);
}
.gxv-card > .gxv-note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-dashed); }

/* ---- 6. Company knowledge --------------------------------------------------------------------------------------- */
.gxv-bubble-row { display: flex; justify-content: flex-end; }
.gxv-bubble {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: var(--radius-window) var(--radius-window) var(--radius-chip) var(--radius-window);
  background: var(--paper-2);
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.gxv-source { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.gxv-source span:last-child { min-width: 0; }
.gxv-source .gxv-ic { color: var(--ink-faint); }
.gxv-source .gxv-ic svg { width: 16px; height: 16px; }
.gxv-answer { padding: 14px; }
.gxv-answer__text { font-size: 13.5px; line-height: 1.55; color: var(--ink); }

/* ---- 7. Dashboard ------------------------------------------------------------------------------------------------- */
.gxv-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule-warm);
  border-radius: var(--radius-card);
  background: var(--rule-warm);
}
.gxv-tile { min-width: 0; padding: 12px 14px; background: var(--surface); }
.gxv-tile__label { margin: 0 0 4px; font-size: 11.5px; color: var(--ink-soft); }
.gxv-tile__value {
  margin: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gxv-tile__value--text { font-size: 14px; line-height: 1.55; }
.gxv-tile__value.is-up { color: var(--ok-ink); }
.gxv-tile__value.is-down { color: var(--accent-ink); }

.gxv-bars { display: flex; align-items: flex-end; gap: 12px; gap: clamp(8px, 4cqi, 28px); }
.gxv-bar { display: flex; flex: 1 1 0; flex-direction: column; align-items: stretch; min-width: 0; }
.gxv-bar__val {
  margin-bottom: 6px;
  overflow: hidden;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gxv-bar__track { display: flex; align-items: flex-end; height: 120px; }
.gxv-bar__fill {
  width: 100%;
  height: 0;
  border-radius: var(--radius-chip) var(--radius-chip) 0 0;
  background: var(--accent-soft);
  transition: height var(--dur) var(--ease-out);
}
.gxv-bar__fill--top { background: var(--accent); }
.gxv-bar__label {
  margin-top: 8px;
  overflow: hidden;
  font-size: 11.5px;
  color: var(--ink-soft);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 8. Stock tracker ---------------------------------------------------------------------------------------------- */
.gxv-stockhead__count { font-size: 13px; font-weight: var(--fw-medium); color: var(--ink-strong); }
.gxv-sub { display: block; font-size: 11.5px; color: var(--ink-soft); }
.gxv-sub__narrow { display: none; }
.gxv-stepper { display: inline-flex; align-items: center; gap: 4px; }
.gxv-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-pill);
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.gxv-step::after { content: ""; position: absolute; inset: -6px -3px; }
.gxv-step:hover { background: var(--paper-2); }
.gxv-step[aria-disabled="true"] { color: var(--ink-faint); cursor: not-allowed; }
.gxv-step[aria-disabled="true"]:hover { background: var(--surface); }
.gxv-step .gxv-ic svg { width: 12px; height: 12px; }
.gxv-stepper__val { min-width: 3ch; color: var(--ink-strong); font-variant-numeric: tabular-nums; text-align: center; }

/* ---- 9–10. Bookings and rota grids ------------------------------------------------------------------------------------- */
.gxv-grid { min-width: 100%; border-collapse: separate; border-spacing: 0; }
.gxv-grid th, .gxv-grid td { padding: 4px; border-bottom: 1px solid var(--rule-warm); }
.gxv-grid thead th { padding: 0 6px 8px; }
.gxv-grid tbody tr:last-child th, .gxv-grid tbody tr:last-child td { border-bottom: 0; }
.gxv-grid .gxv-time {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 4px 10px 4px 4px;
  border-right: 1px solid var(--rule-warm);
  background: var(--surface);
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.gxv-grid .gxv-corner { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--rule-warm); }
.gxv-grid .gxv-person { font-size: 12.5px; color: var(--ink); }
.gxv-daynum { font-weight: var(--fw-body); color: var(--ink-subtle); }
.gxv-grid .gxv-rota__total { padding-left: 10px; color: var(--ink-strong); font-weight: var(--fw-medium); }

.gxv-slotcell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 104px;
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.gxv-slotcell--booked { display: grid; align-items: center; justify-content: stretch; background: var(--paper-2); color: var(--ink); text-align: left; }
.gxv-slotcell__part { display: inline-block; }
.gxv-slotcell--free {
  border: 1px dashed var(--line-dashed);
  color: var(--ink-subtle);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.gxv-slotcell--free:hover { border-color: var(--line-pill); background: var(--surface-hover); color: var(--ink); }
.gxv-slotcell--free.is-new { border: 1px solid var(--accent-soft); background: var(--accent-wash); color: var(--accent-ink); font-weight: var(--fw-medium); }
.gxv-slotcell__label { display: inline-flex; align-items: center; gap: 4px; }
.gxv-slotcell .gxv-ic svg { width: 12px; height: 12px; }

.gxv-rcell {
  display: block;
  width: 100%;
  min-width: 46px;
  height: 32px;
  padding: 0 4px;
  border: 1px solid var(--rule-warm);
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.gxv-rcell:hover { border-color: var(--ink-soft); }
.gxv-rcell--s1 { border-color: var(--accent-soft); background: var(--accent-wash); color: var(--accent-ink); }
.gxv-rcell--off { border-color: transparent; background: var(--paper-2); color: var(--ink-soft); }

/* ---- 11. Automation ---------------------------------------------------------------------------------------------------------- */
.gxv-auto { display: flex; flex-direction: column; gap: 12px; }
.gxv-auto__head { display: flex; align-items: center; gap: 8px; }
.gxv-auto__trigger { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: var(--fw-medium); color: var(--ink-strong); }
.gxv-auto__switch { flex: 0 0 auto; }
.gxv-auto.is-off .gxv-steps, .gxv-auto.is-off .gxv-chip { opacity: 0.55; }
.gxv-steps { display: grid; gap: 8px; }
.gxv-steps li { display: flex; align-items: flex-start; gap: 10px; }
.gxv-steps__n {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 20px;
  text-align: center;
}
.gxv-steps__text { min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }

.gxv-log { display: grid; gap: 6px; align-content: start; min-height: 132px; }
.gxv-log.is-off { opacity: 0.55; }
.gxv-log__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--rule-warm);
  border-radius: var(--radius-chip);
  background: var(--surface);
  animation: gxv-in var(--dur) var(--ease-out) both;
}
.gxv-log__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.gxv-log__end { flex: 0 0 auto; margin-left: auto; }
@keyframes gxv-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---- 12. Follow-up -------------------------------------------------------------------------------------------------------------- */
.gxv-follow__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gxv-follow__pills { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.gxv-check { display: flex; align-items: flex-start; gap: 10px; min-width: 0; min-height: 24px; padding: 2px 0; cursor: pointer; }
.gxv-check__input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--ink-soft);
  border-radius: calc(var(--radius-chip) - 1px);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.gxv-check__input::after {
  content: "";
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid var(--surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.gxv-check__input:checked { border-color: var(--accent-ink); background: var(--accent-ink); }
.gxv-check__input:checked::after { transform: rotate(45deg) scale(1); }
.gxv-check__label { min-width: 0; font-size: 14px; font-weight: var(--fw-medium); color: var(--ink-strong); overflow-wrap: anywhere; }
.gxv-check__input:checked + .gxv-check__label { color: var(--ink-soft); text-decoration: line-through; }

/* ---- 13. Custom gadget --------------------------------------------------------------------------------------------------------------- */
.gxv-customcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.gxv-custom__icon { align-self: flex-start; }
.gxv-custom__ask {
  padding: 8px 12px;
  border-radius: var(--radius-chip);
  background: var(--paper-2);
  color: var(--ink-strong);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.gxv-custom__body { font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.gxv-customcard .gxv-section-label { margin: 4px 0 0; }
.gxv-bullets { display: grid; gap: 6px; }
.gxv-bullets li { position: relative; padding-left: 16px; color: var(--ink-2); }
.gxv-bullets li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.gxv-customcard .gxv-actions { margin-top: 4px; }

/* ---- 14. Noughts and crosses -------------------------------------------------------------------------------------------------------------- */
.gxv-gamecard { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
.gxv-game__status { min-height: 20px; font-size: 13.5px; font-weight: var(--fw-medium); color: var(--ink-strong); text-align: center; }
.gxv-board { display: grid; grid-template-columns: repeat(3, 64px); gap: 6px; }
.gxv-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line-pill);
  border-radius: var(--radius-card);
  background: var(--paper-2);
  font-size: 28px;
  font-weight: var(--fw-medium);
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out);
}
.gxv-cell[data-mark=""]:hover { background: var(--rule-warm); }
.gxv-cell[data-mark="X"] { color: var(--ink); cursor: default; }
.gxv-cell[data-mark="O"] { color: var(--accent-ink); cursor: default; }
.gxv-cell.is-win { border-width: 2px; border-color: var(--accent-soft); background: var(--accent-wash); } /* 2px so the line still shows in forced-colours mode */
.gxv-tally { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gxv-game__after { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; min-height: 28px; }
.gxv-game__link { font-size: 12.5px; }
.gxv-game__link .gxv-ic svg { width: 14px; height: 14px; }

/* ---- Narrow views (container width, not viewport) ---------------------------------------------------------------------------------------------- */
@container gxv (max-width: 420px) {
  .gxv-card { padding: 10px; }
  .gxv-table thead th { padding: 0 4px 7px; }
  .gxv-table tbody th, .gxv-table td { padding: 7px 4px; }
  .gxv-table tfoot th, .gxv-table tfoot td { padding-inline: 4px; }
  .gxv-tile { padding: 9px 10px; }
  .gxv-tile__value { font-size: 15px; }
  .gxv-tile__value--text { font-size: 12.5px; }
  .gxv-bars { align-items: stretch; }
  .gxv-bar__track { height: 96px; }
  .gxv-bar__val { font-size: 11px; }
  /* Two-line labels ("San Fernando") with room reserved, so every bar still sits on one baseline. */
  .gxv-bar__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.5em;
    font-size: 10.5px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .gxv-letter, .gxv-customcard, .gxv-gamecard { padding: 12px; }
  .gxv-col-reorder { display: none; }
  .gxv-sub__narrow { display: inline; }
  .gxv-slotcell { min-width: 96px; }
  .gxv-grid .gxv-rota__total { padding-left: 6px; }
}
@container gxv (max-width: 340px) {
  .gxv-kv__row { gap: 8px; }
  .gxv-tile__label { font-size: 10.5px; }
  .gxv-tile__value { font-size: 13.5px; }
  .gxv-stepper { gap: 2px; }
  .gxv-actions { gap: 6px; }
  .gxv-btn { padding: 0 10px; }
}

/* ---- meet: the live booking calendar (hidden gadget) ---------------------------------------------------
   The same widget as the "Start Here" section's, mounted inside the gadget window (booking.js, styled
   by booking.css). Its container carries the same classes as #booking-embed (`embed embed--booking`),
   so booking.css and the placeholder styles apply unchanged; these rules only fit it to the window:
   a framed white card under one line of explanation, the 620px embed minimum dropped (the widget sizes
   itself), less padding than the section's version, and body text back at the site's 16px, which the
   gadget window's 13px would otherwise shrink (the .bk-window rule in site.css does the same). */
.gxv-meet { max-width: 560px; margin-inline: auto; }
.gxv-meet__note { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.gxv-meet .embed {
  min-height: 0;
  border: 1px solid var(--rule-warm);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.gxv-meet .bk { padding: 16px; }
@media (min-width: 640px) {
  .gxv-meet .bk { padding: 20px; }
}

/* ---- Reduced motion: final states only, no movement ------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gxv, .gxv *, .gxv *::before, .gxv *::after { animation: none !important; transition: none !important; }
  .gxv-btn:active { transform: none; }
}

/* ---- Square buttons ---------------------------------------------------------------------------------
   Every button in the gadget preview is square, like the rest of the site (chips, steppers, segmented
   controls, board cells, price buttons). The one round icon button, the input's clear "×"
   (.gx-box__clear), and the windows/cards themselves keep their radius. Loaded last, so it wins. */
.gx button:not(.gx-box__clear),
.gx [role="button"],
.gx .gxv-seg,
.gx .gxv-chip { border-radius: 0; }

/* ---- Measure cap for the document-style views ---------------------------------------------------------
   The gadget block is as wide as the showcase window (1000px). Views that are label/value documents
   (quote, invoice, price list, reminder, follow-up), a chat (company knowledge), a flow (automation) or
   short tables (stock, who owes) read badly with their labels 900px away from their values, so they
   are held to a document width and centred. Wide grids (bookings, rota, sales dashboard) and the
   game keep the full width. */
.gxv-quote, .gxv-invoice, .gxv-pricelist, .gxv-chaser, .gxv-followup,
.gxv-knowledge, .gxv-automation, .gxv-stock, .gxv-debtors {
  max-width: 720px;
  margin-inline: auto;
}