/* ============================================================
   Sumberkima Hill guest ops - the arrivals register
   ------------------------------------------------------------
   World: a printed arrivals ledger on warm paper under a
   near-black Leadflix band. Hairlines instead of borders, ruled
   rows instead of cards, uppercase tracked micro-labels instead
   of coloured pills, ink weight instead of hue to separate Sent
   from Delivered from Read. Baskervville carries exactly two
   things, the date and every guest name; Geist carries the rest
   at a fixed rem scale with tabular numerals.

   Brand blue marks four things and nothing else: LIVENESS (the
   four counts, today's heading inside a range), SELECTION (the
   open guest's row and name, the Days toggle while it is on, the
   selected day in the rail), FOCUS (every focus ring, every link
   and its hover) and ACTION (the one filled button on a screen,
   which only the two gate screens have). The sheet's shadows
   borrow the same hue as their deepest layer. Two functional inks: a deep
   brick, so a failed invite and a cancelled booking cannot be missed,
   and a ledger green (Oscar, 2026-08-27) for the one state the desk
   checks all day, a pre-check-in form that has come back. Green is the
   only colour on this screen that carries a filled ground, and it
   carries exactly one: the Form column's done pill. Status is always a
   word plus a hairline mark, never colour alone.

   Every colour, face, type size, line height, tracking, space,
   control height, icon size, radius, hairline, frame width,
   opacity, shadow and duration is a custom property on :root;
   components never hardcode a value. Three things are literals on
   purpose: structural percentages (100%, 50%, a gradient's stops),
   the breakpoints, because a media query cannot read a custom
   property, and the 1ms of the reduced-motion escape. See
   DESIGN.md.
   ============================================================ */

