/* Courage Garage UI kit. Read docs/ui-system.md before adding a screen.
   Shared appearance lives here; page files own layout and business states. */
:root {
  --cg-paper: #FAFFFF;
  --cg-ink: #222427;
  --cg-red: #E60C0C;
  /* Change the three brand colours above; their translucent tones follow. */
  --cg-line: color-mix(in srgb, var(--cg-ink) 25%, transparent);
  --cg-line-soft: color-mix(in srgb, var(--cg-ink) 19%, transparent);
  --cg-line-strong: color-mix(in srgb, var(--cg-ink) 33%, transparent);
  --cg-muted: color-mix(in srgb, var(--cg-ink) 65%, transparent);
  --cg-placeholder: color-mix(in srgb, var(--cg-ink) 52%, transparent);
  --cg-disabled: color-mix(in srgb, var(--cg-ink) 44%, transparent);
  --cg-backdrop: color-mix(in srgb, var(--cg-ink) 72%, transparent);
  --cg-inverse-line: color-mix(in srgb, var(--cg-paper) 27%, transparent);
  --cg-inverse-line-soft: color-mix(in srgb, var(--cg-paper) 19%, transparent);
  --cg-inverse-line-strong: color-mix(in srgb, var(--cg-paper) 38%, transparent);
  --cg-inverse-muted: color-mix(in srgb, var(--cg-paper) 72%, transparent);
  --cg-inverse-label: color-mix(in srgb, var(--cg-paper) 63%, transparent);
  --cg-red-soft: color-mix(in srgb, var(--cg-red) 15%, transparent);
  --cg-red-mid: color-mix(in srgb, var(--cg-red) 25%, transparent);
  --cg-red-glow: color-mix(in srgb, var(--cg-red) 40%, transparent);
  --cg-font-body: 'Fira Sans', sans-serif;
  --cg-font-display: 'Anton', 'Oswald', sans-serif;
  --cg-font-label: 'JetBrains Mono', monospace;
  --cg-text-micro: 10px;
  --cg-text-caption: 11px;
  --cg-text-small: 12px;
  --cg-text-detail: 13px;
  --cg-text-body: 14px;
  --cg-text-lead: 15px;
  --cg-text-control: 16px;
  --cg-text-large: 18px;
  --cg-title-section: 28px;
  --cg-title-dialog: 32px;
  /* Glows are off (owner, 2026-09-19): red light around buttons and chips read
     as a generic effect. State shows through fill and border; the tokens stay
     so rules that still name them resolve to nothing. */
  --cg-glow-subtle: 0 0 0 transparent;
  --cg-glow-sm: 0 0 0 transparent;
  --cg-glow-md: 0 0 0 transparent;
  --cg-glow-lg: 0 0 0 transparent;
  --cg-dialog-width: 620px;
  --cg-dialog-padding: 24px;
  --cg-dialog-accent-width: 4px;
  --cg-layer-dialog: 10000;
  --cg-layer-dialog-child: 11000;
  --cg-layer-dialog-advisor: 20000;
  --cg-space-2xs: 4px;
  --cg-space-xs: 8px;
  --cg-space-sm: 12px;
  --cg-space-md: 16px;
  --cg-space-lg: 24px;
  --cg-space-xl: 32px;
  --cg-space-2xl: 48px;
  --cg-space-3xl: 64px;
  /* Corner radii mirror the site's scale (site/assets/css/garage.css):
     labels, controls, buttons, media. Page files that must stay square
     (hairline grids, full-bleed bars, rows drawn with a single border)
     say border-radius: 0 themselves. */
  --cg-radius-caption: 6px;
  --cg-radius-sm: 8px;
  --cg-radius: 10px;
  --cg-radius-button: 12px;
  --cg-radius-media: 16px;
  --cg-content-width: 1120px;
  --cg-surface-soft: color-mix(in srgb, var(--cg-ink) 5%, var(--cg-paper));
  /* Telegram and WebKit can describe the same device inset. Count it once. */
  --cg-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --cg-nav-bar-height: 64px;
  --cg-bottom-nav-height: calc(var(--cg-nav-bar-height) + var(--cg-safe-bottom));
  --cg-press-duration: 160ms;
  --cg-press-easing: cubic-bezier(.23, 1, .32, 1);
}
.cg-page {
  --cg-focus: var(--cg-ink);
  color: var(--cg-ink);
  background: var(--cg-paper);
  font-family: var(--cg-font-body);
}
.cg-page [hidden] { display: none !important; }
.cg-page :is(button, select, input, textarea) { border-radius: var(--cg-radius); }
.cg-page :is(button, select, input, textarea, a[href], [role="button"]):focus-visible {
  /* Legacy reset uses !important; scope its correction to migrated pages. */
  outline: 2px solid var(--cg-focus) !important;
  outline-offset: 5px;
}
.cg-page button { transition: transform var(--cg-press-duration) var(--cg-press-easing); }
.cg-page button:active:not(:disabled) { transform: scale(.985); }

