.login-password-field { position: relative; margin-bottom: 12px; }
.admin-shell .login-password-field #password { margin-bottom: 0; padding-right: 48px; }
.admin-shell #password + button.login-password-toggle { position: absolute; right: 2px; top: 2px; bottom: 2px; display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink, #000); }
.admin-shell #password + button.login-password-toggle:hover { background: rgba(0,0,0,.03); }
.login-password-toggle [hidden] { display: none; }
/*
 * Shared STORRIE admin + client portal layer.
 * Load after page-specific stylesheets. UI typography is deliberately limited
 * to 12px and 14px, with a scoped 24px page-title exception.
 */
:root {
  --workspace-paper: #fff;
  --workspace-panel: #fff;
  --workspace-ink: #20201f;
  --workspace-muted: #686865;
  --workspace-line: #dededb;
  --workspace-line-strong: #aaa9a5;
  --workspace-hover: #f7f7f7;
  --workspace-radius: 4px;
  --workspace-shadow: 0 2px 8px rgba(28, 28, 26, .035);
  --workspace-shadow-hover: 0 5px 15px rgba(28, 28, 26, .075), 0 0 8px rgba(70, 70, 66, .035);
  --workspace-font: "Figtree", "Avenir Next", sans-serif;
  --workspace-size-body: 14px;
  --workspace-size-small: 12px;
  --workspace-card-face-height: 136px;
  --workspace-overview-face-height: 164px;
}

/* Compact, consistent base for the administrative and authenticated workspace UI. */
body.admin-shell {
  background: var(--workspace-paper);
  color: var(--workspace-ink);
  font-family: var(--workspace-font);
  font-size: var(--workspace-size-body);
}

/* Authored document copy keeps its established body scale. */
.admin-shell .policy-document,
.admin-shell .about-archive-preview {
  font: var(--font-body);
}

/*
 * Apply the two UI sizes even over legacy inline declarations. The final-node
 * exclusions are intentional: editable/public-authored copy is not UI text.
 */
.admin-shell :not([contenteditable], [contenteditable] *, .policy-document,
  .policy-document *, .about-body-editor, .about-body-editor *,
  .about-archive-preview, .about-archive-preview *, .about-preview-stage,
  .about-preview-stage *,
  .palette-preview, .palette-preview *, .public-preview, .public-preview *,
  .rich-text-preview, .rich-text-preview *, .policy-preview, .policy-preview *,
  .wordmark-logo, svg, svg *, img, video, canvas, iframe, [role="switch"],
  [data-booking-switch], [data-cms-drag-handle], [data-drag-handle],
  .booking-expand, .cms-card-handle, .policy-move button,
  input[type="checkbox"], input[type="radio"], input[type="range"],
  input[type="color"], input[type="hidden"]) {
  font-family: var(--workspace-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: normal;
}

.admin-shell :not([contenteditable], [contenteditable] *, .policy-document,
  .policy-document *, .about-body-editor, .about-body-editor *,
  .about-archive-preview, .about-archive-preview *, .about-preview-stage,
  .about-preview-stage *,
  .palette-preview, .palette-preview *, .public-preview, .public-preview *,
  .rich-text-preview, .rich-text-preview *, .policy-preview, .policy-preview *,
  .wordmark-logo, svg, svg *, img, video, canvas, iframe, [role="switch"],
  [data-booking-switch], [data-cms-drag-handle], [data-drag-handle],
  .booking-expand, .cms-card-handle, .policy-move button,
  input[type="checkbox"], input[type="radio"], input[type="range"],
  input[type="color"], input[type="hidden"]):is(small, .muted, .eyebrow, .workspace-subtle, .card-description, .card-meta,
    .wordmark-context, .workspace-status, .workspace-badge, .palette-feedback,
    .edit-status, .edit-feedback, .policy-feedback,
    .booking-help, .booking-toggle-caption, .booking-field-label, .booking-count,
    .booking-appointment-field > span:first-child, .workspace-tooltip,
    .contacts-email, .contacts-permission, .palette-publication, .palette-draft-changes,
    .cms-card-storage-error, .booking-feedback, .card-index) {
  font-size: 12px !important;
  line-height: 16px !important;
}

/*
 * Page titles are the deliberate exception to the two-size UI type system.
 * Keep the larger treatment scoped to top-level page and policy section titles.
 */
.admin-shell .page-shell > h1,
.admin-shell .policy-section > h1 {
  font-size: 24px !important;
  font-weight: 700;
  line-height: 28px !important;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Compact authenticated breadcrumbs, including their current-page leaf. */
.admin-shell .page-shell .page-breadcrumbs,
.admin-shell .page-shell .page-breadcrumbs * {
  font-size: 12px !important;
  line-height: 16px !important;
}
.admin-shell .page-breadcrumbs {
  margin-bottom: 8px;
}
.admin-shell .page-breadcrumbs ol {
  padding-bottom: 0;
}

/* Bring workspace content closer to the fixed header without shifting it. */
.admin-shell .page-shell {
  padding-top: 16px;
}

.admin-shell :is(label, legend, th) {
  color: var(--workspace-muted);
}

.admin-shell :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea, .studio-dialog input) {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--workspace-line-strong);
  border-radius: var(--workspace-radius);
  background-color: #fff;
  color: var(--workspace-ink);
  box-shadow: none;
}

