/* Metabee screens: "The Book" (docs/DESIGN.md, approved 2026-10-13).
   Every color, size and corner lives here once as a named value, so a later look change is mostly this file.
   Appearance follows the iPhone (Auto): paper when light, ink when dark. The login page is always ink. */

/* ------------------------------------------------------------ fonts (SIL Open Font License, served by the app) */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("fonts/BigShouldersDisplay.f57e7dcd566b.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "UnifrakturCook";
  src: url("fonts/UnifrakturCook-Bold.f1f39b8b4662.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* ------------------------------------------------------------ the values (DESIGN.md "Color", "Type", "Shapes") */

:root {
  /* Ink (dark) */
  --ink-bg: #0F1015;
  --ink-glow-top: #0F3038;
  --ink-glow-bottom: #1B2633;
  --ink-card: #1A1B22;
  --ink-border: rgba(244, 242, 238, 0.08);
  --ink-raised: #262731;
  --ink-inset: #17181E;
  --ink-text: #F4F2EE;
  --ink-text-2: #A6A3AD;
  --ink-text-3: #74727C;
  --ink-icon: #C8C5CE;
  --ink-divider: rgba(244, 242, 238, 0.08);
  --ink-primary: #F4F2EE;
  --ink-on-primary: #0F1015;
  --ink-secondary: #2A2B33;
  --ink-on-secondary: #F4F2EE;
  --ink-accent: #4FB3BF;
  --ink-accent-text: #A8E0E6;
  --ink-link: #8FD3DB;
  --ink-selected: rgba(79, 179, 191, 0.24);
  --ink-green: #4FD08A;
  --ink-amber: #F5B04A;
  --ink-amber-border: rgba(245, 176, 74, 0.5);
  --ink-red: #FF6B5E;
  --ink-red-border: rgba(255, 107, 94, 0.45);
  --ink-neutral: #C8C5CE;
  --ink-cobalt: #6E9BFF; /* calendar: consultation */
  --ink-held: #8E8A99; /* calendar: held, a dashed outline */
  --ink-glass: linear-gradient(180deg, rgba(58, 58, 72, 0.62) 0%, rgba(26, 27, 34, 0.48) 100%);
  --ink-glass-border: rgba(255, 255, 255, 0.14);
  --ink-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 16px 36px rgba(0, 0, 0, 0.55);

  /* Paper (light) */
  --paper-bg: #F4F4F7;
  --paper-glow-top: #D3E7EB;
  --paper-glow-bottom: #D9E5EE;
  --paper-card: #FFFFFF;
  --paper-border: rgba(20, 21, 27, 0.08);
  --paper-raised: #E3E2EA;
  --paper-inset: #ECEBF1;
  --paper-text: #14151B;
  --paper-text-2: #5E5B68;
  --paper-text-3: #75727E;
  --paper-icon: #3E3C46;
  --paper-divider: rgba(20, 21, 27, 0.08);
  --paper-primary: #14151B;
  --paper-on-primary: #F4F4F7;
  --paper-secondary: #E7E6EE;
  --paper-on-secondary: #14151B;
  --paper-accent: #1F5560;
  --paper-accent-text: #174249;
  --paper-link: #1F5560;
  --paper-selected: rgba(31, 85, 96, 0.14);
  --paper-green: #1C7A45;
  --paper-amber: #8A5300;
  --paper-amber-border: rgba(138, 83, 0, 0.45);
  --paper-red: #C8331F;
  --paper-red-border: rgba(200, 51, 31, 0.45);
  --paper-neutral: #3E3C46;
  --paper-cobalt: #2F5FD0;
  --paper-held: #8A8794;
  --paper-glass: rgba(255, 255, 255, 0.72);
  --paper-glass-border: rgba(20, 21, 27, 0.08);
  --paper-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px rgba(20, 21, 27, 0.14);

  /* Type */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-poster: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-wordmark: "UnifrakturCook", serif;
  --size-day: 54px;
  --size-title: 48px;
  --size-next-time: 64px;
  --size-row-time: 24px;
  --size-tile-count: 36px;
  --size-wordmark: 24px;
  --size-section: 17px;
  --size-name: 17px;
  --size-body: 15px;
  --size-meta: 14px;
  --size-label: 13px;
  --size-tag: 12px;

  /* Shapes and spacing */
  --side: 18px;
  --gap: 16px;
  --radius-card: 22px;
  --radius-large: 26px;
  --radius-field: 14px;
  --button-height: 44px;
  --row-height: 52px;
  --tabbar-height: 50px; /* icons only, like Instagram's (piece 17b; was 62 px) */
  --tabbar-side: 14px;
  --tabbar-lift: 10px;
  --press-scale: 0.97;
  --press-time: 160ms;

  /* Auto: paper when the iPhone is light */
  --bg: var(--paper-bg);
  --glow-top: var(--paper-glow-top);
  --glow-bottom: var(--paper-glow-bottom);
  --card: var(--paper-card);
  --border: var(--paper-border);
  --raised: var(--paper-raised);
  --inset: var(--paper-inset);
  --text: var(--paper-text);
  --text-2: var(--paper-text-2);
  --text-3: var(--paper-text-3);
  --icon: var(--paper-icon);
  --divider: var(--paper-divider);
  --primary: var(--paper-primary);
  --on-primary: var(--paper-on-primary);
  --secondary: var(--paper-secondary);
  --on-secondary: var(--paper-on-secondary);
  --accent: var(--paper-accent);
  --accent-text: var(--paper-accent-text);
  --link: var(--paper-link);
  --selected: var(--paper-selected);
  --green: var(--paper-green);
  --amber: var(--paper-amber);
  --amber-border: var(--paper-amber-border);
  --red: var(--paper-red);
  --red-border: var(--paper-red-border);
  --neutral: var(--paper-neutral);
  --cobalt: var(--paper-cobalt);
  --held: var(--paper-held);
  --glass: var(--paper-glass);
  --glass-border: var(--paper-glass-border);
  --glass-shadow: var(--paper-glass-shadow);
  color-scheme: light;
}

/* Auto: ink when the iPhone is dark. The same names, the ink values. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink-bg);
    --glow-top: var(--ink-glow-top);
    --glow-bottom: var(--ink-glow-bottom);
    --card: var(--ink-card);
    --border: var(--ink-border);
    --raised: var(--ink-raised);
    --inset: var(--ink-inset);
    --text: var(--ink-text);
    --text-2: var(--ink-text-2);
    --text-3: var(--ink-text-3);
    --icon: var(--ink-icon);
    --divider: var(--ink-divider);
    --primary: var(--ink-primary);
    --on-primary: var(--ink-on-primary);
    --secondary: var(--ink-secondary);
    --on-secondary: var(--ink-on-secondary);
    --accent: var(--ink-accent);
    --accent-text: var(--ink-accent-text);
    --link: var(--ink-link);
    --selected: var(--ink-selected);
    --green: var(--ink-green);
    --amber: var(--ink-amber);
    --amber-border: var(--ink-amber-border);
    --red: var(--ink-red);
    --red-border: var(--ink-red-border);
    --neutral: var(--ink-neutral);
    --cobalt: var(--ink-cobalt);
    --held: var(--ink-held);
    --glass: var(--ink-glass);
    --glass-border: var(--ink-glass-border);
    --glass-shadow: var(--ink-glass-shadow);
    color-scheme: dark;
  }
}

/* Appearance on More (piece 18a): Ink or Paper, whatever the iPhone's setting; Auto (no class) follows the iPhone. */
:root.look-ink {
  --bg: var(--ink-bg);
  --glow-top: var(--ink-glow-top);
  --glow-bottom: var(--ink-glow-bottom);
  --card: var(--ink-card);
  --border: var(--ink-border);
  --raised: var(--ink-raised);
  --inset: var(--ink-inset);
  --text: var(--ink-text);
  --text-2: var(--ink-text-2);
  --text-3: var(--ink-text-3);
  --icon: var(--ink-icon);
  --divider: var(--ink-divider);
  --primary: var(--ink-primary);
  --on-primary: var(--ink-on-primary);
  --secondary: var(--ink-secondary);
  --on-secondary: var(--ink-on-secondary);
  --accent: var(--ink-accent);
  --accent-text: var(--ink-accent-text);
  --link: var(--ink-link);
  --selected: var(--ink-selected);
  --green: var(--ink-green);
  --amber: var(--ink-amber);
  --amber-border: var(--ink-amber-border);
  --red: var(--ink-red);
  --red-border: var(--ink-red-border);
  --neutral: var(--ink-neutral);
  --cobalt: var(--ink-cobalt);
  --held: var(--ink-held);
  --glass: var(--ink-glass);
  --glass-border: var(--ink-glass-border);
  --glass-shadow: var(--ink-glass-shadow);
  color-scheme: dark;
}

:root.look-paper {
  --bg: var(--paper-bg);
  --glow-top: var(--paper-glow-top);
  --glow-bottom: var(--paper-glow-bottom);
  --card: var(--paper-card);
  --border: var(--paper-border);
  --raised: var(--paper-raised);
  --inset: var(--paper-inset);
  --text: var(--paper-text);
  --text-2: var(--paper-text-2);
  --text-3: var(--paper-text-3);
  --icon: var(--paper-icon);
  --divider: var(--paper-divider);
  --primary: var(--paper-primary);
  --on-primary: var(--paper-on-primary);
  --secondary: var(--paper-secondary);
  --on-secondary: var(--paper-on-secondary);
  --accent: var(--paper-accent);
  --accent-text: var(--paper-accent-text);
  --link: var(--paper-link);
  --selected: var(--paper-selected);
  --green: var(--paper-green);
  --amber: var(--paper-amber);
  --amber-border: var(--paper-amber-border);
  --red: var(--paper-red);
  --red-border: var(--paper-red-border);
  --neutral: var(--paper-neutral);
  --cobalt: var(--paper-cobalt);
  --held: var(--paper-held);
  --glass: var(--paper-glass);
  --glass-border: var(--paper-glass-border);
  --glass-shadow: var(--paper-glass-shadow);
  color-scheme: light;
}

/* The login page: always ink (DESIGN.md "Login"). */
:root.ink {
  --bg: var(--ink-bg);
  --glow-top: var(--ink-glow-top);
  --glow-bottom: var(--ink-glow-bottom);
  --card: var(--ink-card);
  --border: var(--ink-border);
  --inset: var(--ink-inset);
  --text: var(--ink-text);
  --text-2: var(--ink-text-2);
  --text-3: var(--ink-text-3);
  --divider: var(--ink-divider);
  --primary: var(--ink-primary);
  --on-primary: var(--ink-on-primary);
  --accent: var(--ink-accent);
  --red: var(--ink-red);
  color-scheme: dark;
}

/* Reduce Transparency or Increase Contrast: glass becomes the solid card color. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --glass: var(--card);
  }
  .glass {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ------------------------------------------------------------ page */

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

/* The two soft glows, fixed behind everything (they give the glass something to blur). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 45% at 100% 0%, var(--glow-top) 0%, transparent 60%),
    radial-gradient(110% 40% at 0% 100%, var(--glow-bottom) 0%, transparent 60%),
    var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, p {
  margin: 0;
}

.page {
  max-width: 520px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 22px) var(--side)
    calc(var(--tabbar-height) + var(--tabbar-lift) + 24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.has-banner .page {
  padding-top: 22px;
}

.no-tabbar .page {
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

/* TEST MODE (Q19): thin, at the very top, always visible. */
/* Page-colored with an amber line, and above the dimming behind a sheet (piece 18b, part 10): Safari colors its own top
   bar from what sits at the top of the page, so the same color on every page keeps that bar from flipping white and
   dark as pages change (seen in Franklin's screen recording, 2026-10-14). */
.test-banner {
  position: sticky;
  top: 0;
  z-index: 22;
  padding: calc(env(safe-area-inset-top) + 6px) var(--side) 6px;
  background: var(--bg);
  color: var(--amber);
  border-bottom: 1px solid var(--amber);
  font-size: var(--size-label);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.poster {
  font-family: var(--font-poster);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: var(--size-wordmark);
  line-height: 26px;
}

.num {
  font-variant-numeric: tabular-nums;
}

.meta {
  font-size: var(--size-meta);
  color: var(--text-2);
}

.title {
  font-size: var(--size-title);
  line-height: 1;
}

.section-title {
  font-size: var(--size-section);
  font-weight: 700;
}

.quiet {
  color: var(--text-2);
  font-size: var(--size-meta);
}

/* Colors that mean something (DESIGN.md "Color meaning") */
.red { color: var(--red); }
.amber { color: var(--amber); }
.green { color: var(--green); }
.neutral { color: var(--neutral); }

/* ------------------------------------------------------------ icons (line icons used as masks: they take the text color) */

.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--icon-file) center / contain no-repeat;
  mask: var(--icon-file) center / contain no-repeat;
}

.icon-small { width: 15px; height: 15px; }
.icon-today { --icon-file: url("icons/today.ae9f77b13b06.svg"); }
.icon-calendar { --icon-file: url("icons/calendar.9cf44e978691.svg"); }
.icon-cases { --icon-file: url("icons/cases.f9a46c899a66.svg"); }
.icon-clients { --icon-file: url("icons/clients.dff142a754a7.svg"); }
.icon-more { --icon-file: url("icons/more.e01328336b16.svg"); }
.icon-back { --icon-file: url("icons/back.9ce9f660d6ed.svg"); }
.icon-check { --icon-file: url("icons/check.b2308a2c94e8.svg"); }
.icon-chevron { --icon-file: url("icons/chevron.6d4d5cdd416a.svg"); }
.icon-clock { --icon-file: url("icons/clock.a6f11efa66c5.svg"); }
.icon-search { --icon-file: url("icons/search.3cd2aba7cca4.svg"); }
.icon-plus { --icon-file: url("icons/plus.4490d467ce63.svg"); }

/* ------------------------------------------------------------ glass controls: tab bar, round buttons */

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.tabbar-place {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-lift));
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0 var(--tabbar-side);
}

