/* The consent card: a small card floating at the bottom start corner (left; right in right-to-left languages) (full width less a gutter on phones). Light by default, dark when the theme or the system asks for dark. */
:root {
  --tlbxc-bg: #ffffff;
  --tlbxc-fg: #111111;
  --tlbxc-line: rgba(0, 0, 0, 0.18);
  --tlbxc-accent: #e7efff;
  --tlbxc-accent-ink: #0a0a0a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-tlbx-theme]) {
    --tlbxc-bg: #111111;
    --tlbxc-fg: #f1ede4;
    --tlbxc-line: rgba(241, 237, 228, 0.25);
  }
}
:root[data-theme="dark"]:not([data-tlbx-theme]) {
  --tlbxc-bg: #111111;
  --tlbxc-fg: #f1ede4;
  --tlbxc-line: rgba(241, 237, 228, 0.25);
}
/* On a page with the shared theme (theme.js sets data-tlbx-theme), the banner takes the chosen theme's colours. */
:root[data-tlbx-theme] {
  --tlbxc-bg: var(--sl-surface, #ffffff);
  --tlbxc-fg: var(--sl-text, #111111);
  --tlbxc-line: color-mix(in srgb, var(--sl-text, #111111) 25%, transparent);
  --tlbxc-accent: var(--sl-accent, #e7efff);
  --tlbxc-accent-ink: var(--sl-on-accent, #0a0a0a);
}

.tlbxc-banner {
  position: fixed;
  inset-inline-start: 16px;
  bottom: 16px;
  z-index: var(--z-consent, 1000);
  box-sizing: border-box;
  width: min(320px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  padding: 14px 14px 12px;
  background: var(--tlbxc-bg);
  color: var(--tlbxc-fg);
  border: 1px solid var(--tlbxc-line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: tlbxc-in 0.25s ease-out;
}
/* On a phone the card sits above a sheet footer pinned to the bottom of the window (an app's main button, shared/frame/panel.js
 * publishes its height as --tlbx-foot-h), so the main button is never under it. */
@media (max-width: 900px) { .tlbxc-banner { bottom: calc(16px + var(--tlbx-foot-h, 0px)); } }
@keyframes tlbxc-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .tlbxc-banner { animation: none; } }
.tlbxc-text { margin: 0; padding-inline-end: 22px; }
.tlbxc-text a { color: inherit; text-underline-offset: 2px; }
.tlbxc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tlbxc-btn {
  font: inherit;
  padding: 4px 12px;
  border: 1px solid var(--tlbxc-line);
  border-radius: 999px;
  background: transparent;
  color: var(--tlbxc-fg);
  cursor: pointer;
}
.tlbxc-btn.primary { background: var(--tlbxc-accent); border-color: var(--tlbxc-accent); color: var(--tlbxc-accent-ink); }
.tlbxc-btn.x { position: absolute; top: 6px; inset-inline-end: 6px; padding: 4px 8px; border: 0; font-size: 16px; line-height: 1; }
.tlbxc-btn:focus-visible { outline: 2px solid var(--tlbxc-fg); outline-offset: 2px; }

/* While the card is up on a page that scrolls (tlbxc-pad, banner.js), the page's bottom padding grows by the card's height and
 * its gap, so nothing at the end of the page can scroll under it. --tlbxc-base-pb is the page's own bottom padding, kept. A
 * full-height app keeps its size: the card floats over it (above its footer on a phone). */
html.tlbxc-on.tlbxc-pad body { padding-bottom: calc(var(--consent-h, 0px) + var(--tlbxc-base-pb, 0px)); }