.admin-shell textarea {
  min-height: 88px;
}

.admin-shell :is(input[type="file"], input[type="color"]) {
  border-radius: var(--workspace-radius);
}

.admin-shell :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea, button, .button, a, summary):focus-visible {
  outline: 2px solid var(--workspace-ink);
  outline-offset: 2px;
}

.admin-shell :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea):focus {
  border-color: var(--workspace-ink);
  box-shadow: 0 0 0 2px rgba(32, 32, 31, .09);
}

.admin-shell :is(
  button:not([role="switch"]):not([data-booking-switch]):not([data-cms-drag-handle]):not([data-drag-handle]):not(.booking-expand):not(.cms-card-handle):not(.policy-move button):not(.workspace-info):not(.about-toolbar button),
  .button:not([role="switch"]):not([data-booking-switch]):not([data-cms-drag-handle]):not([data-drag-handle]):not(.booking-expand):not(.cms-card-handle):not(.policy-move button):not(.workspace-info):not(.about-toolbar button)
) {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--workspace-radius);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
    box-shadow .22s ease, transform .18s ease;
}

.admin-shell :is(
  button:not([role="switch"]):not([data-booking-switch]):not([data-cms-drag-handle]):not([data-drag-handle]):not(.booking-expand):not(.cms-card-handle):not(.policy-move button):not(.workspace-info):not(.about-toolbar button),
  .button:not([role="switch"]):not([data-booking-switch]):not([data-cms-drag-handle]):not([data-drag-handle]):not(.booking-expand):not(.cms-card-handle):not(.policy-move button):not(.workspace-info):not(.about-toolbar button)
):hover {
  background-color: #3b3b39;
  border-color: #3b3b39;
}

.admin-shell :is(button.quiet:not(.about-toolbar button), .button.quiet:not(.about-toolbar button)) {
  background: #fff;
  color: var(--workspace-ink);
  border-color: var(--workspace-line-strong);
}

.admin-shell :is(button.quiet:not(.about-toolbar button), .button.quiet:not(.about-toolbar button)):hover {
  background: var(--workspace-hover);
  border-color: var(--workspace-ink);
  color: var(--workspace-ink);
}

.admin-shell :is(.card, .workspace-card, .cms-fixed-card, .cms-card-slot,
  .cms-sortable-card, .cms-auto-detail, .booking-card, .booking-static-card,
  .booking-global-controls, .palette-tile, .contacts-filters, .contacts-empty,
  .studio-dialog, .workspace-disclosure) {
  border-radius: var(--workspace-radius);
}

/* Shared card language: quiet paper, short radius, soft hover lift/glow. */
.admin-shell :is(.card, .workspace-card, .cms-fixed-card, .cms-card-slot,
  .cms-sortable-card, .cms-auto-detail, .booking-card, .booking-static-card,
  .booking-global-controls, .palette-tile, .workspace-disclosure) {
  background-color: var(--workspace-panel);
  border-color: var(--workspace-line);
  box-shadow: var(--workspace-shadow);
  transition: background-color .2s ease, border-color .2s ease,
    box-shadow .25s ease, transform .2s ease;
}

.admin-shell :is(.card, .workspace-card, .cms-fixed-card, .cms-card-slot,
  .cms-sortable-card, .cms-auto-detail, .booking-card, .booking-static-card,
  .booking-global-controls, .palette-tile, .workspace-disclosure):hover {
  background-color: var(--workspace-hover);
  border-color: #d2d2ce;
  box-shadow: var(--workspace-shadow-hover);
}

.admin-shell :is(.overview-card, .settings-link, .palette-tile-link):hover,
.admin-shell :is(.overview-card, .settings-link, .palette-tile-link):focus-visible {
  background: var(--workspace-hover);
  border-color: #d2d2ce;
  box-shadow: var(--workspace-shadow-hover);
  color: var(--workspace-ink);
}

.admin-shell :is(.card, .workspace-card, .cms-fixed-card, .cms-auto-detail,
  .booking-card, .booking-static-card, .booking-global-controls, .palette-tile) {
  border-radius: var(--workspace-radius);
}

.admin-shell .workspace-card {
  padding: 20px;
  box-shadow: var(--workspace-shadow);
}

