/* Cookie notice and preferences panel.

   Standalone on purpose: this loads on the marketing page, the app shell and
   the legal pages, and the marketing page does not share style.css. It sticks
   to the colour tokens the two surfaces define under the same names, gives
   every one of them a fallback, and sets its own sizes rather than reaching
   for --fs-* (app) or --lp-fs-* (landing), which do not overlap.

   Both layers are native <dialog>s opened with showModal(), so they sit in
   the browser's top layer: focus trapping, Escape and stacking above every
   z-index on the page come from the platform rather than from a number.

   Chrome and motion are the app's, restated rather than shared. A .modal-box
   is `var(--surface)` behind `1px solid var(--border)` at `var(--radius)` with
   `0 8px 40px var(--modal-shadow)`, split into a bordered head, a body and a
   bordered foot; .btn is a 2rem control at 14px/600 with `var(--radius-sm)`;
   .t-modal opens by scaling `var(--modal-scale)` to 1 over
   `var(--modal-open-dur)` and closes faster, on `var(--modal-close-dur)`, and
   .t-scrim fades the backdrop on the matching --scrim- clocks. Those classes
   live in style.css, which the marketing page does not load, so the values are
   written out here against the tokens all three surfaces define. Sizes that
   only the app defines (--fs-*, --ctl-*) are written as their literal values,
   which is why 14px and 2rem appear below rather than a var(). */

.tbc-banner,
.tbc-panel {
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--text, #e2e4ea);
  box-sizing: border-box;
}

.tbc-banner *,
.tbc-panel *,
.tbc-banner *::before,
.tbc-panel *::before {
  box-sizing: border-box;
}

/* ── Motion ───────────────────────────────────────────────────────────────
   .t-modal and .t-scrim, restated for a native <dialog>. The closed state has
   to be the base, because a dialog is styled before it is opened and there is
   no class on it yet; `.is-open` is added two frames after showModal() and
   `.is-closing` for the length of the exit, which is what modules/motion.js
   does for the app's own overlays. Opening is deliberately slower than
   closing, as everywhere else in the app. */

