/* Settings. The content width decides the layout, so a phone and a
   narrow window beside the sidebar use the same stacked composition. */
#page-settings {
  --set-surface: #131D2D;
  --set-border: #27344B;
  --set-input: #192438;
  --set-radius: 10px;
  container-name: setpage;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  color: var(--rc-text);
}

html.rc-light #page-settings {
  --set-surface: var(--rc-surface);
  --set-border: var(--rc-border);
  --set-input: var(--rc-surface-control);
}

#page-settings .set-head h1 {
  margin: 0;
}

#page-settings .set-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

#page-settings .set-nav {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#page-settings .set-main {
  min-width: 0;
}

#page-settings .set-section-pick,
#page-settings .set-tab-pick,
#page-settings .set-day-pick {
  display: none;
}

#page-settings .set-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--set-border);
  border-radius: 0;
}

#page-settings .set-tabs .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 10px 12px;
  text-align: center;
  color: var(--rc-text-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: -1px;
}

#page-settings .set-tabs .tab.on {
  color: var(--rc-text);
  background: transparent;
  border-bottom-color: var(--rc-brand);
  box-shadow: none;
}

#page-settings .set-tab-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

#page-settings #cl-back,
#page-settings .rs-admin-edit {
  display: none;
}

#page-settings #cl-edit:has(#cl-pane-tasks.h) #cl-add-csv,
#page-settings #cl-edit:has(#cl-pane-tasks.h) #cl-add-item {
  display: none;
}

#integ-board:not(.is-managing) .integ-grid > details > :not(summary),
#integ-board:not(.is-managing) #settings-deputy details > :not(summary) {
  display: none;
}

#integ-board:not(.is-managing) .integ-grid {
  align-items: stretch;
}

#integ-board:not(.is-managing) .integ-grid > details,
#integ-board:not(.is-managing) #settings-deputy {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 16px;
}

#integ-board:not(.is-managing) summary.integ-summary.hq-disclosure {
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0;
}

#integ-board:not(.is-managing) .integ-summary-main,
#integ-board:not(.is-managing) .integ-summary .row,
#integ-board:not(.is-managing) .staff-admin-heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 8px;
}

#integ-board:not(.is-managing) summary h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
}

#integ-board:not(.is-managing) summary h2::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--set-input);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

#integ-board:not(.is-managing) summary h2::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}

#integ-board:not(.is-managing) [data-integ="xero"] > summary h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='10' fill='%2313B5EA'/%3E%3Cpath d='M8 21c2.4-5 5.2-5 7.6 0s5.2 5 7.6 0 5.2-5 4.8 0' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
#integ-board:not(.is-managing) [data-integ="square"] > summary h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='8' fill='%23111'/%3E%3Crect x='10' y='10' width='16' height='16' rx='2.5' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E"); }
#integ-board:not(.is-managing) [data-integ="instagram"] > summary h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cdefs%3E%3ClinearGradient id='ig' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop stop-color='%23FBBF24'/%3E%3Cstop offset='.45' stop-color='%23E1306C'/%3E%3Cstop offset='1' stop-color='%236D28D9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='36' height='36' rx='10' fill='url(%23ig)'/%3E%3Crect x='9' y='9' width='18' height='18' rx='5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='18' cy='18' r='4.2' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='24.2' cy='12' r='1.3' fill='%23fff'/%3E%3C/svg%3E"); }
#integ-board:not(.is-managing) [data-integ="google"] > summary h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='10' fill='%23fff'/%3E%3Cpath d='M18 18h10a10 10 0 0 0-3.2-8.4z' fill='%234285F4'/%3E%3Cpath d='M18 18v10a10 10 0 0 0 8.4-5.2z' fill='%2334A853'/%3E%3Cpath d='M18 18H8a10 10 0 0 0 5.2 8.4z' fill='%23C30D19'/%3E%3Cpath d='M18 18V8a10 10 0 0 0-8.4 6.6z' fill='%23FBBC05'/%3E%3Ccircle cx='18' cy='18' r='4' fill='%23fff'/%3E%3C/svg%3E"); }
#integ-board:not(.is-managing) [data-integ="restoke"] > summary h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='10' fill='%23F97316'/%3E%3Cpath d='M10 16h16v7a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2z' fill='%23fff'/%3E%3Cpath d='M13 16c0-3.2 10-3.2 10 0' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
#integ-board:not(.is-managing) [data-integ="staff-clock"] > summary h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='10' fill='%236D28D9'/%3E%3Ccircle cx='18' cy='18' r='7.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M18 13.5V18l3.5 2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

#integ-board:not(.is-managing) summary h2 .set-status {
  margin-left: auto;
}

#integ-board:not(.is-managing) .integ-summary .mut {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#integ-board:not(.is-managing) #xero-status,
#integ-board:not(.is-managing) #square-status,
#integ-board:not(.is-managing) #istatus {
  display: block;
  margin-top: 4px;
  color: var(--rc-text-muted);
  font-size: 13px;
  line-height: 1.35;
}

#integ-board:not(.is-managing) #inv-settings-status,
#integ-board:not(.is-managing) #staff-clock-admin-status,
#integ-board:not(.is-managing) #staff-clock-conn,
#integ-board:not(.is-managing) #staff-clock-map,
#integ-board:not(.is-managing) #staff-clock-tablets {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#integ-board #integ-accounts > #settings-deputy,
#integ-board #integ-accounts > #settings-deputy > #staff-clock-setup {
  display: contents;
}

#integ-board.is-managing .integ-manage { display: none; }

#integ-board.is-managing [data-integ="google"] > details:not(.is-google-on) { display: none; }

#integ-board.is-managing .integ-summary .row {
  flex-wrap: wrap;
  align-items: center;
}

#page-settings .integ-block.integ-section {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#integ-board:not(.is-managing) summary .btn:not(.integ-manage),
#integ-board:not(.is-managing) summary .sectionlabel {
  display: none;
}

#integ-board:not(.is-managing) .integ-manage {
  width: 100%;
  margin-top: auto;
}

#integ-board.is-managing .set-checks {
  display: none;
}

#page-settings .res-editor-box {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
}

#page-settings .res-editor-box > h2,
#page-settings .res-editor-box > .mut {
  grid-column: 1 / -1;
}

#page-settings .box,
#page-settings .integ-section {
  background: var(--set-surface);
  border: 1px solid var(--set-border);
  border-radius: var(--set-radius);
}

#page-settings .integ-section {
  margin: 0 0 12px;
  padding: 4px 16px 12px;
}

#page-settings .integ-body,
#page-settings .field,
#page-settings .prod-field {
  min-width: 0;
}

#page-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
#page-settings select,
#page-settings textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--set-border);
  border-radius: var(--set-radius);
  background: var(--set-input);
  color: var(--rc-text);
  font-size: 16px;
}

#page-settings textarea {
  min-height: 96px;
  resize: vertical;
}

#page-settings input[type="color"] {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--set-border);
  border-radius: 8px;
  background: transparent;
}

#page-settings input,
#page-settings select,
#page-settings textarea,
#page-settings .btn {
  scroll-margin-top: 96px;
  scroll-margin-bottom: 112px;
}

#page-settings .btn,
#page-settings .cl-drag,
#page-settings .rs-admin-handle,
#page-settings .prod-ing-drag,
#page-settings .prod-weekbar .btn,
#page-settings .prod-week-nav {
  min-height: 48px;
  min-width: 48px;
}

#page-settings .prod-week-nav {
  width: 48px;
}

#page-settings .user-actions,
#page-settings .roles-toolbar .user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#page-settings #uedit .user-actions,
#page-settings #cl-edit .user-actions,
#page-settings #res-guide-form .user-actions,
#page-settings #res-allergen-form .user-actions,
#page-settings #res-facts-form .user-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 12px;
  padding: 12px 0;
  background: var(--set-surface);
}

