/* booking.rjnestor.com — the booking page.
 *
 * One file, no framework, no build. Light by default because a client opening a
 * link from an email is the person this page is for, and light is the safer
 * guess; the dark palette is the same tokens redefined under
 * prefers-color-scheme, so nothing below this block has to know which is in
 * force.
 *
 * Two layouts out of one document: at 900px and up the panel and the week grid
 * sit side by side, and below it everything stacks and the week grid is gone
 * entirely, replaced by a day view you reach by tapping a date.
 */

:root {
  --ink:        #171716;
  --ink-soft:   #57564f;
  --muted:      #86857c;
  --line:       #e6e4dd;
  --line-soft:  #f1efe9;
  --bg:         #f7f6f3;
  --card:       #ffffff;
  --accent:     #1f5f4f;
  --accent-ink: #ffffff;
  --accent-soft:#e8f1ee;
  --warn:       #8a2f22;
  --warn-soft:  #fbeeeb;
  --hatch:      #eceae3;
  --shadow:     0 1px 2px rgba(20, 20, 16, .05), 0 8px 24px rgba(20, 20, 16, .06);
  --radius:     12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #ecebe6;
    --ink-soft:   #c3c1b8;
    --muted:      #918f86;
    --line:       #35352f;
    --line-soft:  #292926;
    --bg:         #171715;
    --card:       #212120;
    --accent:     #57a98f;
    --accent-ink: #10201b;
    --accent-soft:#1e332c;
    --warn:       #e59180;
    --warn-soft:  #33201c;
    --hatch:      #2e2e29;
    --shadow:     0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

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

/* --- The two-column shell ------------------------------------------------ */

.bk {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .bk {
    grid-template-columns: 21rem minmax(0, 1fr);
    align-items: start;
    padding: 2rem 1.5rem 3rem;
  }
}

.bk-panel,
.bk-stage {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
}

/* --- The identity block -------------------------------------------------- */

.bk-face {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--line-soft);
}

@media (max-width: 899px) {
  .bk-face { width: 84px; height: 84px; }
}

.bk-host {
  margin: .9rem 0 .1rem;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.bk-title {
  margin: 0 0 .8rem;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
}

.bk-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .55rem 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

.bk-meta svg { flex: 0 0 auto; color: var(--muted); }

.bk-desc {
  margin: .9rem 0 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

.bk-desc p { margin: 0 0 .6rem; }
.bk-desc p:last-child { margin-bottom: 0; }

.bk-rule {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 1.2rem 0;
}

/* --- Duration pills ------------------------------------------------------ */

.bk-durations {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .9rem 0 .2rem;
}

.bk-dur {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .34rem .8rem;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.bk-dur:hover { border-color: var(--muted); }

.bk-dur[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* --- The mini month ------------------------------------------------------ */

.bk-month { margin-top: .4rem; }

.bk-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .5rem;
}

.bk-month-name {
  font-size: .98rem;
  font-weight: 600;
}

.bk-nav {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 8px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}

.bk-nav:hover:not([disabled]) { border-color: var(--muted); color: var(--ink); }
.bk-nav[disabled] { opacity: .35; cursor: default; }

.bk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.bk-dow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .3rem 0;
}

.bk-day {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
  aspect-ratio: 1;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
}

@media (max-width: 899px) {
  .bk-day { font-size: 1rem; }
  .bk-grid { gap: 4px; }
}

/* A day with nothing on it is struck through, which says "looked, found
 * nothing" rather than the blank a dimmed number would say. */
.bk-day[disabled] {
  cursor: default;
  color: var(--muted);
  opacity: .5;
  text-decoration: line-through;
}

.bk-day.is-open {
  color: var(--ink);
  font-weight: 600;
  background: var(--accent-soft);
  opacity: 1;
  text-decoration: none;
}

.bk-day.is-open:hover { background: var(--accent); color: var(--accent-ink); }

.bk-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }

.bk-day[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.bk-day.is-blank { visibility: hidden; }

/* --- Timezone ------------------------------------------------------------ */

.bk-tz { margin-top: 1.1rem; }

.bk-tz label {
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .3rem;
}

/* The timezone combobox. It reads as one control—a box you can type in, and a
 * list that appears under it—so the input keeps the shape the select had and
 * the list is drawn over whatever is beneath it rather than pushing it down. */
.tzc { position: relative; }

.tzc-input {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

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

.tzc-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + .25rem);
  margin: 0;
  padding: .25rem;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.tzc-list[hidden] { display: none; }

/* Opened upwards when there is more room above than below—which on the panel,
 * where this sits at the bottom of a tall column, is most of the time. */
.tzc-list.is-up { top: auto; bottom: calc(100% + .25rem); }

/* Roomy on purpose: this gets tapped with a thumb as often as clicked. */
.tzc-opt {
  padding: .55rem .6rem;
  border-radius: 7px;
  font-size: .92rem;
  cursor: pointer;
}

.tzc-opt.is-active { background: var(--accent-soft); }
.tzc-opt[aria-selected="true"] { font-weight: 600; }

.tzc-empty { padding: .55rem .6rem; font-size: .9rem; color: var(--muted); }

@media (hover: hover) {
  .tzc-opt:hover { background: var(--accent-soft); }
}

/* --- The week grid (desktop only) ---------------------------------------- */

.bk-stage { padding: 1rem 1rem 1.2rem; }

@media (max-width: 899px) {
  .bk-stage { display: none; }
}

.wk-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
}

.wk-month {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 auto 0 .3rem;
}

.wk-today {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: .32rem .7rem;
  font-size: .88rem;
}

.wk-today:hover { border-color: var(--muted); color: var(--ink); }

.wk-hint {
  margin: 0 0 .7rem;
  font-size: .9rem;
  color: var(--muted);
}

.wk {
  --gutter: 3.6rem;
  --hour: 3.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.wk-head {
  display: grid;
  grid-template-columns: var(--gutter) repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--line-soft);
}

.wk-dh {
  padding: .45rem .2rem .5rem;
  text-align: center;
  border-left: 1px solid var(--line);
  line-height: 1.2;
}

.wk-dh .dow {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.wk-dh .dnum {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wk-dh.is-today .dnum { color: var(--accent); }
.wk-dh.is-past .dow, .wk-dh.is-past .dnum { opacity: .45; }

.wk-body {
  display: grid;
  grid-template-columns: var(--gutter) repeat(7, minmax(0, 1fr));
  position: relative;
}

.wk-times { position: relative; }

.wk-time {
  height: var(--hour);
  font-size: .72rem;
  color: var(--muted);
  text-align: right;
  padding-right: .45rem;
  transform: translateY(-.45em);
  font-variant-numeric: tabular-nums;
}

/* Hatched = not on offer. The open blocks are drawn on top of it, so
 * "unavailable" needs no markup of its own. */
.wk-col {
  position: relative;
  border-left: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    45deg,
    var(--hatch) 0, var(--hatch) 1px,
    transparent 1px, transparent 6px
  );
}

.wk-col.is-past { opacity: .55; }

.wk-line {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--line-soft);
}

.wk-slot {
  position: absolute;
  left: 3px; right: 3px;
  min-height: 1.35rem;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-slot:hover,
.wk-slot:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
}

.wk-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
}

