/* Booking app additions to the shared stylesheet. Same tokens, same layers. */
@layer components {
  booking-form, booking-summary, option-list, notice-box { display: block; }

  form.stay {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    align-items: end;
    max-inline-size: 44rem;
    & label { display: grid; gap: 0.3rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); color: var(--muted); }
    & input, & select { font: inherit; font-family: var(--font-body); font-size: var(--step-0); color: var(--ink); background: var(--paper); border: 1px solid color-mix(in oklab, var(--ink) 30%, var(--paper)); border-radius: 3px; padding: 0.55em 0.7em; inline-size: 100%; min-inline-size: 0; }
    &.change { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); & button { grid-column: 1 / -1; justify-self: start; } }
    & input:focus-visible, & select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--green); }
    & button { grid-column: 1 / -1; justify-self: start; }
  }
  form.details {
    display: grid;
    gap: var(--space-m);
    max-inline-size: 36rem;
    & label { display: grid; gap: 0.3rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); color: var(--muted); }
    & input, & textarea { font: inherit; font-family: var(--font-body); font-size: var(--step-0); color: var(--ink); background: var(--paper); border: 1px solid color-mix(in oklab, var(--ink) 30%, var(--paper)); border-radius: 3px; padding: 0.55em 0.7em; inline-size: 100%; }
    & textarea { min-block-size: 5rem; resize: vertical; }
    & input:focus-visible, & textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--green); }
  }
  button.primary, a.button {
    display: inline-block; font: inherit; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step--1);
    background: var(--green); color: var(--paper); border: 0; border-radius: 3px; padding: 0.8em 1.6em; cursor: pointer; text-decoration: none;
    &:hover { background: var(--green-hover); color: var(--paper); }
  }
  form.search { max-inline-size: none; grid-template-columns: 1fr auto auto; & label { grid-column: 1; } & button { grid-column: 2; justify-self: start; } & a { grid-column: 3; align-self: end; } }
  p.wide { max-inline-size: none; }
  .tight > * + * { margin-block-start: var(--space-s); }
  p.lede { font-size: var(--step-1); color: var(--muted); }
  p.pager { display: flex; gap: var(--space-m); align-items: baseline; }
  a.quiet-link { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step--1); color: var(--green); text-decoration: none; padding: 0.8em 1em; }
  button.quiet { display: inline-block; font: inherit; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step--1); background: none; color: var(--green); border: 1px solid var(--green); border-radius: 3px; padding: 0.8em 1.6em; cursor: pointer; &:hover { color: var(--green-hover); border-color: var(--green-hover); } }

  option-list {
    display: grid;
    gap: var(--space-m);
    max-inline-size: 44rem;
    & article { display: grid; grid-template-columns: 1fr auto; gap: var(--space-s) var(--space-m); align-items: center; padding-block: var(--space-m); border-block-start: 1px solid var(--line); }
    & article:last-child { border-block-end: 1px solid var(--line); }
    & h2 { font-size: var(--step-1); }
    & .price { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; text-align: end; }
    & .price small { display: block; font-family: var(--font-body); font-size: var(--step--1); margin-block-start: 0.3rem; }
    & ul { list-style: none; grid-column: 1 / -1; color: var(--muted); font-size: var(--step--1); }
    & li { display: block; margin-block-start: 0.2rem; }
    & a.button { grid-column: 2; justify-self: end; }
  }

  booking-summary {
    background: var(--grey);
    border-radius: 3px;
    padding: var(--space-m);
    max-inline-size: 36rem;
    & dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem var(--space-m); }
    & dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); color: var(--muted); }
    & dd { font-variant-numeric: tabular-nums; }
    & table { inline-size: 100%; margin-block-start: var(--space-m); }
    & td { padding: 0.3em 0; border-block-start: 1px solid var(--line); }
    & td:last-child { text-align: end; }
    & tr.total td { font-family: var(--font-display); font-size: var(--step-1); border-block-start: 2px solid var(--line); }
  }

  notice-box {
    border-inline-start: 3px solid var(--green);
    padding: var(--space-s) var(--space-m);
    background: var(--grey);
    max-inline-size: 36rem;
    &.warn { border-inline-start-color: #b45309; }
  }
  p.error { color: #9f1d1d; font-weight: 600; max-inline-size: 36rem; }
  .ref { font-family: var(--font-display); letter-spacing: 0.08em; }
  .muted { color: var(--muted); }
  .two-col { display: grid; gap: var(--space-l); align-items: start; grid-template-columns: minmax(0, 1fr); & > * { min-inline-size: 0; } }
  @container page (min-width: 46rem) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
}

/* Staff area */
@layer components {
  small.owes { color: #9f1d1d; font-weight: 600; }
  h2 small.muted { font-family: var(--font-body); font-size: var(--step--1); margin-inline-start: 0.4em; }
  body.staff site-header { gap: var(--space-s) var(--space-m); }
  body.staff site-header nav ul { gap: 0.25rem 1.1rem; }
  body.staff site-header .brand { font-size: var(--step-1); }
  site-header .brand small { font-family: var(--font-display); font-size: 0.5em; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; vertical-align: middle; }
  button.link { font: inherit; font-family: var(--font-display); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; background: none; border: 0; padding: 0.4em 0; color: var(--ink); cursor: pointer; &:hover { color: var(--green); } }
  table.list { border-collapse: collapse; inline-size: 100%; font-size: var(--step--1); & td, & th { text-align: start; vertical-align: top; padding: 0.45em 0.6em 0.45em 0; border-block-end: 1px solid var(--line); } & th { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } & td:last-child, & th:last-child { padding-inline-end: 0; } }
  table.list.wide { min-inline-size: 48rem; }
  table.report { font-variant-numeric: tabular-nums; & td:nth-child(n+3), & th:nth-child(n+3) { text-align: end; } & tr.current td { font-weight: 600; } }
  occupancy-bar { display: inline-grid; align-items: center; inline-size: 9rem; block-size: 1.3rem; background: var(--grey); border-radius: 3px; position: relative; overflow: hidden;
    &::before { content: ""; position: absolute; inset: 0; inline-size: var(--pct); background: color-mix(in oklab, var(--green) 55%, var(--paper)); }
    & b { position: relative; font-weight: 600; font-size: var(--step--1); padding-inline-start: 0.4rem; text-align: start; } }
  table.list tr.bad td { background: color-mix(in oklab, #9f1d1d 8%, var(--paper)); }
  form.details input[type=file] { border: 0; padding: 0; }
  nav.jump { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); & a { text-decoration: none; } }
  section.settings { padding-block-start: var(--space-m); border-block-start: 1px solid var(--line); & h3 { margin-block-start: var(--space-m); } & form.details .row { align-items: end; } }
  table.rooms input[type=number] { inline-size: 5rem; }
  table.list input:not([type=checkbox]), table.list select { font: inherit; font-family: var(--font-body); font-size: var(--step-0); color: var(--ink); border: 1px solid color-mix(in oklab, var(--ink) 30%, var(--paper)); border-radius: 3px; padding: 0.35em 0.5em; inline-size: 100%; max-inline-size: 16rem; }
  table.list.narrow { inline-size: auto; & td { padding-inline-end: 2rem; } }
  .tw { overflow-x: auto; max-inline-size: 100%; }
  /* Availability calendar: one cell per day, one dot per bed. Every cell
     carries its own weekday, date and month, so rows may hold however many
     days fit; at full width it is seven from Monday with a line between months. */
  day-grid, day-cell { display: block; }
  day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
    gap: 0;
    border-block-start: 1px solid var(--line);
    border-inline-start: 1px solid var(--line);
  }
  day-cell {
    border-inline-end: 1px solid var(--line);
    border-block-end: 1px solid var(--line);
    padding: 0.4rem 0.45rem 0.5rem;
    min-inline-size: 0;
    &.past { background: var(--grey); & .date { color: var(--muted); } }
    &.today { box-shadow: inset 0 0 0 2px var(--green); }
    &.first .date { font-weight: 600; }
    & .date { display: block; font-family: var(--font-display); font-size: var(--step--1); letter-spacing: 0.02em; color: var(--ink); text-decoration: none; margin-block-end: 0.35rem; white-space: nowrap; }
    & a.date.busy { color: var(--green); }
    & a.date:hover { text-decoration: underline; }
  }
  @container page (min-width: 52rem) {
    day-grid { grid-template-columns: repeat(7, 1fr); }
    day-cell.month-top { border-block-start: 3px solid var(--ink); margin-block-start: -1px; }
    day-cell.month-left { border-inline-start: 3px solid var(--ink); margin-inline-start: -1px; }
  }
  /* Each room is a pill of beds: rounded at the ends, square in between. */
  bed-grid { display: flex; flex-wrap: wrap; gap: 0.3rem 0.45rem; }
  room-beds { display: flex; gap: 2px; }
  bed-dot, a.bed { display: grid; place-items: center; inline-size: 1.35rem; block-size: 1.35rem; border-radius: 0; box-sizing: border-box; }
  room-beds > :first-child { border-start-start-radius: 0.45rem; border-end-start-radius: 0.45rem; }
  room-beds > :last-child { border-start-end-radius: 0.45rem; border-end-end-radius: 0.45rem; }
  bed-dot { border: 2px solid color-mix(in oklab, var(--ink) 35%, var(--paper)); }
  bed-dot.taken { border-color: var(--green); background: var(--green); }
  bed-dot.held { border-color: var(--green); background: color-mix(in oklab, var(--green) 30%, var(--paper)); }
  bed-dot.blocked { border-color: transparent; background: color-mix(in oklab, var(--ink) 25%, var(--paper)); }
  a.bed { background: var(--green); color: var(--paper); text-decoration: none; font-family: var(--font-display); font-size: 0.8rem; line-height: 1; }
  a.bed:hover { background: var(--green-hover); }
  form.inline.amend input[type=number] { inline-size: 5rem; }
  form.inline { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); align-items: end;
    & label { display: grid; gap: 0.3rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); color: var(--muted); }
    & input, & select { font: inherit; font-family: var(--font-body); font-size: var(--step-0); color: var(--ink); border: 1px solid color-mix(in oklab, var(--ink) 30%, var(--paper)); border-radius: 3px; padding: 0.45em 0.6em; }
  }
  details.more { border-block-start: 1px solid var(--line); padding-block-start: var(--space-s);
    & summary { cursor: pointer; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); color: var(--green); }
    & summary::before { content: "▸ "; } &[open] summary::before { content: "▾ "; }
    & > * + * { margin-block-start: var(--space-s); } }
  label.check { display: flex; gap: 0.5rem; align-items: center; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--step-0); color: var(--ink); align-self: end; padding-block-end: 0.6em; & input { inline-size: auto; } }
  form.details .row { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  form.details select { font: inherit; font-family: var(--font-body); font-size: var(--step-0); color: var(--ink); background: var(--paper); border: 1px solid color-mix(in oklab, var(--ink) 30%, var(--paper)); border-radius: 3px; padding: 0.55em 0.7em; inline-size: 100%; }
  label small { text-transform: none; letter-spacing: 0; }
}