.admin-shell .construction-report-subcards {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.admin-shell .construction-report-subcards > li { min-width: 0; }
.admin-shell a.card.construction-report-subcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 16px;
  color: var(--workspace-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.admin-shell :is(.settings-link, .overview-card) {
  border-radius: var(--workspace-radius);
}

/* Equal, aligned collapsed card faces; JS owns face/reveal state and behavior. */
.admin-shell .workspace-equal-face {
  min-height: var(--workspace-card-face-height);
}

.admin-shell details.workspace-nav-card.card,
.admin-shell details.workspace-disclosure {
  display: block;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: clip;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: #fff;
  box-shadow: var(--workspace-shadow);
}

.admin-shell .workspace-card-reveal > [data-workspace-card-inner] {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.admin-shell .workspace-original-heading,
.admin-shell [data-workspace-card-inner] > .card-index { display: none; }
.admin-shell .booking-card-head { cursor: pointer; }
.admin-shell :is(.cms-card-slot,.policy-tile):hover > details > summary,
.admin-shell details:hover > summary,
.admin-shell :is(.booking-card,.booking-static-card):hover > .booking-card-head {
  background-color: var(--workspace-hover);
  transition: background-color .2s ease;
}
.admin-shell .workspace-field-error { display: block; margin-top: 5px; font-size: 12px !important; color: var(--workspace-ink); }
.admin-shell .palette-tile { cursor: pointer; }
.admin-shell :is(.cms-card-handle,.booking-expand,[data-cms-drag-handle],[data-drag-handle],.policy-move button,[role="switch"]) {
  font-size: 14px !important;
}
.admin-shell .workspace-reorder-help { position: absolute; top: 10px; right: 40px; z-index: 3; }

.admin-shell :is(details.workspace-nav-card, details.workspace-disclosure) > summary.workspace-card-face,
.admin-shell a[data-workspace-direct-link] > .workspace-card-face,
.admin-shell [data-workspace-static-card] > .workspace-card-face {
  display: flex;
  min-height: var(--workspace-card-face-height);
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 17px 18px;
  list-style: none;
  cursor: pointer;
  background: #fff;
  color: var(--workspace-ink);
  transition: background-color .2s ease, box-shadow .25s ease;
}

.admin-shell :is(details.workspace-nav-card, details.workspace-disclosure):not([open]) > summary.workspace-card-face {
  height: var(--workspace-card-face-height);
}

.admin-shell :is(details.workspace-nav-card, details.workspace-disclosure) > summary.workspace-card-face::-webkit-details-marker {
  display: none;
}

.admin-shell :is(details.workspace-nav-card, details.workspace-disclosure):not([open]) > summary.workspace-card-face:hover,
.admin-shell :is(details.workspace-nav-card, details.workspace-disclosure):not([open]) > summary.workspace-card-face:focus-visible {
  background: var(--workspace-hover);
  box-shadow: inset 0 0 0 1px rgba(35, 35, 32, .025);
}

.admin-shell :is(details.workspace-nav-card, details.workspace-disclosure) > summary.workspace-card-face .card-index {
  display: block;
  margin: 0;
  color: var(--workspace-muted);
}

.admin-shell :is(details.workspace-nav-card, details.workspace-disclosure) > summary.workspace-card-face .card-title,
.admin-shell a[data-workspace-direct-link] > .workspace-card-face .card-title,
.admin-shell [data-workspace-static-card] > .workspace-card-face .card-title {
  margin: 0;
  color: var(--workspace-ink);
  font-size: 14px !important;
  line-height: 20px !important;
}

.admin-shell :is(a[data-workspace-direct-link], [data-workspace-static-card], details.workspace-disclosure) > .workspace-card-face :is(.card-description, .card-meta) {
  margin: 0;
  padding-top: 0;
}
.admin-shell [data-workspace-static-card] > .workspace-card-face {
  cursor: default;
}
.admin-shell a[data-workspace-direct-link]:is(:hover, :focus-visible) > .workspace-card-face {
  background: var(--workspace-hover);
}

.admin-shell :is(details.workspace-nav-card, details.workspace-disclosure) > .workspace-card-reveal {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--workspace-line);
  background: #fff;
}

.admin-shell .workspace-card-reveal .card-description {
  max-width: 42rem;
  margin: 0 0 14px;
  color: var(--workspace-muted);
}

.admin-shell .workspace-card-open {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--workspace-ink);
  border-radius: var(--workspace-radius);
  background: var(--workspace-ink);
  color: #fff;
  font: 14px/20px var(--workspace-font);
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .22s ease;
}

.admin-shell .workspace-card-open:hover {
  background: #3b3b39;
  border-color: #3b3b39;
  box-shadow: var(--workspace-shadow-hover);
  color: #fff;
}

.admin-shell :is(.workspace-grid, .workspace-equal-face-group, .cms-card-list,
  .cms-compact-grid) {
  align-items: stretch;
}

/* Native expandable settings and booking panels share the same soft frame. */
.admin-shell :is(.cms-settings-detail, .cms-auto-detail, .workspace-disclosure) {
  border-radius: var(--workspace-radius);
  box-shadow: var(--workspace-shadow);
}

.admin-shell :is(.cms-settings-detail, .cms-auto-detail) > summary {
  border-radius: var(--workspace-radius);
}

.admin-shell .cms-expanded-region,
.admin-shell .cms-detail-content {
  border-radius: 0 0 var(--workspace-radius) var(--workspace-radius);
}

/* Compact but legible booking time parts, including narrow mobile intervals. */
.admin-shell .booking-clock select {
  box-sizing: border-box;
  min-height: 38px;
  width: 58px;
  min-width: 58px;
  flex: 0 0 58px;
  padding: 6px 18px 6px 6px !important;
  font-size: 12px !important;
  line-height: 16px !important;
  background-position: right 5px center;
}

.admin-shell .booking-clock select[data-time-part="meridiem"] {
  width: 70px;
  min-width: 70px;
  flex-basis: 70px;
}

.admin-shell .booking-choice[role="switch"][data-booking-switch] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 44px;
  width: 44px !important;
  min-width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0;
  padding: 0 !important;
  border: 2px solid transparent;
  border-radius: 999px !important;
  background: var(--booking-track, var(--paper));
  box-shadow: none;
}

