/* The only stylesheet of the app. */

@import url("/static/layout.css");

/********************** DESIGN SYSTEM **********************/

@font-face {
  font-family: "Archivo";
  src: url("/static/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/static/noto-naskh-arabic.woff") format("woff");
  font-display: swap;
}

:root {
  /* Colors */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;

  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-button-border: #000;

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  /* The middle tier of the payment colours: a claim is neither red nor green. */
  --color-warn-100: oklch(0.97 0.025 68);
  --color-warn-500: oklch(0.72 0.15 68);
  --color-warn-700: oklch(0.48 0.12 68);

  --color-poster-muted: color-mix(in srgb, var(--color-bg) 60%, transparent);

  --color-poster-divider: color-mix(in srgb, var(--color-bg) 50%, transparent);

  /* Typography */
  /* A keyframe cannot say inline-start, so it multiplies by this. */
  --direction: 1;

  /* Arabic letters join: any tracking pulls the joins apart. */
  --tracking: 1;

  --font-heading: "Archivo", "Noto Naskh Arabic", system-ui, sans-serif;
  --font-heading-weight: 800;

  --font-body: "Archivo", "Noto Naskh Arabic", system-ui, sans-serif;
  --font-body-weight: 400;

  --font-size-body: 15px;
  --font-size-h1: 42px;
  --font-size-input: 14px;
  --font-size-button: 14px;
  --font-size-label: 12px;
  --font-size-table: 14px;

  --line-height-body: 1.55;
  --line-height-h1: 1.12;
  --line-height-button: 1.2;
  --line-height-textarea: 1.5;
  --line-height-user: 1.2;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --space-input-y: 6px;
  --space-input-x: 10px;
  --space-button-gap: 6px;
  --space-button-x: 14.4px;
  --space-label-bottom: 5px;

  /* Sizes */
  --size-input-height: 36px;
  --size-select-height: 38px;
  --size-select-min-width: 200px;
  --size-textarea-min-height: 90px;
  --size-table-min-width: 1000px;

  --size-header-height: 80px;

  /* The avatar, and the sign-out button beside it. */
  --size-avatar: 32px;

  /* The table's own header row, and the bar that covers it. */
  --size-table-head: 52px;

  /* The page column: 1336px centred, never tighter than the gutter. */
  --space-page-inline: max(var(--space-8), calc((100% - 1336px) / 2));

  /* The mockup is a 1400px canvas with 32px of padding inside: 1336px of
     content. Every page and the header bar centre on it. */

  /* Borders and radius */
  --border-width: 1px;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* Shadows */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);

  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);

  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/********************** BASE **********************/

/* Keeps padding and borders inside the declared element size. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Removes browser default spacing and applies the design system. */
:root[dir="rtl"] {
  --direction: -1;
  --tracking: 0;

  --font-heading: "Noto Naskh Arabic", "Archivo", system-ui, sans-serif;
  --font-body: "Noto Naskh Arabic", "Archivo", system-ui, sans-serif;
}

/* It holds Arabic even on an English page, where the tracking is for Latin. */
.language-btn {
  letter-spacing: normal;
}

/* Without the isolate, '9123 4567' and '2026-07' come out reversed inside an
   Arabic line. Same rule as the invoice (public/invoice.css). */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-body-weight);
  line-height: var(--line-height-body);
}

/* Forms use the full width available to them. */
form {
  width: 100%;
}

/* Keeps media inside their containers. */
img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

/* Base link styling. */
a {
  padding-inline: var(--space-1);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}

/* Base paragraph styling. */
p {
  max-width: 54ch;
  margin: 0 0 var(--space-6);
  color: var(--color-neutral-700);
}

/* Base heading styling. */
h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: calc(-0.02em * var(--tracking));
}

/* Prevents long headings from overflowing their containers. */
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Main content container. The mockup caps the page at 1400px: 1336px of
   content between the two 32px paddings. A page that runs edge to edge opts
   out with `max-width: none` (see login.css). */
.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: var(--space-8);
}

/* Generic navigation layout. */
.nav {
  display: flex;
}

/********************** PAGE TRANSITIONS **********************/

/* Every page cross-fades into the next. Both ends of a navigation must opt in,
   so it lives here rather than in a page stylesheet. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 220ms;
  }
}

/********************** FORMS **********************/

/* Shared input and select styling. */
input,
select {
  width: 100%;
  min-height: var(--size-input-height);
  padding: var(--space-input-y) var(--space-input-x);
  font: inherit;
  font-size: var(--font-size-input);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-divider);
  border-radius: var(--radius-md);
}

/* Select-specific dimensions. */
select {
  min-width: var(--size-select-min-width);
  height: var(--size-select-height);
}

