:root,
:root[data-skin="gold-cyan"] {
  color-scheme: dark;

  /* Skin inputs: a new skin should only need to override this group. */
  --skin-canvas: #010203;
  --skin-surface: #050708;
  --skin-surface-raised: #080b0d;
  --skin-text: #dce2e3;
  --skin-text-strong: #edf1f2;
  --skin-text-muted: #aeb7ba;
  --skin-text-subtle: #929c9f;
  --skin-primary: #ffad00;
  --skin-primary-bright: #ffd34a;
  --skin-primary-deep: #9b4f00;
  --skin-secondary: #33d8e8;
  --skin-secondary-soft: #8deaf1;
  --skin-danger: #ff6259;
}

:root[data-skin="monochrome"] {
  --skin-canvas: #090a0c;
  --skin-surface: #101216;
  --skin-surface-raised: #171a20;
  --skin-text: #e2e5e9;
  --skin-text-strong: #f7f8fa;
  --skin-text-muted: #a8afb8;
  --skin-text-subtle: #7e8791;
  --skin-primary: #c9d0d8;
  --skin-primary-bright: #ffffff;
  --skin-primary-deep: #68717b;
  --skin-secondary: #91a0af;
  --skin-secondary-soft: #d0d7de;
  --skin-danger: #ff716b;
}

:root {
  /* Semantic color contract. Components use these, never raw color literals. */
  --color-canvas: var(--skin-canvas);
  --color-surface: var(--skin-surface);
  --color-surface-raised: var(--skin-surface-raised);
  --color-text: var(--skin-text);
  --color-text-strong: var(--skin-text-strong);
  --color-text-muted: var(--skin-text-muted);
  --color-text-subtle: var(--skin-text-subtle);
  --color-primary: var(--skin-primary);
  --color-primary-strong: var(--skin-primary-bright);
  --color-primary-deep: var(--skin-primary-deep);
  --color-secondary: var(--skin-secondary);
  --color-secondary-soft: var(--skin-secondary-soft);
  --color-danger: var(--skin-danger);
  --color-on-primary: var(--skin-canvas);
  --color-line: color-mix(in srgb, var(--color-text) 11%, transparent);
  --color-line-soft: color-mix(in srgb, var(--color-text) 8%, transparent);
  --color-line-strong: color-mix(in srgb, var(--color-text) 24%, transparent);
  --color-focus: color-mix(
    in srgb,
    var(--color-primary-strong) 72%,
    transparent
  );
  --color-primary-faint: color-mix(
    in srgb,
    var(--color-primary) 5.5%,
    transparent
  );
  --color-primary-soft: color-mix(
    in srgb,
    var(--color-primary) 18%,
    transparent
  );
  --color-primary-line: color-mix(
    in srgb,
    var(--color-primary) 28%,
    transparent
  );
  --color-primary-line-strong: color-mix(
    in srgb,
    var(--color-primary-strong) 64%,
    transparent
  );
  --color-secondary-faint: color-mix(
    in srgb,
    var(--color-secondary) 4.5%,
    transparent
  );
  --color-secondary-line: color-mix(
    in srgb,
    var(--color-secondary) 24%,
    transparent
  );
  --color-sheet-scrim: color-mix(in srgb, black 34%, transparent);
  --color-sheet-handle: color-mix(
    in srgb,
    var(--color-text-strong) 17%,
    transparent
  );

  /* Compatibility aliases while the application CSS stays readable. */
  --black: var(--color-canvas);
  --ink: var(--color-surface);
  --panel: var(--color-surface-raised);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --muted-soft: var(--color-text-subtle);
  --gold: var(--color-primary);
  --gold-hot: var(--color-primary-strong);
  --gold-deep: var(--color-primary-deep);
  --cyan: var(--color-secondary);
  --cyan-soft: var(--color-secondary-soft);
  --danger: var(--color-danger);
  --line: var(--color-line);

  /* Typography. */
  --font-sans:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-serif-mark: Georgia, "Times New Roman", serif;
  --type-micro: 0.6875rem;
  --type-xs: 0.8125rem;
  --type-sm: 0.9375rem;
  --type-body: 1rem;
  --type-md: 1.125rem;
  --type-lg: 1.5rem;
  --type-title: clamp(2.5rem, 10vw, 4rem);
  --type-display: clamp(3.25rem, 14vw, 5.5rem);
  --leading-tight: 0.96;
  --leading-body: 1.5;
  --tracking-tight: -0.035em;
  --tracking-label: 0.055em;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* Four-point spatial rhythm. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --page-gutter: clamp(1rem, 4.8vw, 1.375rem);
  --content-max: 35rem;
  --sheet-max: 34rem;
  --header-height: 4.5rem;

  /* Geometry and touch. */
  --tap-min: 3rem;
  --control-min: 3.5rem;
  --action-min: 4rem;
  --radius-none: 0;
  --radius-sm: 0.75rem;
  --radius-card: 1rem;
  --radius-sheet: 1.7rem;
  --radius-pill: 999px;

  /* Effects and motion. */
  --gradient-canvas: radial-gradient(
    circle at 50% 112%,
    var(--color-primary-faint),
    transparent 31rem
  );
  --gradient-primary-text: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary-strong) 58%, white) 0%,
    var(--color-primary-strong) 28%,
    var(--color-primary) 58%,
    color-mix(in srgb, var(--color-primary-deep) 86%, black) 100%
  );
  --gradient-primary-action: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary-strong) 7.5%, transparent),
    color-mix(in srgb, var(--color-primary) 2.5%, transparent)
  );
  --gradient-sheet: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-text-strong) 3%, transparent),
    color-mix(in srgb, var(--color-text-strong) 1.2%, transparent)
  );
  --shadow-sheet: 0 -1.375rem 3.75rem color-mix(in srgb, black 50%, transparent);
  --shadow-primary-glow: 0 0 1.5rem
    color-mix(in srgb, var(--color-primary) 22%, transparent);
  --shadow-secondary-glow: 0 0 1.375rem
    color-mix(in srgb, var(--color-secondary) 42%, transparent);
  --duration-instant: 120ms;
  --duration-fast: 180ms;
  --duration-sheet: 300ms;
  --ease-standard: ease;
  --ease-out: cubic-bezier(0.22, 0.9, 0.28, 1);

  /* Derived electric accents for the optional NOW control. */
  --electric-text: color-mix(in srgb, var(--color-secondary-soft) 42%, white);
  --electric-bright: color-mix(in srgb, var(--color-secondary) 44%, white);
  --electric-mid: color-mix(in srgb, var(--color-secondary) 68%, white);
  --electric-dim: color-mix(
    in srgb,
    var(--color-secondary) 72%,
    var(--color-text-subtle)
  );
  --electric-off: color-mix(
    in srgb,
    var(--color-text-subtle) 64%,
    var(--color-canvas)
  );
}


