/* ==========================================================================
   MAGIK Tech: the pieces only the four Tech pages have. The page scenes are
   the shared division components (css/magik.css section 16); this file adds
   the interfaces, adopted from the Codex Tech pages and brought into the
   system: #FFFCFC or ink grounds, labels 12px and up, body 16px and up,
   44px targets, nothing moves on hover, and every rule scoped to a named
   class (never a bare element, so nothing leaks into a screen or out of it).

     1  Page scenes: the hero's wireframe, the process, the product scene,
        good to know
     2  Preview cards (/tech, "Systems we can shape")
     3  Interface basics shared by every screen
     4  Showcase (school, custom) and the paper-to-system stepper
     5  Hotel system
     6  Responsive steps

   Cache: /css/pages/tech.css?v=N on the four Tech pages; bump N on change.
   ========================================================================== */


/* 1  PAGE SCENES ---------------------------------------------------------- */

/* the hero's frame: Codex's "product direction" wireframe, kept as it was
   (a product without claiming one), with its three disclaimers gone */
.tw{ --dv-window-max:560px; }
/* Daniela, 27 September: the hero must never feel cut off. The interface
   panel had no ceiling, so on a shorter window it could push the button
   below the fold. Capped to a share of the viewport height instead, same
   as the product heroes already do; the panel's own overflow:hidden keeps
   its corners clean when the cap bites. */