:root {
  /* --- paper and ink --- */
  --paper: #f7f5f2;
  --paper-sunk: #f1eee9;
  --paper-dim: #eeeae4;
  --paper-lift: #fbfaf8;
  --sheet: #ffffff;
  --rule: #e2ded6;
  --rule-firm: #d6d1c7;
  --rule-soft: #edeae3;
  --ink: #16181b;
  --ink-2: #4e545c;
  --ink-3: #5f666d;
  /* --ink-4 is the lightest ink allowed to carry a word, and only on
     the white sheet (4.60:1 there, 4.22 on paper): everything on
     paper, on the sunk paper of a cancelled row or on the wash of an
     open row uses --ink-3. --ink-5 never carries meaning at all: it
     is for a chevron at rest and an icon beside the label that
     already names it. */
  --ink-4: #6f767e;
  --ink-5: #8b9199;

  /* --- the dark band --- */
  --band: #121212;
  --band-edge: #000000;
  --band-ink: #e2dfde;
  --band-ink-2: #ababab;
  --band-rule: #2d2d2d;
  --band-rule-hi: #4a4a4a;
  --band-lift: #1e1e1e;
  --band-focus: #85b2db;

  /* --- the one accent: liveness, selection, focus --- */
  --blue: #2f6fa8;
  --blue-deep: #24567f;
  --blue-wash: #eef3f9;
  --blue-wash-2: #e4edf6;
  --blue-line: #c9d9e8;
  --blue-under: #b9cfe3;
  --on-blue: #ffffff;

  /* --- the two functional state inks --- */
  --alert: #9d3427;
  --alert-wash: #f7efed;
  --alert-line: #e0cbc7;
  /* the done green: 6.29:1 on the sheet, 5.72:1 on paper, 5.59:1 on its
     own wash, so it carries a word on every ground this screen has */
  --done: #2e6b4c;
  --done-wash: #edf3ee;
  --done-line: #c8dbcf;

  /* --- the scrim behind the phone bottom sheet --- */
  --scrim: rgba(22, 24, 27, 0.34);

  /* --- type --- */
  --serif: "Baskervville", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", "Helvetica Neue", Helvetica, sans-serif;
  --t-nano: 0.625rem;      /* 10px  rail eyebrows, the demo flag */
  --t-micro: 0.6875rem;    /* 11px  tracked labels */
  --t-small: 0.8125rem;    /* 13px  secondary values */
  --t-base: 0.875rem;      /* 14px  data cells */
  --t-body: 0.9375rem;     /* 15px  prose */
  --t-name: 1.1875rem;     /* 19px  guest name, the sign-in title */
  --t-panel: 1.5rem;       /* 24px  the open guest */
  --t-blank: 1.5rem;       /* 24px  the empty and no-arrivals line */
  --t-mast: 1.75rem;       /* 28px  the masthead on the gate screens */
  --t-count: 1.875rem;     /* 30px  live counts */
  --t-day: 2.25rem;        /* 36px  the date */
  --lh-tight: 1.2;
  --lh-ui: 1.4;
  --lh-prose: 1.65;
  --lh-cell: 1.35;
  --lh-flat: 1;
  --track-label: 0.14em;
  --track-flag: 0.1em;
  --track-time: 0.06em;
  --track-tight: -0.015em;
  --track-num: -0.01em;
  --track-flat: 0.005em;

  /* --- space --- */
  --s05: 0.125rem;         /* 2px  */
  --s1: 0.25rem;           /* 4px  */
  --s15: 0.375rem;         /* 6px  */
  --s2: 0.5rem;            /* 8px  */
  --s25: 0.625rem;         /* 10px */
  --s3: 0.75rem;           /* 12px */
  --s35: 0.875rem;         /* 14px */
  --s4: 1rem;              /* 16px */
  --s45: 1.125rem;         /* 18px */
  --s5: 1.25rem;           /* 20px */
  --s6: 1.5rem;            /* 24px */
  --s7: 2rem;              /* 32px */
  --s8: 2.75rem;           /* 44px */
  --s9: 3.5rem;            /* 56px */

  /* --- form --- */
  --radius-sheet: 1.25rem;
  --radius-card: 1.25rem;
  --radius-pill: 999px;
  --radius-nub: 0.5rem;
  --radius-inner: calc(1.25rem - 1px);   /* a sheet corner, one hairline in */
  --radius-xs: 0.25rem;

  /* --- rules and marks --- */
  --hair: 1px;
  --mark-w: 3px;           /* the rail's selected-day edge */
  --focus-w: 2px;
  --focus-gap: 2px;
  --focus-gap-lg: 3px;     /* around type rather than a box */
  --underline-gap: 3px;

  /* --- controls: one floor, three resting heights, all four raised
         to the tap floor on a phone (see the 900px block) --- */
  --tap: 44px;
  --h-sm: 36px;            /* small pill, date input, small icon button */
  --h-toggle: 34px;        /* the Days toggle */
  --h-span: 30px;          /* one position of the range switcher */

  /* --- icons --- */
  --icon-xs: 14px;         /* inside a small pill, the row chevron */
  --icon-sm: 15px;         /* beside a label that already names it */
  --icon-md: 16px;         /* inside a pill, a small icon button */
  --icon-lg: 18px;         /* an icon button, a status mark */
  --icon-xl: 30px;         /* the one large mark, on the no-access sheet */

  /* --- frame --- */
  --band-h: 56px;
  --crest-h: 40px;
  /* neither side region holds a track while it is shut: each one takes
     its width off the register only for as long as it is open (Oscar,
     2026-08-26). Both are still sized to their own longest line and no
     wider, because that width is what the register gives up (the rail's
     "12 arriving, 10 filled" is 100px, the panel's 40-character name
     at 24px wraps to two lines at 248px) */
  --rail-w: 160px;
  --detail-w: 288px;
  --page-max: 1180px;
  --w-wordmark: 74px;
  --w-key: 5.5rem;         /* the label column inside the panel */
  --w-time: 2.75rem;       /* the clock column inside the log */
  --w-prose: 46ch;
  --w-gate: 25rem;
  --w-toast: 30rem;
  --w-dateinput: 6rem;
  --w-grab: 38px;          /* the phone sheet's grab bar */
  --h-grab: 4px;
  --h-sheet: 86vh;         /* how far the phone sheet may rise */
  --h-skel: 12px;
  --h-skel-name: 16px;
  --h-colhead: 45px;       /* the column header band, measured */

  /* --- the register's columns --- */
  /* measured, not guessed: the narrowest sheet the desktop layout
     produces is 928px, at 1440 with the rail and the panel both open,
     and these six shares hold a 40-character name and a 24-character
     villa in two lines, a 23-character name, "Booking.com" and
     "Sent 26 Aug, 08:05" in one, with nothing overflowing its cell */
  --col-guest: 30%;
  --col-villa: 16%;
  --col-stay: 12%;
  --col-source: 12%;
  --col-invite: 18%;
  --col-form: 12%;

  /* --- the inbox's columns (2026-08-27): measured against the same
         928px sheet. Guest holds a 40-character name in two lines or a
         15-digit number in one; Stay a 24-character villa; the last
         message clips to one line at whatever is left; When holds
         "Yesterday 14:47" on one line with the panel open (1014px sheet
         at 1440); Messages holds "12" over "1 from guest" on one line
         there, and "0 from guest, 1 failed" in two --- */
  --col-tguest: 26%;
  --col-tstay: 18%;
  --col-tlast: 29%;
  --col-twhen: 14%;
  --col-tcount: 13%;
  /* the open conversation: wider than the open guest, because a line
     of chat at 13px wants 40 to 50 characters and the panel's 288px
     gave it 30 */
  --thread-w: 360px;
  --w-nav-mark: 2px;       /* the current screen's underline in the band */
  --h-detailbar: 61px;     /* the panel's own bar, measured: a day heading sticks under it */

  /* --- depth --- */
  --shadow-sheet:
    0 1px 1px rgba(22, 24, 27, 0.03),
    0 8px 20px -14px rgba(22, 24, 27, 0.14),
    0 26px 48px -34px rgba(36, 86, 127, 0.2);
  --shadow-lift:
    0 1px 1px rgba(22, 24, 27, 0.05),
    0 10px 18px -12px rgba(36, 86, 127, 0.28);
  --shadow-toast:
    0 2px 4px rgba(22, 24, 27, 0.06),
    0 18px 36px -18px rgba(22, 24, 27, 0.34);
  --shadow-sheet-up:
    0 -2px 6px rgba(22, 24, 27, 0.05),
    0 -20px 46px -18px rgba(22, 24, 27, 0.34);

  /* --- opacity --- */
  --o-grain: 0.22;
  --o-disabled: 0.42;
  --o-wordmark: 0.85;

  /* --- motion --- */
  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
  --dur: 180ms;
  --dur-slow: 230ms;
  --dur-skel: 1400ms;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--paper-lift) 0%, rgba(251, 250, 248, 0) 62%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; margin: 0; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: var(--o-grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/></svg>");
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.vh {
  position: absolute !important;
  width: var(--hair);
  height: var(--hair);
  margin: calc(var(--hair) * -1);
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   CONTROLS - one pill vocabulary, four states each
   ============================================================ */
.btn {
  --btn-fg: var(--ink);
  --btn-bg: transparent;
  --btn-line: var(--rule-firm);
  appearance: none;
  border: var(--hair) solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  font-size: var(--t-base);
  letter-spacing: var(--track-flat);
  line-height: var(--lh-flat);
  border-radius: var(--radius-pill);
  padding: var(--s3) var(--s45);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.btn:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--focus-gap); }
.btn:active { transform: translateY(var(--hair)); }
.btn[disabled] { cursor: not-allowed; opacity: var(--o-disabled); transform: none; }

.btn--go {
  --btn-fg: var(--on-blue);
  --btn-bg: var(--blue);
  --btn-line: var(--blue);
  box-shadow: var(--shadow-lift);
}
.btn--go:hover:not([disabled]) { --btn-bg: var(--blue-deep); --btn-line: var(--blue-deep); }
.btn--go:active { box-shadow: none; }

.btn--outline { --btn-fg: var(--ink); --btn-bg: var(--sheet); --btn-line: var(--rule-firm); }
.btn--outline:hover:not([disabled]) { --btn-line: var(--ink-4); --btn-bg: var(--paper-sunk); }

.btn--quiet { --btn-fg: var(--ink-2); --btn-bg: transparent; --btn-line: var(--rule-firm); }
.btn--quiet:hover:not([disabled]) { --btn-fg: var(--ink); --btn-bg: var(--sheet); --btn-line: var(--ink-4); }
.btn--quiet[aria-expanded="true"] {
  --btn-fg: var(--blue-deep);
  --btn-bg: var(--blue-wash);
  --btn-line: var(--blue-line);
}

.btn--onband { --btn-fg: var(--band-ink); --btn-bg: transparent; --btn-line: var(--band-rule); }
.btn--onband:hover:not([disabled]) { --btn-bg: var(--band-lift); --btn-line: var(--band-rule-hi); }
.btn--onband:focus-visible { outline-color: var(--band-focus); }

.btn--sm { font-size: var(--t-small); padding: var(--s2) var(--s35); min-height: var(--h-sm); }
.btn--sm svg { width: var(--icon-xs); height: var(--icon-xs); }
.btn--wide { width: 100%; }

.iconbtn {
  appearance: none;
  border: var(--hair) solid var(--rule);
  background: var(--sheet);
  color: var(--ink-2);
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  transition:
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.iconbtn svg { width: var(--icon-lg); height: var(--icon-lg); }
.iconbtn:hover { color: var(--ink); border-color: var(--ink-4); background: var(--sheet); }
.iconbtn:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--focus-gap); }
.iconbtn:active { transform: translateY(var(--hair)); }
.iconbtn[disabled] { cursor: not-allowed; opacity: var(--o-disabled); transform: none; }
.iconbtn--sm { width: var(--h-sm); height: var(--h-sm); }
.iconbtn--sm svg { width: var(--icon-md); height: var(--icon-md); }

.dateinput {
  font-size: var(--t-small);
  color: var(--ink);
  background: var(--sheet);
  border: var(--hair) solid var(--rule-firm);
  border-radius: var(--radius-pill);
  padding: var(--s2) var(--s35);
  min-height: var(--h-sm);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.dateinput:hover { border-color: var(--ink-4); }
.dateinput:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--focus-gap); border-color: var(--blue); }
.dateinput:active { transform: translateY(var(--hair)); border-color: var(--ink-4); }
.dateinput[disabled] { cursor: not-allowed; opacity: var(--o-disabled); transform: none; }

