/* ---- V1.64 Permit to work (ptw-): Client\Apps\Permits (the board, the wall view, the list, a permit, an isolation certificate).
   Design system tokens only (--os-*), full page width; a new app file: every design guard at zero (DesignGuardTests.ZeroTolerance). ---- */

.ptw-page { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.ptw-page > * { min-width: 0; max-width: 100%; }
.ptw-page .os-pagehead > * { min-width: 0; }
.ptw-kpis, .ptw-notice { margin: 0; }
.ptw-grid { align-items: start; }
.ptw-filters .os-select { flex: 0 1 220px; width: auto; min-width: 160px; }
.ptw-wide { display: grid; margin-top: var(--os-space-3); }
.ptw-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--os-space-2); margin-top: var(--os-space-3); }
.ptw-actions--start { justify-content: flex-start; margin-top: 0; }
.ptw-inline { display: flex; flex-wrap: wrap; gap: var(--os-space-2); align-items: center; margin-top: var(--os-space-3); }
.ptw-inline .os-select { flex: 0 1 320px; width: auto; }
.ptw-inline .os-input { flex: 1 1 260px; width: auto; }
.ptw-text { white-space: pre-line; margin: 0 0 var(--os-space-3); color: var(--os-text); overflow-wrap: anywhere; }
.ptw-missing { margin: 0; padding-left: var(--os-space-4); }
.ptw-missing a { color: var(--os-accent-text); }

/* Lists: the isolations of a permit, the permits of an isolation, the history */
.ptw-list, .ptw-history, .ptw-items, .ptw-cards { list-style: none; margin: 0; padding: 0; }
.ptw-list li, .ptw-history li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-1) var(--os-space-3);
  padding: var(--os-space-2) var(--os-space-4); border-bottom: 1px solid var(--os-border); }
.ptw-list li:last-child, .ptw-history li:last-child { border-bottom: 0; }
.ptw-list--tight li { padding: var(--os-space-1) 0; }
.ptw-list a { color: var(--os-accent-text); text-decoration: none; }
.ptw-list a:hover { text-decoration: underline; }

/* The facts of a permit or an isolation */
.ptw-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--os-space-1) var(--os-space-4); margin: 0 0 var(--os-space-4); }
.ptw-facts dt { color: var(--os-text-2); font: var(--os-type-small); }
.ptw-facts dd { margin: 0; overflow-wrap: anywhere; }

/* The checklist: the item (and the AI's hint), the answer buttons, who answered */
.ptw-items li { display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(140px, 1fr); align-items: center; gap: var(--os-space-2) var(--os-space-3);
  padding: var(--os-space-2) var(--os-space-4); border-bottom: 1px solid var(--os-border); }
.ptw-items li:last-child { border-bottom: 0; }
.ptw-items__text { display: flex; flex-direction: column; gap: var(--os-space-1); }
.ptw-items__hint { color: var(--os-text-2); font: var(--os-type-small); }
.ptw-answers { display: inline-flex; gap: var(--os-space-1); }

/* Tables: the gas tests, the lockout points */
.ptw-table td { white-space: normal; vertical-align: top; }
.ptw-table .ptw-n { text-align: right; }
.ptw-row-actions { display: flex; flex-wrap: wrap; gap: var(--os-space-1); align-items: center; justify-content: flex-end; }
.ptw-old td { color: var(--os-text-3); }

