.control-guidance {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #637980);
  margin-top: 7px;
}
.account-delivery {
  border: 1px solid var(--line, #dce6e8);
  border-radius: 14px;
  padding: 18px;
  margin: 8px 0;
  min-width: 0;
}
.account-delivery legend {
  font-weight: 700;
  padding: 0 8px;
}
.account-delivery p,
.account-delivery small {
  font-size: 12px;
  color: var(--muted, #637980);
  line-height: 1.5;
}
.account-delivery .check {
  display: flex;
  gap: 10px;
  align-items: start;
  margin: 12px 0;
}
.account-delivery input[type='checkbox'] {
  width: 18px;
  min-height: 18px;
  margin: 0;
  flex: none;
}
.timezone-trigger,
.color-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  border: 1px solid var(--line, #dce6e8);
  border-radius: 9px;
  background: var(--surface, #fff);
  padding: 10px 12px;
  color: inherit;
}
.timezone-options,
.color-options {
  border: 1px solid var(--line, #dce6e8);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface, #fff);
  margin-top: 8px;
  box-shadow: 0 12px 32px #16383e12;
}
.timezone-options > div {
  max-height: 220px;
  overflow: auto;
  margin-top: 8px;
}
.timezone-options button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px;
  border-radius: 6px;
}
.timezone-options button[aria-selected='true'] {
  background: #0f766e16;
  color: var(--accent, #0f766e);
}
.color-trigger:before {
  content: '';
  background: var(--chosen-color);
  border: 1px solid #b6c7cc;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  margin-right: 12px;
}
.color-options label {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
  font-size: 12px;
}
.color-options input[type='range'] {
  width: 100%;
  height: 24px;
  min-height: 24px;
  padding: 0;
  accent-color: var(--accent, #0f766e);
}
.color-swatches {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.color-swatches button {
  width: 25px;
  height: 25px;
  min-height: 25px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ccdadd;
}
[hidden] {
  display: none !important;
}

.shared-color {
  width: 100%;
  min-width: 0;
  align-self: start;
}
.brand-color-grid .field:has(.shared-color) {
  align-self: start;
}
.color-options .color-hex {
  min-width: 0;
  width: 100%;
  padding: 6px;
  font-size: 12px;
}

.dialog .field,
.platform-modal-fields .field {
  align-content: start;
  grid-auto-rows: max-content;
}
.dialog .field > .control-guidance,
.platform-modal-fields .field > .control-guidance {
  margin-top: 0;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
}
.account-delivery.full {
  grid-column: 1/-1;
}

.shared-color {
  position: relative;
  min-width: 0;
}
.color-options {
  position: fixed;
  z-index: 100;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 16px;
  box-shadow: 0 14px 50px #15343f30;
  border-radius: 16px;
  margin: 0;
  background: var(--surface, #fff);
}
.color-wheel-layout {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 2px auto 14px;
  touch-action: none;
}
.color-wheel {
  width: 220px;
  height: 220px;
  display: block;
  cursor: crosshair;
  touch-action: none;
}
.color-sv {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  cursor: crosshair;
  touch-action: none;
  box-shadow: 0 0 0 1px #ffffff70;
}
.color-sv i {
  position: absolute;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #263d42;
  border-radius: 50%;
  pointer-events: none;
}
.color-current {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
}
.color-current span {
  width: 32px;
  height: 24px;
  border: 1px solid #78919650;
  border-radius: 6px;
}
.color-options label {
  grid-template-columns: 70px minmax(0, 1fr) 37px;
  margin: 12px 0;
  font-size: 11px;
  gap: 9px;
}
.color-options label:has(.color-hex) {
  grid-template-columns: 70px minmax(0, 1fr);
}
.color-options output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.color-options input {
  min-width: 0;
}
.color-options input[type='range'] {
  min-height: 24px;
  height: 24px;
  padding: 0;
}
.color-options .color-rgb {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.color-options .color-rgb label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 5px 0;
  font-size: 11px;
}
.color-options .color-rgb input {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  min-height: 38px;
}
.color-options .color-swatches {
  justify-content: space-between;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.color-options .color-swatches button {
  width: 25px;
  height: 25px;
  min-height: 25px;
}
.color-options input[data-hsv='0'] {
  accent-color: var(--accent);
}

.color-options[popover] {
  inset: auto;
  margin: 0;
  color: inherit;
}

.timezone-trigger {
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-height: 56px;
}
.timezone-trigger > span:first-child {
  flex: 1;
  min-width: 0;
}
.timezone-trigger strong,
.timezone-options strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}
.timezone-trigger small,
.timezone-options small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--surface-muted, #637b83);
  line-height: 1.5;
}
.timezone-trigger b,
.timezone-meta b {
  font-size: 10px;
  font-weight: 650;
  background: var(--brand-soft, #edf5f5);
  color: var(--brand-accent, #0f766e);
  border-radius: 6px;
  padding: 4px 7px;
  white-space: nowrap;
}
.timezone-options {
  padding: 10px;
  max-width: 100%;
  box-shadow: 0 16px 48px #173b4826;
}
.timezone-options > [role='listbox'] {
  max-height: 290px;
  overflow: auto;
}
.timezone-options [role='option'] {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  border-bottom: 1px solid var(--surface-border, #e7eeef);
}
.timezone-options [role='option'] > span:first-child {
  min-width: 0;
}
.timezone-options [role='option'] small {
  overflow-wrap: anywhere;
}
.timezone-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.timezone-meta small {
  font-size: 10px;
}
.timezone-options [aria-selected='true'] {
  background: var(--brand-soft, #edf5f5);
}
.timezone-options button:focus-visible {
  outline: 2px solid var(--brand-accent, #0f766e);
  outline-offset: -2px;
}
@media (max-width: 500px) {
  .timezone-options [role='option'] {
    gap: 6px;
    padding: 9px 5px;
  }
  .timezone-options [role='option'] small {
    font-size: 10px;
  }
  .timezone-meta b {
    font-size: 9px;
  }
}

.timezone-regions {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  max-height: none !important;
  overflow: visible !important;
}
.timezone-options .timezone-regions > button {
  flex: 1;
  width: auto;
  text-align: center;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  padding: 9px 5px;
  color: var(--ink, #213c40);
}
.timezone-options .timezone-regions > [aria-pressed='true'] {
  background: var(--brand-accent, var(--accent, #0f766e));
  color: var(--brand-accent-ink, #fff);
  border-color: transparent;
}
.timezone-options > [role='listbox'] {
  max-height: 340px !important;
  scrollbar-width: thin;
}
.timezone-options [role='option'] {
  min-height: 75px;
}
.timezone-options .timezone-id {
  font-size: 9px;
  opacity: 0.7;
  margin-top: 3px;
}
.timezone-options [role='option'] strong {
  font-size: 13px;
}
.timezone-options .timezone-help {
  font-size: 10px;
  line-height: 1.6;
  color: var(--surface-muted, #637b83);
  padding: 10px 3px 0;
  margin: 0;
}
.timezone-options .timezone-empty {
  font-size: 12px;
  padding: 14px;
  line-height: 1.6;
  color: var(--surface-muted, #637b83);
}
.timezone-trigger > span:first-child small {
  font-size: 10px;
  line-height: 1.55;
  margin-top: 2px;
}
.timezone-options .timezone-meta {
  padding-left: 5px;
}
.timezone-options [role='option'] small {
  line-height: 1.55;
}
@media (max-width: 500px) {
  .timezone-trigger > span:first-child small {
    font-size: 9px;
  }
  .timezone-options > [role='listbox'] {
    max-height: 260px !important;
  }
  .timezone-options [role='option'] {
    min-height: 76px;
  }
}

/* Shared action geometry. Card pickers and navigation keep their own layouts. */
:root {
  /* Category identities are fixed across workspaces; company colors own selection and branding. */
  --type-workgrid: #334155;
  --type-workgrid-pale: #f1f5f9;
  --type-announcements: #c2410c;
  --type-announcements-pale: #fff7ed;
  --type-schedule: #1d4ed8;
  --type-schedule-pale: #eff6ff;
  --type-requests: #6d28d9;
  --type-requests-pale: #f5f3ff;
  --type-time: #4d7c0f;
  --type-time-pale: #f7fee7;
  --type-pay: #166534;
  --type-pay-pale: #f0fdf4;
  --type-messages: #0e7490;
  --type-messages-pale: #ecfeff;
  --type-cases: #be185d;
  --type-cases-pale: #fdf2f8;
  --type-other: #475569;
  --type-other-pale: #f1f5f9;
  --type-leave: var(--type-requests);
  --type-leave-pale: var(--type-requests-pale);
  --type-availability: #0f766e;
  --type-availability-pale: #f0fdfa;
  --type-swap: var(--type-schedule);
  --type-swap-pale: var(--type-schedule-pale);
  --type-drop: var(--type-other);
  --type-drop-pale: var(--type-other-pale);
  --type-correction: var(--type-announcements);
  --type-correction-pale: var(--type-announcements-pale);
  --type-transfer: var(--type-cases);
  --type-transfer-pale: var(--type-cases-pale);
  --type-safety: var(--type-announcements);
  --type-safety-pale: var(--type-announcements-pale);
  --type-equipment: var(--type-messages);
  --type-equipment-pale: var(--type-messages-pale);
  --type-behavior: var(--type-requests);
  --type-behavior-pale: var(--type-requests-pale);
  --type-management: var(--type-cases);
  --type-management-pale: var(--type-cases-pale);
  --action-gap: 8px;
  --action-group-gap: 12px;
  --control-height: 40px;
  --control-compact-height: 36px;
  --control-period-height: 48px;
}
:is(.layout, .dialog) :is(.btn, .icon-btn) {
  align-items: center;
  justify-content: center;
  gap: var(--action-gap);
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
  max-width: 100%;
}
:is(.layout, .dialog) :is(.btn, .icon-btn) > .icon {
  flex: none;
  display: block;
}
:is(.layout, .platform-page) .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
}
:is(.layout, .platform-page) .badge > :is(.icon, .platform-icon) {
  flex: none;
}
.workspace .page-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
}
.workspace .page-head > .page-head-actions {
  justify-content: flex-start;
  align-items: center;
}
.workspace .page-head-actions:empty {
  display: none;
}
.workspace .page-head-actions > .btn {
  margin: 0;
  min-height: 42px;
}
.workspace :is(.page-head, .card-head) {
  min-width: 0;
}
.workspace :is(.page-head, .card-head) > div:first-child {
  min-width: 0;
}
.workspace :is(.page-head, .card-head) > .row {
  flex-wrap: wrap;
  gap: var(--action-gap);
}
.workspace .card-head > .row {
  justify-content: flex-end;
}
.workspace .page-head h1 {
  overflow-wrap: anywhere;
}
.workspace
  :is(
    .timecard-row-actions,
    .notification-actions,
    .account-access-actions,
    .shift-coverage-actions,
    .staffing-actions,
    .report-actions
  ) {
  align-items: center;
  gap: var(--action-gap);
  flex-wrap: wrap;
}
:is(.dialog .dialog-footer, .platform-dialog-footer) {
  align-items: center;
  gap: var(--action-group-gap);
  flex-wrap: wrap;
}
:is(.dialog .dialog-footer, .platform-dialog-footer) > :is(button, .btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--action-gap);
  line-height: 1.35;
  min-height: 44px;
  margin: 0;
}
.platform-page :is(button, .button-link) {
  line-height: 1.35;
}
.platform-page
  :is(.platform-filter-bar, .platform-person-search)
  :is(input, select, button) {
  min-height: var(--control-height);
  height: var(--control-height);
  box-sizing: border-box;
}
.platform-page
  :is(.platform-filter-bar, .platform-person-search)
  > :is(label, .platform-search) {
  min-height: var(--control-height);
  align-items: center;
}
.platform-page :is(.platform-filter-bar, .platform-person-search) input {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.platform-page .platform-person-search > label {
  height: var(--control-height);
  box-sizing: border-box;
}
.platform-page .platform-person-search > label input {
  height: calc(var(--control-height) - 2px);
  min-height: 0;
}
.platform-page
  :is(
    .platform-person-tabs,
    .platform-ticket-tabs,
    .platform-ticket-status-controls
  )
  button {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 700px) {
  :root {
    --control-height: 44px;
    --control-compact-height: 44px;
  }
  :is(.layout, .dialog) .btn {
    white-space: normal;
    overflow-wrap: break-word;
    min-height: 44px;
  }
  .workspace :is(.page-head, .card-head) > .row {
    justify-content: flex-start;
  }
  :is(.dialog .dialog-footer, .platform-dialog-footer) > :is(button, .btn) {
    flex: 1 1 120px;
  }
  .platform-page
    :is(
      .platform-pagination,
      .platform-chat-pagination,
      .pagination,
      .recipient-actions,
      .support-composer
    )
    button {
    min-height: 44px;
  }
}

/* Operational records share a quiet surface. Category, state and selection have separate markers. */
:is(
  .clock-box,
  .today-assignment,
  .notification-card,
  .manager-timecard,
  .workplace-report-card,
  .coverage-record,
  .dialog .swap-option:has(:checked),
  .employee-request-record,
  .warehouse-panel,
  .team-approvals tbody tr,
  .personal-manager-assignment,
  .warning-record,
  .platform-company-card,
  .platform-health-overview,
  .adoption-request-card,
  .platform-attention-company,
  .platform-request-context
) {
  --record-gradient: var(--brand-surface, #fff);
  --record-inset-surface: transparent;
}

/* Shared interaction and status colors. Brand aliases follow each company's palette. */
:root {
  --tab-active-bg: var(--brand-soft, #eaf5f1);
  --tab-active-ink: var(--brand-readable-accent, #0f766e);
  --tab-active-border: var(--brand-accent, #0f766e);
  --status-warning: #b45309;
  --status-warning-surface: #fffbeb;
  --status-warning-ink: #78350f;
  --status-warning-border: #f1d7a3;
  --status-danger: #b91c1c;
  --status-danger-surface: #fceded;
  --status-danger-ink: #991b1b;
  --status-danger-border: #edc4c8;
  --status-success: #15803d;
  --status-success-surface: #edf8ef;
  --status-success-ink: #166534;
  --status-waiting: #1d4ed8;
  --status-pending: var(--status-warning-ink);
  --status-pending-pale: var(--status-warning-surface);
  --status-approved: var(--status-success-ink);
  --status-approved-pale: var(--status-success-surface);
  --status-denied: var(--status-danger-ink);
  --status-denied-pale: var(--status-danger-surface);
  --person-avatar-radius: 50%;
  --person-avatar-bg: var(--brand-soft, #eaf5f1);
  --person-avatar-ink: var(--brand-readable-accent, #0f766e);
}
/* Status rails supplement each record's written status; category icons remain independent. */
.record-status-rail {
  position: relative;
}
.record-next-step {
  display: flex;
  align-items: start;
  gap: 8px;
  margin: 14px 0;
  color: var(--surface-ink, #213c40);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}
.record-next-step > .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
}
.record-reference {
  color: var(--surface-muted, #526e74);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.record-deadline {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}
.record-deadline.is-overdue {
  color: var(--status-warning-ink);
  background: var(--status-warning-surface);
  padding: 3px 7px;
  border-radius: 5px;
}
.record-status-rail[data-record-state='action'] {
  --record-state-color: var(--status-warning);
}
.record-status-rail[data-record-state='urgent'] {
  --record-state-color: var(--status-danger);
}
.record-status-rail[data-record-state='waiting'] {
  --record-state-color: var(--status-waiting);
}
.record-status-rail[data-record-state='info'] {
  --record-state-color: var(--brand-accent, #0f766e);
}
.record-status-rail:is(
    [data-record-state='action'],
    [data-record-state='urgent'],
    [data-record-state='waiting'],
    [data-record-state='info']
  )::before {
  content: '';
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--record-state-color);
  pointer-events: none;
}
.workspace .notification-category.selected,
.workspace .warning-tabs button.selected,
.workspace .segmented button.active,
.workspace .appearance-editor-tabs button[aria-selected='true'],
.workspace .coverage-view-filters > button.selected,
.platform-page .platform-ticket-tabs button.selected,
.platform-page .platform-person-tabs button.selected,
.platform-page .platform-announcement-folders .selected,
.platform-page .platform-communication-tabs button.selected {
  background: var(--tab-active-bg);
  border-color: var(--tab-active-border);
  color: var(--tab-active-ink);
  box-shadow: inset 0 0 0 1px var(--tab-active-border);
}
.workspace .notification-category.selected > .notification-category-count,
.platform-page .platform-ticket-tabs button.selected > span,
.platform-page .platform-person-tabs button.selected > span {
  background: color-mix(in srgb, var(--tab-active-ink) 18%, transparent);
  color: inherit;
}
.workspace .avatar,
.workspace .warning-avatar,
.workspace .admin-person > span,
.workspace .message-person-avatar,
.workspace .profile-avatar,
.platform-page .platform-person-avatar,
.platform-page .avatar {
  border-radius: var(--person-avatar-radius);
  background: var(--person-avatar-bg);
  color: var(--person-avatar-ink);
  overflow: hidden;
}
.workspace .badge.amber,
.workspace .banner.amber,
.platform-page .badge.suspended {
  background: var(--status-warning-surface);
  color: var(--status-warning-ink);
  border-color: var(--status-warning-border);
}
.workspace .badge.red,
.workspace .banner.red {
  background: var(--status-danger-surface);
  color: var(--status-danger-ink);
  border-color: var(--status-danger-border);
}
.workspace .availability-rule.unavailable {
  border-color: var(--status-warning-border);
  border-left-color: var(--status-warning);
  background: var(--status-warning-surface);
}
.workspace .availability-rule.unavailable .availability-state {
  color: var(--status-warning-ink);
}
.workspace .availability-state {
  color: var(--status-success-ink);
}
.workspace .shift-block.draft {
  border-left-color: var(--status-warning);
  background: var(--status-warning-surface);
}
.workspace .payroll-readiness.has-errors {
  border-left-color: var(--status-warning);
}
.workspace .payroll-readiness.has-errors .payroll-readiness-heading > .icon {
  color: var(--status-warning-ink);
}

.field-requirements {
  display: grid;
  gap: 5px;
  font-weight: 400;
  line-height: 1.45;
}
.field-requirement {
  display: flex;
  align-items: start;
  gap: 6px;
  color: var(--surface-muted, #526e74);
  font-size: 11px;
}
.requirement-mark {
  flex: none;
  width: 13px;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}
.field-requirement.is-met {
  color: var(--status-success-ink, #166534);
}
.requirement-note {
  display: block;
  color: var(--surface-muted, #526e74);
  font-size: 11px;
  line-height: 1.6;
  margin-top: 2px;
}

.platform-page .platform-communication-tabs button.selected small,
.platform-page .platform-communication-tabs button.selected strong {
  color: inherit;
  opacity: 1;
}

.page-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-width: 0;
}
.page-title-line > :is(h1, h2) {
  margin: 0;
}
.page-title-line > .context-help {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}
.context-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--surface-border, #d6e3e5);
  border-radius: 9px;
  background: var(--brand-surface, #fff);
  color: var(--surface-ink, #213c40);
}
.context-help svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.context-help:hover {
  background: var(--surface-soft, #edf5f5);
}
.context-help:focus-visible {
  outline: 2px solid var(--brand-accent, #0f766e);
  outline-offset: 3px;
}
.context-help-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
.dialog-header > .context-help-actions,
.platform-dialog-head > .context-help-actions {
  flex-wrap: nowrap;
}
.auth-box > .context-help {
  margin-top: 18px;
}
@media (max-width: 600px) {
  .dialog-header > .context-help-actions,
  .platform-dialog-head > .context-help-actions {
    gap: 6px;
  }
  .context-help {
    min-height: 40px;
    padding: 8px;
    font-size: 11px;
  }
  .context-help-actions {
    max-width: 100%;
  }
}

dialog > .dialog-feedback {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 0 0 auto;
  max-height: min(25dvh, 160px);
  overflow: auto;
  margin: 0 18px 12px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border, #d6e3e5);
  border-radius: 10px;
  background: var(--surface-soft, #edf5f5);
  color: var(--surface-ink, #213c40);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 3px 12px #0000000a;
}
dialog > .dialog-feedback.is-error {
  border-color: #e5b5ad;
  background: #fff3f0;
  color: #8a2d1c;
}
.dialog-feedback > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dialog-feedback-close {
  flex: 0 0 auto;
  display: grid !important;
  place-items: center;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 22px !important;
}
.form-error:focus,
[role='alert']:focus {
  outline: 2px solid var(--brand-accent, #0f766e);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  dialog > .dialog-feedback {
    margin: 0 10px 10px;
    padding: 10px 12px;
    max-height: 25dvh;
  }
}

#toast.standalone-feedback:not([hidden]):not(.hidden) {
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#toast.standalone-feedback > span {
  flex: 1;
  overflow-wrap: anywhere;
}
#toast.standalone-feedback.error {
  background: #8a2d1c;
  color: white;
}

.account-invitation-choice {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--surface-border, #d6e3e5);
  border-radius: 12px;
  background: var(--surface-soft, #f2f7f7);
}
.account-invitation-choice > .field {
  margin: 0;
}
.account-invitation-choice .note {
  margin: 0;
  line-height: 1.55;
}
.account-invitation-choice [hidden] {
  display: none !important;
}
.account-invitation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--surface-border, #d6e3e5);
}
.account-invitation-row > div:first-child {
  min-width: 0;
}
.account-invitation-row p {
  margin: 6px 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.account-invitation-row .row {
  flex-shrink: 0;
  gap: 12px;
}
.invitation-context {
  padding: 16px;
  margin: 0 0 20px;
  border: 1px solid var(--recovery-accent, #0f766e);
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--recovery-accent, #0f766e) 7%,
    var(--recovery-surface, #fff)
  );
  color: var(--recovery-ink, #213c40);
}
.invitation-context p {
  margin: 6px 0;
  overflow-wrap: anywhere;
}
.invitation-context small {
  line-height: 1.5;
}
@media (max-width: 650px) {
  .account-invitation-row {
    align-items: stretch;
    flex-direction: column;
  }
  .account-invitation-row .row {
    flex-wrap: wrap;
  }
  .account-invitation-choice {
    padding: 14px;
  }
}

.manager-account-panel > .account-invitation-choice {
  margin-bottom: 16px;
}
.manager-account-panel > .field {
  margin-top: 16px;
}

.layout,
.platform-layout {
  position: relative;
  isolation: isolate;
}
.layout::before,
.platform-layout::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    145deg,
    var(--brand-accent, #0f766e),
    var(--brand-secondary, #0f766e)
  );
  mask: url('/assets/workgrid-geometry.svg') center top / 1000px 1167px repeat;
  opacity: 0.14;
}
.workspace {
  position: relative;
  isolation: isolate;
  width: calc(100% - 40px);
  margin: 20px auto;
  background: var(--brand-surface, #fff);
  border: 1px solid var(--surface-border, #dbe5e0);
  border-radius: 20px;
  box-shadow: 0 8px 28px
    color-mix(in srgb, var(--brand-ink, #213c40) 4%, transparent);
}
@media (max-width: 650px) {
  .workspace {
    width: calc(100% - 16px);
    margin: 8px auto;
    border-radius: 16px;
  }
}
@media print, (forced-colors: active) {
  .layout::before,
  .platform-layout::before {
    display: none;
  }
}

.role-access-control {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.role-access-control > .field,
.role-access-control > p {
  margin: 0;
}
.role-access-control [hidden] {
  display: none !important;
}
.role-access-custom {
  padding: 18px;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 12px;
  background: var(--surface-soft, #f5f8f9);
}
.role-access-custom h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
.role-access-custom p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.role-access-permissions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--surface-border, #dce6e8);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.role-permission-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}
.role-permission-group + .role-permission-group {
  border-top: 1px solid var(--surface-border, #dce6e8);
  padding-top: 20px;
}
.role-permission-group > h4 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--brand-readable-accent);
  font-size: 14px;
}
.role-permission-group[hidden] {
  display: none !important;
}
.role-access-permissions legend {
  padding: 0 8px;
  font-weight: 650;
}
.role-access-permissions .check {
  display: flex;
  gap: 9px;
  align-items: start;
  font-size: 13px;
  line-height: 1.5;
}
.role-access-permissions input {
  width: 18px;
  min-height: 18px;
  margin: 1px 0 0;
  flex: none;
}
@media (max-width: 650px) {
  .role-access-permissions {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .role-permission-group {
    grid-template-columns: minmax(0, 1fr);
  }
  .role-access-custom {
    padding: 14px;
  }
}

.confirmation-phrase {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.confirmation-phrase button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--surface-border, #cfdddd);
  border-radius: var(--control-radius, 10px);
  background: var(--brand-canvas, #f4f8f7);
  color: var(--surface-ink, #1f4147);
  text-align: left;
}
.confirmation-phrase code {
  font-size: 16px;
  font-weight: 650;
  overflow-wrap: anywhere;
  user-select: text;
}
.confirmation-phrase button > span,
.confirmation-phrase small {
  font-size: 12px;
  color: var(--surface-muted, #526e74);
}