/* Primary action; quiet is for secondary actions, spread for a trailing icon. */
.cg-page .cg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cg-space-sm);
  min-height: 56px;
  padding: var(--cg-space-md) var(--cg-space-lg);
  border: 0;
  border-radius: var(--cg-radius-button);
  background: var(--cg-red);
  color: var(--cg-paper);
  font: 600 var(--cg-text-control)/1.4 var(--cg-font-body);
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.cg-page .cg-button--spread { justify-content: space-between; text-align: left; }
.cg-page .cg-button--quiet { background: none; color: inherit; border: 1px solid currentColor; }
.cg-page .cg-button:disabled { opacity: .55; cursor: not-allowed; }
.cg-page .cg-button[aria-busy="true"] { background: var(--cg-ink); color: var(--cg-paper); opacity: 1; cursor: wait; }
.cg-button svg { flex-shrink: 0; }

.cg-panel {
  --cg-focus: var(--cg-paper);
  padding: var(--cg-space-lg);
  border-radius: var(--cg-radius-media);
  color: var(--cg-paper);
  background: var(--cg-ink);
}
.cg-field {
  min-height: 44px;
  padding: var(--cg-space-xs) var(--cg-space-sm);
  border: 1px solid var(--cg-line-strong);
  border-radius: var(--cg-radius);
  color: var(--cg-ink);
  background: var(--cg-paper);
  font: 500 var(--cg-text-small)/1.5 var(--cg-font-body);
}
select.cg-field { cursor: pointer; }
.cg-wordmark { display: block; height: auto; }
.cg-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--cg-radius-media); background: var(--cg-ink); }
.cg-photo img { display: block; width: 100%; object-fit: cover; }
.cg-photo figcaption {
  position: absolute;
  top: var(--cg-space-sm);
  left: var(--cg-space-sm);
  padding: var(--cg-space-xs) var(--cg-space-sm);
  border-radius: var(--cg-radius-caption);
  color: var(--cg-paper);
  background: var(--cg-ink);
  font: 400 var(--cg-text-micro)/1.5 var(--cg-font-label);
}
.cg-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cg-space-xs);
  padding-bottom: var(--cg-space-md);
}
.cg-section-heading h2 { margin: 0; color: inherit; font: 400 27px/1.2 var(--cg-font-display); letter-spacing: 0; }
.cg-section-heading > span { font: 400 var(--cg-text-small)/1.5 var(--cg-font-body); }

/* A flat icon/text/action row. Use a native button or anchor, never a fake div. */
.cg-page .cg-row {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) 18px;
  align-items: center;
  gap: var(--cg-space-md);
  min-height: 88px;
  padding: var(--cg-space-md) 0;
  border: 0;
  border-top: 1px solid var(--cg-line);
  border-radius: 0;
  color: inherit;
  background: none;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.cg-row__title { display: block; font: 600 var(--cg-text-body)/1.4 var(--cg-font-body); letter-spacing: -.01em; }
.cg-row__description { display: block; margin-top: var(--cg-space-2xs); font: 400 var(--cg-text-small)/1.5 var(--cg-font-body); }
.cg-row__arrow { font: 400 20px/1 var(--cg-font-body); }
@media (hover:hover) and (pointer:fine) {
  .cg-page .cg-button:hover:not(:disabled) { filter: brightness(.92); }
  .cg-page .cg-row:hover { color: var(--cg-red); }
}
@media (prefers-reduced-motion:reduce) {
  .cg-page button { transition: none; }
  .cg-page button:active:not(:disabled) { transform: none; }
}

/* Back button that showScreen() adds to chat, model picker and booking detail.
   Legacy style.css drew it white-on-glass for the dark theme, which vanished on paper. */
.cg-page > .back-pill-auto {
  border: 1px solid var(--cg-line-strong); border-radius: var(--cg-radius);
  background: var(--cg-paper); color: var(--cg-ink); font: 400 20px/1 var(--cg-font-body);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.cg-page > .back-pill-auto:active { background: var(--cg-surface-soft); }

/* Shared page header: wordmark and one navigation action. */
.cg-masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--cg-space-lg); padding-bottom: var(--cg-space-lg); margin-bottom: var(--cg-space-xl); border-bottom: 1px solid currentColor; }
.cg-masthead .cg-wordmark { width: 110px; }
.cg-masthead .cg-button { min-height: 44px; padding: var(--cg-space-xs) var(--cg-space-md); font-size: var(--cg-text-small); }