.dv-hero .dv-field{ min-height:0; max-height:clamp(320px, 62vh, 520px); }
.tw-body{ display:grid; grid-template-columns:132px minmax(0, 1fr); min-height:252px; }
.tw-side{ display:flex; flex-direction:column; padding:14px 10px; border-right:1px solid rgba(255,255,255,.12); }
.tw-side > span{ display:block; padding:10px 6px; border-bottom:1px solid rgba(255,255,255,.055); font-size:12px; font-weight:500; letter-spacing:.06em; line-height:1.3; text-transform:uppercase; color:#AFC0C2; }
.tw-side > span:first-child{ background-color:rgba(255,255,255,.07); color:#FFFFFF; }
.tw-side b{ font-weight:inherit; }
.tw-main{ min-width:0; padding:19px; }
.tw-kicker{ font-size:12px; font-weight:600; letter-spacing:.12em; line-height:16px; text-transform:uppercase; color:#A8BFC3; }
.tw-h{ max-width:290px; margin:13px 0 18px; font-size:clamp(20px, 2.1vw, 27px); font-weight:650; line-height:1.08; letter-spacing:-.03em; color:#E9F1F0; }
.tw-panels{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px; }
.tw-panels > span{ padding:12px 9px; border:1px solid rgba(255,255,255,.14); background-color:rgba(255,255,255,.035); font-size:12px; line-height:1.3; color:#C9D6D6; }
.tw-bars{ display:flex; align-items:flex-end; gap:5px; height:31px; margin-top:15px; border-bottom:1px solid rgba(255,255,255,.2); }
.tw-bars > i{ display:block; width:12%; height:38%; background-color:#7EB1C4; }
.tw-bars > i:nth-child(2){ height:76%; }
.tw-bars > i:nth-child(3){ height:52%; }

/* the process: title left, the four steps right (Codex .tech-proof) */
.t-process{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .8fr); gap:32px 8vw; align-items:center; }
.t-process .dv-h2{ max-width:640px; }
.t-process .dv-row{ min-height:60px; }

/* the product scene continues the hero's ink: no gap between them */
.dv-section.t-product{ padding-top:0; }
.t-product .dv-field{ padding:clamp(18px, 3.2vw, 48px) clamp(10px, 2.6vw, 40px); }
.t-product .dv-product > figcaption{ margin-top:4px; }

/* good to know: title left, the folds right */
.t-know{ display:grid; grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr); gap:24px clamp(40px, 7vw, 120px); align-items:start; }
.t-know .dv-head{ margin-bottom:0; }
.dv-fold-body .t-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 0; list-style:none; }
.t-chips > li{ display:inline-flex; align-items:center; min-height:36px; padding:6px 12px; border:1px solid var(--m-rule); font-size:15px; line-height:1.3; color:var(--m-text); }
.t-qa{ display:grid; gap:18px; }
.t-qa dt{ font-size:16px; font-weight:600; line-height:1.4; color:var(--m-text); }
.t-qa dd{ margin-top:4px; font-size:16px; line-height:1.6; color:var(--m-text-2); }

/* the numbered square: a module named under the frame, found in the screen */
.t-num{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:18px; height:18px; margin:0 6px; vertical-align:-3px;
  border:1px solid #80B2C6; color:#9CC6D6;
  font-size:12px; font-weight:650; line-height:1; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums;
}

/* the link under the landing's showcase */
.t-more{ display:flex; justify-content:center; margin-top:22px; }


/* 2  PREVIEW CARDS -------------------------------------------------------
   Each system's card shows its product on its own tinted field (Codex's
   best Tech idea), rebuilt at 12px and up. Where the card is narrow, the
   preview drops content rather than shrinking it (container queries). */
.tp{
  container-type:inline-size;
  position:relative; display:flex; flex-direction:column; gap:10px; width:100%; min-height:276px;
  padding:16px 16px 14px; color:#E9F0EF; font-family:var(--m-sans); font-size:12px; line-height:1.35;
  font-variant-numeric:tabular-nums; transition:filter .3s ease;
}
.dv-card:hover .tp{ filter:saturate(1.12); }
.tp--hotel{ background:radial-gradient(ellipse at 85% 0, #245265, #10242E 57%, #0C171D); }
.tp--school{ background:radial-gradient(ellipse at 90% 0, #395875, #182B3B 52%, #111C27); }
.tp--custom{ background:radial-gradient(ellipse at 90% 0, #5A436D, #29243E 50%, #181827); }
.tp-top{ display:flex; align-items:center; gap:10px; min-height:26px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.16); white-space:nowrap; }
.tp-top b{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#F4F7F5; }
.tp-top b::before{ content:""; flex:none; width:8px; height:8px; background-color:#E31B23; }
.tp-top span{ margin-left:auto; overflow:hidden; text-overflow:clip; font-size:12px; color:#D4DEDE; }
.tp-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.tp-grid--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tp-box{ min-width:0; padding:9px 10px; border:1px solid rgba(255,255,255,.1); border-radius:3px; background-color:rgba(7,14,18,.28); }
.tp-box small{ display:block; font-size:12px; line-height:1.3; color:#B7C7C8; }
.tp-box b{ display:block; margin-top:4px; font-size:18px; font-weight:600; line-height:1.15; letter-spacing:-.02em; color:#F5F5EE; }
.tp-box i{ display:block; margin-top:2px; font-size:12px; font-style:normal; color:#95DCC2; }
.tp--school .tp-box i{ color:#B8CEFA; }
.tp--custom .tp-box i{ color:#E0C3EE; }
.tp-bottom{ flex:1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:8px; }
.tp-queue, .tp-table{ flex:1; }
.tp-panel{ min-width:0; padding:8px 10px; border:1px solid rgba(255,255,255,.1); border-radius:3px; background-color:rgba(7,14,18,.22); }
.tp-panel > small{ display:block; margin-bottom:6px; font-size:12px; color:#B7C7C8; }
.tp-bars{ display:flex; align-items:flex-end; gap:5px; height:52px; border-bottom:1px solid rgba(255,255,255,.22); }
.tp-bars > i{ flex:1; height:var(--h, 50%); border-radius:2px 2px 0 0; background:linear-gradient(#68D4B0, #267B70); }
.tp-bars > i.is-today{ background:#E31B23; }
.tp-rows{ display:flex; flex-direction:column; }
.tp-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; padding:3px 0; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#E1E9E6; }
.tp-row:first-child{ border-top:0; }
.tp-row em{ font-style:normal; color:#BFCDCB; white-space:nowrap; }
.tp-table{ display:flex; flex-direction:column; padding:6px 10px; border:1px solid rgba(255,255,255,.1); border-radius:3px; background-color:rgba(7,14,18,.22); }
.tp-tr{ display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .6fr); align-items:center; gap:6px; min-height:26px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#E1E9EA; }
.tp-tr:first-child{ border-top:0; color:#B9C9D3; letter-spacing:.04em; }
.tp-tr > :last-child{ text-align:right; color:#9EE0C6; }
.tp-tr:first-child > :last-child{ color:#B9C9D3; }
.tp-foot{ margin-top:auto; font-size:12px; color:#C6D4DC; }
.tp-queue .tp-row{ min-height:30px; }
.tp-queue .tp-row em{ padding:2px 8px; border:1px solid rgba(255,255,255,.18); border-radius:10px; color:#E6D2EF; }
@container (max-width:340px){
  .tp--hotel .tp-grid > .tp-box:nth-child(3){ display:none; }
  .tp--hotel .tp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* the custom preview keeps its three counts, as rows */
  .tp--custom .tp-grid{ grid-template-columns:minmax(0, 1fr); gap:6px; }
  .tp--custom .tp-box{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:7px 10px; }
  .tp--custom .tp-box b{ order:2; margin:0; font-size:17px; }
  .tp--custom .tp-box i{ display:none; }
  .tp--custom .tp-queue .tp-row:nth-child(n+2){ display:none; }
}
@container (max-width:280px){
  .tp-bottom{ grid-template-columns:minmax(0, 1fr); }
  .tp-bottom > .tp-panel:first-child{ display:none; }
  .tp-queue .tp-row em{ padding:0; border:0; }
}


/* 3  INTERFACE BASICS ------------------------------------------------------
   The screens are designed in code with generic, plausible data. Small
   radii inside a screen (panels, badges) are the product's own; the frame
   itself is the system's .dv-window, sharp. */
.hd, .ss{ font-family:var(--m-sans); font-variant-numeric:tabular-nums; }
.hd .dv-window-bar, .ss .dv-window-bar{ background-color:#101D22; color:#EDF1EE; }
.hd .dv-window-bar small, .ss .dv-window-bar small{ color:#B3C3C4; }
/* a still of the opening screen, shown before the script takes over and
   without scripts: nothing in it is a control */
.is-static{ pointer-events:none; }
/* the soft on/off switch of an automation rule */
.hd-switch{
  display:inline-flex; align-items:center; justify-content:flex-start; gap:8px; flex:none;
  min-width:96px; min-height:44px; padding:0 12px; border:1px solid rgba(83,199,164,.4); border-radius:22px;
  background-color:rgba(83,199,164,.1); color:#8CDBB8; font-size:13px; font-weight:600;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hd-switch > span{ position:relative; flex:none; width:26px; height:14px; border-radius:7px; background-color:#53C7A4; }
.hd-switch > span::after{ content:""; position:absolute; top:2px; left:14px; width:10px; height:10px; border-radius:50%; background-color:#0B151A; transition:left .2s ease; }
.hd-switch[aria-checked="false"]{ border-color:rgba(255,255,255,.2); background-color:rgba(255,255,255,.05); color:#B8C4C2; }
.hd-switch[aria-checked="false"] > span{ background-color:#56626F; }
.hd-switch[aria-checked="false"] > span::after{ left:2px; }
.hd-switch:hover{ border-color:#8CDBB8; }


/* 4  SHOWCASE AND STEPPER -------------------------------------------------- */
.ss{ --dv-window-max:980px; --ss-accent:#8EB9EF; background-color:#0D171D; color:#EDF2EF; font-size:14px; line-height:1.45; }
.ss--school{ --ss-accent:#8EB9EF; }
.ss--custom{ --ss-accent:#C894DD; }
.ss--wide{ --dv-window-max:1120px; }
.ss-tabs{ display:flex; gap:4px; overflow-x:auto; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.08); background-color:#0E191F; }
.ss-tab{
  display:inline-flex; align-items:center; flex:none; min-height:44px; padding:0 14px;
  border:1px solid transparent; border-radius:4px; color:#A9BABC; font-size:14px; font-weight:500;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ss-tab:hover{ color:#F4F5EF; }
.ss-tab[aria-selected="true"]{
  border-color:color-mix(in srgb, var(--ss-accent) 30%, transparent);
  background-color:color-mix(in srgb, var(--ss-accent) 10%, transparent); color:#F4F7FF;
}
.ss-work{ min-height:360px; padding:18px; background:radial-gradient(ellipse at 80% 0, #243846, #101A20 67%); }
.ss-screen:focus-visible{ outline-offset:-2px; }
.ss-heading{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; margin-bottom:14px; }
.ss-kicker{ display:flex; align-items:center; font-size:12px; font-weight:600; letter-spacing:.12em; line-height:16px; text-transform:uppercase; color:#A9BDC1; }
.ss-kicker .t-num{ margin-left:8px; }
.ss-title{ margin-top:4px; font-size:19px; font-weight:600; line-height:1.2; letter-spacing:-.02em; color:#F2F4EF; }
.ss-caption{ font-size:12px; color:#B0C2C5; }
.ss-metrics{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-bottom:10px; }
.ss-metrics > div{ min-width:0; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:4px; background-color:rgba(255,255,255,.03); }
.ss-metrics small{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#A6B8BA; }
.ss-metrics b{ display:block; margin:6px 0 2px; font-size:22px; font-weight:600; line-height:1.1; color:#F3F4EF; }
.ss-metrics em{ font-size:13px; font-style:normal; color:#8AD9B7; }
.ss--school .ss-metrics em{ color:#B3CDF6; }
.ss--custom .ss-metrics em{ color:#E0C3EE; }
.ss-table{ width:100%; border-collapse:collapse; border:1px solid rgba(255,255,255,.1); background-color:rgba(255,255,255,.02); font-size:14px; }
.ss-table th, .ss-table td{ padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.07); text-align:left; vertical-align:middle; font-weight:400; }
.ss-table thead th{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#A2B6B9; }
.ss-table thead .t-num{ margin:0 0 0 6px; }
.ss-table tbody th{ color:#EEF3F0; font-weight:500; }
.ss-table td{ color:#C9D6D3; }
.ss-table td:last-child{ color:#8AD9B7; }
.ss-table tfoot th, .ss-table tfoot td{ border-bottom:0; color:#EEF3F0; font-weight:600; }
.ss-state{ font-style:normal; }
.ss--custom .ss-table td:last-child{ color:#E0C3EE; }
.ss-rowlink{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:-10px 0; padding:0;
  color:#F4F7FF; font-size:14px; font-weight:600; text-align:left;
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:.3em;
}
.ss-rowlink:hover{ text-decoration-color:currentColor; }
.ss-rowlink svg{ color:var(--ss-accent); }
.ss-foot{ margin-top:12px; font-size:13px; color:#B0C2C5; }
.ss-profile{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:4px; background-color:rgba(255,255,255,.03); }
.ss-avatar{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:linear-gradient(145deg, #82AEEA, #35557B); color:#FFFFFF; font-size:13px; font-weight:600; }
.ss-profile-who{ min-width:0; }
.ss-profile-who b{ display:flex; align-items:center; font-size:15px; font-weight:600; color:#F2F4EF; }
.ss-profile-who small{ display:block; margin-top:2px; font-size:13px; color:#B0C2C5; }
.ss-badge{ margin-left:auto; padding:4px 10px; border:1px solid rgba(83,199,164,.35); border-radius:12px; font-size:12px; font-style:normal; color:#86D9B5; }
.ss-fields{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:8px; }
.ss-field{ min-width:0; padding:11px 12px; border:1px solid rgba(255,255,255,.08); border-radius:3px; background-color:rgba(255,255,255,.025); }
.ss-field--wide{ grid-column:1 / -1; }
.ss-field.is-auto{ border-style:dashed; background-color:rgba(255,255,255,.05); }
.ss-label{ display:flex; align-items:center; flex-wrap:wrap; font-size:12px; font-weight:600; letter-spacing:.08em; line-height:16px; text-transform:uppercase; color:#A6B8BA; }
.ss-label .t-num{ margin:0 0 0 8px; }
.ss-field > b{ display:block; margin-top:6px; font-size:14px; font-weight:500; color:#EAF0EC; }
.ss-results, .ss-figs{ display:grid; gap:6px; margin-top:8px; }
.ss-results{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
.ss-results > div{ padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:3px; text-align:center; }
.ss-results dt{ font-size:12px; color:#A6B8BA; }
.ss-results dd{ margin-top:2px; font-size:15px; font-weight:600; color:#EAF0EC; }
.ss-results .is-total, .ss-results .is-grade{ border-color:color-mix(in srgb, var(--ss-accent) 40%, transparent); }
.ss-figs{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ss-figs > div{ padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:3px; }
.ss-figs dt{ font-size:12px; color:#A6B8BA; }
.ss-figs dd{ margin-top:2px; font-size:16px; font-weight:600; color:#EAF0EC; }
.ss-figs .is-owed dd{ color:#FF9DA2; }
.ss-figs .is-balance:not(.is-owed) dd{ color:#8AD9B7; }
.ss-figs .is-total{ border-color:color-mix(in srgb, var(--ss-accent) 40%, transparent); }
.ss-act-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.ss-action, .ss-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 16px;
  border:1px solid transparent; border-radius:4px; font-size:14px; font-weight:600;
  transition:background-color .2s ease, border-color .2s ease;
}
.ss-action{ background-color:#E31B23; color:#FFFCFC; }
.ss-action:hover{ background-color:#C8141B; }
.ss-ghost{ border-color:rgba(255,255,255,.3); color:#E4ECEA; }
.ss-ghost:hover{ background-color:rgba(255,255,255,.06); border-color:#E4ECEA; }
.ss-ghost:disabled{ opacity:.45; cursor:not-allowed; }
.ss-textbtn{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; color:#D5E0DE; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:.3em; text-decoration-color:rgba(255,255,255,.35); }
.ss-textbtn:hover{ text-decoration-color:currentColor; }
.ss-done{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; font-weight:600; color:#8AD9B7; }
.ss-ico{ flex:none; width:16px; height:16px; }
.ss-flow{ margin-top:4px; }
.ss-sub{ display:flex; align-items:center; flex-wrap:wrap; font-size:13px; color:#C3D0CE; }
.ss-sub .t-num{ margin:0 8px 0 0; }
.ss-track{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:10px; list-style:none; }
.ss-track > li{ position:relative; display:flex; flex-direction:column; gap:6px; padding-right:6px; font-size:13px; color:#A6B8BA; }
.ss-track > li > i{ position:relative; display:block; width:14px; height:14px; border:1.5px solid #6F8587; background-color:#0D171D; }
.ss-track > li:not(:last-child)::before{ content:""; position:absolute; top:6.5px; left:14px; right:0; height:1.5px; background-color:#3A4A4D; }
.ss-track > li.is-done{ color:#DDE6E3; }
.ss-track > li.is-done > i{ border-color:var(--ss-accent); background-color:var(--ss-accent); }
.ss-track > li.is-done:not(:last-child)::before{ background-color:var(--ss-accent); }
.ss-track > li.is-current{ color:#FFFFFF; font-weight:600; }
.ss-track > li.is-current > i{ border-color:#E31B23; background-color:#E31B23; }
.ss-who{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:14px; }
.ss-roles{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; }
.ss-roles > li{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:1px solid rgba(255,255,255,.14); border-radius:16px; font-size:13px; color:#B0C2C5; }
.ss-roles > li.is-on{ border-color:#F4F7FF; background-color:#F4F7FF; color:#101A20; font-weight:600; }
.ss-nobody{ font-size:13px; color:#C3D0CE; }
.ss-month{ display:flex; align-items:flex-start; gap:0; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); font-size:13px; line-height:1.5; color:#C3D0CE; }
.ss-month .t-num{ margin:1px 8px 0 0; }
.ss-rules{ display:flex; flex-direction:column; gap:8px; }
.ss-rule{ display:grid; grid-template-columns:32px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:4px; background-color:rgba(255,255,255,.03); }
.ss-rule-ico{ display:grid; place-items:center; width:32px; height:32px; border-radius:6px; background-color:#28404A; color:#A8D7D2; }
.ss-rule-what b{ display:block; font-size:14px; font-weight:600; color:#EAF0EB; }
.ss-rule-what small{ display:block; margin-top:2px; font-size:13px; line-height:1.4; color:#B0C2C5; }

/* the stepper: five steps, the paper way beside the system */
.st{ --dv-window-max:1120px; }
.st-steps{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); list-style:none; border-bottom:1px solid rgba(255,255,255,.08); background-color:#0E191F; }
.st-steps > li + li{ border-left:1px solid rgba(255,255,255,.08); }
.st-step{
  display:flex; align-items:center; gap:10px; width:100%; min-height:56px; padding:0 16px;
  color:#A9BABC; font-size:14px; font-weight:500; text-align:left;
  box-shadow:inset 0 -2px 0 transparent; transition:background-color .2s ease, color .2s ease;
}
.st-step:hover{ color:#F4F5EF; background-color:rgba(255,255,255,.03); }
.st-step[aria-current]{ color:#FFFFFF; font-weight:600; box-shadow:inset 0 -2px 0 var(--ss-accent); background-color:rgba(255,255,255,.04); }
.st-num{ display:grid; place-items:center; flex:none; width:24px; height:24px; border:1px solid rgba(255,255,255,.35); font-size:12px; font-weight:650; }
.st-step.is-done .st-num{ border-color:var(--ss-accent); color:var(--ss-accent); }
.st-step[aria-current] .st-num{ border-color:#FFFFFF; background-color:#FFFFFF; color:#101A20; }
.st-now{ display:none; padding:10px 16px 0; font-size:13px; font-weight:600; color:#DDE6E3; background-color:#101A20; }
.st-work{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); background:radial-gradient(ellipse at 85% 0, #3A2E4A, #141A22 65%); }
.st-paper, .st-sys{ min-width:0; padding:20px; }
.st-sys{ border-left:1px solid rgba(255,255,255,.08); }
.st-pic{ display:grid; place-items:center; min-height:180px; margin-top:10px; border:1px solid rgba(255,255,255,.12); background-color:rgba(255,255,255,.02); color:#E6ECEA; }
.st-pic svg{ width:160px; height:auto; }
.st-cap{ margin-top:12px; font-size:14px; font-weight:600; color:#F2F4EF; }
.st-cap small{ display:block; margin-top:2px; font-size:13px; font-weight:400; color:#B0C2C5; }
.st-say{ max-width:44ch; margin-top:10px; font-size:16px; line-height:1.55; color:#DDE6E3; }
.st-say--sys{ display:flex; align-items:flex-start; max-width:none; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.st-say--sys .t-num{ margin:3px 10px 0 0; }
.ss-figs--report{ grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); }
.st-sum{ margin-top:10px; font-size:14px; font-weight:600; color:#E0C3EE; }
.st-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); background-color:#0E191F; }


/* 5  HOTEL SYSTEM ----------------------------------------------------------
   Codex's hotel dashboard: sidebar and views on one record. Its palette:
   ground #0B151A, panels #111F25, green, blue, amber, rose. Panels are
   divs with role="group", never sections, so no page style reaches in. */
.hd{
  --dv-window-max:1140px;
  --hd-line:rgba(255,255,255,.09); --hd-muted:#93A7A6; --hd-soft:#C9D5D2; --hd-text:#EDF1EE;
  position:relative; background-color:#0B151A; color:var(--hd-text); font-size:13px; line-height:1.4;
}
.hd-layout{ display:grid; grid-template-columns:196px minmax(0, 1fr); min-height:580px; }
.hd-side{ position:relative; display:flex; flex-direction:column; gap:2px; min-width:0; padding:16px 10px; border-right:1px solid var(--hd-line); background-color:#0D191E; }
.hd-side-label{ margin:2px 10px 8px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8A9E9D; }
.hd-nav{
  position:relative; display:flex; align-items:center; gap:10px; flex:none; width:100%; min-height:44px; padding:0 10px;
  border-radius:5px; color:#B3C0BF; font-size:13px; text-align:left; white-space:nowrap;
  transition:background-color .2s ease, color .2s ease;
}
.hd-nav .hd-ico{ flex:none; color:#8FA3A2; }
.hd-nav .t-num{ margin:0; }
.hd-nav:hover, .hd-nav[aria-current]{ background-color:#19302E; color:#F2F6F2; }
.hd-nav[aria-current] .hd-ico{ color:#62D1AC; }
.hd-count{ margin-left:auto; min-width:22px; padding:1px 6px; border-radius:10px; background-color:rgba(245,182,74,.16); color:#F5C46F; font-size:12px; text-align:center; }
.hd-main{ position:relative; min-width:0; padding:24px 26px 26px; }
.hd-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 16px; margin-bottom:18px; }
.hd-kicker{ display:flex; align-items:center; font-size:12px; font-weight:600; letter-spacing:.14em; line-height:16px; text-transform:uppercase; color:#9DB1B0; }
.hd-kicker .t-num{ margin:0 0 0 8px; }
.hd-title{ margin-top:4px; font-size:22px; font-weight:600; line-height:1.15; letter-spacing:-.03em; color:#F3F5F1; }
.hd-title:focus{ outline:none; }
.hd-title:focus-visible{ outline:2px solid #F3F5F1; outline-offset:4px; box-shadow:none; }
.hd-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px;
  border-radius:4px; background-color:#E31B23; color:#FFFCFC; font-size:13px; font-weight:650; white-space:nowrap;
  transition:background-color .2s ease;
}
.hd-primary:hover{ background-color:#C8141B; }
.hd-primary:disabled{ opacity:.5; cursor:not-allowed; }
.hd-primary .hd-ico{ width:14px; height:14px; }
.hd-content{ display:flex; flex-direction:column; gap:14px; }

.hd-metrics{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.hd-metric{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:118px; padding:14px 14px 12px;
  border:1px solid var(--hd-line); border-radius:5px; background:linear-gradient(145deg, #14232A, #101C22);
  color:inherit; text-align:left; transition:border-color .2s ease;
}
button.hd-metric:hover{ border-color:rgba(98,209,172,.55); }
.hd-metric-label{ padding-right:34px; font-size:12px; font-weight:500; letter-spacing:.08em; line-height:1.3; text-transform:uppercase; color:#A6B7B5; }
.hd-metric-value{ margin:12px 0 4px; font-size:24px; font-weight:600; line-height:1.1; letter-spacing:-.03em; color:#F3F5F1; }
.hd-metric-value small{ font-size:14px; font-weight:400; letter-spacing:0; color:var(--hd-muted); }
.hd-metric-sub{ font-size:12px; line-height:1.35; color:#A6B7B5; }
.hd-metric-icon{ position:absolute; top:12px; right:12px; display:grid; place-items:center; width:26px; height:26px; border-radius:6px; }
.hd-metric-icon .hd-ico{ width:14px; height:14px; }
.hd-metric-icon.is-teal{ background-color:rgba(91,203,165,.12); color:#68D4B0; }
.hd-metric-icon.is-blue{ background-color:rgba(88,169,229,.12); color:#78B9ED; }
.hd-metric-icon.is-amber{ background-color:rgba(239,180,74,.12); color:#EDBD6C; }
.hd-metric-icon.is-rose{ background-color:rgba(237,101,113,.12); color:#EF7E87; }

.hd-grid2{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:12px; }
.hd-panel{ min-width:0; padding:16px; border:1px solid var(--hd-line); border-radius:5px; background-color:#111F25; color:var(--hd-text); }
.hd-panel-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-bottom:14px; }
.hd-panel-title{ margin-top:4px; font-size:15px; font-weight:600; line-height:1.25; letter-spacing:-.01em; color:#F0F4F1; }
.hd-panel-title small{ margin-left:6px; font-size:12px; font-weight:400; color:var(--hd-muted); }
.hd-panel-title:focus{ outline:none; }
.hd-panel-title:focus-visible{ outline:2px solid #F3F5F1; outline-offset:3px; box-shadow:none; }
.hd-caption{ font-size:12px; color:#A6B7B5; }
.hd-link{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 2px; color:#9FD6C2; font-size:13px; font-weight:600; }
.hd-link:hover{ text-decoration:underline; text-underline-offset:.3em; }

.hd-chart{ display:grid; grid-template-columns:40px minmax(0, 1fr); gap:6px; height:176px; padding-top:18px; }
.hd-chart--rev{ grid-template-columns:minmax(0, 1fr); height:212px; }
.hd-y{ position:relative; font-size:12px; color:#8FA3A1; }
.hd-y > span{ position:absolute; left:0; bottom:calc(22px + (100% - 22px) * var(--y, 0)); line-height:1; transform:translateY(50%); }
.hd-plot{ position:relative; min-width:0; }
.hd-lines{ position:absolute; inset:0 0 22px; }
.hd-lines > i{ position:absolute; left:0; right:0; display:block; height:1px; background-color:rgba(255,255,255,.07); }
.hd-lines > i:nth-child(1){ top:0; }
.hd-lines > i:nth-child(2){ top:25%; }
.hd-lines > i:nth-child(3){ top:50%; }
.hd-lines > i:nth-child(4){ top:75%; }
.hd-bars{ position:absolute; inset:0; display:flex; align-items:stretch; justify-content:space-around; gap:8px; }
.hd-bar-col{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:0; padding-bottom:22px; }
.hd-bar{ display:block; width:min(30px, 70%); height:var(--h, 50%); min-height:8px; border-radius:3px 3px 0 0; background:linear-gradient(0deg, #236E61, #54C4A0); opacity:.8; }
.hd-bar-col.is-today .hd-bar{ background:linear-gradient(0deg, #B52B3E, #F15664); opacity:1; }
.hd-bar-col > small{ position:absolute; bottom:0; left:0; right:0; height:20px; padding-top:4px; font-size:12px; text-align:center; color:#9AAFAD; white-space:nowrap; }
.hd-bar-col.is-today > small{ color:#FF9DA2; font-weight:600; }
.hd-bar-val{ position:absolute; bottom:calc(22px + (100% - 22px) * var(--v, 0) + 4px); font-size:12px; line-height:1; color:#A8BBB7; white-space:nowrap; }
.hd-chart-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:10px; border-top:1px solid var(--hd-line); font-size:12px; color:#A6B7B5; }
.hd-chart-foot > span{ display:flex; align-items:center; gap:6px; }
.hd-chart-foot > span > i{ width:8px; height:8px; border-radius:2px; background-color:#52BD99; }
.hd-chart-foot b{ font-size:13px; color:#EEF2EE; }
.hd-chart-foot small{ font-size:12px; font-weight:400; color:#A6B7B5; }

.hd-arrivals{ display:flex; flex-direction:column; }
.hd-arr{ display:grid; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(255,255,255,.06); }
.hd-arr:first-child{ border-top:0; }
.hd-avatar{ display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background-color:#213C3A; color:#A6E0CA; font-size:12px; font-weight:600; }
.hd-arr-who, .hd-guest-who{ min-width:0; }
.hd-arr-who b, .hd-guest-who b{ display:block; font-size:13px; font-weight:600; color:#E9EFEB; }
.hd-arr-who small, .hd-guest-who small{ display:block; margin-top:2px; font-size:12px; color:#A6B7B5; }
.hd-arr-when{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:4px 10px; }
.hd-time{ font-size:13px; color:#DCE5E1; }
.hd-badge{
  display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:2px 9px;
  border:1px solid rgba(255,255,255,.12); border-radius:12px; background-color:rgba(255,255,255,.05);
  font-size:12px; font-style:normal; line-height:1.2; color:#C4CECA; white-space:nowrap;
}
.hd-badge.is-green{ border-color:rgba(83,199,164,.3); background-color:rgba(83,199,164,.1); color:#7DD9B8; }
.hd-badge.is-amber{ border-color:rgba(230,173,74,.3); background-color:rgba(230,173,74,.1); color:#F2C56F; }
.hd-badge.is-blue{ border-color:rgba(112,174,229,.3); background-color:rgba(112,174,229,.1); color:#9BC9EF; }
.hd-badge.is-rose{ border-color:rgba(236,115,128,.3); background-color:rgba(236,115,128,.1); color:#F39097; }
.hd-badge.is-grey{ color:#B8C4C2; }

.hd-panel--plan{ padding-bottom:12px; }
.hd-plan{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.hd-plan-cell{ display:flex; align-items:center; gap:8px; min-width:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius:4px; background-color:rgba(255,255,255,.02); font-size:12px; color:#B9C8C4; }
.hd-plan-cell > span{ min-width:0; overflow-wrap:anywhere; }
.hd-plan-cell > b{ margin-left:auto; font-size:15px; color:#F1F4EF; }
.hd-dot{ flex:none; display:block; width:8px; height:8px; border-radius:50%; background-color:#55C4A1; }
.hd-dot.is-arriving{ background-color:#C695E4; }
.hd-dot.is-ready{ background-color:#72B8F3; }
.hd-dot.is-cleaning{ background-color:#F5B64A; }
.hd-dot.is-maintenance{ background-color:#EC7680; }
.hd-sum{ margin-top:8px; font-size:12px; text-align:right; color:#A6B7B5; }

.hd-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 12px; margin-bottom:14px; }
.hd-search{ position:relative; display:flex; align-items:center; gap:8px; flex:1 1 220px; max-width:320px; min-height:46px; padding:0 12px; border:1px solid rgba(255,255,255,.14); border-radius:4px; color:#A9BCB8; }
.hd-search--full{ max-width:none; margin-bottom:10px; }
.hd-search:focus-within{ border-color:#9FD6C2; }
.hd-search input{ width:100%; min-width:0; min-height:44px; border:0; outline:none; background:transparent; color:#EAF0EC; font-size:16px; }
.hd-search input::placeholder{ color:#8FA3A1; opacity:1; }
.hd-search input::-webkit-search-cancel-button{ filter:invert(1) opacity(.6); }
.hd-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.hd-chips--floors{ margin-bottom:12px; }
.hd-chip{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:1px solid rgba(255,255,255,.12);
  border-radius:22px; color:#B3C3C0; font-size:13px; transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hd-chip > span{ color:#8FA3A1; }
.hd-chip:hover{ border-color:rgba(83,199,164,.5); color:#E3F2EC; }
.hd-chip[aria-pressed="true"]{ border-color:rgba(83,199,164,.5); background-color:rgba(83,199,164,.12); color:#C4F2E0; }
.hd-chip[aria-pressed="true"] > span{ color:#9ADBC3; }
.hd-table-scroll{ position:relative; overflow-x:auto; overscroll-behavior-x:contain; }
.hd-table{ width:100%; min-width:760px; border-collapse:collapse; text-align:left; }
.hd-table th, .hd-table td{ padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.06); font-size:13px; font-weight:400; color:#D1DCD6; white-space:nowrap; vertical-align:middle; }
.hd-table thead th{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#98ACAA; border-bottom-color:var(--hd-line); }
.hd-table tbody th b, .hd-table tbody th small, .hd-table td small{ display:block; }
.hd-table tbody th b{ font-weight:600; color:#EDF1ED; }
.hd-table small{ margin-top:2px; font-size:12px; color:#9AAEAB; }
.hd-num{ text-align:right; }
.hd-table thead th:nth-child(4), .hd-table thead th:nth-child(7){ text-align:right; }
.hd-empty{ padding:16px 4px; font-size:13px; color:#B3C3C0; white-space:normal; }

.hd-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:14px; list-style:none; font-size:12px; color:#B3C3C0; }
.hd-legend > li{ display:flex; align-items:center; gap:6px; }
.hd-legend-sum{ color:#E6EDEA; font-weight:600; }
.hd-rooms{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.hd-room{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:96px; padding:10px 10px 10px; border:1px solid rgba(255,255,255,.08); border-radius:5px; background-color:rgba(255,255,255,.02); }
.hd-room-no{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#A2B5B2; }
.hd-room-state{ margin:6px 0 2px; font-size:13px; font-weight:600; color:#7BD8B7; }
.hd-room > small{ font-size:12px; line-height:1.35; color:#A9BBB8; overflow-wrap:anywhere; }
.hd-room.is-arriving .hd-room-state{ color:#D5A4F3; }
.hd-room.is-ready .hd-room-state{ color:#8BC8F3; }
.hd-room.is-cleaning .hd-room-state{ color:#F4C56E; }
.hd-room.is-cleaning{ border-color:rgba(245,182,74,.3); }
.hd-room.is-maintenance .hd-room-state{ color:#F08D94; }
.hd-room.is-maintenance{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 8px); }
.hd-mini{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; margin-top:8px;
  border:1px solid rgba(91,197,163,.4); border-radius:4px; background-color:#17382E; color:#9CE3C5; font-size:13px; font-weight:600;
  transition:background-color .2s ease, border-color .2s ease;
}
.hd-mini:hover{ background-color:#1D4739; border-color:#9CE3C5; }
.hd-room .hd-mini{ width:100%; margin-top:auto; }
.hd-room > small{ margin-bottom:10px; }

.hd-guests{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:12px; align-items:start; }
.hd-guest-list{ display:flex; flex-direction:column; }
.hd-guest{ display:grid; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:4px 10px; padding:10px 0; border-top:1px solid rgba(255,255,255,.06); }
.hd-guest:first-child{ border-top:0; }
.hd-guest .hd-mini--in{ grid-column:2 / -1; justify-self:start; margin-top:4px; }
.hd-figs{ display:flex; flex-direction:column; }
.hd-figs > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid rgba(255,255,255,.06); font-size:13px; }
.hd-figs > div:first-child{ border-top:0; }
.hd-figs dt{ color:#B9C8C4; }
.hd-figs dd{ color:#EDF1EE; font-variant-numeric:tabular-nums; }
.hd-figs .is-total{ border-top-color:rgba(255,255,255,.2); }
.hd-figs .is-total dt, .hd-figs .is-total dd{ font-weight:600; color:#F3F5F1; }
.hd-figs .is-balance dt, .hd-figs .is-balance dd{ font-size:15px; font-weight:650; color:#7DD9B8; }
.hd-figs .is-balance.is-owed dt, .hd-figs .is-balance.is-owed dd{ color:#FF9DA2; }
.hd-action{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin-top:12px; padding:0 14px;
  border:1px solid #F4F7F5; border-radius:4px; color:#F4F7F5; font-size:13px; font-weight:650;
  transition:background-color .2s ease;
}
.hd-action:hover{ background-color:rgba(255,255,255,.08); }
.hd-done{ display:flex; align-items:center; gap:8px; min-height:44px; margin-top:12px; font-size:13px; font-weight:600; color:#7DD9B8; }
.hd-done:focus{ outline:none; }
.hd-done:focus-visible{ outline:2px solid #F3F5F1; outline-offset:2px; box-shadow:none; }

.hd-shift{ margin:-6px 0 10px; font-size:12px; color:#A6B7B5; }
.hd-tasks{ display:flex; flex-direction:column; }
.hd-task{ display:grid; grid-template-columns:44px minmax(0, 1fr) 120px 118px 120px; align-items:center; gap:10px; padding:10px 0; border-top:1px solid rgba(255,255,255,.06); }
.hd-task:first-child{ border-top:0; }
.hd-task-room{ display:grid; place-items:center; width:40px; height:40px; border-radius:5px; background-color:#1B3330; color:#8FE0BF; font-size:13px; font-weight:600; }
.hd-task-what b{ display:block; font-size:13px; font-weight:600; color:#E9EFEB; }
.hd-task-what small{ display:block; margin-top:2px; font-size:12px; color:#A6B7B5; }
.hd-task-who{ font-size:12px; color:#C0CDC8; }
.hd-task .hd-badge{ justify-self:start; }
.hd-task .hd-mini{ margin-top:0; }
.hd-stock-row{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:6px 12px; padding:10px 0; border-top:1px solid rgba(255,255,255,.06); }
.hd-stock-row:first-child{ border-top:0; }
.hd-stock-name{ font-size:13px; color:#E3EAE6; }
.hd-stock-row > b{ font-size:15px; color:#F1F4EF; }
.hd-stock-row > b small{ font-size:12px; font-weight:400; color:#A6B7B5; }
.hd-stock-re{ grid-column:1 / -1; font-size:12px; color:#A6B7B5; }
.hd-meter{ grid-column:1 / -1; display:block; height:6px; overflow:hidden; border-radius:3px; background-color:rgba(255,255,255,.08); }
.hd-meter > em{ display:block; height:100%; border-radius:3px; background-color:#53C7A4; transition:width .4s ease; }
.hd-stock-row.is-low .hd-meter > em{ background-color:#F5B64A; }
.hd-note{ margin-top:10px; font-size:12px; line-height:1.5; color:#A6B7B5; }

.hd-rules{ display:flex; flex-direction:column; }
.hd-rule{ display:grid; grid-template-columns:40px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:12px 0; border-top:1px solid rgba(255,255,255,.06); }
.hd-rule:first-child{ border-top:0; }
.hd-rule-ico{ display:grid; place-items:center; width:36px; height:36px; border-radius:6px; background-color:#1B3330; color:#8FE0BF; }
.hd-rule-what b{ display:block; font-size:13px; font-weight:600; color:#E9EFEB; }
.hd-rule-what small{ display:block; margin-top:2px; font-size:12px; line-height:1.4; color:#A6B7B5; }

.hd-channels{ display:flex; flex-direction:column; gap:16px; padding:6px 0; }
.hd-channel{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px; font-size:13px; color:#C4D0CC; }
.hd-channel > b{ color:#EEF2EE; }
.hd-channel > b small{ font-size:12px; font-weight:400; color:#A6B7B5; }
.hd-meter > em.is-c1{ background-color:#75BDF3; }
.hd-meter > em.is-c2{ background-color:#F5B64A; }
.hd-meter > em.is-c3{ background-color:#E887AB; }
.hd-day{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.hd-day > div{ padding:10px 12px; border:1px solid rgba(255,255,255,.06); border-radius:4px; background-color:rgba(255,255,255,.02); }
.hd-day dt{ font-size:12px; color:#A6B7B5; }
.hd-day dd{ margin-top:4px; font-size:17px; font-weight:600; color:#F1F4EF; }
.hd-day .is-owed dd{ color:#FF9DA2; }

.hd-toast{
  position:absolute; right:18px; bottom:18px; z-index:5; max-width:min(420px, calc(100% - 36px));
  padding:10px 14px; border:1px solid rgba(83,199,164,.45); border-radius:5px; background-color:#12382D; color:#BDEBD6;
  font-size:13px; line-height:1.4; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.hd-toast.is-shown{ opacity:1; }
.hd-toast:empty{ display:none; }

/* the new reservation dialog: full width on phones */
.hd-dialog{
  width:min(480px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:auto;
  border:1px solid #54736E; border-radius:8px; background-color:#102127; color:#F0F4EF; font-family:var(--m-sans);
}
.hd-dialog::backdrop{ background-color:rgba(2,6,8,.78); }
.hd-form{ display:flex; flex-direction:column; gap:14px; padding:22px; }
.hd-dialog-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hd-dialog-title{ margin-top:4px; font-size:22px; font-weight:600; line-height:1.2; color:#F3F5F1; }
.hd-close{ display:grid; place-items:center; flex:none; width:44px; height:44px; margin:-8px -8px 0 0; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#F0F4EF; }
.hd-close:hover{ background-color:rgba(255,255,255,.08); }
.hd-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.hd-field > label{ font-size:13px; font-weight:600; color:#C9D6D2; }
.hd-field input, .hd-field select{
  width:100%; min-height:44px; padding:8px 12px; border:1px solid rgba(255,255,255,.2); border-radius:4px;
  background-color:#0B171C; color:#EFF4EF; font-size:16px; -webkit-appearance:none; appearance:none;
}
.hd-field input:focus, .hd-field select:focus{ border-color:#9FD6C2; }
.hd-field input[readonly]{ border-style:dashed; background-color:rgba(255,255,255,.05); color:#D8E2DE; cursor:default; }
.hd-field select:disabled{ opacity:.6; }
.hd-field.is-invalid input{ border-color:#FF7378; box-shadow:inset 0 0 0 1px #FF7378; }
.hd-select{ position:relative; display:block; }
.hd-select::after{
  content:""; position:absolute; right:14px; top:50%; width:7px; height:7px; pointer-events:none;
  border-right:1.5px solid #C9D6D2; border-bottom:1.5px solid #C9D6D2; transform:translateY(-70%) rotate(45deg);
}
.hd-select select{ padding-right:36px; cursor:pointer; }
.hd-row2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.hd-err{ font-size:13px; font-weight:500; color:#FF8A8E; }
.hd-err:empty{ display:none; }
.hd-hint{ margin-top:-4px; font-size:13px; line-height:1.45; color:#A9BCB8; }
.hd-hint.is-warn{ color:#F2C56F; }
.hd-dialog-actions{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:4px; }
.hd-ghost{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid rgba(255,255,255,.28); border-radius:4px; color:#E4ECEA; font-size:13px; font-weight:600; }
.hd-ghost:hover{ background-color:rgba(255,255,255,.06); }


/* 6  RESPONSIVE STEPS -----------------------------------------------------
   The interfaces step by their own width (container queries), because the
   same screen sits in a wide product scene or a narrow column:
     hotel window   900px: a narrower sidebar without icons; 640px: the
                    views become one scrolling segment row on top
     hotel main     780px: two metrics, one column of panels; 520px: rows
                    stack, the table scrolls in its own box with the guest
                    column held; 340px: one metric per row
     showcase       560px: counts as rows, fields in one column
     stepper        860px: paper above system; 600px: numbers only
   The page scenes and the dialog step by the viewport. */
.hd{ container:hd / inline-size; }
.hd-main{ container:hdmain / inline-size; }
.ss{ container:ss / inline-size; }

@container hd (max-width:900px){
  .hd-layout{ grid-template-columns:168px minmax(0, 1fr); }
  .hd-nav .hd-ico{ display:none; }
  .hd-main{ padding:20px; }
}
@container hd (max-width:640px){
  .hd-layout{ grid-template-columns:minmax(0, 1fr); min-height:0; }
  .hd-side{ flex-direction:row; gap:4px; overflow-x:auto; overscroll-behavior-x:contain; padding:8px; border-right:0; border-bottom:1px solid var(--hd-line); }
  .hd-side-label{ display:none; }
  .hd-nav{ width:auto; padding:0 12px; gap:8px; }
  .hd-main{ padding:16px 12px 18px; }
  .hd-title{ font-size:20px; }
  .hd-toast{ left:12px; right:12px; max-width:none; }
}
@container hdmain (max-width:780px){
  .hd-metrics, .hd-day{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .hd-grid2, .hd-guests{ grid-template-columns:minmax(0, 1fr); }
  .hd-rooms{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .hd-plan{ grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); }
  .hd-task{ grid-template-columns:44px minmax(0, 1fr) 118px auto; }
  .hd-task .hd-task-who{ display:none; }
}
@container hdmain (max-width:520px){
  .hd-metric{ min-height:0; padding:12px 12px 10px; }
  .hd-metric-icon{ display:none; }
  .hd-metric-label{ padding-right:0; }
  .hd-metric-value{ margin-top:8px; font-size:21px; }
  .hd-rooms{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .hd-plan{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .hd-search{ max-width:none; flex-basis:100%; }
  .hd-table th:first-child, .hd-table td:first-child{ position:sticky; left:0; z-index:1; background-color:#111F25; box-shadow:1px 0 0 rgba(255,255,255,.08); }
  .hd-task{ grid-template-columns:44px minmax(0, 1fr) auto; }
  .hd-task .hd-mini{ grid-column:2 / -1; justify-self:start; }
  .hd-rule{ grid-template-columns:36px minmax(0, 1fr); }
  .hd-rule .hd-switch{ grid-column:2; justify-self:start; }
  .hd-bar-col:not(.is-today) .hd-bar-val{ visibility:hidden; }
}
@container hdmain (max-width:340px){
  .hd-metrics, .hd-day{ grid-template-columns:minmax(0, 1fr); }
  .hd-metric{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; column-gap:10px; }
  .hd-metric-value{ grid-row:1 / span 2; grid-column:2; margin:0; }
  .hd-rooms{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .hd-arr{ grid-template-columns:30px minmax(0, 1fr); }
  .hd-arr-when{ grid-column:2; justify-content:flex-start; }
  .hd-guest{ grid-template-columns:30px minmax(0, 1fr); }
  .hd-guest .hd-badge{ grid-column:2; justify-self:start; }
}
@container ss (max-width:720px){
  .ss-work{ min-height:0; padding:12px; }
  .ss-tabs{ padding:6px; }
  .ss-tab{ padding:0 12px; }
  .ss-table th, .ss-table td{ padding:9px 6px; font-size:13px; }
  .ss-rule{ grid-template-columns:32px minmax(0, 1fr); }
  .ss-rule .hd-switch{ grid-column:2; justify-self:start; }
  .ss-results{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@container ss (max-width:560px){
  .ss-metrics{ grid-template-columns:minmax(0, 1fr); gap:6px; }
  .ss-metrics > div{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:2px 10px; padding:10px 12px; }
  .ss-metrics b{ grid-row:1 / span 2; grid-column:2; margin:0; }
  .ss-fields, .ss-figs{ grid-template-columns:minmax(0, 1fr); }
  .ss-figs--report{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ss-track > li{ font-size:12px; }
}
@container ss (max-width:360px){
  .ss-results{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ss-track{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:10px; }
  .ss-track > li:nth-child(2)::before{ display:none; }
}
@container ss (max-width:860px){
  .st-work{ grid-template-columns:minmax(0, 1fr); }
  .st-sys{ border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .st-pic{ min-height:140px; }
}
@container ss (max-width:600px){
  .st-steps{ display:flex; }
  .st-steps > li{ flex:1 1 0; min-width:0; }
  .st-step{ justify-content:center; padding:0; }
  .st-name{ display:none; }
  .st-now{ display:block; }
  .st-paper, .st-sys{ padding:16px 14px; }
}

@media (max-width:1023px){
  .t-process{ grid-template-columns:minmax(0, 1fr); gap:28px; }
  .t-process .dv-rows{ max-width:720px; }
}
@media (max-width:900px){
  .t-know{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:720px){
  .tw-body{ grid-template-columns:96px minmax(0, 1fr); min-height:220px; }
  .tw-side{ padding:12px 6px; }
  .tw-side > span{ padding:9px 4px; letter-spacing:.02em; }
  .tw-main{ padding:14px 11px; }
  .tw-panels > span{ padding:9px 7px; }
  /* the product runs to the screen's edges on phones, for the width */
  .t-product .dv-field{ margin-left:calc(-1 * var(--m-g)); margin-right:calc(-1 * var(--m-g)); padding:14px 8px; }
  .t-product .dv-callouts{ gap:10px 20px; }
}
@media (max-width:560px){
  .hd-dialog{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .hd-row2{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:480px){
  /* the hero wireframe's sidebar becomes six short bars without words */
  .tw-body{ grid-template-columns:48px minmax(0, 1fr); }
  .tw-side{ gap:10px; padding:16px 10px; }
  .tw-side > span{ height:6px; padding:0; border:0; background-color:rgba(255,255,255,.16); }
  .tw-side b{ display:none; }
  .tw-side > span:first-child{ background-color:rgba(255,255,255,.55); }
}