/* V6M Desk layout and components. Depends on tokens.css and base.css. */

body {
  background: var(--cream);
}

.mono {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12px;
}

.app-status {
  max-width: 520px;
  margin: 20vh auto;
  padding: 0 20px;
  text-align: center;
  color: var(--ink-muted);
  line-height: 1.6;
}

.table-scroll {
  /* Anchors absolutely placed children (sr-only labels) so they cannot widen the page. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /*
   * Shadows on whichever edge has more table beyond it. The covering panels
   * scroll with the content ("local"), the shadows do not, so each shadow is
   * hidden until that side is actually scrolled away from.
   */
  background:
    linear-gradient(to right, var(--surface) 40%, rgba(255, 253, 250, 0)) left center,
    linear-gradient(to left, var(--surface) 40%, rgba(255, 253, 250, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(31, 45, 92, 0.14), rgba(31, 45, 92, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(31, 45, 92, 0.14), rgba(31, 45, 92, 0)) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.notice {
  margin-bottom: 20px;
  padding: 10px 14px;
  background: var(--blue-soft);
  color: var(--blue-ink);
  border-radius: var(--radius);
  font-size: 14px;
}

.notice--event {
  background: var(--pink-soft);
  color: var(--pink-ink);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.button-row--end {
  justify-content: flex-end;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.link-button:hover {
  color: var(--orange-strong);
  text-decoration: underline;
}

/* The "or do it the other way" line at the top of the booking drawers. */
.form-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0;
  padding: 10px 12px;
  background: var(--sand);
  border-radius: 10px;
}

.form-aside p {
  flex: 1 1 200px;
  min-width: 0;
}

.form-aside .btn {
  flex: none;
  background: var(--surface);
}

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

.btn--danger-text {
  color: var(--terra);
  align-self: flex-start;
}

.icon {
  flex: none;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--amber-ink);
  font-size: 13px;
  font-weight: 600;
}

.meter {
  display: block;
  height: 6px;
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--radius-pill);
}

.meter > span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: inherit;
}

.meter--thin {
  height: 4px;
}

.empty {
  padding: 28px 20px;
  text-align: center;
}

.empty__title {
  font-weight: 600;
}

.empty__text {
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-muted);
}

/* ---------- Sign in ---------- */

.login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px 16px;
  background: var(--navy);
}

.login__card {
  width: min(480px, 100%);
  padding: 32px;
  background: var(--cream);
  border-radius: 24px;
  box-shadow: var(--shadow-float);
}

.login__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login__eyebrow {
  font-size: 24px;
}

.login__title {
  font-size: 32px;
}