.link {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: var(--underline-gap);
  text-decoration-color: var(--blue-under);
  border-radius: var(--radius-xs);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.link:hover { color: var(--blue); text-decoration-color: currentColor; }
.link:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--focus-gap-lg); }
.link:active { color: var(--band); }

/* ============================================================
   THE DARK BAND
   ============================================================ */
.band {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--band-h);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s5);
  background: var(--band);
  color: var(--band-ink);
  border-bottom: var(--hair) solid var(--band-edge);
}
.band__brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; flex: 0 1 auto; }
/* the client's own crest, its white artwork on the near-black ground */
.crest { display: block; height: var(--crest-h); width: auto; flex: none; }
.band__client { display: flex; flex-direction: column; gap: var(--hair); min-width: 0; }
.band__eyebrow {
  font-size: var(--t-nano);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--band-ink-2);
  font-weight: 500;
}
.band__name {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--band-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band__name--short { display: none; }
.band__sp { flex: 1 1 auto; }
.band__user { font-size: var(--t-small); color: var(--band-ink-2); white-space: nowrap; }
.reviewtag {
  font-size: var(--t-nano);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--band-ink-2);
  border: var(--hair) solid var(--band-rule);
  border-radius: var(--radius-pill);
  padding: var(--s1) var(--s2);
  white-space: nowrap;
}

/* --- the switch between the two screens, in every band --- */
/* two words on the band, the current one in the band's full ink with a
   blue underline: selection is one of brand blue's four jobs, and on the
   near-black ground it is the band's focus blue that reads */
/* the links stretch to the band's own content height rather than naming
   one: a min-height of the band's would add its 2px underline on top and
   grow the band by a pixel */
.bandnav { display: flex; align-self: stretch; gap: var(--s2); margin-left: var(--s3); }
.bandnav__a {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--s3);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--band-ink-2);
  text-decoration: none;
  border-bottom: var(--w-nav-mark) solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.bandnav__a:hover { color: var(--band-ink); background: var(--band-lift); }
.bandnav__a:focus-visible { outline: var(--focus-w) solid var(--band-focus); outline-offset: calc(var(--focus-gap) * -1); }
.bandnav__a:active { color: var(--band-ink); }
.bandnav__a[aria-current="page"] { color: var(--band-ink); border-bottom-color: var(--band-focus); }

/* ============================================================
   THE WORKSTATION: rail, register, open guest
   ------------------------------------------------------------
   Three columns and three rows. The rail and the open guest each
   hold a full-height outer column; the register column stacks its
   own top line, the date row and the sheet. Neither outer track
   exists while its region is shut: the register runs the full width
   of the frame, centred, and each region compresses it by its own
   width for as long as it is open. The rail has always worked that
   way and the open guest now does too, at every desktop width
   (Oscar, 2026-08-26).
   Below 900px the whole frame is one column in reading order, so
   the day strip opens downwards out of the Days toggle above it.
   ============================================================ */
.work {
  display: grid;
  /* both outer tracks are auto, so a shut region has no track at all and
     the register is centred across the whole frame. Opening one takes its
     width off the register and closing it gives the width back, the same
     trade at every desktop width, with no breakpoint where the model
     changes */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  align-items: stretch;
  min-height: calc(100vh - var(--band-h));
}
/* placed by name, never auto: a region always lands in its own column,
   so the register keeps the middle one whichever side is open */
.rail { grid-column: 1; grid-row: 1 / span 3; }
.worktop { grid-column: 2; grid-row: 1; min-width: 0; }
.workhead { grid-column: 2; grid-row: 2; min-width: 0; }
.manifest { grid-column: 2; grid-row: 3; }
.detail { grid-column: 3; grid-row: 1 / span 3; }

/* --- the day rail (closed by default, behind the Days toggle) --- */
/* paper, not a second sheet: the register is the only white plane on the
   page, and it earns its white with a shadow and a radius */
.rail {
  width: var(--rail-w);
  background: var(--paper-lift);
  border-right: var(--hair) solid var(--rule);
  min-width: 0;
}
.rail[hidden] { display: none; }
.rail__in {
  position: sticky;
  top: var(--band-h);
  max-height: calc(100vh - var(--band-h));
  overflow-y: auto;
  padding: var(--s5) var(--s3) var(--s7);
}
.rail__t {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 0 var(--s2) var(--s3);
}
.rail__list { display: flex; flex-direction: column; gap: var(--s05); }
.rail__sep { padding: var(--s4) var(--s2) var(--s1); }
.rail__sep span {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.rail__load { padding: var(--s2); font-size: var(--t-small); color: var(--ink-3); }

.dayb {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-left: var(--mark-w) solid transparent;
  border-radius: var(--radius-nub);
  padding: var(--s2) var(--s3);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dayb:hover { background: var(--paper-sunk); }
.dayb:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--hair); }
.dayb:active { background: var(--paper-sunk); }
.dayb__when {
  display: block;
  font-size: var(--t-nano);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: var(--hair);
}
.dayb__date { display: block; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.dayb__c { display: block; font-size: var(--t-micro); color: var(--ink-3); margin-top: var(--s05); }
.dayb__c b { font-weight: 600; color: var(--ink-2); }
.dayb__c i { font-style: normal; color: var(--ink-3); }
.dayb--past .dayb__date { color: var(--ink-2); font-weight: 400; }
.dayb.is-on { background: var(--blue-wash); border-left-color: var(--blue); }
.dayb.is-on .dayb__when,
.dayb.is-on .dayb__date { color: var(--blue-deep); }
.dayb.is-on .dayb__date { font-weight: 600; }
.dayb.is-on .dayb__c b { color: var(--blue-deep); }
.dayb.is-on:hover { background: var(--blue-wash-2); }

/* --- the register column: one inner width for all three rows --- */
.colw { max-width: var(--page-max); margin: 0 auto; min-width: 0; }
/* the same inset on both sides, because the register is centred when
   nothing is open: an asymmetric one would offset it by half the
   difference. 32px also keeps the sheet ON the paper rather than against
   the window edge once a region has compressed it */
.worktop { padding: var(--s7) var(--s7) 0; }
.workhead { padding: var(--s3) var(--s7) var(--s5); }
.manifest { min-width: 0; padding: 0 var(--s7) var(--s9); }

/* the top line: the Days toggle, and what this sheet is */
.wtop { display: flex; align-items: center; gap: var(--s3); }
.daysbtn { min-height: var(--h-toggle); padding: var(--s15) var(--s35); }

.mhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
}
/* proposal 01's topology: the two round buttons hold the date
   between them, at both widths */