#page-settings #udelete {
  margin-right: auto;
}

#page-settings .set-drop {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 20px 16px;
  border: 1.5px dashed rgba(52, 211, 153, 0.35);
  border-radius: var(--set-radius);
  background: rgba(16, 185, 129, 0.08);
  text-align: center;
}

#page-settings .set-drop:focus-visible,
#page-settings .set-drop.is-over {
  border-color: var(--rc-success);
  outline: 3px solid var(--rc-focus);
  outline-offset: 2px;
}

#page-settings .set-drop.is-busy {
  border-style: solid;
}

#page-settings .set-drop.is-ok {
  border-style: solid;
  border-color: var(--rc-success);
}

#page-settings .set-drop.is-bad {
  border-style: solid;
  border-color: var(--rc-brand);
  background: var(--rc-brand-soft);
}

#page-settings .set-drop-copy {
  display: grid;
  gap: 4px;
}

#page-settings .set-drop-copy b {
  color: var(--rc-success);
  font-size: 16px;
}

#page-settings .set-drop-copy span,
#page-settings .set-drop .mut {
  color: var(--rc-text-muted);
}

#page-settings .hq-logo-preview {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 88px;
}

#page-settings .hq-logo-preview img {
  display: block;
  width: auto;
  max-width: 220px;
  height: 64px;
  object-fit: contain;
}

#page-settings summary.integ-summary.hq-disclosure {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 0;
  color: var(--rc-text);
  font-size: inherit;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

#page-settings summary.integ-summary.hq-disclosure::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

#page-settings details[open] > summary.integ-summary.hq-disclosure::before {
  transform: rotate(45deg);
}

#page-settings .integ-summary-main {
  flex: 1 1 auto;
  min-width: 0;
}

#page-settings .set-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 28px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

#page-settings .set-status.is-ok {
  color: var(--rc-success);
  background: rgba(16, 185, 129, 0.12);
}

#page-settings .set-status.is-warn {
  color: var(--rc-warning);
  background: rgba(251, 191, 36, 0.12);
}

#page-settings .set-status.is-setup {
  color: var(--rc-text-muted);
  background: transparent;
  border: 1px solid var(--set-border);
}

#page-settings .btn-connect-on,
#page-settings .btn-connect-off {
  background: var(--set-input);
  color: var(--rc-text);
  border: 1px solid var(--set-border);
}

#page-settings .set-reorder,
#page-settings .prod-ing-order {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
}

#page-settings .set-nudge {
  padding: 0 12px;
}

#page-settings .prod-ing-row {
  grid-template-columns: minmax(180px, auto) minmax(0, 1.4fr) minmax(96px, 120px) minmax(96px, 120px) auto;
}

#page-settings .prod-ing-row.is-cook,
#page-settings .prod-ing-row.is-step {
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
}

#page-settings .prod-menu-status.short {
  color: var(--rc-warning);
}

#page-settings .set-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

#page-settings .set-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

#page-settings .set-card-head h2 {
  margin: 0;
}

#page-settings .set-scope {
  color: var(--rc-text-muted);
  font-size: 12px;
  font-weight: 750;
}

#page-settings .set-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-settings .set-theme {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 48px;
  padding: 10px;
  border: 1px solid var(--set-border);
  border-radius: var(--set-radius);
  background: var(--set-input);
  color: var(--rc-text);
  cursor: pointer;
}

#page-settings .set-theme.on {
  border-color: var(--rc-brand);
  box-shadow: inset 0 0 0 1px var(--rc-brand);
}

#page-settings .set-theme-preview {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  width: 100%;
  height: 112px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--set-border);
}

#page-settings .set-theme.on .set-theme-preview {
  box-shadow: inset 0 0 0 2px var(--rc-brand);
}

#page-settings .set-theme-preview.is-dark { background: #131D2D; color: #94A3B8; }
#page-settings .set-theme-preview.is-light { background: #fff; color: #64748B; }
#page-settings .set-theme-preview.is-dark .set-theme-side { background: #0B1120; }
#page-settings .set-theme-preview.is-light .set-theme-side { background: #E8EEF5; }
#page-settings .set-theme-main { display: grid; align-content: center; gap: 6px; padding: 10px; }
#page-settings .set-theme-bar,
#page-settings .set-theme-line { display: block; height: 6px; border-radius: 99px; background: currentColor; opacity: 0.45; }
#page-settings .set-theme-bar { width: 70%; background: var(--rc-brand); opacity: 1; }
#page-settings .set-theme-line.is-short { width: 46%; }

#page-settings .set-theme.on .set-theme-preview::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  background: var(--rc-brand);
}

#page-settings .set-theme.on .set-theme-preview::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 11px;
  right: 9px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

#page-settings .set-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--rc-success);
  font-size: 13px;
  font-weight: 750;
}

#page-settings .set-saved::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 99px;
  background: var(--rc-success);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--rc-success) 25%, transparent);
}

#page-settings .set-about { margin-top: 8px; }
#page-settings .set-about > .note,
#page-settings .set-about > .mut { margin-top: 8px; }

#page-settings #hq-logo-drop {
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

#page-settings #hq-logo-drop .hq-logo-preview {
  min-height: 148px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--rc-success) 32%, var(--set-input));
}

#page-settings #hq-logo-drop.is-ok,
#page-settings #hq-logo-drop.is-over,
#page-settings #hq-logo-drop:focus-visible {
  border-color: var(--rc-success);
}

#page-settings #hq-logo-drop.is-bad {
  border-color: var(--rc-brand);
  background: var(--rc-brand-soft);
}

#page-settings #hq-branding .user-actions {
  width: 100%;
  margin: 0;
}

#page-settings #hq-branding #hq-logo-choose {
  width: 100%;
  color: #fff;
  background: var(--rc-brand);
  border-color: var(--rc-brand);
}
#page-settings #hq-branding .set-drop-copy { display: none; }

#page-settings .set-checks {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

#page-settings .set-checks li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

#page-settings .set-checks b { font-weight: 750; color: var(--rc-text-muted); }
#page-settings .set-checks .is-ok b { color: var(--rc-success); }
#page-settings .set-checks .is-warn b,
#page-settings .set-checks .is-setup b { color: var(--rc-warning, #FBBF24); }

#page-settings .integ-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

#integ-board.is-managing .integ-grid {
  display: block;
}

#integ-board.is-managing .integ-grid > details:not([open]),
#integ-board.is-managing #settings-deputy:not(.is-on) {
  display: none;
}

#integ-board:not(.is-managing) .integ-body {
  display: none;
}

#integ-board:not(.is-managing) summary.integ-summary.hq-disclosure::before {
  display: none;
}

#page-settings .integ-manage {
  margin-top: 8px;
}

#page-settings .cl-builder {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#page-settings #cl-edit-items .cl-edit-item:not(.is-open) .cl-item-instructions,
#page-settings #cl-edit-items .cl-edit-item:not(.is-open) .cl-edit-photo,
#page-settings #cl-edit-items .cl-edit-item:not(.is-open) .cl-photo-pick,
#page-settings #cl-edit-items .cl-edit-item:not(.is-open) .cl-edit-actions {
  display: none;
}

#page-settings .prod-pizza-save,
#page-settings .prod-pizza-add {
  background: var(--rc-brand);
  border-color: var(--rc-brand);
  color: #fff;
}

#page-settings .prod-menu-status.is-done {
  color: var(--rc-success);
}

#page-settings .rs-color-card {
  box-shadow: inset 4px 0 0 var(--rs-cat, transparent);
}

#page-settings .rs-color-card strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page-settings .rs-color-card {
  box-shadow: inset 4px 0 0 var(--rs-cat, transparent);
}

#page-settings .rs-color-card strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page-settings .rs-color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 99px;
  background: var(--rs-cat, var(--rc-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rs-cat, var(--rc-border)) 28%, transparent);
}