.login__intro {
  margin: 16px 0 20px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ---------- Shell ---------- */

.desk {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 0.3s cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* 70px puts every icon on the rail's centre line without moving it sideways. */
.desk--nav-collapsed {
  grid-template-columns: 70px minmax(0, 1fr);
}

@media (prefers-reduced-motion: reduce) {
  .desk {
    transition: none;
  }
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100vh;
  padding: 20px 14px;
  overflow: hidden;
  background: var(--navy);
  color: #C9D0E6;
}

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

/* Folds the sidebar; sits at its foot, above the account. */
.sidebar__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.sidebar__signout {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
}

.sidebar__toggle:hover,
.sidebar__signout:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sidebar__brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}

.sidebar__brand img {
  padding: 3px;
  background: #fff;
  border-radius: 50%;
}

.sidebar__nav {
  display: grid;
  gap: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-link.is-active {
  background: var(--orange);
  color: #fff;
}

.nav-link__count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Who is signed in, at the foot of the sidebar. */
.sidebar__account {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 3px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  line-height: 1.25;
  white-space: nowrap;
}

.sidebar__who strong {
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__who small {
  font-size: 12px;
}

/*
 * Folded to icons. Nothing changes layout: the rail narrows, the words fade and
 * the rail's edge clips them, so every icon stays exactly where it was. The
 * words stay in the page for screen readers.
 */
.nav-link {
  overflow: hidden;
  white-space: nowrap;
}

.sidebar__brand-name,
.sidebar__toggle-label,
.nav-link__label,
.sidebar__who {
  transition: opacity 0.2s ease;
}

.sidebar__toggle {
  white-space: nowrap;
}

.sidebar__toggle .icon {
  flex: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.desk--nav-collapsed .sidebar__toggle .icon {
  transform: rotate(180deg);
}

.desk--nav-collapsed .sidebar__brand-name,
.desk--nav-collapsed .sidebar__toggle-label,
.desk--nav-collapsed .nav-link__label,
.desk--nav-collapsed .sidebar__who {
  opacity: 0;
  transition-duration: 0.12s;
}

.nav-link .icon,
.sidebar__brand img,
.sidebar__account .avatar {
  flex: none;
}

/* The count rides on the icon's corner instead of the far end of the row. */
.desk--nav-collapsed .nav-link {
  position: relative;
}

.desk--nav-collapsed .sidebar__who {
  flex-basis: 100%;
  height: 0;
}

.desk--nav-collapsed .sidebar__account {
  row-gap: 4px;
}

.desk--nav-collapsed .nav-link__count {
  position: absolute;
  top: 3px;
  left: 26px;
  min-width: 0;
  padding: 0 5px;
  font-size: 10px;
}

.nav-link.is-active .nav-link__count {
  background: #fff;
  color: var(--orange-strong);
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 28px 12px;
  background: rgba(251, 245, 234, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

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

.topbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
}

.topbar__phone-only {
  display: none;
}

/* Notifications: the bell, its count, and the list that drops from it. */
.notif {
  position: relative;
}

.notif__bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.notif__bell:hover,
.notif__bell[aria-expanded="true"] {
  background: rgba(31, 45, 92, 0.08);
}

.notif__bell .icon {
  width: 22px;
  height: 22px;
}

.notif__count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  background: var(--terra);
  color: #fff;
  border: 2px solid var(--cream);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.notif__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: min(400px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 96px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(31, 45, 92, 0.18);
  overflow: hidden;
  animation: rise 0.2s var(--ease-out);
}

/* Both sections scroll together under the bell. */
.notif__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notif__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.notif__head--section {
  border-top: 1px solid var(--line);
}

.notif__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px;
  list-style: none;
}

.notif__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.notif__item:hover,
.notif__item:focus-visible {
  background: var(--cream);
}

.notif__item > .icon {
  flex: none;
  margin-top: 1px;
  color: var(--orange-strong);
}

.notif__item .pill {
  flex: none;
  margin-left: auto;
}

.notif__item--payment {
  background: var(--orange-soft);
}

.notif__item--payment:hover,
.notif__item--payment:focus-visible {
  background: #fbdcc0;
}

.notif__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notif__meta {
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.notif__empty {
  margin: 0;
  padding: 18px 16px;
  color: var(--ink-muted);
  text-align: center;
}

.topbar__who {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.topbar__who strong {
  font-size: 14px;
}

.topbar__who small {
  font-size: 12px;
  color: var(--ink-muted);
}

/* Below 360px, "Demo date ·" goes and the pill keeps just the date. */
@media (max-width: 360px) {
  .topbar__hide-xs {
    display: none;
  }
}

/* The smallest phones (320px) need every pixel of the top bar. */
@media (max-width: 380px) {
  .topbar__actions {
    gap: 2px;
  }


  /* Seven tabs share 320px: each as wide as its name, the room left over
     shared out, so "Dashboard" fits whole and none runs off the edge. */
  .tabbar .tab {
    flex: 1 1 auto;
    padding-inline: 0;
    font-size: 10px;
    letter-spacing: -0.01em;
  }

  .tab__label {
    white-space: nowrap;
  }

  .notif__bell {
    width: 36px;
    height: 36px;
  }

  .topbar__user {
    padding-left: 0;
  }
}

/* Wide enough to take the room a folded sidebar gives back on a laptop screen. */
.page {
  width: 100%;
  max-width: 1600px;
  padding: 28px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 24px;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.page-head__eyebrow {
  font-size: 24px;
  margin-bottom: 2px;
}

.page-head__title {
  font-size: clamp(26px, 3vw, 34px);
}

.page-head__subtitle {
  margin-top: 4px;
  color: var(--ink-muted);
}

/* ---------- Jump between the parts of a long page ---------- */

.jump {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: grid;
  gap: 1px;
  padding: 1px;
  background: var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.jump[hidden] {
  display: none;
}

/* The drawer takes the whole screen's attention, and the page behind it is frozen. */
body.has-drawer .jump {
  display: none;
}

.jump__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 38px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.jump__btn:first-child {
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}

.jump__btn:last-child {
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
}

.jump__btn:hover:not(:disabled) {
  background: var(--cream-deep);
}

.jump__btn:disabled {
  color: var(--ink-hint);
  cursor: default;
}

.tabbar {
  display: none;
}

@media (max-width: 900px) {
  .desk {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    display: none;
  }

  .topbar {
    padding-inline: 16px;
  }

  .topbar__who,
  .topbar__hide-sm {
    display: none;
  }

  .topbar__phone-only {
    display: flex;
  }

  .page {
    padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .tabbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: flex;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
  }

  /* Clear of the bottom tab bar, and off the thumb's way on the right. */
  .jump {
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  .tab {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    text-decoration: none;
    border-radius: 10px;
  }

  .tab .icon {
    width: 22px;
    height: 22px;
  }

  .tab.is-active {
    color: var(--orange-strong);
  }

  .tab__count {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    min-width: 18px;
    padding: 0 5px;
    background: var(--orange);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
  }
}

/* ---------- Panels, metrics, rows ---------- */

.panel {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.panel--flush {
  padding: 0;
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.panel__head--padded {
  margin: 0;
  padding: 16px 20px 8px;
}

.panel__title {
  font-size: 19px;
}

.panel__count {
  min-width: 26px;
  padding: 2px 8px;
  background: var(--cream-deep);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ---------- Dashboard ---------- */

/* Four big cards for today: two across on a phone, four across from a tablet. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

@media (min-width: 760px) {
  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.card:hover {
  border-color: var(--orange);
}

.card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.card__value {
  overflow: hidden;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__detail {
  font-size: 13px;
  color: var(--ink-muted);
}

.card__detail .icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.card--warn {
  background: var(--terra-soft);
  border-color: transparent;
}

.card--warn .card__label,
.card--warn .card__value,
.card--warn .card__detail {
  color: var(--terra-ink);
}

/* Sales beside income and expenses. */
.summary {
  margin-bottom: 24px;
}

.summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.summary__head .segmented {
  margin-bottom: 0;
}

.summary__title {
  font-size: 20px;
}

.summary__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 760px) {
  .summary__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .summary__cols--one {
    grid-template-columns: minmax(0, 1fr);
  }
}

.summary__heading {
  margin-bottom: 4px;
  font-size: 14px;
}

.summary__lines {
  margin: 0;
}

.summary__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

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

.summary__line dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary__line--strong dd {
  font-weight: 600;
}

.summary__line--total {
  border-top: 2px solid var(--ink-muted);
}

.summary__line--total dt,
.summary__line--total dd {
  font-weight: 600;
  color: var(--ink);
}

.summary__line--total dd {
  font-family: var(--font-serif);
  font-size: 20px;
}

.summary__line--warn dt,
.summary__line--warn dd {
  color: var(--terra-ink);
}

/* A profit reads green, a loss red (--warn above). */
.summary__line--good dt,
.summary__line--good dd {
  color: var(--green-ink);
}

.summary__note {
  margin: 0;
}

.summary__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-weight: 600;
}

.summary__more .icon {
  width: 14px;
  height: 14px;
}

/* ---------- Guest summary (side panel) ---------- */

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

.guest-summary__figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.guest-summary__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.guest-summary__value {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.guest-summary__heading {
  margin: 4px 0 6px;
  font-size: 14px;
}

.guest-summary__lines {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.guest-summary__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.guest-summary__line-name {
  flex: 1;
  font-weight: 600;
}

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.row:first-child {
  border-top: 0;
}

/* A row that opens something wherever it is clicked (Availability on the day view). */
.row--click {
  margin: 0 -8px;
  padding-inline: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.row--click:hover {
  background: #FDE7D3;
}

.row__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.row__main:hover .row__title {
  color: var(--orange-strong);
  text-decoration: underline;
}

.row__title {
  font-weight: 600;
}

.row__meta {
  font-size: 13px;
  color: var(--ink-muted);
}

.row__badges {
  display: flex;
  gap: 4px;
}

@media (max-width: 560px) {
  .row {
    flex-wrap: wrap;
  }

  .row__main {
    flex-basis: calc(100% - 24px);
  }

  .row__badges {
    margin-left: 20px;
    margin-right: auto;
  }
}

/* ---------- Calendar ---------- */

.calendar {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 13px;
}

.calendar th,
.calendar td {
  padding: 5px;
  border-bottom: 1px solid var(--line);
}

.calendar thead th {
  padding: 10px 5px;
  text-align: left;
  font-weight: 500;
}

.calendar tbody th {
  padding-left: 16px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.calendar__corner {
  width: 140px;
}

.calendar__weekday {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calendar__day {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
}

.calendar .is-today {
  background: rgba(242, 120, 43, 0.07);
}

.calendar thead .is-today .calendar__day,
.calendar thead .is-today .calendar__weekday {
  color: var(--orange-strong);
}

.cal-chip,
.cal-add,
.cal-pool,
.cal-empty,
.cal-closed {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.cal-chip {
  overflow: hidden;
  padding: 0 8px;
  border: 0;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

span.cal-chip {
  cursor: default;
}

.cal-chip--room { background: var(--orange-soft); color: var(--amber-ink); }
.cal-chip--cottage { background: var(--green-soft); color: var(--green-ink); }
.cal-chip--exclusive { background: var(--navy); color: #fff; }
.cal-chip--event { background: var(--pink-soft); color: var(--pink-ink); }

.cal-chip--hold {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.cal-chip--checked_out {
  background: var(--sand);
  color: var(--sand-ink);
}

.cal-chip:is(button):hover {
  filter: brightness(0.96);
}

.cal-add {
  justify-content: center;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--line-strong);
  cursor: pointer;
}

.cal-add:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--surface);
}

.cal-pool {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  border: 0;
  background: var(--blue-soft);
  color: var(--blue-ink);
  font-weight: 600;
  text-align: left;
}

button.cal-pool {
  cursor: pointer;
}

button.cal-pool:hover {
  background: #CBE1F2;
}

.cal-pool .meter {
  background: rgba(255, 255, 255, 0.7);
}

.cal-empty {
  color: var(--ink-muted);
  padding: 0 8px;
}

.cal-closed {
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--pink-soft) 0 6px, #fff 6px 12px);
  color: var(--pink-ink);
  font-weight: 600;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-muted);
}

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

.legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.legend__swatch--room { background: var(--orange-soft); }
.legend__swatch--cottage { background: var(--green-soft); }
.legend__swatch--exclusive { background: var(--navy); }
.legend__swatch--event { background: var(--pink-soft); }
.legend__swatch--hold { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.legend__swatch--done { background: var(--sand); }

/* ---------- Bookings table ---------- */

.data-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  padding: 12px 16px;
  background: var(--cream);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

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

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table .is-due {
  color: var(--terra);
  font-weight: 600;
}

.data-table__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* The whole row opens the booking; the guest's name stays the keyboard way in. */
.data-table__row {
  cursor: pointer;
}

.data-table__row td {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Today's bookings stay lightly lit, so they stand out in a month or a week. */
.data-table__row.is-today td {
  background: #FFF4E8;
}

.data-table__row.is-today td:first-child {
  box-shadow: inset 4px 0 0 #F7C9A6;
}

.data-table__today {
  color: var(--orange-strong);
  font-weight: 600;
}

/* Pointing at a row, or tabbing to its name, lights the whole row up. */
.data-table__row:hover td,
.data-table__row:focus-within td {
  background: #FDE7D3;
}

.data-table__row:hover td:first-child,
.data-table__row:focus-within td:first-child {
  box-shadow: inset 4px 0 0 var(--orange);
}

.data-table__row:hover .link-button,
.data-table__row:focus-within .link-button {
  color: var(--orange-strong);
}

.data-table__row:active td {
  background: var(--orange-soft);
}

/* An arrow slides in at the end of the row to say it opens. */
.data-table__go {
  width: 40px;
  padding-inline: 0 14px !important;
  color: var(--orange-strong);
  vertical-align: middle !important;
}

.data-table__go .icon {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.2s var(--ease-out);
}

.data-table__row:hover .data-table__go .icon,
.data-table__row:focus-within .data-table__go .icon {
  opacity: 1;
  transform: none;
}

/* ---------- Bookings on phones ---------- */

/* Desktop shows the table, so the phone list stays hidden. */
.booking-list {
  display: none;
}

/*
 * Phones: an eight-column table is a long sideways scroll, so bookings become
 * a day-by-day list of short rows.
 */
/* The list's columns keep their widths whatever rows are showing, so Show all
   adds rows below without the columns jumping to fit the new ones. */
.bookings-table .data-table {
  table-layout: fixed;
}

.bookings-table th:nth-child(1) { width: 20%; }
.bookings-table th:nth-child(2) { width: 18%; }
.bookings-table th:nth-child(3) { width: 13%; }
.bookings-table th:nth-child(4) { width: 14%; }
.bookings-table th:nth-child(5) { width: 10%; }
.bookings-table th:nth-child(6) { width: 10%; }
.bookings-table th:nth-child(7) { width: 15%; }
.bookings-table th:nth-child(8) { width: 44px; }

@media (max-width: 640px) {
  .bookings-table,
  .list-fold {
    display: none;
  }

  .booking-list {
    display: grid;
    gap: 18px;
  }

  .booking-list__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 8px;
    padding-inline: 4px;
    font-family: var(--font-serif);
    font-size: 17px;
    color: var(--navy);
  }

  .booking-list__count {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
  }

  .booking-list__items {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .booking-list__items li + li {
    border-top: 1px solid var(--line);
  }

  .booking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
  }

  .booking-item:active {
    background: var(--cream);
  }

  .booking-item__main {
    display: grid;
    gap: 3px;
    flex: 1;
    min-width: 0;
  }

  .booking-item__name {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .booking-item__meta {
    overflow: hidden;
    font-size: 13px;
    color: var(--ink-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .booking-item__meta .dot {
    display: inline-block;
    margin-right: 2px;
    vertical-align: 1px;
  }

  .booking-item__side {
    display: grid;
    justify-items: end;
    gap: 4px;
    flex-shrink: 0;
    font-size: 13px;
  }

  .booking-item__due {
    font-weight: 600;
    color: var(--terra);
  }

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

/* Phones keep the one-field-per-line layout from base.css. */
@media (min-width: 561px) {
  /* The drawer is narrow, so guest rows go two lines there: name, then the rest. */
  .drawer .guest-row,
  .drawer .guest-row--short {
    grid-template-columns: 22px minmax(0, 1fr) 72px minmax(0, 1.4fr) 32px;
    grid-template-areas:
      "num name name name remove"
      ". gender age remarks .";
    row-gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--line);
  }

  .drawer .guest-row__number { grid-area: num; }
  .drawer .guest-row [name="companionName"] { grid-area: name; }
  .drawer .guest-row [name="companionGender"] { grid-area: gender; }
  .drawer .guest-row [data-field-for="companionGender"] { grid-area: gender; }
  .drawer .guest-row [name="companionAge"] { grid-area: age; }
  .drawer .guest-row [name="companionRemarks"] { grid-area: remarks; }
  .drawer .guest-row__remove { grid-area: remove; }
}

/* ---------- Inbox ---------- */

.segmented {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--cream-deep);
  border-radius: var(--radius-pill);
}

.segmented__option {
  padding: 6px 14px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}

.segmented__option.is-active {
  background: var(--surface);
  color: var(--ink);
}

.inbox {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.5fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .inbox {
    grid-template-columns: minmax(0, 1fr);
  }
}

.inbox__list {
  max-height: 72vh;
  overflow-y: auto;
}

.thread-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.thread-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.thread-item:hover {
  background: var(--cream);
}

.thread-item.is-selected {
  background: var(--orange-soft);
}

.thread-item__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.thread-item__from {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.thread-item__preview {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  color: var(--ink-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.unread-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
}

.channel {
  font-weight: 600;
}

.channel--messenger { color: var(--blue); }
.channel--instagram { color: #C0457A; }
.channel--website { color: var(--orange-strong); }
.channel--phone { color: var(--green); }

.thread {
  display: grid;
  gap: 14px;
}

.thread__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.thread__from {
  font-size: 22px;
}

.bubble {
  padding: 12px 14px;
  background: var(--cream);
  border-radius: 4px 16px 16px 16px;
  line-height: 1.6;
  white-space: pre-line;
}

.linked-booking {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--green-soft);
  border-radius: var(--radius);
  background: #F4F9F2;
  color: var(--green-ink);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.linked-booking span {
  flex: 1;
}

.reply {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

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

.chip {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--orange);
  color: var(--orange-strong);
}

/* ---------- Events ---------- */

.pipeline {
  display: grid;
  grid-auto-columns: minmax(250px, 1fr);
  grid-auto-flow: column;
  gap: 14px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pipeline__column {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  background: var(--cream-deep);
  border-radius: var(--radius-lg);
}

/* Each stage is a card like the dashboard's: it lifts, and opens its summary. */
.pipeline__column {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 0.2s ease, background-color 0.15s ease;
}

.pipeline__column:hover {
  background: #EFE3CC;
  box-shadow: 0 10px 24px rgba(31, 45, 92, 0.1);
  transform: translateY(-3px);
}

.pipeline__more {
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.pipeline__more:hover {
  background: var(--surface);
  border-color: var(--orange);
  color: var(--ink);
}

.pipeline__head {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 2px 4px 4px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pipeline__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pipeline__title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
}

.pipeline__sum {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-muted);
}

.pipeline__sum .icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.pipeline__column:hover .pipeline__sum .icon {
  transform: translateX(3px);
}

/* A booked event card opens its booking from anywhere on it. */
.event-card--opens {
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.event-card--opens:hover {
  box-shadow: 0 8px 18px rgba(31, 45, 92, 0.12);
  transform: translateY(-2px);
}

.pipeline__head .panel__count {
  background: var(--surface);
}

.pipeline__empty {
  padding: 12px 4px;
  font-size: 13px;
  color: var(--ink-muted);
}

.event-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--surface);
  border-radius: var(--radius);
  border-top: 4px solid var(--pink);
}

.event-card__date {
  font-size: 12px;
  font-weight: 600;
  color: var(--pink-ink);
}

.event-card__title {
  font-size: 18px;
}

.event-card__money {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.event-card__money .meter > span {
  background: var(--green);
}

.event-card__note {
  padding: 6px 10px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.event-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

/* ---------- Drawer ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 33, 74, 0.45);
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  background: var(--cream);
  box-shadow: var(--shadow-float);
  outline: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px;
  border-bottom: 1px solid var(--line);
}

.drawer__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer__tools {
  display: flex;
  flex: none;
  gap: 6px;
}

.drawer__tools:empty {
  display: none;
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

body.has-drawer {
  overflow: hidden;
}

.detail {
  display: grid;
  gap: 18px;
}

.detail__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.detail__status .mono {
  margin-left: auto;
}

.detail-actions {
  display: grid;
  gap: 10px;
}

.detail-section__title {
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 4px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.facts__row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.facts__row:last-child {
  border-bottom: 0;
}

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

.facts__row dd {
  margin: 0;
}

.line-items {
  display: grid;
  margin: 0;
  font-size: 14px;
}

.line-items__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.line-items__row dt .muted {
  font-size: 12px;
}

.line-items__row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.line-items__row--discount {
  color: var(--green);
}

.line-items__row--total {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px dashed var(--line-strong);
  font-weight: 600;
}

.line-items__row--balance {
  font-weight: 600;
}

.line-items__row--balance.is-due {
  color: var(--terra);
}

.plain-list,
.timeline {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plain-list__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.plain-list__row .small {
  display: block;
}

.plain-list__row {
  flex-wrap: wrap;
}

.plain-list__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* The expense form's category list: add a name inline, delete with the bin. */
.inline-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inline-add .input {
  flex: 1 1 auto;
  min-width: 0;
}

.cat-edit-toggle {
  justify-self: start;
  font-size: 13px;
  color: var(--orange-strong);
}

.cat-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 4px 6px 4px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.cat-list__delete {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.cat-list__delete:hover {
  background: var(--terra-soft);
  color: var(--terra-ink);
}

.cat-list__delete .icon {
  width: 16px;
  height: 16px;
}

/* Extend stay: how many more nights, with − and + either side. */
.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stepper__value {
  min-width: 120px;
  text-align: center;
  font-size: 15px;
}

/* A guest's GCash receipt waiting in the booking drawer for staff to confirm. */
.pay-check {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--orange-soft);
  border: 1px solid #f3c59a;
  border-radius: var(--radius);
}

.pay-check__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pay-check__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--amber-ink);
}

.pay-check__body {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.pay-check__body.is-large {
  grid-template-columns: minmax(0, 1fr);
}

.pay-check__receipt {
  position: relative;
  display: block;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
}

.is-large .pay-check__receipt {
  justify-self: center;
  max-width: 360px;
  cursor: zoom-out;
}

.pay-check__zoom {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 8px;
  background: rgba(31, 45, 92, 0.78);
  color: #fff;
  border-radius: var(--radius-pill);
}

.receipt-view {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.pay-check__body:not(.is-large) .receipt-view {
  max-height: 200px;
  object-fit: cover;
  object-position: top;
}

.plain-list__full {
  flex-basis: 100%;
}

.receipt-view--inline {
  max-width: 280px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.pay-check__facts {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 14px;
}

.pay-check__facts div {
  display: grid;
  gap: 0;
}

.pay-check__facts dt {
  font-size: 12px;
  color: var(--ink-muted);
}

.pay-check__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.pay-check .button-row {
  align-items: center;
}

.pay-check .form-error {
  margin: 0;
}

.timeline li {
  display: grid;
  gap: 1px;
  padding-left: 14px;
  border-left: 2px solid var(--line-strong);
  font-size: 14px;
}

.action-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.action-card--danger {
  border-color: var(--terra-soft);
  background: #FFF8F6;
}

.action-card__title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
}

.action-card .btn--secondary {
  justify-self: start;
}

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

.booking-form {
  display: grid;
  gap: 18px;
}

.form-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-section__title {
  margin-bottom: 2px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.quote-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.quote-box__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.quote-box .btn--quiet {
  justify-self: start;
  padding-inline: 0;
  color: var(--orange-strong);
}

/* ---------- Alerts ---------- */

/*
 * Bottom right, just left of the jump buttons so the two never overlap. The
 * newest lands at the bottom and pushes the older ones up.
 */
.alerts {
  position: fixed;
  right: 76px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

/* With a side panel open, stack beside it rather than over its Save button. */
body.has-drawer .alerts {
  right: calc(min(480px, 100%) + 20px);
}

/* Phones: above the tab bar, across the screen. */
@media (max-width: 900px) {
  .alerts,
  body.has-drawer .alerts {
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

.alert {
  --tone: var(--green);
  --tone-soft: #E3F1E1;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow: hidden;
  padding: 14px 12px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--tone);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  pointer-events: auto;
  animation: alert-in 0.36s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.alert--info { --tone: var(--blue); --tone-soft: var(--blue-soft); }

/* A pop-up that goes somewhere when clicked (a new GCash receipt). */
.alert--link {
  cursor: pointer;
}

.alert--link:hover {
  background: var(--cream);
}
.alert--warning { --tone: var(--orange); --tone-soft: var(--orange-soft); }
.alert--error { --tone: var(--terra); --tone-soft: var(--terra-soft); }

.alert__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--tone-soft);
  border-radius: 50%;
  color: var(--tone);
}

.alert__icon .icon {
  width: 16px;
  height: 16px;
}

.alert__text {
  flex: 1;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.alert__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ink-muted);
  cursor: pointer;
}

.alert__close:hover {
  background: var(--cream-deep);
  color: var(--ink);
}

.alert__close .icon {
  width: 16px;
  height: 16px;
}

/* How long is left, draining along the bottom; it waits while pointed at. */
.alert__timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--tone);
  opacity: 0.35;
  transform-origin: left;
  animation: alert-timer var(--stay, 4000ms) linear forwards;
}

.alert:hover .alert__timer {
  animation-play-state: paused;
}

.alert.is-leaving {
  animation: alert-out 0.2s ease-in forwards;
}

@keyframes alert-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes alert-out {
  to { opacity: 0; transform: translateX(24px); }
}

@keyframes alert-timer {
  to { transform: scaleX(0); }
}

/* ---------- Number and amount fields ---------- */

.input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.input[type='number']::-webkit-outer-spin-button,
.input[type='number']::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.input--amount {
  font-variant-numeric: tabular-nums;
}

/* ---------- Sign in extras ---------- */

.login__invite-toggle {
  margin-top: 16px;
}

/* ---------- Period controls and changes (dashboard summary) ---------- */

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

.stat__change {
  font-weight: 600;
}

.stat__change--up { color: var(--green-ink); }
.stat__change--down { color: var(--terra-ink); }

/* ---------- Trend chart ---------- */

.trend {
  margin: 0;
}

.chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  align-items: end;
  height: 150px;
  margin-bottom: 6px;
}

.chart__col {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  height: 100%;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.chart__col.is-now {
  background: var(--sand);
}

.chart__col:hover {
  background: var(--cream-deep);
}

.chart__col.is-pinned {
  background: var(--blue-soft);
}

.chart__col.is-pinned .chart__label {
  color: var(--blue-ink);
  font-weight: 600;
}

.chart__readout {
  margin-top: 4px;
  min-height: 20px;
  font-variant-numeric: tabular-nums;
}

.chart__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100%;
}

.chart__bar {
  display: block;
  flex: 1 1 0;
  max-width: 16px;
  min-height: 0;
  border-radius: 3px 3px 0 0;
}

.chart__bar--booked { background: var(--blue); }
.chart__bar--collected,
.chart__bar--in { background: var(--green); }
.chart__bar--out { background: var(--orange); }

.chart__label {
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart__col.is-now .chart__label {
  color: var(--orange-strong);
  font-weight: 600;
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chart__key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.chart__key--booked { background: var(--blue); }
.chart__key--collected,
.chart__key--in { background: var(--green); }
.chart__key--out { background: var(--orange); }

@media (min-width: 1100px) {
  .chart {
    height: 190px;
  }
}

/* ---------- Calendar controls ---------- */

.calendar-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.calendar-bar .segmented,
.page-head__actions .segmented {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .calendar-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* Full-width range toggle: thumb-sized targets instead of small ones. */
  .calendar-bar .segmented {
    display: grid;
    width: 100%;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  .calendar-bar .segmented__option {
    min-height: 40px;
  }

  .calendar-bar .button-row {
    justify-content: space-between;
  }
}

.chip {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}

/* ---------- Week on a narrow screen: a day strip over the day itself ---------- */

.week-narrow {
  display: none;
}

@media (max-width: 720px) {
  .week-wide {
    display: none;
  }

  .week-narrow {
    display: block;
  }

  /* The legend explains the grid's chips, and the grid is not on screen here. */
  .legend {
    display: none;
  }

  /* Availability lines are short: keep the name and the button on one line. */
  .day-grid .row {
    flex-wrap: nowrap;
  }

  .day-grid .row__main {
    flex-basis: auto;
  }
}

.day-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(46px, 1fr);
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.day-strip__day {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  scroll-snap-align: center;
}

.day-strip__weekday {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.day-strip__date {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
}

/* The busy-ness mark: how many bookings, or × when the day is closed. */
.day-strip__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-ink);
  background: var(--blue-soft);
}

.day-strip__mark:empty {
  background: none;
}

.day-strip__mark.is-closed {
  background: var(--pink-soft);
  color: var(--pink-ink);
}

.day-strip__day.is-today .day-strip__date {
  color: var(--orange-strong);
}

.day-strip__day.is-picked {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

/* ---------- The month and year, and the pop-up behind them ---------- */

.period {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* A fixed width, so the arrows either side stay put whatever the label says. */
.period__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 196px;
  padding: 6px 10px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.period__label:hover {
  background: var(--cream-deep);
}

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

.period__day {
  margin: 0 0 0 6px;
  font-size: 17px;
}

/* A day in the week grid's heading opens that day. */
.calendar__head-day {
  display: block;
  width: 100%;
  padding: 2px 4px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar__head-day:hover {
  background: var(--cream-deep);
}

/* ---------- Month view ---------- */

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

.month__weekday {
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.month__cell {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 92px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* Any part of a day opens it; its + still starts a booking. */
.month__cell:not(.month__cell--blank) {
  cursor: pointer;
}

.month__cell--blank {
  border-color: transparent;
}

.month__count {
  display: none;
}

@media (max-width: 720px) {
  .month {
    gap: 4px;
    padding: 8px;
  }

  .month .month__cell {
    min-height: 58px;
    padding: 4px;
  }

  /* 47px cells have no room for "3 bookings" or a second button: tapping the
     date opens the day, and booking happens from there. */
  .month .month__add,
  .month .month__summary-text {
    display: none;
  }

  .month .month__count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
  }

  .month .month__head {
    justify-content: center;
  }

  /* The event name does not fit; it becomes a marker bar you can tap. */
  .month .month__event {
    font-size: 0;
    min-height: 7px;
    padding: 0;
  }
}

.month__cell.is-today {
  border-color: var(--orange);
  background: rgba(242, 120, 43, 0.06);
}

.month__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.month__date {
  padding: 2px 6px;
  border: 0;
  background: none;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.month__date:hover {
  color: var(--orange-strong);
}

.month__add {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--line-strong);
  cursor: pointer;
}

.month__add:hover {
  background: var(--orange-soft);
  color: var(--orange-strong);
}

.month__event {
  font-size: 11px;
}

.month__summary {
  display: grid;
  gap: 1px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--blue-soft);
  color: var(--blue-ink);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.month__summary:hover {
  background: #CBE1F2;
}

@media (max-width: 720px) {
  .month__cell {
    min-height: 70px;
    padding: 4px;
  }

  .month__summary strong {
    font-size: 11px;
  }

  .month__summary .small {
    display: none;
  }
}

/* ---------- Users ---------- */

.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.user-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.user-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-card__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-card__head .pill {
  margin-left: auto;
}

.user-card__form {
  display: grid;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.user-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.invite-form {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.invite-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--green-soft);
  border-radius: var(--radius-lg);
}

.invite-banner__code {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--green-ink);
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 8px;
}

.permission {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}

.permission:hover {
  border-color: var(--orange);
}

.permission input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--orange);
}

.permission span {
  display: grid;
}

/* ---------- Booking links ---------- */

.link-code {
  padding: 10px 12px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  font-size: 12px;
  word-break: break-all;
}

/* ---------- Sign-in form ---------- */

.login__form {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.login__demos {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--cream-deep);
  border-radius: var(--radius);
}

.demo-account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
}

.demo-account:hover {
  border-color: var(--line-strong);
}

.demo-account > svg {
  flex: none;
  color: var(--ink-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.demo-account:hover > svg {
  color: var(--ink);
  transform: translateX(2px);
}

.demo-account__text {
  display: grid;
  flex: 1 1 60%;
  min-width: 0;
}

/* Downpayment */

.line-items__row--downpayment {
  font-weight: 600;
}

.line-items__row--downpayment.is-due,
.quote-box .is-due {
  color: var(--terra-ink);
}

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

/* Manual discounts */

.line-items__note {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
}

.discount-fields {
  display: grid;
  gap: 12px;
}

/* Brochure refresh: exclusive rentals, guest list, additional charges */

.notice--exclusive {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.cal-closed--exclusive {
  color: var(--orange-strong);
  font-weight: 600;
}

.detail-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.guest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.guest-table th {
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
}

.guest-table td {
  padding: 6px;
  border-bottom: 1px solid var(--line);
}

.guest-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.guest-list-form {
  display: grid;
  gap: 10px;
}

.extra-rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.extra-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 32px;
  grid-template-areas: "kind amount remove";
  gap: 6px;
  align-items: center;
}

/* "Other…" adds a second line to type the charge on. */
.extra-row--custom {
  grid-template-areas:
    "kind amount remove"
    "label label label";
  row-gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}

.extra-row [name="extraKind"] { grid-area: kind; }
.extra-row [name="extraAmount"] { grid-area: amount; }
.extra-row .guest-row__remove { grid-area: remove; }
.extra-row__label { grid-area: label; }

.cal-chip--exclusive.cal-chip--hold {
  background: var(--surface);
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}

/* ---------- Motion ----------
 * Only what components/motion.ts marks as new animates, so a redraw never
 * replays these. Everything stops for readers who ask for less motion. */

:root {
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes fade {
  from { opacity: 0; }
}

@keyframes from-right {
  from { opacity: 0; transform: translateX(24px); }
}

@keyframes from-left {
  from { opacity: 0; transform: translateX(-24px); }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.97); }
}

@keyframes zoom-out {
  from { opacity: 0; transform: scale(1.03); }
}

/* A page arrives in a short cascade, top to bottom. */
.page--enter > * {
  animation: rise 0.42s var(--ease-out) backwards;
}

.page--enter > :nth-child(2) { animation-delay: 0.04s; }
.page--enter > :nth-child(3) { animation-delay: 0.08s; }
.page--enter > :nth-child(4) { animation-delay: 0.12s; }
.page--enter > :nth-child(5) { animation-delay: 0.16s; }
.page--enter > :nth-child(n + 6) { animation-delay: 0.2s; }

/* The dashboard's cards follow each other in. */
.page--enter .card {
  animation: rise 0.45s var(--ease-out) backwards;
}

.page--enter .card:nth-child(2) { animation-delay: 0.06s; }
.page--enter .card:nth-child(3) { animation-delay: 0.12s; }
.page--enter .card:nth-child(4) { animation-delay: 0.18s; }

/* A new period slides in from the side it came from; a day opens out of it. */
.is-entering[data-motion="on"] { animation: from-right 0.3s var(--ease-out); }
.is-entering[data-motion="back"] { animation: from-left 0.3s var(--ease-out); }
.is-entering[data-motion="in"] { animation: zoom-in 0.28s var(--ease-out); }
.is-entering[data-motion="out"] { animation: zoom-out 0.28s var(--ease-out); }
.is-entering[data-motion="swap"],
[data-enter].is-entering:not([data-motion]) { animation: fade 0.3s ease; }

/* Figures that changed window rise into place. */
.summary__cols.is-entering .summary__line {
  animation: rise 0.35s var(--ease-out) backwards;
}

.summary__cols.is-entering .summary__line:nth-child(2) { animation-delay: 0.03s; }
.summary__cols.is-entering .summary__line:nth-child(3) { animation-delay: 0.06s; }
.summary__cols.is-entering .summary__line:nth-child(4) { animation-delay: 0.09s; }
.summary__cols.is-entering .summary__line:nth-child(5) { animation-delay: 0.12s; }

/* The month's days ripple in when the month changes. */
.is-entering .month__cell {
  animation: fade 0.35s ease backwards;
}

/* Side panel: slides in, and back out before it hides. */
.drawer:not([hidden]) .drawer__backdrop { animation: fade 0.22s ease; }
.drawer:not([hidden]) .drawer__panel { animation: drawer-in 0.32s var(--ease-out); }
.drawer.is-leaving .drawer__backdrop { animation: fade-out 0.18s ease forwards; }
.drawer.is-leaving .drawer__panel { animation: drawer-out 0.18s ease-in forwards; }

@keyframes drawer-in {
  from { transform: translateX(100%); }
}

@keyframes drawer-out {
  to { transform: translateX(100%); }
}

@keyframes fade-out {
  to { opacity: 0; }
}

.drawer__body.is-swapping {
  animation: from-right 0.26s var(--ease-out);
}

/* Pop-ups spring open; the backdrop fades in under them. */
dialog.is-entering {
  animation: pop 0.26s var(--ease-spring);
}

dialog.is-entering::backdrop {
  animation: fade 0.22s ease;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
}

/* Hover and press: things that open something lift a little toward the pointer. */
.btn {
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.btn:active {
  transform: scale(0.97);
}

.card,
.month__cell,
.nav-link,
.segmented__option,
.data-table td,
.row__main,
.notif__item,
.calendar__head-day,
.period__label {
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, color 0.15s ease, transform 0.2s var(--ease-out);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(31, 45, 92, 0.1);
}

.card:active {
  transform: translateY(-1px);
}

.month__cell:not(.month__cell--blank):hover {
  border-color: var(--orange);
  box-shadow: 0 6px 16px rgba(31, 45, 92, 0.08);
}

.segmented__option:active {
  transform: scale(0.94);
}

.nav-link:hover .icon {
  transform: translateX(2px);
}

.nav-link .icon {
  transition: transform 0.2s var(--ease-out);
}

.notif__item:hover {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  dialog::backdrop {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Bookings list: the calendar's bar with a search in it ---------- */

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

.list-search {
  position: relative;
  display: flex;
  align-items: center;
}

.list-search .icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
  pointer-events: none;
}

.list-search .input {
  width: 240px;
  min-height: 38px;
  padding-left: 36px;
  border-radius: var(--radius-pill);
}

/*
 * With the whole list open, a small round button stays at the bottom of the
 * window (sticky within the list, so it settles under the table at the end).
 * Pointing at it opens it out to say what it does; Esc does the same.
 */
.list-fold {
  position: sticky;
  bottom: 20px;
  z-index: 5;
  display: flex;
  justify-content: center;
  height: 0;
  margin-top: 64px;
  pointer-events: none;
}

.list-fold__button {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 44px;
  min-width: 44px;
  margin-top: -54px;
  padding: 0 13px;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(31, 45, 92, 0.25);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  animation: rise 0.24s var(--ease-out);
}

.list-fold__button .icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.list-fold__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  /* Unhurried: the label slides out, then fades in once there is room for it. */
  transition: max-width 0.7s var(--ease-out), opacity 0.45s ease 0.2s, margin 0.7s var(--ease-out);
}

.list-fold__button:hover .list-fold__label,
.list-fold__button:focus-visible .list-fold__label {
  max-width: 160px;
  margin-left: 8px;
  opacity: 1;
}

.list-fold__label kbd {
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  font: inherit;
  font-size: 11px;
}

/* ---------- Finances: the month's books ---------- */

.fin-body {
  display: grid;
  gap: 16px;
}

/* Three totals in one strip, ruled like a ledger's summary line. */
.fin-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.fin-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
}

.fin-total + .fin-total {
  border-left: 1px solid var(--line);
}

.fin-total__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.fin-total__value {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.fin-total__value small {
  margin-left: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}

.fin-total--loss .fin-total__label,
.fin-total--loss .fin-total__value {
  color: var(--terra-ink);
}

.fin-total--profit .fin-total__label,
.fin-total--profit .fin-total__value {
  color: var(--green-ink);
}

.chart--short {
  height: 120px;
}

@media (min-width: 1100px) {
  .chart--short {
    height: 140px;
  }
}

.fin-ledger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.fin-ledger__head .panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fin-ledger__head .segmented {
  margin-bottom: 0;
}

/* The ledger needs no minimum width beyond its seven short columns. */
.fin-table {
  min-width: 0;
}

.fin-table tfoot th,
.fin-table tfoot td {
  padding: 12px 16px;
  background: var(--cream);
  border-top: 2px solid var(--line-strong);
  font-weight: 600;
  text-align: left;
}

.fin-table tfoot .num {
  text-align: right;
}

.fin-in { color: var(--green-ink); }
.fin-out { color: var(--ink); }
.fin-owed { color: var(--terra); font-weight: 600; }

.fin-table td.muted {
  color: var(--ink-muted);
}

.fin-table--compact td,
.fin-table--compact th {
  padding: 10px 16px;
}

.fin-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .fin-sides,
  .fin-totals {
    grid-template-columns: minmax(0, 1fr);
  }

  .fin-total + .fin-total {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* A category's spending against the biggest one, inside its table row. */
.fin-bar-cell {
  width: 40%;
  vertical-align: middle !important;
}

.fin-bar {
  display: block;
  height: 8px;
  background: var(--cream-deep);
  border-radius: 4px;
}

.fin-bar > span {
  display: block;
  height: 100%;
  background: var(--orange);
  border-radius: 4px;
}

.fin-empty {
  padding: 8px 20px 18px;
}

/* The last row of a capped table: Show all / Show fewer. */
.fin-more td {
  padding: 6px 12px !important;
  text-align: center;
  background: var(--surface);
}

.fin-more .btn {
  color: var(--orange-strong);
}

/* ---------- Packages ---------- */

.pkg-tab-count {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
}

.pkg-body {
  margin-bottom: 20px;
}

/* Three to a row on a desktop screen. */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1100px) {
  .pkg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pkg-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pkg-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.2s cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 0.2s ease, border-color 0.15s ease;
}

.pkg-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 10px 24px rgba(31, 45, 92, 0.08);
  transform: translateY(-2px);
}

.pkg-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.pkg-card__name {
  font-size: 17px;
}

.pkg-card__tag {
  flex: none;
  padding: 2px 10px;
  background: var(--cream-deep);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.pkg-card__price {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pkg-card__price small {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}

.pkg-card__facts {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 13px;
}

.pkg-card__facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pkg-card__facts dt {
  color: var(--ink-muted);
}

.pkg-card__facts dd {
  margin: 0;
  text-align: right;
}

.pkg-card__promo {
  min-height: 26px;
  margin: 2px 0 0;
}

.pkg-promo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--green-soft, #E3F1E1);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--green-ink);
}

.pkg-promo .icon {
  width: 14px;
  height: 14px;
}

/* On a promotion that is paused, ended or still to start: present, but not taking effect. */
.pkg-promo.is-idle {
  background: var(--cream-deep);
  color: var(--ink-muted);
}

.pkg-card__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.pkg-card__edit {
  flex: 1;
}

.pkg-card__delete {
  color: var(--terra);
}

.pkg-card__delete:hover {
  background: var(--terra-soft);
}

/* ---------- The promotion picker in a package's panel ---------- */

.form-section__hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.promo-options {
  display: grid;
  gap: 8px;
}

.promo-option {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.promo-option:hover {
  border-color: var(--line-strong);
}

.promo-option.is-ticked {
  background: #FFF4E8;
  border: 1.5px solid var(--orange);
}

.promo-option__tick {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.promo-option__tick > .icon {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 3px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-muted);
}

.promo-option.is-ticked .promo-option__tick > .icon {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.promo-option__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.promo-option__text strong {
  font-size: 14px;
}

.promo-option__text .small {
  color: var(--ink-muted);
}

.promo-option__edit {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 12px 12px 0;
  color: var(--ink-muted);
  cursor: pointer;
}

.promo-option__edit:hover {
  background: var(--cream-deep);
  color: var(--ink);
}

.promo-option--new {
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-style: dashed;
  color: var(--ink-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.promo-option--new:hover {
  color: var(--orange-strong);
  border-color: var(--orange);
}

.promo-editor {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1.5px solid var(--blue);
  border-radius: 12px;
  animation: rise 0.25s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.weekday-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.weekday-picks legend {
  margin-bottom: 6px;
}

.weekday-pick {
  position: relative;
}

.weekday-pick input {
  position: absolute;
  opacity: 0;
}

.weekday-pick span {
  display: inline-block;
  min-width: 44px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.weekday-pick input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.weekday-pick input:focus-visible + span {
  box-shadow: var(--focus-ring);
}

/* Today: one tap to today's bookings alone, from the month, the week or another day. */
.period__today {
  margin-left: 4px;
}

.period__today-tag {
  margin-left: 4px;
  padding: 3px 10px;
  background: var(--orange-soft);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--orange-strong);
}

/* ---------- Form fixes: new buttons in old layouts ---------- */

/* Layouts place fields by name; the buttons over dropdowns go where their field went.
 * (The guest list's gender button only has a named place in the side panel's narrow layout,
 * which places it there itself; elsewhere the rows are plain columns.) */
.extra-row [data-field-for="extraKind"] { grid-area: kind; }

/* Stay: booking and date on their own lines, then adults, kids and SC / PWD in a row. */
.form-grid--stay {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid__wide {
  grid-column: 1 / -1;
}

/* "+ Add a charge", "+ Add an add-on": on the left like "+ Add a guest", not stretched. */
.form-section > .btn {
  justify-self: start;
}

/* ---------- Time picker ---------- */

.timepick {
  padding: 8px;
  overflow: visible;
}

.timepick__cols {
  display: grid;
  grid-template-columns: 64px 64px 64px;
  gap: 6px;
}

.timepick__col {
  display: grid;
  align-content: start;
  gap: 2px;
  max-height: 216px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.timepick__col--half {
  max-height: none;
}

.timepick__item {
  justify-content: center;
  padding: 7px 0;
  font-variant-numeric: tabular-nums;
}

.timepick__item.is-selected {
  background: var(--navy);
  color: #fff;
}

.timepick__item.is-selected:hover,
.timepick__item.is-selected:focus-visible {
  background: var(--navy);
}

.timepick__foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.timepick__foot .btn:first-child {
  margin-right: auto;
}

.field-trigger--time .icon:first-child {
  color: var(--orange-strong);
}

/* Suggestions under a text field: the same list, without a check mark. */
.menu--suggest {
  max-height: 260px;
}

.menu.is-anchored {
  position: fixed;
}

/* ---------- Ledger report pop-up ----------
 * Finances' Download report: a pop-up in the middle of the screen, the same
 * card as the date picker, with a fixed head and foot and a scrolling middle:
 * choose the period, then a paper-like preview of the PDF. */

.report-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  background: var(--surface);
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  color: var(--ink);
  overflow: hidden;
}

.report-modal[open] {
  display: flex;
  flex-direction: column;
}

.report-modal::backdrop {
  background: rgba(31, 45, 92, 0.45);
}

.report-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.report-modal__step {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.report-modal__main {
  display: grid;
  /* Each part keeps its full height and the middle scrolls; without this the
     preview (which clips its own overflow) is squeezed to fit and its rows are cut off. */
  grid-auto-rows: max-content;
  gap: 16px;
  min-height: 0;
  padding: 16px 18px;
  overflow-y: auto;
}

.report-modal__section {
  display: grid;
  gap: 8px;
}

.report-modal__section .segmented {
  justify-self: start;
}

.report-modal__months {
  max-width: 420px;
}

.report-modal__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.report-modal__line .link-button {
  color: var(--orange-strong);
  font-size: 13px;
}

.report-modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--line);
}

.report-modal__spacer {
  flex: 1;
}

/* The "Are you sure?" pop-up before anything is deleted or cancelled. */
.confirm-modal {
  width: min(440px, calc(100vw - 32px));
}

.confirm-modal .report-modal__head {
  border-bottom: 0;
  padding-bottom: 0;
}

.confirm-modal .report-modal__main {
  padding-top: 8px;
}

.confirm-modal .report-modal__foot {
  border-top: 0;
  padding-top: 4px;
}

/* Points about a GCash receipt worth a second look, on the receipt card and in its pop-up. */
.pay-check__warn,
.confirm-modal__warn {
  padding: 10px 12px;
  background: var(--orange-soft);
  border-radius: var(--radius-sm);
  color: var(--amber-ink);
  font-size: 14px;
}

.pay-check__warn-title,
.confirm-modal__warn-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-weight: 600;
}

.pay-check__warn-title .icon,
.confirm-modal__warn-title .icon {
  width: 16px;
  height: 16px;
}

.pay-check__warn ul,
.confirm-modal__warn ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  line-height: 1.45;
}

.confirm-modal__message {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* Finances' Show all: the whole table in the same pop-up, its head kept in view. */
.table-modal {
  width: min(880px, calc(100vw - 32px));
}

/* The owed table has three columns: a narrower card. */
.table-modal:has(.fin-table--compact) {
  width: min(560px, calc(100vw - 32px));
}

.table-modal__main {
  min-height: 0;
  overflow: auto;
}

.table-modal__main .data-table {
  min-width: 0;
}

.table-modal__main thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line);
}

/* The totals stay in view at the bottom while the rows scroll. */
.table-modal__main tfoot th,
.table-modal__main tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--line);
}

/* The preview: the PDF's page in miniature. */
.report-paper {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(31, 45, 92, 0.08);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

.report-paper__band {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--navy);
  color: #fff;
}

.report-paper__band > div {
  display: grid;
  gap: 2px;
}

.report-paper__brand {
  font-size: 18px;
}

.report-paper__address,
.report-paper__kind span {
  font-size: 10px;
  opacity: 0.85;
}

.report-paper__kind {
  text-align: right;
}

.report-paper__page {
  display: grid;
  gap: 12px;
  padding: 14px 18px 16px;
}

.report-paper__title {
  color: var(--orange-strong);
  font-size: 13px;
  font-weight: 700;
}

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

.report-paper__box {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  background: #FAF5EB;
}

.report-paper__box span {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-muted);
}

.report-paper__box strong {
  font-size: 15px;
}

.report-paper__table {
  width: 100%;
  border-collapse: collapse;
}

.report-paper__table th {
  padding: 5px 6px;
  background: #F0EBDE;
  font-size: 9px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.report-paper__table td {
  padding: 6px;
  border-bottom: 1px solid #E8E2D4;
  vertical-align: top;
}

.report-paper__table td:first-child {
  white-space: nowrap;
}

.report-paper__table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.report-paper__table tfoot th,
.report-paper__table tfoot td {
  padding-top: 8px;
  background: none;
  border-bottom: 0;
  border-top: 1px solid var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  color: var(--ink);
}

.report-paper__sub {
  display: block;
  font-size: 10px;
  color: var(--ink-muted);
}

.report-paper__empty {
  padding: 12px 0;
  color: var(--ink-muted);
}

.report-paper__foot {
  font-size: 10px;
  color: var(--ink-muted);
}

@media (max-width: 560px) {
  .report-paper__totals {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-modal__foot .btn {
    flex: 1 1 auto;
  }

  .report-modal__spacer {
    display: none;
  }
}

/* ---------- Phones: the desk in one hand ----------
 * Everything above is laid out for a desk; these rules reshape the parts that
 * do not fit a phone held upright. Kept together so they read as one pass. */

@media (max-width: 640px) {
  /* The notifications drop across the screen under the top bar, not off its edge. */
  .notif__panel {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100dvh - 64px - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  /* A thumb scrolls a phone page; the corner buttons would only cover the list under them. */
  .jump {
    display: none;
  }

  /* Bookings list: the search gets its own line, Month / Week the next. */
  .calendar-bar__end {
    flex-wrap: wrap;
  }

  .calendar-bar__end .list-search {
    flex: 1 1 100%;
  }

  .calendar-bar__end .list-search .input {
    width: 100%;
  }

  .calendar-bar__end .segmented {
    flex: 1 1 100%;
  }

  /* Packages: the four kinds in a two-by-two grid, each name on one line. */
  .calendar-bar [role="tablist"].segmented {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-radius: 18px;
  }

  .calendar-bar [role="tablist"].segmented .segmented__option {
    border-radius: 14px;
    white-space: nowrap;
  }

  /* Events: the stages one under the other, not a board to swipe sideways. */
  .pipeline {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  /* Finances' ledger: each entry on two lines. What and the amount on top;
     the date, category and method under it. */
  .fin-ledger .data-table {
    min-width: 0;
  }

  .fin-ledger thead {
    display: none;
  }

  .fin-ledger tbody tr.data-table__row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: 6px;
    row-gap: 2px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }

  .fin-ledger tbody tr.data-table__row td {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .fin-ledger tbody tr.data-table__row.is-today td {
    background: none;
    box-shadow: none;
  }

  .fin-ledger tbody tr.data-table__row.is-today {
    padding-left: 18px;
    background: #FFF4E8;
    box-shadow: inset 4px 0 0 #F7C9A6;
  }

  /* The ledger's head: its title, then All / Income / Expenses across the width. */
  .fin-ledger__head {
    flex-wrap: wrap;
  }

  .fin-ledger__head .segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: 100%;
  }

  .fin-ledger tbody tr.data-table__row td:nth-child(2) { grid-column: 1 / 4; grid-row: 1; }
  .fin-ledger tbody tr.data-table__row td:nth-child(5),
  .fin-ledger tbody tr.data-table__row td:nth-child(6) { grid-column: 4; grid-row: 1; }
  .fin-ledger tbody tr.data-table__row td:nth-child(1),
  .fin-ledger tbody tr.data-table__row td:nth-child(3),
  .fin-ledger tbody tr.data-table__row td:nth-child(4) {
    grid-row: 2;
    font-size: 12px;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .fin-ledger tbody tr.data-table__row td:nth-child(3)::before,
  .fin-ledger tbody tr.data-table__row td:nth-child(4)::before {
    content: "·";
    margin-right: 6px;
  }

  .fin-ledger tbody tr.data-table__row td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fin-ledger tbody tr.data-table__row td:empty,
  .fin-ledger tbody tr.data-table__row td.data-table__go {
    display: none;
  }

  .fin-ledger .data-table__sub {
    display: inline;
    margin-left: 6px;
  }

  .fin-ledger tfoot tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 12px 14px;
  }

  .fin-ledger tfoot th,
  .fin-ledger tfoot td {
    padding: 0;
    border: 0;
  }

  .fin-ledger tfoot th {
    flex: 1 1 auto;
  }

  .fin-ledger tfoot td:empty {
    display: none;
  }

  .fin-ledger .fin-more,
  .fin-ledger .fin-more td {
    display: block;
  }
}

/* Small phones: two fields side by side cut dates and longer choices short,
   so they stack. Guest counts (three short numbers) stay in their row. */
@media (max-width: 420px) {
  .form-grid:not(.form-grid--stay) {
    grid-template-columns: minmax(0, 1fr);
  }
}