.day__set { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.day__text { min-width: 0; }
.eyebrow {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.day__h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-day);
  letter-spacing: var(--track-tight);
  line-height: 1.04;
  margin-bottom: var(--s1);
  color: var(--ink);
}
.day__meta {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.mhead__tools { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s3); }
.mhead__nav { display: flex; align-items: center; gap: var(--s2); }
.mhead__picklabel {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.spans {
  display: inline-flex;
  border: var(--hair) solid var(--rule-firm);
  border-radius: var(--radius-pill);
  background: var(--sheet);
  padding: var(--s05);
  gap: var(--s05);
}
.span {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: var(--t-small);
  font-weight: 500;
  padding: var(--s15) var(--s3);
  min-height: var(--h-span);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.span:hover { color: var(--ink); background: var(--paper-sunk); }
.span:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--focus-gap); }
.span:active { transform: translateY(var(--hair)); }
.span--on { background: var(--ink); color: var(--sheet); }
.span--on:hover { background: var(--ink); color: var(--sheet); }
.span[disabled] { cursor: not-allowed; opacity: var(--o-disabled); transform: none; }
.span[disabled]:hover { background: transparent; color: var(--ink-3); }

/* --- the counts, blue and on a hairline --- */
.tally {
  margin-bottom: var(--s6);
  padding: var(--s5) 0;
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tally__cell {
  padding: 0 var(--s5);
  border-left: var(--hair) solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}
.tally__cell:first-child { border-left: 0; padding-left: 0; }
.tally__n {
  font-size: var(--t-count);
  font-weight: 500;
  line-height: 1;
  color: var(--blue);
  letter-spacing: var(--track-num);
}
.tally__n--zero { color: var(--ink-3); }
/* a number carried over from another day is not live, so it drops the
   liveness blue and says which day it belongs to */
.tally--stale .tally__n { color: var(--ink-3); }
.tallynote {
  margin: calc(var(--s6) * -1) 0 var(--s6);
  padding-top: var(--s2);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.tallynote[hidden] { display: none; }
.tally__k {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  line-height: 1.35;
}

/* --- notices --- */
.notices:not(:empty) { margin-bottom: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--sheet);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sheet);
}
.notice--fault { border-color: var(--alert-line); background: var(--alert-wash); }
.notice__body { flex: 1 1 auto; min-width: 0; }
.notice__title { font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.notice__text { font-size: var(--t-small); color: var(--ink-2); line-height: var(--lh-prose); margin-top: var(--s05); }
.notice--fault .notice__title { color: var(--alert); }

/* ============================================================
   THE SHEET AND THE RULED REGISTER
   ============================================================ */
/* No overflow clipping: an ancestor that clips is the scrollport a
   sticky column header would stick inside, which is the same as not
   sticking at all. The corners are rounded on the cells that reach
   them instead. */
.sheet {
  background: var(--sheet);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
}
.reg thead th:first-child { border-top-left-radius: var(--radius-inner); }
.reg thead th:last-child { border-top-right-radius: var(--radius-inner); }
.entry--last > .c:first-child { border-bottom-left-radius: var(--radius-inner); }
.entry--last > .c:last-child { border-bottom-right-radius: var(--radius-inner); }
/* separate, not collapse: a collapsed-border table cannot carry a
   sticky column header, and the row rules are one border each anyway */
.reg { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.reg[hidden] { display: none; }
/* the labels stay over the rows they label */
.reg__h {
  position: sticky;
  top: var(--band-h);
  z-index: 4;
  text-align: left;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--s35) var(--s3);
  background: var(--paper-sunk);
  /* a firmer rule than anything below it, and a shadow rather than a
     border so the hairline travels with the sticky band */
  box-shadow: 0 var(--hair) 0 0 var(--rule-firm);
  white-space: nowrap;
}
.reg__h--guest { padding-left: var(--s5); width: var(--col-guest); }
.reg__h--villa { width: var(--col-villa); }
.reg__h--stay { width: var(--col-stay); }
.reg__h--source { width: var(--col-source); }
.reg__h--invite { width: var(--col-invite); }
.reg__h--form { width: var(--col-form); padding-right: var(--s5); }

.entry > .c {
  padding: var(--s4) var(--s3);
  border-bottom: var(--hair) solid var(--rule);
  vertical-align: top;
  transition: background-color var(--dur) var(--ease);
}
.entry > .c--guest { padding-left: var(--s5); }
.entry > .c--form { padding-right: var(--s5); }
/* the whole ruled line opens the guest, which is what the row-wide
   hover has been promising */
.entry { cursor: pointer; }
.entry:hover > .c { background: var(--paper-lift); }
.entry--open > .c { background: var(--blue-wash); border-bottom-color: var(--blue-line); }
.entry--dim > .c { background: var(--paper-sunk); }
.entry--dim:hover > .c { background: var(--paper-dim); }
.entry--dim .c__val { color: var(--ink-3); }
.entry--dim .disclose__name { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: var(--hair); }
/* an ink step, never opacity: a faded mark on the sunk paper drops
   under 3:1 and the mark is half of "a word plus a mark" */
.entry--dim .mk { color: var(--ink-3); }
.entry--dim .mk--stop { color: var(--alert); }
.entry--last > .c { border-bottom: 0; }

/* --- the guest cell --- */
.disclose {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 var(--s15);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  text-align: left;
  width: 100%;
  border-radius: var(--radius-nub);
}
.disclose__chev {
  flex: none;
  width: var(--icon-xs);
  height: var(--icon-xs);
  /* decorative at rest: the name beside it says everything */
  color: var(--ink-5);
  align-self: center;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.disclose__chev svg { width: var(--icon-xs); height: var(--icon-xs); }
.disclose__name {
  font-family: var(--serif);
  font-size: var(--t-name);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--ink);
  min-width: 0;
  transition: color var(--dur) var(--ease);
}
.disclose:hover .disclose__name { color: var(--blue-deep); }
.disclose:hover .disclose__chev { color: var(--blue-deep); transform: translateX(var(--s05)); }
.disclose:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--focus-gap-lg); }
.disclose:active .disclose__name { color: var(--blue); }
.disclose[aria-expanded="true"] .disclose__chev { transform: rotate(90deg); color: var(--blue-deep); }
.disclose[aria-expanded="true"] .disclose__name { color: var(--blue-deep); }

.c__flag {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-flag);
  text-transform: uppercase;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-nub);
  border: var(--hair) solid var(--rule-firm);
  color: var(--ink-3);
  background: var(--paper);
  margin-left: calc(var(--icon-xs) + var(--s2));
}
.entry--dim .c__flag {
  border-color: var(--alert-line);
  color: var(--alert);
  background: var(--alert-wash);
}
.c__flag--noted { border-color: var(--rule-firm); color: var(--ink-3); background: var(--paper); }

/* --- value cells --- */
.c__label {
  display: none;
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: var(--s15);
}
.c__val { display: block; font-size: var(--t-base); color: var(--ink); line-height: var(--lh-cell); }
.c__val--quiet { font-size: var(--t-small); color: var(--ink-3); margin-top: var(--s1); }

