@charset "UTF-8";
:root {
  --ink: #121212;
  --ink-secondary: #55524a;
  --ink-tertiary: #77736a;
  --paper: #f7f3e3;
  --paper-sunken: #eee9d4;
  --paper-raised: #fbf9ef;
  --rule: #d6cfb8;
  --rule-strong: #121212;
  --accent: #c8381a;
  --accent-ink: #ffffff;
  --accent-wash: #f6e2d3;
  --pop-ink: #121212;
  --sun: #ffc533;
  --sky: #8cc8ff;
  --pink: #ff9ec4;
  --leaf: #8fdba4;
  --lilac: #c7b3ff;
  --tangerine: #ff9f45;
  --coral: #ff8170;
  --orchid: #e39ae8;
  --cobalt: #7ea4ff;
  --teal: #5fd3c4;
  --lime: #cde86b;
  --sand: #e8cfa5;
  --positive: #2f5d3a;
  --positive-wash: #e8eedd;
  --caution: #7a5a12;
  --caution-wash: #f3e9cc;
  --critical: #8f2a2a;
  --critical-wash: #f4e0d8;
  --font-display: "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;
  --weight-display: 800;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.25rem;
  --text-lg: clamp(1.4375rem, 0.8vw + 1.2rem, 1.875rem);
  --text-xl: clamp(1.875rem, 1.6vw + 1.4rem, 2.75rem);
  --text-2xl: clamp(2.5rem, 3.2vw + 1.6rem, 4.25rem);
  --text-3xl: clamp(3.5rem, 7vw + 1.5rem, 7.5rem);
  --leading-display: 0.9;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.6;
  --leading-loose: 1.75;
  --tracking-display: -0.02em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.14em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --measure: 68ch;
  --width-narrow: 38rem;
  --width-text: 46rem;
  --width-content: 64rem;
  --width-wide: 84rem;
  --gutter: clamp(1rem, 3.5vw, 3.5rem);
  --border: 1px solid var(--rule);
  --border-strong: 1px solid var(--rule-strong);
  --radius-sm: 0.375rem;
  --radius: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --transition: 120ms ease-out;
  --spring: cubic-bezier(.3, 1.6, .5, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f7f3e3;
    --ink-secondary: #b3ae9f;
    --ink-tertiary: #858174;
    --paper: #121212;
    --paper-sunken: #1b1a17;
    --paper-raised: #1f1e1a;
    --rule: #34322c;
    --rule-strong: #f7f3e3;
    --accent: #f26b47;
    --accent-ink: #121212;
    --accent-wash: #2c1a14;
    --sun: #ffcf52;
    --sky: #9dd0ff;
    --pink: #ffadcd;
    --leaf: #9be3b0;
    --lilac: #d0bfff;
    --tangerine: #ffab5c;
    --coral: #ff9182;
    --orchid: #eaabee;
    --cobalt: #91b2ff;
    --teal: #74dccf;
    --lime: #d5ed80;
    --sand: #edd8b4;
    --positive: #8fc09c;
    --positive-wash: #1a241c;
    --caution: #d9bd7a;
    --caution-wash: #262015;
    --critical: #e08c8c;
    --critical-wash: #291a1a;
  }
}
@font-face {
  font-family: "Lexend Deca";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/lexend-deca-latin-d62c7033.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend Deca";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/lexend-deca-latin-ext-79a45943.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html, body {
  overflow-x: clip;
}

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

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

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  background: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  height: 0;
  border: 0;
  border-top: var(--border);
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-size: var(--text-3xl);
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--space-4);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transition);
}
a:hover {
  color: var(--accent);
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

strong, b {
  font-weight: var(--weight-bold);
}

small {
  font-size: var(--text-sm);
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  padding: 0.1em 0.35em;
  background-color: var(--paper-sunken);
  border: var(--border);
  border-radius: var(--radius-sm);
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
  background-color: var(--paper-sunken);
  border: var(--border);
  border-radius: var(--radius);
}
pre code {
  padding: 0;
  background: none;
  border: 0;
}

blockquote {
  padding-left: var(--space-4);
  border-left: 2px solid var(--rule-strong);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  display: block;
  margin-bottom: var(--space-3);
}

.lede {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--ink-secondary);
  max-width: var(--measure);
}

.muted {
  color: var(--ink-secondary);
}

.quiet {
  color: var(--ink-tertiary);
}

.numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page {
  padding-top: var(--space-5);
}
@media (min-width: 52rem) {
  .page {
    padding-top: var(--space-7);
  }
}

.container--content {
  max-width: var(--width-content);
}

.container--text {
  max-width: var(--width-text);
}

.container--narrow {
  max-width: var(--width-narrow);
}

.section {
  padding-block: var(--space-7);
}

.section--tall {
  padding-block: var(--space-9);
}

.stack > * + * {
  margin-top: var(--space-4);
}

.stack--tight > * + * {
  margin-top: var(--space-2);
}

.stack--loose > * + * {
  margin-top: var(--space-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cluster--between {
  justify-content: space-between;
}

.cluster--end {
  justify-content: flex-end;
}

.cluster--tight {
  gap: var(--space-2);
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
.grid > * {
  min-width: 0;
}

@media (min-width: 40rem) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 52rem) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 40rem) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 68rem) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
.split > * {
  min-width: 0;
}
@media (min-width: 52rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
  }
}

@media (min-width: 52rem) {
  .split--rail-first {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}

.panel {
  min-width: 0;
}

.rule {
  border: 0;
  border-top: var(--border);
  margin-block: var(--space-6);
}

.rule--strong {
  border-top: var(--border-strong);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-strong);
}

.page-header__text {
  max-width: var(--measure);
}

.page-header__description {
  margin-top: var(--space-3);
  color: var(--ink-secondary);
}

.page-header .eyebrow {
  margin-bottom: var(--space-4);
}

.panel {
  padding: var(--space-5);
  background-color: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius);
}

.panel--sunken {
  background-color: var(--paper-sunken);
  border-color: transparent;
}