/* Textarea-specific dimensions. */
textarea {
  width: 100%;
  min-height: var(--size-textarea-min-height);
  padding: var(--space-input-y) var(--space-input-x);
  font: inherit;
  font-size: var(--font-size-input);
  line-height: var(--line-height-textarea);
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-divider);
  border-radius: var(--radius-md);
  resize: vertical;
}

/* Labels appear above their form fields. */
label {
  display: block;
  margin-bottom: var(--space-label-bottom);
  font-size: var(--font-size-label);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/********************** BUTTONS **********************/

/* Base button styling. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-button-gap);
  padding: var(--space-2) var(--space-button-x);
  font-family: var(--font-heading);
  font-size: var(--font-size-button);
  font-weight: var(--font-heading-weight);
  line-height: var(--line-height-button);
  color: var(--color-text);
  background: transparent;
  border: var(--border-width) solid var(--color-button-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* Primary button uses the accent color. */
.btn-primary {
  color: var(--color-bg);
  background: var(--color-accent);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  background: var(--color-accent-600);
}

.btn-primary:active {
  background: var(--color-accent-700);
}

/* Secondary action: outlined instead of filled. */
.btn-secondary {
  border-color: var(--color-divider);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.btn-secondary:active {
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

/* A bordered action, sized to sit beside an input: the search button and the
   row actions of a table. */
.btn-outline {
  min-height: var(--size-select-height);
  padding: 0 var(--space-4);
  background: transparent;
  border: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* The same button carrying the accent, for the one action a row invites. */
.btn-accent {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-accent:hover {
  background: var(--color-accent-100);
}

/* Tertiary action: text only, in the accent colour. */
.btn-ghost {
  padding-inline: var(--space-1);
  color: var(--color-accent);
  border-color: transparent;
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.btn-ghost:active {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* Makes the button fill the available form width. */
.btn-block {
  width: 100%;
  margin-top: 0;
  justify-content: flex-start;
  text-align: start;
}

/* Keeps the label above the loading bar */
.button-label {
  position: relative;
  z-index: 2;
}

/* Indeterminate: the browser never says how far along the request is. */
.button-progress {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: rgba(243, 242, 242, 0.9);
  pointer-events: none;
}

/* Plan status toggle */
.status-toggle {
  display: flex;
  height: var(--size-select-height);
  border: 1px solid var(--color-divider);
}

.status-toggle-button {
  background: transparent;
  color: var(--color-text);
  border: 0;
  border-inline-end: 1px solid var(--color-divider);
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  height: var(--size-select-height);
  line-height: inherit;
}

.status-toggle-button:last-child {
  border-inline-end: 0;
}

.status-toggle-button.is-active {
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 800;
}

.is-loading .button-progress {
  width: 40%;
  animation: button-sweep 900ms ease-in-out infinite;
}

@keyframes button-sweep {
  from {
    transform: translateX(calc(-100% * var(--direction)));
  }
  to {
    transform: translateX(calc(250% * var(--direction)));
  }
}

/* A submit already sent does not take a second click. */
button.is-loading {
  cursor: progress;
  opacity: 0.85;
}

/* Prevents the checkbox from inheriting normal text input dimensions. */
input[type="checkbox"] {
  width: auto;
  min-height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  accent-color: var(--color-accent);
  flex: 0 0 auto;
}

/********************** FORGOT PASSWORD **********************/

/********************** MENU **********************/

/* Small uppercase label above sections. */
.section-label {
  margin-bottom: var(--space-2);
  color: var(--color-neutral-600);
  font-size: 11px;
  letter-spacing: calc(0.1em * var(--tracking));
  text-transform: uppercase;
}

/************************************ TABLE & KPI ************************************/
/* Keeps the wide invoice table scrollable. */
[data-r="table-scroll"] {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

/* Creates a real gap between each table row. */
.table {
  min-width: var(--size-table-min-width);
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  width: 100%;
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Table header. */
.table thead {
  border-bottom: 2px solid var(--color-neutral-300);
}

/* Table header cells. Their height is pinned: the bulk bar covers the row
   exactly, and a taller font must not make the two drift apart. */
.table th {
  height: var(--size-table-head);
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: calc(0.08em * var(--tracking));
  text-transform: uppercase;
  font-weight: 800;
  text-align: start;
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}

/* Each row keeps the reference surface color. */
.table tbody tr {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

/* Main table cells. */
.table tbody td {
  padding: var(--space-4);
  vertical-align: middle;

  /* Regular table text is darker than the muted metadata. */
  color: var(--color-neutral-800);
  font-family: var(--font-body);
  font-size: var(--font-size-table);
  font-weight: var(--font-body-weight);
  line-height: 1.35;

  /* Subtle reference-style row divider. */
  border-top: 1px solid var(--color-neutral-300);
  border-bottom: 1px solid var(--color-divider);
}

/* Selected invoice row. */
.table tbody tr.is-selected {
  background: var(--color-accent-2-100);
}

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

.table-summary-text strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Primary values such as the kid name. */
.table tbody td strong {
  display: block;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--font-size-table);
  font-weight: var(--font-heading-weight);
  line-height: 1.25;
}

/* Secondary information such as group, phone and plan type. */
.table tbody td small {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-neutral-600);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--font-body-weight);
  line-height: 1.3;
}

/* Checkbox column stays compact. */
.table-check {
  width: 32px;
  padding: 0;
  vertical-align: middle;
}

/* Table checkbox size and alignment. */
.table-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--color-accent);
}

/* Aligns monetary values consistently. */
.table-amount {
  text-align: end;
  white-space: nowrap;
}

/* The header of a right-aligned column follows its cells. */
.table th.table-amount,
.table th.table-action {
  text-align: end;
}

/* Keeps action buttons compact. */
.table-action {
  width: 1%;
  white-space: nowrap;
}

/* Keeps action buttons on one line. */
.table-action .btn {
  white-space: nowrap;
}

/* Status label. */
.status {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  border: 1px solid var(--color-neutral-400);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: calc(0.02em * var(--tracking));
  text-transform: capitalize;
  white-space: nowrap;
}

/* Red unpaid, orange claimed, grey once settled: see specs/payments.md.
   Overdue is an unpaid invoice past its due date, so it carries the same red. */
.status[data-status="unpaid"],
.status[data-status="overdue"] {
  color: var(--color-accent-700);
  background: var(--color-accent-100);
  border-color: var(--color-accent);
}

.status[data-status="claimed"] {
  color: var(--color-warn-700);
  background: var(--color-warn-100);
  border-color: var(--color-warn-500);
}

.status[data-status="paid"],
.status[data-status="cancelled"] {
  color: var(--color-neutral-700);
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-400);
}

/* Keeps the reference row spacing on smaller screens. */
@media (max-width: 760px) {
  [data-r="table-scroll"] {
    overflow-x: auto;
  }
}

/* Shown in place of a list when it has nothing to show: no match for the
   search, or nothing yet at all. */
.empty {
  padding: 56px var(--space-1) 64px;
}

.empty-mark {
  width: var(--space-10);
  height: var(--space-1);
  margin-bottom: var(--space-5);
  background: var(--color-accent);
}

.empty-title {
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(-0.01em * var(--tracking));
}

.empty-hint {
  max-width: 46ch;
  font-size: 14px;
  color: var(--color-neutral-700);
}

/* Any paginated list uses it: one step back, the page, one step forward. */
.pager {
  display: flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--color-divider);
}

.pager-step,
.pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 0 var(--space-3);
  border-inline-end: 1px solid var(--color-divider);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.pager > :last-child {
  border-inline-end: 0;
}

.pager-page {
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* An end of the list: still shown, so the control keeps its shape. */
.pager-step.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Summary row below the filters. */
.table-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  /* justify-content: space-between;
  this makes the elements spread across the full width */
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
}

/* Invoice count text. */
.table-summary-text {
  color: var(--color-neutral-600);
  font-size: 13px;
  line-height: 1.4;
}

.border-bottom {
  width: 100%;
  border-bottom: 2px solid var(--color-divider);
}

/************************************ PANEL ************************************/

/* The panel a list opens over itself: the people directory and the plans
   catalogue both use it. What one of them adds on top stays in its own file. */

/* The list stays put behind the panel. The gutter is always reserved so
   locking the scroll does not shift the content sideways. */
body {
  scrollbar-gutter: stable;
}

body:has(.sheet:not([hidden])) {
  overflow: hidden;
}

/* Covers the list while the panel is open, and closes it when clicked. */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  padding: 0;
  background: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.sheet {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  z-index: 31;
  width: 560px;
  max-width: 100%;
  overflow-y: auto;
  background: var(--color-bg);
  border-inline-start: 2px solid var(--color-divider);
}

/* Stays in view while the panel scrolls. */
.sheet-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}

.sheet-title {
  font-size: 24px;
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(-0.02em * var(--tracking));
}

.sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  margin-inline-start: auto;
  padding: 0;
  color: var(--color-text);
  border: var(--border-width) solid var(--color-divider);
  text-decoration: none;
}

.sheet-close:hover {
  background: var(--color-neutral-200);
}

.sheet-error {
  padding: var(--space-3) var(--space-6);
  color: var(--color-accent-700);
  background: var(--color-accent-100);
  border-bottom: 2px solid var(--color-divider);
}

.sheet-section {
  padding: var(--space-6);
  border-bottom: 2px solid var(--color-divider);
}

/* The sticky action bar draws its own rule: two borders would stack here. */
.sheet-section:has(+ .sheet-actions) {
  border-bottom: 0;
}

/* The section label and its action sit on the same line. */
.sheet-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.sheet-section-head .section-label {
  margin: 0;
}

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

/* Keeps the pack-only numeric fields compact and side by side. */
.plan-pack-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 380px;
}