/* The board: one section per area, a card per permit; the wall view in larger type */
.ptw-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--os-space-4); align-items: start; }
.ptw-area { display: flex; flex-direction: column; gap: var(--os-space-2); min-width: 0; }
.ptw-area__title { display: flex; align-items: center; gap: var(--os-space-2); margin: 0; font: var(--os-type-h4); color: var(--os-text); }
.ptw-area__n { color: var(--os-text-2); }
.ptw-cards { display: flex; flex-direction: column; gap: var(--os-space-2); }
.ptw-card { background: var(--os-surface); border: 1px solid var(--os-border); border-radius: var(--os-radius-md); box-shadow: var(--os-shadow-1); }
.ptw-card--alert { border-color: var(--os-bad); }
.ptw-card__link { display: flex; flex-direction: column; gap: var(--os-space-1); padding: var(--os-space-3); color: inherit; text-decoration: none; }
.ptw-card__link:hover { background: var(--os-surface-hover); }
.ptw-card__link:focus-visible { outline: 2px solid var(--os-accent); outline-offset: 2px; }
.ptw-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--os-space-2); }
.ptw-card__type { color: var(--os-text-2); font: var(--os-type-small); overflow-wrap: anywhere; }
.ptw-card__work { color: var(--os-text); overflow-wrap: anywhere; }
.ptw-card__meta { color: var(--os-text-2); font: var(--os-type-small); }
.ptw-card__flags { display: flex; flex-wrap: wrap; gap: var(--os-space-1); }
.ptw-board--wall { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.ptw-board--wall .ptw-area__title { font: var(--os-type-h3); }
.ptw-board--wall .ptw-card__work { font: var(--os-type-h4); }
.ptw-board--wall .ptw-card__type, .ptw-board--wall .ptw-card__meta { font: var(--os-type-body); }

@media (max-width: 640px) {
  .ptw-items li { grid-template-columns: minmax(0, 1fr); }
  .ptw-facts { grid-template-columns: minmax(0, 1fr); }
  .ptw-board, .ptw-board--wall { grid-template-columns: minmax(0, 1fr); }
  .ptw-row-actions { justify-content: flex-start; }
}

/* ---- V1.69 the premium pass (mockup 24): the overview, the site plan, the clock, the phone's My permits, the tags' labels ---- */
.ptw-page .os-grid { align-items: start; }
.ptw-pick { width: auto; min-width: 140px; }
.ptw-mono { font: var(--os-type-mono); font-variant-numeric: tabular-nums; }
.ptw-nowrap { white-space: nowrap; }
.ptw-click { cursor: pointer; }
.ptw-clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ptw-error { color: var(--os-bad-text); font: var(--os-type-small); }
.ptw-st { font: var(--os-type-caption); color: var(--os-text-2); }
.ptw-st--bad { color: var(--os-bad-text); }
.ptw-st--warn { color: var(--os-warn-text); }
.ptw-st--good { color: var(--os-good-text); }
.ptw-inline--top { margin-top: 0; }

/* The overview's columns: 8 + 4, 5 + 7; the panels of a column stack, the last one fills what is left */
.ptw-col { --span: 4; display: flex; flex-direction: column; gap: var(--os-gutter); min-width: 0; }
.ptw-col.ptw-col--8 { --span: 8; }
.ptw-col.ptw-col--5 { --span: 5; }
.ptw-col.ptw-col--7 { --span: 7; }
.ptw-page .os-grid.ptw-ovgrid { align-items: stretch; }
.ptw-ovgrid > .ptw-col > :last-child { flex: 1 1 auto; }
.ptw-ovgrid > .ptw-col > div > .os-panel, .ptw-ovgrid > .ptw-col > div > .ptw-brief { height: 100%; }
.ptw-page .os-panel--flush > .os-panel__foot, .ptw-page .os-panel__foot { flex-wrap: wrap; }
.ptw-page .os-panel--flush > .os-panel__foot { padding-left: var(--os-space-4); padding-right: var(--os-space-4); }

/* The figures under a panel */
.ptw-stats { display: flex; flex-wrap: wrap; gap: var(--os-space-3) var(--os-space-5); margin: 0; width: 100%; }
.ptw-stats > div { display: grid; gap: var(--os-space-1); padding-right: var(--os-space-5); border-right: var(--os-border-w) solid var(--os-border-subtle); }
.ptw-stats > div:last-child { border-right: 0; }
.ptw-stats dt { font: var(--os-type-caption); color: var(--os-text-2); }
.ptw-stats dd { margin: 0; font: var(--os-type-kpi-sm); color: var(--os-text); font-variant-numeric: tabular-nums; }
.ptw-stats dd.is-bad { color: var(--os-bad-text); }

/* The states' colours (map tags, legend, clock bars) */
.ptw-legend { display: flex; flex-wrap: wrap; gap: var(--os-space-2) var(--os-space-3); list-style: none; margin: 0; padding: 0; font: var(--os-type-caption); color: var(--os-text-2); }
.ptw-legend li { display: inline-flex; align-items: center; gap: var(--os-space-1); }
.ptw-sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; border: var(--os-border-w-strong) solid transparent; }
.ptw-sw--a { background: var(--os-good); border-color: var(--os-good); }
.ptw-sw--s { background: var(--os-warn); border-color: var(--os-warn); }
.ptw-sw--i { background: var(--os-surface); border-color: var(--os-info); border-style: dashed; }
.ptw-sw--x { background: var(--os-bad); border-color: var(--os-bad); }

