/* ═══════════════════════════════════════════════════════════════════════════════
   AVIV · ATELIER  —  the visual system of Aviv PMS
   One stylesheet for the base look; module and screen files only add layout.
   Contents: 1 fonts · 2 tokens · 3 reset & type · 4 utilities
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ───────── 1. Fonts ───────── */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/Manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/Manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ───────── 2. Tokens ───────── */
:root {
  /* typography */
  --font-display: "Poppins", "Manrope", system-ui, sans-serif;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* emerald — brand */
  --em-950: #061c16;
  --em-900: #0b2a22;
  --em-800: #103a2f;
  --em-700: #174a3c;
  --em-600: #1f5c4b;
  --em-500: #2b7561;
  --em-200: #bcd9cc;
  --em-100: #dcebe3;
  --em-50: #eef5f1;
  /* brass — accent, used sparingly */
  --br-700: #7a5e22;
  --br-600: #94722a;
  --br-500: #b08c46;
  --br-400: #c6a45e;
  --br-300: #dcc58f;
  --br-200: #ebdbb3;
  --br-100: #f4ebd2;
  --br-50: #fbf7ea;
  /* neutrals – plain white page; tints are cool, faintly green greys that sit well on white */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f8f7;
  --sunken: #edf1ef;
  --ink: #14201b;
  --ink-2: #46514b;
  --ink-3: #67716a;
  --ink-4: #949c95;
  --line: #e3e8e5;
  --line-2: #eef1ef;
  --line-strong: #d0d7d3;
  --border: var(--line);
  --input: #aeb8b2;
  /* status — always an icon and a label next to the colour */
  --st-ready: #1f7a4f;
  --st-dirty: #b4531a;
  --st-occupied: #2a5ea3;
  --st-ooo: #6f7782;
  --st-tentative: #946510;
  --st-cancelled: #b1342e;
  --st-vip: var(--br-600);
  --ok: var(--st-ready);
  --warn: var(--st-tentative);
  --bad: var(--st-cancelled);
  --info: var(--st-occupied);
  --ok-bg: #e7f3ec;
  --warn-bg: #fbf1da;
  --bad-bg: #fbe9e6;
  --info-bg: #e6eef8;
  /* shape and depth */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --sh-1: 0 1px 2px rgb(20 32 27 / 0.05);
  --sh-2: 0 1px 2px rgb(20 32 27 / 0.04), 0 6px 18px -6px rgb(20 32 27 / 0.1);
  --sh-3: 0 2px 4px rgb(20 32 27 / 0.05), 0 18px 40px -12px rgb(20 32 27 / 0.2);
  --sh-4: 0 4px 8px rgb(20 32 27 / 0.06), 0 30px 70px -20px rgb(6 28 22 / 0.4);
  --ring: 0 0 0 3px rgb(176 140 70 / 0.32);
  /* layout */
  --sidebar-w: 224px;
  --topbar-h: 54px;
  --gutter: 28px;
  /* motion */
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
}

/* ───────── 3. Reset & type ───────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
dl,
dd,
ol,
ul,
blockquote {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

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

button {
  cursor: pointer;
}

a {
  color: var(--em-600);
  text-decoration: none;
}

a:hover {
  color: var(--em-800);
}

strong,
b {
  font-weight: 650;
}

small {
  font-size: 12px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}

::selection {
  background: var(--br-200);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--br-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.icon {
  flex: none;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon[width="12"] {
  width: 12px;
  height: 12px;
}

.icon[width="13"] {
  width: 13px;
  height: 13px;
}

.icon[width="14"] {
  width: 14px;
  height: 14px;
}

.icon[width="15"] {
  width: 15px;
  height: 15px;
}

.icon[width="16"] {
  width: 16px;
  height: 16px;
}

.icon[width="20"] {
  width: 20px;
  height: 20px;
}

.icon[width="22"] {
  width: 22px;
  height: 22px;
}

.icon[width="24"] {
  width: 24px;
  height: 24px;
}

.icon[width="28"] {
  width: 28px;
  height: 28px;
}

.icon[width="32"] {
  width: 32px;
  height: 32px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--em-900);
  color: #fff;
  font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}

.skip-link:focus {
  top: 12px;
}

/* ───────── 4. Utilities ───────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nw {
  white-space: nowrap;
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.row--between {
  justify-content: space-between;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s-spacer,
.fd-spacer {
  flex: 1 1 auto;
}

.no-print {
}

.fd-muted {
  color: var(--ink-3);
}

.fd-sub {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.fd-link {
  color: var(--ink);
  font-weight: 600;
}

.fd-link:hover {
  color: var(--em-600);
}

.fd-link strong {
  font-weight: 650;
}

a.fd-link:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--br-400);
}

@keyframes av-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes av-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes av-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes av-slide {
  from {
    transform: translateX(32px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────── 5. App shell ───────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.app__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app__content {
  flex: 1;
  width: 100%;
  max-width: 1640px;
  margin: 0 auto;
  padding: 20px var(--gutter) 56px;
  outline: none;
  animation: av-fade 240ms ease-out;
}

/* ── Sidebar: deep emerald, brass pin on the current screen ── */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0e1a2b 0%, #0a1422 100%);
  color: rgb(255 255 255 / 0.74);
  box-shadow: inset -1px 0 0 rgb(255 255 255 / 0.06);
  z-index: 40;
}

.sidebar__brand {
  flex: none;
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding: 0 20px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.07);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.sidebar__logo:hover {
  color: #fff;
}

.sidebar__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--br-300);
  background: linear-gradient(145deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 0 0 1px rgb(220 197 143 / 0.45);
}

.sidebar__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 12px 28px;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav__section {
  margin-bottom: 6px;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 10px;
  color: rgb(255 255 255 / 0.72);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  transition: background var(--t-fast), color var(--t-fast);
}

.nav__item .icon {
  opacity: 0.8;
}

.nav__item:hover {
  background: rgb(255 255 255 / 0.07);
  color: #fff;
}

.nav__item.is-active {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.nav__item.is-active .icon {
  color: var(--br-300);
  opacity: 1;
}

.nav__item.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(var(--br-300), var(--br-500));
}

.nav__sub {
  margin-top: 4px;
}

.nav__group {
  list-style: none;
  cursor: pointer;
  min-height: 32px;
  margin-top: 10px;
  padding: 6px 12px;
  color: rgb(255 255 255 / 0.46);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav__group::-webkit-details-marker {
  display: none;
}

/* the JavaScript pages (RSS-01, CM-02 …) build the group header as a <button>: drop the browser's button look */
button.nav__group {
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  text-align: left;
  appearance: none;
}

.nav__sub.is-open > .nav__group .nav__chev,
.nav__group[aria-expanded="true"] .nav__chev {
  transform: rotate(180deg);
}

.nav__group:hover {
  background: transparent;
  color: rgb(255 255 255 / 0.8);
}

.nav__chev {
  margin-left: auto;
  opacity: 0.6;
  transition: transform var(--t-base) var(--ease);
}

.nav__sub[open] > .nav__group .nav__chev {
  transform: rotate(180deg);
}

.nav__sub[open] > .nav__list {
  padding-bottom: 6px;
}

/* ── Top bar: calm glass strip, grouped left · centre · right ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 var(--gutter);
  background: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 0 var(--line);
}

.topbar__spacer {
  flex: 1 1 0;
  min-width: 0;
}

.topbar__btn {
  cursor: pointer;
}

.topbar__prop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.topbar__prop:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh-1);
}

.topbar__prop .icon:first-child {
  color: var(--em-600);
}

.topbar__prop .icon:last-child {
  color: var(--ink-4);
}

.topbar__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 3px 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--surface), var(--em-50));
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgb(11 42 34 / 0.06);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar__date > .icon {
  color: var(--em-600);
}

.topbar__date time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Clock – a dark emerald "watch face" capsule with a champagne-gold live dot */
.topbar__clock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  margin-left: 4px;
  padding: 0 11px 0 10px;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--em-700) 0%, var(--em-900) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 0 0 1px rgb(200 169 106 / 0.35), 0 2px 6px rgb(6 28 22 / 0.22);
  color: #f7f4ee;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.topbar__clock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--br-400);
  box-shadow: 0 0 0 3px rgb(198 164 94 / 0.22);
  animation: topbar-clock-pulse 2s ease-in-out infinite;
}

@keyframes topbar-clock-pulse {
  50% {
    opacity: 0.45;
    box-shadow: 0 0 0 5px rgb(198 164 94 / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__clock::before {
    animation: none;
  }
}

.topbar__search {
  position: relative;
  flex: 0 1 380px;
  min-width: 180px;
}

.topbar__search > .icon {
  position: absolute;
  left: 13px;
  top: 50%;
  translate: 0 -50%;
  color: var(--ink-4);
  pointer-events: none;
}

.topbar__search-input {
  width: 100%;
  height: 34px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sunken);
  font-size: 13.5px;
  outline: none;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.topbar__search-input::placeholder {
  color: var(--ink-3);
}

.topbar__search-input:hover {
  border-color: var(--line-strong);
}

.topbar__search-input:focus {
  background: var(--surface);
  border-color: var(--br-500);
  box-shadow: var(--ring);
}

.topbar__new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px 0 11px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--em-600), var(--em-800));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 4px 10px -4px rgb(11 42 34 / 0.6);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.topbar__new:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 8px 16px -6px rgb(11 42 34 / 0.6);
}

.topbar__shift {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 11px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: #175f3d;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar__shift:hover {
  color: #124d32;
  background: #dcefe4;
}

.topbar__shift > .icon {
  display: none;
}

.topbar__shift-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-ready);
  box-shadow: 0 0 0 3px rgb(31 122 79 / 0.2);
}

.icon-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}

.icon-link:hover {
  background: var(--sunken);
  color: var(--ink);
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--br-700);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

.topbar__bell-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  box-shadow: 0 0 0 2px var(--surface);
}

.topbar__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  text-align: left;
}

.topbar__user:hover {
  background: var(--sunken);
}

.topbar__user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.topbar__user-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar__user-role {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, hsl(var(--av-h, 150) 34% 40%), hsl(var(--av-h, 150) 38% 28%));
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.03em;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--br-300);
}

/* ── Pop-over menus from the top bar ── */
.pv[popover] {
  position: fixed;
  inset: auto;
  top: calc(var(--topbar-h) - 6px);
  margin: 0;
  width: 300px;
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-3);
}

.pv--prop[popover] {
  left: calc(var(--sidebar-w) + var(--gutter));
  width: 320px;
}

.pv--new[popover] {
  right: 300px;
  width: 250px;
}

.pv--notif[popover] {
  right: 120px;
  width: 360px;
}

.pv--user[popover] {
  right: var(--gutter);
  width: 270px;
}

.pv[popover]:popover-open {
  animation: av-pop 180ms var(--ease);
}

.pv__title {
  padding: 8px 10px 6px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pv__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
}

.pv__item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.pv__item > .icon {
  color: var(--em-600);
}

.pv__item > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.pv__item small {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 400;
}

.pv__item.is-current {
  background: var(--em-50);
}

.pv__item.is-current > .icon:last-child {
  margin-left: auto;
  color: var(--st-ready);
}

.pv__item:has(> span > strong) {
  align-items: flex-start;
}

.pv__note {
  margin: 6px 4px 2px;
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--br-50);
  color: var(--br-700);
  font-size: 12px;
}

/* ───────── 6. Page header ───────── */
.page-header {
  margin-bottom: 16px;
}

.page-header__top {
  margin-bottom: 4px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
  font-size: 12px;
}

.breadcrumb a {
  color: var(--ink-3);
}

.breadcrumb a:hover {
  color: var(--em-700);
}

.breadcrumb .icon {
  width: 12px;
  height: 12px;
  color: var(--ink-4);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink-2);
  font-weight: 600;
}

.page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.page-header__text {
  min-width: 0;
}

.page-header__title {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.code-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

/* ── Header search and filter (lib.hctl): search icon that widens to the left + Filter button that opens an inline filter tab under the title ── */
.page-header__filters {
  display: flex;
  align-items: center;
  margin-left: auto;
  min-width: 0;
}

.page-header__filters + .page-header__actions {
  margin-left: 0;
}

.page-header__actions:empty {
  display: none;
}

.hctl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.hctl__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hctl + .hctl {
  margin-left: 8px;
}

.hsearch {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  transition: width 220ms var(--ease);
}

.hsearch__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: 13.5px;
  box-shadow: var(--sh-1);
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.hsearch__input::placeholder {
  color: transparent;
  transition: color var(--t-fast);
}

.hsearch__input {
  appearance: none;
  min-width: 0;
}

.hsearch__input::-webkit-search-decoration {
  appearance: none;
}

.hsearch__input::-webkit-search-cancel-button {
  cursor: pointer;
}

.hsearch:not(:focus-within) .hsearch__input::-webkit-search-cancel-button {
  display: none;
}

.hsearch__ic {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--em-700);
  pointer-events: none;
}

.hsearch:hover .hsearch__input {
  border-color: var(--em-600);
  background: var(--em-50);
}

.hsearch:is(:focus-within,
:has(.hsearch__input:not(:placeholder-shown))) {
  width: min(320px, 38vw);
}

.hsearch:is(:focus-within,
:has(.hsearch__input:not(:placeholder-shown))) .hsearch__input {
  padding: 0 12px 0 33px;
  color: var(--ink);
  cursor: text;
  background: var(--surface);
  border-color: var(--em-600);
}

.hsearch:focus-within .hsearch__input {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--br-400) 35%, transparent), var(--sh-1);
}

.hsearch:is(:focus-within,
:has(.hsearch__input:not(:placeholder-shown))) .hsearch__input::placeholder {
  color: var(--ink-4);
}

.hfilter__btn {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--sh-1);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.hfilter__btn .icon {
  color: var(--em-700);
}

.hfilter__btn .icon:last-child {
  color: var(--ink-4);
  transition: rotate var(--t-fast);
}

.hfilter__btn:hover {
  border-color: var(--em-600);
  background: var(--em-50);
  color: var(--em-800);
}

.hctl:has(.hfilter__tg:focus-visible) .hfilter__btn {
  outline: 2px solid var(--br-400);
  outline-offset: 2px;
}

.hfilter__tg {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hfilter__dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--br-500);
  box-shadow: 0 0 0 2px var(--surface);
}

.hctl:has(.hfilter :is(select:has(option:checked:not(:first-child)),
input[type="checkbox"]:checked,
input[type="number"]:not(:placeholder-shown))) .hfilter__dot {
  display: block;
}

.hctl:has(.hfilter__tg:checked) .hfilter__btn {
  border-color: var(--em-700);
  background: var(--em-800);
  color: #fff;
}

.hctl:has(.hfilter__tg:checked) .hfilter__btn .icon {
  color: var(--br-300);
}

.hctl:has(.hfilter__tg:checked) .hfilter__btn .icon:last-child {
  rotate: 180deg;
}

/* the filter tab: one slim full-width row under the title row, pushes the content down */
.hfilter {
  display: none;
  flex: 1 1 100%;
  order: 20;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
  padding: 7px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-1);
}

.hfilter__tg:checked + .hfilter {
  display: flex;
  animation: hf-open 180ms var(--ease);
}

@keyframes hf-open {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
}

/* in the page header the search / filter pieces become items of the title row, so the tab can span the full width */
.page-header__filters,
.page-header__filters > .hctl {
  display: contents;
}

/* the title and its code chip hold the left; search, Filter and the actions sit right – also on a wrapped second line */
.page-header__row:has(> .page-header__filters) {
  justify-content: flex-end;
}

.page-header__row:has(> .page-header__filters) > .code-chip {
  margin-right: auto;
}

.page-header__row:has(> .page-header__filters) > .page-header__actions {
  margin-left: 0;
}

/* search, Filter and the actions share one 8px rhythm and one 34px height */
.page-header__row:has(> .page-header__filters) {
  column-gap: 8px;
}

.page-header__row > .code-chip {
  margin-left: 4px;
}

.hfilter__hic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--em-800);
  color: var(--br-300);
}

.hfilter__grid {
  --hf-gap: 6px;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hf-gap);
  min-width: 0;
}

/* each cell takes the width its label and value need, then the cells of a row stretch to fill it – no gaps, no cut values */
.hfilter__grid > .hf-f {
  flex: 1 1 auto;
  min-width: 150px;
}

.hfilter__grid > .hf-f:has(input[type="date"]) {
  min-width: 205px;
}

.hfilter__grid > .hf-f:has(input[type="text"],
input[type="number"]) {
  flex-basis: 230px;
}

.hf-f {
  flex: 1 1 calc((100% - (var(--hf-cols, 4) - 1) * var(--hf-gap)) / var(--hf-cols, 4));
  min-width: 168px;
}

.hf-f {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 30px 0 11px;
  border-radius: 9px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: box-shadow var(--t-fast), background var(--t-fast);
}

.hf-f:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.hf-f:focus-within {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--em-600), 0 0 0 3px color-mix(in srgb, var(--br-400) 30%, transparent);
}

.hf-f__l {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.hf-f__l .icon {
  color: var(--em-600);
}

.hf-f__c {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  outline: none;
  appearance: none;
}

select.hf-f__c {
  width: auto;
  cursor: pointer;
}

.hf-f:has(input.hf-f__c) {
  padding-right: 11px;
}

.hf-f__chev {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  translate: 0 -50%;
  color: var(--ink-4);
  pointer-events: none;
}

.hfilter__more {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--em-50);
  box-shadow: inset 0 0 0 1px var(--em-100);
}

.hfilter__more .sw {
  font-size: 12.5px;
}

.hfilter__k {
  margin: 0;
  color: var(--em-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hfilter__acts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hfilter__clear,
.hfilter__done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.hfilter__clear {
  background: transparent;
  color: var(--ink-3);
}

.hfilter__clear:hover {
  background: var(--sunken);
  color: var(--ink);
}

.hfilter__done {
  background: var(--em-800);
  color: #fff;
}

.hfilter__done .icon {
  color: var(--br-300);
}

.hfilter__done:hover {
  background: var(--em-700);
}

@media (max-width: 760px) {
  .hfilter {
    flex-wrap: wrap;
  }
  .hfilter__hic {
    display: none;
  }
  .hfilter__acts {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hsearch,
  .hfilter__tg:checked + .hfilter {
    transition: none;
    animation: none;
  }
}

/* ── Help box at the foot of a screen ── */
.helpbox {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: var(--ink-3);
}

.helpbox > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.helpbox > summary::-webkit-details-marker {
  display: none;
}

.helpbox > summary:hover {
  background: var(--sunken);
}

.helpbox[open] > summary {
  background: var(--sunken);
}

.helpbox__body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px 20px;
  max-width: 860px;
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.helpbox__body dt {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 2px;
}

.helpbox__body dd {
  color: var(--ink-2);
}

/* ───────── 7. Buttons ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast);
}

.btn .icon {
  color: var(--em-600);
  margin-left: -2px;
}

.btn:hover {
  border-color: var(--em-600);
  color: var(--em-800);
  background: var(--em-50);
  box-shadow: var(--sh-2);
  transform: translateY(-1px);
}

.btn:active {
  transform: none;
  box-shadow: var(--sh-1);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--br-500);
}

.btn--primary {
  border-color: transparent;
  background: linear-gradient(180deg, var(--em-600) 0%, var(--em-800) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.16) inset, 0 6px 14px -6px rgb(11 42 34 / 0.65);
}

.btn--primary .icon {
  color: var(--br-300);
}

.btn--primary:hover {
  border-color: transparent;
  background: linear-gradient(180deg, var(--em-500) 0%, var(--em-700) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.16) inset, 0 10px 20px -8px rgb(11 42 34 / 0.7);
}

.btn--primary:focus-visible {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--br-500);
}

.btn--ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
}

.btn--ghost:hover {
  background: var(--sunken);
  border-color: transparent;
  box-shadow: none;
  color: var(--ink);
}

.btn--ghost:has(> .icon:only-child) {
  width: 30px;
  padding: 0;
}

.btn--danger {
  color: var(--st-cancelled);
  border-color: #e6bdb8;
  background: var(--surface);
}

.btn--danger .icon {
  color: currentColor;
}

.btn--danger:hover {
  background: var(--bad-bg);
  border-color: var(--st-cancelled);
  color: #8f2520;
}

.btn:disabled,
.btn[disabled],
.fd-btn-off {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* ───────── 8. Fields ───────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.field__label {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

.field__req {
  color: var(--st-cancelled);
  margin-left: 2px;
}

.field__hint {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.4;
}

.field__error {
  color: var(--st-cancelled);
  font-size: 12px;
  font-weight: 500;
}

.field__input,
.s-toolbar input[type="search"],
.s-toolbar select {
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--input);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.35;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.field__input::placeholder {
  color: var(--ink-4);
}

.field__input:hover {
  border-color: var(--ink-3);
}

.field__input:focus,
.s-toolbar input[type="search"]:focus,
.s-toolbar select:focus {
  border-color: var(--br-500);
  box-shadow: var(--ring);
}

.field__input:disabled,
.field__input[readonly] {
  background: var(--sunken);
  border-color: var(--line);
  color: var(--ink-2);
  cursor: default;
}

.field__input:user-invalid,
.field__input[aria-invalid="true"] {
  border-color: var(--st-cancelled);
}

.field__input--area {
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}

input[type="date"].field__input,
input[type="time"].field__input,
input[type="datetime-local"].field__input {
  min-width: 0;
}

.field__wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.field__chevron,
.field__wrap > .icon {
  position: absolute;
  right: 13px;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  pointer-events: none;
}

.field__wrap--money > .field__input {
  padding-left: 34px;
}

.field__prefix {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 32px;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: var(--sunken);
  color: var(--ink-2);
  font-weight: 600;
  pointer-events: none;
}

.field--toggle {
  justify-content: center;
}

/* read-only value shown where an input would be */
.fd-display {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

/* ───────── 9. Choices ───────── */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  user-select: none;
}

.check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.check__box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--input);
  border-radius: 6px;
  background: var(--surface);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.check:hover .check__box {
  border-color: var(--em-600);
}

.check__input:focus-visible + .check__box {
  box-shadow: var(--ring);
  border-color: var(--br-500);
}

.check__input:checked + .check__box {
  background: var(--em-700);
  border-color: var(--em-700);
}

.check:not(.check--radio) .check__input:checked + .check__box::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2.5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

.check--radio .check__box {
  border-radius: 50%;
}

.check--radio .check__input:checked + .check__box {
  background: var(--surface);
  border: 6px solid var(--em-700);
}

.check__input:disabled + .check__box {
  background: var(--sunken);
  border-color: var(--line);
}

input[type="checkbox"].fd-sel,
td > input[type="checkbox"],
th > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--input);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}

input[type="checkbox"].fd-sel:hover,
td > input[type="checkbox"]:hover {
  border-color: var(--em-600);
}

input[type="checkbox"].fd-sel:checked,
td > input[type="checkbox"]:checked,
th > input[type="checkbox"]:checked {
  background: var(--em-700);
  border-color: var(--em-700);
}

input[type="checkbox"].fd-sel:checked::after,
td > input[type="checkbox"]:checked::after,
th > input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

.sw {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 28px;
  cursor: pointer;
  font-size: 13.5px;
  user-select: none;
}

.sw input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sw__track {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line-strong);
  box-shadow: inset 0 1px 2px rgb(20 32 27 / 0.15);
  transition: background var(--t-base) var(--ease);
}

.sw__track::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(20 32 27 / 0.3);
  transition: transform var(--t-base) var(--ease);
}

.sw input:checked + .sw__track {
  background: var(--em-600);
}

.sw input:checked + .sw__track::after {
  transform: translateX(16px);
}

.sw input:focus-visible + .sw__track {
  box-shadow: var(--ring);
}

.sw input:disabled + .sw__track {
  opacity: 0.5;
}

/* ───────── 10. Pills, chips, flags ───────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.pill .icon {
  width: 13px;
  height: 13px;
}

.pill--ready {
  background: var(--ok-bg);
  color: #165f3d;
}

.pill--tentative {
  background: var(--warn-bg);
  color: #7d5410;
}

.pill--occupied {
  background: var(--info-bg);
  color: #1f4a82;
}

.pill--cancelled {
  background: var(--bad-bg);
  color: #8f2a25;
}

.pill--dirty {
  background: #fbe9dc;
  color: #8f4012;
}

.pill--ooo {
  background: #e9ebee;
  color: #4b525c;
}

/* VIP / Aviv Club badge: clean white tag, fine champagne ring, the star sits in a gold medallion */
.pill--vip {
  height: 26px;
  gap: 8px;
  padding: 0 12px 0 3px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px #dcc58d, 0 2px 6px -3px rgb(176 140 70 / 0.5);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.pill--vip .icon {
  box-sizing: content-box;
  width: 11px;
  height: 11px;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(140deg, #e2c887, #b08c46);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
  color: #fff;
  fill: #fff;
}

.chip,
.fd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
}

.fd-chip--bad {
  background: var(--bad-bg);
  box-shadow: inset 0 0 0 1px #e8c0bb;
  color: #8f2a25;
}

.fd-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.fd-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
}

.fd-flag .icon {
  width: 12px;
  height: 12px;
  color: var(--ink-3);
}

.fd-flag--warn {
  background: var(--warn-bg);
  box-shadow: inset 0 0 0 1px #ecd9a8;
  color: #7d5410;
}

.fd-flag--warn .icon {
  color: var(--st-tentative);
}

.fd-flag--group {
  background: var(--em-50);
  box-shadow: inset 0 0 0 1px var(--em-100);
  color: var(--em-700);
}

.fd-flag--group .icon {
  color: var(--em-600);
}

.fd-money {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.fd-money--ok {
  color: var(--st-ready);
}

.fd-money--due {
  color: var(--st-dirty);
}

/* ───────── 11. Rhythm ───────── */
.app__content > * + *,
.variant > * + * {
  margin-top: 20px;
}

.app__content > .page-header + * {
  margin-top: 0;
}

/* blocks stacked inside a form or a tab panel get the same breathing room (cards were touching: FDS-05, FDS-21, RSS-02, RS-13 …) */
:where(form,
.stabs__panel,
.variant,
.sh-tbl) > :is(.card,
.fd-sec,
.s-note,
.fd-formfoot,
.s-grid3,
.s-scroll,
.pgw,
.banner,
.st-tiles) + :is(.card,
.fd-sec,
.s-note,
.fd-formfoot,
.s-grid3,
.s-scroll,
.pgw,
.banner,
.st-tiles) {
  margin-top: 16px;
}

.fd-rep-grid {
  gap: 16px;
}

.app__content > .va,
.app__content > .modal,
.app__content > .fd-toast,
.app__content > .helpbox {
  margin-top: 0;
}

.app__content > .helpbox {
  margin-top: 40px;
}

.app__content > .variants,
.variants > .variant {
  margin-top: 0;
}

/* ───────── 12. Cards & sections ───────── */
.card {
  position: relative;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-1);
  min-width: 0;
}

.card > * + * {
  margin-top: 12px;
}

.card > .fd-cardhead + *,
.card > .s-card-title + * {
  margin-top: 14px;
}

.card > .s-scroll {
  margin-inline: -18px;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--line-2);
}

.card > .s-scroll:last-child {
  margin-bottom: -16px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.card > .fd-cardhead + .s-scroll {
  margin-top: 12px;
}

.fd-cardhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.fd-cardhead > .s-card-title {
  margin-right: auto;
}

.s-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}

h3.s-card-title {
  font-size: 14.5px;
}

.fd-h3 {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fd-sec,
.form-section {
  position: relative;
  min-width: 0;
  padding: 18px 20px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-2);
}

.fd-sec > * + *,
.form-section > * + * {
  margin-top: 12px;
}

.fd-sec__t,
.form-section__title {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.fd-sec__d {
  margin-top: 4px !important;
  color: var(--ink-3);
  font-size: 13px;
}

.fd-sec__t + .fd-sec__d + * {
  margin-top: 14px;
}

fieldset.form-section,
.fd-fieldset {
  margin: 0;
  border: 0;
  min-width: 0;
}

fieldset.form-section {
  padding: 20px 0 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-top: 1px solid var(--line-2);
}

fieldset.form-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.form-section__title {
  float: left;
  width: 100%;
  margin-bottom: 14px;
  font-size: 14px;
  font-family: var(--font-ui);
  font-weight: 650;
  letter-spacing: 0;
  padding: 0;
}

.form-section__title + * {
  clear: both;
}

.fd-fieldset > legend {
  padding: 0;
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
}

.fd-multi {
  gap: 8px 22px;
  padding-top: 2px;
}

.s-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.s-note > .icon {
  margin-top: 1px;
  color: var(--ink-3);
  width: 17px;
  height: 17px;
}

.s-note--warn {
  background: var(--warn-bg);
  box-shadow: inset 0 0 0 1px #ecd9a8;
  color: #6e4a0e;
}

.s-note--warn > .icon {
  color: var(--st-tentative);
}

.fd-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--info-bg);
  box-shadow: inset 3px 0 0 var(--st-occupied);
  color: #1d3f6e;
  font-size: 13.5px;
  line-height: 1.5;
}

.fd-banner > .icon {
  margin-top: 1px;
  color: var(--st-occupied);
}

.fd-banner__t strong {
  display: block;
  margin-bottom: 1px;
  font-weight: 650;
}

.fd-banner--warn {
  background: var(--warn-bg);
  box-shadow: inset 3px 0 0 var(--st-tentative);
  color: #6e4a0e;
}

.fd-banner--warn > .icon {
  color: var(--st-tentative);
}

.fd-banner--bad {
  background: var(--bad-bg);
  box-shadow: inset 3px 0 0 var(--st-cancelled);
  color: #7d241f;
}

.fd-banner--bad > .icon {
  color: var(--st-cancelled);
}

.fd-banner--info {
  background: var(--info-bg);
}

.s-kv {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: 7px 18px;
  font-size: 13px;
}

.s-kv dt {
  color: var(--ink-3);
  font-size: 12.5px;
  padding-top: 1px;
}

.s-kv dd {
  color: var(--ink);
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}

.s-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 20px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  color: var(--ink-3);
  text-align: center;
}

.s-empty > .icon {
  width: 28px;
  height: 28px;
  color: var(--br-400);
}

.s-empty strong {
  color: var(--ink);
  font-size: 15px;
}

.fd-list {
  display: grid;
  gap: 8px;
  padding-left: 0;
}

.fd-list li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-2);
}

.fd-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--br-400);
}

.fd-list--fix li::before {
  background: var(--st-dirty);
}

/* Heads-up panel (check-in / check-out summary): one dark emerald card with a champagne glow – same family as the dashboard's "Needs your attention" card */
.fd-alerts {
  --gold: #c8a96a;
  position: relative;
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 14px 16px 6px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 100% 0%, rgb(200 169 106 / 0.24), transparent 60%), radial-gradient(100% 80% at 0% 100%, rgb(43 117 97 / 0.5), transparent 72%), #0e1a2b;
  box-shadow: var(--sh-2);
  list-style: none;
  color: #fff;
}

.fd-alerts::before {
  content: "Heads-up";
  padding-bottom: 8px;
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fd-alerts li {
  --k: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.92);
  font-size: 13px;
  line-height: 1.45;
}

.fd-alerts li > .icon {
  box-sizing: content-box;
  flex: none;
  width: 16px;
  height: 16px;
  padding: 7px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--k) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 45%, transparent);
  color: var(--k);
}

.fd-alerts li.is-warn {
  --k: #f0b45a;
}

.fd-alerts li.is-bad {
  --k: #ff8d84;
}

.fd-qa {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fd-hist {
  display: grid;
  gap: 0;
}

.fd-hist li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}

.fd-hist time {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.fd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}

.fd-back:hover {
  color: var(--em-700);
}

.fd-anchors {
  position: sticky;
  top: calc(var(--topbar-h) + 8px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-radius: 999px;
  background: rgb(255 254 251 / 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--line), var(--sh-2);
}

.fd-anchors a {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
}

.fd-anchors a:hover {
  background: var(--em-50);
  color: var(--em-800);
}

/* ───────── 13. Layout grids ───────── */
.fd-grid1 {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

.s-grid2 {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.s-grid3 {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.s-grid4 {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.s-grid2:has(> .card,
> section.card),
.s-grid3:has(> .card) {
  gap: 20px;
}

.s-grid2 > .field[style*="grid-column"],
.s-grid3 > .field[style*="grid-column"] {
  min-width: 0;
}

.fd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}

.fd-split--wide {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}

.s-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 24px;
  align-items: start;
}

.fd-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.fd-stack--sticky {
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
}

.fd-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.fd-formfoot {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  margin-top: 4px;
  border-radius: var(--r-lg);
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--line), 0 -10px 30px -12px rgb(20 32 27 / 0.2);
}

.fd-formfoot > .btn.fd-spacer {
  flex: 0 0 auto;
  margin-right: auto;
}

.fd-formfoot > .fd-spacer:not(.btn) {
  flex: 1;
}

.fd-formfoot > .btn:first-child:not(.btn--primary) {
  margin-right: auto;
}

.s-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.fd-tabbar {
  margin-bottom: 14px;
}

/* ───────── 14. Filter strip ───────── */
.s-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.s-toolbar__search {
  position: relative;
  flex: 1 1 280px;
  max-width: 420px;
  min-width: 200px;
}

.s-toolbar__search > .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  color: var(--ink-4);
  pointer-events: none;
}

.s-toolbar .s-toolbar__search input.field__input,
.s-toolbar .s-toolbar__search input {
  padding-left: 38px;
  min-height: 34px;
  border-radius: 999px;
}

.s-toolbar .field__wrap {
  flex: 0 1 auto;
  min-width: 140px;
}

.s-toolbar .field__input,
.s-toolbar select.field__input {
  min-height: 34px;
}

.s-toolbar .field__input--select {
  border-radius: 999px;
  padding-left: 16px;
  font-size: 13.5px;
  font-weight: 500;
}

.s-toolbar .btn {
  height: 34px;
  border-radius: 999px;
}

.s-toolbar__end {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.s-more {
  position: relative;
}

.s-more > summary {
  list-style: none;
}

.s-more > summary::-webkit-details-marker {
  display: none;
}

.s-more[open] > summary {
  border-color: var(--em-600);
  color: var(--em-800);
  background: var(--em-50);
}

.s-more__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 16px;
  width: min(320px, calc(100vw - 48px));
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-3);
  animation: av-pop 180ms var(--ease);
}

.s-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--r-lg);
  background: var(--em-50);
  box-shadow: inset 0 0 0 1px var(--em-100);
}

.s-bulk__k {
  margin-right: 6px;
  color: var(--em-700);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.s-bulk .btn {
  height: 34px;
}

.page-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
}

.page-ctl > .ltabs {
  flex: 1 1 auto;
}

.page-ctl__filters {
  flex: 0 1 auto;
  padding-bottom: 8px;
}

/* ───────── 15. Tabs & steps ───────── */
.ltabs {
  min-width: 0;
}

.ltabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.ltabs__list > a,
.ltabs__list > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 10px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  transition: color var(--t-fast);
}

.ltabs__list > a:hover {
  color: var(--ink);
}

.ltabs__list > a[aria-current="page"] {
  color: var(--em-800);
  font-weight: 650;
}

.ltabs__list > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--br-400), var(--br-500));
}

.ltabs__n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.ltabs__list > a[aria-current="page"] .ltabs__n {
  background: var(--br-100);
  color: var(--br-700);
}

.ltabs:has(> .ltabs__end) {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.ltabs:has(> .ltabs__end) > .ltabs__list {
  flex: 1 1 auto;
}

.ltabs__end {
  padding-bottom: 6px;
}

.ltabs__end a,
.arr-online {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--em-50);
  box-shadow: inset 0 0 0 1px var(--em-100);
  color: var(--em-700);
  font-size: 13px;
  font-weight: 600;
}

/* stepper */
.ltabs--steps {
  padding: 10px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-1);
}

.ltabs--steps .ltabs__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  padding: 0;
  box-shadow: none;
  scrollbar-width: none;
}

.ltabs--steps .ltabs__list > a,
.ltabs--steps .ltabs__list > span {
  flex: 0 1 auto;
  min-width: 0;
  gap: 8px;
  padding: 0 8px 0 0;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}

.ltabs--steps .ltabs__list > *:last-child {
  padding-right: 0;
}

.ltabs--steps .ltabs__list > a::after,
.ltabs--steps .ltabs__list > span::after {
  content: none;
}

.ltabs--steps .ltabs__list > *:not(:last-child)::before {
  content: "";
  order: 3;
  flex: 1 1 10px;
  min-width: 10px;
  height: 2px;
  margin-left: 4px;
  border-radius: 2px;
  background: var(--line-strong);
}

.ltabs--steps .ltabs__n {
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--ink-3);
  font-size: 12.5px;
}

.ltabs--steps .ltabs__list > a[aria-current="page"] {
  color: var(--ink);
}

.ltabs--steps .ltabs__list > a[aria-current="page"] .ltabs__n {
  background: linear-gradient(145deg, var(--em-600), var(--em-800));
  box-shadow: 0 0 0 3px var(--br-200);
  color: #fff;
}

.ltabs--steps .ltabs__list > a.is-done {
  color: var(--ink-2);
}

.ltabs--steps .ltabs__list > a.is-done .ltabs__n {
  background: var(--ok-bg);
  box-shadow: inset 0 0 0 1.5px #a9d3bb;
  color: var(--st-ready);
}

.ltabs--steps .ltabs__list > a.is-done::before {
  background: #a9d3bb;
}

.ltabs--steps .ltabs__list > .is-todo {
  color: var(--ink-4);
}

.ltabs--steps .ltabs__list > a:hover .ltabs__n {
  box-shadow: inset 0 0 0 1.5px var(--em-600);
}

/* night-audit status steps */
.ltabs--audit {
  padding: 8px;
}

.ltabs--audit .ltabs__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 6px;
  overflow: visible;
}

.ltabs--audit .ltabs__list > a {
  flex: none;
  min-width: 0;
  padding: 6px 10px 6px 8px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: normal;
  line-height: 1.25;
}

.ltabs--audit .ltabs__list > *::before {
  content: none !important;
}

.ltabs--audit .ltabs__list > a[aria-current="page"] {
  background: var(--em-50);
  box-shadow: inset 0 0 0 1.5px var(--em-600);
}

.ltabs--audit .na-ic {
  margin-left: auto;
  flex: none;
}

.na-ic {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.na-ic .icon {
  width: 12px;
  height: 12px;
}

.na-ok .na-ic {
  background: var(--ok-bg);
  color: var(--st-ready);
}

.na-warn .na-ic {
  background: var(--warn-bg);
  color: var(--st-tentative);
}

.na-bad .na-ic {
  background: var(--bad-bg);
  color: var(--st-cancelled);
}

.na-off .na-ic,
.na-lock .na-ic {
  background: var(--sunken);
  color: var(--ink-3);
}

.ltabs--audit .na-bad .ltabs__n {
  box-shadow: inset 0 0 0 1.5px #e3aaa4;
}

.ltabs--audit .na-warn .ltabs__n {
  box-shadow: inset 0 0 0 1.5px #e6cd8c;
}

/* radio tabs: a segmented control on a quiet track */
.stabs {
  min-width: 0;
}

.stabs > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.stabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border-radius: 999px;
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.stabs__list label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.stabs__list label:hover {
  color: var(--ink);
}

.stabs__n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgb(20 32 27 / 0.08);
  font-size: 11px;
  font-weight: 650;
}

.stabs > input:focus-visible ~ .stabs__list {
  outline: 2px solid var(--br-500);
  outline-offset: 2px;
}

.stabs__panels {
  margin-top: 14px;
}

.stabs__panel {
  display: none;
  min-width: 0;
}

.stabs__extra,
.stabs__extra--end {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* tabs with an end strip (bulk actions, search …): the tabs and the strip share one row, the panels start under them */
.stabs:has(> .stabs__extra--end) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.stabs > .stabs__extra--end {
  margin-left: auto;
}

.stabs > .stabs__extra--end:empty,
.stabs > .stabs__extra--end:not(:has(*:not(datalist))) {
  display: none;
}

.stabs:has(> .stabs__extra--end) > .stabs__panels {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 4px;
}

.stabs > input:nth-of-type(1):checked ~ .stabs__list label:nth-child(1),
.stabs > input:nth-of-type(2):checked ~ .stabs__list label:nth-child(2),
.stabs > input:nth-of-type(3):checked ~ .stabs__list label:nth-child(3),
.stabs > input:nth-of-type(4):checked ~ .stabs__list label:nth-child(4),
.stabs > input:nth-of-type(5):checked ~ .stabs__list label:nth-child(5),
.stabs > input:nth-of-type(6):checked ~ .stabs__list label:nth-child(6),
.stabs > input:nth-of-type(7):checked ~ .stabs__list label:nth-child(7),
.stabs > input:nth-of-type(8):checked ~ .stabs__list label:nth-child(8),
.stabs > input:nth-of-type(9):checked ~ .stabs__list label:nth-child(9),
.stabs > input:nth-of-type(10):checked ~ .stabs__list label:nth-child(10),
.stabs > input:nth-of-type(11):checked ~ .stabs__list label:nth-child(11),
.stabs > input:nth-of-type(12):checked ~ .stabs__list label:nth-child(12) {
  background: var(--surface);
  color: var(--em-800);
  box-shadow: 0 1px 2px rgb(20 32 27 / 0.12), 0 0 0 1px var(--line-strong);
}

.stabs > input:nth-of-type(1):checked ~ .stabs__list label:nth-child(1) .stabs__n,
.stabs > input:nth-of-type(2):checked ~ .stabs__list label:nth-child(2) .stabs__n,
.stabs > input:nth-of-type(3):checked ~ .stabs__list label:nth-child(3) .stabs__n,
.stabs > input:nth-of-type(4):checked ~ .stabs__list label:nth-child(4) .stabs__n,
.stabs > input:nth-of-type(5):checked ~ .stabs__list label:nth-child(5) .stabs__n,
.stabs > input:nth-of-type(6):checked ~ .stabs__list label:nth-child(6) .stabs__n,
.stabs > input:nth-of-type(7):checked ~ .stabs__list label:nth-child(7) .stabs__n,
.stabs > input:nth-of-type(8):checked ~ .stabs__list label:nth-child(8) .stabs__n,
.stabs > input:nth-of-type(9):checked ~ .stabs__list label:nth-child(9) .stabs__n,
.stabs > input:nth-of-type(10):checked ~ .stabs__list label:nth-child(10) .stabs__n,
.stabs > input:nth-of-type(11):checked ~ .stabs__list label:nth-child(11) .stabs__n,
.stabs > input:nth-of-type(12):checked ~ .stabs__list label:nth-child(12) .stabs__n {
  background: var(--br-100);
  color: var(--br-700);
}

.stabs > input:nth-of-type(1):checked ~ .stabs__panels > .stabs__panel:nth-child(1),
.stabs > input:nth-of-type(2):checked ~ .stabs__panels > .stabs__panel:nth-child(2),
.stabs > input:nth-of-type(3):checked ~ .stabs__panels > .stabs__panel:nth-child(3),
.stabs > input:nth-of-type(4):checked ~ .stabs__panels > .stabs__panel:nth-child(4),
.stabs > input:nth-of-type(5):checked ~ .stabs__panels > .stabs__panel:nth-child(5),
.stabs > input:nth-of-type(6):checked ~ .stabs__panels > .stabs__panel:nth-child(6),
.stabs > input:nth-of-type(7):checked ~ .stabs__panels > .stabs__panel:nth-child(7),
.stabs > input:nth-of-type(8):checked ~ .stabs__panels > .stabs__panel:nth-child(8),
.stabs > input:nth-of-type(9):checked ~ .stabs__panels > .stabs__panel:nth-child(9),
.stabs > input:nth-of-type(10):checked ~ .stabs__panels > .stabs__panel:nth-child(10),
.stabs > input:nth-of-type(11):checked ~ .stabs__panels > .stabs__panel:nth-child(11),
.stabs > input:nth-of-type(12):checked ~ .stabs__panels > .stabs__panel:nth-child(12) {
  display: block;
  animation: av-fade var(--t-base) var(--ease);
}

/* ───────── 16. Tables ───────── */
.s-scroll {
  min-width: 0;
  overflow: auto;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-2);
}

.s-scroll--tall {
  max-height: min(68vh, 720px);
}

.dt__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.dt__table caption {
  text-align: left;
}

.dt__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 14px;
  background: var(--surface-2);
  box-shadow: inset 0 -1px 0 var(--line-strong);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.dt__table th.dt__th--right {
  text-align: right;
}

.dt__table th:first-child,
.dt__td:first-child {
  padding-left: 22px;
}

.dt__table th:last-child,
.dt__td:last-child {
  padding-right: 22px;
}

.dt__td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
  color: var(--ink);
  line-height: 1.4;
}

.dt__table tbody tr:last-child > .dt__td {
  border-bottom: 0;
}

.dt__table tbody tr {
  transition: background var(--t-fast);
}

.dt__table tbody tr:hover {
  background: var(--surface-2);
}

.dt__td--right {
  text-align: right;
}

.dt__td--center {
  text-align: center;
}

.dt--compact .dt__td {
  padding-block: 7px;
}

.dt--compact th {
  padding-block: 7px;
}

.dt__table:has(thead th:nth-child(9)) th,
.dt__table:has(thead th:nth-child(9)) .dt__td {
  padding-inline: 11px;
}

.dt__table:has(thead th:nth-child(9)) .dt__td {
  font-size: 13px;
}

.dt__td:last-child:has(.btn) {
  width: 1%;
  white-space: nowrap;
}

.dt__td .stack:has(> .btn),
.dt__td .row:has(> .btn) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.dt__td .btn {
  height: 28px;
  padding: 0 11px;
  font-size: 12.5px;
  border-radius: 8px;
}

.dt__td .btn--ghost:has(> .icon:only-child) {
  width: 28px;
  padding: 0;
}

.dt__td .fo-act {
  display: inline-flex;
  gap: 2px;
}

tr.fd-grouprow > th {
  position: static;
  padding: 11px 22px;
  background: var(--em-50);
  box-shadow: inset 0 1px 0 var(--em-100), inset 0 -1px 0 var(--em-100);
  color: var(--em-800);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

tr.fd-grouprow .btn {
  height: 28px;
  margin-left: 10px;
  font-size: 12px;
}

.s-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px;
  color: var(--ink-3);
  font-size: 12.5px;
}

/* ───────── 17. Stat ribbon (shared base — screens restyle it to suit their content) ───────── */
.fd-kpis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-2);
}

.fd-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 16px;
}

.fd-kpi + .fd-kpi {
  box-shadow: inset 1px 0 0 var(--line-2);
}

.fd-kpi__n {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  font-variant-numeric: lining-nums tabular-nums;
}

.fd-kpi__l {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
}

.fd-kpi__s {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.4;
}

.fd-kpi--warn .fd-kpi__n {
  color: var(--st-dirty);
}

.fd-kpi--good .fd-kpi__n {
  color: var(--st-ready);
}

/* ───────── 18. Entity cards (setup lists) ───────── */
.ent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 20px;
}

.ent-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-1);
  transition: box-shadow var(--t-base), transform var(--t-base) var(--ease);
}

.ent-card:hover {
  box-shadow: 0 0 0 1px var(--br-300), var(--sh-3);
  transform: translateY(-2px);
}

.ent-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ent-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--em-50);
  box-shadow: inset 0 0 0 1px var(--em-100);
  color: var(--em-600);
}

.ent-card__id {
  min-width: 0;
  flex: 1;
}

.ent-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.ent-card__code {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ent-card__act {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ent-card__text {
  color: var(--ink-2);
  font-size: 13.5px;
}

.ent-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px 18px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}

.ent-card__facts dt {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ent-card__facts dd {
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 500;
}

/* ───────── 19. Notices & message bubbles ───────── */
.notif__list {
  display: grid;
  gap: 2px;
}

.notif__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  color: var(--ink);
  transition: background var(--t-fast);
}

.notif__item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.notif__item > .icon:first-child {
  color: var(--br-600);
}

.notif__item > .icon:last-child {
  margin-left: auto;
  color: var(--ink-4);
}

.notif__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.35;
}

.notif__text > span {
  color: var(--ink-3);
  font-size: 12.5px;
}

.notif__time {
  color: var(--ink-3);
  font-size: 12px;
}

.bubble {
  max-width: 560px;
  padding: 12px 16px;
  border-radius: 4px 16px 16px 16px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  line-height: 1.5;
}

.bubble__t {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ───────── 20. Pop-ups and full sheets (opened with :target) ───────── */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  place-items: center;
  padding: 28px;
}

.modal:target {
  display: grid;
  animation: av-fade 200ms ease-out;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(6 28 22 / 0.52);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: default;
}

.modal__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(580px, 100%);
  max-height: calc(100vh - 56px);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-4), 0 0 0 1px rgb(255 255 255 / 0.4);
  animation: av-pop 260ms var(--ease);
}

.modal--sm .modal__box {
  width: min(440px, 100%);
}

.modal--lg .modal__box {
  width: min(780px, 100%);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px 12px;
}

.modal__head > div:first-child {
  flex: 1;
  min-width: 0;
}

.modal__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.modal__desc {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 62ch;
}

.modal__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: -4px -8px 0 0;
  border-radius: 50%;
  color: var(--ink-3);
  transition: background var(--t-fast), color var(--t-fast);
}

.modal__close:hover {
  background: var(--sunken);
  color: var(--ink);
}

.modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 22px 20px;
}

.modal__body > * + * {
  margin-top: 14px;
}

.modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 22px;
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 var(--line);
}

.modal__foot > .btn:first-child:not(.btn--primary):not(:last-child) {
  margin-right: auto;
}

.modal__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}

.modal__back:hover {
  color: var(--em-700);
}

/* side drawer */
.modal--drawer {
  place-items: stretch end;
  padding: 0;
}

.modal--drawer .modal__box {
  width: min(520px, 100%);
  height: 100%;
  max-height: none;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  animation: av-slide 300ms var(--ease);
}

/* full sheet inside the shell (sidebar and top bar stay) */
.modal--full {
  inset: var(--topbar-h) 0 0 var(--sidebar-w);
  z-index: 25;
  padding: 0;
  background: var(--bg);
}

.modal--full .modal__backdrop {
  display: none;
}

.modal--full .modal__box {
  width: 100%;
  max-height: none;
  height: 100%;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  animation: av-rise 280ms var(--ease);
}

.modal--full .modal__head {
  padding: 14px var(--gutter) 12px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
}

.modal--full .modal__title {
  font-size: 21px;
}

.modal--full .modal__body {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px var(--gutter) 32px;
}

.modal--full .modal__foot {
  padding: 14px var(--gutter);
  background: rgb(255 254 251 / 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ───────── 21. Toasts & confirmation rows ───────── */
.fd-toast {
  display: none;
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 150;
  align-items: flex-start;
  gap: 14px;
  width: min(440px, calc(100vw - 56px));
  padding: 16px 16px 16px 18px;
  border-radius: var(--r-lg);
  background: var(--em-900);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--sh-4), inset 3px 0 0 var(--br-400);
}

.fd-toast:target {
  display: flex;
  animation: av-rise 320ms var(--ease);
}

.fd-toast > .icon {
  margin-top: 1px;
  color: var(--br-300);
}

.fd-toast__text {
  flex: 1;
  min-width: 0;
}

.fd-toast__text small {
  display: block;
  margin-top: 3px;
  color: rgb(255 255 255 / 0.72);
  font-size: 12.5px;
  font-weight: 400;
}

.fd-toast__x {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px 0 0;
  border-radius: 50%;
  color: rgb(255 255 255 / 0.65);
}

.fd-toast__x:hover {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
}

.fd-toast--warn {
  background: #3a2a0c;
  box-shadow: var(--sh-4), inset 3px 0 0 var(--br-400);
}

.fd-toast--in {
  position: static;
  width: auto;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--ok-bg);
  color: #14543a;
  box-shadow: inset 0 0 0 1px #b4d9c4;
}

.fd-toast--in > .icon {
  color: var(--st-ready);
}

.fd-toast--in .fd-toast__text small {
  color: #2d6a4d;
}

.fd-toast--in .fd-toast__x {
  color: #2d6a4d;
}

.fd-after {
  display: none;
}

.fd-after:target {
  display: table-row;
  animation: av-fade 320ms ease-out;
}

.fd-after:target > td {
  background: color-mix(in srgb, var(--st-ready) 8%, #fff);
}

.fd-after:target .fd-toast--in {
  display: flex;
}

/* ───────── 22. Record variants (one record out of many, chosen by #id) ───────── */
.va {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

.variants > .variant {
  display: none;
}

.variants > .variant.is-default {
  display: block;
}

.variants:has(.va:target) > .variant.is-default {
  display: none;
}

.variants > .variant:has(.modal:target) {
  display: block;
}

.variants:has(.variant:not(.is-default) .modal:target) > .variant.is-default {
  display: none;
}

body:has(.variant:not(.is-default) .modal:target) .page-header__filters,
body:has(.va:target) .page-header__filters--record {
  display: none;
}

/* ───────── 23. Paper: printable outputs shown on screen ───────── */
.paper-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 880px;
  margin: 0 auto 18px;
}

.paper {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding: 44px 52px 40px;
  border-radius: 6px;
  background: #fff;
  color: #1a1f1c;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 0 0 1px var(--line), 0 24px 50px -24px rgb(20 32 27 / 0.35);
}

.paper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, var(--em-800), var(--em-600) 60%, var(--br-400));
}

.paper > * + * {
  margin-top: 18px;
}

.paper--a5 {
  max-width: 640px;
  padding: 36px 40px;
}

.paper--card {
  max-width: 440px;
  padding: 28px 30px;
}

.paper__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d9d4c6;
}

.paper__brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--em-800);
}

.paper__brand small {
  display: block;
  margin-top: 4px;
  color: #5d665f;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
}

.paper__meta {
  text-align: right;
  color: #3a423d;
  font-size: 12.5px;
}

.paper__meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: #14201b;
}

.paper__small {
  color: #5d665f;
  font-size: 11.5px;
  line-height: 1.55;
}

.paper__sign {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-top: 36px;
  color: #3a423d;
  font-size: 12px;
}

.paper__sign > * {
  flex: 1;
  padding-top: 8px;
  border-top: 1px solid #1a1f1c;
  text-align: center;
}

.paper__foot {
  padding-top: 14px;
  border-top: 1px solid #d9d4c6;
  color: #5d665f;
  font-size: 11.5px;
  text-align: center;
}

.paper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.paper th {
  padding: 8px 10px;
  background: #f4f1e9;
  border-bottom: 1px solid #cfc8b6;
  text-align: left;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #3a423d;
}

.paper td {
  padding: 8px 10px;
  border-bottom: 1px solid #e8e3d4;
}

.paper .num,
.paper td.dt__td--right,
.paper th.dt__th--right {
  text-align: right;
}

/* ───────── 24. Motion ───────── */
.card,
.fd-sec,
.s-scroll {
  transition: box-shadow var(--t-base);
}