/* BOOK top-edge activity indicator. It listens to aria-busy so existing
   schedule, picker, submit, and location work gets one quiet global signal. */
#book-progress {
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
#book-progress.is-visible,
#book-progress.is-active {
  opacity: 1;
  transform: translateY(0);
}
#book-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--book-progress, .18));
  background: linear-gradient(90deg, #8b641d 0%, #d6ad4b 46%, #f5df8b 72%, #b78325 100%);
  box-shadow: 0 0 8px rgba(214, 173, 75, .22);
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
}
#book-progress::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 46px;
  left: calc((var(--book-progress, .18) * 100%) - 46px);
  background: linear-gradient(90deg, transparent, rgba(255,248,214,.12), rgba(255,255,245,.92), rgba(255,248,214,.12), transparent);
  filter: blur(.2px);
  opacity: 0;
}
#book-progress.is-active::after {
  animation: book-progress-glint 1.65s ease-in-out infinite;
}
@keyframes book-progress-glint {
  0%, 58%, 100% { opacity: 0; transform: translateX(-18px); }
  68% { opacity: .9; }
  82% { opacity: .18; transform: translateX(22px); }
}
@media (prefers-reduced-motion: reduce) {
  #book-progress, #book-progress::before { transition: none; }
  #book-progress.is-active::after { animation: none; }
}

.selected-place-map{width:100%;height:clamp(150px,34vw,210px);margin:0 0 14px;border:0;overflow:hidden;background:var(--color-surface-raised)}

.modify-summary{display:grid;gap:0;margin:18px 0 8px;border-block:1px solid var(--color-line)}
.modify-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 2px;border-bottom:1px solid var(--color-line)}
.modify-row:last-of-type{border-bottom:0}.modify-row span{display:grid;gap:4px;min-width:0}.modify-row small{color:var(--color-text-subtle);font-size:10px;letter-spacing:.13em;text-transform:uppercase}.modify-row strong{overflow:hidden;color:var(--color-text-strong);font-size:15px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.modify-pencil{flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--color-primary-strong);font-size:19px;line-height:1;cursor:pointer}
.modify-pencil:focus-visible{outline:1px solid var(--color-focus)}