#page-settings .rs-admin-cat td {
  background: color-mix(in srgb, var(--rs-cat, var(--rc-border)) 22%, var(--set-surface));
  color: var(--rc-text);
}

#page-settings .usergrid,
#page-settings .prod-input-grid,
#page-settings .roles-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
}

#page-settings .roles-toolbar .user-actions,
#page-settings .usergrid .field:last-child,
#page-settings .checkline {
  grid-column: 1 / -1;
}

@container setpage (max-width: 1100px) {
  #page-settings .integ-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container setpage (max-width: 799px) {
  #page-settings .set-head .mut,
  #page-settings .set-lead {
    display: none;
  }

  #page-settings .integ-grid,
  #page-settings .cl-builder,
  #page-settings .set-pair,
  #page-settings .res-editor-box {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-settings #cl-back,
  #page-settings .rs-admin-edit {
    display: inline-flex;
  }

  #page-settings #res-settings-facts.is-editing .res-admin-list,
  #page-settings #res-settings-allergen.is-editing .res-admin-list,
  #page-settings #res-settings-guides.is-editing .res-admin-list,
  #page-settings #res-settings-allergen.is-editing #res-settings-allergen-search {
    display: none;
  }

  #page-settings .set-nav {
    position: static;
  }

  #page-settings .set-tabs {
    display: none;
  }

  #page-settings .set-section-pick,
  #page-settings .set-nested .set-tab-pick,
  #page-settings .set-day-pick {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
  }

  #page-settings .set-nested .tabs {
    display: none;
  }

  #page-settings .set-day-pick {
    max-width: 100%;
  }

  #page-settings #prod-schedule-edit:has(.is-day-on) > .prod-schedule-card:not(.is-day-on),
  #page-settings #prod-override-grid:has(.is-day-on) > .prod-override-day:not(.is-day-on),
  #page-settings #prod-menu-grid:has(.is-day-on) > .prod-menu-day:not(.is-day-on) {
    display: none;
  }

  #page-settings .usergrid,
  #page-settings .prod-input-grid,
  #page-settings .roles-toolbar,
  #page-settings .prod-schedule-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-settings .set-role-group {
    margin: 0 0 8px;
    padding: 8px 12px;
    border: 1px solid var(--set-border);
    border-radius: var(--set-radius);
    background: var(--set-input);
  }

  #page-settings .set-role-group > summary {
    display: flex;
    min-height: 48px;
  }

  #page-settings .set-role-group .permgroup > h3 {
    display: none;
  }

  #page-settings #uedit .user-actions .btn,
  #page-settings .row > .btn,
  #page-settings #cl-new,
  #page-settings #unew,
  #page-settings #prod-schedule-save,
  #page-settings #prod-pizza-add {
    width: 100%;
    align-self: start;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  #page-settings #prod-override-save {
    width: auto;
    align-self: start;
    height: 48px;
    white-space: nowrap;
  }

  #page-settings #usave { order: 0; }
  #page-settings #ucancel { order: 1; }
  #page-settings #udelete { order: 2; margin-right: 0; }

  #page-settings .tbl {
    display: block;
    width: 100%;
    border: 0;
  }

  #page-settings .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  #page-settings .tbl tbody,
  #page-settings .tbl tr,
  #page-settings .tbl td {
    display: block;
    width: auto;
  }

  #page-settings .tbl tr {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: var(--set-input);
    border: 1px solid var(--set-border);
    border-radius: var(--set-radius);
    min-width: 0;
  }

  #page-settings .tbl td {
    display: grid;
    grid-template-columns: minmax(96px, 42%) minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    padding: 8px 0;
    border: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: right;
  }

  #page-settings .tbl td::before {
    content: attr(data-label);
    color: var(--rc-text-muted);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #page-settings .tbl td:not([data-label])::before {
    content: none;
  }

  #page-settings .tbl td > input,
  #page-settings .tbl td > select,
  #page-settings .tbl td > .cl-row-actions,
  #page-settings .tbl td > .rs-admin-actions,
  #page-settings .tbl td > .set-reorder {
    flex: 1 1 auto;
    min-width: 0;
  }

  #page-settings .tbl tr.rs-admin-cat {
    padding: 4px 0;
    background: transparent;
    border: 0;
  }

  #page-settings .set-people td[data-label="Email"],
  #page-settings .set-people td[data-label="Status"] {
    display: none;
  }

  #page-settings .set-people td {
    display: block;
    padding: 2px 0;
    text-align: left;
  }

  #page-settings .set-people td::before {
    content: none;
  }

  #page-settings .rs-admin-tbl tr:not(.is-editing):not(.rs-admin-draft):not(.rs-admin-cat) td:not([data-label="Name"]):not([data-label="Action"]) {
    display: none;
  }

  #page-settings .rs-admin-tbl tr:not(.is-editing):not(.rs-admin-draft):not(.rs-admin-cat) td::before {
    content: none;
  }

  #page-settings .rs-admin-tbl tr:not(.is-editing):not(.rs-admin-draft) .rs-admin-summary { display: block; font-weight: 750; }
  #page-settings .rs-admin-tbl tr:not(.is-editing):not(.rs-admin-draft) .rs-admin-meta { display: block; color: var(--rc-text-muted); font-size: 12px; }
  #page-settings .rs-admin-tbl tr:not(.is-editing):not(.rs-admin-draft) [data-rs-field] { display: none; }

  #settings-checklists.is-editing .cl-list-pane {
    display: none;
  }

  #page-settings .row {
    align-items: start;
  }

  #page-settings .prod-ing-row {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "order name name" "full full half" "remove remove remove";
  }

  #page-settings .prod-ing-row.is-cook,
  #page-settings .prod-ing-row.is-step {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "order name" "help help" "remove remove";
  }

  #page-settings .prod-ing-order-field { grid-area: order; }
  #page-settings .prod-ing-name { grid-area: name; }
  #page-settings .prod-ing-full { grid-area: full; }
  #page-settings .prod-ing-half { grid-area: half; }
  #page-settings .prod-ing-cook { grid-area: help; }
  #page-settings .prod-ing-move {
    grid-area: remove;
    display: flex;
    flex-wrap: nowrap;
  }

  #page-settings .set-reorder,
  #page-settings .prod-ing-order {
    flex-wrap: nowrap;
  }

  #page-settings .set-nudge {
    width: auto;
    white-space: nowrap;
  }
}

#page-settings .prod-matrix-head,
#page-settings .prod-matrix-sub {
  display: none;
}

@container setpage (min-width: 900px) {
  #page-settings #prod-schedule-edit {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: auto;
  }

  #page-settings .prod-matrix-head,
  #page-settings .prod-matrix-sub,
  #page-settings #prod-schedule-edit > .prod-schedule-card {
    display: grid;
    grid-template-columns: 108px repeat(8, minmax(72px, 1fr));
    gap: 6px;
    align-items: center;
    min-width: 860px;
  }

  #page-settings .prod-matrix-head .is-make { grid-column: 2 / span 3; background: #0F766E; }
  #page-settings .prod-matrix-head .is-cook { grid-column: 5 / span 3; background: #059669; }
  #page-settings .prod-matrix-head .is-display { grid-column: 8 / span 2; background: #6D28D9; }

  #page-settings .prod-matrix-head span:not(:empty) {
    padding: 8px 6px;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
  }

  #page-settings .prod-matrix-sub span {
    color: var(--rc-text-muted);
    font-size: 11px;
    font-weight: 750;
    text-align: center;
  }

  #page-settings .prod-matrix-sub span:nth-child(n + 2):nth-child(-n + 4) { color: #5EEAD4; }
  #page-settings .prod-matrix-sub span:nth-child(n + 5):nth-child(-n + 7) { color: #6EE7B7; }
  #page-settings .prod-matrix-sub span:nth-child(n + 8):nth-child(-n + 9) { color: #C4B5FD; }

  #page-settings #prod-schedule-edit > .prod-schedule-card {
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--set-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #page-settings #prod-schedule-edit > .prod-schedule-card .prod-block,
  #page-settings #prod-schedule-edit > .prod-schedule-card .prod-schedule-fields,
  #page-settings #prod-schedule-edit > .prod-schedule-card .prod-field {
    display: contents;
  }

  #page-settings #prod-schedule-edit > .prod-schedule-card .prod-kicker,
  #page-settings #prod-schedule-edit > .prod-schedule-card .prod-help,
  #page-settings #prod-schedule-edit > .prod-schedule-card .prod-field > label {
    display: none;
  }

  #page-settings #prod-schedule-edit > .prod-schedule-card h3 {
    margin: 0;
    font-size: 14px;
  }

  #page-settings #prod-schedule-edit > .prod-schedule-card input {
    min-height: 40px;
    text-align: center;
  }

  #page-settings #prod-schedule-edit > .prod-schedule-card .prod-block.is-make input {
    background: color-mix(in srgb, #0F766E 22%, var(--set-input));
    border-color: color-mix(in srgb, #0F766E 55%, var(--set-border));
  }

  #page-settings #prod-schedule-edit > .prod-schedule-card .prod-block.is-cook input {
    background: color-mix(in srgb, #059669 22%, var(--set-input));
    border-color: color-mix(in srgb, #059669 55%, var(--set-border));
  }

  #page-settings #prod-schedule-edit > .prod-schedule-card .prod-block.is-display input {
    background: color-mix(in srgb, #6D28D9 22%, var(--set-input));
    border-color: color-mix(in srgb, #6D28D9 55%, var(--set-border));
  }
}

@media (max-width: 850px) {
  #page-settings .set-nav {
    top: auto;
  }

  #page-settings input,
  #page-settings select,
  #page-settings textarea,
  #page-settings .btn {
    scroll-margin-top: 112px;
  }
}

#page-settings h2,
#page-settings h3 { scroll-margin-top: 96px; }

#page-settings #cl-new.cl-create,
#page-settings #cl-save,
#page-settings #unew,
#page-settings #usave,
#page-settings #roles-save,
#page-settings #prod-schedule-save,
#page-settings #prod-override-save,
#page-settings #rs-new,
#page-settings #res-allergen-save,
#page-settings #res-fact-save,
#page-settings #res-guide-save {
  color: #fff;
  background: var(--rc-brand);
  border-color: var(--rc-brand);
}

#page-settings .set-role-group {
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--set-border);
  border-radius: var(--set-radius);
  background: var(--set-input);
}

#page-settings .set-role-group > summary { display: flex; min-height: 48px; }
#page-settings .set-role-group .permgroup > h3 { display: none; }

#page-settings .role-perm-row { min-height: 44px; align-items: center; }
#page-settings .role-perm-row .account-push-pill { position: relative; }
#page-settings .role-perm-row .account-push-pill::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: -12px;
  bottom: -12px;
}

#users-people.is-editing #us,
#users-people.is-editing #user-search,
#users-people.is-editing .tw { display: none; }

#page-settings .cl-pick-list { display: grid; gap: 8px; }
#page-settings .cl-pick {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  text-align: left;
}
#page-settings .cl-pick.on,
#page-settings .cl-pick.on .mut {
  color: #fff;
  background: var(--rc-brand);
  border-color: var(--rc-brand);
}
#page-settings .cl-edit-head { align-items: center; justify-content: flex-start; gap: 12px; }
#page-settings .cl-edit-head h2 { margin: 0; min-width: 0; }
#page-settings .cl-edit-head #cl-back { display: inline-flex; width: auto; flex: 0 0 auto; }
#page-settings .cl-task-summary {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
}
#page-settings .cl-edit-item.is-open .cl-task-summary,
#page-settings .cl-edit-item.is-filtered { display: none; }
#page-settings .cl-edit-item:not(.is-open) .set-reorder,
#page-settings .cl-edit-item:not(.is-open) [data-cl-label],
#page-settings .cl-edit-item:not(.is-open) .cl-photo-pick { display: none; }

#page-settings .prod-block.is-make { --prod-accent: #0F766E; }
#page-settings .prod-block.is-cook { --prod-accent: #059669; }
#page-settings .prod-block.is-display { --prod-accent: #6D28D9; }

@container setpage (max-width: 899px) {
  #page-settings #prod-schedule-edit,
  #page-settings #prod-override-grid,
  #page-settings #prod-menu-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  #page-settings #prod-schedule-edit > .prod-schedule-card,
  #page-settings #prod-override-grid > .prod-override-day,
  #page-settings #prod-menu-grid > .prod-menu-day { grid-column: 1 / -1; }
}

#page-settings #prod-override-grid input::placeholder {
  color: var(--rc-text-muted);
  opacity: 1;
}

html.rc-light #page-settings #prod-override-grid input::placeholder {
  color: color-mix(in srgb, var(--rc-text-muted) 90%, var(--rc-text));
}

#page-settings #prod-override-grid input:not(:placeholder-shown) {
  background: color-mix(in srgb, var(--rc-brand) 16%, var(--set-input));
  border-color: color-mix(in srgb, var(--rc-brand) 45%, var(--set-border));
}

#page-settings .prod-override-pick {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-bottom: 8px;
}

#page-settings .prod-pizza-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
#page-settings #prod-pizza-list { display: block; }
#page-settings .prod-pizza-pick {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  text-align: left;
}
#page-settings .prod-pizza-pick.on { border-color: var(--rc-brand); }
#page-settings #prod-pizza-back { display: none; }

#page-settings .prod-menu-totals-list { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
#page-settings .prod-menu-status.is-open { color: var(--rc-text-muted); }

#page-settings .rs-admin-summary,
#page-settings .rs-admin-meta { display: none; }
#page-settings .rs-admin-filters { display: flex; gap: 8px; flex-wrap: wrap; }
#page-settings .rs-admin-filters input,
#page-settings .rs-admin-filters select { flex: 1 1 180px; }

@container setpage (max-width: 520px) {
  #page-settings .rs-color-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }
  #page-settings .rs-color-card .rs-color-tools { grid-column: 1 / -1; }
  #page-settings .rs-color-card strong { min-width: 0; overflow-wrap: anywhere; }
}

@container setpage (max-width: 1100px) {
  #page-settings #res-settings-facts.is-editing .res-admin-list,
  #page-settings #res-settings-allergen.is-editing .res-admin-list,
  #page-settings #res-settings-guides.is-editing .res-admin-list,
  #page-settings #res-settings-allergen.is-editing #res-settings-allergen-search { display: none; }
  #page-settings .prod-pizza-layout { grid-template-columns: minmax(0, 1fr); }
  #page-settings #prod-settings-trays.is-recipe .prod-pizza-index { display: none; }
  #page-settings #prod-settings-trays.is-recipe #prod-pizza-back { display: inline-flex; }
}

/* Board composition. These beat the shared HQ card chrome inside Settings. */
body.rc-theme #page-settings .box,
body.rc-theme #page-settings .integ-section {
  background: var(--set-surface);
  border: 1px solid var(--set-border);
  border-radius: 12px;
  box-shadow: none;
}

body.rc-theme #page-settings summary.integ-summary.hq-disclosure::before,
body.rc-theme #page-settings details[open] > summary.integ-summary.hq-disclosure::before {
  display: none;
  width: 0;
  height: 0;
  margin: 0;
  border: 0;
  content: none;
}

#page-settings .integ-lead { margin: 0 0 4px; }
#page-settings .integ-lead h2 { margin: 0 0 4px; font-size: 18px; }
#settings-integrations:has(#integ-board.is-managing) .integ-lead { display: none; }

#integ-board:not(.is-managing) .integ-grid { gap: 16px; }