/* --- the state mark: word plus mark, never colour alone --- */
.chip { display: flex; gap: var(--s2); align-items: flex-start; min-width: 0; }
.mk {
  flex: none;
  width: var(--icon-lg);
  height: var(--icon-lg);
  margin-top: var(--hair);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* the resting mark, on any ground this screen has */
  color: var(--ink-3);
}
.mk svg { width: var(--icon-lg); height: var(--icon-lg); }
.mk--ink { color: var(--ink); }
.mk--mid { color: var(--ink-2); }
.mk--stop { color: var(--alert); }
.mk--done { color: var(--done); }
.mk--lg { width: var(--icon-xl); height: var(--icon-xl); }
.mk--lg svg { width: var(--icon-xl); height: var(--icon-xl); }
.chip__text { min-width: 0; }
.chip__word { display: block; font-size: var(--t-base); color: var(--ink); line-height: var(--lh-cell); }
.chip__word--idle { color: var(--ink-3); }
.chip__word--stop { color: var(--alert); font-weight: 500; }
.chip__word--done { color: var(--done); font-weight: 500; }

/* The Form column's done state (Oscar, 2026-08-27). Every other state on
   this screen is a mark beside a word on the bare cell; a form that has
   come back is the one the desk checks all day, so it gets a ground of
   its own and can be found without reading the column. The word and the
   mark are both still there, so the screen's rule holds. */
.chip--done {
  /* inline-flex, so the pill hugs its word instead of ruling across the
     column: a bar the width of the cell reads as a row of highlighter,
     which is the one thing this treatment had to avoid */
  display: inline-flex;
  align-items: center;
  gap: var(--s15);
  padding: var(--s15) var(--s25) var(--s15) var(--s2);
  border: var(--hair) solid var(--done-line);
  border-radius: var(--radius-pill);
  background: var(--done-wash);
}
.chip--done .mk { margin-top: 0; }
/* the pick count keeps the indent a chip's second line has, so it reads
   as this pill's detail and not as a loose value in the cell */
.chip--done + .c__val--quiet { padding-left: calc(var(--icon-lg) + var(--s2) + var(--s15)); }
/* a cancelled or moved booking dims everything that is not an alarm: the
   brick stays, the green goes to ink, the same way the tick already did */
.entry--dim .chip--done { border-color: var(--rule-firm); background: var(--paper); }
.entry--dim .chip__word--done { color: var(--ink-3); font-weight: 400; }
.chip__why { display: block; font-size: var(--t-small); color: var(--ink-3); margin-top: var(--s1); line-height: var(--lh-ui); }
.chip__why--stop { color: var(--alert); }

/* --- day headings inside a range --- */
/* stacked under the column labels, on its own ground so the two bands
   do not read as one block */
.dayhead__cell {
  position: sticky;
  top: calc(var(--band-h) + var(--h-colhead));
  z-index: 3;
  padding: 0;
  text-align: left;
  background: var(--paper-dim);
  border-top: var(--hair) solid var(--rule-firm);
  border-bottom: var(--hair) solid var(--rule);
}
.dayhead:first-child .dayhead__cell { border-top: 0; }
.dayhead__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s25) var(--s5);
}
.dayhead__date { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.dayhead__day { font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.dayhead__rel {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--blue-deep);
  font-weight: 500;
}
.dayhead__counts { display: flex; gap: var(--s4); flex-wrap: wrap; }
.dayhead__count { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; }
.dayhead__n { font-weight: 600; color: var(--ink-2); margin-right: var(--s1); }
.dayhead__count--flag .dayhead__n { color: var(--alert); }
.dayblank__cell {
  padding: var(--s5);
  border-bottom: var(--hair) solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-3);
}

/* --- skeleton, empty --- */
.sheet__state { padding: var(--s6); }
.sheet__state[hidden] { display: none; }
.skel { display: flex; flex-direction: column; gap: var(--s5); }
.skel__head {
  height: var(--h-colhead);
  margin: calc(var(--s6) * -1) calc(var(--s6) * -1) 0;
  border-radius: var(--radius-inner) var(--radius-inner) 0 0;
  background: var(--paper-sunk);
  box-shadow: 0 var(--hair) 0 0 var(--rule-firm);
}
/* the shares add up to exactly 100%, so the gap between the bars is an
   inset on each bar rather than a track gap that would push the last
   column past the sheet */
.skel__row {
  display: grid;
  grid-template-columns:
    var(--col-guest) var(--col-villa) var(--col-stay)
    var(--col-source) var(--col-invite) var(--col-form);
  align-items: center;
}
.skel__row > .skel__bar { margin-right: var(--s3); }
.skel__row > .skel__bar:last-child { margin-right: 0; }
.skel__bar--count { width: 60%; }
.skel__bar {
  position: relative;
  overflow: hidden;
  height: var(--h-skel);
  border-radius: var(--radius-pill);
  background: var(--paper-sunk);
}
/* transform, never background-position: one composited property on
   one token duration, like every other motion on the screen */
.skel__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--rule-soft) 50%, transparent 100%);
  animation: sweep var(--dur-skel) linear infinite;
}
.skel__bar--name { height: var(--h-skel-name); }
@keyframes sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.blank { padding: var(--s7) var(--s4); text-align: center; }
.blank__h {
  font-family: var(--serif);
  font-size: var(--t-blank);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin-bottom: var(--s3);
}
.blank__p {
  font-size: var(--t-body);
  color: var(--ink-2);
  line-height: var(--lh-prose);
  max-width: var(--w-prose);
  margin: 0 auto var(--s5);
}

.foot {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}
.colophon {
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: var(--lh-prose);
}
/* Leadflix signs the footer, at a modest size, on paper */
.madeby { display: flex; align-items: baseline; gap: var(--s2); flex: none; }
.madeby__t {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
/* the mark sits ON the label's baseline, not centred on its box. The letters have
   no flat baseline: their feet splay from 198 to 214.5 of the artwork's 225 units,
   and 206 is their optical mean, which leaves 19 units of canvas under the mark.
   Give those back as a percentage of the mark's own height and one rule holds at
   every --w-wordmark (1.87px at 74, 1.67px at 66, both 8.44%) */
.wordmark {
  display: block;
  width: var(--w-wordmark);
  height: auto;
  flex: none;
  opacity: var(--o-wordmark);
  transform: translateY(8.44%);
}

/* ============================================================
   THE OPEN GUEST (right-hand panel, bottom sheet on a phone)
   ============================================================ */
.detail {
  width: var(--detail-w);
  background: var(--sheet);
  border-left: var(--hair) solid var(--rule);
}
.detail[hidden] { display: none; }
.detail__in {
  position: sticky;
  top: var(--band-h);
  max-height: calc(100vh - var(--band-h));
  overflow-y: auto;
}
.detail__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  background: var(--sheet);
  border-bottom: var(--hair) solid var(--rule-soft);
}
.detail__bt {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.panel { padding-bottom: var(--s7); }
.panel--in { animation: slidein var(--dur-slow) var(--ease) both; }
@keyframes slidein {
  from { opacity: 0; transform: translateX(var(--s25)); }
  to { opacity: 1; transform: none; }
}
.panel__head { padding: var(--s5) var(--s5) var(--s4); }
.panel__name {
  font-family: var(--serif);
  font-size: var(--t-panel);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin-top: var(--s1);
}
.panel__sub { font-size: var(--t-small); color: var(--ink-3); margin-top: var(--s15); line-height: var(--lh-ui); }
.panel__flag {
  display: inline-block;
  margin-top: var(--s3);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-flag);
  text-transform: uppercase;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-nub);
  border: var(--hair) solid var(--alert-line);
  color: var(--alert);
  background: var(--alert-wash);
}
.panel__flag--noted { border-color: var(--rule-firm); color: var(--ink-3); background: var(--paper); }