.panel__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: var(--border);
}

.empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  color: var(--ink-secondary);
}

.empty__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem var(--space-5);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background-color: var(--paper-raised);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-wide);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform 260ms var(--spring);
}
.btn:hover {
  background-color: var(--sky);
  color: var(--pop-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-2px) rotate(-2deg);
  }
  .btn:active {
    transform: scale(0.94);
  }
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled, .btn[aria-disabled=true] {
  opacity: 0.45;
  cursor: not-allowed;
  background-color: var(--paper-raised);
  color: var(--ink);
  transform: none;
}

.btn--primary {
  background-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover {
  background-color: var(--sun);
  color: var(--pop-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover {
    transform: translateY(-2px) rotate(2deg) scale(1.04);
  }
}

.btn--ghost {
  border-color: transparent;
  background-color: transparent;
  color: var(--ink-secondary);
}
.btn--ghost:hover {
  background-color: var(--lilac);
  color: var(--pop-ink);
}

.btn--danger {
  border-color: var(--critical);
  color: var(--critical);
}
.btn--danger:hover {
  background-color: var(--critical);
  border-color: var(--critical);
  color: var(--paper);
}

.btn--sm {
  padding: 0.4rem var(--space-4);
  font-size: var(--text-xs);
}

.btn--lg {
  padding: 0.95rem var(--space-6);
  font-size: var(--text-base);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.btn-link:hover {
  color: var(--accent);
}
.btn-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-link--danger:hover {
  color: var(--critical);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.form {
  max-width: var(--width-narrow);
}

.form--wide {
  max-width: none;
}

.field + .field {
  margin-top: var(--space-4);
}

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.field__hint {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-tertiary);
}

.field__error {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--critical);
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  padding: 0.55rem var(--space-3);
  background-color: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-base);
  transition: border-color var(--transition);
}
.input::placeholder,
.select::placeholder,
.textarea::placeholder {
  color: var(--ink-tertiary);
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--ink-tertiary);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  background-color: var(--paper-sunken);
  color: var(--ink-tertiary);
  cursor: not-allowed;
}
.input[aria-invalid=true],
.select[aria-invalid=true],
.textarea[aria-invalid=true] {
  border-color: var(--critical);
}

.textarea {
  min-height: 8rem;
  line-height: var(--leading-body);
  resize: vertical;
}

.select {
  appearance: none;
  padding-right: var(--space-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
}

.choice + .choice {
  margin-top: var(--space-3);
}

.choice__control {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.22rem;
  accent-color: var(--ink);
}

.choice__text {
  font-size: var(--text-sm);
}

.choice__hint {
  display: block;
  color: var(--ink-tertiary);
  font-size: var(--text-xs);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
}
.filter-bar .input, .filter-bar .select {
  width: auto;
  min-width: 14rem;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
}
.inline-form .input, .inline-form .select {
  flex: 1 1 12rem;
  width: auto;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border);
}

.field_with_errors {
  display: contents;
}
.field_with_errors .input, .field_with_errors .select, .field_with_errors .textarea {
  border-color: var(--critical);
}

.form-errors {
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid var(--critical);
  background-color: var(--critical-wash);
  color: var(--critical);
}
.form-errors__title {
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.form-errors ul {
  padding-left: var(--space-4);
  list-style: disc;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  font-size: var(--text-base);
  text-align: left;
}
.table th, .table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}
.table th:first-child, .table td:first-child {
  padding-left: 0;
}
.table th:last-child, .table td:last-child {
  padding-right: 0;
}
.table thead th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  padding-top: 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-strong);
  white-space: nowrap;
}
.table tbody tr {
  border-bottom: var(--border);
}
.table tbody tr:hover {
  background-color: var(--paper-sunken);
}
.table .is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table .is-actions {
  text-align: right;
  white-space: nowrap;
}

.table__primary {
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.table__primary.is-done {
  color: var(--ink-tertiary);
  text-decoration: line-through var(--accent);
}

.table-wrap + .table-wrap {
  margin-top: var(--space-7);
}

.day-group + .day-group {
  margin-top: var(--space-7);
}

.day-group__head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}
.day-group__head a {
  color: inherit;
}

.table__secondary {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-tertiary);
}

.detail-list {
  display: grid;
  gap: 0;
}
@media (min-width: 40rem) {
  .detail-list {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}
.detail-list dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  padding: var(--space-3) 0;
  border-top: var(--border);
}
.detail-list dd {
  padding: var(--space-3) 0;
  margin: 0;
}
@media (min-width: 40rem) {
  .detail-list dd {
    border-top: var(--border);
  }
}

@media (min-width: 40rem) {
  .detail-list--stacked {
    grid-template-columns: minmax(0, 1fr);
  }
}
.detail-list--stacked dt {
  padding-bottom: var(--space-1);
}
.detail-list--stacked dd {
  padding-top: 0;
}
@media (min-width: 40rem) {
  .detail-list--stacked dd {
    border-top: 0;
  }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border);
  font-size: var(--text-sm);
}

.pagination__count {
  color: var(--ink-tertiary);
}

.pagination__links {
  display: flex;
  gap: var(--space-2);
}

.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  background-color: var(--paper-raised);
  font-size: var(--text-sm);
}

.alert + .alert {
  margin-top: var(--space-3);
}

.alert__body {
  flex: 1;
}

.alert__dismiss {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-tertiary);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
}
.alert__dismiss:hover {
  color: var(--ink);
}

.alert--notice {
  border-left-color: var(--positive);
  background-color: var(--positive-wash);
}

.alert--alert,
.alert--error {
  border-left-color: var(--critical);
  background-color: var(--critical-wash);
}

.alert--warning {
  border-left-color: var(--caution);
  background-color: var(--caution-wash);
}

.alert--info {
  border-left-color: var(--accent);
  background-color: var(--accent-wash);
}