/* The site plan: the areas, a tag per permit */
.ptw-map { display: block; width: 100%; height: auto; font-family: var(--os-chart-font); }
.ptw-map__plan { opacity: .55; }
.ptw-map__area { cursor: pointer; }
.ptw-map__area > rect { fill: var(--os-surface-sunken); stroke: var(--os-border); stroke-width: 1.5; }
.ptw-map__area.is-alert > rect { fill: var(--os-bad-soft); stroke: var(--os-bad); }
.ptw-map__area.is-picked > rect { stroke: var(--os-accent); stroke-width: 3; }
.ptw-map__area:hover > rect { stroke: var(--os-border-strong); }
.ptw-map__name { fill: var(--os-text); font-weight: 600; }
.ptw-map__sub { fill: var(--os-text-2); }
.ptw-map__tag rect { stroke-width: 1.5; }
.ptw-map__tag text { font-weight: 600; font-variant-numeric: tabular-nums; }
.ptw-map__tag--a rect { fill: var(--os-good-soft); stroke: var(--os-good); }
.ptw-map__tag--a text { fill: var(--os-good-text); }
.ptw-map__tag--s rect { fill: var(--os-warn-soft); stroke: var(--os-warn); }
.ptw-map__tag--s text { fill: var(--os-warn-text); }
.ptw-map__tag--i rect { fill: var(--os-surface); stroke: var(--os-info); stroke-dasharray: 3 2; }
.ptw-map__tag--i text { fill: var(--os-info-text); }
.ptw-map__tag--x rect { fill: var(--os-bad); stroke: var(--os-bad); }
.ptw-map__tag--x text { fill: var(--os-surface); }
.ptw-unplaced { list-style: none; margin: var(--os-space-3) 0 0; padding: 0; display: grid; gap: var(--os-space-2); }
.ptw-unplaced li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.ptw-chip { display: inline-flex; padding: 0 var(--os-space-2); border-radius: var(--os-radius-sm); border: var(--os-border-w-strong) solid var(--os-good); background: var(--os-good-soft);
  color: var(--os-good-text); font: var(--os-type-caption); text-decoration: none; }
.ptw-chip--s { border-color: var(--os-warn); background: var(--os-warn-soft); color: var(--os-warn-text); }
.ptw-chip--i { border-color: var(--os-info); border-style: dashed; background: var(--os-surface); color: var(--os-info-text); }
.ptw-chip--x { border-color: var(--os-bad); background: var(--os-bad); color: var(--os-surface); }

/* Needs attention now */
.ptw-alist { list-style: none; margin: 0; padding: 0; }
.ptw-alist li { display: flex; align-items: flex-start; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.ptw-alist li:first-child { border-top: 0; }
.ptw-alist li > div { display: grid; gap: var(--os-space-1); flex: 1; min-width: 0; }
.ptw-alist li > .os-btn { flex: none; }
.ptw-alist__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--os-space-2); min-width: 0; overflow-wrap: anywhere; }
.ptw-alist__icon { display: inline-flex; padding: var(--os-space-1h); border-radius: var(--os-radius-md); background: var(--os-neutral-soft); color: var(--os-neutral-text); }
.ptw-alist__icon--warn { background: var(--os-warn-soft); color: var(--os-warn-text); }
.ptw-alist__icon--bad { background: var(--os-bad-soft); color: var(--os-bad-text); }
.ptw-alist__icon--info { background: var(--os-info-soft); color: var(--os-info-text); }