.sum { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.sum__i {
  display: inline-flex;
  align-items: center;
  gap: var(--s15);
  padding: var(--s1) var(--s25) var(--s1) var(--s15);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: var(--t-small);
  font-weight: 500;
  background: var(--paper-lift);
}
.sum__i .mk { width: var(--icon-sm); height: var(--icon-sm); margin-top: 0; }
.sum__i .mk svg { width: var(--icon-sm); height: var(--icon-sm); }
.sum__i--idle { color: var(--ink-3); font-weight: 400; }

.block { padding: var(--s5); border-top: var(--hair) solid var(--rule-soft); }
.block--last { padding-bottom: var(--s7); }
.block__h {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: var(--hair) solid var(--rule);
}

.contact { display: flex; flex-direction: column; }
.contact__row {
  display: grid;
  grid-template-columns: var(--icon-lg) var(--w-key) minmax(0, 1fr);
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s2) 0;
  border-bottom: var(--hair) dotted var(--rule-firm);
}
.contact__row:last-child { border-bottom: 0; }
/* decorative: every row is already labelled in words beside it */
.contact__row > svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-5); align-self: center; }
.contact__k {
  font-size: var(--t-micro);
  letter-spacing: var(--track-flag);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.contact__v { font-size: var(--t-small); color: var(--ink); word-break: break-word; min-width: 0; }
.contact__v--none { color: var(--ink-4); }
/* the only outbound action in the build, so it carries the tap floor */
.walink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--t-small);
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: var(--underline-gap);
  text-decoration-color: var(--blue-under);
  border-radius: var(--radius-xs);
  word-break: break-word;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.walink:hover { color: var(--blue); text-decoration-color: currentColor; }
.walink:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--focus-gap-lg); }
.walink:active { color: var(--band); }

.picks { display: flex; flex-direction: column; gap: var(--s3); }
.picks__count {
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-bottom: var(--s3);
}
.picks__catname {
  font-size: var(--t-micro);
  letter-spacing: var(--track-flag);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: var(--s2);
}
.picks__list { display: flex; flex-wrap: wrap; gap: var(--s15); }
.picks__item {
  display: inline-block;
  font-size: var(--t-small);
  color: var(--ink);
  border: var(--hair) solid var(--rule-firm);
  background: var(--paper);
  border-radius: var(--radius-pill);
  padding: var(--s1) var(--s3);
}
.panel__empty { font-size: var(--t-small); color: var(--ink-3); line-height: var(--lh-prose); }

.log { display: flex; flex-direction: column; }
.log__day {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: var(--s3) 0 var(--s2);
}
.log__day:first-child { padding-top: 0; }
.log__row {
  display: grid;
  grid-template-columns: var(--w-time) minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: var(--hair) dotted var(--rule-firm);
}
.log__row:last-child { border-bottom: 0; }
.log__t { display: flex; flex-direction: column; }
.log__d {
  font-size: var(--t-micro);
  letter-spacing: var(--track-time);
  text-transform: uppercase;
  color: var(--ink-4);
}
.log__hm { font-size: var(--t-small); font-weight: 500; color: var(--ink-2); }
.log__what { font-size: var(--t-small); color: var(--ink); line-height: var(--lh-ui); }
.log__src {
  display: block;
  margin-top: var(--s05);
  font-size: var(--t-nano);
  letter-spacing: var(--track-flag);
  text-transform: uppercase;
  color: var(--ink-4);
}

/* the scrim only exists for the phone bottom sheet */
.scrim { display: none; }

/* ============================================================
   LOGIN AND NO ACCESS
   ============================================================ */
.gate { min-height: 100vh; display: flex; flex-direction: column; }
.gate[hidden] { display: none; }
/* the same band as the register, with the same lockup in it: a bare
   crest on a black bar read as an unfinished header */
.gate__band {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--band-h);
  padding: 0 var(--s5);
  background: var(--band);
  color: var(--band-ink);
  border-bottom: var(--hair) solid var(--band-edge);
}
.gate .madeby { justify-content: center; padding: 0 var(--s5) var(--s7); }
.gate__page {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s7) var(--s5);
}
.gate__sheet {
  width: 100%;
  max-width: var(--w-gate);
  background: var(--sheet);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
  padding: var(--s7) var(--s6) var(--s6);
}
/* a real step down from the masthead, not a half one off the lede */
.gate__title {
  font-family: var(--serif);
  font-size: var(--t-mast);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.gate__title--halt { display: flex; align-items: center; gap: var(--s3); }
.gate__title--halt .mk { flex: none; }
.gate__lede { font-size: var(--t-small); color: var(--ink-3); margin-top: var(--s1); line-height: var(--lh-ui); }
.gate__body {
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: var(--lh-prose);
  margin-top: var(--s4);
}
.gate__sheet--halt { text-align: left; }
.gate__sheet--halt .btn { margin-top: var(--s6); }

.field { margin-top: var(--s5); }
.field__label {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: var(--s15);
}
.field__input {
  display: block;
  width: 100%;
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--sheet);
  border: var(--hair) solid var(--rule-firm);
  border-radius: var(--radius-nub);
  padding: var(--s3);
  min-height: var(--tap);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.field__input:hover { border-color: var(--ink-4); }
.field__input:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--focus-gap); border-color: var(--blue); }
.field__input:active { border-color: var(--ink-4); }
.field__input[disabled] { cursor: not-allowed; opacity: var(--o-disabled); background: var(--paper-sunk); }

.gate__error {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--alert-line);
  background: var(--alert-wash);
  border-radius: var(--radius-nub);
  font-size: var(--t-small);
  color: var(--alert);
  line-height: var(--lh-ui);
}
.gate__error[hidden] { display: none; }
.gate__error .mk { color: var(--alert); }
.gate__sheet .btn--go { margin-top: var(--s6); }
.gate__note {
  margin-top: var(--s4);
  font-size: var(--t-micro);
  color: var(--ink-3);
  line-height: var(--lh-prose);
}
.gate__note[hidden] { display: none; }

/* ============================================================
   TOASTS - errors only
   ============================================================ */
.toaster {
  position: fixed;
  left: 50%;
  bottom: var(--s5);
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: min(var(--w-toast), calc(100vw - var(--s7)));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--sheet);
  border: var(--hair) solid var(--alert-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-toast);
  pointer-events: auto;
  animation: rise var(--dur-slow) var(--ease) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--s2)); }
  to { opacity: 1; transform: none; }
}
.toast__text { flex: 1 1 auto; font-size: var(--t-small); color: var(--ink); line-height: var(--lh-ui); }
.toast__x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  padding: var(--s1);
  border-radius: var(--radius-xs);
  flex: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.toast__x svg { width: var(--icon-md); height: var(--icon-md); }