.admin-shell .booking-choice[role="switch"][data-booking-switch]:hover {
  border-color: transparent;
  background: var(--booking-track, var(--paper));
}

.admin-shell .booking-choice[role="switch"][data-booking-switch]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.admin-shell :is(.booking-day, .booking-appointment, .booking-connection,
  .booking-holiday-field, .booking-appointments-empty, .palette-editor,
  .palette-color, .contacts-filters, .contacts-empty) {
  border-radius: var(--workspace-radius);
}

/* Information affordances: JS owns aria-expanded and Escape dismissal. */
.admin-shell .workspace-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.admin-shell button.workspace-info {
  display: inline-grid;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  place-items: center;
  margin: 0 0 0 5px;
  padding: 0;
  border: 1px solid var(--workspace-line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--workspace-muted);
  font: 600 12px/1 var(--workspace-font) !important;
  cursor: help;
}

.admin-shell button.workspace-info:hover,
.admin-shell button.workspace-info:focus-visible {
  background: var(--workspace-hover);
  border-color: var(--workspace-ink);
  color: var(--workspace-ink);
}

.admin-shell .workspace-tooltip {
  position: fixed;
  z-index: 40;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: #fff;
  color: var(--workspace-ink);
  box-shadow: 0 4px 16px rgba(28, 28, 26, .09);
  white-space: normal;
  overflow-wrap: anywhere;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.admin-shell .workspace-info-wrap:not([data-tooltip-dismissed]):hover .workspace-tooltip,
.admin-shell .workspace-info-wrap:not([data-tooltip-dismissed]):focus-within .workspace-tooltip,
.admin-shell .workspace-tooltip[data-tooltip-open="true"],
.admin-shell .workspace-info-wrap:not([data-tooltip-dismissed])[data-tooltip-open="true"] .workspace-tooltip,
.admin-shell .workspace-info-wrap:not(:has([data-tooltip-dismissed])):has(button.workspace-info[data-tooltip-open="true"]) .workspace-tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.admin-shell .workspace-info-wrap[data-tooltip-dismissed] .workspace-tooltip,
.admin-shell .workspace-info-wrap:has([data-tooltip-dismissed]) .workspace-tooltip,
.admin-shell .workspace-tooltip[data-tooltip-dismissed] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Tables remain readable and scrollable, while retaining compact two-size type. */
.admin-shell table {
  border-radius: var(--workspace-radius);
  overflow: hidden;
}

.admin-shell :is(th, td) {
  padding: 10px 12px;
  border-color: var(--workspace-line);
}

.admin-shell th {
  background: #f7f7f6;
}

.admin-shell tbody tr:hover {
  background: var(--workspace-hover);
}

.admin-shell :is(.contacts-table-scroll, .contacts-table-scroll:focus-visible) {
  border-radius: var(--workspace-radius);
}

.admin-shell :is(.notice, .error, .booking-feedback, .palette-error,
  .cms-card-storage-error, .workspace-status, .workspace-badge) {
  border-radius: var(--workspace-radius);
}

.admin-shell .studio-dialog {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
}

.admin-shell .studio-dialog-actions button {
  border-radius: var(--workspace-radius);
}

/* Keep context labels on one of the two workspace UI sizes. */
.admin-shell .wordmark-context {
  font-size: 12px !important;
  line-height: 16px !important;
}

@media (max-width: 680px) {
  :root {
    --workspace-card-face-height: 128px;
  }

  .admin-shell :is(.workspace-grid, .workspace-equal-face-group, .cms-card-list,
    .cms-compact-grid, .booking-card-list, .booking-static-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-shell :is(details.workspace-nav-card, details.workspace-disclosure):not([open]) > summary.workspace-card-face {
    height: var(--workspace-card-face-height);
  }

  .admin-shell .workspace-card {
    padding: 16px;
  }
}

@media (max-width: 380px) {
  .admin-shell .booking-clock select {
    width: 54px;
    min-width: 54px;
    flex-basis: 54px;
    padding-right: 16px !important;
    background-position: right 4px center;
  }

  .admin-shell .booking-clock select[data-time-part="meridiem"] {
    width: 64px;
    min-width: 64px;
    flex-basis: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-shell :is(.card, .workspace-card, .cms-fixed-card, .cms-card-slot,
    .cms-sortable-card, .cms-auto-detail, .booking-card, .booking-static-card,
    .booking-global-controls, .palette-tile, .workspace-disclosure,
    button, .button, .workspace-tooltip) {
    transition: none !important;
  }
}

/* Sortable slots retain their handles, not a second stretched card frame. */
.admin-shell .cms-card-list > .cms-card-slot {
  min-height: 0;
  height: auto;
  align-self: start;
}
.admin-shell .cms-card-list > .cms-card-slot > .cms-sortable-card {
  min-height: 0;
}
.admin-shell .cms-card-list > .cms-card-slot:has(> .workspace-nav-card) {
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.admin-shell .cms-card-list > .cms-card-slot > .workspace-nav-card {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-panel);
  box-shadow: var(--workspace-shadow);
}
.admin-shell .cms-card-list > .cms-card-slot > .workspace-nav-card:hover {
  border: 1px solid var(--workspace-line);
  background: var(--workspace-hover);
  box-shadow: var(--workspace-shadow-hover);
}
.admin-shell .workspace-info-wrap.workspace-reorder-help {
  position: absolute;
  top: 10px;
  right: 40px;
  z-index: 3;
}

.admin-shell .account-preferences-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.admin-shell .account-preferences-fields label { display: inline-flex; align-items: center; }
.admin-shell .account-notification-choice { display: flex; align-items: flex-start; gap: 8px; }
.admin-shell .account-notification-choice label { margin: 0; }
.admin-shell .account-notification-choice input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; }
@media (max-width: 600px) {
  .admin-shell .account-preferences-fields { grid-template-columns: minmax(0,1fr); }
}

/* Keep the canonical reorder affordance visually quiet without shrinking its
   44px pointer target, including while the surrounding card is hovered. */
.admin-shell :is(.cms-card-handle,[data-cms-drag-handle],[data-drag-handle],.policy-move button),
.admin-shell :is(.cms-card-handle,[data-cms-drag-handle],[data-drag-handle],.policy-move button):hover,
.admin-shell :is(.cms-card-handle,[data-cms-drag-handle],[data-drag-handle],.policy-move button):active {
  background: transparent !important;
  border-color: transparent !important;
}

/* A compact Lucide-style mark inside a full-size, keyboard-operable target. */
.admin-shell button.workspace-info {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  border: 0;
  background: transparent;
}
.admin-shell button.workspace-info svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.admin-shell button.workspace-info:hover,
.admin-shell button.workspace-info:focus-visible {
  border-color: transparent;
  background: transparent;
  outline: none;
}
.admin-shell button.workspace-info:focus-visible svg {
  stroke-width: 2.6;
}

/* One focus treatment for fields: the existing border darkens, with no
   external outline or second shadow and no geometry change. */
.admin-shell :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea):focus,
.admin-shell :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea):focus-visible {
  outline: none !important;
  outline-offset: 0;
  border-color: var(--workspace-ink);
  box-shadow: none;
}