.toasts {
  position: fixed;
  z-index: 60;
  bottom: 0;
  left: 0;
  width: 100vw;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  pointer-events: none;
}
@media (min-width: 40rem) {
  .toasts {
    align-items: flex-end;
  }
  .toasts .alert {
    width: min(26rem, 100%);
  }
}
.toasts .alert {
  pointer-events: auto;
  background-color: var(--paper-raised);
  border-color: var(--rule-strong);
}

.tally {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.12em 0.5em;
  background-color: var(--sun);
  border: 2px solid var(--pop-ink);
  border-radius: var(--radius-pill);
  color: var(--pop-ink);
  line-height: 1.1;
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem var(--space-3);
  border: var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--positive {
  border-color: var(--positive);
  color: var(--positive);
}

.badge--caution {
  border-color: var(--caution);
  color: var(--caution);
}

.badge--critical {
  border-color: var(--critical);
  color: var(--critical);
}

.badge--quiet {
  border-color: var(--rule);
  color: var(--ink-tertiary);
}

.badge--accent {
  border-color: var(--accent);
  color: var(--accent);
}

.masthead {
  background-color: var(--paper);
}

.masthead__inner {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  padding-block: var(--space-4);
}
@media (min-width: 40rem) {
  .masthead__inner {
    gap: var(--space-4);
  }
}

.masthead__brand,
.masthead__link {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-size: var(--text-md);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 40rem) {
  .masthead__brand,
  .masthead__link {
    font-size: var(--text-lg);
  }
}
.masthead__brand:hover,
.masthead__link:hover {
  color: var(--accent);
}

.masthead__brand {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.masthead__link {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.masthead__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.masthead__link[aria-expanded=true] {
  color: var(--accent);
}

.masthead__actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
}
@media (min-width: 40rem) {
  .masthead__actions {
    gap: var(--space-5);
  }
}

.nav-link {
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  text-decoration: none;
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
}
.nav-link:hover {
  color: var(--ink);
}
.nav-link[aria-current=page] {
  color: var(--ink);
  font-weight: var(--weight-bold);
  border-bottom-color: var(--ink);
}

.subnav {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  overflow-x: auto;
  margin-bottom: var(--space-6);
  border-bottom: var(--border);
}
.subnav .nav-link {
  padding-block: var(--space-3);
  white-space: nowrap;
  margin-bottom: -1px;
}

.footer {
  margin-top: var(--space-9);
  padding-block: var(--space-6);
  border-top: var(--border);
  font-size: var(--text-sm);
  color: var(--ink-tertiary);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__links a {
  text-decoration: none;
}
.footer__links a:hover {
  text-decoration: underline;
}

.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 70;
  background-color: var(--critical);
  color: #ffffff;
}
.impersonation-banner__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
}
.impersonation-banner a, .impersonation-banner button {
  color: #ffffff;
  border-color: currentColor;
}
.impersonation-banner .btn:hover {
  background-color: #ffffff;
  color: var(--critical);
}

.dropdown {
  position: relative;
}

.dropdown__menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 13rem;
  padding: var(--space-2) 0;
  background-color: var(--paper-raised);
  border: var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.dropdown__menu[hidden] {
  display: none;
}

.dropdown__menu--left {
  right: auto;
  left: 0;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.dropdown__item:hover {
  background-color: var(--sun);
  color: var(--pop-ink);
}
.dropdown__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  outline-offset: -2px;
}
.dropdown__item[aria-current=true], .dropdown__item[aria-current=page] {
  font-weight: var(--weight-bold);
}

.dropdown__item--danger {
  color: var(--critical);
}

.dropdown__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  display: block;
  padding: var(--space-2) var(--space-4);
}

.dropdown__divider {
  height: 0;
  margin: var(--space-2) 0;
  border: 0;
  border-top: var(--border);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-5);
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.45);
}

.modal[hidden] {
  display: none;
}

.modal__panel {
  width: 100%;
  max-width: var(--width-narrow);
  margin-block: auto;
  padding: var(--space-6);
  background-color: var(--paper);
  border: var(--border-strong);
  border-radius: var(--radius-lg);
}

.modal__header {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: var(--border);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.modal__close {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-tertiary);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover {
  color: var(--ink);
}
.modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.confirm {
  width: calc(100% - var(--space-5) * 2);
  max-width: var(--width-narrow);
  padding: 0;
  background-color: var(--paper);
  border: var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--ink);
}
.confirm::backdrop {
  background-color: rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
  .confirm[open] {
    animation: confirm-pop 260ms var(--spring);
  }
}

.confirm__panel {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
}

.confirm__message {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

@keyframes confirm-pop {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tabs__list {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  border-bottom: var(--border);
  margin-bottom: var(--space-5);
}

.tabs__tab {
  padding: var(--space-3) 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
}
.tabs__tab:hover {
  color: var(--ink);
}
.tabs__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tabs__tab[aria-selected=true], .tabs__tab[aria-current=page] {
  color: var(--ink);
  font-weight: var(--weight-bold);
  border-bottom-color: var(--ink);
}

.tabs__panel[hidden] {
  display: none;
}

.rich-text {
  color: var(--ink);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}
.rich-text > * + * {
  margin-top: var(--space-3);
}
.rich-text h1, .rich-text h2, .rich-text h3 {
  margin-top: var(--space-5);
  color: var(--ink);
  line-height: var(--leading-tight);
}
.rich-text h1 {
  font-size: var(--text-2xl);
}
.rich-text h2 {
  font-size: var(--text-xl);
}
.rich-text h3 {
  font-size: var(--text-lg);
}
.rich-text > h1:first-child, .rich-text > h2:first-child, .rich-text > h3:first-child {
  margin-top: 0;
}
.rich-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.rich-text code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
  background-color: var(--paper-sunken);
  border: var(--border);
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.rich-text pre {
  padding: var(--space-4);
  overflow-x: auto;
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--paper-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  tab-size: 2;
}
.rich-text pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}
.rich-text blockquote {
  padding-left: var(--space-4);
  border-left: 2px solid var(--rule-strong);
  color: var(--ink-secondary);
}
.rich-text ul, .rich-text ol {
  padding-left: var(--space-5);
}
.rich-text li + li {
  margin-top: var(--space-1);
}
.rich-text li > p {
  margin: 0;
}
.rich-text hr {
  border: 0;
  border-top: var(--border);
}
.rich-text img {
  display: block;
  max-width: 100%;
  border-radius: var(--radius);
}
.rich-text .tableWrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rich-text table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);
}
.rich-text table th, .rich-text table td {
  position: relative;
  min-width: 4rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border);
  text-align: left;
  vertical-align: top;
}
.rich-text table th > *, .rich-text table td > * {
  margin: 0;
}
.rich-text table th {
  background-color: var(--paper-sunken);
  font-weight: var(--weight-bold);
}
.rich-text table .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--accent-wash);
  pointer-events: none;
}
.rich-text [data-youtube-video] {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--paper-sunken);
}
.rich-text [data-youtube-video] iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.editor {
  position: relative;
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--paper-raised);
  transition: border-color var(--transition);
}
.editor:focus-within {
  border-color: var(--ink);
  border-width: 2px;
}