.toast__x:hover { color: var(--ink); background: var(--paper-sunk); }
.toast__x:focus-visible { outline: var(--focus-w) solid var(--blue); outline-offset: var(--focus-gap); }
.toast__x:active { transform: translateY(var(--hair)); }


/* ============================================================
   THE INBOX (2026-08-27): the same ledger by conversation
   ============================================================ */
.reg__h--tguest { width: var(--col-tguest); }
.reg__h--tstay { width: var(--col-tstay); }
.reg__h--tlast { width: var(--col-tlast); }
.reg__h--twhen { width: var(--col-twhen); }
.reg__h--tcount { width: var(--col-tcount); padding-right: var(--s5); }
.entry--thread > .c--count { padding-right: var(--s5); }
/* the number under a name, in the same quiet step as the stay dates,
   aligned to the name and not to the chevron beside it */
.c__val--under { margin-top: var(--s05); padding-left: calc(var(--icon-xs) + var(--s2)); }
/* the last line of a conversation is one line and no more, at any width,
   so the list keeps one ruled line per guest */
.chip__text--clip { min-width: 0; flex: 1 1 auto; }
.chip__word--clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skel--thread .skel__row {
  grid-template-columns:
    var(--col-tguest) var(--col-tstay) var(--col-tlast)
    var(--col-twhen) var(--col-tcount);
}

/* --- the open conversation --- */
.detail--thread { width: var(--thread-w); }
.panel__stay { color: var(--ink-3); }
/* the number as the register's own WhatsApp link, on its own line, at
   the 44px tap floor that link keeps everywhere (Oscar, 2026-08-27) */
.panel__line { display: block; margin-top: var(--s05); }
/* the conversation block has no heading of its own: the bar names it */
.block--convo { padding-top: var(--s4); }
.msg__b { font-weight: 500; }
.msg__i { font-style: italic; }
.msg__s { text-decoration: line-through; text-decoration-thickness: var(--hair); }
/* the last line of a conversation ends with the panel's note, not with a
   tinted band of its own bottom padding */
.convo .msg:last-child { padding-bottom: var(--s2); }
.entry--thread > .c--when .c__val { white-space: nowrap; }
.sum__i--stop { color: var(--alert); border-color: var(--alert-line); background: var(--alert-wash); }
.sum__i--done { color: var(--done); border-color: var(--done-line); background: var(--done-wash); }
.panel__note {
  padding: var(--s4) var(--s5) 0;
  font-size: var(--t-micro);
  color: var(--ink-3);
  line-height: var(--lh-prose);
  border-top: var(--hair) solid var(--rule-soft);
}

/* one ruled line per message: the clock, the words, who said it */
.convo { display: flex; flex-direction: column; }
/* the day heading sticks under the panel's bar while its messages scroll,
   the way the register's day heading sticks under the column labels */
.convo .log__day {
  position: sticky;
  top: var(--h-detailbar);
  z-index: 1;
  background: var(--sheet);
  padding: var(--s3) 0 var(--s2);
}
.convo .log__day:first-child { padding-top: 0; }
.msg {
  display: grid;
  grid-template-columns: var(--w-time) minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s25) var(--s2) var(--s25) 0;
  border-bottom: var(--hair) dotted var(--rule-firm);
}
.msg:last-child { border-bottom: 0; }
/* direction is a word and a ground: the resort's lines sit on lifted
   paper inside the sheet, the guest's on the sheet itself. The tint
   bleeds to the panel's edges so the two grounds read as two columns
   of one page rather than as cards */
.msg--out {
  background: var(--paper-lift);
  margin: 0 calc(var(--s5) * -1);
  padding-left: var(--s5);
  padding-right: var(--s5);
}
.msg__t { display: flex; flex-direction: column; }
.msg__body { min-width: 0; }
.msg__text {
  font-size: var(--t-small);
  color: var(--ink);
  line-height: var(--lh-prose);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.msg__text--media {
  display: inline-flex;
  align-items: center;
  gap: var(--s15);
  color: var(--ink-3);
  white-space: normal;
}
.msg__text--media .mk { width: var(--icon-sm); height: var(--icon-sm); margin-top: 0; }
.msg__text--media .mk svg { width: var(--icon-sm); height: var(--icon-sm); }
.msg__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  margin-top: var(--s1);
}
/* ink-3 on both grounds: 10px tracked uppercase is the thinnest setting in
   the world, and ink-4's 4.6:1 on the sheet is too little for it */
.msg__from,
.msg__kind {
  font-size: var(--t-nano);
  letter-spacing: var(--track-flag);
  text-transform: uppercase;
  color: var(--ink-3);
}
.msg__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--t-micro);
  color: var(--ink-3);
}
.msg__status .mk { width: var(--icon-sm); height: var(--icon-sm); margin-top: 0; }
.msg__status .mk svg { width: var(--icon-sm); height: var(--icon-sm); }
.msg__status--stop { color: var(--alert); font-weight: 500; }
.msg__err {
  margin-top: var(--s1);
  font-size: var(--t-small);
  color: var(--alert);
  line-height: var(--lh-ui);
}

/* ============================================================
   1180 and down: tighter columns
   ============================================================ */