.tabbar {
  width: 100%;
  max-width: calc(520px - 2 * var(--tabbar-side));
  height: var(--tabbar-height);
  border-radius: calc(var(--tabbar-height) / 2);
  display: flex;
  align-items: center;
  padding: 0 3px;
}

.tab {
  flex: 1;
  height: 44px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--icon);
}

.tab[aria-current] {
  background: var(--selected);
  color: var(--accent-text);
}

.round {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

/* ------------------------------------------------------------ buttons */

.button {
  min-height: var(--button-height);
  padding: 0 18px;
  border: 0;
  border-radius: calc(var(--button-height) / 2);
  font: inherit;
  font-size: var(--size-body);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--press-time) ease-out;
}

.button:active {
  transform: scale(var(--press-scale));
}

.button-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.button-secondary {
  background: var(--secondary);
  color: var(--on-secondary);
}

.button-wide {
  width: 100%;
}

.button-danger {
  background: transparent;
  color: var(--red);
  padding: 0;
}

/* Reduce Motion: nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:active {
    transform: none;
  }
}

/* ------------------------------------------------------------ Today */

.today-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day {
  font-size: var(--size-day);
  line-height: 50px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tile {
  min-height: 64px;
  padding: 10px 12px;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tile-urgent {
  border: 1.5px solid var(--red-border);
}

.tile-count {
  font-size: var(--size-tile-count);
  line-height: 36px;
}

.tile-words {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tile-name {
  font-size: var(--size-body);
  font-weight: 700;
}

.tile-note {
  font-size: var(--size-tag);
  color: var(--text-2);
}

.daily-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  margin-top: -8px;
  color: var(--text-2);
  font-size: var(--size-meta);
}

.daily-line .grow {
  flex: 1;
}

.daily-line .icon-chevron {
  color: var(--text-3);
}

/* ------------------------------------------------------------ cards */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-urgent {
  border-color: var(--red-border);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kind {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--size-label);
  font-weight: 700;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  flex-shrink: 0;
  background: currentColor;
}

.card-side {
  display: flex;
  align-items: center;
  gap: 8px;
}

.age {
  font-size: var(--size-label);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.who {
  font-size: var(--size-name);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.who-system {
  font-size: var(--size-label);
  font-weight: 400;
  color: var(--text-2);
}

.ask {
  font-size: var(--size-body);
  line-height: 20px;
  overflow-wrap: anywhere;
}

.ask b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.problem-line {
  font-size: var(--size-meta);
  line-height: 19px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.tag {
  font-size: var(--size-tag);
  font-weight: 700;
  color: var(--amber);
  border: 1px solid var(--amber-border);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}

.parts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--inset);
  font-size: var(--size-meta);
}

.parts dt {
  color: var(--text-2);
}

.parts dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Next up and the appointment rows */

.next {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.next-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.next-label {
  font-size: var(--size-label);
  font-weight: 600;
  color: var(--text-2);
}

.starts-tag {
  font-size: var(--size-label);
  font-weight: 700;
  color: var(--accent-text);
  background: var(--selected);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.big-time {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.big-time .poster:first-child {
  font-size: var(--size-next-time);
  line-height: 58px;
}

.half {
  font-family: var(--font-poster);
  font-weight: 700;
  font-size: var(--size-row-time);
  color: var(--text-2);
}

.next-client {
  font-size: 19px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.next-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: var(--size-meta);
  padding-top: 2px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--size-label);
  font-weight: 600;
}

.status .dot {
  width: 7px;
  height: 7px;
}

.owes {
  font-size: var(--size-label);
  font-weight: 600;
  color: var(--amber);
}

.rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 8px 0;
  border-top: 1px solid var(--divider);
}

.row-time {
  width: 64px;
  flex-shrink: 0;
  font-size: var(--size-row-time);
  line-height: 1;
}

.row-time .half {
  font-size: var(--size-tag);
}

.row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row-name {
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.spanish {
  font-size: var(--size-label);
  font-weight: 500;
  color: var(--text-2);
}

/* ------------------------------------------------------------ Needs you */

.screen-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.room-switch {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--divider);
  padding: 0 2px;
}

.room {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--size-name);
  font-weight: 500;
  color: var(--text-2);
}

.room[aria-current] {
  font-weight: 700;
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--text);
}

.room .count {
  font-size: var(--size-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.snoozed {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: -4px;
  font-size: var(--size-meta);
  color: var(--text-2);
}

.section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.daily-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--row-height);
  padding: 10px 0;
  border-top: 1px solid var(--divider);
}

.daily-item .icon-check {
  color: var(--green);
}

.daily-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.empty {
  color: var(--text-2);
  padding: 12px 0;
}

/* ------------------------------------------------------------ Login */

.login {
  min-height: 100vh;
  justify-content: center;
  gap: 28px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.login form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--size-meta);
  color: var(--text-2);
}

.field input {
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--radius-field);
  border: 1px solid var(--border);
  background: var(--inset);
  color: var(--text);
  font: inherit;
  font-size: 17px;
}