.editor__content {
  color: var(--ink);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}
.editor__content > * + * {
  margin-top: var(--space-3);
}
.editor__content h1, .editor__content h2, .editor__content h3 {
  margin-top: var(--space-5);
  color: var(--ink);
  line-height: var(--leading-tight);
}
.editor__content h1 {
  font-size: var(--text-2xl);
}
.editor__content h2 {
  font-size: var(--text-xl);
}
.editor__content h3 {
  font-size: var(--text-lg);
}
.editor__content > h1:first-child, .editor__content > h2:first-child, .editor__content > h3:first-child {
  margin-top: 0;
}
.editor__content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.editor__content code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
  background-color: var(--paper-sunken);
  border: var(--border);
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.editor__content pre {
  padding: var(--space-4);
  overflow-x: auto;
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--paper-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  tab-size: 2;
}
.editor__content pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}
.editor__content blockquote {
  padding-left: var(--space-4);
  border-left: 2px solid var(--rule-strong);
  color: var(--ink-secondary);
}
.editor__content ul, .editor__content ol {
  padding-left: var(--space-5);
}
.editor__content li + li {
  margin-top: var(--space-1);
}
.editor__content li > p {
  margin: 0;
}
.editor__content hr {
  border: 0;
  border-top: var(--border);
}
.editor__content img {
  display: block;
  max-width: 100%;
  border-radius: var(--radius);
}
.editor__content .tableWrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.editor__content table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);
}
.editor__content table th, .editor__content table td {
  position: relative;
  min-width: 4rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border);
  text-align: left;
  vertical-align: top;
}
.editor__content table th > *, .editor__content table td > * {
  margin: 0;
}
.editor__content table th {
  background-color: var(--paper-sunken);
  font-weight: var(--weight-bold);
}
.editor__content table .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--accent-wash);
  pointer-events: none;
}
.editor__content [data-youtube-video] {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--paper-sunken);
}
.editor__content [data-youtube-video] iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.editor__content {
  min-height: 22rem;
  padding: var(--space-3);
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.editor__content > .is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  color: var(--ink-tertiary);
  pointer-events: none;
}
.editor__content .ProseMirror-selectednode {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.editor__content .ProseMirror-gapcursor::after {
  border-top-color: var(--ink);
}

.editor-toolbar {
  position: fixed;
  z-index: 60;
  background-color: var(--paper-raised);
  border: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
}
.editor-toolbar[hidden] {
  display: none;
}

.editor-toolbar__group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.editor-toolbar__group[hidden] {
  display: none;
}

.editor-toolbar__divider {
  width: 1px;
  height: 1.25rem;
  margin: 0 var(--space-1);
  background-color: var(--rule);
}
.editor-toolbar__divider[hidden] {
  display: none;
}

.editor-toolbar__button,
.editor-toolbar__select {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 1.75rem;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.editor-toolbar__button:hover,
.editor-toolbar__select:hover {
  background-color: var(--paper-sunken);
  color: var(--ink);
}
.editor-toolbar__button:focus-visible,
.editor-toolbar__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  outline-offset: -2px;
}
.editor-toolbar__button[aria-pressed=true],
.editor-toolbar__select[aria-pressed=true] {
  background-color: var(--paper-sunken);
  color: var(--ink);
}
.editor-toolbar__button[hidden],
.editor-toolbar__select[hidden] {
  display: none;
}
.editor-toolbar__button svg,
.editor-toolbar__select svg {
  flex: none;
}

.editor-toolbar__button {
  width: 1.75rem;
  padding: 0;
  justify-content: center;
}

.editor-toolbar__button:has(.editor-toolbar__caption) {
  width: auto;
  padding: 0 var(--space-2);
}

.editor-toolbar__caption {
  font-size: var(--text-xs);
}

.editor-toolbar__select {
  padding-right: var(--space-1);
}

.editor-toolbar__language {
  height: 1.75rem;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
}
.editor-toolbar__language:hover {
  background-color: var(--paper-sunken);
}
.editor-toolbar__language[hidden] {
  display: none;
}

.editor-dropdown {
  position: relative;
}

.editor-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 61;
  min-width: 11rem;
  padding: var(--space-1);
  background-color: var(--paper-raised);
  border: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.editor-menu[hidden] {
  display: none;
}

.editor-menu__item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.4rem var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
}
.editor-menu__item:hover, .editor-menu__item[aria-selected=true] {
  background-color: var(--paper-sunken);
}
.editor-menu__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  outline-offset: -2px;
}
.editor-menu__item {
  padding-block: 0.3rem;
  font-size: var(--text-sm);
}

.editor-menu__icon {
  display: inline-flex;
  color: var(--ink-tertiary);
}

.editor-menu__check {
  display: none;
  color: var(--ink);
}

.editor-menu__item[aria-selected=true] .editor-menu__check {
  display: inline-flex;
}