@media (max-width: 1180px) {
  .worktop { padding: var(--s6) var(--s5) 0; }
  .workhead { padding: var(--s3) var(--s5) var(--s5); }
  .manifest { padding: 0 var(--s5) var(--s8); }
  .reg__h--guest,
  .entry > .c--guest { padding-left: var(--s4); }
  .reg__h--form,
  .entry > .c--form,
  .reg__h--tcount,
  .entry--thread > .c--count { padding-right: var(--s4); }
  .dayhead__line { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ============================================================
   900 and down: one column, cards, the rail as a strip, the
   detail as a bottom sheet
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --t-day: 1.75rem;
    --t-count: 1.5rem;
    --t-panel: 1.375rem;
    /* every control the desk taps reaches the tap floor: the pills,
       the switcher, the date input, the small icon buttons */
    --h-sm: var(--tap);
    --h-toggle: var(--tap);
    --h-span: var(--tap);
  }

  /* one column, in reading order: the Days toggle, the strip it
     opens, the date, then the register */
  .work { display: block; }

  /* the rail becomes a horizontal strip above the list */
  .rail {
    width: auto;
    border-right: 0;
    border-bottom: var(--hair) solid var(--rule);
  }
  .rail__in {
    position: static;
    max-height: none;
    overflow: visible;
    padding: var(--s3) 0 var(--s4);
  }
  .rail__t { padding: 0 var(--s4) var(--s2); }
  .rail__list {
    flex-direction: row;
    gap: var(--s2);
    overflow-x: auto;
    padding: 0 var(--s4) var(--s1);
    scrollbar-width: none;
  }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__sep { display: none; }
  .rail__load { padding: 0 var(--s4); }
  .dayb {
    flex: none;
    width: auto;
    min-height: var(--tap);
    border: var(--hair) solid var(--rule-firm);
    border-left-width: var(--hair);
    border-radius: var(--radius-pill);
    padding: var(--s15) var(--s4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--sheet);
  }
  .dayb__when { display: none; }
  .dayb__date { white-space: nowrap; }
  .dayb__c { white-space: nowrap; }
  .dayb.is-on { background: var(--blue-wash); border-color: var(--blue); }

  .worktop { padding: var(--s5) var(--s4) 0; }
  .workhead { padding: var(--s3) var(--s4) var(--s5); }
  .manifest { padding: 0 var(--s4) var(--s8); }

  .mhead { align-items: flex-start; flex-direction: column; gap: var(--s4); }
  /* the two round buttons hold the date between them here too, edge
     to edge, exactly as the comp does it */
  .day__set { width: 100%; justify-content: space-between; gap: var(--s3); }
  .mhead__tools { align-items: stretch; width: 100%; }
  .spans { align-self: flex-start; }
  .mhead__nav { flex-wrap: wrap; width: 100%; }
  .dateinput { flex: 1 1 var(--w-dateinput); min-width: 0; }
  .span { padding: var(--s3) var(--s4); }

  /* all four counts stay on the card, two by two */
  .tally { grid-template-columns: repeat(2, 1fr); padding: 0; }
  .tally__cell {
    padding: var(--s4) var(--s3);
    border-left: var(--hair) solid var(--rule);
    border-top: var(--hair) solid var(--rule);
  }
  .tally__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .tally__cell:nth-child(-n + 2) { border-top: 0; }

  /* the register folds into stacked cards */
  .sheet { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .reg, .reg tbody { display: block; width: 100%; }
  .reg thead { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip: rect(0 0 0 0); }

  /* five tracks so each pair can be split where its content needs
     it, and no `order`: the DOM is already the table's column order,
     Guest, Villa, Stay, Source, Invite, Form */
  .entry {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--sheet);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sheet);
    margin-bottom: var(--s4);
    overflow: hidden;
  }
  .entry--dim { background: var(--paper-sunk); box-shadow: none; }
  .entry--open { border-color: var(--blue); box-shadow: 0 0 0 var(--hair) var(--blue); }
  .entry > .c {
    display: block;
    padding: var(--s3) var(--s5);
    border-bottom: var(--hair) solid var(--rule);
    background: transparent !important;
    grid-column: 1 / -1;
  }
  .entry > .c--guest {
    padding: var(--s5) var(--s5) var(--s4);
    border-bottom: var(--hair) solid var(--rule-firm);
  }
  .entry > .c--villa { grid-column: span 3; border-right: var(--hair) solid var(--rule); }
  .entry > .c--stay { grid-column: span 2; }
  .entry > .c--source { grid-column: span 2; border-right: var(--hair) solid var(--rule); }
  .entry > .c--invite { grid-column: span 3; }
  .entry > .c--form { grid-column: 1 / -1; border-bottom: 0; padding-right: var(--s5); }
  /* the inbox card: who, then the stay beside the time, then the last
     line, then the count; the DOM is already in that order */
  /* the inbox card: who, the stay, the last line, then when beside how
     many on one shared row, so no track is left empty and no hairline
     stops in mid-air; the DOM is already in that order */
  .entry--thread > .c--stay { grid-column: 1 / -1; }
  .entry--thread > .c--tlast { grid-column: 1 / -1; }
  .entry--thread > .c--when { grid-column: span 3; border-right: var(--hair) solid var(--rule); border-bottom: 0; }
  .entry--thread > .c--count { grid-column: span 2; border-bottom: 0; padding-right: var(--s5); }
  .chip__word--clip { white-space: normal; overflow: visible; }
  .c__label { display: block; }
  .c__flag { margin-left: 0; margin-top: var(--s05); }
  /* the whole guest line is the target that opens the guest */
  .disclose { min-height: var(--tap); align-items: center; }

  /* the heading is a block of its own, not a square butted against a
     rounded card one pixel below it */
  .dayhead, .dayblank { display: block; }
  .dayhead__cell, .dayblank__cell { display: block; }
  .dayhead__cell {
    top: var(--band-h);
    border-radius: var(--radius-nub);
    border: var(--hair) solid var(--rule-firm);
    margin-bottom: var(--s3);
  }
  .dayhead__line { padding: var(--s25) var(--s4); }
  .dayblank__cell {
    padding: var(--s4);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-card);
    background: var(--sheet);
    margin-bottom: var(--s4);
  }
  .sheet__state {
    background: var(--sheet);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sheet);
  }
  .foot { flex-direction: column; align-items: flex-start; gap: var(--s4); }

  /* the open guest becomes a real bottom sheet */
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--scrim);
    animation: fade var(--dur) var(--ease) both;
  }
  .scrim[hidden] { display: none; }
  @keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 160;
    width: auto;
    border-left: 0;
    border-top: var(--hair) solid var(--rule);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    box-shadow: var(--shadow-sheet-up);
    max-height: var(--h-sheet);
  }
  .detail__in {
    position: static;
    max-height: var(--h-sheet);
    overflow-y: auto;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }
  .detail__bar {
    padding-top: var(--s5);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }
  .detail__bar::before {
    content: "";
    position: absolute;
    top: var(--s2);
    left: 50%;
    transform: translateX(-50%);
    width: var(--w-grab);
    height: var(--h-grab);
    border-radius: var(--radius-pill);
    background: var(--rule-firm);
  }
  .detail--thread { width: auto; }
  .convo .log__day { top: calc(var(--h-detailbar) + var(--s2)); }
  .panel--in { animation: sheetup var(--dur-slow) var(--ease) both; }
  @keyframes sheetup {
    from { opacity: 0; transform: translateY(var(--s35)); }
    to { opacity: 1; transform: none; }
  }
}

/* ============================================================
   560 and down: the phone band
   ============================================================ */
@media (max-width: 560px) {
  :root {
    /* 34px, not 28: below that the crest loses its crown */
    --crest-h: 34px;
    --w-wordmark: 66px;
  }
  .band { padding: 0 var(--s4); gap: var(--s2); }
  .band__eyebrow, .band__user { display: none; }
  .band__brand { gap: var(--s3); flex: none; }
  /* with the Register / Inbox switch beside it there is no room for the
     name at 390: the crest alone carries the client here (the gate
     screens, which have no switch, keep the short name) */
  .band .band__client { display: none; }
  .band__name--full { display: none; }
  .band__name--short { display: block; }
  /* the demo flag stays on the type ramp instead of dropping to 9px */
  .reviewtag { font-size: var(--t-nano); padding: var(--s05) var(--s15); letter-spacing: var(--track-flag); }
  .band .btn--sm { padding: var(--s2) var(--s3); }
  .bandnav { margin-left: 0; gap: 0; }
  .bandnav__a { padding: 0 var(--s25); }
}

@media (max-width: 420px) {
  :root { --w-key: 4.75rem; }
  .gate__band { padding: 0 var(--s4); }
  .gate__page { padding: var(--s6) var(--s4) var(--s8); }
  .gate__sheet { padding: var(--s6) var(--s5) var(--s5); }
}

/* ============================================================
   Reduced motion
   ------------------------------------------------------------
   One universal rule rather than a list: a list is only ever as
   current as the last animation somebody added to this file.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}