.admin-shell .workspace-card-heading {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.admin-shell .workspace-card-heading .card-title {
  margin: 0;
}
.admin-shell .workspace-face-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  color: var(--workspace-muted);
}
.admin-shell .workspace-face-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admin-shell .workspace-card-context {
  display: block;
  max-width: 100%;
  margin: -3px 0 0;
  overflow: hidden;
  color: var(--workspace-muted);
  font-size: 12px !important;
  line-height: 16px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shell .client-create-card {
  display: block;
  align-self: start;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.admin-shell a.card.client-create-card[data-workspace-direct-link] > .workspace-card-face {
  height: var(--workspace-card-face-height);
  min-height: var(--workspace-card-face-height);
  align-items: center;
  justify-content: center;
  padding: 17px;
}
.admin-shell a.card.client-create-card[data-workspace-direct-link] {
  height: auto;
  min-height: 0;
}
.admin-shell a.card.client-create-card[data-workspace-direct-link]:is(:hover, :focus-visible) > .workspace-card-face {
  background: var(--workspace-hover);
  box-shadow: inset 0 0 0 1px rgba(35, 35, 32, .025);
}

.admin-shell details.client-overview-card {
  align-self: start;
}
.admin-shell details.client-overview-card > summary.workspace-card-face {
  box-sizing: border-box;
  height: var(--workspace-overview-face-height);
  min-height: var(--workspace-overview-face-height);
  justify-content: center;
}
.admin-shell details.client-overview-card[open] > summary.workspace-card-face {
  height: auto;
}
.admin-shell .client-overview-card .workspace-card-context {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.admin-shell .client-card-actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.admin-shell .client-card-actions > form {
  display: contents;
  margin: 0;
}
.admin-shell .client-card-actions > form > :is(.edit-feedback, .workspace-status) {
  flex-basis: 100%;
  min-width: 0;
  order: 1;
  white-space: normal;
}
.admin-shell .client-card-actions > form > button,
.admin-shell .client-card-actions > a.button {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  margin: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.admin-shell .client-card-actions > .workspace-edit-icon {
  align-self: center;
}

/* The private-project add tile is a fixed final grid item, not a sortable card. */
.admin-shell .private-project-create {
  position: relative;
  align-self: start;
}
.admin-shell .private-project-create[open] {
  grid-column: 1 / -1;
}
.admin-shell details.private-project-create > summary.workspace-card-face {
  align-items: center;
  justify-content: center;
  padding: 17px;
}
.admin-shell .private-project-create .private-project-plus {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--workspace-ink);
  font-size: 36px !important;
  font-weight: 300;
  line-height: 1 !important;
}
.admin-shell .private-project-create .workspace-card-reveal h2 {
  margin: 0 0 12px;
}
.admin-shell .private-project-create > summary:focus-visible {
  outline: 2px solid var(--workspace-ink);
  outline-offset: -3px;
}

.admin-shell .project-photo[data-reorder-id],
.admin-shell #coverage-articles > fieldset { position: relative; }
.admin-shell #coverage-articles > fieldset { padding-top: 38px; }
.admin-shell tr .content-reorder-handle,
.admin-shell .about-section-order .content-reorder-handle { position: static; display: inline-grid; vertical-align: middle; }
.admin-shell [data-content-drag-handle] { touch-action: none; }
.admin-shell .is-content-dragging { opacity: .6; }

/* Numbered portfolio project cards use the shared overview face without
   turning server-persisted project order into a personal card layout. */
.admin-shell .portfolio-project-grid {
  align-items: stretch;
}
.admin-shell .portfolio-project-card {
  position: relative;
  min-width: 0;
  align-self: start;
}
.admin-shell .portfolio-project-card > a.card.overview-card {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--workspace-ink);
  text-decoration: none;
}
.admin-shell .portfolio-project-card > a.card.overview-card > .workspace-card-face {
  box-sizing: border-box;
  min-height: var(--workspace-overview-face-height);
  padding: 17px 76px 48px 18px;
}
.admin-shell .portfolio-project-card .card-title {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.admin-shell .portfolio-project-card > .content-reorder-handle {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
}
.admin-shell .portfolio-project-card > .workspace-info-wrap {
  position: absolute;
  top: 10px;
  right: 44px;
  z-index: 3;
}
.admin-shell .portfolio-project-delete {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  margin: 0;
}
.admin-shell .portfolio-project-delete .portfolio-project-delete-button,
.admin-shell .palette-card-actions .palette-delete-button {
  box-sizing: border-box;
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--workspace-radius);
  background: transparent !important;
  color: var(--workspace-ink);
  box-shadow: none !important;
  cursor: pointer;
}
.admin-shell .portfolio-project-delete .portfolio-project-delete-button:is(:hover, :active, :focus),
.admin-shell .palette-card-actions .palette-delete-button:is(:hover, :active, :focus) {
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.admin-shell .portfolio-project-delete .portfolio-project-delete-button:focus-visible,
.admin-shell .palette-card-actions .palette-delete-button:focus-visible {
  outline: 2px solid var(--workspace-ink);
  outline-offset: 2px;
}
.admin-shell .portfolio-project-delete .portfolio-project-delete-button svg,
.admin-shell .palette-card-actions .palette-delete-button svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}
.admin-shell .portfolio-project-delete .portfolio-project-delete-button:hover svg,
.admin-shell .palette-card-actions .palette-delete-button:hover svg {
  opacity: .72;
}
.admin-shell .portfolio-project-create {
  display: block;
  min-height: var(--workspace-overview-face-height);
  align-self: start;
  margin: 0;
  padding: 0;
  color: var(--workspace-ink);
  text-decoration: none;
}
.admin-shell a.portfolio-project-create > .portfolio-project-create-face {
  box-sizing: border-box;
  min-height: var(--workspace-overview-face-height);
  align-items: center;
  justify-content: center;
  padding: 17px;
}
.admin-shell .portfolio-project-create .portfolio-project-plus {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--workspace-ink);
  font-size: 36px !important;
  font-weight: 300;
  line-height: 1 !important;
}
.admin-shell .portfolio-project-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-hover);
  color: var(--workspace-muted);
}