.field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.error {
  color: var(--red);
  font-weight: 600;
}

/* ------------------------------------------------------------ Card actions (piece 17, DESIGN.md "Card options") */

html, body {
  overflow-x: clip; /* a swiped card's tray never makes the page scroll sideways */
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

/* Confirm in sheets: the accent. */
.button-accent {
  background: var(--accent);
  color: var(--on-primary);
}

.card-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.note-line {
  font-size: var(--size-meta);
  color: var(--text-2);
}

.card-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-actions .action-form,
.card-actions > .button {
  flex: 1;
  min-width: 0;
}

.card-actions .action-form .button {
  width: 100%;
}

.more-button {
  background: var(--secondary);
  color: var(--on-secondary);
}

.refused {
  color: var(--red);
  font-weight: 600;
}

/* ••• menu: glass, opens from its button (150–200 ms, from 95% and transparent, never from zero). */
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  min-width: 236px;
  padding: 6px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  transform-origin: top right;
  animation: menu-open 180ms ease-out;
}

/* Piece 18b, part 9: when the whole menu doesn't fit between its button and the tab bar, it opens upward. */
.menu.menu-up {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom right;
}

.menu .action-form {
  width: 100%;
}

.button-item {
  width: 100%;
  min-height: var(--button-height);
  justify-content: flex-start;
  padding: 0 14px;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
}

