@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/hotels.css');
@import url('tokens/spacing.css');
@import url('tokens/elevation.css');
@import url('tokens/motion.css');
@import url('tokens/base.css');

/* A day with nothing counted on it yet. Saying so is the whole point: an empty
   chart claims the pool is dead, which is a different thing from not knowing. */
.pt-none{font-size:13.5px;line-height:1.7;color:var(--fg-muted);padding:14px 2px 4px;}

/* A house that cannot take the booking yet. Greyed and unclickable, because a
   link that goes nowhere useful is worse than a plain statement. */
.bt-choice.soon{opacity:.55;cursor:default;border-style:dashed}
/* The room-discount request, inside its tile. */
.bt-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:grid;gap:4px}
.bt-form label{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);margin-top:8px}
.bt-form input,.bt-form select{font:inherit;font-size:14px;padding:10px;border:1px solid var(--border);background:var(--white);width:100%;box-sizing:border-box}

/* ---- phone first --------------------------------------------------------- */
/* The members' portal is used on a phone far more than anything else, so the
   page itself must never scroll sideways. Everything genuinely wider than a
   phone — the year calendar, the tab rail — has its own scroll container, so
   clipping here hides nothing the member needs. Without it a stray 37px of
   overflow on the Details tab let the whole page slide about under a thumb. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 560px) {
  /* Year calendar: 14px cells are readable but too small to hit reliably with
     a thumb. The grid scrolls anyway, so making the cells bigger costs nothing
     but a little more sideways travel. */
  .yrd { grid-template-columns: repeat(31, minmax(19px, 1fr)); gap: 3px; }
  .yrcell { min-height: 19px; }
  .yrgrid { min-width: 700px; }
  /* And say that it scrolls, rather than leaving them to discover it. */
  .yrscroll { position: relative; }
  .yrscroll::after {
    content: 'swipe across for the rest of the year';
    display: block; font-family: var(--font-sans); font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted);
    padding-top: 8px; position: sticky; left: 0;
  }
  /* Benefit tiles and their choices go full width — two half-width buttons on
     a 375px screen leaves four words per line. */
  .bt-choices { flex-direction: column; align-items: stretch; }
  .bt-choice { text-align: center; }
}

/* The conditions on a benefit, on the same card as the promise. */
.bt-terms{font-family:var(--font-sans);font-size:12px;line-height:1.6;color:var(--fg-muted);margin:10px 0 0}
/* Save is the point of the details form. It was a small button at the foot of
   six fields — easy to fill everything in, walk away, and believe it saved. */
.dsave{justify-self:start;min-width:180px}
@media (max-width:560px){ .dsave{width:100%;justify-self:stretch} }