/* GuestIQ. Its own colours and its own screens, inside the shared frames in
   styles.css. docs/SCREENS.md is the contract. Linked only from
   work/guestiq.html and GuestIQ's card on the front page.

   Luxury but simple: warm paper, near-black ink, one bottle-green accent, and
   a red that is kept for the one thing a host cannot miss, an allergy.
   Every token set for the day has its night value below; scripts/check-screens.mjs
   refuses a token that has no night value. */

/* ---- Theme, day ---- */
[data-system="guestiq"] {
  --sys-bg: #F7F4EE;
  --sys-surface: #FFFDF9;
  --sys-ink: #1E1B16;
  --sys-muted: #625B50;
  --sys-line: #E2DACD;
  --sys-accent: #2E4A3C;
  --sys-on-accent: #FFFDF9;
  --sys-accent-soft: #E6ECE6;
  --sys-alert: #A11D16;
  --sys-on-alert: #FFFDF9;
  --sys-alert-soft: #FBEAE6;
  --sys-late: #7F4C00;
  --sys-late-soft: #F5EAD7;
}

/* ---- Theme, night. The same screen in the dark, nothing moved. ---- */
[data-theme="dark"] [data-system="guestiq"] {
  --sys-bg: #13120F;
  --sys-surface: #1C1A16;
  --sys-ink: #F2EDE4;
  --sys-muted: #ABA396;
  --sys-line: #302C25;
  --sys-accent: #9CC2AB;
  --sys-on-accent: #13120F;
  --sys-accent-soft: #1F2B24;
  --sys-alert: #FF8F84;
  --sys-on-alert: #13120F;
  --sys-alert-soft: #3A1915;
  --sys-late: #E7B76F;
  --sys-late-soft: #33270F;
}

/* ---- Screens ----
   Every length is in device points, as calc(N * var(--u)); the frame does the
   scaling. GuestIQ sets in Jost, the house's display face, already served:
   geometric and quiet, the way a good menu is set. Names and times are light,
   state and actions are medium, the heaviest weight served, so nothing is
   synthesised. Only the device's own chrome keeps the platform face. Selectors are scoped
   to the system so nothing here reaches another screen. */
[data-system="guestiq"] .giq { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; color: var(--sys-ink); font-family: var(--font-display); font-weight: 400; }
[data-system="guestiq"] .giq-display { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.005em; }
[data-system="guestiq"] .giq-muted { color: var(--sys-muted); }