.button-item:hover,
.button-item:focus-visible {
  background: var(--selected);
}

@keyframes menu-open {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Swipe to snooze: the card slides left over its two choices. */
.swipeable {
  position: relative;
  touch-action: pan-y;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.swipeable.swiping {
  transition: none;
  user-select: none;
  -webkit-user-select: none;
}

.swipe-tray {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + 8px);
  display: flex;
  gap: 6px;
  align-items: stretch;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.swipe-tray.shown,
.swiping .swipe-tray {
  opacity: 1;
}

.swipe-tray .action-form {
  display: flex;
}

.button-swipe {
  min-width: 84px;
  height: 100%;
  border-radius: var(--radius-card);
  background: var(--secondary);
  color: var(--on-secondary);
}

/* Reduce Motion: the card stays put and its choices fade in over its right side. */
.swipe-tray.in-place {
  left: auto;
  right: 8px;
  top: 8px;
  bottom: 8px;
}

.swipe-tray.in-place .button-swipe {
  background: var(--raised);
}

/* The Snoozed line: each name brings its card back. */
.snoozed {
  flex-wrap: wrap;
}

.snoozed-name {
  min-height: var(--button-height);
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--link);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Sheets: slide up in about 300 ms; closing is a little faster. */
.sheet-page .page {
  min-height: 100vh;
}

.sheet-under {
  opacity: 0.5;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.35);
  animation: fade-in 300ms ease-out;
  -webkit-tap-highlight-color: transparent; /* a full-screen link: Safari's grey tap box would flash the whole screen */
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-width: 520px;
  margin: 0 auto;
  max-height: 88vh;
  overflow-y: auto;
  padding: 10px var(--side) calc(env(safe-area-inset-bottom) + 18px);
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: sheet-up 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.sheet.closing {
  transform: translateY(100%);
  transition: transform 200ms ease-in;
}

.sheet-grabber {
  align-self: center;
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--text-3);
}

.sheet-title {
  font-size: var(--size-section);
  font-weight: 700;
}

.sheet-text {
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sheet-buttons,
.sheet-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sheet-buttons form {
  display: flex;
}

.menu-list {
  display: flex;
  flex-direction: column;
}

.field textarea,
.details {
  min-height: 96px;
  padding: 12px 14px;
  border-radius: var(--radius-field);
  border: 1px solid var(--border);
  background: var(--inset);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  resize: vertical;
}

.details {
  font-size: var(--size-meta);
  font-family: ui-monospace, Menlo, monospace;
  user-select: all;
  -webkit-user-select: all;
}

.switch,
.choice {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.switch legend,
.choice legend {
  width: 100%;
  margin-bottom: 6px;
  font-size: var(--size-meta);
  color: var(--text-2);
}

.switch-item,
.choice-item {
  position: relative;
  flex: 1;
}

.choice-item {
  flex-basis: 100%;
}

.switch-item input,
.choice-item input {
  position: absolute;
  opacity: 0;
}

.switch-item span,
.choice-item span {
  min-height: var(--button-height);
  padding: 0 12px;
  border-radius: calc(var(--button-height) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  color: var(--on-secondary);
  font-weight: 600;
}

.switch-item input:checked + span,
.choice-item input:checked + span {
  background: var(--selected);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.switch-item input:focus-visible + span,
.choice-item input:focus-visible + span {
  outline: 2px solid var(--accent);
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .menu { animation: fade-in 180ms ease-out; }
  .sheet { animation: fade-in 300ms ease-out; }
  .swipeable { transition: none; transform: none !important; }
}

/* Every line a tap would clear, in full (Not sent, Needs your answer). */
.lines {
  margin: 2px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--size-meta);
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Piece 18a: the rest of the screens */

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root.look-ink,
  :root.look-paper {
    --glass: var(--card);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.link {
  color: var(--link);
  font-weight: 600;
}

/* Today: the three app shortcuts, top right (Q23) */
.today-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shortcuts {
  display: flex;
  gap: 6px;
}

.shortcut {
  color: var(--icon);
}

/* Q27 (piece 18b): plain text, no logos: TT · IG · WA */
.shortcut-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Next up opens its case (the whole card is the link) */
.next {
  position: relative;
}

.next-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* A card's name and photo (piece 18a, Behavior 5) */
.who-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.who-link {
  color: var(--text);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.card-photo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--raised);
}

.card-photo img,
.thumb img,
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The price card's last client messages, in full */
.last-messages {
  list-style: none;
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--inset);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--size-meta);
}

.last-messages li,
.bubble {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.said {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.when {
  font-size: var(--size-tag);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Set price: the quick picks, two rows of three */
.picks .switch-item {
  flex: 1 1 calc(33.333% - 6px);
}

/* Lists: title, search, chips */
.list-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.list-head.between {
  align-items: center;
}

.search input {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--inset);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--secondary);
  color: var(--on-secondary);
  font-size: var(--size-meta);
  font-weight: 600;
}

.chip[aria-current] {
  background: var(--selected);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.count {
  font-variant-numeric: tabular-nums;
}

.section-note {
  font-size: var(--size-meta);
  font-weight: 500;
  color: var(--text-2);
}

/* Case rows */
.case-rows,
.az-group {
  display: flex;
  flex-direction: column;
}

.case-row,
.client-row,
.plain-row,
.held-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--row-height);
  padding: 10px 0;
  border-top: 1px solid var(--divider);
  color: inherit;
}

.plain-row.column {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.case-row .icon-chevron,
.plain-row .icon-chevron {
  color: var(--text-3);
}

.thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--raised);
}

.row-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.snoozed-note {
  font-size: var(--size-tag);
  color: var(--text-2);
}

.bar {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--inset);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.folded summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.folded summary::-webkit-details-marker {
  display: none;
}

.folded summary::after {
  content: "";
  width: 15px;
  height: 15px;
  background-color: var(--text-3);
  -webkit-mask: url("icons/chevron.6d4d5cdd416a.svg") center / contain no-repeat;
  mask: url("icons/chevron.6d4d5cdd416a.svg") center / contain no-repeat;
  transform: rotate(90deg);
}

.folded:not([open]) summary::after {
  transform: none;
}

/* The case page */
.pill {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--text);
}

.photos {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--side));
  padding: 0 var(--side);
  scrollbar-width: none;
}

