@font-face { font-family: "Once Sans"; src: url("/share/assets/fonts/OnceSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Once Sans"; src: url("/share/assets/fonts/OnceSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Once Sans"; src: url("/share/assets/fonts/OnceSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Once Sans"; src: url("/share/assets/fonts/OnceSans-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Once Sans"; src: url("/share/assets/fonts/OnceSans-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Once Sans"; src: url("/share/assets/fonts/OnceSans-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Once Sans"; src: url("/share/assets/fonts/OnceSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Once Sans"; src: url("/share/assets/fonts/OnceSans-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;

  /* Pure white by product decision, not the tokens' off-white page. */
  --surface-page: var(--palette-neutral-0);
  --brand: var(--palette-brand-green);
  --on-brand: var(--palette-brand-white);
  --tint: var(--palette-brand-green);
  --focus-ring: var(--palette-brand-green);
  --ink-meta: var(--palette-brand-dark-grey);
  --fill-chip: var(--palette-brand-light-grey);
  --surface-card: var(--surface-sunken);

  --tile-green: var(--palette-brand-green);
  --tile-grey: var(--palette-brand-dark-grey);
  --tile-charcoal: var(--palette-neutral-800);

  --type-heading-l: var(--text-heading-l-weight) var(--text-heading-l-size) / var(--text-heading-l-line-height) var(--font-family-sans);
  --type-heading-m: var(--text-heading-m-weight) var(--text-heading-m-size) / var(--text-heading-m-line-height) var(--font-family-sans);
  --type-heading-s: var(--text-heading-s-weight) var(--text-heading-s-size) / var(--text-heading-s-line-height) var(--font-family-sans);
  --type-body-m: var(--text-body-m-weight) var(--text-body-m-size) / var(--text-body-m-line-height) var(--font-family-sans);
  --type-body-s: var(--text-body-s-weight) var(--text-body-s-size) / var(--text-body-s-line-height) var(--font-family-sans);
  --type-label: var(--text-label-weight) var(--text-label-size) / var(--text-label-line-height) var(--font-family-sans);
  --type-caption: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-line-height) var(--font-family-sans);
  --type-code: var(--text-code-weight) var(--text-code-size) / var(--text-code-line-height) var(--font-family-sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-page: var(--palette-neutral-1000);
    /* Once Green text and rings fall below contrast on the dark surface, so they go neutral there. */
    --tint: var(--ink-primary);
    --focus-ring: var(--ink-primary);
    --ink-meta: var(--ink-tertiary);
    --fill-chip: var(--surface-hover);
    --tile-charcoal: var(--palette-neutral-600);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-primary);
  font: var(--type-body-m);
  letter-spacing: var(--text-body-m-letter-spacing);
}

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

a { color: inherit; }

button, input, textarea, select { font-family: inherit; }


.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-5) 72px;
}

.brand {
  display: block;
  width: 92px;
  aspect-ratio: 34 / 10;
  margin: var(--space-5) auto 0;
  background-color: currentColor;
  color: var(--ink-primary);
  -webkit-mask: url("/share/assets/once-wordmark.svg") center / contain no-repeat;
  mask: url("/share/assets/once-wordmark.svg") center / contain no-repeat;
}

.recording,
.shared-list,
.install { margin-top: var(--space-6); }

h1 {
  margin: 0 0 var(--space-4);
  font: var(--type-heading-l);
  letter-spacing: var(--text-heading-l-letter-spacing);
}

.recording,
.shared-list {
  max-width: 680px;
  margin: var(--space-5) auto 0;
}

.shared-list-empty { color: var(--ink-meta); }

.shared-list-content[hidden],
.shared-list-empty[hidden] { display: none; }

.shared-list-content {
  display: block;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.shared-list-content .content > :first-child { margin-top: 0; }
.shared-list-content .content > :last-child { margin-bottom: 0; }

.pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--fill-chip);
  color: var(--ink-meta);
  font: var(--type-body-s);
  font-variant-numeric: tabular-nums;
}

.icon {
  display: block;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

speaker-avatars {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.avatar {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 2px solid var(--surface-page);
  border-radius: var(--radius-full);
  color: var(--on-brand);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.avatar + .avatar { margin-left: -8px; }
.speaker-0 { background: var(--tile-green); }
.speaker-1 { background: var(--tile-grey); }
.speaker-2 { background: var(--tile-charcoal); }

.avatar-overflow {
  margin-left: 6px;
  font: var(--type-caption);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.content { font: var(--type-body-m); }

.content h2 {
  margin: 28px 0 10px;
  font: var(--type-heading-m);
  letter-spacing: var(--text-heading-m-letter-spacing);
}

.content h3 {
  margin: var(--space-5) 0 var(--space-2);
  font: var(--type-heading-s);
  letter-spacing: var(--text-heading-s-letter-spacing);
}

.content p { margin: 0 0 var(--space-4); }
.content ul, .content ol { margin: 0 0 var(--space-4); padding-left: 22px; }
.content li { margin: 6px 0; }

.content .has-tasks { padding-left: 0; }
.content .has-tasks > li:not(.task) { list-style-position: inside; }
.content li.task { display: flex; align-items: flex-start; gap: 10px; list-style: none; }
.content li.task.completed { color: var(--ink-meta); }
.content li.task.completed .task-text { text-decoration: line-through; }

.task-check {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
  box-sizing: border-box;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-full);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.task-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.content a { color: var(--tint); text-decoration: underline; text-underline-offset: 2px; }

.content blockquote {
  margin: 0 0 var(--space-4);
  padding-left: 14px;
  border-left: 3px solid var(--border-default);
  color: var(--ink-secondary);
}

.content pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 14px;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow-x: auto;
}
.content code { font-family: var(--font-family-sans); font-variant-numeric: tabular-nums; }
.content pre code { font: var(--type-code); font-variant-numeric: tabular-nums; white-space: pre; }

.content .table-scroll { max-width: 100%; margin: 0 0 var(--space-4); overflow-x: auto; }
.content table { width: max-content; min-width: 100%; border-collapse: collapse; font: var(--type-body-s); font-variant-numeric: tabular-nums; }
.content th, .content td { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); vertical-align: top; }
.content th { background: var(--surface-card); font-weight: var(--font-weight-semibold); }
.content tbody tr:nth-child(even) { background: var(--surface-sunken); }

.content hr {
  margin: var(--space-5) 0;
  border: none;
  border-top: 1px solid var(--border-default);
}

.unavailable {
  max-width: 680px;
  margin: var(--space-9) auto 0;
}

.unavailable p { color: var(--ink-meta); }

/* MARK: Install */

.install { max-width: 680px; }

.install-description {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  color: var(--ink-meta);
  font: var(--type-body-s);
}

.install-message {
  margin-top: var(--space-5);
  color: var(--ink-meta);
}

.install-build {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-3) 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.install-build-name { flex: 1; font-weight: var(--font-weight-semibold); }

.install-published {
  margin-top: 2px;
  color: var(--ink-meta);
  font: var(--type-caption);
}

.button-primary {
  display: inline-flex;
  align-items: center;
  padding: 9px var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--on-brand);
  font: var(--type-label);
  text-decoration: none;
  white-space: nowrap;
}