.plan-pack-fields .field {
  margin: 0;
}

.plan-pack-fields input {
  width: 100%;
  height: 36px;
  min-height: 36px;
}

.field-optional {
  color: var(--color-neutral-600);
}

@media (max-width: 767px) {
  .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 2px solid var(--color-divider);
  }

  .nav-organization {
    padding: 12px 20px 16px;
    color: var(--color-neutral-600);
    border-bottom: 1px solid var(--color-neutral-300);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    line-height: var(--line-height-body);
    letter-spacing: calc(0.1em * var(--tracking));
    text-transform: uppercase;
  }
}

/* Two radio buttons drawn as one two-part switch: the inputs are hidden and
   their labels carry the look. */
.segmented {
  display: flex;
  width: fit-content;
  border: var(--border-width) solid var(--color-divider);
}

/* width: auto undoes the 100% of the base input rule, which would make the
   hidden radio overflow the panel and add a horizontal scrollbar. */
.segmented-input {
  position: absolute;
  width: auto;
  opacity: 0;
  pointer-events: none;
}

.segmented-label {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: var(--font-heading-weight);
  color: var(--color-text);
  cursor: pointer;
}

.segmented-input:checked + .segmented-label {
  background: var(--color-text);
  color: var(--color-bg);
}

/* Keyboard focus lands on the hidden radio, so the label shows it. */
.segmented-input:focus-visible + .segmented-label {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* A retired plan someone still carries: a coach in the staff panel, a kid in
   the kid form. It is only drawn on those who have it — nobody can pick it up
   again. */
.plan-retired {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: calc(0.08em * var(--tracking));
  text-transform: uppercase;
  color: var(--color-neutral-600);
  white-space: nowrap;
}

/* Smaller type than a form button, same height: the page line-height. The
   button that takes the record out of the list — archive, retire, pause. */
.sheet-archive {
  padding: 7px 14px;
  font-size: 12px;
  line-height: inherit;
  white-space: nowrap;
  border-color: var(--color-divider);
}

.sheet-archive:hover {
  background: var(--color-neutral-200);
}

.sheet-archive-note {
  max-width: 60ch;
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-neutral-600);
}