.photos::-webkit-scrollbar {
  display: none;
}

.photo {
  flex: 0 0 82%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--raised);
  scroll-snap-align: center;
}

.photo:only-child {
  flex-basis: 100%;
}

.case-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poster-title {
  font-size: 40px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.figures {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.figures div {
  padding: 10px;
  border-radius: 14px;
  background: var(--inset);
}

.figures dt {
  font-size: var(--size-tag);
  color: var(--text-2);
}

.figures dd {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: var(--size-meta);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 8px;
  font-size: var(--size-meta);
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 2px solid var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step.done .step-mark {
  border-color: var(--green);
  color: var(--green);
}

.step.current .step-mark {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 10px var(--accent);
}

.step.next {
  color: var(--text-2);
}

/* Messages: theirs on the left, ours on the right */
.bubbles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bubble {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 18px;
}

.bubble.theirs {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
}

.bubble.ours {
  align-self: flex-end;
  background: var(--selected);
  border-bottom-right-radius: 6px;
  text-align: right;
}

.state {
  font-size: var(--size-tag);
  font-weight: 600;
}

.link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-title {
  min-height: 44px;
  justify-content: center;
}

.client-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  align-self: flex-start;
}

.history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.history li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--divider);
  overflow-wrap: anywhere;
}

/* Clients: A–Z with an index on the right */
.az-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.letter {
  font-size: var(--size-row-time);
  padding-top: 8px;
}