#integ-board:not(.is-managing) .integ-grid > details,
#integ-board:not(.is-managing) #settings-deputy {
  padding: 16px;
  border-radius: 12px;
  background: var(--set-surface);
}

#integ-board:not(.is-managing) summary h2::before {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

#integ-board:not(.is-managing) .integ-manage {
  min-height: 44px;
  color: var(--rc-text);
  background: transparent;
  border: 1px solid var(--set-border);
}

#page-settings .set-status.is-ok::before,
#page-settings .set-status.is-warn::before,
#page-settings .set-checks li b::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 99px;
  background: currentColor;
  flex: 0 0 auto;
}

#integ-board.is-managing {
  display: grid;
  gap: 12px;
}

#integ-board.is-managing #integ-back {
  justify-self: start;
  width: auto;
}

#integ-board.is-managing .integ-grid > details[open],
#integ-board.is-managing #settings-deputy.is-on details[open] {
  padding: 16px 18px 18px;
}

#integ-board.is-managing [data-integ="google"] > details.is-google-on > summary {
  display: none;
}

#page-settings .set-pair { gap: 16px; }

#page-settings #hq-logo-drop .hq-logo-preview img {
  height: 76px;
}

#page-settings .set-people th {
  color: var(--rc-text-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#page-settings .set-people td { vertical-align: middle; }

#page-settings .cl-builder:not(:has(#cl-edit:not(.h))) {
  grid-template-columns: minmax(0, 1fr);
}

#page-settings .cl-pick {
  border-radius: 10px;
  font-weight: 750;
}

#page-settings .cl-pick span:last-child {
  color: var(--rc-text-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

#page-settings .cl-pick.on span:last-child {
  color: #fff;
}

#page-settings #cl-edit-items { counter-reset: cltask; }

#page-settings .cl-task-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

#page-settings .cl-edit-item:not(.is-filtered) .cl-task-summary::before {
  counter-increment: cltask;
  content: counter(cltask);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--set-input);
  color: var(--rc-text-muted);
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

#page-settings .prod-pizza-pick.on {
  color: #fff;
  background: var(--rc-brand);
  border-color: var(--rc-brand);
}

#page-settings #prod-pizza-list > .prod-pizza-card > summary { display: none; }

#page-settings #prod-pizza-list > .prod-pizza-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#page-settings .prod-ing-head { display: none; }

#page-settings .prod-menu-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--set-input);
}

#page-settings .prod-menu-status.is-done {
  color: var(--rc-success);
  background: color-mix(in srgb, var(--rc-success) 16%, transparent);
}

#page-settings .prod-menu-status.short {
  color: var(--rc-warning);
  background: color-mix(in srgb, var(--rc-warning) 18%, transparent);
}

@container setpage (min-width: 900px) {
  #page-settings .prod-ing-head {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(0, 1.4fr) minmax(96px, 120px) minmax(96px, 120px) auto;
    gap: 8px;
    margin-top: 4px;
    color: var(--rc-text-muted);
    font-size: 12px;
    font-weight: 750;
  }

  #page-settings .prod-ing-row:not(.is-step) .prod-field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

@container setpage (max-width: 799px) {
  #page-settings .integ-lead { display: none; }
  #page-settings .cl-builder:has(#cl-edit:not(.h)) .cl-list-pane { display: none; }
  #page-settings .prod-ing-head { display: none; }
}

#page-settings #settings-checklists {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#page-settings #settings-checklists .cl-lead {
  align-items: center;
  margin: 0;
}

#page-settings #settings-checklists .cl-lead h2,
#page-settings #settings-checklists #cl-edit-title { margin: 0; overflow-wrap: anywhere; }
#page-settings #settings-checklists .cl-lead .mut { margin: 2px 0 0; }

#page-settings #settings-checklists .cl-flash:empty,
#page-settings #settings-checklists #cl-builder-msg:empty,
#page-settings #settings-checklists #cl-edit-msg:empty { display: none; }
#page-settings #settings-checklists .cl-flash { margin: 0; color: var(--rc-success); font-weight: 750; }
#page-settings #settings-checklists .cl-flash.cl-error,
#page-settings #settings-checklists #cl-edit-msg.cl-error { color: var(--rc-danger); }

#page-settings #settings-checklists .cl-builder:has(#cl-edit:not(.h)) {
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 12px;
}

#page-settings #settings-checklists .cl-list-pane,
#page-settings #settings-checklists #cl-edit { min-width: 0; }

#page-settings #settings-checklists .cl-builder-tabs { margin: 0 0 10px; }
#page-settings #settings-checklists .cl-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--set-input);
  color: var(--rc-text-muted);
  font-size: 12px;
  font-weight: 750;
}
#page-settings #settings-checklists .cl-builder-tabs .tab.on .cl-tab-count {
  background: var(--rc-brand);
  color: #fff;
}

#page-settings #settings-checklists .cl-reset-note {
  margin: 10px 0 0;
  color: var(--rc-text-muted);
  font-size: 12px;
}

#page-settings #settings-checklists .cl-pick-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
}

#page-settings #settings-checklists .cl-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 8px 8px 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  font-weight: 750;
}

#page-settings #settings-checklists .cl-pick-copy { min-width: 0; flex: 1 1 auto; }
#page-settings #settings-checklists .cl-pick-name { display: block; overflow-wrap: anywhere; }
#page-settings #settings-checklists .cl-pick-meta,
#page-settings #settings-checklists .cl-pick.on .cl-pick-meta {
  display: block;
  color: var(--rc-text-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  white-space: normal;
}

#page-settings #settings-checklists .cl-pick.on,
#page-settings #settings-checklists .cl-pick-row.is-on .cl-pick {
  color: inherit;
  background: color-mix(in srgb, var(--rc-brand) 14%, var(--set-surface));
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--rc-brand);
}

#page-settings #settings-checklists .cl-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--rc-text-muted);
}

#page-settings #settings-checklists .cl-more {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--rc-text-muted);
}

#page-settings #settings-checklists .cl-more svg { width: 18px; height: 18px; }

#page-settings #settings-checklists .cl-menu {
  position: absolute;
  top: calc(100% - 8px);
  right: 0;
  z-index: 5;
  min-width: 196px;
  padding: 4px;
  border: 1px solid var(--set-border);
  border-radius: 10px;
  background: var(--set-surface);
}

#page-settings #settings-checklists .cl-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-weight: 700;
}

#page-settings #settings-checklists #cl-back { display: none; }

#page-settings #settings-checklists .cl-edit-head {
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

#page-settings #settings-checklists .cl-edit-title-wrap { flex: 1 1 auto; min-width: 0; }
#page-settings #settings-checklists .cl-edit-count {
  color: var(--rc-text-muted);
  font-weight: 700;
  white-space: nowrap;
}

#page-settings #settings-checklists #cl-edit:not(.h) {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 132px - var(--cl-keyboard, 0px));
  overflow: hidden;
}

#page-settings #settings-checklists #cl-pane-tasks:not(.h),
#page-settings #settings-checklists #cl-pane-schedule:not(.h) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 8px;
}

#page-settings #settings-checklists .cl-task-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
}

#page-settings #settings-checklists .cl-task-tools input[type="search"] {
  flex: 1 1 180px;
  width: auto;
  min-width: 0;
}

#page-settings #settings-checklists .cl-task-tools .btn,
#page-settings #settings-checklists #cl-add-row .btn,
#page-settings #settings-checklists .cl-edit-actions .btn,
#page-settings #settings-checklists .cl-task-photo .btn {
  width: auto;
  min-height: 44px;
  flex: 0 0 auto;
}

#page-settings #settings-checklists #cl-add-item {
  color: #fff;
  background: var(--rc-brand);
  border-color: var(--rc-brand);
}