@media (max-width: 680px) {
  .admin-shell .portfolio-project-card > a.card.overview-card > .workspace-card-face,
  .admin-shell .portfolio-project-create,
  .admin-shell .portfolio-project-create-face {
    min-height: 148px;
  }
}

/* Policy order is shared content order, not a personal overview layout. */
.admin-shell .policy-review-link {
  padding: 0;
  background: transparent;
}
.admin-shell .policy-section :is([data-cms-card-list="policy-consent"], [data-cms-card-list="policy-review"]) {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
.admin-shell .policy-tile {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  box-shadow: var(--workspace-shadow);
}
.admin-shell .policy-tile:hover {
  border-color: #d2d2ce;
  box-shadow: var(--workspace-shadow-hover);
}
.admin-shell .policy-tile > a.card.overview-card {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--workspace-radius);
  box-shadow: none;
  color: var(--workspace-ink);
  text-decoration: none;
}
.admin-shell .policy-tile .policy-move {
  top: 5px;
  right: 5px;
}
.admin-shell .policy-tile .policy-move > .workspace-reorder-help {
  top: 5px;
  right: 39px;
}
.admin-shell a.policy-create {
  display: block;
  min-height: var(--workspace-overview-face-height);
  margin: 0;
  padding: 0;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  box-shadow: var(--workspace-shadow);
}
.admin-shell a.policy-create > .policy-create-face {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 17px;
}
.admin-shell .policy-create .policy-create-plus {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  font-size: 36px !important;
  font-weight: 300;
  line-height: 1 !important;
}