.initials {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--selected);
  color: var(--accent-text);
  font-weight: 700;
  font-size: var(--size-meta);
}

.az-index {
  position: sticky;
  top: 40px;
  align-self: start;
  display: flex;
  flex-direction: column;
  font-size: var(--size-tag);
  font-weight: 700;
  color: var(--link);
}

.az-index a {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plain-row .link-buttons {
  justify-content: flex-end;
}

/* The profile's Phone and Conversations rows (Franklin's phone check, 2026-10-15): the buttons drop onto their own
   line when they don't fit beside the words, so an Instagram row's three buttons never
   squeeze "Instagram" to one letter wide. */
.plain-row.wraps {
  flex-wrap: wrap;
}

.total {
  font-weight: 700;
}

/* Calendar */
.cal-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cal-switch .room-switch {
  border-bottom: 0;
}

.cal-arrows {
  display: flex;
  gap: 4px;
}

.strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.strip-day,
.month-day {
  min-height: 64px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text);
}

.strip-letter {
  font-size: var(--size-tag);
  color: var(--text-2);
}

.strip-number {
  font-size: var(--size-row-time);
  line-height: 1;
}

.strip-day.selected,
.month-day.today {
  background: var(--accent);
  color: var(--on-primary);
}

.strip-day.selected .strip-letter {
  color: inherit;
}

.month-day.selected:not(.today) {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.strip-day.held,
.month-day.held {
  outline: 1.5px dashed var(--held);
  outline-offset: -3px;
}

.strip-day.closed,
.month-day.closed,
.month-day.outside {
  opacity: 0.45;
}

.dots {
  display: flex;
  gap: 3px;
  min-height: 6px;
}

.dots .dot {
  width: 6px;
  height: 6px;
}

.dot.session { background: var(--accent); }
.dot.consultation { background: var(--cobalt); }
.dot.held { background: transparent; border: 1.5px dashed var(--held); }

.strip-day.selected .dot.session,
.month-day.today .dot.session {
  background: var(--on-primary);
}

.day-grid {
  position: relative;
  height: 600px; /* 12 to 10 PM: 60 px an hour */
  margin-left: 46px;
  border-top: 1px solid var(--divider);
}

.hour {
  position: absolute;
  left: -46px;
  transform: translateY(-50%);
  font-size: var(--size-tag);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.day-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 59px, var(--divider) 59px 60px);
  pointer-events: none;
}

.cal-block {
  position: absolute;
  left: 4px;
  right: 0;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--size-meta);
  font-weight: 600;
  color: var(--on-primary);
}

.cal-block.session { background: var(--accent); }
.cal-block.consultation { background: var(--cobalt); }
.cal-block.held {
  background: transparent;
  color: var(--text);
  border: 1.5px dashed var(--held);
}