/* Shared dialog shell. Panels own header/body/footer; only the body scrolls. */
.cg-dialog {
  position: fixed; inset: var(--cg-viewport-top, 0px) 0 auto;
  height: var(--cg-viewport-height, 100dvh);
  z-index: var(--cg-layer-dialog); display: flex;
  align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--cg-backdrop); overflow: hidden;
}
.cg-dialog.hidden { display: none; }
.cg-dialog-panel {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: var(--cg-dialog-width); max-height: 100%; min-height: 0;
  padding: 0; border: 0; border-top: var(--cg-dialog-accent-width) solid var(--cg-red);
  border-radius: var(--cg-radius-media); background: var(--cg-paper); color: var(--cg-ink);
  box-shadow: none; overflow: hidden;
}
.cg-dialog-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--cg-space-md); flex-shrink: 0;
  padding: var(--cg-dialog-padding); border-bottom: 1px solid var(--cg-line);
}
.cg-dialog-title { margin: 0; font: 400 var(--cg-title-dialog)/1.15 var(--cg-font-display); letter-spacing: 0; overflow-wrap: anywhere; }
.cg-dialog-eyebrow { margin-bottom: var(--cg-space-xs); font: 500 var(--cg-text-micro)/1.5 var(--cg-font-body); letter-spacing: .08em; }
.cg-dialog-close {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius);
  background: none; color: inherit; font: 400 var(--cg-text-large)/1 var(--cg-font-body); cursor: pointer;
}
.cg-dialog-body {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--cg-dialog-padding); font: 400 var(--cg-text-body)/1.6 var(--cg-font-body);
}
.cg-dialog-body > :first-child { margin-top: 0; }
.cg-dialog-body > :last-child { margin-bottom: 0; }
.cg-dialog-footer {
  display: flex; flex-direction: column; gap: var(--cg-space-sm); flex-shrink: 0;
  padding: var(--cg-space-md) var(--cg-dialog-padding) var(--cg-dialog-padding);
  border-top: 1px solid var(--cg-line);
}
.cg-dialog-footer > .cg-button { width: 100%; }
.cg-dialog .cg-field { width: 100%; min-width: 0; font-size: var(--cg-text-control); }
.cg-dialog .cg-field::placeholder { color: var(--cg-placeholder); opacity: 1; }
.cg-dialog-lock #app-root .screen { overflow: hidden; }
.cg-page .cg-button--glow { box-shadow: var(--cg-glow-subtle); }
@media (max-width:599px) {
  .cg-dialog { align-items: flex-end; padding: max(16px, env(safe-area-inset-top)) 0 0; }
  .cg-dialog-footer { padding-bottom: max(var(--cg-dialog-padding), env(safe-area-inset-bottom)); }
}
@media (max-width:360px) {
  .cg-dialog { --cg-dialog-padding: 16px; }
}
@media (max-height:480px) {
  .cg-dialog { --cg-dialog-padding: 12px; }
  .cg-dialog-title { font-size: var(--cg-title-section); }
}

/* Price block (home + desktop calendar intro). Prices are painted from the
   server tariff by renderPriceSurfaces() in app.js; the markup holds the
   same numbers as a first-paint fallback. No per-hour maths, no crossed-out
   prices: each card is the full price of one session. */
.price-block { display: grid; gap: var(--cg-space-md); }
.price-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cg-space-xs);
  padding-bottom: var(--cg-space-xs);
  border-bottom: 1px solid var(--cg-line);
}
.price-block-title { margin: 0; font: 400 var(--cg-title-section)/1.1 var(--cg-font-display); letter-spacing: 0; }
.price-block-label { font: 400 var(--cg-text-micro)/1.5 var(--cg-font-label); color: var(--cg-muted); text-transform: uppercase; }
.price-offer {
  padding: var(--cg-space-md);
  border-left: var(--cg-dialog-accent-width) solid var(--cg-red);
  border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
  background: var(--cg-surface-soft);
}
.price-offer[hidden] { display: none; }
.price-offer-headline { margin: 0; font: 400 24px/1.15 var(--cg-font-display); color: var(--cg-ink); }
.price-offer-note { margin: var(--cg-space-xs) 0 0; font: 400 var(--cg-text-detail)/1.5 var(--cg-font-body); color: var(--cg-muted); }
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--cg-line);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-media);
  overflow: hidden;
}
.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--cg-space-2xs);
  min-width: 0;
  padding: var(--cg-space-sm) var(--cg-space-md) var(--cg-space-md);
  background: var(--cg-paper);
}
.price-card-name { font: 600 var(--cg-text-small)/1.4 var(--cg-font-body); }
.price-card-price { font: 400 36px/1.05 var(--cg-font-display); color: var(--cg-ink); letter-spacing: 0; }
.price-card-note { font: 400 var(--cg-text-caption)/1.45 var(--cg-font-body); color: var(--cg-muted); }
.price-block-diy, .price-block-included { margin: 0; font: 400 var(--cg-text-detail)/1.5 var(--cg-font-body); }
.price-block-included { color: var(--cg-muted); }
.price-block-cta { width: 100%; }
@media (min-width: 1000px) {
  .home-workspace .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}