#page-settings #settings-checklists #cl-reorder[aria-pressed="true"] {
  border-color: var(--rc-brand);
  box-shadow: inset 0 0 0 1px var(--rc-brand);
}

#page-settings #settings-checklists #cl-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}

#page-settings #settings-checklists .cl-edit-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 2px 0;
  border-bottom: 1px solid var(--set-border);
  background: transparent;
}

#page-settings #settings-checklists .cl-task-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-weight: 700;
}

#page-settings #settings-checklists .cl-task-summary::before {
  content: none;
  counter-increment: none;
}

#page-settings #settings-checklists .cl-task-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--set-input);
  color: var(--rc-text-muted);
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

#page-settings #settings-checklists .cl-task-label { min-width: 0; overflow-wrap: anywhere; }
#page-settings #settings-checklists .cl-task-summary .cl-chevron { margin-left: auto; }

#page-settings #settings-checklists .cl-row-drag,
#page-settings #settings-checklists .cl-task-editor .cl-drag {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

#page-settings #settings-checklists .cl-edit-item.is-open .cl-task-summary,
#page-settings #settings-checklists .cl-edit-item.is-open .cl-row-drag,
#page-settings #settings-checklists .cl-edit-item:not(.is-open) .cl-task-editor,
#page-settings #settings-checklists .cl-edit-item.is-filtered { display: none; }

#page-settings #settings-checklists .cl-edit-item.is-open {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--set-border);
  border-radius: 12px;
  background: var(--set-input);
}

#page-settings #settings-checklists .cl-task-editor { display: grid; gap: 10px; min-width: 0; }
#page-settings #settings-checklists .cl-task-editor .field { display: grid; gap: 6px; }
#page-settings #settings-checklists .cl-task-editor .field > span { font-size: 12px; font-weight: 750; }
#page-settings #settings-checklists .cl-task-photo,
#page-settings #settings-checklists .cl-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#page-settings #settings-checklists .cl-footer {
  display: block;
  position: static;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: var(--set-surface);
  border-top: 1px solid var(--set-border);
}

#page-settings #settings-checklists .cl-footer .user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  margin: 0;
}

#page-settings #settings-checklists .cl-footer .btn {
  width: auto;
  min-height: 48px;
}

@container setpage (min-width: 521px) {
  #page-settings #settings-checklists #cl-new.cl-create {
    width: auto;
    max-height: 48px;
  }
}

@container setpage (max-width: 799px) {
  #page-settings #settings-checklists .cl-builder:has(#cl-edit:not(.h)) {
    grid-template-columns: minmax(0, 1fr);
  }
  #page-settings #settings-checklists #cl-back {
    display: inline-flex;
    width: auto;
    height: auto;
    min-height: 44px;
    max-height: none;
  }
}

@container setpage (max-width: 520px) {
  #page-settings #settings-checklists #cl-new.cl-create,
  #page-settings #settings-checklists #cl-add-row .btn,
  #page-settings #settings-checklists .cl-footer .btn { width: 100%; }
  #page-settings #settings-checklists #cl-add-row { grid-template-columns: minmax(0, 1fr); }
  #page-settings #settings-checklists .cl-footer .user-actions { flex-direction: column-reverse; }
  #page-settings #settings-checklists .cl-edit-head { flex-wrap: wrap; }
}

/* Recurring checklist settings: size the controls to the editor, not the viewport. */
#page-settings #settings-checklists #cl-edit { container: cleditor / inline-size; }
#page-settings #settings-checklists #cl-pane-schedule { padding: 4px 2px 12px; }
#page-settings #settings-checklists #cl-pane-schedule > * + * { margin-top: 14px; }
#page-settings #settings-checklists .cl-schedule-name,
#page-settings #settings-checklists .cl-schedule-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
#page-settings #settings-checklists .cl-schedule-heading h3 { margin: 0 0 3px; font-size: 17px; }
#page-settings #settings-checklists .cl-field-label,
#page-settings #settings-checklists #cl-pane-schedule label {
  font-size: 13px;
  font-weight: 650;
  text-transform: none;
  letter-spacing: normal;
}
#page-settings #settings-checklists #cl-pane-schedule input:not([type="checkbox"]),
#page-settings #settings-checklists #cl-pane-schedule select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}
#page-settings #settings-checklists .cl-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
#page-settings #settings-checklists .cl-presets button,
#page-settings #settings-checklists .cl-stepper button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid var(--set-border);
  border-radius: 6px;
  background: var(--set-input);
  color: var(--rc-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#page-settings #settings-checklists .cl-presets button[aria-pressed="true"],
#page-settings #settings-checklists .cl-weekday input:checked + span {
  background: var(--rc-brand);
  border-color: var(--rc-brand);
  color: #fff;
}
#page-settings #settings-checklists .cl-repeat-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
#page-settings #settings-checklists #cl-pane-schedule #cl-repeat-unit { width: 128px; }
#page-settings #settings-checklists .cl-repeat-controls .mut { font-size: 12px; }
#page-settings #settings-checklists .cl-stepper { display: grid; grid-template-columns: 44px minmax(44px, 72px) 44px; }
#page-settings #settings-checklists .cl-stepper input { text-align: center; border-radius: 0; padding: 6px; appearance: textfield; -moz-appearance: textfield; }
#page-settings #settings-checklists .cl-stepper input::-webkit-inner-spin-button,
#page-settings #settings-checklists .cl-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#page-settings #settings-checklists .cl-stepper button:disabled { opacity: .45; cursor: default; }
#page-settings #settings-checklists .cl-weekdays { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 8px; }
#page-settings #settings-checklists .cl-weekday { position: relative; display: block; min-width: 0; min-height: 44px; cursor: pointer; }
#page-settings #settings-checklists .cl-weekday input,
#page-settings #settings-checklists .cl-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
#page-settings #settings-checklists .cl-weekday span {
  display: grid;
  place-items: center;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--set-border);
  border-radius: 6px;
  background: var(--set-input);
  color: var(--rc-text);
}
#page-settings #settings-checklists .cl-weekday input:focus-visible + span,
#page-settings #settings-checklists .cl-switch input:focus-visible + .cl-switch-track {
  outline: 3px solid var(--rc-focus, #C30D19);
  outline-offset: 3px;
}
#page-settings #settings-checklists .cl-schedule-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
#page-settings #settings-checklists .cl-schedule-dates .field,
#page-settings #settings-checklists .cl-cutoff-grid .field { display: grid; align-content: start; gap: 6px; min-width: 0; }
#page-settings #settings-checklists #cl-end-date-field { grid-column: 3; }
#page-settings #settings-checklists .cl-schedule-preview {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--set-border);
  border-radius: 8px;
  background: var(--set-input);
}
#page-settings #settings-checklists .cl-preview-icon { width: 26px; height: 26px; margin-top: 2px; color: var(--rc-text-muted); }
#page-settings #settings-checklists .cl-preview-content { min-width: 0; }
#page-settings #settings-checklists #cl-schedule-summary { display: block; font-size: 16px; overflow-wrap: anywhere; }
#page-settings #settings-checklists .cl-date-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
#page-settings #settings-checklists .cl-date-cards:empty,
#page-settings #settings-checklists #cl-schedule-error:empty { display: none; }
#page-settings #settings-checklists .cl-date-card { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--set-border); border-radius: 5px; }
#page-settings #settings-checklists .cl-date-card span { color: var(--rc-text-muted); font-size: 11px; text-transform: uppercase; }
#page-settings #settings-checklists .cl-date-card time { font-size: 13px; font-weight: 750; }
#page-settings #settings-checklists .cl-preview-note { margin-top: 10px; font-size: 11px; text-align: right; color: var(--rc-text-muted); }
#page-settings #settings-checklists #cl-month-hint { margin-top: 6px; font-size: 12px; }
#page-settings #settings-checklists #cl-schedule-error { margin-top: 8px; font-size: 13px; }
#page-settings #settings-checklists .is-invalid #cl-schedule-error { color: var(--rc-danger); }
#page-settings #settings-checklists .cl-toggle-row { display: flex; align-items: center; gap: 16px; min-height: 44px; cursor: pointer; }
#page-settings #settings-checklists .cl-toggle-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
#page-settings #settings-checklists .cl-toggle-copy .mut { font-size: 12px; font-weight: 400; line-height: 1.4; }
#page-settings #settings-checklists .cl-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: 0 0 96px; }
#page-settings #settings-checklists .cl-switch-track { display: block; width: 64px; height: 40px; border: 1px solid var(--rc-border-strong, #526077); border-radius: 999px; background: color-mix(in srgb, var(--rc-text-muted) 25%, var(--set-surface)); box-sizing: border-box; }
#page-settings #settings-checklists .cl-switch-track::before { content: ''; display: block; width: 32px; height: 32px; margin: 3px; border-radius: 50%; background: var(--rc-text); transition: transform .15s ease; }
#page-settings #settings-checklists .cl-switch input:checked + .cl-switch-track { background: var(--rc-success, #34D399); border-color: var(--rc-success, #34D399); }
#page-settings #settings-checklists .cl-switch input:checked + .cl-switch-track::before { transform: translateX(24px); background: #fff; }
#page-settings #settings-checklists .cl-switch-state { font-size: 12px; font-weight: 500; }
#page-settings #settings-checklists .cl-cutoff-grid { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(0, 1.6fr); gap: 8px 24px; align-items: start; }
#page-settings #settings-checklists #cl-notify-roles { margin: 0; gap: 6px; }
#page-settings #settings-checklists #cl-notify-roles .cl-day { min-height: 44px; padding: 6px 8px; box-sizing: border-box; cursor: pointer; }
#page-settings #settings-checklists #cl-notify-roles input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; }
#page-settings #settings-checklists #cl-cutoff-hint { grid-column: 1 / -1; font-size: 12px; }
#page-settings #settings-checklists #cl-new.cl-create,
#page-settings #settings-checklists #cl-save { background: var(--rc-brand); border-color: var(--rc-brand); color: #fff; }
#page-settings #settings-checklists #cl-new.cl-create:hover:not(:disabled),
#page-settings #settings-checklists #cl-save:hover:not(:disabled) { background: var(--rc-brand-hover); border-color: var(--rc-brand-hover); }
@container cleditor (max-width: 680px) {
  #page-settings #settings-checklists .cl-schedule-name,
  #page-settings #settings-checklists .cl-schedule-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #page-settings #settings-checklists .cl-schedule-dates { gap: 12px; }
}
@container cleditor (max-width: 440px) {
  #page-settings #settings-checklists .cl-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #page-settings #settings-checklists .cl-weekdays { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
  #page-settings #settings-checklists .cl-schedule-dates,
  #page-settings #settings-checklists .cl-cutoff-grid { grid-template-columns: minmax(0, 1fr); }
  #page-settings #settings-checklists #cl-end-date-field { grid-column: auto; }
  #page-settings #settings-checklists #cl-pane-schedule input:not([type="checkbox"]),
  #page-settings #settings-checklists #cl-pane-schedule select { font-size: 16px; }
  #page-settings #settings-checklists .cl-schedule-preview { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  #page-settings #settings-checklists .cl-preview-icon { display: none; }
  #page-settings #settings-checklists .cl-date-cards { gap: 6px; }
  #page-settings #settings-checklists .cl-date-card { padding: 8px 6px; }
  #page-settings #settings-checklists .cl-preview-note { text-align: left; }
}
@container cleditor (max-width: 320px) {
  #page-settings #settings-checklists .cl-date-cards { grid-template-columns: minmax(0, 1fr); }
  #page-settings #settings-checklists .cl-date-card { grid-template-columns: 40px minmax(0, 1fr); align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  #page-settings #settings-checklists .cl-switch-track::before { transition: none; }
}