.block-time {
  font-size: var(--size-tag);
  font-weight: 500;
}

.free {
  font-weight: 600;
}

.held-row .tag {
  margin-left: auto;
}

.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  font-size: var(--size-meta);
  color: var(--text-2);
}

.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.month {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed;
}

.month th {
  font-size: var(--size-tag);
  color: var(--text-2);
  font-weight: 600;
}

.month-day {
  min-height: 48px;
  border-radius: 12px;
}

.month-day .poster {
  font-size: 18px;
}

/* More */
.settings {
  margin: 0;
}

.settings dd {
  margin: 0 0 0 auto;
  text-align: right;
  max-width: 62%;
}

.wording p {
  overflow-wrap: anywhere;
}

.lang {
  font-size: var(--size-tag);
  font-weight: 700;
  color: var(--text-2);
}

.look-form .switch {
  flex-wrap: nowrap;
}

/* A photo, full screen */
.photo-page {
  background: #000;
}

.photo-page .page {
  min-height: 100vh;
  justify-content: center;
  padding: 0;
  max-width: none;
}

.full-photo {
  width: 100%;
  max-height: 100vh;
  object-fit: contain;
}

.photo-close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 12px;
  z-index: 2;
}

/* ------------------------------------------------------------ piece 18b: the taps that change money, bookings and sending */

.head-buttons {
  display: flex;
  gap: 8px;
}

.chat-control {
  margin-left: auto;
}

.reply-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.step-check {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.later-rows dd {
  color: var(--text-3);
}

[data-owes-row] {
  gap: 10px;
}

[data-owes-row] .row-main {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ------------------------------------------------------------ piece 18b, part 10: no flash on a tap */

/* The browser's own smooth page change between Metabee's pages: a cross-fade only. Phones that don't support it change
   pages as before; with Reduce Motion, none. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Heights that don't follow the iPhone keyboard: cards.js sets --stable-height once (and again only when the phone
   turns), so the keyboard closing as a sheet is left doesn't make the sheet or the page under it jump. */
.sheet-page .page {
  min-height: var(--stable-height, 100vh);
}

.sheet {
  max-height: calc(var(--stable-height, 100vh) * 0.88);
}

/* ------------------------------------------------------------ piece 18c: sheets open inside the page (inpage.js) */

html.sheet-open {
  overflow: hidden; /* the page behind doesn't scroll while a sheet is open */
}

/* The check step, Edit's form or an error line: only the sheet's contents change, a short fade. */
.sheet.sheet-swapped {
  animation: fade-in 120ms ease-out;
}

.sheet.sheet-still {
  animation: none;
}

.sheet-backdrop.closing {
  opacity: 0;
  transition: opacity 200ms ease-in;
}