.slash-menu {
  position: fixed;
  z-index: 60;
  background-color: var(--paper-raised);
  border: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  width: 17rem;
  max-height: min(24rem, 100vh - 2rem);
  padding: var(--space-2);
  overflow-y: auto;
}

.slash-menu__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--ink-tertiary);
}

.slash-menu__divider {
  height: 0;
  margin: var(--space-2) 0;
  border: 0;
  border-top: var(--border);
}

.slash-menu__item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.4rem var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
}
.slash-menu__item:hover, .slash-menu__item[aria-selected=true] {
  background-color: var(--paper-sunken);
}
.slash-menu__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  outline-offset: -2px;
}

.slash-menu__item--back {
  color: var(--ink-secondary);
}

.slash-menu__icon {
  display: inline-flex;
  color: var(--ink-tertiary);
}

.slash-menu__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slash-menu__chevron {
  display: inline-flex;
  color: var(--ink-tertiary);
}

.slash-menu__empty {
  padding: var(--space-3);
  color: var(--ink-tertiary);
  font-size: var(--text-sm);
}

.slash-menu__filter {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: var(--border);
  color: var(--ink-secondary);
  font-size: var(--text-sm);
}

.slash-menu__slash {
  color: var(--ink-tertiary);
}

.slash-menu__placeholder {
  color: var(--ink-tertiary);
}

.editor-popover {
  position: fixed;
  z-index: 60;
  background-color: var(--paper-raised);
  border: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  width: 20rem;
  max-width: calc(100vw - 1rem);
  padding: var(--space-3);
}
.editor-popover[hidden] {
  display: none;
}

.editor-popover__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: var(--space-2);
  color: var(--ink-tertiary);
}

.editor-popover__form {
  display: flex;
  gap: var(--space-2);
}
.editor-popover__form .input {
  flex: 1 1 auto;
  min-width: 0;
}

.editor-popover__form--stacked {
  flex-direction: column;
  align-items: flex-start;
}
.editor-popover__form--stacked .input {
  width: 100%;
}

.editor-popover__error {
  color: var(--critical);
  font-size: var(--text-sm);
}
.editor-popover__error[hidden] {
  display: none;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--border-strong);
}

.checklist-columns {
  display: none;
}
@media (min-width: 52rem) {
  .checklist-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem 4.5rem;
    column-gap: var(--space-5);
    padding: 0 0 var(--space-2) calc(calc(1rem + var(--space-2)) + 1.75rem + var(--space-4));
  }
}
.checklist-columns span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.checklist-columns span:last-child {
  text-align: right;
}

@media (min-width: 52rem) {
  .checklist-columns--starred {
    padding-right: calc(1.5rem + var(--space-4));
  }
}
.checklist__item {
  --first-line: calc(var(--text-lg) * var(--leading-snug));
  --headline: calc(var(--text-xs) * var(--leading-snug) + var(--space-1));
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-block: var(--space-4);
  border-bottom: var(--border);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .checklist__item {
    animation: checklist-drop-in 480ms var(--spring) both;
  }
  .checklist__item:nth-child(1) {
    animation-delay: 40ms;
  }
  .checklist__item:nth-child(2) {
    animation-delay: 80ms;
  }
  .checklist__item:nth-child(3) {
    animation-delay: 120ms;
  }
  .checklist__item:nth-child(4) {
    animation-delay: 160ms;
  }
  .checklist__item:nth-child(5) {
    animation-delay: 200ms;
  }
  .checklist__item:nth-child(6) {
    animation-delay: 240ms;
  }
  .checklist__item:nth-child(7) {
    animation-delay: 280ms;
  }
  .checklist__item:nth-child(8) {
    animation-delay: 320ms;
  }
}

.checklist__form {
  flex: none;
}

.checklist__handle {
  flex: none;
  display: grid;
  place-items: center;
  width: 1rem;
  height: var(--first-line);
  margin-top: var(--headline);
  margin-right: calc(var(--space-2) - var(--space-4));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-tertiary);
  cursor: grab;
  touch-action: none;
  visibility: hidden;
}
.checklist__handle svg {
  width: 0.625rem;
  fill: currentColor;
}
.checklist__handle:hover {
  color: var(--ink);
}
.checklist__handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--ink);
}

.checklist.is-sortable .checklist__handle {
  visibility: visible;
}

.checklist__item.is-dragging {
  background-color: var(--paper-sunken);
}
.checklist__item.is-dragging .checklist__handle {
  color: var(--accent);
  cursor: grabbing;
}

.checklist__item.is-settled {
  animation: none;
}

.checklist__details {
  flex: 1;
  min-width: 0;
}

.checklist__star-form {
  flex: none;
}

.checklist__star {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: var(--first-line);
  margin-top: var(--headline);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-tertiary);
  cursor: pointer;
  transition: color 160ms ease-out, transform 160ms var(--spring);
}
.checklist__star svg {
  width: 1.5rem;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.checklist__star:hover {
  color: var(--ink);
  transform: rotate(-8deg) scale(1.12);
}
.checklist__star:active {
  transform: scale(0.88);
}
.checklist__star:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--ink);
}
.checklist__star[aria-pressed=true] {
  color: var(--ink);
}
.checklist__star[aria-pressed=true] svg {
  fill: var(--sun);
}

.checklist__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "project project" "title title" "from age";
  gap: var(--space-1) var(--space-3);
  align-items: center;
  flex: 1;
  min-width: 0;
  list-style: none;
  cursor: pointer;
}
@media (min-width: 52rem) {
  .checklist__summary {
    grid-template-columns: minmax(0, 1fr) 7rem 4.5rem;
    grid-template-areas: "project . ." "title from age";
    column-gap: var(--space-5);
    align-items: start;
  }
}
.checklist__summary::-webkit-details-marker {
  display: none;
}
.checklist__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

summary.checklist__summary:hover .checklist__title,
.checklist__details[open] .checklist__title {
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 0.22em;
}

.checklist__title {
  grid-area: title;
  justify-self: start;
  position: relative;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-decoration: none;
  transition: color 300ms ease-out 200ms;
}
.checklist__title::after {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: 55%;
  height: 2px;
  background-color: var(--accent);
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left center;
  transition: transform 280ms ease-out 140ms;
}

.checklist__project {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  grid-area: project;
  min-width: 0;
  line-height: var(--leading-snug);
  color: var(--ink-secondary);
}

.checklist__from,
.checklist__age {
  display: flex;
  align-items: center;
}
@media (min-width: 52rem) {
  .checklist__from,
  .checklist__age {
    min-height: var(--first-line);
  }
}

.checklist__from {
  grid-area: from;
}

.checklist__age {
  grid-area: age;
  font-size: var(--text-sm);
  color: var(--ink-tertiary);
}
@media (min-width: 52rem) {
  .checklist__age {
    justify-content: flex-end;
  }
}
.checklist__age.is-quiet {
  color: var(--caution);
}
.checklist__age.is-quiet::before {
  content: "zzz";
  margin-right: var(--space-1);
  letter-spacing: var(--tracking-wide);
}
@media (prefers-reduced-motion: no-preference) {
  .checklist__age.is-quiet::before {
    display: inline-block;
    animation: checklist-snore 2.4s ease-in-out infinite;
  }
}

.checklist__panel {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  padding-block: var(--space-4) var(--space-2);
  font-size: var(--text-base);
  color: var(--ink-secondary);
}
@media (prefers-reduced-motion: no-preference) {
  .checklist__panel {
    animation: checklist-unfold 260ms ease-out;
  }
}

.checklist__facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-5);
  margin: 0;
}
.checklist__facts dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  line-height: var(--leading-body);
}
.checklist__facts dd {
  margin: 0;
}

.checklist__picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.checklist__picker .select {
  width: auto;
  max-width: 100%;
  padding-block: var(--space-1);
  font-size: var(--text-sm);
}

.checklist__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.checklist__item.is-checked .checklist__title,
.checklist__item.is-done .checklist__title {
  color: var(--ink-tertiary);
}
.checklist__item.is-checked .checklist__title::after,
.checklist__item.is-done .checklist__title::after {
  transform: scaleX(1) rotate(-1deg);
}

.checklist--done .checklist__item {
  --first-line: calc(var(--text-md) * var(--leading-snug));
  padding-block: var(--space-3);
  padding-left: calc(1rem + var(--space-2));
}
.checklist--done .checklist__summary {
  cursor: auto;
}
.checklist--done .checklist__title {
  font-size: var(--text-md);
  text-decoration: line-through var(--accent);
}
.checklist--done .checklist__title:hover {
  color: var(--ink);
}
.checklist--done .checklist__title::after {
  content: none;
}

.checkbox {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin-top: calc(var(--headline, 0px) + (var(--first-line, 1.75rem) - 1.75rem) / 2);
  background-color: transparent;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 160ms ease-out, transform 160ms var(--spring);
}
.checkbox:hover {
  transform: rotate(-4deg) scale(1.06);
}
.checkbox:active {
  transform: scale(0.88);
}
.checkbox:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.checkbox__tick {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 260ms ease-out, opacity 60ms;
}

.checkbox:hover {
  background-color: var(--leaf);
  border-color: var(--pop-ink);
  color: var(--pop-ink);
}

.checkbox:hover .checkbox__tick {
  stroke-dashoffset: 0.7;
  opacity: 0.5;
}

.is-checked .checkbox .checkbox__tick,
.is-done .checkbox .checkbox__tick {
  stroke-dashoffset: 0;
  opacity: 1;
}

.is-checked .checkbox {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .is-checked .checkbox {
    animation: checklist-squish 420ms var(--spring);
  }
}

.source {
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  white-space: nowrap;
}

.checklist-empty {
  padding: var(--space-8) var(--space-5);
  border-bottom: var(--border);
  text-align: center;
  color: var(--ink-secondary);
}

.checklist-empty__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-block: var(--space-3) var(--space-2);
  font-size: var(--text-xl);
  color: var(--ink);
}

.checklist-empty__art {
  font-size: var(--text-xl);
  color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .checklist-empty__art {
    animation: checklist-twinkle 3s ease-in-out infinite;
  }
}

.checklist:has(.checklist__item) + .checklist-empty {
  display: none;
}

.quick-add {
  margin-bottom: var(--space-7);
}

.quick-add__row {
  --field: calc(var(--text-lg) + var(--space-6));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

.quick-add:not(.has-voice) .quick-add__voice-hint {
  display: none;
}

@media (max-width: 51.99rem) {
  .quick-add__keys {
    display: none;
  }
}

.quick-add__input {
  flex: 1 1 100%;
  min-width: 0;
  height: var(--field);
  padding: 0 var(--space-5);
  background-color: var(--paper-raised);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}
.quick-add__input:hover {
  border-color: var(--ink);
}
.quick-add__input:focus {
  border-color: var(--accent);
  box-shadow: none;
}
@media (min-width: 40rem) {
  .quick-add__input {
    flex: 1;
  }
}

.quick-add__row .btn {
  height: var(--field);
}

.quick-add__row .btn--primary {
  padding-inline: var(--space-6);
  font-size: var(--text-base);
}

.quick-add__mic {
  flex: none;
  width: var(--field);
  padding: 0;
}
.quick-add__mic svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.quick-add__mic.is-listening {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  outline: 2px solid var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .quick-add__mic.is-listening {
    animation: checklist-listening 1.1s ease-out infinite;
  }
}

.quick-add__hint {
  margin-top: var(--space-2);
  padding-inline: var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-tertiary);
}

.cheer {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 60;
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-3) var(--space-5);
  background-color: var(--sun);
  border: 2px solid var(--pop-ink);
  border-radius: var(--radius-pill);
  color: var(--pop-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 1.5rem) rotate(-2deg) scale(0.9);
  transition: opacity 200ms ease-out, transform 360ms var(--spring);
}
.cheer.is-showing {
  opacity: 1;
  transform: translate(-50%, 0) rotate(-2deg) scale(1);
}
.cheer:empty {
  display: none;
}