/* The bar along the top of the desk screen. */
[data-system="guestiq"] .giq-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(76 * var(--u)); padding: 0 calc(28 * var(--u)); border-bottom: var(--line) solid var(--sys-line); }
[data-system="guestiq"] .giq-top__left { display: flex; align-items: baseline; gap: calc(16 * var(--u)); }
[data-system="guestiq"] .giq-top__right { display: flex; align-items: center; gap: calc(16 * var(--u)); }
[data-system="guestiq"] .giq-title { font-size: calc(30 * var(--u)); line-height: 1; }
[data-system="guestiq"] .giq-sub { font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-seg { display: flex; padding: calc(3 * var(--u)); border-radius: calc(11 * var(--u)); border: var(--line) solid var(--sys-line); }
[data-system="guestiq"] .giq-seg span { display: grid; place-items: center; min-width: calc(92 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-seg .is-on { background: var(--sys-accent-soft); color: var(--sys-ink); font-weight: 500; }

/* Buttons are drawn, not controls: a screen is a picture. 44 points and up. */
[data-system="guestiq"] .giq-btn { display: inline-flex; align-items: center; justify-content: center; height: calc(44 * var(--u)); padding: 0 calc(20 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--sys-accent); color: var(--sys-on-accent); font-size: calc(17 * var(--u)); font-weight: 500; }
[data-system="guestiq"] .giq-btn--quiet { background: transparent; color: var(--sys-ink); border: var(--line) solid var(--sys-line); }
[data-system="guestiq"] .giq-btn--tall { height: calc(56 * var(--u)); }

/* The service list and the guest beside it. */
[data-system="guestiq"] .giq-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(460 * var(--u)); }
[data-system="guestiq"] .giq-cols { display: grid; grid-template-columns: calc(76 * var(--u)) minmax(0, 1fr) calc(128 * var(--u)) calc(150 * var(--u)); column-gap: calc(16 * var(--u)); align-items: center; padding: 0 calc(28 * var(--u)); }
[data-system="guestiq"] .giq-head { height: calc(40 * var(--u)); font-size: calc(13 * var(--u)); color: var(--sys-muted); border-bottom: var(--line) solid var(--sys-line); }
[data-system="guestiq"] .giq-row { min-height: calc(86 * var(--u)); padding-top: calc(12 * var(--u)); padding-bottom: calc(12 * var(--u)); border-bottom: var(--line) solid var(--sys-line); }
[data-system="guestiq"] .giq-row.is-on { background: var(--sys-accent-soft); }
[data-system="guestiq"] .giq-row.is-past { color: var(--sys-muted); }
[data-system="guestiq"] .giq-time { font-size: calc(22 * var(--u)); font-variant-numeric: tabular-nums; }
[data-system="guestiq"] .giq-name { font-size: calc(22 * var(--u)); line-height: 1.15; }
[data-system="guestiq"] .giq-memo { margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.35; color: var(--sys-muted); }
[data-system="guestiq"] .giq-cover { font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-more { padding: calc(16 * var(--u)) calc(28 * var(--u)); font-size: calc(13 * var(--u)); color: var(--sys-muted); }

/* State. Seated is quiet, arrived carries the accent, late is amber, and an
   allergy is a solid red flag beside the name that no one reads past. */
[data-system="guestiq"] .giq-chip { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(15 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; white-space: nowrap; justify-self: start; }
[data-system="guestiq"] .giq-chip--seated { border: var(--line) solid var(--sys-line); color: var(--sys-muted); font-weight: 500; }
[data-system="guestiq"] .giq-chip--arrived { background: var(--sys-accent); color: var(--sys-on-accent); }
[data-system="guestiq"] .giq-chip--late { background: var(--sys-late-soft); color: var(--sys-late); }
[data-system="guestiq"] .giq-chip--due { color: var(--sys-muted); font-weight: 500; padding: 0; }
[data-system="guestiq"] .giq-alert { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(6 * var(--u)); margin-left: calc(10 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--sys-alert); color: var(--sys-on-alert); font-size: calc(13 * var(--u)); font-weight: 500; letter-spacing: 0; vertical-align: calc(3 * var(--u)); white-space: nowrap; }
[data-system="guestiq"] .giq-alert i { display: grid; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: var(--sys-on-alert); color: var(--sys-alert); font-size: calc(12 * var(--u)); font-style: normal; font-weight: 500; }
[data-system="guestiq"] .giq-dot { display: inline-block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--sys-accent); }

/* The guest, as the house knows them. */
[data-system="guestiq"] .giq-panel { display: flex; flex-direction: column; min-height: 0; padding: calc(30 * var(--u)) calc(32 * var(--u)) calc(28 * var(--u)); background: var(--sys-surface); border-left: var(--line) solid var(--sys-line); }
[data-system="guestiq"] .giq-kicker { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; color: var(--sys-accent); }
[data-system="guestiq"] .giq-big { margin-top: calc(10 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1.1; }
[data-system="guestiq"] .giq-line { margin-top: calc(6 * var(--u)); font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); margin-top: calc(26 * var(--u)); }
[data-system="guestiq"] .giq-field { padding: calc(14 * var(--u)) 0; border-top: var(--line) solid var(--sys-line); }
[data-system="guestiq"] .giq-key { font-size: calc(13 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-val { margin-top: calc(4 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 500; line-height: 1.3; }
[data-system="guestiq"] .giq-val--none { color: var(--sys-muted); font-weight: 400; }
[data-system="guestiq"] .giq-note { margin-top: calc(20 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--sys-bg); }
[data-system="guestiq"] .giq-note__text { font-size: calc(17 * var(--u)); line-height: 1.4; }
[data-system="guestiq"] .giq-note__by { margin-top: calc(6 * var(--u)); font-size: calc(13 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-actions { margin-top: auto; display: grid; gap: calc(12 * var(--u)); }

/* The phone, at the end of a shift. */
[data-system="guestiq"] .giq-phone { flex: 1 1 auto; display: flex; flex-direction: column; padding: calc(4 * var(--u)) calc(20 * var(--u)) 0; }
[data-system="guestiq"] .giq-back { display: flex; align-items: center; height: calc(44 * var(--u)); font-size: calc(17 * var(--u)); color: var(--sys-accent); }
[data-system="guestiq"] .giq-large { font-size: calc(34 * var(--u)); line-height: 1.15; }
[data-system="guestiq"] .giq-input { margin-top: calc(18 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(14 * var(--u)); border: var(--line) solid var(--sys-line); background: var(--sys-surface); font-size: calc(20 * var(--u)); line-height: 1.4; }
[data-system="guestiq"] .giq-caret { display: inline-block; width: calc(2 * var(--u)); height: calc(24 * var(--u)); margin-left: calc(2 * var(--u)); background: var(--sys-accent); vertical-align: calc(-5 * var(--u)); }
[data-system="guestiq"] .giq-label { margin-top: calc(24 * var(--u)); font-size: calc(13 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-item { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: var(--line) solid var(--sys-line); }
[data-system="guestiq"] .giq-item__val { font-size: calc(17 * var(--u)); font-weight: 500; }
[data-system="guestiq"] .giq-item__key { margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-tick { flex: none; display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: var(--sys-accent-soft); color: var(--sys-accent); font-size: calc(14 * var(--u)); font-weight: 500; }
[data-system="guestiq"] .giq-phone .giq-btn { margin-top: auto; margin-bottom: calc(42 * var(--u)); height: calc(50 * var(--u)); }

/* A plate: part of the tablet screen, 800 by 600 points. */
[data-system="guestiq"] .giq-plate { flex: 1 1 auto; display: flex; flex-direction: column; padding: calc(30 * var(--u)) calc(34 * var(--u)); }
[data-system="guestiq"] .giq-plate__head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(16 * var(--u)); }
[data-system="guestiq"] .giq-visits { margin-top: calc(22 * var(--u)); }
[data-system="guestiq"] .giq-visit { display: grid; grid-template-columns: calc(96 * var(--u)) calc(96 * var(--u)) minmax(0, 1fr); column-gap: calc(16 * var(--u)); padding: calc(12 * var(--u)) 0; border-top: var(--line) solid var(--sys-line); font-size: calc(15 * var(--u)); line-height: 1.35; }
[data-system="guestiq"] .giq-said { margin-top: calc(14 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.3; }
[data-system="guestiq"] .giq-became { margin-top: calc(26 * var(--u)); }
[data-system="guestiq"] .giq-became .giq-item { border-bottom: 0; border-top: var(--line) solid var(--sys-line); padding: calc(14 * var(--u)) 0; }
[data-system="guestiq"] .giq-saved { margin-top: auto; display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-held { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: calc(13 * var(--u)) 0; border-top: var(--line) solid var(--sys-line); font-size: calc(17 * var(--u)); }
[data-system="guestiq"] .giq-tag { display: inline-flex; align-items: center; height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(14 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; border: var(--line) solid var(--sys-line); color: var(--sys-ink); }
[data-system="guestiq"] .giq-tag--pref { background: var(--sys-accent-soft); border-color: transparent; color: var(--sys-accent); }
[data-system="guestiq"] .giq-foot { margin-top: auto; padding-top: calc(16 * var(--u)); font-size: calc(13 * var(--u)); color: var(--sys-muted); }

/* The front page's card: the service list, cut down. */
[data-system="guestiq"] .giq-card .giq-cols { grid-template-columns: calc(76 * var(--u)) minmax(0, 1fr) auto; padding: 0; }
[data-system="guestiq"] .giq-card .giq-row { min-height: calc(100 * var(--u)); }
[data-system="guestiq"] .giq-card .giq-row.is-on { margin: 0 calc(-34 * var(--u)); padding-left: calc(34 * var(--u)); padding-right: calc(34 * var(--u)); }
[data-system="guestiq"] .giq-big--flush { margin-top: 0; }
[data-system="guestiq"] .giq-first { margin-top: calc(8 * var(--u)); }
[data-system="guestiq"] .giq-alert--lead { margin-left: 0; }
[data-system="guestiq"] .giq-held--head { padding: 0 0 calc(10 * var(--u)); border-top: 0; font-size: calc(13 * var(--u)); color: var(--sys-muted); }
[data-system="guestiq"] .giq-became--close { margin-top: calc(18 * var(--u)); }

/* On a plate the tablet shows one thing, so it sets it at the sizes the app
   uses for a detail view rather than for a list beside a panel. */
[data-system="guestiq"] .giq-plate .giq-title { font-size: calc(34 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-sub,
[data-system="guestiq"] .giq-plate .giq-line { font-size: calc(17 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-key { font-size: calc(15 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-val { font-size: calc(20 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-field { padding: calc(16 * var(--u)) 0; }
[data-system="guestiq"] .giq-plate .giq-visit { font-size: calc(17 * var(--u)); padding: calc(14 * var(--u)) 0; grid-template-columns: calc(104 * var(--u)) calc(104 * var(--u)) minmax(0, 1fr); }
[data-system="guestiq"] .giq-plate .giq-said { font-size: calc(32 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-item__val { font-size: calc(20 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-item__key { font-size: calc(15 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-tick { width: calc(30 * var(--u)); height: calc(30 * var(--u)); font-size: calc(16 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-held { font-size: calc(20 * var(--u)); padding: calc(15 * var(--u)) 0; }
[data-system="guestiq"] .giq-plate .giq-held--head { font-size: calc(15 * var(--u)); padding: 0 0 calc(10 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-tag { height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(17 * var(--u)); font-size: calc(15 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-foot { font-size: calc(15 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-chip { height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(17 * var(--u)); font-size: calc(15 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-alert { height: calc(32 * var(--u)); font-size: calc(15 * var(--u)); }
[data-system="guestiq"] .giq-card .giq-time,
[data-system="guestiq"] .giq-card .giq-name { font-size: calc(26 * var(--u)); }
[data-system="guestiq"] .giq-card .giq-memo { font-size: calc(17 * var(--u)); }
[data-system="guestiq"] .giq-card .giq-row { min-height: calc(112 * var(--u)); }
[data-system="guestiq"] .giq-card .giq-cols { grid-template-columns: calc(84 * var(--u)) minmax(0, 1fr) auto; }
[data-system="guestiq"] .giq-plate .giq-chip--due { padding: 0; }

/* A plate holds one thing, so it is given the room. */
[data-system="guestiq"] .giq-plate { padding: calc(36 * var(--u)) calc(40 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-fields { margin-top: calc(32 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-field { padding: calc(20 * var(--u)) 0; }
[data-system="guestiq"] .giq-plate .giq-visits { margin-top: calc(30 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-visit { padding: calc(16 * var(--u)) 0; }
[data-system="guestiq"] .giq-plate .giq-said { margin-top: calc(20 * var(--u)); font-size: calc(36 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-became { margin-top: calc(34 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-became .giq-item { padding: calc(20 * var(--u)) 0; }
[data-system="guestiq"] .giq-plate .giq-held { padding: calc(20 * var(--u)) 0; }
[data-system="guestiq"] .giq-plate .giq-held--head { padding: 0 0 calc(12 * var(--u)); }
[data-system="guestiq"] .giq-card .giq-row.is-on { margin: 0 calc(-40 * var(--u)); padding-left: calc(40 * var(--u)); padding-right: calc(40 * var(--u)); }
[data-system="guestiq"] .giq-tick svg { display: block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
[data-system="guestiq"] .giq-plate .giq-tick svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }