/* zones.css: the zones area's styles (README screens 4 and 5, collections,
   the occupancy check). Built on field.css's tokens and components; see
   field.css for the rules every stylesheet here keeps. Everything is scoped
   under z-* classes. */

:root {
  --z-gx: 14px;
  --z-green: var(--lm-green-6, #1a7f37);
  --z-green-mid: #2da44e;
  --z-red: var(--lm-red-5, #cf222e);
  --z-off-bg: #ffebe9;
  --z-off-fg: #a40e26;
  --z-off-border: #ffcecb;
  --z-chip-bg: #eff2f5;
  --z-chip-fg: #59636e;
  --z-warn-bg: var(--sfColour-warning01, #fff1e5);
  --z-warn-border: #ffb77c;
  --z-warn-ink: #953800;
  --z-warn-icon: #bc4c00;
  --z-occupied: #bc4c00;
  --z-pick-border: #c8d1da;
  --z-picked: var(--z-green);
  --z-snap-bg: #e6eaef;
  --z-snap-grid: rgba(37, 41, 46, 0.05);
  --z-reason-on-bg: #1c2128;
  --z-reason-on-fg: #fff;
  --z-dim-shadow: rgba(16, 24, 40, 0.12);
}

[data-theme="dark"] {
  --z-off-bg: rgba(207, 34, 46, 0.18);
  --z-off-fg: #ff8080;
  --z-off-border: rgba(255, 128, 128, 0.35);
  --z-chip-bg: #2f3742;
  --z-chip-fg: #b7bdc8;
  --z-warn-bg: rgba(219, 109, 40, 0.14);
  --z-warn-border: rgba(240, 136, 62, 0.4);
  --z-warn-ink: #ffb77c;
  --z-warn-icon: #f0883e;
  --z-occupied: #f0883e;
  --z-pick-border: #656c76;
  --z-snap-bg: #1c2128;
  --z-snap-grid: rgba(255, 255, 255, 0.04);
  --z-reason-on-bg: #f0f6fc;
  --z-reason-on-fg: #0d1117;
  --z-dim-shadow: rgba(1, 4, 9, 0.5);
}

@media (min-width: 700px) {
  :root { --z-gx: 24px; }
}

/* ---------------------------------------------------------------- shapes
   A zone's outline in its L1 colour when enforced, yellow while arming,
   grey when off (the design's zoneGlyph colours). */
.z-patterns { position: absolute; }
.z-shape--permitted { --z-ink: #2da44e; }
.z-shape--restricted { --z-ink: #EF4444; }
.z-shape--warning { --z-ink: #F59E0B; }
.z-shape--restricted .z-shape__fill { fill: url(#field-restricted-hatch); }
.z-shape--prohibited { --z-ink: #cf222e; }
.z-shape--informational { --z-ink: #0969da; }
.z-shape--arming { --z-ink: #d4a72c; }
.z-shape--off { --z-ink: #818b98; }
[data-theme="dark"] .z-shape--permitted { --z-ink: #4ac26b; }
[data-theme="dark"] .z-shape--restricted { --z-ink: #EF4444; }
[data-theme="dark"] .z-shape--warning { --z-ink: #F59E0B; }
[data-theme="dark"] .z-shape--prohibited { --z-ink: #ff8080; }
[data-theme="dark"] .z-shape--informational { --z-ink: #6cb6ff; }
[data-theme="dark"] .z-shape--off { --z-ink: #9198a1; }

.z-shape { display: block; overflow: visible; }
.z-shape__fill { fill: var(--z-ink); fill-opacity: 0.3; stroke: var(--z-ink); stroke-width: 1.5; stroke-linejoin: round; }
.z-shape__line { fill: none; stroke: var(--z-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- page */
.z-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bgColour-primary);
}

.z-label {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--textColour-tertiary);
}
.z-label--gap { margin-top: 18px; }

/* ---------------------------------------------------------------- toolbar */
.z-tools { display: block; }
.z-tools__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 var(--z-gx);
  background: var(--sfColour-primary);
  border-bottom: 1px solid var(--borderColour-primary);
  transition: background 200ms ease;
}
.z-tools__bar:has(.z-tools__text.is-picked) { background: var(--sfColour-hover, #eff2f5); }
.z-tools__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.z-tools__text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--textColour-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.z-tools__text.is-picked { color: var(--textColour-primary); }
.z-tools__search { display: none; flex: 1; min-width: 0; align-items: center; gap: 8px; }
.z-tools[data-search="open"] .z-tools__search { display: flex; }
.z-tools[data-search="open"] .z-tools__main { display: none; }

.z-btn {
  flex: none;
  height: 32px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.z-iconbtn {
  flex: none;
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-secondary);
  cursor: pointer;
  list-style: none;
  transition: background 200ms ease;
}
.z-iconbtn::-webkit-details-marker { display: none; }
.z-iconbtn.is-on { border-color: var(--field-coral); color: var(--field-coral); }
.z-pop[open] > .z-iconbtn { background: var(--sfColour-hover, #eff2f5); }
.z-btn:active, .z-iconbtn:active { background: var(--sfColour-hover, #eff2f5); }

.z-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 4px 0 10px;
  border-radius: 6px;
  border: 1px solid var(--field-coral);
  background: var(--sfColour-primary);
  color: var(--textColour-tertiary);
}
.z-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--textColour-primary);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
}
@media (min-width: 700px) { .z-search__input { font-size: 14px; } }
.z-search__input::-webkit-search-cancel-button { display: none; }
.z-linkbtn {
  flex: none;
  min-height: 34px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--textColour-brand, var(--field-coral));
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* Popovers (sort, the row ⋯ menu): <details>, closed by zones.js on a choice
   or a tap outside. */
.z-pop { flex: none; }
.z-pop > summary { list-style: none; }
.z-pop > summary::-webkit-details-marker { display: none; }
.z-menu {
  position: absolute;
  z-index: 30;
  width: 212px;
  padding: 6px;
  border-radius: 8px;
  background: var(--sfColour-primary);
  border: 1px solid var(--borderColour-primary);
  box-shadow: 0 12px 28px -10px rgba(16, 24, 40, 0.28);
  animation: z-pop 160ms ease-out;
}
.z-menu--sort { top: 44px; right: var(--z-gx); }
.z-menu__label {
  padding: 6px 8px 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--textColour-tertiary);
}
.z-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(9px * var(--sp));
  width: 100%;
  min-height: 40px;
  padding: calc(9px * var(--sp)) calc(8px * var(--sp));
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--textColour-primary);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.z-menu__item:hover, .z-menu__item:active { background: var(--sfColour-hover, #eff2f5); }
.z-menu__radio { position: absolute; opacity: 0; pointer-events: none; }
.z-menu__text { flex: 1; }
.z-menu__check { display: none; color: var(--field-coral); }
.z-menu__item:has(.z-menu__radio:checked) { background: var(--sfColour-hover, #eff2f5); }
.z-menu__item:has(.z-menu__radio:checked) .z-menu__check { display: flex; }
.z-menu__item:has(.z-menu__radio:focus-visible) { outline: 2px solid var(--field-coral); outline-offset: -2px; }
@keyframes z-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Filter chips: multi-select checkboxes; All lights up when none is on. */
.z-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px var(--z-gx) 2px;
}
.z-chips::-webkit-scrollbar { display: none; }
.z-chip {
  position: relative;
  flex: none;
  height: 30px;
  padding: 0 calc(11px * var(--sp));
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--sp));
  border-radius: 999px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-secondary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.z-chip__input { position: absolute; opacity: 0; pointer-events: none; }
.z-chip__n { font-size: 11px; opacity: 0.75; font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }
.z-chip:has(.z-chip__input:checked),
.z-chips:not(:has(.z-chip__input:checked)) .z-chip--all {
  background: var(--field-coral);
  border-color: var(--field-coral);
  color: #fff;
}
.z-chip:has(.z-chip__input:focus-visible) { outline: 2px solid var(--field-coral); outline-offset: 2px; }

/* ---------------------------------------------------------------- list */
.z-list { flex: 1; }
.z-listin { padding: 14px var(--z-gx) 4px; }
.z-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 44px 24px;
}
.z-empty__title { font-size: 14px; font-weight: 500; }
.z-empty__reset { text-decoration: underline; }

.z-group { margin-bottom: 14px; }
.z-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 4px 7px;
  font-size: 11px;
  font-weight: 600;
}
.z-group__sw { width: 14px; height: 10px; flex: none; border-radius: 2px; border: 1px solid; }
.z-group__label { text-transform: uppercase; letter-spacing: 0.06em; color: var(--textColour-secondary); }
.z-group__rule { flex: 1; height: 1px; background: var(--dividerColour-primary, var(--borderColour-primary)); }
.z-group__n { font-weight: 400; color: var(--textColour-tertiary); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }
.z-group--prohibited .z-group__sw { background: rgba(207, 34, 46, 0.24); border-color: #cf222e; }
.z-group--restricted .z-group__sw { background: repeating-linear-gradient(135deg, rgba(239,68,68,.35) 0 4px, rgba(34,197,94,.35) 4px 8px); border-color: #EF4444; }
.z-group--warning .z-group__sw { background: rgba(245,158,11,.32); border-color: #F59E0B; }
.z-group--informational .z-group__sw { background: rgba(9, 105, 218, 0.24); border-color: #0969da; }
.z-group--permitted .z-group__sw { background: rgba(46, 160, 67, 0.38); border-color: #1a7f37; }
.z-group--prohibited .z-group__label { color: #a40e26; }
.z-group--restricted .z-group__label { color: #a40e26; }
.z-group--warning .z-group__label { color: #7d4e00; }
.z-group--informational .z-group__label { color: #0550ae; }
.z-group--permitted .z-group__label { color: #116329; }
[data-theme="dark"] .z-group--prohibited .z-group__label { color: #ff8080; }
[data-theme="dark"] .z-group--restricted .z-group__label { color: #ff8080; }
[data-theme="dark"] .z-group--warning .z-group__label { color: #e3b341; }
[data-theme="dark"] .z-group--informational .z-group__label { color: #79c0ff; }
[data-theme="dark"] .z-group--permitted .z-group__label { color: #4ac26b; }

/* Rows: one bordered card per group, a 1px rule between rows. No overflow
   clipping, so the ⋯ menu can spill out. */
.z-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--borderColour-primary);
  border-radius: 8px;
  background: var(--sfColour-primary);
}
.z-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--sp));
  padding: calc(10px * var(--sp)) calc(11px * var(--sp));
}
.z-row + .z-row { border-top: 1px solid var(--borderColour-primary); }
.z-row:first-child { border-radius: 8px 8px 0 0; }
.z-row:last-child { border-radius: 0 0 8px 8px; }

.z-pick {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.z-pick__input { position: absolute; opacity: 0; pointer-events: none; }
.z-pick__box {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1.5px solid var(--z-pick-border);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 150ms ease, border-color 150ms ease;
}
.z-pick__box svg { stroke-width: 3; opacity: 0; transition: opacity 150ms ease; }
.z-pick__input:checked + .z-pick__box { background: var(--z-picked); border-color: var(--z-picked); }
.z-pick__input:checked + .z-pick__box svg { opacity: 1; }
.z-pick__input:focus-visible + .z-pick__box { outline: 2px solid var(--field-coral); outline-offset: 2px; }
.z-pick__input:disabled + .z-pick__box { opacity: 0.4; }

.z-av {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: var(--bgColour-primary);
  border: 1px solid var(--borderColour-primary);
}

.z-row__main {
  flex: 1;
  min-width: 0;
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.z-row__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.z-row__code { flex: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.z-row__top .f-pill { height: 20px; font-weight: 500; }
.z-row--active .f-pill__dot, .z-row--arming .f-pill__dot { animation: owlLive 1.8s ease-in-out infinite; }
.z-row__name {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 18px;
  color: var(--textColour-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.z-row__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 6px;
  font-size: 11px;
  color: var(--z-chip-fg);
}
.z-row__type { min-width: 0; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-row__inside { flex: none; white-space: nowrap; }
.z-row__inside.is-occupied { color: var(--z-occupied); }

/* The inline toggle: tablet and up (on phones it lives in the ⋯ menu). */
.z-row__toggle {
  display: none;
  flex: none;
  min-width: 92px;
  height: 40px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 200ms ease;
}
.z-row__toggle.z-toggle--off { background: var(--z-off-bg); color: var(--z-off-fg); border-color: var(--z-off-border); }
.z-row__toggle.z-toggle--on { background: var(--z-green); border-color: var(--z-green); color: #fff; }
.z-row__toggle.z-toggle--arming { background: #fff8c5; color: #7d4e00; border-color: #fae17d; cursor: default; }
.z-row__toggle:active { filter: brightness(0.96); }

.z-more { position: static; flex: none; }
.z-more__btn {
  width: 36px;
  height: 36px;
  margin-left: 2px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--textColour-secondary);
  cursor: pointer;
}
.z-more__btn:active, .z-more[open] .z-more__btn { background: var(--sfColour-hover, #eff2f5); }
.z-menu--row { top: calc(100% - 6px); right: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.z-menu--row .z-menu__item { min-height: 40px; padding: 0 10px; gap: 10px; font-size: 14px; border-radius: 5px; }
.z-menu--row .z-toggle--off { color: var(--z-red); }
[data-theme="dark"] .z-menu--row .z-toggle--off { color: #ff8080; }

@media (min-width: 700px) {
  .z-av { display: flex; }
  .z-row__toggle { display: flex; }
}

/* Bulk bar and a collection's Activate all / Deactivate all: pinned to the
   bottom of the content (above the tab bar on phone). */
.z-bulkbar, .z-colbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 10px var(--z-gx) 12px;
  background: var(--sfColour-primary);
  border-top: 1px solid var(--borderColour-primary);
  box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.06);
  animation: f-slide-up 200ms ease both;
}
.z-colbar { padding-top: 12px; animation: none; }
.z-colbar .z-bigbtn { height: 44px; font-size: 13px; white-space: nowrap; }

/* ---------------------------------------------------------------- big buttons */
.z-bigbtn {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: filter 200ms ease, opacity 200ms ease;
}
.z-bigbtn:active { filter: brightness(0.96); }
.z-bigbtn:disabled { background: var(--z-chip-bg); color: var(--z-chip-fg); border-color: transparent; opacity: 0.6; cursor: not-allowed; }
.z-bigbtn--go, .z-bigbtn--on { background: var(--z-green); border-color: var(--z-green); color: #fff; }
.z-bigbtn--off { background: var(--z-off-bg); border-color: var(--z-off-border); color: var(--z-off-fg); }
.z-bigbtn--cancel { flex: none; min-width: 96px; background: var(--buttonColour-tertiary, #eff2f5); color: var(--textColour-primary); }
.z-bigbtn--arming { background: #fff8c5; color: #7d4e00; border-color: #fae17d; }

/* Hold to confirm: the fill runs across in a second while held. */
.z-hold { flex-direction: column; gap: 1px; background: var(--z-red); border-color: var(--z-red); color: #fff; }
.z-hold__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(0, 0, 0, 0.22);
  transition: width 150ms ease;
}
.z-hold.is-holding .z-hold__fill { width: 100%; transition: width 1000ms linear; }
.z-hold__label, .z-hold__sub { position: relative; }
.z-hold__sub { font-size: 11px; opacity: 0.85; }
.z-hold.is-nudge { animation: z-nudge 320ms ease; }
@keyframes z-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* With a reason still to pick, the hold reads as waiting. */
.z-hold__label--wait, .z-hold__sub--wait { display: none; }
form:not(:has([name="reason"]:checked)) .z-hold--reason { background: #818b98; border-color: #818b98; opacity: 0.7; }
[data-theme="dark"] form:not(:has([name="reason"]:checked)) .z-hold--reason { background: #656c76; border-color: #656c76; }
form:not(:has([name="reason"]:checked)) .z-hold--reason .z-hold__label--ready,
form:not(:has([name="reason"]:checked)) .z-hold--reason .z-hold__sub--ready { display: none; }
form:not(:has([name="reason"]:checked)) .z-hold--reason .z-hold__label--wait,
form:not(:has([name="reason"]:checked)) .z-hold--reason .z-hold__sub--wait { display: inline; }

/* ---------------------------------------------------------------- collections */
.z-cols { padding: 14px var(--z-gx) 8px; }
.z-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: calc(12px * var(--sp));
}
@media (max-width: 359px) { .z-cards { grid-template-columns: 1fr; } }
.z-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 172px;
  height: 100%;
  padding: calc(18px * var(--sp));
  border-radius: 8px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: inherit;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
}
.z-card:hover, .z-card:active { background: var(--sfColour-hover, #eff2f5); }
.z-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.z-card__chev { color: var(--textColour-tertiary); margin-top: 2px; }
.z-card__name { margin-top: 16px; font-size: 16px; line-height: 22px; font-weight: 600; text-wrap: pretty; }
.z-card__sub { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--textColour-secondary); font-variant-numeric: tabular-nums; }
.z-bar { display: block; height: 6px; margin-top: auto; border-radius: 999px; background: var(--sfColour-hover, #eff2f5); overflow: hidden; }
.z-card .z-bar { margin-top: auto; }
.z-card__sub { margin-bottom: 18px; }
.z-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--z-green-mid); transition: width 300ms ease; }
.z-bar__fill--0 { width: 0%; } .z-bar__fill--5 { width: 5%; } .z-bar__fill--10 { width: 10%; } .z-bar__fill--15 { width: 15%; }
.z-bar__fill--20 { width: 20%; } .z-bar__fill--25 { width: 25%; } .z-bar__fill--30 { width: 30%; } .z-bar__fill--35 { width: 35%; }
.z-bar__fill--40 { width: 40%; } .z-bar__fill--45 { width: 45%; } .z-bar__fill--50 { width: 50%; } .z-bar__fill--55 { width: 55%; }
.z-bar__fill--60 { width: 60%; } .z-bar__fill--65 { width: 65%; } .z-bar__fill--70 { width: 70%; } .z-bar__fill--75 { width: 75%; }
.z-bar__fill--80 { width: 80%; } .z-bar__fill--85 { width: 85%; } .z-bar__fill--90 { width: 90%; } .z-bar__fill--95 { width: 95%; }
.z-bar__fill--100 { width: 100%; }

.z-colicon { flex: none; display: block; }

/* An open collection's header. */
.z-colhead {
  padding: 10px var(--z-gx) 12px;
  background: var(--sfColour-primary);
}
.z-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  margin-left: -8px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  color: var(--field-coral);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease;
}
.z-back svg { stroke-width: 2.2; }
.z-back:hover, .z-back:active { background: var(--sfColour-hover, #eff2f5); }
.z-colhead__row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.z-colhead__text { flex: 1; min-width: 0; }
.z-colhead__name { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; }
.z-colhead__sub { margin: 2px 0 0; font-size: 12px; line-height: 17px; color: var(--textColour-secondary); }
.z-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.z-tags__match { margin-right: 2px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--textColour-tertiary); }
.z-tag {
  height: 24px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-hover, #eff2f5);
  font-size: 12px;
  font-weight: 500;
}
.z-tag svg { color: var(--textColour-tertiary); stroke-width: 2.2; }

/* ---------------------------------------------------------------- zone drawer */
.z-dr { display: contents; }
.z-dr__head { padding: 18px 52px 8px 16px; transition: box-shadow 140ms ease; }
@media (min-width: 700px) { .z-dr__head { padding-right: 96px; } }
.z-dr__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.z-dr__head .z-dr__code {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  transition: font-size 200ms ease, line-height 200ms ease;
}
.z-dr__fold { max-height: 80px; overflow: hidden; transition: max-height 200ms ease, opacity 160ms ease; }
.z-dr__name {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--textColour-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.z-dr__cat { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 4px 0 0; font-size: 13px; line-height: 18px; font-weight: 500; }
.z-dr__dot { color: var(--textColour-tertiary); font-weight: 400; }
.z-dr__l2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-dr.is-compact .z-dr__head .z-dr__code { font-size: 16px; line-height: 22px; }
.z-dr.is-compact .z-dr__fold { max-height: 0; opacity: 0; }
.z-dr.is-compact .z-dr__head { box-shadow: 0 6px 6px -6px rgba(16, 24, 40, 0.18); }

.z-dr__tabs { padding: 8px; }
.z-seg { flex: 1; display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--sfColour-hover, #eff2f5); }
.z-seg__btn {
  flex: 1;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--sp));
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--textColour-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.z-seg__btn[aria-selected="true"] { background: var(--sfColour-primary); color: var(--textColour-primary); box-shadow: 0 1px 2px var(--z-dim-shadow); }
.z-seg__n { font-size: 11px; color: var(--textColour-tertiary); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }

.z-dr__body { padding: 12px 16px 18px; }
.z-dr:not([data-tab="details"]) .z-panel--details,
.z-dr:not([data-tab="events"]) .z-panel--events,
.z-dr:not([data-tab="log"]) .z-panel--log { display: none; }
.z-panel { animation: f-fade 160ms ease both; }

/* Parts of one stage only: detail, confirm (hold) or activate. */
.z-dr:not([data-stage="detail"]) [data-st="detail"],
.z-dr:not([data-stage="confirm"]) [data-st="confirm"],
.z-dr:not([data-stage="activate"]) [data-st="activate"] { display: none; }

.z-snap {
  position: relative;
  height: 168px;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--borderColour-primary);
  background-color: var(--z-snap-bg);
  background-image: linear-gradient(var(--z-snap-grid) 1px, transparent 1px), linear-gradient(90deg, var(--z-snap-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.z-snap__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.z-snap__img--dark { display: none; }
[data-theme="dark"] .z-snap__img--light { display: none; }
[data-theme="dark"] .z-snap__img--dark { display: block; }
.z-snap__svg { position: relative; width: 100%; height: 100%; }
.z-snap__svg .z-shape__fill { fill-opacity: 0.28; stroke-width: 2; }
.z-snap__svg .z-shape__line { stroke-width: 4; }

.z-tile { margin-bottom: 12px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--borderColour-primary); }
.z-tile__label { font-size: 11px; color: var(--textColour-tertiary); }
.z-tile__n { margin-top: 2px; font-size: 28px; line-height: 32px; font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }
.z-tile__n.is-occupied { color: var(--z-occupied); }

.z-kv {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borderColour-primary);
  border-radius: 8px;
  overflow: hidden;
}
.z-kv__row {
  display: flex;
  align-items: baseline;
  gap: calc(12px * var(--sp));
  padding: calc(10px * var(--sp)) calc(12px * var(--sp));
  background: var(--sfColour-primary);
}
.z-kv__row + .z-kv__row { border-top: 1px solid var(--borderColour-primary); }
.z-kv dt { flex: none; width: 112px; font-size: 12px; color: var(--textColour-tertiary); }
.z-kv dd { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; text-align: right; }
.z-mono { font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }
.z-cchips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.z-cchip {
  height: 26px;
  max-width: 100%;
  padding: 0 calc(10px * var(--sp));
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--sp));
  border-radius: 999px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease;
}
.z-cchip:hover, .z-cchip:active { background: var(--sfColour-hover, #eff2f5); }
.z-cchip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-cchips:not(.is-all) .z-cchip--extra, .z-cchips.is-all .z-cchip--more { display: none; }
.z-sw { flex: none; display: block; }

.z-dr__empty {
  margin: 0;
  padding: 22px 12px;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  color: var(--textColour-tertiary);
  border-radius: 8px;
  border: 1px dashed var(--borderColour-primary);
}
.z-panel--events .z-label { margin: 2px 0 10px; }
.z-evs { list-style: none; margin: 0; padding: 0; }
.z-ev {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--sp));
  padding: calc(9px * var(--sp)) 0;
  border-bottom: 1px solid var(--dividerColour-primary, var(--borderColour-primary));
  color: inherit;
  text-decoration: none;
}
.z-ev__time, .z-log__time { flex: none; width: 40px; font-size: 12px; color: var(--textColour-secondary); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }
.z-ev__av { position: relative; flex: none; width: 30px; height: 30px; }
.z-ev__av img { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; display: block; }
.z-ev__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.z-ev__name { font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-ev__sub { font-size: 11px; line-height: 15px; color: var(--textColour-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-ev__pill { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.z-ev__pill svg { stroke-width: 2.4; }
.z-ev__pill--in { background: #dafbe1; color: #116329; }
.z-ev__pill--out { background: #eff2f5; color: var(--textColour-secondary); }
[data-theme="dark"] .z-ev__pill--in { background: rgba(46, 160, 67, 0.18); color: #4ac26b; }
[data-theme="dark"] .z-ev__pill--out { background: #262c36; }

.z-log { list-style: none; margin: 0; padding: 0; }
.z-log__item { display: flex; gap: calc(11px * var(--sp)); }
.z-log__rail { position: relative; flex: none; width: 1px; background: var(--dividerColour-primary, var(--borderColour-primary)); }
.z-log__dot { position: absolute; left: -3px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #d0d7de; }
.z-log__item:first-child .z-log__dot { background: #c8d1da; }
.z-log--on .z-log__item:first-child .z-log__dot { background: var(--z-green-mid); }
[data-theme="dark"] .z-log__dot { background: #3d444d; }
[data-theme="dark"] .z-log__item:first-child .z-log__dot { background: #656c76; }
[data-theme="dark"] .z-log--on .z-log__item:first-child .z-log__dot { background: var(--z-green-mid); }
.z-log__text { flex: 1; display: flex; flex-direction: column; padding: 0 0 14px 4px; }
.z-log__title { font-size: 13px; line-height: 18px; font-weight: 500; }
.z-log__sub { margin-top: 2px; font-size: 11px; color: var(--textColour-tertiary); }

.z-dr__note { margin: 10px 0 0; font-size: 11px; color: var(--textColour-tertiary); text-align: center; }
.z-dr__foot { padding: 16px 16px max(16px, var(--field-safe-bottom)); background: var(--sfColour-primary); }
.z-dr__foot .z-bigbtn { height: 44px; }
.z-dr__foot .z-bigbtn--cancel { flex: none; }

/* ---------------------------------------------------------------- occupancy check, bulk dialog */
.z-occ { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.z-occ .z-occ__head {
  padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 18px;
  background: var(--z-warn-bg);
  border-bottom: 1px solid var(--z-warn-border);
}
@media (min-width: 700px) { .z-occ .z-occ__head { padding-top: 18px; } }
.z-occ__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--z-warn-ink);
}
.z-occ__kicker svg, .z-warn__head svg { color: var(--z-warn-icon); flex: none; }
.z-occ__title { margin: 8px 0 0; font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; color: var(--z-warn-ink); }
.z-occ__body { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--z-warn-ink); }
.z-occ .z-occ__main { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; background: var(--bgColour-primary); }
.z-occ__list, .z-bulk__zones, .z-warn__list {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--borderColour-primary);
  border-radius: 8px;
  overflow: hidden;
  background: var(--borderColour-primary);
}
.z-occ__who { display: flex; align-items: center; gap: calc(10px * var(--sp)); padding: calc(12px * var(--sp)); background: var(--sfColour-primary); }
.z-occ__av { width: 34px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; }
.z-occ__av img, .z-warn__av img { height: 100%; width: auto; display: block; }
.z-occ__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.z-occ__name { font-size: 14px; font-weight: 500; }
.z-occ__sub { margin-top: 2px; font-size: 11px; color: var(--textColour-tertiary); }
.z-occ__dist { font-size: 12px; color: var(--z-occupied); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }

.z-reasons { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.z-reason {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--sp));
  padding: calc(13px * var(--sp)) calc(12px * var(--sp));
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.z-reason__input { position: absolute; opacity: 0; pointer-events: none; }
.z-reason__mark { width: 18px; height: 18px; flex: none; border-radius: 999px; border: 1.5px solid currentColor; display: grid; place-items: center; }
.z-reason__mark svg { opacity: 0; stroke-width: 3; }
.z-reason:has(.z-reason__input:checked) { background: var(--z-reason-on-bg); border-color: var(--z-reason-on-bg); color: var(--z-reason-on-fg); }
.z-reason:has(.z-reason__input:checked) .z-reason__mark svg { opacity: 1; }
.z-reason:has(.z-reason__input:focus-visible) { outline: 2px solid var(--field-coral); outline-offset: 2px; }
.z-reasons--chips { flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
.z-reasons--chips .z-reason { padding: calc(9px * var(--sp)) calc(11px * var(--sp)); border-radius: 4px; font-size: 13px; }
.z-audit { margin: 14px 0 0; font-size: 11px; line-height: 16px; color: var(--textColour-tertiary); }
.z-occ .z-occ__foot { padding: 12px 16px max(16px, var(--field-safe-bottom)); background: var(--sfColour-primary); }
.z-occ__foot .z-bigbtn { height: 48px; }
.z-occ__keep { min-width: 112px; }
@media (max-width: 699px) { .z-occ .z-occ__foot { padding-bottom: max(30px, var(--field-safe-bottom)); } }

.z-bulk .z-bulk__head { padding: 16px 16px 12px; border-bottom: 1px solid var(--borderColour-primary); }
.z-bulk__title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
.z-bulk__sub { margin: 5px 0 0; font-size: 13px; line-height: 19px; color: var(--textColour-secondary); }
.z-bulk .z-occ__main { padding: 12px 16px 16px; background: var(--sfColour-primary); }
.z-bulk__zones { margin-top: 1px; }
.z-bulk__zone { display: flex; align-items: center; gap: calc(9px * var(--sp)); padding: calc(10px * var(--sp)) calc(11px * var(--sp)); background: var(--sfColour-primary); }
.z-bulk__sw { width: 10px; height: 10px; flex: none; border-radius: 2px; background: var(--z-ink); }
.z-bulk__code { font-size: 13px; font-weight: 600; }
.z-bulk__short { flex: 1; min-width: 0; font-size: 12px; color: var(--textColour-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-bulk__inside { font-size: 11px; font-weight: 500; color: var(--z-chip-fg); }
.z-bulk__inside.is-occupied { color: var(--z-occupied); }
.z-bulk__cancel { min-width: 96px; }
.z-bulk .z-occ__foot .z-bigbtn { height: 46px; }

.z-warn { margin-top: 13px; padding: 13px; border-radius: 6px; background: var(--z-warn-bg); border: 1px solid var(--z-warn-border); }
.z-warn__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--z-warn-ink); }
.z-warn__body { margin: 7px 0 0; font-size: 13px; line-height: 18px; color: var(--z-warn-ink); }
.z-warn__list { margin-top: 11px; border-radius: 6px; border-color: #ffd8b5; background: #ffd8b5; }
[data-theme="dark"] .z-warn__list { border-color: var(--z-warn-border); background: var(--z-warn-border); }
.z-warn__who { display: flex; align-items: center; gap: calc(9px * var(--sp)); padding: calc(8px * var(--sp)) calc(10px * var(--sp)); background: var(--sfColour-primary); }
.z-warn__av { width: 24px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; }
.z-warn__name { font-size: 13px; font-weight: 500; }
.z-warn__zone { margin-left: auto; font-size: 11px; color: var(--textColour-tertiary); }

/* Dark: the selected segment lifts off the track, as in the design. */
[data-theme="dark"] .z-seg__btn[aria-selected="true"] {
  background: #3d444d;
  color: #fff;
  box-shadow: inset 0 0 0 1px #656c76;
}

/* ---------------------------------------------------------------- list / card view switch */
.z-view {
  flex: none;
  display: flex;
  height: 32px;
  padding: 2px;
  border-radius: 7px;
  background: var(--sfColour-hover, #eff2f5);
}
.z-view__opt {
  position: relative;
  width: 40px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--z-chip-fg);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.z-view__input { position: absolute; opacity: 0; pointer-events: none; }
.z-view__opt:has(.z-view__input:checked) { background: var(--sfColour-primary); color: var(--textColour-primary); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); }
.z-view__opt:has(.z-view__input:focus-visible) { outline: 2px solid var(--field-coral); outline-offset: 1px; }
[data-theme="dark"] .z-view__opt:has(.z-view__input:checked) { background: #3d444d; color: #fff; box-shadow: inset 0 0 0 1px #656c76; }

/* ---------------------------------------------------------------- card view */
.z-zcards {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
  gap: 12px;
}
.z-listin:has(.z-zcards) { padding-top: 12px; padding-bottom: 16px; }
.z-zcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 228px;
  border: 1px solid var(--borderColour-primary);
  border-radius: 8px;
  background: var(--sfColour-primary);
}
.z-zcard__main { flex: 1; display: flex; flex-direction: column; padding: 14px 14px 12px; }
.z-zcard__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.z-zcard__code {
  flex: none;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.z-zcard__code::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* the whole card opens the zone */
.z-zcard__fill { flex: 1; }
.z-zcard .z-pick, .z-zcard .z-more, .z-zcard__foot, .z-zcard .z-menu { position: relative; z-index: 1; }
.z-zcard .z-more { position: static; }
.z-zcard .z-more__btn { position: relative; z-index: 1; margin: -8px -8px -8px -2px; }
.z-zcard .z-menu--row { z-index: 30; top: 48px; }
.z-zcard__type { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 4px 0 0; font-size: 12px; line-height: 16px; }
.z-zcard__l1 { flex: none; font-weight: 500; }
.z-zcard__l2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-zcard__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--textColour-secondary);
  text-wrap: pretty;
}
.z-zcard__meta { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; font-size: 12px; color: var(--textColour-secondary); }
.z-zcard__line { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-zcard__line .f-icon { flex: none; }
.z-zcard__inside { font-weight: 500; color: var(--z-chip-fg); }
.z-zcard__inside.is-occupied { color: var(--z-occupied); }
.z-zcard__foot { display: flex; gap: 8px; padding: 0 14px 14px; }
.z-zcard__toggle {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 200ms ease;
}
.z-zcard__toggle:active { filter: brightness(0.96); }
.z-zcard__toggle.z-toggle--off { background: var(--z-off-bg); color: var(--z-off-fg); border-color: var(--z-off-border); }
.z-zcard__toggle.z-toggle--on { background: var(--z-green); border-color: var(--z-green); color: #fff; }
.z-zcard__toggle.z-toggle--arming { background: #fff8c5; color: #7d4e00; border-color: #fae17d; cursor: default; }

/* ---------------------------------------------------------------- pending toast
   "Activating CH-07": a spinner where the done tick goes, as in the design. */
.f-toast--pending::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: z-spin 800ms linear infinite;
}
@keyframes z-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- bulk dialog: a bottom sheet on phones */
.z-grip { display: none; }
@media (max-width: 699px) {
  .f-modal:has(.z-bulk) { place-items: end stretch; }
  .f-modal__panel:has(> .z-bulk) {
    height: auto;
    max-height: 82%;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.06);
    animation: f-slide-up 200ms ease-out both;
  }
  .z-bulk .z-grip {
    display: block;
    flex: none;
    width: 36px;
    height: 4px;
    margin: 14px auto 14px;
    border-radius: 999px;
    background: var(--lm-neutral-4, #e0e6eb);
  }
  .z-bulk .z-bulk__head { padding-top: 0; }
  .z-bulk .z-occ__foot { padding-bottom: max(28px, var(--field-safe-bottom)); }
}