.confetti {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
}

.confetti__piece {
  position: absolute;
  display: block;
  line-height: 1;
  will-change: transform, opacity;
}

.confetti__piece--square {
  width: 0.5rem;
  height: 0.5rem;
  background-color: currentColor;
  border-radius: var(--radius-sm);
}

.confetti__piece--strip {
  width: 0.25rem;
  height: 0.8rem;
  background-color: currentColor;
  border-radius: var(--radius-pill);
}

.confetti__piece--star {
  font-size: var(--text-md);
}

.confetti__piece--accent {
  color: var(--accent);
}

.confetti__piece--positive {
  color: var(--positive);
}

.confetti__piece--caution {
  color: var(--caution);
}

.confetti__piece--sun {
  color: var(--sun);
}

.confetti__piece--sky {
  color: var(--sky);
}

.confetti__piece--pink {
  color: var(--pink);
}

.confetti__piece--leaf {
  color: var(--leaf);
}

.confetti__piece--lilac {
  color: var(--lilac);
}

@keyframes checklist-drop-in {
  from {
    opacity: 0;
    transform: translateY(-0.75rem) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes checklist-unfold {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes checklist-squish {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.75, 0.85) rotate(-6deg);
  }
  65% {
    transform: scale(1.2) rotate(4deg);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes checklist-snore {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-2px);
    opacity: 1;
  }
}
@keyframes checklist-twinkle {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}
@keyframes checklist-listening {
  from {
    outline-offset: 0;
    outline-color: var(--accent);
  }
  to {
    outline-offset: 0.6rem;
    outline-color: transparent;
  }
}
.project-tag {
  --dot: var(--paper-sunken);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
  color: inherit;
  text-decoration: none;
}
.project-tag::before {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: var(--space-2);
  vertical-align: 0.05em;
  border: 1px solid var(--pop-ink);
  border-radius: 50%;
  background-color: var(--dot);
}

a.project-tag:hover {
  color: var(--ink);
  text-decoration: underline;
}

.project-tag--sun {
  --dot: var(--sun);
}

.project-tag--sky {
  --dot: var(--sky);
}

.project-tag--pink {
  --dot: var(--pink);
}

.project-tag--leaf {
  --dot: var(--leaf);
}

.project-tag--lilac {
  --dot: var(--lilac);
}

.project-tag--tangerine {
  --dot: var(--tangerine);
}

.project-tag--teal {
  --dot: var(--teal);
}

.project-tag--coral {
  --dot: var(--coral);
}

.project-tag--cobalt {
  --dot: var(--cobalt);
}

.project-tag--lime {
  --dot: var(--lime);
}

.project-tag--orchid {
  --dot: var(--orchid);
}

.project-tag--sand {
  --dot: var(--sand);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.swatch {
  --dot: var(--paper-sunken);
  position: relative;
  display: block;
  width: var(--space-6);
  height: var(--space-6);
  border: 2px solid var(--pop-ink);
  border-radius: 50%;
  background-color: var(--dot);
  cursor: pointer;
  transition: transform 160ms var(--spring);
}
.swatch:hover {
  transform: scale(1.1);
}
.swatch:has(:checked) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.swatch:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  outline-offset: 3px;
}

.swatch__control {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.swatch--sun {
  --dot: var(--sun);
}

.swatch--sky {
  --dot: var(--sky);
}

.swatch--pink {
  --dot: var(--pink);
}

.swatch--leaf {
  --dot: var(--leaf);
}

.swatch--lilac {
  --dot: var(--lilac);
}

.swatch--tangerine {
  --dot: var(--tangerine);
}

.swatch--teal {
  --dot: var(--teal);
}

.swatch--coral {
  --dot: var(--coral);
}

.swatch--cobalt {
  --dot: var(--cobalt);
}

.swatch--lime {
  --dot: var(--lime);
}

.swatch--orchid {
  --dot: var(--orchid);
}

.swatch--sand {
  --dot: var(--sand);
}

.today .page-header {
  align-items: flex-end;
  padding-bottom: 0;
  margin-bottom: var(--space-6);
  border-bottom: 0;
}
.today .page-header h1 {
  font-size: var(--text-3xl);
}
.today .page-header .eyebrow {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background-color: var(--sky);
  border-radius: var(--radius-pill);
  color: var(--pop-ink);
}

.today__summary {
  max-width: 26rem;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--ink-secondary);
  text-wrap: balance;
}
@media (min-width: 52rem) {
  .today__summary {
    padding-bottom: var(--space-2);
    text-align: right;
  }
}

.today .quick-add {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: var(--space-8);
  padding-block: var(--space-3);
  background-color: var(--paper);
}

.today__section + .today__section {
  margin-top: var(--space-9);
}

.priorities:not(:has(.checklist__item)) {
  display: none;
}

.priorities:not(:has(.checklist__item)) + .today__section {
  margin-top: 0;
}

.today:has(.priorities .checklist__item) .checklist-empty {
  display: none;
}

.today__section:not(:has(.checklist__item)) .checklist-columns {
  display: none;
}

.today__views {
  margin-bottom: var(--space-5);
}

.task-group + .task-group {
  margin-top: var(--space-7);
}

.task-group:not(:has(.checklist__item)) {
  display: none;
}

.task-group__head {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.task-groups .checklist__item {
  --headline: 0px;
}
.task-groups .checklist__project {
  display: none;
}
.task-groups .checklist__summary {
  grid-template-areas: "title title" "from age";
}
@media (min-width: 52rem) {
  .task-groups .checklist__summary {
    grid-template-areas: "title from age";
  }
}

.task-groups:has(.checklist__item) + .checklist-empty {
  display: none;
}

.today__head {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.today__head h2 {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-xl);
}

.today__sound {
  font-size: var(--text-sm);
}

.checklist--done:not(:has(.checklist__item)) {
  display: none;
}

.today__empty {
  padding-block: var(--space-4);
  border-top: var(--border-strong);
  border-bottom: var(--border);
  color: var(--ink-tertiary);
}

.checklist--done:has(.checklist__item) + .today__empty {
  display: none;
}

.today__more {
  margin-top: var(--space-6);
}

.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-8);
}