/* --- The phone day view -------------------------------------------------- */

.bk-dayview { display: none; }

@media (max-width: 899px) {
  .bk[data-view="day"] .bk-dayview { display: block; }
  .bk[data-view="day"] .bk-panel { display: none; }
}

.dv-back {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: .35rem .7rem .35rem .5rem;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.dv-title {
  margin: .9rem 0 .2rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}

.dv-sub { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }

.dv-slots { display: grid; gap: .5rem; }

.dv-slot {
  width: 100%;
  border: 1px solid var(--accent);
  background: var(--card);
  color: var(--accent);
  border-radius: 10px;
  padding: .85rem;
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dv-slot:hover, .dv-slot:active { background: var(--accent); color: var(--accent-ink); }

/* --- The booking form, as a modal ---------------------------------------- */

.bk-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 20, 16, .45);
}

.bk-modal[open] { display: flex; }

.bk-sheet {
  width: min(30rem, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem;
}

.bk-sheet h2 {
  margin: 0 0 .1rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.bk-chosen {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: .95rem;
}

.bk-chosen strong { color: var(--ink); }

.bk-sheet label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: .85rem 0 .25rem;
}

.bk-sheet input[type=text],
.bk-sheet input[type=email],
.bk-sheet input[type=tel],
.bk-sheet textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.bk-sheet textarea { min-height: 4.5rem; resize: vertical; }

.bk-actions {
  display: flex;
  gap: .5rem;
  margin-top: 1.2rem;
}

.btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 9px;
  padding: .6rem 1rem;
  font-size: .95rem;
}

.btn:hover { border-color: var(--muted); color: var(--ink); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  flex: 1;
}

.btn-primary:hover { color: var(--accent-ink); opacity: .92; }

.btn[disabled], .btn-primary[disabled] { opacity: .5; cursor: default; }

/* In flight. A booking takes about two seconds—Zoom, Google and a mail server
 * all answer inside the request—and for those two seconds the button has to
 * look unmistakably spent, or the guest taps it again. Greyed, faded, and a
 * cursor that says no; the hover rules are turned off so nothing lights back
 * up under a mouse that is still sitting on it.
 */
.btn.is-busy,
.btn.is-busy:hover,
.btn-primary.is-busy,
.btn-primary.is-busy:hover {
  background: var(--line-soft);
  border-color: var(--line);
  color: var(--muted);
  opacity: .65;
  cursor: not-allowed;
  font-weight: 400;
}

/* --- Odds and ends ------------------------------------------------------- */

.bk-notice {
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 10px;
  padding: .6rem .8rem;
  margin: 0 0 1rem;
  font-size: .93rem;
}

.bk-foot {
  grid-column: 1 / -1;
  margin: .4rem 0 0;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
}

.bk-loading { color: var(--muted); font-size: .9rem; }

@media (prefers-reduced-motion: no-preference) {
  .wk-slot, .bk-day, .dv-slot, .btn { transition: background-color .12s, color .12s, border-color .12s; }
}

/* --- Document pages ------------------------------------------------------ *
 * The home page, the manage page, the 404 and the error page: prose in a
 * column, sharing the tokens above so the whole site looks like one site.
 */

.doc {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1.1rem 4rem;
}

.doc h1 { font-size: 1.55rem; line-height: 1.25; margin: 0 0 .35rem; letter-spacing: -.015em; }
.doc h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; }
.doc p  { margin: 0 0 .85rem; }
.doc .muted { color: var(--muted); }

.doc .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1rem;
}

.doc dl { margin: 0; }
.doc dt {
  font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 600; color: var(--muted); margin-top: .95rem;
}
.doc dt:first-child { margin-top: 0; }
.doc dd { margin: .15rem 0 0; }

.doc label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); margin: .85rem 0 .25rem;
}

.doc input[type=text], .doc input[type=email], .doc input[type=tel], .doc textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card);
}

.doc .foot { margin-top: 2.5rem; font-size: .85rem; color: var(--muted); }

.doc-face {
  width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 0 1rem; background: var(--line-soft);
}

/* ---------------------------------------------------------------------------
 * The poll respond page.
 *
 * It borrows the prose column, the face, the card and the buttons from
 * everything above—a text message that leads to a booking page and then to a
 * poll should look like one site. What is its own is the answer control: three
 * radios drawn as one segmented row, sized for a thumb before it is sized for
 * a mouse, with the whole row a hit target rather than the dot in it.
 *
 * Colour carries meaning here and does not carry it alone: yes is the accent,
 * if-need-be is neutral, no is quiet, and every one of them also says a word.
 * ------------------------------------------------------------------------- */

.pl-desc { margin: 0 0 .6rem; }
.pl-desc p { margin: 0 0 .6rem; }

.pl-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .9rem; margin: 0 0 1.2rem; }
.pl-meta span + span::before { content: '·'; margin-right: .55rem; color: var(--line); }

.pl-ok { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.pl-ask { margin: 0 0 1rem; }

.pl-h { margin-top: 2.2rem; }

/* ---- The day headings and the rows -------------------------------------- */

.pl-day {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 1.5rem 0 .5rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}
.pl-day:first-child { margin-top: 0; }

.pl-slot {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: .7rem .8rem; margin: 0 0 .5rem;
  min-width: 0;
}
fieldset.pl-slot { border-width: 1px; }

.pl-when { display: flex; flex-direction: column; min-width: 6.5rem; }
.pl-time { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.pl-span { font-size: .8rem; color: var(--muted); }

.pl-answers { display: flex; gap: 0; flex: 1 1 15rem; min-width: 0; }

.pl-a {
  flex: 1 1 0; min-width: 0; margin: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: .55rem .3rem; cursor: pointer; text-align: center;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line); border-left-width: 0; background: var(--bg);
}
.pl-a:first-child { border-left-width: 1px; border-radius: 8px 0 0 8px; }
.pl-a:last-child  { border-radius: 0 8px 8px 0; }
.pl-a input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pl-a span { pointer-events: none; }
.pl-a:hover { color: var(--ink); }

.pl-a:has(input:checked) { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.pl-maybe:has(input:checked) { background: var(--ink-soft); border-color: var(--ink-soft); }
.pl-no:has(input:checked) { background: var(--muted); border-color: var(--muted); }
.pl-a:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1; }

.pl-send { margin: 1.4rem 0 0; }

/* ---- A poll that has stopped taking answers ----------------------------- */

.pl-frozen .pl-slot { background: var(--line-soft); }
.pl-said { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }

.pl-won h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.pl-wonlist { list-style: none; margin: 0 0 .8rem; padding: 0; }
.pl-wonlist li { margin: 0 0 .5rem; }
.pl-wonlist b { display: block; }
.pl-wonlist span { font-size: .85rem; }

/* ---- The tally, on a shared poll ---------------------------------------- */

.pl-tally { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pl-tally table { border-collapse: collapse; font-size: .85rem; min-width: 100%; }
.pl-tally th, .pl-tally td {
  border-bottom: 1px solid var(--line); padding: .4rem .55rem; text-align: center;
  white-space: nowrap;
}
.pl-tally thead th { font-size: .72rem; font-weight: 700; color: var(--ink-soft); vertical-align: bottom; }
.pl-tally tbody th, .pl-tally tfoot th { text-align: left; font-weight: 600; }
.pl-tally tfoot th, .pl-tally tfoot td { font-weight: 700; border-bottom: 0; }
.pl-tally tr.pl-me { background: var(--accent-soft); }
.pl-c-yes   { color: var(--accent); font-weight: 700; }
.pl-c-maybe { color: var(--ink-soft); }
.pl-c-no    { color: var(--muted); }
.pl-c-none  { color: var(--line); }

@media (max-width: 460px) {
  .pl-slot { flex-direction: column; align-items: stretch; }
  .pl-when { flex-direction: row; align-items: baseline; gap: .5rem; }
  .pl-answers { flex: 1 1 auto; }
}