.tbc-banner,
.tbc-panel {
  transform: scale(var(--modal-scale, 0.96));
  opacity: 0;
  transition:
    transform var(--modal-open-dur, 250ms)
      var(--modal-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity var(--modal-open-dur, 250ms)
      var(--modal-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.tbc-banner.is-open,
.tbc-panel.is-open {
  transform: scale(1);
  opacity: 1;
}

.tbc-banner.is-closing,
.tbc-panel.is-closing {
  transform: scale(var(--modal-scale, 0.96));
  opacity: 0;
  transition:
    transform var(--modal-close-dur, 150ms)
      var(--modal-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity var(--modal-close-dur, 150ms)
      var(--modal-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* The backdrop is only rendered while the dialog is open, and it is painted
   before `.is-open` lands, so it has a state to transition from. */
.tbc-banner::backdrop,
.tbc-panel::backdrop {
  background: var(--overlay, rgba(0, 0, 0, 0.55));
  opacity: 0;
  transition: opacity var(--scrim-close-dur, 150ms)
    var(--scrim-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.tbc-banner.is-open::backdrop,
.tbc-panel.is-open::backdrop {
  opacity: 1;
  transition: opacity var(--scrim-open-dur, 250ms)
    var(--scrim-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ── Banner ───────────────────────────────────────────────────────────── */

.tbc-banner {
  width: min(30rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--border, #2a2d35);
  border-radius: var(--radius, 8px);
  background: var(--surface, #17181c);
  box-shadow: 0 8px 40px var(--modal-shadow, rgba(0, 0, 0, 0.5));
}

/* showModal() hands focus to the first focusable descendant, which was the
   inline "cookie statement" link - so every visitor arrived with a focus ring
   around it. The title carries autofocus instead: screen readers announce the
   dialog by its name, no ring is painted, and neither button is nudged. */
.tbc-banner-head h2:focus,
.tbc-panel-head h2:focus {
  outline: none;
}

/* Head / body / foot, the same three parts and the same paddings as a
   .modal-box, so the notice reads as one of the app's dialogs. */
.tbc-banner-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border, #2a2d35);
}

/* The app's panel-head icon: a 28px tinted square, not a filled disc. */
.tbc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm, 4px);
  background: var(--accent-subtle, rgba(245, 158, 11, 0.08));
  border: 1px solid color-mix(in oklab, var(--accent, #f59e0b) 30%, transparent);
  color: var(--accent, #f59e0b);
}

.tbc-banner-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text, #e2e4ea);
}

.tbc-banner-body {
  padding: 1.25rem;
}

.tbc-banner-body p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-dim, #a1a6b3);
}

.tbc-banner-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border, #2a2d35);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

/* .btn: 2rem tall, 14px/600, flat line-height so the box does not reopen. */
.tbc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  height: 2rem;
  padding: 0 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  white-space: nowrap;
  transition:
    opacity var(--duration-quick, 150ms) var(--ease-out, ease-out),
    border-color var(--duration-quick, 150ms) var(--ease-out, ease-out),
    color var(--duration-quick, 150ms) var(--ease-out, ease-out);
}

/* .btn--primary dims on hover rather than shifting hue, so the accent stays
   the one colour it is everywhere else. */
.tbc-btn--primary {
  background: var(--accent, #f59e0b);
  color: var(--accent-on, #000);
  border-color: var(--accent, #f59e0b);
}

.tbc-btn--primary:hover {
  opacity: 0.85;
}

.tbc-btn--ghost {
  background: none;
  color: var(--text-muted, #6b7280);
  border-color: var(--border, #2a2d35);
}

.tbc-btn--ghost:hover {
  color: var(--text, #e2e4ea);
  border-color: var(--text-muted, #6b7280);
}

.tbc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tbc-btn:focus-visible,
.tbc-close:focus-visible,
.tbc-switch input:focus-visible + .tbc-switch-track,
.tbc-link:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
}

/* ── Panel ────────────────────────────────────────────────────────────── */

.tbc-panel {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(85vh, 48rem);
  padding: 0;
  border: 1px solid var(--border, #2a2d35);
  border-radius: var(--radius, 8px);
  background: var(--surface, #17181c);
  box-shadow: 0 8px 40px var(--modal-shadow, rgba(0, 0, 0, 0.5));
  overflow: hidden;
}

.tbc-panel-form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  margin: 0;
}

.tbc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border, #2a2d35);
}

.tbc-panel-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text, #e2e4ea);
}

.tbc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
}

.tbc-close:hover {
  color: var(--text, #e2e4ea);
}

.tbc-panel-body {
  padding: 1.25rem;
  overflow-y: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-dim, #a1a6b3);
}

.tbc-lede {
  margin: 0 0 1.25rem;
}

.tbc-group {
  margin-bottom: 1.5rem;
}

.tbc-group:last-of-type {
  margin-bottom: 1rem;
}

.tbc-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-soft, #1f2128);
}

.tbc-group-head h3 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text, #e2e4ea);
}

.tbc-always {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--text-muted, #6b7280);
}

.tbc-note {
  margin: 0.55rem 0 0.7rem;
  color: var(--text-muted, #6b7280);
}

.tbc-more {
  margin: 0;
  color: var(--text-muted, #6b7280);
}

.tbc-link {
  color: var(--accent, #f59e0b);
  text-decoration: none;
}

.tbc-link:hover {
  text-decoration: underline;
}

/* ── Inventory tables ─────────────────────────────────────────────────── */

.tbc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.tbc-table thead th {
  text-align: left;
  font-weight: 500;
  padding: 0.3rem 0.6rem 0.3rem 0;
  color: var(--text-muted, #6b7280);
  border-bottom: 1px solid var(--border-soft, #1f2128);
}

.tbc-table tbody th,
.tbc-table tbody td {
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  padding: 0.4rem 0.6rem 0.4rem 0;
  border-bottom: 1px solid var(--border-soft, #1f2128);
}

.tbc-table tbody tr:last-child th,
.tbc-table tbody tr:last-child td {
  border-bottom: none;
}

.tbc-table tbody th {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text, #e2e4ea);
  white-space: nowrap;
}

.tbc-table tbody td:first-of-type {
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

.tbc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Preferences switch ───────────────────────────────────────────────── */

.tbc-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.tbc-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tbc-switch-track {
  position: relative;
  width: 2rem;
  height: 1.125rem;
  border-radius: 999px;
  background: var(--surface-2, #1e2026);
  border: 1px solid var(--border, #2a2d35);
  transition:
    background var(--toggle-track, 150ms)
      var(--toggle-ease, cubic-bezier(0.34, 1.35, 0.64, 1)),
    border-color var(--toggle-track, 150ms)
      var(--toggle-ease, cubic-bezier(0.34, 1.35, 0.64, 1));
}

.tbc-switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--text-muted, #6b7280);
  transform: translateY(-50%);
  transition:
    transform var(--toggle-dur, 350ms)
      var(--toggle-ease, cubic-bezier(0.34, 1.35, 0.64, 1)),
    background var(--toggle-dur, 350ms)
      var(--toggle-ease, cubic-bezier(0.34, 1.35, 0.64, 1));
}

.tbc-switch input:checked + .tbc-switch-track {
  background: var(--accent-subtle, rgba(245, 158, 11, 0.08));
  border-color: var(--accent, #f59e0b);
}

.tbc-switch input:checked + .tbc-switch-track::after {
  background: var(--accent, #f59e0b);
  transform: translateY(-50%) translateX(0.875rem);
}

.tbc-switch-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--text-muted, #6b7280);
  min-width: 1.5rem;
}

/* ── Panel footer ─────────────────────────────────────────────────────── */

.tbc-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border, #2a2d35);
  background: var(--bg, #0d0d0f);
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .tbc-banner-head,
  .tbc-banner-foot {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .tbc-banner-body {
    padding: 1rem;
  }

  /* Three buttons do not fit a phone in one row, and the two that record a
     decision should not be the ones that shrink. They wrap instead, with
     Preferences taking its own row above them. */
  .tbc-banner-foot {
    flex-wrap: wrap;
  }

  .tbc-banner-foot .tbc-btn[data-tbc="details"] {
    margin-right: auto;
  }

  .tbc-table thead {
    display: none;
  }

  .tbc-table tbody th,
  .tbc-table tbody td {
    display: block;
    padding: 0;
    border: none;
    white-space: normal;
  }

  .tbc-table tbody tr {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-soft, #1f2128);
  }

  .tbc-table tbody td:first-of-type {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
    white-space: normal;
  }

  .tbc-panel-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Both dialogs still open, close and reach their end state; they just do not
     travel or fade. consent.js reads the same media query, so its close timer
     collapses to 0 rather than holding a dialog in a state nothing will
     animate out of. The scale has to go too, not only the transition: the
     closed base state is a real 0.96, and with the transition off it would
     simply stick there. */
  .tbc-banner,
  .tbc-panel,
  .tbc-banner.is-open,
  .tbc-panel.is-open,
  .tbc-banner.is-closing,
  .tbc-panel.is-closing,
  .tbc-banner::backdrop,
  .tbc-panel::backdrop,
  .tbc-banner.is-open::backdrop,
  .tbc-panel.is-open::backdrop,
  .tbc-btn,
  .tbc-switch-track,
  .tbc-switch-track::after {
    transition: none;
  }

  .tbc-banner,
  .tbc-panel {
    transform: none;
  }
}