.auth__panel {
  width: 100%;
  max-width: 26rem;
}

.auth__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.auth__subtitle {
  color: var(--ink-secondary);
  margin-bottom: var(--space-6);
}

.auth__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border);
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}

.auth__google-form {
  display: block;
}

.auth__google-mark {
  flex: none;
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-secondary);
}
.auth__divider::before, .auth__divider::after {
  content: "";
  flex: 1;
  border-top: var(--border);
}

.hero {
  padding-block: var(--space-9) var(--space-8);
  border-bottom: var(--border-strong);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-size: var(--text-3xl);
  max-width: 18ch;
}

.hero__lede {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--ink-secondary);
  max-width: 52ch;
}

.hero__actions {
  margin-top: var(--space-6);
}

.feature-list {
  counter-reset: feature;
  display: grid;
  gap: 0;
}
@media (min-width: 52rem) {
  .feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feature {
  counter-increment: feature;
  padding: var(--space-6) var(--space-5) var(--space-6) 0;
  border-top: var(--border);
}
@media (min-width: 52rem) {
  .feature {
    padding-right: var(--space-6);
    border-top: var(--border-strong);
  }
}
.feature::before {
  content: counter(feature, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-tertiary);
}
.feature__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.feature__body {
  color: var(--ink-secondary);
}

.price-grid {
  display: grid;
  gap: 0;
  border-top: var(--border-strong);
}
@media (min-width: 52rem) {
  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.price {
  padding: var(--space-6) var(--space-5);
  border-bottom: var(--border);
}
@media (min-width: 52rem) {
  .price {
    border-bottom: 0;
  }
  .price:not(:last-child) {
    border-right: var(--border);
  }
  .price {
    padding-left: 0;
  }
  .price:not(:first-child) {
    padding-left: var(--space-6);
  }
}
.price__name {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: var(--space-4);
}
.price__amount {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-size: var(--text-2xl);
}
.price__unit {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-tertiary);
}
.price__features {
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.price__features li {
  padding: var(--space-2) 0;
  border-top: var(--border);
  color: var(--ink-secondary);
}

.admin-bar {
  background-color: var(--ink);
  color: var(--paper);
}
.admin-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  min-height: 3rem;
  padding-block: var(--space-2);
}
.admin-bar__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  color: var(--paper);
  margin-right: auto;
}
.admin-bar a {
  color: var(--paper);
  font-size: var(--text-sm);
  text-decoration: none;
  opacity: 0.7;
}
.admin-bar a:hover, .admin-bar a[aria-current=page] {
  opacity: 1;
}
.admin-bar a[aria-current=page] {
  font-weight: var(--weight-bold);
}

.admin-stats {
  display: grid;
  gap: 0;
  border-top: var(--border-strong);
  border-bottom: var(--border);
  margin-bottom: var(--space-6);
}
@media (min-width: 40rem) {
  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 68rem) {
  .admin-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.admin-stats .stat {
  padding: var(--space-5) var(--space-4) var(--space-5) 0;
}
@media (min-width: 40rem) {
  .admin-stats .stat:not(:last-child) {
    border-right: var(--border);
  }
  .admin-stats .stat {
    padding-left: var(--space-4);
  }
  .admin-stats .stat:first-child {
    padding-left: 0;
  }
}

.mailer-preview {
  max-width: 40rem;
  margin-inline: auto;
}

.sg-laws {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.sg-laws li {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.sg-laws li::before {
  content: "×";
  margin-right: var(--space-2);
  color: var(--accent);
  font-weight: var(--weight-display);
}
.sg-laws li.is-yes::before {
  content: "→";
}

.sg-section {
  padding-block: var(--space-7);
  border-bottom: var(--border);
}

.sg-section__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
  border-bottom: var(--border);
}

.sg-section__note {
  max-width: 34rem;
  font-size: var(--text-sm);
  color: var(--ink-tertiary);
}

.sg-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  display: block;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: var(--border);
}

.sg-sub:not(:first-child) {
  margin-top: var(--space-7);
}

.sg-swatch {
  overflow: hidden;
  background-color: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius);
}

.sg-swatch__chip {
  height: 5.5rem;
  border-bottom: var(--border);
}

.sg-swatch__chip--washed {
  border-bottom-width: 3px;
}

.sg-swatch__meta {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3) 0;
}

.sg-swatch__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.sg-swatch__use {
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-tertiary);
}

.sg-type {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: var(--border);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) {
  .sg-type {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: baseline;
  }
}

.sg-type__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-tertiary);
}
.sg-type__label b {
  display: block;
  color: var(--ink);
  font-weight: var(--weight-normal);
}

.sg-type__demo {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sg-ramp {
  display: grid;
  gap: var(--space-2);
}

.sg-ramp__row {
  display: grid;
  grid-template-columns: 8rem 4.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-tertiary);
}
.sg-ramp__row b {
  color: var(--ink);
  font-weight: var(--weight-normal);
}
.sg-ramp__row span {
  font-variant-numeric: tabular-nums;
}

.sg-ramp__bar {
  height: 0.75rem;
  max-width: 100%;
  background-color: var(--accent);
}

.sg-ramp__bar--rule {
  height: 0.4rem;
  background-color: var(--ink-tertiary);
}

.sg-corner {
  width: 4rem;
  height: 2.5rem;
  background-color: var(--sun);
  border: 2px solid var(--pop-ink);
}

.sg-spec {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--border);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) {
  .sg-spec {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--space-6);
    align-items: start;
  }
}
.sg-spec > * {
  min-width: 0;
}

.sg-spec__class {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  word-break: break-word;
}

.sg-spec__note {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--ink-tertiary);
}