/* Today's permits on the clock */
.ptw-clock { display: block; width: 100%; height: auto; font-family: var(--os-chart-font); }
.ptw-clock__shift { fill: var(--os-chart-shift); }
.ptw-clock__grid { stroke: var(--os-chart-grid); stroke-width: 1; }
.ptw-clock__lbl { fill: var(--os-chart-label); }
.ptw-clock__area { fill: var(--os-text); font-weight: 600; }
.ptw-clock__num { fill: var(--os-text-2); font-variant-numeric: tabular-nums; }
.ptw-clock__row { cursor: pointer; }
.ptw-clock__bar { fill: var(--os-good); opacity: .85; }
.ptw-clock__bar--suspended { fill: var(--os-warn); opacity: .9; }
.ptw-clock__bar--alert { fill: var(--os-bad); opacity: .9; }
.ptw-clock__bar--past { fill: var(--os-good); opacity: .45; }
.ptw-clock__bar--issued { fill: var(--os-info-soft); stroke: var(--os-info); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 1; }
.ptw-clock__late { stroke: var(--os-bad); stroke-width: 3; stroke-dasharray: 5 4; }
.ptw-clock__latetext { fill: var(--os-bad-text); font-weight: 500; paint-order: stroke; stroke: var(--os-surface); stroke-width: 4px; stroke-linejoin: round; }
.ptw-clock__gas { fill: var(--os-text); stroke: var(--os-surface); stroke-width: 1.5; }
.ptw-clock__gas.is-bad { fill: var(--os-bad); }
.ptw-clock__now { stroke: var(--os-text); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ptw-clock__nowtext { fill: var(--os-text); font-weight: 600; paint-order: stroke; stroke: var(--os-surface); stroke-width: 4px; stroke-linejoin: round; }

/* The brief, the chart's peak, the isolations table */
.ptw-brief { display: grid; gap: var(--os-gutter); align-content: start; }
.ptw-brief__state { margin: 0; }
.ptw-peak { margin: 0 0 var(--os-space-1); text-align: center; }
.ptw-tablewrap { overflow-x: auto; }
.ptw-isotable td { vertical-align: middle; }
.ptw-isotable td > .ptw-cellmain { display: block; }
.ptw-isotable .os-tag { margin-right: var(--os-space-1); }
.ptw-energy { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; margin-right: var(--os-space-1); padding: 0 var(--os-space-1);
  border-radius: var(--os-radius-sm); background: var(--os-surface-sunken); color: var(--os-text-2); font: var(--os-type-mono); }

/* The phone: My permits (and a permit's Crew and locks) */
.ptw-phone-only { display: none; }
.ptw-mine { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--os-space-3); min-width: 0; }
.ptw-mine > *, .ptw-fcard > *, .ptw-crew > *, .ptw-iso__head > *, .ptw-boxphoto > * { min-width: 0; }
.ptw-fcard, .ptw-fcard * { overflow-wrap: anywhere; }
.ptw-mine__head { display: grid; gap: var(--os-space-1); }
.ptw-mine__head b { font: var(--os-type-h3); color: var(--os-text); }
.ptw-mine__bar { position: sticky; bottom: 0; display: flex; gap: var(--os-space-2); padding: var(--os-space-3) 0; background: var(--os-surface); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.ptw-mine__bar .os-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: normal; text-align: center; }
.ptw-mineline { display: flex; align-items: center; gap: var(--os-space-2); padding: var(--os-space-3) var(--os-space-4); border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-lg);
  background: var(--os-surface); color: var(--os-text); text-decoration: none; }
.ptw-mineline > span { display: grid; gap: var(--os-space-1); flex: 1; min-width: 0; }
.ptw-mineline__state { display: inline-flex; align-items: center; gap: var(--os-space-1); color: var(--os-warn-text); font: var(--os-type-small); }
.ptw-fcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--os-space-3); padding: var(--os-space-4); border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-lg); background: var(--os-surface); }
.ptw-fcard.is-alert { border-color: var(--os-bad-border); }
.ptw-fcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.ptw-fcard__title { font: var(--os-type-h3); color: var(--os-text); text-decoration: none; overflow-wrap: anywhere; }
.ptw-fcard__meta { margin: 0; color: var(--os-text-2); font: var(--os-type-small); }
.ptw-chips { display: flex; flex-wrap: wrap; gap: var(--os-space-2); }
.ptw-flag { display: inline-flex; align-items: center; gap: var(--os-space-1); padding: var(--os-space-1) var(--os-space-2); border-radius: var(--os-radius-pill); font: var(--os-type-small); }
.ptw-flag--warn { background: var(--os-warn-soft); color: var(--os-warn-text); }
.ptw-flag--bad { background: var(--os-bad-soft); color: var(--os-bad-text); }
.ptw-crew { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-3); padding-top: var(--os-space-3); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.ptw-crew__text { display: grid; gap: var(--os-space-1); flex: 1 1 140px; }
.ptw-avatars { display: flex; }
.ptw-avatars .ptw-avatar + .ptw-avatar { margin-left: calc(var(--os-space-2) * -1); }
.ptw-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--os-radius-pill); border: var(--os-border-w-strong) solid var(--os-surface);
  background: var(--os-accent-soft); color: var(--os-accent-text); font: var(--os-type-caption); flex: none; }