/* Save stays reachable without scrolling back up. */
.sheet-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border-top: 2px solid var(--color-divider);
}

/* A link that has to read as the button next to it, down to its height. */
.sheet-cancel {
  padding: var(--space-2) var(--space-button-x);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--font-size-button);
  font-weight: var(--font-heading-weight);
  line-height: var(--line-height-button);
  border: var(--border-width) solid var(--color-divider);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.sheet-cancel:hover {
  background: var(--color-neutral-200);
}

.sheet-note {
  max-width: none;
  margin: 10px 0 0;
  font-size: var(--font-size-label);
  color: var(--color-neutral-600);
}

/* The transition opt-in is in the PAGE TRANSITIONS section above: here, only
   what the panel adds on top. */

.sheet {
  view-transition-name: sheet;
}

.sheet-scrim {
  view-transition-name: scrim;
}

/* The panel slides in from the edge it is docked to, and back out. :only-child
   restricts these to the panel appearing or disappearing: when it is on both
   pages, as after a refused form, the pair cross-fades in place instead. */
::view-transition-new(sheet):only-child {
  animation: sheet-in 220ms ease-out;
}

/* forwards: the transition outlives these 180ms (the root cross-fade runs for
   250ms), and without it the snapshot snaps back to its start and shows again
   until the transition ends. */
::view-transition-old(sheet):only-child {
  animation: sheet-out 180ms ease-in forwards;
}

::view-transition-new(scrim):only-child {
  animation: scrim-in 220ms ease-out;
}

::view-transition-old(scrim):only-child {
  animation: scrim-in 180ms ease-in reverse forwards;
}

@keyframes sheet-in {
  from {
    transform: translateX(calc(100% * var(--direction)));
  }
}

@keyframes sheet-out {
  to {
    transform: translateX(calc(100% * var(--direction)));
  }
}

@keyframes scrim-in {
  from {
    opacity: 0;
  }
}

/************************************ RESPONSIVE ************************************/
/* Tablet */
@media (max-width: 1023px) {
  .container {
    padding: var(--space-6);
  }
}