/* The ground every page stands on: families, text styles, focus, and a few utilities. */
:root {
  --font-ui: "Readex Pro", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-heading: "Cairo", var(--font-ui);
  --font-mono: "Laqta Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* elevation/overlay, and a lighter step for menus and toasts */
  --shadow-overlay: 0 2px 6px rgb(20 26 68 / 0.08), 0 18px 44px -6px rgb(20 26 68 / 0.16);
  --shadow-raised: 0 1px 2px rgb(20 26 68 / 0.06), 0 6px 16px -4px rgb(20 26 68 / 0.12);
  /* focus/ring: the focus colour, 3px, outside the element */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-border-focus) 90%, transparent);
  --backdrop: rgb(12 16 48 / 0.72);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-open: 180ms;
  --duration-mark: 240ms;

  --nav-width: 248px;
  --topbar-height: 72px;
  --tabbar-height: 64px;
  --page-padding: 32px;
  --target-min: 32px;

  color-scheme: light;
}

:root[data-theme="dark"],
.theme-dark {
  --shadow-overlay: 0 2px 6px rgb(0 0 0 / 0.3), 0 18px 44px -6px rgb(0 0 0 / 0.5);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -4px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}

/* The device prefers dark and the page does not insist on light: the same, as tokens.a8cb7409.css does. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-overlay: 0 2px 6px rgb(0 0 0 / 0.3), 0 18px 44px -6px rgb(0 0 0 / 0.5);
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -4px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
}

@media (max-width: 1279px) {
  :root {
    --nav-width: 72px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-padding: 16px;
    --topbar-height: 64px;
    --target-min: 44px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font: 400 16px / 28px var(--font-ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

/* A frame too: a player sized by attributes never pushes a narrow phone sideways. */
img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

/* A link to a heading or a section lands below the sticky bar (72px, 64px on phones), not under
   it: the public nav and the app's top bar are both that tall. */
main [id],
:target {
  scroll-margin-block-start: calc(var(--topbar-height) + 16px);
}

:where(p, li, dd, td, th, h1, h2, h3, h4) {
  overflow-wrap: break-word;
}

/* Text styles, named as in Figma */
h1,
.lq-h1 {
  font: 800 36px / 52px var(--font-heading);
}

h2,
.lq-h2 {
  font: 700 28px / 42px var(--font-heading);
}

h3,
.lq-h3 {
  font: 700 22px / 34px var(--font-heading);
}

.lq-display-hero {
  font: 900 clamp(40px, 4.5vw + 12px, 68px) / 1.41 var(--font-heading);
}

.lq-display-lg {
  font: 800 clamp(32px, 3vw + 10px, 48px) / 1.42 var(--font-heading);
}

.lq-body-lg {
  font: 400 18px / 32px var(--font-ui);
}

.lq-body-md {
  font: 400 16px / 28px var(--font-ui);
}

.lq-body-sm {
  font: 400 14px / 24px var(--font-ui);
}

.lq-caption {
  font: 400 12px / 18px var(--font-ui);
}

.lq-label-sm {
  font: 500 12px / 16px var(--font-ui);
}

.lq-label-md {
  font: 500 14px / 20px var(--font-ui);
}

.lq-label-lg {
  font: 500 16px / 24px var(--font-ui);
}

.lq-transcript {
  font: 400 17px / 32px var(--font-ui);
}

.lq-quote {
  font: 400 24px / 44px var(--font-ui);
}

.lq-timecode {
  font: 500 12px / 16px var(--font-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.lq-timecode--md {
  font-size: 13px;
}

.lq-secondary {
  color: var(--color-text-secondary);
}

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

@media (max-width: 767px) {
  h1,
  .lq-h1 {
    font-size: 28px;
    line-height: 42px;
  }

  h2,
  .lq-h2 {
    font-size: 24px;
    line-height: 36px;
  }

  .lq-quote {
    font-size: 20px;
    line-height: 36px;
  }
}

/*
 * The highlighter: matched words in transcripts and quotes. A band of amber under the lower half
 * of the letters, drawn from the start of the line to its end when the results appear.
 */
.lq-hl {
  --lq-hl-band: 0.46em;
  --lq-hl-lift: 0.14em;
  font-weight: 600;
  color: inherit;
  background: linear-gradient(var(--color-accent-amber), var(--color-accent-amber)) no-repeat;
  background-size: 100% var(--lq-hl-band);
  background-position: right 0 bottom var(--lq-hl-lift);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: lq-highlight var(--duration-mark) var(--ease-out) both;
}

.lq-hl:dir(ltr) {
  background-position: left 0 bottom var(--lq-hl-lift);
}

/* On dark surfaces the words themselves turn amber over a thin line, as the hand-off says:
   light letters on amber do not read. */
.theme-dark .lq-hl,
:root[data-theme="dark"] .lq-hl {
  --lq-hl-band: 2px;
  --lq-hl-lift: 0.02em;
  color: var(--amber-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lq-hl {
    --lq-hl-band: 2px;
    --lq-hl-lift: 0.02em;
    color: var(--amber-400);
  }
}

@keyframes lq-highlight {
  from {
    background-size: 0% var(--lq-hl-band);
  }
}

/* Focus is always visible: the focus colour as a 3px ring. The transparent outline keeps it in
   forced-colours mode, where shadows are not drawn. */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.lq-visually-hidden {
  /* biome-ignore lint/complexity/noImportantStyles: hidden text must stay out of layout whatever else applies */
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lq-skip {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--color-action-primary);
  color: var(--color-action-on-primary);
  font: 500 14px / 20px var(--font-ui);
  text-decoration: none;
  transform: translateY(-200%);
}

.lq-skip:focus {
  transform: none;
}

.lq-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* A list in running text (the legal pages): markers kept, items spaced. */
.lq-list {
  padding-inline-start: 1.5em;
}

ul.lq-list {
  list-style: disc;
}

ol.lq-list {
  list-style: decimal;
}

.lq-list > li + li {
  margin-block-start: 8px;
}

.lq-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.lq-stack {
  display: flex;
  flex-direction: column;
  gap: var(--lq-gap, 16px);
}

.lq-stack--tight {
  --lq-gap: 8px;
}

.lq-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lq-gap, 8px);
}

.lq-divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--color-border-default);
}

@media (prefers-reduced-motion: reduce) {
  /* biome-ignore-start lint/complexity/noImportantStyles: a person's reduced-motion setting overrides every animation */
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* biome-ignore-end lint/complexity/noImportantStyles: see above */
}