.ptw-avatar.is-off { background: var(--os-surface-sunken); color: var(--os-text-3); }
.ptw-signon { display: grid; gap: var(--os-space-2); padding: var(--os-space-3); border-radius: var(--os-radius-md); background: var(--os-surface-sunken); }
.ptw-crewlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--os-space-2); }
.ptw-crewlist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.ptw-crewlist__who { display: grid; flex: 1 1 160px; min-width: 0; }
.ptw-iso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--os-space-2); padding-top: var(--os-space-3); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.ptw-iso__head { display: flex; align-items: center; gap: var(--os-space-2); }
.ptw-iso__head a { color: var(--os-text); text-decoration: none; }
.ptw-checks { list-style: none; margin: 0; padding: 0; }
.ptw-checks li { display: flex; align-items: flex-start; gap: var(--os-space-3); padding: var(--os-space-2) 0; border-bottom: var(--os-border-w) solid var(--os-border-subtle); }
.ptw-checks li:last-child { border-bottom: 0; }
.ptw-checks__text { display: grid; gap: var(--os-space-1); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ptw-tick { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: var(--os-radius-sm);
  border: var(--os-border-w-strong) solid var(--os-border-strong); background: var(--os-surface); color: var(--os-surface); }
.ptw-tick.is-on { background: var(--os-good); border-color: var(--os-good); }
.ptw-boxphoto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-3); padding: var(--os-space-3); border-radius: var(--os-radius-md); background: var(--os-surface-sunken); }
.ptw-boxphoto img { width: 4rem; height: 3rem; object-fit: cover; border-radius: var(--os-radius-sm); }
.ptw-boxphoto__icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 3rem; border-radius: var(--os-radius-sm); background: var(--os-warn-soft); color: var(--os-bad-text); }
.ptw-boxphoto__text { display: grid; gap: var(--os-space-1); flex: 1 1 140px; }
.ptw-photopick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.ptw-photopick__add { position: relative; cursor: pointer; }
.ptw-photopick__error { color: var(--os-bad-text); font: var(--os-type-small); }
.ptw-thumb { position: relative; margin: 0; }
.ptw-thumb img { width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--os-radius-sm); }
.ptw-thumb__x { position: absolute; top: 0; right: 0; }
.ptw-photos { list-style: none; margin: var(--os-space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--os-space-3); }
.ptw-photos li { display: grid; gap: var(--os-space-1); }
.ptw-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--os-radius-sm); }

/* Scan a tag */
.ptw-overlay { position: fixed; inset: 0; z-index: var(--os-z-dialog); display: flex; align-items: center; justify-content: center; padding: var(--os-space-4); background: var(--os-scrim); }
.ptw-scan__video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--os-radius-md); background: var(--os-surface-sunken); }
.ptw-scan .os-field { display: grid; gap: var(--os-space-1); margin-top: var(--os-space-3); }

/* Settings, the QR labels */
.ptw-settings__boxes { --span: 6; }
.ptw-settings__rules { --span: 6; }
.ptw-rules { margin: var(--os-space-3) 0 0; padding-left: var(--os-space-5); color: var(--os-text-2); }
.ptw-boxcode { width: auto; flex: 0 1 160px; }
.ptw-labels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--os-space-3); }
.ptw-label { display: grid; justify-items: center; gap: var(--os-space-1); padding: var(--os-space-3); border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-md); background: var(--os-surface); text-align: center; }
.ptw-label.is-on { border-color: var(--os-accent); }
.ptw-label__pick { justify-self: start; display: inline-flex; gap: var(--os-space-1); align-items: center; font: var(--os-type-caption); }
.ptw-label__qr { width: 9rem; height: 9rem; }
.ptw-label__bg { fill: var(--os-surface); }
.ptw-label__dots { fill: var(--os-text); }
@media print {
    .ptw-noprint, .os-pagehead, .os-appheader { display: none; }
    .ptw-label { break-inside: avoid; border-color: var(--os-border-strong); }
}

@media (max-width: 639.98px) {
    .ptw-phone-only { display: block; }
    .ptw-phone-only.ptw-hidden, .ptw-phone-hide { display: none; }
    .ptw-phone-switch .os-seg { width: 100%; }
    .ptw-stats > div { border-right: 0; padding-right: 0; }
    .ptw-settings__boxes, .ptw-settings__rules { --span: 12; }
}

/* ---- V1.69 the site setup shared by the apps (Shared\Sites\SiteSetupEditor.razor) ---- */
.site-setup { align-items: start; }
.site-setup__shifts { --span: 5; }
.site-setup__areas { --span: 7; }
.site-setup__table td { vertical-align: middle; }
.site-setup__table tr.is-picked td { background: var(--os-surface-selected); }
.site-setup__code { width: 6.5rem; }
.site-setup__num { width: 5.5rem; }
.site-setup__plan { display: grid; gap: var(--os-space-2); margin-bottom: var(--os-space-3); }
.site-setup__preview { display: block; width: 100%; height: auto; border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-md); }
.site-setup__blank { fill: var(--os-surface-sunken); }
.site-setup__area { cursor: pointer; }
.site-setup__area rect { fill: var(--os-accent-soft); fill-opacity: .6; stroke: var(--os-accent); stroke-width: 2; }
.site-setup__area.is-picked rect { stroke-width: 4; }
.site-setup__area text { fill: var(--os-text); font-weight: 600; }
.site-setup__planbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
@media (max-width: 1099.98px) {
    .site-setup__shifts, .site-setup__areas { --span: 12; }
}