/* a paper sheet shown inside a side card shrinks to fit it */
.card .paper,
.fd-stack .paper {
  max-width: 100%;
  padding: 20px 18px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.card .paper table,
.paper--card table {
  table-layout: fixed;
  word-break: break-word;
}

.paper {
  overflow-wrap: anywhere;
}

/* ───────── 25. Responsive ───────── */
@media (max-width: 1440px) {
  :root {
    --gutter: 28px;
  }
  .topbar__clock {
    display: none;
  }
  .topbar__date {
    padding-right: 12px;
  }
  .topbar__user-role {
    display: none;
  }
  .topbar__search {
    flex-basis: 300px;
  }
}

@media (max-width: 1280px) {
  :root {
    --sidebar-w: 224px;
    --gutter: 24px;
  }
  .topbar {
    gap: 8px;
  }
  .topbar__user-text {
    display: none;
  }
  .topbar__user {
    padding-right: 4px;
  }
  .topbar__search {
    flex-basis: 240px;
  }
  .pv--new[popover] {
    right: 220px;
  }
  .pv--notif[popover] {
    right: 90px;
  }
  .fd-kpis {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
  .fd-kpi + .fd-kpi {
    box-shadow: none;
  }
  .fd-kpi {
    box-shadow: inset 0 0 0 0.5px var(--line-2);
  }
}

@media (max-width: 1100px) {
  :root {
    --sidebar-w: 72px;
    --gutter: 20px;
  }
  .sidebar__brand {
    justify-content: center;
    padding: 0;
  }
  .sidebar__name,
  .nav__label,
  .nav__chev {
    display: none;
  }
  .nav__group {
    font-size: 0;
    min-height: 1px;
    padding: 0;
    margin: 10px 14px;
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.1);
  }
  .nav__item {
    justify-content: center;
    padding: 10px;
  }
  .nav__item.is-active::before {
    left: -12px;
  }
  .topbar__date {
    padding: 0 10px;
  }
  .topbar__shift span:not(.topbar__shift-dot) {
    display: none;
  }
  .topbar__shift {
    padding: 0 12px;
  }
  .topbar__prop span {
    display: none;
  }
  .topbar__prop {
    padding: 0 11px;
  }
  .topbar__new span {
    display: none;
  }
  .topbar__new {
    padding: 0 13px;
  }
  .fd-split,
  .fd-split--wide,
  .s-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .fd-stack--sticky {
    position: static;
  }
  .s-grid3,
  .s-grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pv--prop[popover] {
    left: calc(var(--sidebar-w) + 12px);
  }
  .page-header__title {
    font-size: 28px;
  }
}

@media (max-width: 760px) {
  .s-grid2,
  .s-grid3,
  .s-grid4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .topbar__search {
    display: none;
  }
  .modal {
    padding: 12px;
  }
  .modal__head,
  .modal__body,
  .modal__foot {
    padding-inline: 18px;
  }
  .helpbox__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ───────── 26. Greeting band (dashboards) — a very light sage-to-champagne wash ───────── */
.card.fd-hello,
.card.rs01-hello,
.fd-hello,
.rs01-hello,
.hero2,
.card.hero2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding: 16px 22px;
  border-radius: var(--r-xl);
  background: linear-gradient(115deg, #eef5f1 0%, #f7f8f1 55%, #fbf6e8 100%);
  box-shadow: 0 0 0 1px var(--line), var(--sh-1);
  color: var(--ink);
}

.fd-hello__t,
.rs01-hello__t,
.hero2__t {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.fd-hello__s,
.rs01-hello__s,
.hero2__s {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 13px;
}

.fd-hello__s .fd-chip {
  height: 24px;
  margin-left: 4px;
  font-size: 12px;
}

.fd-hello__btns,
.rs01-hello__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fd-hello .btn,
.rs01-hello .btn {
  height: 32px;
  font-size: 12.5px;
  box-shadow: none;
  background: rgb(255 255 255 / 0.75);
}

.fd-hello .btn:hover,
.rs01-hello .btn:hover {
  background: var(--em-50);
}

.fd-hello .btn--primary,
.rs01-hello .btn--primary {
  background: linear-gradient(180deg, var(--em-600), var(--em-800));
}

.fd-hello .btn--primary:hover,
.rs01-hello .btn--primary:hover {
  background: linear-gradient(180deg, var(--em-500), var(--em-700));
}

.stat3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* ───────── Table pages: rows per page (10 · 15 · 20 · 25 · 30) + page buttons, no script (the .pgw / .pg wrappers are part of the markup) ───────── */
.pg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
  margin-top: 0;
  padding: 12px 4px 2px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.pg-set {
  display: none;
}

.pg-in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pg-info {
  order: 1;
  margin-right: auto;
}

.pg-info b {
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.pg-rpp {
  order: 2;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 14px;
}

.pg-rpp__c {
  height: 32px;
  padding: 0 28px 0 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

.pg-rpp__c:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--br-500), var(--ring);
}

.pg-rpp > .icon {
  position: absolute;
  right: 9px;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.pg-prev {
  order: 3;
}

.pg-n {
  order: 4;
}

.pg-next {
  order: 5;
}

.pg-info > *,
.pg-prev > *,
.pg-next > * {
  display: none;
}

.pg-n,
.pg-arr {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.pg-n:hover,
.pg-arr:hover {
  background: var(--sunken);
  color: var(--ink);
}

.pg-arr.is-off {
  opacity: 0.35;
  cursor: default;
}

.pg-arr.is-off:hover {
  background: transparent;
}

.pg-in:checked + .pg-n {
  background: var(--em-700);
  color: #fff;
}

.pg-in:focus-visible + .pg-n {
  box-shadow: var(--ring);
}

.pgw:has(.pg-rpp__c option[value="10"]:checked) .pg-set--10,
.pgw:has(.pg-rpp__c option[value="15"]:checked) .pg-set--15,
.pgw:has(.pg-rpp__c option[value="20"]:checked) .pg-set--20,
.pgw:has(.pg-rpp__c option[value="25"]:checked) .pg-set--25,
.pgw:has(.pg-rpp__c option[value="30"]:checked) .pg-set--30 {
  display: contents;
}

.pg-set > .pg-in:nth-of-type(1):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(1),
.pg-set > .pg-in:nth-of-type(2):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(2),
.pg-set > .pg-in:nth-of-type(3):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(3),
.pg-set > .pg-in:nth-of-type(4):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(4),
.pg-set > .pg-in:nth-of-type(5):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(5),
.pg-set > .pg-in:nth-of-type(6):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(6),
.pg-set > .pg-in:nth-of-type(7):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(7),
.pg-set > .pg-in:nth-of-type(8):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(8),
.pg-set > .pg-in:nth-of-type(9):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(9),
.pg-set > .pg-in:nth-of-type(10):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(10),
.pg-set > .pg-in:nth-of-type(11):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(11),
.pg-set > .pg-in:nth-of-type(12):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(12),
.pg-set > .pg-in:nth-of-type(13):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(13),
.pg-set > .pg-in:nth-of-type(14):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(14),
.pg-set > .pg-in:nth-of-type(15):checked ~ :is(.pg-info,
.pg-prev,
.pg-next) > :nth-child(15) {
  display: inline-grid;
}

.pg-info > * {
  display: none;
}

.pg-set > .pg-in:nth-of-type(1):checked ~ .pg-info > :nth-child(1),
.pg-set > .pg-in:nth-of-type(2):checked ~ .pg-info > :nth-child(2),
.pg-set > .pg-in:nth-of-type(3):checked ~ .pg-info > :nth-child(3),
.pg-set > .pg-in:nth-of-type(4):checked ~ .pg-info > :nth-child(4),
.pg-set > .pg-in:nth-of-type(5):checked ~ .pg-info > :nth-child(5),
.pg-set > .pg-in:nth-of-type(6):checked ~ .pg-info > :nth-child(6),
.pg-set > .pg-in:nth-of-type(7):checked ~ .pg-info > :nth-child(7),
.pg-set > .pg-in:nth-of-type(8):checked ~ .pg-info > :nth-child(8),
.pg-set > .pg-in:nth-of-type(9):checked ~ .pg-info > :nth-child(9),
.pg-set > .pg-in:nth-of-type(10):checked ~ .pg-info > :nth-child(10),
.pg-set > .pg-in:nth-of-type(11):checked ~ .pg-info > :nth-child(11),
.pg-set > .pg-in:nth-of-type(12):checked ~ .pg-info > :nth-child(12),
.pg-set > .pg-in:nth-of-type(13):checked ~ .pg-info > :nth-child(13),
.pg-set > .pg-in:nth-of-type(14):checked ~ .pg-info > :nth-child(14),
.pg-set > .pg-in:nth-of-type(15):checked ~ .pg-info > :nth-child(15) {
  display: inline;
}

.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(1):checked) tbody > tr:is(:nth-child(n + 11 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(2):checked) tbody > tr:is(:nth-child(-n + 10 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 21 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(3):checked) tbody > tr:is(:nth-child(-n + 20 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 31 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(4):checked) tbody > tr:is(:nth-child(-n + 30 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 41 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(5):checked) tbody > tr:is(:nth-child(-n + 40 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 51 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(6):checked) tbody > tr:is(:nth-child(-n + 50 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 61 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(7):checked) tbody > tr:is(:nth-child(-n + 60 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 71 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(8):checked) tbody > tr:is(:nth-child(-n + 70 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 81 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(9):checked) tbody > tr:is(:nth-child(-n + 80 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 91 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(10):checked) tbody > tr:is(:nth-child(-n + 90 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 101 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(11):checked) tbody > tr:is(:nth-child(-n + 100 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 111 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(12):checked) tbody > tr:is(:nth-child(-n + 110 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 121 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(13):checked) tbody > tr:is(:nth-child(-n + 120 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 131 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(14):checked) tbody > tr:is(:nth-child(-n + 130 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 141 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="10"]:checked):has(.pg-set--10 > .pg-in:nth-of-type(15):checked) tbody > tr:is(:nth-child(-n + 140 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 151 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(1):checked) tbody > tr:is(:nth-child(n + 16 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(2):checked) tbody > tr:is(:nth-child(-n + 15 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 31 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(3):checked) tbody > tr:is(:nth-child(-n + 30 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 46 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(4):checked) tbody > tr:is(:nth-child(-n + 45 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 61 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(5):checked) tbody > tr:is(:nth-child(-n + 60 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 76 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(6):checked) tbody > tr:is(:nth-child(-n + 75 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 91 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(7):checked) tbody > tr:is(:nth-child(-n + 90 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 106 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(8):checked) tbody > tr:is(:nth-child(-n + 105 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 121 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(9):checked) tbody > tr:is(:nth-child(-n + 120 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 136 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(10):checked) tbody > tr:is(:nth-child(-n + 135 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 151 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(11):checked) tbody > tr:is(:nth-child(-n + 150 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 166 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(12):checked) tbody > tr:is(:nth-child(-n + 165 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 181 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(13):checked) tbody > tr:is(:nth-child(-n + 180 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 196 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(14):checked) tbody > tr:is(:nth-child(-n + 195 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 211 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="15"]:checked):has(.pg-set--15 > .pg-in:nth-of-type(15):checked) tbody > tr:is(:nth-child(-n + 210 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 226 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(1):checked) tbody > tr:is(:nth-child(n + 21 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(2):checked) tbody > tr:is(:nth-child(-n + 20 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 41 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(3):checked) tbody > tr:is(:nth-child(-n + 40 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 61 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(4):checked) tbody > tr:is(:nth-child(-n + 60 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 81 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(5):checked) tbody > tr:is(:nth-child(-n + 80 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 101 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(6):checked) tbody > tr:is(:nth-child(-n + 100 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 121 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(7):checked) tbody > tr:is(:nth-child(-n + 120 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 141 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(8):checked) tbody > tr:is(:nth-child(-n + 140 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 161 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(9):checked) tbody > tr:is(:nth-child(-n + 160 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 181 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(10):checked) tbody > tr:is(:nth-child(-n + 180 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 201 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(11):checked) tbody > tr:is(:nth-child(-n + 200 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 221 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(12):checked) tbody > tr:is(:nth-child(-n + 220 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 241 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(13):checked) tbody > tr:is(:nth-child(-n + 240 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 261 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(14):checked) tbody > tr:is(:nth-child(-n + 260 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 281 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="20"]:checked):has(.pg-set--20 > .pg-in:nth-of-type(15):checked) tbody > tr:is(:nth-child(-n + 280 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 301 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(1):checked) tbody > tr:is(:nth-child(n + 26 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(2):checked) tbody > tr:is(:nth-child(-n + 25 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 51 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(3):checked) tbody > tr:is(:nth-child(-n + 50 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 76 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(4):checked) tbody > tr:is(:nth-child(-n + 75 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 101 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(5):checked) tbody > tr:is(:nth-child(-n + 100 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 126 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(6):checked) tbody > tr:is(:nth-child(-n + 125 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 151 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(7):checked) tbody > tr:is(:nth-child(-n + 150 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 176 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(8):checked) tbody > tr:is(:nth-child(-n + 175 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 201 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(9):checked) tbody > tr:is(:nth-child(-n + 200 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 226 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(10):checked) tbody > tr:is(:nth-child(-n + 225 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 251 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(11):checked) tbody > tr:is(:nth-child(-n + 250 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 276 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(12):checked) tbody > tr:is(:nth-child(-n + 275 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 301 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(13):checked) tbody > tr:is(:nth-child(-n + 300 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 326 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(14):checked) tbody > tr:is(:nth-child(-n + 325 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 351 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="25"]:checked):has(.pg-set--25 > .pg-in:nth-of-type(15):checked) tbody > tr:is(:nth-child(-n + 350 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 376 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(1):checked) tbody > tr:is(:nth-child(n + 31 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(2):checked) tbody > tr:is(:nth-child(-n + 30 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 61 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(3):checked) tbody > tr:is(:nth-child(-n + 60 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 91 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(4):checked) tbody > tr:is(:nth-child(-n + 90 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 121 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(5):checked) tbody > tr:is(:nth-child(-n + 120 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 151 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(6):checked) tbody > tr:is(:nth-child(-n + 150 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 181 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(7):checked) tbody > tr:is(:nth-child(-n + 180 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 211 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(8):checked) tbody > tr:is(:nth-child(-n + 210 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 241 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(9):checked) tbody > tr:is(:nth-child(-n + 240 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 271 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(10):checked) tbody > tr:is(:nth-child(-n + 270 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 301 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(11):checked) tbody > tr:is(:nth-child(-n + 300 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 331 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(12):checked) tbody > tr:is(:nth-child(-n + 330 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 361 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(13):checked) tbody > tr:is(:nth-child(-n + 360 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 391 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(14):checked) tbody > tr:is(:nth-child(-n + 390 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 421 of :not(.fd-after,
.fd-empty-row))),
.pgw:not(:has(.srt-i:checked)):has(.pg-rpp__c option[value="30"]:checked):has(.pg-set--30 > .pg-in:nth-of-type(15):checked) tbody > tr:is(:nth-child(-n + 420 of :not(.fd-after,
.fd-empty-row)),
:nth-child(n + 451 of :not(.fd-after,
.fd-empty-row))) {
  display: none;
}

/* a paged table shows its rows in full: the page size replaces the inner scroll */
.pgw > .s-scroll {
  max-height: none;
}

.pg-prev > .pg-arr,
.pg-next > .pg-arr {
  display: none;
}

.pg-set > .pg-in:nth-of-type(1):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(1),
.pg-set > .pg-in:nth-of-type(2):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(2),
.pg-set > .pg-in:nth-of-type(3):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(3),
.pg-set > .pg-in:nth-of-type(4):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(4),
.pg-set > .pg-in:nth-of-type(5):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(5),
.pg-set > .pg-in:nth-of-type(6):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(6),
.pg-set > .pg-in:nth-of-type(7):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(7),
.pg-set > .pg-in:nth-of-type(8):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(8),
.pg-set > .pg-in:nth-of-type(9):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(9),
.pg-set > .pg-in:nth-of-type(10):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(10),
.pg-set > .pg-in:nth-of-type(11):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(11),
.pg-set > .pg-in:nth-of-type(12):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(12),
.pg-set > .pg-in:nth-of-type(13):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(13),
.pg-set > .pg-in:nth-of-type(14):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(14),
.pg-set > .pg-in:nth-of-type(15):checked ~ :is(.pg-prev,
.pg-next) > :nth-child(15) {
  display: inline-grid;
}

/* one page only (10 rows or fewer): the same pager, shown disabled – it switches on once the list has more than 10 rows */
.pg--off .pg-rpp,
.pg--off .pg-n,
.pg--off .pg-arr {
  opacity: 0.45;
  pointer-events: none;
}

.pg--off .pg-rpp__c {
  cursor: not-allowed;
  background: var(--surface-2);
}

.pg--off .pg-in:checked + .pg-n {
  background: var(--sunken);
  color: var(--ink-2);
}

/* ───────── Dropdowns: designed list instead of the native one (customizable select, Chrome / Edge 135+; other browsers keep their own list) ───────── */
@supports (appearance: base-select) {
  select:not([multiple]),
  select:not([multiple])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]) {
    align-items: center;
  }
  select:not([multiple])::picker-icon {
    display: none;
  }
  ::picker(select) {
    min-width: anchor-size(width);
    max-height: min(320px, 55vh);
    margin-block: 6px;
    padding: 6px;
    border: 0;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgb(20 32 27 / 0.05), 0 18px 40px -12px rgb(20 32 27 / 0.22);
    overflow-y: auto;
    scrollbar-width: thin;
    opacity: 0;
    translate: 0 -4px;
    transition: opacity 160ms var(--ease), translate 160ms var(--ease), display 160ms allow-discrete, overlay 160ms allow-discrete;
  }
  select:open::picker(select) {
    opacity: 1;
    translate: 0 0;
  }
  @starting-style {
    select:open::picker(select) {
      opacity: 0;
      translate: 0 -4px;
    }
  }
  select:not([multiple]) option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms, color 120ms;
  }
  select:not([multiple]) option:hover,
  select:not([multiple]) option:focus-visible {
    outline: none;
    background: var(--surface-2);
    color: var(--ink);
  }
  select:not([multiple]) option:checked {
    background: var(--em-50);
    color: var(--em-800);
    font-weight: 600;
  }
  select:not([multiple]) option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--em-700);
    font-size: 12px;
  }
  select:not([multiple]) option:disabled {
    opacity: 0.45;
    cursor: default;
  }
  select:not([multiple]) optgroup {
    padding-top: 4px;
    color: var(--ink-4);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  @media (prefers-reduced-motion: reduce) {
    ::picker(select) {
      transition: none;
    }
  }
}

/* ───────── Date picker: field + small calendar as wide as the field (no script) ───────── */
.dpk {
  position: relative;
  min-width: 0;
  anchor-scope: --dpk;
}

.dpk-f {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  anchor-name: --dpk;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dpk-f > .icon {
  flex: none;
  color: var(--ink-3);
}

.dpk-f__v,
.dpk-f__ph {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dpk-f__ph {
  color: var(--ink-4);
}

.dpk:has(.dpk-d input:checked) .dpk-f__ph {
  display: none;
}

.dpk:not(:has(.dpk-d input:checked)) .dpk-f__v {
  display: none;
}

.dpk-f__d::before {
  counter-reset: dd var(--dd, 1);
  content: counter(dd);
}

.dpk-f__m::before {
  content: var(--mn, "");
}

.dpk-f__y::before {
  counter-reset: yy var(--yr, 2026);
  content: counter(yy);
}

.dpk-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  width: max(100%, 236px);
  padding: 10px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgb(20 32 27 / 0.05), 0 18px 40px -12px rgb(20 32 27 / 0.24);
  outline: none;
  animation: dpk-in 150ms var(--ease);
}

@supports (anchor-name: --a) {
  .dpk-pop {
    position: fixed;
    top: anchor(--dpk bottom);
    left: anchor(--dpk left);
    width: max(anchor-size(--dpk width), 236px);
    margin-top: 6px;
    position-try-fallbacks: flip-block;
  }
}

@keyframes dpk-in {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
}

/* open while the field or the calendar has focus; picking a day with the mouse closes it */
.dpk:focus-within .dpk-pop {
  display: block;
}

.dpk:has(.dpk-d input:checked:focus:not(:focus-visible)) .dpk-pop {
  display: none;
}

.dpk-h {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.dpk-h select {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.dpk-h .dpk-y {
  flex: 0 0 78px;
}

.dpk-h select:hover {
  box-shadow: inset 0 0 0 1px var(--ink-4);
}

.dpk-h select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--br-500), var(--ring);
}

.dpk-g {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.dpk-w {
  padding: 4px 0 6px;
  color: var(--ink-4);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-align: center;
}

.dpk-d {
  position: relative;
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.dpk-d > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.dpk-d:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.dpk-d:has(input:focus-visible) {
  box-shadow: var(--ring);
}

.dpk-d:has(input:checked) {
  background: var(--em-700);
  color: #fff;
  font-weight: 600;
}

.dpk-d:first-of-type {
  grid-column-start: calc(mod(var(--yo, 0) + var(--mo, 0) + var(--lp, 0) * var(--af, 0), 7) + 1);
}

/* month lengths */
.dpk:has(.dpk-m option:is([value="04"],
[value="06"],
[value="09"],
[value="11"]):checked) .dpk-d:nth-of-type(31),
.dpk:has(.dpk-m option[value="02"]:checked) .dpk-d:nth-of-type(n + 30),
.dpk:has(.dpk-m option[value="02"]:checked):not(:has(.dpk-y option.lp:checked)) .dpk-d:nth-of-type(29) {
  display: none;
}

/* today = business date 22 Oct 2026 */
.dpk:has(.dpk-m option[value="10"]:checked):has(.dpk-y option[value="2026"]:checked) .dpk-d:nth-of-type(22):not(:has(input:checked)) {
  box-shadow: inset 0 0 0 1px var(--br-400);
  color: var(--br-700);
  font-weight: 650;
}

/* date + time (datetime-local) */
.dpk-dt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 8px;
}

/* calendar data: month offset and name, weekday of 1 January and leap year per year, the chosen day */
.dpk:has(.dpk-m option[value="01"]:checked) {
  --mo: 0;
  --af: 0;
  --mn: "Jan";
}

.dpk:has(.dpk-m option[value="02"]:checked) {
  --mo: 3;
  --af: 0;
  --mn: "Feb";
}

.dpk:has(.dpk-m option[value="03"]:checked) {
  --mo: 3;
  --af: 1;
  --mn: "Mar";
}

.dpk:has(.dpk-m option[value="04"]:checked) {
  --mo: 6;
  --af: 1;
  --mn: "Apr";
}

.dpk:has(.dpk-m option[value="05"]:checked) {
  --mo: 1;
  --af: 1;
  --mn: "May";
}

.dpk:has(.dpk-m option[value="06"]:checked) {
  --mo: 4;
  --af: 1;
  --mn: "Jun";
}

.dpk:has(.dpk-m option[value="07"]:checked) {
  --mo: 6;
  --af: 1;
  --mn: "Jul";
}

.dpk:has(.dpk-m option[value="08"]:checked) {
  --mo: 2;
  --af: 1;
  --mn: "Aug";
}

.dpk:has(.dpk-m option[value="09"]:checked) {
  --mo: 5;
  --af: 1;
  --mn: "Sep";
}

.dpk:has(.dpk-m option[value="10"]:checked) {
  --mo: 0;
  --af: 1;
  --mn: "Oct";
}

.dpk:has(.dpk-m option[value="11"]:checked) {
  --mo: 3;
  --af: 1;
  --mn: "Nov";
}

.dpk:has(.dpk-m option[value="12"]:checked) {
  --mo: 5;
  --af: 1;
  --mn: "Dec";
}

.dpk:has(.dpk-y option[value="1940"]:checked) {
  --yo: 0;
  --lp: 1;
  --yr: 1940;
}

.dpk:has(.dpk-y option[value="1941"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 1941;
}

.dpk:has(.dpk-y option[value="1942"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 1942;
}

.dpk:has(.dpk-y option[value="1943"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 1943;
}

.dpk:has(.dpk-y option[value="1944"]:checked) {
  --yo: 5;
  --lp: 1;
  --yr: 1944;
}

.dpk:has(.dpk-y option[value="1945"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 1945;
}

.dpk:has(.dpk-y option[value="1946"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 1946;
}

.dpk:has(.dpk-y option[value="1947"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 1947;
}

.dpk:has(.dpk-y option[value="1948"]:checked) {
  --yo: 3;
  --lp: 1;
  --yr: 1948;
}

.dpk:has(.dpk-y option[value="1949"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 1949;
}

.dpk:has(.dpk-y option[value="1950"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 1950;
}

.dpk:has(.dpk-y option[value="1951"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 1951;
}

.dpk:has(.dpk-y option[value="1952"]:checked) {
  --yo: 1;
  --lp: 1;
  --yr: 1952;
}

.dpk:has(.dpk-y option[value="1953"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 1953;
}

.dpk:has(.dpk-y option[value="1954"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 1954;
}

.dpk:has(.dpk-y option[value="1955"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 1955;
}

.dpk:has(.dpk-y option[value="1956"]:checked) {
  --yo: 6;
  --lp: 1;
  --yr: 1956;
}

.dpk:has(.dpk-y option[value="1957"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 1957;
}

.dpk:has(.dpk-y option[value="1958"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 1958;
}

.dpk:has(.dpk-y option[value="1959"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 1959;
}

.dpk:has(.dpk-y option[value="1960"]:checked) {
  --yo: 4;
  --lp: 1;
  --yr: 1960;
}

.dpk:has(.dpk-y option[value="1961"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 1961;
}

.dpk:has(.dpk-y option[value="1962"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 1962;
}

.dpk:has(.dpk-y option[value="1963"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 1963;
}

.dpk:has(.dpk-y option[value="1964"]:checked) {
  --yo: 2;
  --lp: 1;
  --yr: 1964;
}

.dpk:has(.dpk-y option[value="1965"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 1965;
}

.dpk:has(.dpk-y option[value="1966"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 1966;
}

.dpk:has(.dpk-y option[value="1967"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 1967;
}

.dpk:has(.dpk-y option[value="1968"]:checked) {
  --yo: 0;
  --lp: 1;
  --yr: 1968;
}

.dpk:has(.dpk-y option[value="1969"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 1969;
}

.dpk:has(.dpk-y option[value="1970"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 1970;
}

.dpk:has(.dpk-y option[value="1971"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 1971;
}

.dpk:has(.dpk-y option[value="1972"]:checked) {
  --yo: 5;
  --lp: 1;
  --yr: 1972;
}

.dpk:has(.dpk-y option[value="1973"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 1973;
}

.dpk:has(.dpk-y option[value="1974"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 1974;
}

.dpk:has(.dpk-y option[value="1975"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 1975;
}

.dpk:has(.dpk-y option[value="1976"]:checked) {
  --yo: 3;
  --lp: 1;
  --yr: 1976;
}

.dpk:has(.dpk-y option[value="1977"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 1977;
}

.dpk:has(.dpk-y option[value="1978"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 1978;
}

.dpk:has(.dpk-y option[value="1979"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 1979;
}

.dpk:has(.dpk-y option[value="1980"]:checked) {
  --yo: 1;
  --lp: 1;
  --yr: 1980;
}

.dpk:has(.dpk-y option[value="1981"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 1981;
}

.dpk:has(.dpk-y option[value="1982"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 1982;
}

.dpk:has(.dpk-y option[value="1983"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 1983;
}

.dpk:has(.dpk-y option[value="1984"]:checked) {
  --yo: 6;
  --lp: 1;
  --yr: 1984;
}

.dpk:has(.dpk-y option[value="1985"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 1985;
}

.dpk:has(.dpk-y option[value="1986"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 1986;
}

.dpk:has(.dpk-y option[value="1987"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 1987;
}

.dpk:has(.dpk-y option[value="1988"]:checked) {
  --yo: 4;
  --lp: 1;
  --yr: 1988;
}

.dpk:has(.dpk-y option[value="1989"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 1989;
}

.dpk:has(.dpk-y option[value="1990"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 1990;
}

.dpk:has(.dpk-y option[value="1991"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 1991;
}

.dpk:has(.dpk-y option[value="1992"]:checked) {
  --yo: 2;
  --lp: 1;
  --yr: 1992;
}

.dpk:has(.dpk-y option[value="1993"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 1993;
}

.dpk:has(.dpk-y option[value="1994"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 1994;
}

.dpk:has(.dpk-y option[value="1995"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 1995;
}

.dpk:has(.dpk-y option[value="1996"]:checked) {
  --yo: 0;
  --lp: 1;
  --yr: 1996;
}

.dpk:has(.dpk-y option[value="1997"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 1997;
}

.dpk:has(.dpk-y option[value="1998"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 1998;
}

.dpk:has(.dpk-y option[value="1999"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 1999;
}

.dpk:has(.dpk-y option[value="2000"]:checked) {
  --yo: 5;
  --lp: 1;
  --yr: 2000;
}

.dpk:has(.dpk-y option[value="2001"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 2001;
}

.dpk:has(.dpk-y option[value="2002"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 2002;
}

.dpk:has(.dpk-y option[value="2003"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 2003;
}

.dpk:has(.dpk-y option[value="2004"]:checked) {
  --yo: 3;
  --lp: 1;
  --yr: 2004;
}

.dpk:has(.dpk-y option[value="2005"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 2005;
}

.dpk:has(.dpk-y option[value="2006"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 2006;
}

.dpk:has(.dpk-y option[value="2007"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 2007;
}

.dpk:has(.dpk-y option[value="2008"]:checked) {
  --yo: 1;
  --lp: 1;
  --yr: 2008;
}

.dpk:has(.dpk-y option[value="2009"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 2009;
}

.dpk:has(.dpk-y option[value="2010"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 2010;
}

.dpk:has(.dpk-y option[value="2011"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 2011;
}

.dpk:has(.dpk-y option[value="2012"]:checked) {
  --yo: 6;
  --lp: 1;
  --yr: 2012;
}

.dpk:has(.dpk-y option[value="2013"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 2013;
}

.dpk:has(.dpk-y option[value="2014"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 2014;
}

.dpk:has(.dpk-y option[value="2015"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 2015;
}

.dpk:has(.dpk-y option[value="2016"]:checked) {
  --yo: 4;
  --lp: 1;
  --yr: 2016;
}

.dpk:has(.dpk-y option[value="2017"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 2017;
}

.dpk:has(.dpk-y option[value="2018"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 2018;
}

.dpk:has(.dpk-y option[value="2019"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 2019;
}

.dpk:has(.dpk-y option[value="2020"]:checked) {
  --yo: 2;
  --lp: 1;
  --yr: 2020;
}

.dpk:has(.dpk-y option[value="2021"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 2021;
}

.dpk:has(.dpk-y option[value="2022"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 2022;
}

.dpk:has(.dpk-y option[value="2023"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 2023;
}

.dpk:has(.dpk-y option[value="2024"]:checked) {
  --yo: 0;
  --lp: 1;
  --yr: 2024;
}

.dpk:has(.dpk-y option[value="2025"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 2025;
}

.dpk:has(.dpk-y option[value="2026"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 2026;
}

.dpk:has(.dpk-y option[value="2027"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 2027;
}

.dpk:has(.dpk-y option[value="2028"]:checked) {
  --yo: 5;
  --lp: 1;
  --yr: 2028;
}

.dpk:has(.dpk-y option[value="2029"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 2029;
}

.dpk:has(.dpk-y option[value="2030"]:checked) {
  --yo: 1;
  --lp: 0;
  --yr: 2030;
}

.dpk:has(.dpk-y option[value="2031"]:checked) {
  --yo: 2;
  --lp: 0;
  --yr: 2031;
}

.dpk:has(.dpk-y option[value="2032"]:checked) {
  --yo: 3;
  --lp: 1;
  --yr: 2032;
}

.dpk:has(.dpk-y option[value="2033"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 2033;
}

.dpk:has(.dpk-y option[value="2034"]:checked) {
  --yo: 6;
  --lp: 0;
  --yr: 2034;
}

.dpk:has(.dpk-y option[value="2035"]:checked) {
  --yo: 0;
  --lp: 0;
  --yr: 2035;
}

.dpk:has(.dpk-y option[value="2036"]:checked) {
  --yo: 1;
  --lp: 1;
  --yr: 2036;
}

.dpk:has(.dpk-y option[value="2037"]:checked) {
  --yo: 3;
  --lp: 0;
  --yr: 2037;
}

.dpk:has(.dpk-y option[value="2038"]:checked) {
  --yo: 4;
  --lp: 0;
  --yr: 2038;
}

.dpk:has(.dpk-y option[value="2039"]:checked) {
  --yo: 5;
  --lp: 0;
  --yr: 2039;
}

.dpk:has(.dpk-y option[value="2040"]:checked) {
  --yo: 6;
  --lp: 1;
  --yr: 2040;
}

.dpk:has(.dpk-d:nth-of-type(1) input:checked) {
  --dd: 1;
}

.dpk:has(.dpk-d:nth-of-type(2) input:checked) {
  --dd: 2;
}

.dpk:has(.dpk-d:nth-of-type(3) input:checked) {
  --dd: 3;
}

.dpk:has(.dpk-d:nth-of-type(4) input:checked) {
  --dd: 4;
}

.dpk:has(.dpk-d:nth-of-type(5) input:checked) {
  --dd: 5;
}

.dpk:has(.dpk-d:nth-of-type(6) input:checked) {
  --dd: 6;
}

.dpk:has(.dpk-d:nth-of-type(7) input:checked) {
  --dd: 7;
}

.dpk:has(.dpk-d:nth-of-type(8) input:checked) {
  --dd: 8;
}

.dpk:has(.dpk-d:nth-of-type(9) input:checked) {
  --dd: 9;
}

.dpk:has(.dpk-d:nth-of-type(10) input:checked) {
  --dd: 10;
}

.dpk:has(.dpk-d:nth-of-type(11) input:checked) {
  --dd: 11;
}

.dpk:has(.dpk-d:nth-of-type(12) input:checked) {
  --dd: 12;
}

.dpk:has(.dpk-d:nth-of-type(13) input:checked) {
  --dd: 13;
}

.dpk:has(.dpk-d:nth-of-type(14) input:checked) {
  --dd: 14;
}

.dpk:has(.dpk-d:nth-of-type(15) input:checked) {
  --dd: 15;
}

.dpk:has(.dpk-d:nth-of-type(16) input:checked) {
  --dd: 16;
}

.dpk:has(.dpk-d:nth-of-type(17) input:checked) {
  --dd: 17;
}

.dpk:has(.dpk-d:nth-of-type(18) input:checked) {
  --dd: 18;
}

.dpk:has(.dpk-d:nth-of-type(19) input:checked) {
  --dd: 19;
}

.dpk:has(.dpk-d:nth-of-type(20) input:checked) {
  --dd: 20;
}

.dpk:has(.dpk-d:nth-of-type(21) input:checked) {
  --dd: 21;
}

.dpk:has(.dpk-d:nth-of-type(22) input:checked) {
  --dd: 22;
}

.dpk:has(.dpk-d:nth-of-type(23) input:checked) {
  --dd: 23;
}

.dpk:has(.dpk-d:nth-of-type(24) input:checked) {
  --dd: 24;
}

.dpk:has(.dpk-d:nth-of-type(25) input:checked) {
  --dd: 25;
}

.dpk:has(.dpk-d:nth-of-type(26) input:checked) {
  --dd: 26;
}

.dpk:has(.dpk-d:nth-of-type(27) input:checked) {
  --dd: 27;
}

.dpk:has(.dpk-d:nth-of-type(28) input:checked) {
  --dd: 28;
}

.dpk:has(.dpk-d:nth-of-type(29) input:checked) {
  --dd: 29;
}

.dpk:has(.dpk-d:nth-of-type(30) input:checked) {
  --dd: 30;
}

.dpk:has(.dpk-d:nth-of-type(31) input:checked) {
  --dd: 31;
}

/* ───────── White page: panels inside a card are white with their fine outline instead of a filled tint;
   header / footer strips, segmented tracks and read-only fields keep the faint cool tint ───────── */
:is(.hs-tile,
.hs-row,
.na-ok,
.na-bad,
.na-warn,
.na-off,
.na-lock,
.s-note,
.s-empty,
.lb-item,
.fd-display,
.fds-top__stats,
.lk-ooo,
.bk-money,
.cx-quote,
.rs10-gnote,
.ar,
.fo-wl,
.reg-form3,
.inv-irn,
.rs15-drop,
.fd-steps-list li,
.fd-people li,
.meal-chips li) {
  background-color: var(--surface);
}

:is(.hs-tile,
.hs-row,
.lb-item,
.na-ok,
.na-bad,
.na-warn,
.na-off,
.na-lock):hover {
  background-color: var(--surface-2);
}

/* ───────── Listing tables: breathing room – rows felt squeezed ───────── */
.dt__table {
  font-size: 13.5px;
}

.dt__table th {
  padding: 12px 14px;
}

.dt__td {
  padding: 14px 14px;
  line-height: 1.5;
}

.dt__td .fd-sub {
  margin-top: 3px;
  line-height: 1.45;
}

.dt__td :is(.pill,
.rb-c,
.fd-flag,
.code-chip,
.ltabs__n,
.btn) {
  white-space: nowrap;
}

/* tables with many columns keep slightly tighter sides (never the old 9 px rows), and their one-line cells may wrap at a space so the table fits */
.dt__table:has(thead th:nth-child(8)) th,
.dt__table:has(thead th:nth-child(8)) .dt__td {
  padding-inline: 12px;
}

.dt__table:has(thead th:nth-child(8)) .dt__td.nw {
  white-space: normal;
  text-wrap: balance;
}

.dt__table:has(thead th:nth-child(9)) .dt__td {
  font-size: 13px;
}

.dt--compact .dt__td {
  padding-block: 10px;
}

.dt--compact th {
  padding-block: 10px;
}

/* ───────── Stat tiles (shared by every module; moved from fd.css) ───────── */
.st-tiles {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.st-tiles[data-n="4"] {
  --n: 4;
}

.st-tiles[data-n="5"] {
  --n: 5;
}

.st-tiles[data-n="6"] {
  --n: 6;
}

.st-tiles[data-n="8"] {
  --n: 4;
}

.st-tile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-1);
}

.st-tile__ic {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--sunken);
  color: var(--ink-2);
}

.st-tile--good .st-tile__ic {
  background: var(--ok-bg);
  color: var(--st-ready);
}

.st-tile--warn .st-tile__ic {
  background: var(--warn-bg);
  color: var(--st-dirty);
}

.st-tile--bad .st-tile__ic {
  background: var(--bad-bg);
  color: var(--st-cancelled);
}

.st-tile__l {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.st-tile__v {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.st-tile__n {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

.st-tile--good .st-tile__n {
  color: var(--st-ready);
}

.st-tile--warn .st-tile__n {
  color: var(--st-dirty);
}

.st-tile--bad .st-tile__n {
  color: var(--st-cancelled);
}

.st-tile__u {
  overflow: hidden;
  color: var(--ink-4);
  font-size: 11.5px;
  font-weight: 500;
  text-overflow: ellipsis;
}

@media (max-width: 1240px) {
  .st-tiles[data-n="5"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .st-tiles[data-n="5"] > .st-tile {
    grid-column: span 2;
  }
  .st-tiles[data-n="5"] > .st-tile:nth-child(-n + 2) {
    grid-column: span 3;
  }
  .st-tiles[data-n="6"] {
    --n: 3;
  }
}

@media (max-width: 720px) {
  .st-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-tiles > .st-tile,
  .st-tiles > .st-tile:nth-child(-n + 2) {
    grid-column: auto;
  }
}

/* stat tiles on every screen (kpis() / dkpis() now render them): layouts for 2, 3, 6 and 7 tiles, tiles that are links */
.st-tiles[data-n="1"] {
  --n: 3;
}

.st-tiles[data-n="2"] {
  --n: 2;
}

.st-tiles[data-n="3"] {
  --n: 3;
}

.st-tiles[data-n="6"] {
  --n: 3;
}

/* seven figures (RS-01, FD-01) read as one ribbon: one card, seven equal segments split by hairlines,
   icon and label on top, the figure below; long labels wrap instead of being cut */
.st-tiles[data-n="7"] {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  padding: 6px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(16 24 40 / 0.04), 0 12px 28px -24px rgb(16 24 40 / 0.4);
}

.st-tiles[data-n="7"] > .st-tile {
  position: relative;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.st-tiles[data-n="7"] > .st-tile + .st-tile::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 1px;
  background: var(--line);
}

.st-tiles[data-n="7"] > .st-tile .st-tile__ic {
  grid-row: 1;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.st-tiles[data-n="7"] > .st-tile .st-tile__ic .icon {
  width: 15px;
  height: 15px;
}

.st-tiles[data-n="7"] > .st-tile .st-tile__l {
  grid-row: 1;
  white-space: normal;
  line-height: 1.25;
}

.st-tiles[data-n="7"] > .st-tile .st-tile__v {
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: wrap;
  row-gap: 2px;
}

.st-tiles[data-n="7"] > .st-tile .st-tile__n {
  font-size: 24px;
  line-height: 1.1;
}

.st-tiles[data-n="7"] > .st-tile .st-tile__u {
  flex-basis: 100%;
}

.st-tiles[data-n="7"] > a.st-tile:hover {
  translate: none;
  background: var(--surface-2);
  box-shadow: none;
}

@media (max-width: 1100px) {
  .st-tiles[data-n="7"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 6px;
  }

  .st-tiles[data-n="7"] > .st-tile:nth-child(5)::before {
    display: none;
  }
}

a.st-tile {
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--t-fast), translate var(--t-fast);
}

a.st-tile:hover {
  translate: 0 -1px;
  box-shadow: 0 0 0 1px var(--line-strong), var(--sh-2);
}

a.st-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--br-500), var(--ring);
}

@media (max-width: 1240px) {
  .st-tiles[data-n="6"] {
    --n: 3;
  }
}

/* ───────── File pickers: designed button instead of the native "Choose File" ───────── */
input[type="file"] {
  max-width: 100%;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  height: 34px;
  margin-right: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow var(--t-fast), color var(--t-fast);
}

input[type="file"]:hover::file-selector-button {
  box-shadow: inset 0 0 0 1px var(--em-600);
  color: var(--em-800);
}

input[type="file"].field__input {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 44px;
  padding: 4px 6px;
}

/* print papers with row labels (registration card …): fixed shares – labels about a fifth, values the rest – so labels never collapse over the values */
.paper table:has(tbody th) {
  table-layout: fixed;
}

.paper table:has(tbody th) tbody th {
  width: 24%;
  padding-right: 8px;
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  vertical-align: top;
}

.paper table:has(tbody th) tbody td {
  overflow-wrap: break-word;
}

/* ───────── Greeting bar (FD-01, RS-01): compact, one row ───────── */
.fd-hello2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--em-50) 0%, var(--surface) 46%);
  box-shadow: 0 0 0 1px var(--line), var(--sh-1);
}

.fd-hello2__ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--em-100);
  color: var(--br-600);
}

.fd-hello2__t {
  flex: 1 1 auto;
  min-width: 0;
}

.fd-hello2__t h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.fd-hello2__t p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: 12.5px;
}

.fd-hello2__t p .icon {
  color: var(--em-600);
}

.fd-hello2__dot {
  width: 3px;
  height: 3px;
  margin: 0 4px;
  border-radius: 50%;
  background: var(--ink-4);
}

.fd-hello2 > .code-chip {
  align-self: center;
}

.fd-hello2__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.fd-hello2__acts .btn {
  height: 36px;
  padding: 0 11px;
  gap: 6px;
  font-size: 12.5px;
}

.fd-hello2__t h1 .code-chip {
  margin-left: 6px;
  vertical-align: 3px;
}

/* tables in narrow cards: their one-line cells and headers may wrap, sides a little slimmer – the table fits the card instead of scrolling sideways */
.s-scroll {
  container-type: inline-size;
}

@container (max-width: 780px) {
  .dt__table th,
  .dt__table .dt__td.nw {
    white-space: normal;
  }
  .dt__table th,
  .dt__table .dt__td {
    padding-inline: 10px;
  }
  .dt__table th:first-child,
  .dt__table .dt__td:first-child {
    padding-left: 16px;
  }
  .dt__table th:last-child,
  .dt__table .dt__td:last-child {
    padding-right: 16px;
  }
}

/* very wide tables (10+ columns) */
.dt__table:has(thead th:nth-child(10)) th,
.dt__table:has(thead th:nth-child(10)) .dt__td {
  padding-inline: 9px;
}

.dt__table:has(thead th:nth-child(10)) th {
  white-space: normal;
}

/* ───────── Listing tables: readability – cells with sub-lines looked ragged ───────── */
/* rows with sub-lines read from one top line across (name, time, amount, status side by side); one-line rows stay centred */
.dt__table tbody tr:has(.fd-sub,
.fd-tags,
.fd-wins) > .dt__td {
  vertical-align: top;
}

.dt__table tbody tr:has(.fd-sub,
.fd-tags,
.fd-wins) > .dt__td:has(> .fd-sel) {
  padding-top: 16px;
}

.dt__td .fd-sub {
  margin-top: 4px;
}

/* chips under a name (tier, nationality, group, status) sit on a tidy wrapped row with even gaps */
.dt__td .fd-sub:has(> .pill,
> .fd-flag) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.fd-tags:empty {
  display: none;
}

/* balance windows: label / amount pairs on their own lines, a figure is never broken */
.fd-wins {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  gap: 3px 10px;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.fd-wins > span {
  color: var(--ink-4);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-align: right;
}

.dt__td.num {
  white-space: nowrap;
}

/* ───────── Action cells: buttons in a table cell never touch and sit on one line ───────── */
.dt__td .fo-act,
.fo-act {
  gap: 6px;
  vertical-align: middle;
}

.dt__td > :is(.btn,
.fo-act,
.stack,
.row) {
  vertical-align: middle;
}

.dt__td > .btn + :is(.btn,
.fo-act),
.dt__td > .fo-act + .btn,
.dt__td > .fo-act + .fo-act {
  margin-left: 4px;
}

/* a cell with several buttons keeps them on one line (wide tables let one-line cells wrap, which stacked the buttons with no gap) */
.dt__table .dt__td:has(> .btn + .btn),
.dt__table .dt__td:has(> .btn + .fo-act) {
  white-space: nowrap;
}

/* a narrow action group may wrap, never touching */
.dt__td .fo-act {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* chips and pills written next to each other always keep a small gap, also when they wrap */
.pill + .pill,
.fd-flag + .fd-flag {
  margin-left: 4px;
}

.fd-flags > .fd-flag + .fd-flag,
:is(.fd-tags,
.fd-sub,
.row,
.stack,
.fo-title) > .pill + .pill {
  margin-left: 0;
}

.dt__td :is(.pill,
.fd-flag) {
  margin-block: 2px;
}

/* blocks stacked in a plain wrapper (night audit console, card batch step, …) keep the page rhythm */
main div:not([class]) > :is(section,
.card,
.fd-sec,
.fd-banner,
.na-start,
.fd-qa,
.s-note,
.s-scroll,
.arr-deck,
.st-tiles,
.s-toolbar,
.fd-grid2,
form) + :is(section,
.card,
.fd-sec,
.fd-banner,
.na-start,
.fd-qa,
.s-note,
.s-scroll,
.arr-deck,
.st-tiles,
.s-toolbar,
.fd-grid2,
form) {
  margin-top: 16px;
}

.dt__td .stack:has(> .btn),
.dt__td .row:has(> .btn) {
  gap: 6px;
}

.dt__td .stack:has(> .fo-act) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* ───────── Banner with an action + banner above a paged table ───────── */
.fd-banner > .fd-banner__t {
  flex: 1 1 auto;
  min-width: 0;
}

.fd-banner > :is(.btn,
a.btn,
button.btn) {
  flex: none;
  align-self: center;
  margin-left: auto;
}

/* a table (wrapped in .pgw / .dt) right under a banner, note or card keeps the page rhythm */
:is(.fd-banner,
.s-note,
.na-start,
.na-stepper,
.card,
.fd-sec,
.fd-qa) + :is(.pgw,
.dt,
.s-scroll) {
  margin-top: 16px;
}

/* a banner followed by any block of a plain wrapper */
main div:not([class]) > .fd-banner + :is(.pgw,
.dt) {
  margin-top: 16px;
}

:is(.pgw,
.dt) + :is(.fd-banner,
.s-note,
.na-start,
.card,
.fd-sec,
.fd-qa) {
  margin-top: 16px;
}

/* ───────── Action cells and header actions ───────── */
/* tables with 8+ columns let one-line cells wrap – never the buttons: they stay on one line with an even gap */
.dt__table td.dt__td.dt__td:has(> .btn,
> .fo-act,
> .stack) {
  white-space: nowrap !important;
}

/* the space character between two buttons adds ~4 px */
.dt__table td.dt__td > .btn + .btn {
  margin-left: 4px;
}

/* the two / three buttons of a record (RS-02 header) */
.va-act {
  align-items: center;
  gap: 8px;
}

/* sections, cards and banners stacked above the form footer or above any block of a plain wrapper */
:is(section,
.card,
.fd-sec,
.fd-banner,
.na-start,
.s-note) + .fd-formfoot {
  margin-top: 16px;
}

main div:not([class]) > .fd-banner + :not(.modal,
.toast,
script,
style,
template),
main div:not([class]) > :not(.modal,
.toast,
script,
style,
template,
.fd-banner) + .fd-banner {
  margin-top: 16px;
}

/* a cell that holds only buttons: the gap is the same 6 px whether or not there is whitespace between two of them */
.dt__table td.dt__td:has(> .btn + .btn):not(:has(> :not(.btn,
.fo-act))) {
  font-size: 0;
}

.dt__table td.dt__td:has(> .btn + .btn):not(:has(> :not(.btn,
.fo-act))) > .btn {
  font-size: 13px;
}

.dt__table td.dt__td:has(> .btn + .btn):not(:has(> :not(.btn,
.fo-act))) > .btn + .btn {
  margin-left: 6px;
}

/* icon-only action buttons (call / card / print …) sit side by side, never one below the other */
.dt__td .fo-act:has(> .btn--ghost) {
  flex-wrap: nowrap;
}

/* ───────── Callouts: banners, notes, warning lists and check cards ─────────
   One look everywhere: a soft tinted card, an icon in a rounded badge, the title in ink and the action links in the tone.
   --tone is the status colour; the doubled selectors outrank the older module rules in fd.css. */
.fd-banner,
.s-note.s-note--warn,
.s-note.na-note,
.fds-warn > li,
.hks-check {
  --tone: #2b6cb0;
  --tone-ink: #1d3f6e;
}

.fd-banner.fd-banner--warn,
.s-note.s-note--warn,
.s-note.na-note--warn,
.fds-warn > li {
  --tone: #b7791f;
  --tone-ink: #74500f;
}

.fd-banner.fd-banner--bad,
.s-note.na-note--bad,
.hks-check.hks-check--fail {
  --tone: #c53030;
  --tone-ink: #8f2a25;
}

.fd-banner.fd-banner--ok,
.s-note.na-note--ok,
.hks-check.hks-check--ok {
  --tone: #2f855a;
  --tone-ink: #1d5c3c;
}

.s-note.na-note--lock {
  --tone: #718096;
  --tone-ink: #4a5568;
}

/* the card: white, a tone accent bar on the left, a soft wash of the tone behind the icon, a hairline border */
.fd-banner,
.fd-banner.fd-banner--warn,
.fd-banner.fd-banner--bad,
.fd-banner.fd-banner--ok,
.fd-banner.fd-banner--info,
.s-note.s-note--warn,
.s-note.na-note {
  position: relative;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 18px;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tone) 9%, transparent) 0, transparent 42%),
    radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--tone) 5%, transparent), transparent 60%),
    linear-gradient(var(--surface), var(--surface));
  box-shadow:
    inset 4px 0 0 var(--tone),
    inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, var(--line)),
    0 1px 2px rgb(16 24 40 / 0.04),
    0 12px 26px -20px color-mix(in srgb, var(--tone) 70%, transparent);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

/* the icon: a filled swatch in the tone with a white icon (same as the room-status swatches) */
.fd-banner > .icon,
.s-note.s-note--warn > .icon,
.s-note.na-note > .icon {
  flex: none;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 9px;
  border-radius: 11px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 78%, #fff), var(--tone));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 6px 14px -6px var(--tone);
  color: #fff;
}

.fd-banner__t strong,
.s-note.s-note--warn strong,
.s-note.na-note strong {
  color: var(--ink);
  font-weight: 650;
}

.fd-banner a:not(.btn),
.s-note.s-note--warn a:not(.btn),
.s-note.na-note a:not(.btn) {
  color: var(--tone-ink);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tone) 40%, transparent);
  text-underline-offset: 3px;
}

/* warning lists (setup homes) and go-live checks: white rows with a status badge */
.fds-warn > li,
.hks-check,
.hks-check.hks-check--fail,
.hks-check.hks-check--ok {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone) 7%, transparent), transparent 60%),
    linear-gradient(var(--surface), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 20%, var(--line));
  font-size: 12.5px;
}

.hks-check .hks-check__i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 13%, var(--surface));
  color: var(--tone);
}

.hks-check .hks-check__t strong,
.hks-check .hks-check__t > :first-child {
  color: var(--ink);
}

.hks-check .hks-check__links .fd-link,
.fds-warn > li .fd-link {
  color: var(--tone-ink);
  font-weight: 650;
}

.fds-warn > li {
  grid-template-columns: minmax(0, 1fr);
}

.fds-warn > li .fds-w__t {
  color: var(--ink);
}

.fds-warn > li .fds-w__t .icon {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin-top: -3px;
  padding: 5px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tone) 13%, var(--surface));
  color: var(--tone);
}

.fds-warn > li .fd-link {
  padding-left: 34px;
}

/* ───────── Tables that fit on one line (.dt--hug) ─────────
   Columns keep the normal auto layout, so the width left over is shared out in proportion to what each
   column holds – every table gets its own spacing and no blank band is left on the right. A last column
   that only holds row buttons shrinks to them and sits on the right edge. */
.dt__table.dt--hug :is(th, td) {
  padding-inline: 16px;
  white-space: nowrap;
}

.dt__table.dt--hug :is(th, td):first-child {
  padding-left: 22px;
}

.dt__table.dt--hug :is(th, td):last-child {
  padding-right: 22px;
}

.dt__table.dt--hug th:last-child:empty,
.dt__table.dt--hug td:last-child:has(> :is(.btn, .fd-row-acts, .row-acts)) {
  width: 1%;
  text-align: right;
}

.dt__table.dt--hug td:last-child:has(> :is(.fd-row-acts, .row-acts)) > * {
  justify-content: flex-end;
}

.modal--full .modal__body {
  container-type: inline-size;
}

/* ───────── Full-screen pop-up forms: fields first, then choices, then an "Options" panel of switches ─────────
   Inputs and selects sit in a compact grid (no boxes around them); checkbox / radio groups take a full row
   (their option tiles are styled in choices.css); every switch is gathered under an "Options" heading as a
   row of compact switch cards. CSS order regroups them, so no tall half-empty tiles are left. */
.modal--full .modal__body .s-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  grid-auto-flow: row;
  align-items: start;
  gap: 18px 20px;
}

.modal--full .modal__body .s-grid2 > * {
  order: 2;
  min-width: 0;
  margin: 0;
}

/* 1 · fields */
.modal--full .modal__body .s-grid2 > .field:not(.field--toggle, .fd-fieldset) {
  order: 1;
}

.modal--full .modal__body .s-grid2 > :is(.field--wide, .field:has(textarea), .fd-fieldset),
.modal--full .modal__body .s-grid2 > :not(.field, .fd-fieldset) {
  grid-column: 1 / -1;
}

.modal--full .modal__body .s-grid2 .field__input:is([type="number"], [type="time"], [type="date"]) {
  max-width: 180px;
}

/* 2 · choice groups and anything else, each on its own row under a hairline */
.modal--full .modal__body .s-grid2 > .fd-fieldset {
  padding: 18px 0 0;
  box-shadow: inset 0 1px 0 var(--line-2);
}

.modal--full .modal__body .s-grid2 > .fd-fieldset > legend {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
}

.modal--full .modal__body .s-grid2 > .fd-fieldset > legend + * {
  clear: both;
}

/* 3 · options: heading, then the switches */
.modal--full .modal__body .s-grid2:has(> .field--toggle)::before {
  content: "Options";
  order: 3;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 18px;
  box-shadow: inset 0 1px 0 var(--line-2);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal--full .modal__body .s-grid2 > .field--toggle {
  order: 4;
  align-self: stretch;
  justify-content: center;
  gap: 4px;
  margin-top: -8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background var(--t-fast), box-shadow var(--t-fast);
}

.modal--full .modal__body .s-grid2 > .field--toggle:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.modal--full .modal__body .s-grid2 > .field--toggle:focus-within {
  box-shadow: inset 0 0 0 1px var(--em-600), 0 0 0 3px rgb(200 169 106 / 0.22);
}

.modal--full .modal__body .s-grid2 > .field--toggle .sw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  color: var(--ink-2);
  font-weight: 600;
}

.modal--full .modal__body .s-grid2 > .field--toggle .sw__track {
  order: 2;
  margin-left: auto;
}

.modal--full .modal__body .s-grid2 > .field--toggle:has(.sw input:checked) {
  background: color-mix(in srgb, var(--em-600) 6%, var(--surface));
  box-shadow: inset 3px 0 0 var(--em-600), inset 0 0 0 1px color-mix(in srgb, var(--em-600) 24%, var(--line));
}

.modal--full .modal__body .s-grid2 > .field--toggle:has(.sw input:checked) .sw {
  color: var(--ink);
}

.modal--full .modal__body .s-grid2 > .field--toggle .field__hint {
  margin: 0;
}

/* ───────── Full-screen pop-up forms: the form is a card on a soft sheet ─────────
   The header stays on top and the fields sit in one card with the buttons as its foot (sticky on long
   forms), so a short form ends where its fields end instead of leaving an empty white sheet. */
.modal--full .modal__box {
  overflow-y: auto;
  background: var(--surface-2);
}

.modal--full .modal__head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-inline: max(var(--gutter), calc((100% - 1180px) / 2));
}

.modal--full .modal__close {
  margin-left: auto;
}

.modal--full .modal__body {
  flex: none;
  overflow: visible;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1180px;
  margin: 22px auto 0;
  padding: 24px;
  border-radius: 16px 16px 0 0;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -30px rgb(16 24 40 / 0.35);
}

.modal--full .modal__body:last-child {
  margin-bottom: 28px;
  border-radius: 16px;
}

.modal--full .modal__foot {
  position: sticky;
  bottom: 0;
  z-index: 3;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1180px;
  margin: 0 auto 28px;
  padding: 14px 24px;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 0 0 1px var(--line), 0 -10px 24px -22px rgb(16 24 40 / 0.4);
}

.modal--full .modal__foot > .btn.fd-spacer {
  flex: 0 0 auto;
  margin-right: auto;
}

/* ───────── Housekeeping room-status colours: one colour and one icon per status (user 2026-10-28) ─────────
   VC green check-circle · VI teal shield-check · VD orange broom · OC blue bed · OD magenta refresh ·
   OI indigo clipboard-check · PU gold sparkles · OOO red wrench · OOS grey pause.
   A status marker carries hk--<code>; the rules below colour it on every screen that shows room statuses. */
:root {
  --hk-vc: #2F855A;
  --hk-vi: #0F766E;
  --hk-vd: #C05621;
  --hk-oc: #2B6CB0;
  --hk-od: #B83280;
  --hk-oi: #5B4BC4;
  --hk-pu: #B7791F;
  --hk-ooo: #C53030;
  --hk-oos: #718096;
}

.hk--vc { --hk: var(--hk-vc); }
.hk--vi { --hk: var(--hk-vi); }
.hk--vd { --hk: var(--hk-vd); }
.hk--oc { --hk: var(--hk-oc); }
.hk--od { --hk: var(--hk-od); }
.hk--oi { --hk: var(--hk-oi); }
.hk--pu { --hk: var(--hk-pu); }
.hk--ooo { --hk: var(--hk-ooo); }
.hk--oos { --hk: var(--hk-oos); }

/* the status icon is always a filled swatch: a small rounded square in the status colour, white icon */
:is(.pill.hk-pill, .rb-c, .rrow__s, .hs-tile .hs-ic)[class*="hk--"] > .icon,
.hs-tile.hs-tile[class*="hk--"] .hs-ic {
  background: linear-gradient(145deg, color-mix(in srgb, var(--hk) 80%, #fff), var(--hk));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 3px 8px -4px var(--hk);
  color: #fff;
}

/* status pills (legends, FDS-02 list, room detail, check-in, reports) */
.pill.hk-pill {
  gap: 7px;
  height: auto;
  min-height: 26px;
  padding: 3px 10px 3px 3px;
  background: color-mix(in srgb, var(--hk) 10%, var(--surface));
  color: color-mix(in srgb, var(--hk) 82%, #000);
}

.pill.hk-pill > .icon {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 6px;
}

/* FD-06 room board: code badge with its swatch, the tile's top stripe and its vacant-room icon */
.rb-c[class*="hk--"] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 0 5px 0 2px;
  background: color-mix(in srgb, var(--hk) 11%, var(--surface));
  color: color-mix(in srgb, var(--hk) 88%, #000);
}

.rb-c[class*="hk--"] > .icon {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 5px;
}

/* tiles with several badges: the status badge drops its code and keeps only the swatch, so the room type stays visible */
.rb-r__c:has(> .rb-c:nth-child(3)) > .rb-c[class*="hk--"] {
  min-width: 0;
  padding: 0 2px;
  font-size: 0;
}

.rb-r[class*="hk--"] {
  --k: var(--hk);
}

.rb-r[class*="hk--"] .rb-r__av--ic {
  background: linear-gradient(145deg, color-mix(in srgb, var(--hk) 80%, #fff), var(--hk));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 3px 8px -4px var(--hk);
  color: #fff;
}

/* FD-32 house status: the out-of-order and out-of-service tiles */
.hs-tile[class*="hk--"] {
  --hs: var(--hk);
  --hs-bg: color-mix(in srgb, var(--hk) 12%, var(--surface));
}

/* RS-09 room assignment: the readiness label of each room row, led by its status swatch */
.rrow__s.rrow__s[class*="hk--"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--hk) 88%, #000);
}

.rrow__s[class*="hk--"] > .icon {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 5px;
}

/* FD room chips (.fd-rm, room number coloured by its status, 40+ pages): status colour and a filled status icon
   drawn in CSS – the icon is a white line icon (same shapes as the sprite) on a swatch in the status colour */
.fd-rm.fd-rm--VC {
  --rmc: var(--hk-vc);
  --rmi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='m8.5%2012.5%202.5%202.5%204.5-5'/%3E%3C/svg%3E");
}

.fd-rm.fd-rm--VI {
  --rmc: var(--hk-vi);
  --rmi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpath%20d='m9%2012%202%202%204-4'/%3E%3C/svg%3E");
}

.fd-rm.fd-rm--VD {
  --rmc: var(--hk-vd);
  --rmi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19.5%203%2013%209.5'/%3E%3Cpath%20d='m13%209.5%201.5%201.5L10%2017l-6%203%203-6z'/%3E%3Cpath%20d='M8.5%2015.5l1.5%201.5'/%3E%3C/svg%3E");
}

.fd-rm.fd-rm--OC {
  --rmc: var(--hk-oc);
  --rmi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%204v16M2%208h18a2%202%200%200%201%202%202v10M2%2017h20M6%208v9'/%3E%3C/svg%3E");
}

.fd-rm.fd-rm--OD {
  --rmc: var(--hk-od);
  --rmi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a9%209%200%200%201-15.5%206.2L3%2016M3%2012a9%209%200%200%201%2015.5-6.2L21%208M21%203v5h-5M3%2021v-5h5'/%3E%3C/svg%3E");
}

.fd-rm.fd-rm--OI {
  --rmc: var(--hk-oi);
  --rmi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='8'%20y='2'%20width='8'%20height='4'%20rx='1'/%3E%3Cpath%20d='M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2'/%3E%3Cpath%20d='m9%2014%202%202%204-4'/%3E%3C/svg%3E");
}

.fd-rm.fd-rm--PU {
  --rmc: var(--hk-pu);
  --rmi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%203%201.9%205.1L19%2010l-5.1%201.9L12%2017l-1.9-5.1L5%2010l5.1-1.9zM19%2015l.8%202.2L22%2018l-2.2.8L19%2021l-.8-2.200L16%2018l2.2-.8z'/%3E%3C/svg%3E");
}

.fd-rm.fd-rm--OOO {
  --rmc: var(--hk-ooo);
  --rmi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z'/%3E%3C/svg%3E");
}

.fd-rm.fd-rm--OOS {
  --rmc: var(--hk-oos);
  --rmi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='6'%20y='4'%20width='4'%20height='16'/%3E%3Crect%20x='14'%20y='4'%20width='4'%20height='16'/%3E%3C/svg%3E");
}

.fd-rm:is(.fd-rm--VC, .fd-rm--VI, .fd-rm--VD, .fd-rm--OC, .fd-rm--OD, .fd-rm--OI, .fd-rm--PU, .fd-rm--OOO, .fd-rm--OOS) {
  padding-left: 4px;
  background: color-mix(in srgb, var(--rmc) 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rmc) 30%, transparent);
  color: color-mix(in srgb, var(--rmc) 82%, #000);
}

.fd-rm:is(.fd-rm--VC, .fd-rm--VI, .fd-rm--VD, .fd-rm--OC, .fd-rm--OD, .fd-rm--OI, .fd-rm--PU, .fd-rm--OOO, .fd-rm--OOS)::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background:
    var(--rmi) center / 12px 12px no-repeat,
    linear-gradient(145deg, color-mix(in srgb, var(--rmc) 80%, #fff), var(--rmc));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 2px 6px -3px var(--rmc);
}

.fd-rm.fd-rm--OD::after {
  display: none;
}

.fd-rms > .fd-rm:is(.fd-rm--VC, .fd-rm--VI, .fd-rm--VD, .fd-rm--OC, .fd-rm--OD, .fd-rm--OI, .fd-rm--PU, .fd-rm--OOO, .fd-rm--OOS)::before {
  width: 16px;
  height: 16px;
  background-size: 11px 11px, auto;
}

/* status figure tiles and legend rows (HK-01 tiles, FD-01 room status rows): the icon box is a filled status swatch */
:is(.hkx-tile, .rs-leg)[class*="hk--"] :is(.hkx-tile__ic, .rs-leg__ic) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--hk) 80%, #fff), var(--hk));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 4px 10px -5px var(--hk);
  color: #fff;
}

/* ───────── Small inline warnings and the log-book handover banner, in the callout look ─────────
   HKS-01 step cards (.hks-card__warn): a compact chip with a filled swatch; FD-27 .lb-alert: white card,
   tone accent bar, filled swatch, the title in ink. */
.sh__layout .hks-card .hks-card__warn,
.hks-card .hks-card__warn {
  --tone: #b7791f;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 10px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tone) 8%, transparent), transparent 70%),
    var(--surface);
  box-shadow: inset 3px 0 0 var(--tone), inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, var(--line));
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}

.sh__layout .hks-card.hks-card--missing .hks-card__warn,
.hks-card.hks-card--missing .hks-card__warn {
  --tone: #c53030;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tone) 8%, transparent), transparent 70%),
    var(--surface);
  color: var(--ink-2);
}

.sh__layout .hks-card.hks-card .hks-card__warn > .icon,
.hks-card.hks-card .hks-card__warn > .icon {
  flex: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 4px;
  border-radius: 7px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 78%, #fff), var(--tone));
  box-shadow: 0 3px 8px -4px var(--tone);
  color: #fff;
}

.lb-alert.lb-alert {
  --tone: #b7791f;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, var(--line)), 0 14px 30px -24px color-mix(in srgb, var(--tone) 80%, transparent);
}

.lb-alert.lb-alert .lb-alert__head {
  padding: 14px 16px 14px 20px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tone) 11%, transparent), transparent 55%),
    var(--surface);
  box-shadow: inset 4px 0 0 var(--tone), inset 0 -1px 0 var(--line);
}

.lb-alert.lb-alert .lb-alert__ic {
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 78%, #fff), var(--tone));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 6px 14px -6px var(--tone);
  color: #fff;
}

.lb-alert.lb-alert .lb-alert__t strong {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
}

.lb-alert.lb-alert .lb-alert__t small {
  color: var(--ink-3);
}

/* ───────── Sortable tables (.srt) – no script ─────────
   tools/add-table-sort.py turns a listing table into a grid whose rows share the column tracks (subgrid),
   gives every header a pair of hidden radios (A→Z / Z→A) and every row its rank per column (--k0, --k1 …).
   Clicking a header checks a radio and the rows take that column's rank as their CSS order. While a sort is
   chosen the rows-per-page pager steps aside, so the sort covers every row. */
table.srt {
  display: grid;
  grid-template-columns: var(--srt-cols);
}

table.srt > caption {
  grid-column: 1 / -1;
}

table.srt > :is(thead, tbody, tfoot),
table.srt > :is(thead, tbody, tfoot) > tr {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

table.srt > thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

table.srt > thead th {
  position: static;
  align-content: center;
}

/* grid cells size to their track (the table rules' "width: 1%" for button columns would squeeze them) */
table.srt :is(td, th) {
  width: auto !important;
}

table.srt > :is(tbody, tfoot) > tr > :is(td, th) {
  align-content: center;
}

table.srt > tbody > tr:has(.fd-sub, .fd-tags, .fd-wins) > :is(td, th) {
  align-content: start;
}

table.srt > tbody > tr:last-child > .dt__td {
  border-bottom: 1px solid var(--line-2);
}

table.srt > tbody {
  margin-bottom: -1px;
}

.srt-i {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.srt-l {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
  cursor: pointer;
  user-select: none;
}

/* the arrow sits in the cell padding, so it never widens a column */
.srt-l::after {
  content: "95";
  position: absolute;
  left: calc(100% + 3px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity var(--t-fast);
}

th:hover > .srt-l::after {
  opacity: 0.5;
}

.srt-l--d {
  display: none;
}

th:has(> .srt-i:first-child:checked) > .srt-l--a {
  display: none;
}

th:has(> .srt-i:first-child:checked) > .srt-l--d {
  display: inline-flex;
}

th:has(> .srt-i:checked) {
  color: var(--em-800);
}

th:has(> .srt-i:first-child:checked) > .srt-l::after {
  content: "91";
  opacity: 1;
}

th:has(> .srt-i:nth-child(2):checked) > .srt-l::after {
  content: "93";
  opacity: 1;
}

th:has(> .srt-i:focus-visible) > .srt-l {
  border-radius: 4px;
  box-shadow: var(--ring);
}

th.dt__th--right > .srt-l::after {
  right: calc(100% + 3px);
  left: auto;
}

.pgw:has(.srt-i:checked) .pg-set {
  opacity: 0.45;
  pointer-events: none;
}

table.srt:has(.srt-a0:checked) > tbody > tr {
  order: var(--k0, 0);
}

table.srt:has(.srt-d0:checked) > tbody > tr {
  order: calc(var(--k0, 0) * -1);
}

table.srt:has(.srt-a1:checked) > tbody > tr {
  order: var(--k1, 0);
}

table.srt:has(.srt-d1:checked) > tbody > tr {
  order: calc(var(--k1, 0) * -1);
}

table.srt:has(.srt-a2:checked) > tbody > tr {
  order: var(--k2, 0);
}

table.srt:has(.srt-d2:checked) > tbody > tr {
  order: calc(var(--k2, 0) * -1);
}

table.srt:has(.srt-a3:checked) > tbody > tr {
  order: var(--k3, 0);
}

table.srt:has(.srt-d3:checked) > tbody > tr {
  order: calc(var(--k3, 0) * -1);
}

table.srt:has(.srt-a4:checked) > tbody > tr {
  order: var(--k4, 0);
}

table.srt:has(.srt-d4:checked) > tbody > tr {
  order: calc(var(--k4, 0) * -1);
}

table.srt:has(.srt-a5:checked) > tbody > tr {
  order: var(--k5, 0);
}

table.srt:has(.srt-d5:checked) > tbody > tr {
  order: calc(var(--k5, 0) * -1);
}

table.srt:has(.srt-a6:checked) > tbody > tr {
  order: var(--k6, 0);
}

table.srt:has(.srt-d6:checked) > tbody > tr {
  order: calc(var(--k6, 0) * -1);
}

table.srt:has(.srt-a7:checked) > tbody > tr {
  order: var(--k7, 0);
}

table.srt:has(.srt-d7:checked) > tbody > tr {
  order: calc(var(--k7, 0) * -1);
}

table.srt:has(.srt-a8:checked) > tbody > tr {
  order: var(--k8, 0);
}

table.srt:has(.srt-d8:checked) > tbody > tr {
  order: calc(var(--k8, 0) * -1);
}

table.srt:has(.srt-a9:checked) > tbody > tr {
  order: var(--k9, 0);
}

table.srt:has(.srt-d9:checked) > tbody > tr {
  order: calc(var(--k9, 0) * -1);
}

table.srt:has(.srt-a10:checked) > tbody > tr {
  order: var(--k10, 0);
}

table.srt:has(.srt-d10:checked) > tbody > tr {
  order: calc(var(--k10, 0) * -1);
}

table.srt:has(.srt-a11:checked) > tbody > tr {
  order: var(--k11, 0);
}

table.srt:has(.srt-d11:checked) > tbody > tr {
  order: calc(var(--k11, 0) * -1);
}

table.srt:has(.srt-a12:checked) > tbody > tr {
  order: var(--k12, 0);
}

table.srt:has(.srt-d12:checked) > tbody > tr {
  order: calc(var(--k12, 0) * -1);
}

table.srt:has(.srt-a13:checked) > tbody > tr {
  order: var(--k13, 0);
}

table.srt:has(.srt-d13:checked) > tbody > tr {
  order: calc(var(--k13, 0) * -1);
}

table.srt:has(.srt-a14:checked) > tbody > tr {
  order: var(--k14, 0);
}

table.srt:has(.srt-d14:checked) > tbody > tr {
  order: calc(var(--k14, 0) * -1);
}

table.srt:has(.srt-a15:checked) > tbody > tr {
  order: var(--k15, 0);
}

table.srt:has(.srt-d15:checked) > tbody > tr {
  order: calc(var(--k15, 0) * -1);
}

table.srt:has(.srt-a16:checked) > tbody > tr {
  order: var(--k16, 0);
}

table.srt:has(.srt-d16:checked) > tbody > tr {
  order: calc(var(--k16, 0) * -1);
}

table.srt:has(.srt-a17:checked) > tbody > tr {
  order: var(--k17, 0);
}

table.srt:has(.srt-d17:checked) > tbody > tr {
  order: calc(var(--k17, 0) * -1);
}

table.srt:has(.srt-a18:checked) > tbody > tr {
  order: var(--k18, 0);
}

table.srt:has(.srt-d18:checked) > tbody > tr {
  order: calc(var(--k18, 0) * -1);
}

table.srt:has(.srt-a19:checked) > tbody > tr {
  order: var(--k19, 0);
}

table.srt:has(.srt-d19:checked) > tbody > tr {
  order: calc(var(--k19, 0) * -1);
}

table.srt:has(.srt-a20:checked) > tbody > tr {
  order: var(--k20, 0);
}

table.srt:has(.srt-d20:checked) > tbody > tr {
  order: calc(var(--k20, 0) * -1);
}

table.srt:has(.srt-a21:checked) > tbody > tr {
  order: var(--k21, 0);
}

table.srt:has(.srt-d21:checked) > tbody > tr {
  order: calc(var(--k21, 0) * -1);
}

table.srt:has(.srt-a22:checked) > tbody > tr {
  order: var(--k22, 0);
}

table.srt:has(.srt-d22:checked) > tbody > tr {
  order: calc(var(--k22, 0) * -1);
}

table.srt:has(.srt-a23:checked) > tbody > tr {
  order: var(--k23, 0);
}

table.srt:has(.srt-d23:checked) > tbody > tr {
  order: calc(var(--k23, 0) * -1);
}

table.srt:has(.srt-a24:checked) > tbody > tr {
  order: var(--k24, 0);
}

table.srt:has(.srt-d24:checked) > tbody > tr {
  order: calc(var(--k24, 0) * -1);
}

table.srt:has(.srt-a25:checked) > tbody > tr {
  order: var(--k25, 0);
}

table.srt:has(.srt-d25:checked) > tbody > tr {
  order: calc(var(--k25, 0) * -1);
}

table.srt:has(.srt-a26:checked) > tbody > tr {
  order: var(--k26, 0);
}

table.srt:has(.srt-d26:checked) > tbody > tr {
  order: calc(var(--k26, 0) * -1);
}

table.srt:has(.srt-a27:checked) > tbody > tr {
  order: var(--k27, 0);
}

table.srt:has(.srt-d27:checked) > tbody > tr {
  order: calc(var(--k27, 0) * -1);
}

table.srt:has(.srt-a28:checked) > tbody > tr {
  order: var(--k28, 0);
}

table.srt:has(.srt-d28:checked) > tbody > tr {
  order: calc(var(--k28, 0) * -1);
}

table.srt:has(.srt-a29:checked) > tbody > tr {
  order: var(--k29, 0);
}

table.srt:has(.srt-d29:checked) > tbody > tr {
  order: calc(var(--k29, 0) * -1);
}

table.srt:has(.srt-a30:checked) > tbody > tr {
  order: var(--k30, 0);
}

table.srt:has(.srt-d30:checked) > tbody > tr {
  order: calc(var(--k30, 0) * -1);
}

table.srt:has(.srt-a31:checked) > tbody > tr {
  order: var(--k31, 0);
}

table.srt:has(.srt-d31:checked) > tbody > tr {
  order: calc(var(--k31, 0) * -1);
}

/* ───────── Compact desk lists (.arl) – FD-02 arrivals, FD-14 departures, RS-09 allocation list (user 2026-10-31) ─────────
   One line per booking (36 px rows), booking number sticky on the left while the wide list scrolls sideways,
   extra columns switched on under Filter → Show columns, a live row count under the list. */

.arl-wrap {
  margin-top: 12px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--sh-1);
  overflow: hidden;
  counter-reset: arl;
}

.arl {
  container-type: normal; /* a size container scopes CSS counters – the row count under the list needs them */
  max-height: min(70vh, 760px);
  border-radius: 0;
  box-shadow: none;
}

/* one line per booking: 36 px rows, no sub-lines */
.arl-t {
  font-size: 12.5px;
}

.arl-t.arl-t.arl-t > thead th {
  white-space: nowrap;
  padding: 9px 12px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.arl-t .dt__td {
  padding: 6px 12px;
  line-height: 1.35;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.arl-t > tbody > tr {
  counter-increment: arl;
}

.arl-t > tbody > tr:hover {
  background: var(--em-50);
}

/* booking number + tick box stay in view while the wide list scrolls sideways */
.arl-t :is(th, td).arl-bk {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}

.arl-t > thead th.arl-bk {
  background: var(--surface-2);
}

.arl-t > tbody > tr {
  background: var(--surface);
}

.arl-t td.arl-bk {
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: inset -1px 0 0 var(--line-2);
}

.arl-t td.arl-bk .fd-sel {
  margin: 0;
}

.arl-t .fd-link {
  font-weight: 600;
}

.arl-gn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.arl-mk {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.arl-mk--vip {
  padding: 0 4px;
  background: var(--br-50);
  box-shadow: inset 0 0 0 1px var(--br-200);
  color: var(--br-700);
}

.arl-mk--grp {
  background: var(--info-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 25%, transparent);
  color: var(--info);
}

.arl-ag {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arl-rms {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}

.arl-t .fd-rm {
  height: 24px;
  font-size: 12px;
}

.arl-t .fd-rm::before {
  width: 16px;
  height: 16px;
}

.arl-t .fd-rm.fd-rm--none {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 650;
}

.arl-rd {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.arl-rd--no {
  color: var(--st-dirty);
}

.arl-rd--ok {
  color: var(--st-ready);
}

.arl-assign {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--em-700);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.arl-assign:hover {
  background: var(--em-50);
}

.arl-t .pill {
  height: 22px;
  padding: 0 8px;
  font-size: 11.5px;
}

.arl-t small {
  color: var(--ink-4);
  font-size: 10px;
}

.arl-mute {
  color: var(--ink-3);
}

.arl-act {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.btn.btn--xs {
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  box-shadow: none;
}

.arl-q {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--warn-bg);
  color: var(--st-tentative);
  font-size: 11.5px;
  font-weight: 600;
}

/* extra columns: off until ticked under Filter → Show columns */
.arl-t :is(th, td):is(.c-tar, .c-adv, .c-pm, .c-mob, .c-trv, .c-cp, .c-cal, .c-pref, .c-si) {
  display: none;
}

.arl-t .c-pref,
.arl-t .c-si,
.arl-t .c-trv,
.arl-t .c-cal {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arl-cols {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
}

.arl-cols legend {
  float: left;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 4px;
  padding: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}

.arl-cols legend .icon {
  color: var(--em-600);
}

.arl-col {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}

.arl-col input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--em-700);
}

.arl-col:has(input:checked) {
  background: var(--em-50);
  box-shadow: inset 0 0 0 1px var(--em-200);
  color: var(--em-800);
}

.hf-f--date {
  min-width: 200px;
}

.arl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 12px;
}

/* the count follows the filters: hidden rows are not counted */
.arl-count::before {
  content: counter(arl) " ";
  color: var(--ink);
  font-weight: 700;
}

.arl-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.arl-hint .icon {
  color: var(--em-600);
}

/* a guest name followed by its tier / VIP pill: the pill sits under the name, so the name lines up with the
   other first lines of the row (inline, the taller pill pushed the name down – RS-06 and others) */
.dt__td > a:has(> strong) + .pill:last-child {
  display: flex;
  width: fit-content;
  margin-top: 4px;
}