#page-settings .ai-head,
#page-settings .ai-head-actions,
#page-settings .ai-filters,
#page-settings .ai-row-actions,
#page-settings .ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#page-settings .ai-head { justify-content: space-between; margin-bottom: 8px; }
#page-settings .ai-head h2,
#page-settings .ai-editor h2 { margin: 0; }
#page-settings .ai-filters { margin: 12px 0; }
#page-settings .ai-filters > * { flex: 1 1 180px; min-width: 0; }
#page-settings .ai-bad { color: var(--rc-danger); }
#page-settings .ai-table { width: 100%; table-layout: fixed; }
#page-settings .ai-table th,
#page-settings .ai-table td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
#page-settings .ai-table th:nth-child(1) { width: 16%; }
#page-settings .ai-table th:nth-child(2) { width: 28%; }
#page-settings .ai-table th:nth-child(3) { width: 18%; }
#page-settings .ai-table th:nth-child(4) { width: 18%; }
#page-settings .ai-table th:nth-child(5) { width: 10%; }
#page-settings .ai-table th:nth-child(6) { width: 10%; }
#page-settings .ai-name {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--rc-text);
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
#page-settings .ai-row-actions { flex-direction: column; align-items: stretch; }
#page-settings .ai-row-actions .btn,
#page-settings .ai-actions .btn,
#page-settings .ai-line .btn { min-height: 44px; }
#page-settings .ai-tag input {
  width: 22px;
  height: 22px;
  min-height: 22px;
  flex: 0 0 22px;
}
#page-settings .ai-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 28px;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border: 1px solid var(--set-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ai-chip, var(--rc-text-muted)) 22%, var(--set-surface));
  color: var(--rc-text);
  font-size: 12px;
  font-weight: 700;
}
#page-settings .ai-chip[data-tag="Wheat / gluten"] { --ai-chip: #C4A574; }
#page-settings .ai-chip[data-tag="Milk"] { --ai-chip: #7DD3FC; }
#page-settings .ai-chip[data-tag="Egg"] { --ai-chip: #FDE68A; }
#page-settings .ai-chip[data-tag="Soy"] { --ai-chip: #86EFAC; }
#page-settings .ai-chip[data-tag="Pistachio"] { --ai-chip: #4ADE80; }
#page-settings .ai-chip[data-tag="Hazelnut"] { --ai-chip: #D6B48A; }
#page-settings .ai-chip[data-tag="Walnut"] { --ai-chip: #A16207; }
#page-settings .ai-chip[data-tag="Fish"] { --ai-chip: #38BDF8; }
#page-settings .ai-chip[data-tag="Crustacean"] { --ai-chip: #FB923C; }
#page-settings .ai-chip[data-tag="Mustard"] { --ai-chip: #FBBF24; }
#page-settings .ai-chip[data-tag="Celery"] { --ai-chip: #34D399; }
#page-settings .ai-chip[data-tag="Sulphites"] { --ai-chip: #C4B5FD; }
#page-settings .ai-none,
#page-settings .ai-linked { color: var(--rc-text-muted); }
#page-settings .ai-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}
#page-settings .ai-status.is-review {
  color: var(--rc-warning);
  background: color-mix(in srgb, var(--rc-warning) 18%, transparent);
}
#page-settings .ai-status.is-reviewed {
  color: var(--rc-success);
  background: color-mix(in srgb, var(--rc-success) 16%, transparent);
}
#page-settings .ai-editor { margin-top: 12px; }
#page-settings .ai-editor-grid,
#page-settings .ai-line {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}
#page-settings .ai-editor-grid { grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr); margin-bottom: 8px; }
#page-settings .ai-lines { display: grid; gap: 8px; margin-bottom: 8px; }
#page-settings .ai-tag-pick { display: flex; flex-wrap: wrap; gap: 8px; }
#page-settings .ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
#page-settings .ai-cards { display: none; }
#page-settings .ai-floor { margin-top: 16px; }
#page-settings .ai-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--set-border);
  border-radius: var(--set-radius);
  background: var(--set-surface);
}
#page-settings .ai-card-label {
  display: block;
  color: var(--rc-text-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@container setpage (max-width: 699px) {
  #page-settings .ai-table-wrap { display: none; }
  #page-settings .ai-cards { display: grid; gap: 12px; }
  #page-settings .ai-filters,
  #page-settings .ai-editor-grid,
  #page-settings .ai-line,
  #page-settings .ai-head,
  #page-settings .ai-head-actions,
  #page-settings .ai-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #page-settings #res-settings-allergen.is-ai-editing .ai-board,
  #page-settings #res-settings-allergen.is-ai-editing .ai-floor { display: none; }
}

/* Make the task editor's instructions discoverable before expanding a row. */
#page-settings #settings-checklists .cl-task-copy { display: grid; gap: 3px; min-width: 0; }
#page-settings #settings-checklists .cl-task-edit-hint { color: var(--rc-text-muted); font-size: 12px; font-weight: 500; }
#page-settings #settings-checklists .cl-item-instructions { font: inherit; }

.location-details-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;margin:18px 0}.location-details-fields label{display:flex;flex-direction:column;gap:8px;min-width:0}.location-details-fields textarea{resize:vertical;min-height:100px}@media(max-width:640px){.location-details-fields{grid-template-columns:1fr;gap:14px}}