/* Edit actions use the same quiet, outlined-icon language as shared CMS icons. */
.admin-shell :is(button.workspace-edit-icon, a.workspace-edit-icon),
.admin-shell :is(button.workspace-edit-icon, a.workspace-edit-icon):is(:hover, :active, :focus) {
  box-sizing: border-box;
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: var(--workspace-radius);
  background: transparent !important;
  color: var(--workspace-ink);
  box-shadow: none !important;
  text-decoration: none;
  cursor: pointer;
}
.admin-shell :is(button.workspace-edit-icon, a.workspace-edit-icon) svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admin-shell :is(button.workspace-edit-icon, a.workspace-edit-icon):focus-visible {
  outline: 2px solid var(--workspace-ink) !important;
  outline-offset: 2px;
}

/* Publication state actions share the same transparent 44px icon target. */
.admin-shell :is(button, a).workspace-publication-icon,
.admin-shell :is(button, a).workspace-publication-icon:hover,
.admin-shell :is(button, a).workspace-publication-icon:active {
  box-sizing: border-box;
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px !important;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: var(--workspace-radius);
  background: transparent !important;
  color: var(--workspace-ink);
  box-shadow: none !important;
  text-decoration: none;
  cursor: pointer;
}
.admin-shell :is(button, a).workspace-publication-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admin-shell :is(button, a).workspace-publication-icon:focus-visible {
  outline: 2px solid var(--workspace-ink) !important;
  outline-offset: 2px;
}
.admin-shell .workspace-publication-icon:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Background-video playlist cards are ordered content, not workspace cards. */
.admin-shell .video-sequence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin: 12px 0 22px;
}
.admin-shell .video-sequence-card {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-panel);
  box-shadow: var(--workspace-shadow);
  transition: background-color .2s ease, border-color .2s ease,
    box-shadow .25s ease, transform .2s ease;
}
.admin-shell .video-sequence-card:hover {
  border-color: #d2d2ce;
  background: var(--workspace-hover);
  box-shadow: var(--workspace-shadow-hover);
}
.admin-shell .video-sequence-card.is-content-dragging {
  opacity: .6;
}
.admin-shell .video-sequence-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 0 38px 8px 0;
}
.admin-shell .video-sequence-number {
  flex: 0 0 auto;
  color: var(--workspace-muted);
  font-size: 12px !important;
  line-height: 16px !important;
  font-variant-numeric: tabular-nums;
}
.admin-shell .video-sequence-title {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--workspace-ink);
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600;
}
.admin-shell .video-sequence-status {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--workspace-muted);
  font-size: 12px !important;
  line-height: 16px !important;
}
.admin-shell .video-sequence-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #f7f7f6;
}
.admin-shell .video-sequence-source {
  margin: 6px 0 8px;
  color: var(--workspace-muted);
  font-size: 12px !important;
  line-height: 16px !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-shell .video-sequence-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.admin-shell .video-sequence-actions form {
  margin: 0;
}
.admin-shell .video-sequence-actions > form > button.quiet {
  min-height: 38px;
  padding: 7px 10px;
}
.admin-shell .video-sequence-actions .video-remove-button {
  display: inline-grid;
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--workspace-radius);
  background: transparent;
  color: var(--workspace-muted);
  box-shadow: none;
  cursor: pointer;
}
.admin-shell .video-sequence-actions .video-remove-button:hover {
  border-color: transparent;
  background: transparent;
  color: var(--workspace-ink);
}
.admin-shell .video-sequence-actions .video-remove-button svg {
  display: block;
}
.admin-shell .video-sequence-actions .video-poster-edit {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  border: 0;
}
.admin-shell .video-sequence-actions .video-poster-edit > summary {
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  margin: 0;
  border-radius: var(--workspace-radius);
  color: var(--workspace-muted);
  cursor: pointer;
  list-style: none;
}
.admin-shell .video-sequence-actions .video-poster-edit > summary::-webkit-details-marker {
  display: none;
}
.admin-shell .video-sequence-actions .video-poster-edit > summary:hover {
  background: var(--workspace-hover);
  color: var(--workspace-ink);
}
.admin-shell .video-sequence-actions .video-poster-edit > summary svg {
  width: 18px;
  height: 18px;
}
.admin-shell .video-sequence-actions .video-poster-edit[open] {
  flex: 1 0 100%;
  grid-template-columns: minmax(0, 1fr);
}
.admin-shell .video-sequence-actions .video-poster-edit > form {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 5px 0 2px;
}
.admin-shell .video-sequence-actions .video-poster-edit:not([open]) > form {
  display: none;
}
.admin-shell .video-sequence-actions .video-poster-edit label {
  display: grid;
  gap: 4px;
  color: var(--workspace-muted);
  font-size: 12px !important;
  line-height: 16px !important;
}
.admin-shell .video-sequence-actions .video-poster-edit input[type="file"] {
  width: 100%;
  font-size: 12px !important;
}
.admin-shell .video-sequence-actions .video-poster-edit button {
  justify-self: start;
}
.admin-shell .video-sequence-card > .content-reorder-handle {
  position: absolute;
  top: 5px;
  right: 6px;
}
.admin-shell .video-sequence-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  color: var(--workspace-muted);
}
.admin-shell .video-upload-create {
  display: grid;
  min-width: 0;
  min-height: var(--workspace-card-face-height);
  align-self: start;
  overflow: clip;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-panel);
  box-shadow: var(--workspace-shadow);
  transition: background-color .2s ease, border-color .2s ease,
    box-shadow .25s ease, transform .2s ease;
}
.admin-shell .video-upload-create:hover {
  border-color: #d2d2ce;
  background: var(--workspace-hover);
  box-shadow: var(--workspace-shadow-hover);
}
.admin-shell .video-upload-create > summary {
  display: grid;
  min-height: var(--workspace-card-face-height);
  place-items: center;
  color: var(--workspace-ink);
  cursor: pointer;
  list-style: none;
}
.admin-shell .video-upload-create > summary::-webkit-details-marker {
  display: none;
}
.admin-shell .video-upload-create > summary > span[aria-hidden="true"] {
  font-size: 44px !important;
  font-weight: 300;
  line-height: 1 !important;
}
.admin-shell .video-upload-create > summary:focus-visible {
  outline: 2px solid var(--workspace-ink);
  outline-offset: -4px;
}
.admin-shell .video-upload-create[open] {
  grid-column: 1 / -1;
  min-height: 0;
}
.admin-shell .video-upload-create[open] > summary {
  min-height: 44px;
}
.admin-shell .video-upload-create[open] > summary > span[aria-hidden="true"] {
  font-size: 28px !important;
  transform: rotate(45deg);
}
.admin-shell .video-upload-reveal {
  padding: 16px;
  border-top: 1px solid var(--workspace-line);
  background: var(--workspace-panel);
}
.admin-shell .video-upload-reveal form {
  display: grid;
  justify-items: start;
  gap: 10px;
}
.admin-shell .video-upload-reveal h2,
.admin-shell .video-upload-reveal p {
  margin: 0;
}
.admin-shell .video-upload-reveal input[type="file"] {
  width: 100%;
}

@media (max-width: 680px) {
  .admin-shell .video-sequence-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-shell .video-upload-create[open] {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-shell .video-sequence-card {
    transition: none;
  }
}