/* Checklist detail and task dialog: tasks save independently from the schedule. */
#page-settings #settings-checklists.is-editing .cl-list-pane,
#page-settings #settings-checklists.is-editing .cl-lead { display:none; }
#page-settings #settings-checklists .cl-builder:has(#cl-edit:not(.h)) { grid-template-columns:minmax(0,1fr); }
#page-settings #settings-checklists #cl-back { display:inline-flex; width:auto; }
#page-settings #settings-checklists #cl-edit:not(.h) { max-height:none; overflow:visible; padding:24px; }
#page-settings #settings-checklists #cl-pane-tasks:not(.h),
#page-settings #settings-checklists #cl-pane-schedule:not(.h) { overflow:visible; }
#page-settings #settings-checklists #cl-edit-items { display:grid; gap:10px; margin-top:18px; }
#page-settings #settings-checklists .cl-edit-item { grid-template-columns:44px minmax(0,1fr) 44px; padding:10px; border:1px solid var(--set-border); border-radius:12px; background:var(--set-input); }
#page-settings #settings-checklists .cl-task-summary { min-height:60px; }
#page-settings #settings-checklists .cl-task-copy { flex:1; min-width:0; }
#page-settings #settings-checklists .cl-task-label { overflow-wrap:anywhere; }
#page-settings #settings-checklists .cl-task-edit-label { font-size:13px; white-space:nowrap; border:1px solid var(--set-border); border-radius:8px; padding:10px; }
#page-settings #settings-checklists .cl-row-drag { display:block; touch-action:none; cursor:grab; user-select:none; }
#page-settings #settings-checklists .cl-dragging { opacity:.55; outline:2px solid var(--rc-brand,#C30D19); }
#page-settings #settings-checklists .cl-drop-before { box-shadow:0 -3px 0 var(--rc-brand,#C30D19); }
#page-settings #settings-checklists .cl-drop-after { box-shadow:0 3px 0 var(--rc-brand,#C30D19); }
.cl-task-actions { position:relative; align-self:center; }
.cl-task-actions summary { cursor:pointer; list-style:none; min-height:44px; display:grid; place-items:center; }
.cl-task-actions summary::-webkit-details-marker { display:none; }
.cl-task-actions > div { position:absolute; right:0; top:100%; z-index:5; display:grid; gap:6px; min-width:160px; padding:8px; background:var(--rc-surface,#141e2e); border:1px solid var(--rc-border,#303c50); border-radius:10px; box-shadow:0 8px 24px #0005; }
#page-settings #settings-checklists .cl-footer.h { display:none; }
#page-settings #settings-checklists #cl-edit-msg { margin-top:12px; }
.cl-task-dialog { box-sizing:border-box; width:min(620px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--rc-border,#303c50); border-radius:16px; background:var(--rc-surface,#141e2e); color:var(--rc-text,#edf1f7); box-shadow:0 24px 90px #0008; overflow:hidden; }
.cl-task-dialog::backdrop { background:#050913bb; }
.cl-task-form { display:flex; flex-direction:column; max-height:calc(100dvh - 34px); margin:0; }
.cl-task-form header { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; padding:22px 24px; border-bottom:1px solid var(--rc-border,#303c50); flex:none; }
.cl-task-form h2 { margin:0; font-size:23px; }
.cl-task-form header p { margin:6px 0 0; }
.cl-task-form-body { padding:22px 24px; overflow:auto; min-height:0; display:grid; gap:10px; }
.cl-task-form-body > label { font-size:13px; font-weight:750; margin-top:6px; }
.cl-task-form input:not([type=file]),.cl-task-form textarea { box-sizing:border-box; width:100%; min-height:48px; font:inherit; color:inherit; background:var(--rc-surface-control,#1b273a); border:1px solid var(--rc-border,#303c50); border-radius:9px; padding:12px; }
.cl-task-form textarea { min-height:140px; resize:vertical; }
.cl-task-form .btn { min-height:48px; width:auto; font:inherit; }
.cl-task-photo-preview { display:flex; gap:16px; align-items:center; }
.cl-task-photo-preview img { width:150px; height:115px; object-fit:cover; border-radius:10px; }
.cl-task-photo-preview > div { display:flex; gap:8px; flex-wrap:wrap; }
.cl-task-file { position:relative; overflow:hidden; display:inline-flex; align-items:center; cursor:pointer; }
.cl-task-file input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.cl-task-form footer { flex:none; border-top:1px solid var(--rc-border,#303c50); padding:16px 24px max(16px,env(safe-area-inset-bottom)); }
.cl-task-form footer > div { display:flex; justify-content:flex-end; gap:10px; }
.cl-task-form #cl-task-error { color:var(--rc-danger,#ff8080); font-size:14px; margin:0 0 12px; }
.cl-task-form #cl-task-error:empty { display:none; }
.cl-task-form .cl-task-save { background:#C30D19; border-color:#C30D19; color:white; }
@media(max-width:600px) {
 .cl-task-dialog { width:100%; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
 .cl-task-form { height:100%; max-height:100dvh; }
 .cl-task-form-body { flex:1; padding:16px; }
 .cl-task-form header,.cl-task-form footer { padding:16px; }
 .cl-task-form footer { padding-bottom:max(16px,env(safe-area-inset-bottom)); }
 #page-settings #settings-checklists #cl-edit:not(.h) { padding:14px; }
 #page-settings #settings-checklists .cl-task-edit-label { display:none; }
 #page-settings #settings-checklists .cl-edit-head { flex-wrap:wrap; }
 #page-settings #settings-checklists #cl-back { flex-basis:100%; justify-content:flex-start; }
}
#page-settings #settings-checklists .cl-edit-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; margin-bottom:20px; }
#page-settings #settings-checklists #cl-back { grid-column:1 / -1; justify-self:start; }
#page-settings #settings-checklists #cl-edit-title { font-size:26px; line-height:1.3; }
#page-settings #settings-checklists #cl-edit-subtitle { margin:6px 0 0; font-size:14px; }
/* Keep these two short tabs visible on touch screens, rather than a generated selector. */
#page-settings #settings-checklists #cl-edit .set-nested .tabs { display:flex; }
#page-settings #settings-checklists #cl-edit .set-nested .set-tab-pick { display:none; }
.cl-task-form-body { align-content:start; }
body.rc-theme .cl-task-dialog .cl-task-save { background:#C30D19; border-color:#C30D19; color:#fff; }
#page-settings #settings-checklists #cl-add-csv.is-busy { opacity:.5; pointer-events:none; }