/* Rules for the PCS Home Configurations screen (client_code/email_management).
 *
 * Anvil's server strips the text out of a <style> in an HTML template, so the rules live
 * here and anvil.yaml links the file from native_deps.head_html. The selector rules:
 *
 * 1. .em-shell is the form ROOT, so its own rule is a BARE class, including
 *    min-height:100vh. Nothing more is needed: this app declares no layout and this form's
 *    container is an inline HtmlTemplate, so the "position:relative / flex:1 0 auto"
 *    advice — which is for a form mounted inside the shared drawer layout's
 *    .px-nav-content scroller — does not apply. The @media (max-width:768px) override of
 *    the same rule is bare for the same reason.
 *
 * 2. Every other rule is scoped :where(.em-shell), which adds no specificity.
 *
 * 3. Three families are prefixed `.em-shell `, UN-:where()d, at (0,3,1). .em-shell is
 *    provably an ancestor of every .em-field; whether Anvil puts anvil-component on an
 *    HTML form's root is stated nowhere. Their file order matters, because the comment
 *    above the invalid-state family says the red ring wins over the hover ring by order.
 *
 * 4. .em-mobile-detail-open is toggled on #em-shell ITSELF, so it is compounded onto the
 *    scope (`:where(.em-shell).em-mobile-detail-open`), never written as a descendant —
 *    as a descendant it would never match.
 *
 * 5. The seven .px-toast rules are scoped on .em-toast-container rather than on the root.
 *    The dependency injects its own .px-toast block into <head> at runtime, AFTER every
 *    head link, so this screen would lose ties on document order. (0,2,0) beats the
 *    dependency's (0,1,0) whatever the order is.
 *    .em-toast-container keeps its own bare rule, and the dependency's own container
 *    class stays absent from this file: pxShowToast is handed this screen's id.
 *
 * 6. The spokes card is `.em-card.em-card-scroll-x`, compounded so no file-order tie
 *    with .em-card can decide it.
 *
 * 7. Two families at the end of the file: the em-hidden rule for elements hidden in the
 *    markup, and the utility classes that carry per-element layout (the markup carries
 *    no `style=` attribute). Both are described where they are declared.
 *
 * @keyframes emSpin is form-prefixed. No @font-face, no url(), and no shared .px-* class beyond the toast block.
 */

.em-shell {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  color: #1e293b;
  background: #f8fafc;
  min-height: 100vh;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
:where(.em-shell) .em-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
:where(.em-shell) .em-title { font-size:1.6rem; font-weight:700; margin:0; }
:where(.em-shell) .em-subtitle { font-size:1rem; color:#64748b; margin:2px 0 0; }
:where(.em-shell) .em-header-actions { display:flex; gap:8px; }

/* Tabs */
:where(.em-shell) .em-tabs { display:flex; gap:4px; border-bottom:2px solid #e2e8f0; padding-bottom:0; }
:where(.em-shell) .em-tab { padding:10px 24px; font-size:1.05rem; font-weight:600; cursor:pointer; border:none; background:none;
           color:#64748b; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all 0.15s; }
:where(.em-shell) .em-tab:hover { color:#334155; background:#f1f5f9; }
:where(.em-shell) .em-tab.active { color:#e11d48; border-bottom-color:#e11d48; }

/* Toast — canonical pxShowToast. Only the CONTAINER placement is PCS-local (top-right),
   because the shared toolkit takes the container id as an argument. The toast element carries
   the canonical `px-toast` / `px-toast-<type>` classes, styled here with PCS's metrics, colours
   and right-edge entry. The shared stylesheet ships a `.px-toast` block of its own (top-centre,
   Ops look), so these are not the only rules on the page: this screen deliberately keeps its
   top-right `.em-toast-container` placement, its own fills and its slide-in-from-the-right
   entry, and the neutralisers on the rule below hold every remaining property the shared
   block sets, so a shared-library change cannot restyle this screen. The container carries only
   the `em-toast-container` class, so no shared container rule reaches it. Entry/exit ride
   `px-toast-visible` (added on the next frame, removed at the timeout) instead of a keyframe:
   that is the hook pxShowToast drives, and it keeps dismissal starting at the same 3500 ms. All
   five types pxShowToast accepts are styled, not just the four PCS passes.
   The dependency's block is injected AFTER this head link, so each rule is scoped on the
   container and wins on SPECIFICITY (0,2,0 against the dependency's 0,1,0), not order. */
.em-toast-container { position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.em-toast-container .px-toast { padding:12px 20px; border-radius:8px; font-size:1rem; font-weight:500; color:#fff;
            box-shadow:0 4px 12px rgba(0,0,0,0.15); transform:translateX(100%); opacity:0;
            transition:transform 0.3s ease, opacity 0.3s ease;
            /* Neutralisers: every property the shared .px-toast sets that PCS does not. */ max-width:none; word-break:normal; pointer-events:auto; border:none; font-family:var(--px-font); }
.em-toast-container .px-toast.px-toast-visible { transform:translateX(0); opacity:1; }
.em-toast-container .px-toast-success { background:#16a34a; }
.em-toast-container .px-toast-error { background:#dc2626; }
.em-toast-container .px-toast-danger { background:#dc2626; }
.em-toast-container .px-toast-info { background:#2563eb; }
.em-toast-container .px-toast-warning { background:#d97706; }

/* Loading */
:where(.em-shell) .em-loading { display:none; text-align:center; padding:40px; color:#64748b; font-size:1.05rem; }
:where(.em-shell) .em-loading.active { display:block; }
:where(.em-shell) .em-spinner { width:32px; height:32px; border:3px solid #e2e8f0; border-top-color:#e11d48;
                border-radius:50%; animation:emSpin 0.8s linear infinite; margin:0 auto 12px; }
@keyframes emSpin { to{transform:rotate(360deg)} }

/* Card */
:where(.em-shell) .em-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:20px; }

/* Form grid */
:where(.em-shell) .em-form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-top:16px; }
:where(.em-shell) .em-field { display:flex; flex-direction:column; gap:4px; }
:where(.em-shell) .em-field label { font-size:0.95rem; font-weight:600; color:#475569; text-transform:uppercase; letter-spacing:0.5px; }
:where(.em-shell) .em-field input, :where(.em-shell) .em-field select, :where(.em-shell) .em-field textarea {
  padding:8px 12px; border:1px solid #cbd5e1; border-radius:8px; font-size:1.05rem; background:#fff; box-sizing:border-box; }
.em-shell .em-field input:hover, .em-shell .em-field select:hover, .em-shell .em-field textarea:hover,
.em-shell .em-field input:focus, .em-shell .em-field select:focus, .em-shell .em-field textarea:focus {
  border:1px solid #e11d48; padding:8px 12px; box-shadow:0 0 0 3px rgba(225,29,72,0.1); outline:none; }
:where(.em-shell) .em-field select:disabled { opacity:0.5; cursor:not-allowed; background:#f1f5f9;
  border:1px solid #cbd5e1; }
:where(.em-shell) .em-field textarea { resize:vertical; min-height:60px; }
:where(.em-shell) .em-checkbox-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
:where(.em-shell) .em-checkbox-row input[type="checkbox"] { width:18px; height:18px; accent-color:#e11d48; flex-shrink:0; align-self:flex-start; }
:where(.em-shell) .em-checkbox-hint { font-size:0.7rem; color:#94a3b8; font-weight:400; }

/* Buttons */
:where(.em-shell) .em-btn { padding:8px 20px; border:none; border-radius:8px; font-size:1rem; font-weight:600;
            cursor:pointer; transition:all 0.15s; }
:where(.em-shell) .em-btn:disabled { opacity:0.5; cursor:not-allowed; }
:where(.em-shell) .em-btn-primary { background:#e11d48; color:#fff; }
:where(.em-shell) .em-btn-primary:hover:not(:disabled) { background:#be123c; }
:where(.em-shell) .em-btn-warning { background:#f59e0b; color:#fff; }
:where(.em-shell) .em-btn-warning:hover:not(:disabled) { background:#d97706; }
:where(.em-shell) .em-btn-danger { background:#dc2626; color:#fff; }
:where(.em-shell) .em-btn-danger:hover:not(:disabled) { background:#b91c1c; }
:where(.em-shell) .em-btn-secondary { background:#f1f5f9; color:#334155; border:1px solid #cbd5e1; }
:where(.em-shell) .em-btn-secondary:hover:not(:disabled) { background:#e2e8f0; }
:where(.em-shell) .em-btn-sm { padding:6px 14px; font-size:0.95rem; }
:where(.em-shell) .em-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

/* Spokes table */
:where(.em-shell) .em-table { width:100%; border-collapse:collapse; font-size:1rem; }
:where(.em-shell) .em-table th { text-align:left; padding:10px 12px; background:#f8fafc; border-bottom:2px solid #e2e8f0;
                 font-weight:600; color:#475569; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.5px; }
:where(.em-shell) .em-table td { padding:10px 12px; border-bottom:1px solid #f1f5f9; }
:where(.em-shell) .em-table tr:hover td { background:#fafbfc; }
:where(.em-shell) .em-table .em-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:0.9rem; font-weight:600; }
:where(.em-shell) .em-badge-yes { background:#dcfce7; color:#166534; }
:where(.em-shell) .em-badge-no { background:#fee2e2; color:#991b1b; }
:where(.em-shell) .em-edit-btn { background:none; border:1px solid #cbd5e1; border-radius:6px; padding:4px 12px;
                 cursor:pointer; font-size:0.95rem; color:#475569; }
:where(.em-shell) .em-edit-btn:hover { background:#f1f5f9; border-color:#94a3b8; }

/* Modal */
:where(.em-shell) .em-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:10000;
                      align-items:center; justify-content:center; }
:where(.em-shell) .em-modal-overlay.active { display:flex; }
:where(.em-shell) .em-modal { background:#fff; border-radius:16px; padding:28px; max-width:560px; width:90%;
              max-height:85vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
:where(.em-shell) .em-modal h2 { margin:0 0 20px; font-size:1.35rem; }
:where(.em-shell) .em-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }

/* Linked spoke visibility */
:where(.em-shell) .em-spoke-link-field { display:none; }
:where(.em-shell) .em-spoke-link-field.visible { display:flex; }

/* Tab content.
   Designer note (guide step 4): the TEMPLATE ships `active` on
   #em-training-content, so the pane holding the training_content dropzone has a
   box on the IDE designer canvas, where no Python and no module runs and staff
   need somewhere to drop training_authoring. initEmailManagement removes the
   class as its first act, in the form's __init__ while it is still detached, so
   the runtime is unchanged and emSwitchTab is still the only reveal path. This
   screen carries no live class to gate on, so that split is its designer gate. */
:where(.em-shell) .em-tab-content { display:none; }
:where(.em-shell) .em-tab-content.active { display:block; }

/* Colour swatch */
:where(.em-shell) .em-colour-swatch { display:inline-block; width:14px; height:14px; border-radius:4px; border:1px solid #cbd5e1; vertical-align:middle; margin-right:6px; }

/* MAR config section */
:where(.em-shell) .em-section-title { font-size:1.15rem; font-weight:700; margin:0 0 12px; color:#1e293b; border-bottom:1px solid #e2e8f0; padding-bottom:8px; }
:where(.em-shell) .em-mar-notice { padding:12px 16px; background:#fef3c7; border:1px solid #f59e0b; border-radius:8px; font-size:1rem; color:#92400e; }
:where(.em-shell) .em-toggle-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; }
:where(.em-shell) .em-toggle-row { display:flex; align-items:center; gap:8px; padding:6px 0; }
:where(.em-shell) .em-toggle-row input[type="checkbox"] { width:18px; height:18px; accent-color:#e11d48; }
:where(.em-shell) .em-toggle-row label { font-size:1.05rem; cursor:pointer; }
:where(.em-shell) .em-jsonb-editor { border:1px solid #e2e8f0; border-radius:8px; padding:12px; background:#fafbfc; }
:where(.em-shell) .em-jsonb-row { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
:where(.em-shell) .em-jsonb-row input { padding:6px 10px; border:1px solid #cbd5e1; border-radius:6px; font-size:1rem; }
:where(.em-shell) .em-jsonb-row input.short { width:60px; }
:where(.em-shell) .em-jsonb-row input.med { width:120px; }
:where(.em-shell) .em-jsonb-row input.time-input { width:90px; }
:where(.em-shell) .em-jsonb-row input[type="color"] { width:36px; height:30px; padding:2px; border:1px solid #cbd5e1; border-radius:6px; cursor:pointer; }
:where(.em-shell) .em-round-colour-error { display:none; color:#dc2626; font-size:0.8rem; font-weight:600; white-space:nowrap; }
:where(.em-shell) .em-use-black-btn { display:none; border:1px solid #475569; background:#0f172a; color:#fff; border-radius:6px; padding:5px 8px; cursor:pointer; font-size:0.8rem; white-space:nowrap; }
/* Invalid form state: applied by emValidateHomeForm, blocks save until fixed.
   Placed after the hover/focus rules so the red ring wins at equal specificity. */
.em-shell .em-field input.em-invalid, .em-shell .em-field select.em-invalid,
.em-shell .em-field textarea.em-invalid, .em-shell .em-jsonb-row input.em-invalid {
  border:1px solid #dc2626; background:#fef2f2; box-shadow:0 0 0 3px rgba(220,38,38,0.18); }
:where(.em-shell) .em-checkbox-row input[type="checkbox"].em-invalid, :where(.em-shell) .em-toggle-row input[type="checkbox"].em-invalid {
  outline:2px solid #dc2626; outline-offset:2px; border-radius:3px; }
:where(.em-shell) .em-jsonb-editor.em-invalid { border:1px solid #dc2626; background:#fef2f2; }
/* The NON-BLOCKING QuickMAR Facility ID advisory. Deliberately amber and
   deliberately NOT .em-invalid: it is painted by its own arm in
   emValidateHomeForm, never by bad(), never enters the blocking error
   list, and never moves the toast's "(+N more issue(s))" count. The
   save boundary is the sole authority for this field, so the raw value
   always reaches it. A reviewer must be able to tell hint from blocker
   at a glance, which is why the two never share a class or a painter. */
.em-shell .em-field input.em-advisory {
  border:1px solid #f59e0b; background:#fffbeb; box-shadow:none; }
:where(.em-shell) .em-field-advisory { font-size:0.85rem; color:#b45309; font-weight:600; margin-top:2px; }
:where(.em-shell) .em-field-hint { font-size:0.85rem; color:#64748b; margin-top:2px; }
:where(.em-shell) .em-field-hint.warn { color:#b45309; }
/* Manual sweep window: the hours box carries a visible label instead of
   parenthesising the unit into the button's verb. */
:where(.em-shell) .em-sweep-hours-field { display:flex; flex-direction:column; gap:3px; }
:where(.em-shell) .em-sweep-hours-field label { font-size:0.7rem; color:#64748b; font-weight:600;
                                text-transform:uppercase; letter-spacing:0.04em; }
:where(.em-shell) .em-remove-btn { background:none; border:none; color:#dc2626; cursor:pointer; font-size:1rem; padding:2px 6px; }
:where(.em-shell) .em-remove-btn:hover { background:#fee2e2; border-radius:4px; }
:where(.em-shell) .em-add-row-btn { background:none; border:1px dashed #cbd5e1; border-radius:6px; padding:6px 12px;
                    cursor:pointer; font-size:0.95rem; color:#64748b; margin-top:4px; }
:where(.em-shell) .em-add-row-btn:hover { background:#f1f5f9; border-color:#94a3b8; }

/* Home list panel layout */
:where(.em-shell) .em-homes-layout { display:flex; gap:16px; align-items:flex-start; }
:where(.em-shell) .em-home-list-panel { width:360px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
:where(.em-shell) .em-home-detail-panel { flex:1; min-width:0; }
:where(.em-shell) .em-home-filter {
  width:100%; padding:8px 12px; border:1px solid #cbd5e1; border-radius:8px;
  font-size:1rem; background:#fff; box-sizing:border-box;
}
:where(.em-shell) .em-home-filter:focus { outline:none; border-color:#e11d48; box-shadow:0 0 0 3px rgba(225,29,72,0.1); }
:where(.em-shell) .em-home-list {
  max-height:600px; overflow-y:auto; border:1px solid #e2e8f0; border-radius:10px;
  background:#fff;
}
:where(.em-shell) .em-home-card {
  padding:10px 14px; cursor:pointer; border-bottom:1px solid #f1f5f9;
  transition:background 0.1s; display:flex; flex-direction:column; gap:4px;
}
:where(.em-shell) .em-home-card:last-child { border-bottom:none; }
:where(.em-shell) .em-home-card:hover { background:#f8fafc; }
:where(.em-shell) .em-home-card.selected { background:#fff0f3; border-left:3px solid #e11d48; }
:where(.em-shell) .em-home-card-name { font-size:1rem; font-weight:600; color:#1e293b; }
:where(.em-shell) .em-home-card-sub { display:flex; align-items:center; gap:6px; }
:where(.em-shell) .em-home-divider {
  padding:6px 14px; font-size:0.8rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color:#94a3b8; background:#f8fafc;
  border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0;
}
:where(.em-shell) .em-home-card.inactive { opacity:0.6; }
:where(.em-shell) .em-home-card.inactive .em-home-card-name { color:#64748b; font-style:italic; }
:where(.em-shell) .em-home-card.inactive.selected { opacity:1; }
:where(.em-shell) .em-login-badge {
  display:inline-block; padding:2px 7px; border-radius:10px;
  font-size:0.85rem; font-weight:600; white-space:nowrap;
}
:where(.em-shell) .em-login-badge.login-green  { background:#d4edda; color:#155724; }
:where(.em-shell) .em-login-badge.login-amber  { background:#fff3cd; color:#856404; }
:where(.em-shell) .em-login-badge.login-orange,
:where(.em-shell) .em-login-badge.login-never  { background:#f8d7da; color:#721c24; }
:where(.em-shell) .em-login-badge.login-red    { background:#dc3545; color:#fff; }
:where(.em-shell) .em-home-list-empty { padding:20px; text-align:center; color:#94a3b8; font-size:1rem; }
:where(.em-shell) .em-last-login-detail { display:inline-flex; align-items:center; gap:8px; font-size:0.95rem; color:#475569; }

/* Admin Users table (inside spoke modal) */
:where(.em-shell) .em-admin-users-table { width:100%; font-size:1rem; border-collapse:collapse; }
:where(.em-shell) .em-admin-users-table th { text-align:left; padding:4px 8px; font-weight:600; border-bottom:1px solid #e2e8f0; }
:where(.em-shell) .em-admin-users-table td { text-align:left; padding:4px 8px; }

/* Add Admin row (inside spoke modal) — wraps button to a new line on narrow viewports */
:where(.em-shell) .em-admin-add-row { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
:where(.em-shell) .em-admin-add-btn { margin-bottom:1px; }

/* Mobile back button (home detail) — hidden on desktop, shown on mobile */
:where(.em-shell) .em-mobile-back-btn { display:none; }

/* Responsive */
@media (max-width:900px) {
  :where(.em-shell) .em-homes-layout { flex-direction:column; }
  :where(.em-shell) .em-home-list-panel { width:100%; }
}
@media (max-width: 768px) {
  .em-shell { padding:16px; overflow-x:hidden; max-width:100vw; box-sizing:border-box; }
  :where(.em-shell) .em-form-grid { grid-template-columns:1fr; }

  /* Tabs strip — own horizontal scroll so long labels (e.g. "Training Authoring")
     never push the page wider than the viewport. Scrollbar hidden visually. */
  :where(.em-shell) .em-tabs {
    overflow-x:auto; flex-wrap:nowrap;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  :where(.em-shell) .em-tabs::-webkit-scrollbar { display:none; }
  :where(.em-shell) .em-tab { flex-shrink:0; padding:10px 16px; font-size:1rem; }

  /* Home detail → fullscreen modal overlay; list hides behind */
  :where(.em-shell) .em-home-detail-panel {
    display:none; position:fixed; inset:0; z-index:10000;
    background:#f8fafc; overflow-y:auto; padding:16px;
    -webkit-overflow-scrolling:touch;
  }
  :where(.em-shell).em-mobile-detail-open .em-home-detail-panel { display:block; }
  :where(.em-shell).em-mobile-detail-open .em-home-list-panel { display:none; }
  :where(.em-shell) .em-mobile-back-btn {
    display:inline-flex; align-items:center; gap:6px;
    background:#fff; border:1px solid #cbd5e1; border-radius:8px;
    padding:8px 14px; cursor:pointer; font-size:1rem; font-weight:600;
    margin:0 0 12px; color:#475569; min-height:40px;
  }
  :where(.em-shell) .em-mobile-back-btn:hover, :where(.em-shell) .em-mobile-back-btn:focus {
    background:#f1f5f9; outline:none;
  }

  /* Spokes table → cards (also covers admin users table via same class chain) */
  :where(.em-shell) .em-table { display:block; }
  :where(.em-shell) .em-table thead { display:none; }
  :where(.em-shell) .em-table tbody { display:block; }
  :where(.em-shell) .em-table tr {
    display:block; background:#fff; border:1px solid #e2e8f0;
    border-radius:12px; padding:12px 14px; margin-bottom:12px;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
  }
  :where(.em-shell) .em-table tr:hover td { background:transparent; }
  :where(.em-shell) .em-table td {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; padding:6px 0; border:none;
  }
  :where(.em-shell) .em-table td::before {
    content: attr(data-label);
    font-size:0.8rem; font-weight:600; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px;
    min-width:90px; flex-shrink:0;
  }
  :where(.em-shell) .em-table td[data-label=""]::before { content:""; min-width:0; }
  :where(.em-shell) .em-table td:last-child {
    justify-content:flex-end; padding-top:10px;
    border-top:1px solid #f1f5f9; margin-top:4px;
  }
  :where(.em-shell) .em-table td:last-child::before { display:none; }
  :where(.em-shell) .em-table td:last-child .em-edit-btn { min-height:36px; padding:8px 18px; }
  :where(.em-shell) .em-card.em-card-scroll-x { overflow-x:visible !important; padding:0 !important; background:transparent !important; border:none !important; }

  /* Admin Users table → cards (inside spoke modal) */
  :where(.em-shell) .em-admin-users-table { display:block; }
  :where(.em-shell) .em-admin-users-table thead { display:none; }
  :where(.em-shell) .em-admin-users-table tbody { display:block; }
  :where(.em-shell) .em-admin-users-table tr {
    display:block; background:#f8fafc; border:1px solid #e2e8f0;
    border-radius:10px; padding:10px 12px; margin-bottom:8px;
  }
  :where(.em-shell) .em-admin-users-table td {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:4px 0; border:none;
  }
  :where(.em-shell) .em-admin-users-table td::before {
    content: attr(data-label);
    font-size:0.75rem; font-weight:600; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px;
  }
  :where(.em-shell) .em-admin-users-table td[data-label=""]::before { content:""; }
  :where(.em-shell) .em-admin-users-table td:last-child {
    padding-top:8px; border-top:1px solid #e2e8f0; margin-top:4px;
    justify-content:flex-end;
  }
  :where(.em-shell) .em-admin-users-table td:last-child::before { display:none; }

  /* Add Admin row — stack button full-width on a new line */
  :where(.em-shell) .em-admin-add-row .em-field { flex:1 1 100%; }
  :where(.em-shell) .em-admin-add-btn { width:100%; min-height:36px; margin-bottom:0; }
}

/* ===========================================================================
   THE HIDE RULE — for every element hidden in the markup.
   ===========================================================================
   A template `style=` attribute is banned, so the initial hidden state is the
   em-hidden class and the JavaScript toggles it through emHidden(el, hidden)
   instead of writing el.style.display. The class is repeated three times,
   which is (0,3,0): it beats every class rule in this file whatever the file
   order, so nothing can reveal a hidden element by being declared later, and
   an element that gains the class later is hidden without a rule of its own.
   Revealing removes the class, so the element falls back to whatever its own
   class or its default display gives it.

   An element WITHOUT the class in the markup uses .style.display
   (#em-delete-home-btn, #em-mar-section, the JS-built colour-error and
   use-black nodes). */
:where(.em-shell) .em-hidden.em-hidden.em-hidden { display: none; }

/* ===========================================================================
   PER-ELEMENT LAYOUT, as classes (the markup carries no `style=` attribute).
   ===========================================================================
   Scoped `.em-shell ` and NOT `:where(.em-shell) `, deliberately: at (0,1,0)
   these would sit level with .em-checkbox-row's own margin-top:4px and with the
   768px `.em-admin-add-row .em-field` rule, leaving file order to decide.
   (0,2,0) wins without depending on where in the file anything sits.

   Grouped by identical declaration string. Hidden elements that need more than
   display:none carry the rest here too, reusing an existing class where the
   string is identical. */
.em-shell .em-mt-16 { margin-top:16px; }
.em-shell .em-mt-12 { margin-top:12px; }
.em-shell .em-mt-8 { margin-top:8px; }
.em-shell .em-mb-16 { margin-bottom:16px; }
.em-shell .em-ml-8 { margin-left:8px; }
.em-shell .em-ml-4 { margin-left:4px; }
.em-shell .em-flex-1 { flex:1; }
.em-shell .em-row-16 { display:flex; gap:16px; margin-bottom:16px; }
.em-shell .em-row-6 { display:flex; gap:16px; margin-bottom:6px; }
.em-shell .em-inline-row { display:flex; align-items:center; gap:8px; }
.em-shell .em-toolbar-right { display:flex; justify-content:flex-end; margin-bottom:12px; }
.em-shell .em-actions-row { margin-top:16px; display:flex; gap:8px; align-items:center; }
.em-shell .em-cb-label { text-transform:none; font-size:1.05rem; }
.em-shell .em-pointer { cursor:pointer; }
/* The (i) icons. */
.em-shell .em-info-icon { cursor:help; display:inline-block; margin-left:6px; width:16px; height:16px; border-radius:50%; background:#94a3b8; color:#fff; text-align:center; font-size:11px; line-height:16px; }
.em-shell .em-group-label { font-size:0.95rem; font-weight:600; color:#475569; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:6px; }
.em-shell .em-note-sm { color:#94a3b8; font-size:0.8rem; margin-top:2px; }
.em-shell .em-note { color:#94a3b8; font-size:0.8rem; }
.em-shell .em-home-name { margin:0 0 4px; font-size:1.25rem; font-weight:700; }
.em-shell .em-home-route-badge { font-size:0.95rem; margin-bottom:12px; }
.em-shell .em-warn-hint { font-size:0.85rem; color:#b45309; margin-top:4px; }
.em-shell .em-last-login { margin-top:8px; font-size:0.95rem; color:#64748b; }
.em-shell .em-assistant-allowance { margin-top:6px; margin-left:30px; font-size:0.95rem; color:#64748b; }
.em-shell .em-muted-para { color:#64748b; margin:0; }
.em-shell .em-rounds-blurb { font-size:0.95rem; color:#64748b; margin:0 0 12px; }
.em-shell .em-delete-warning { color:#dc2626; font-weight:600; font-size:0.95rem; }
.em-shell .em-admin-heading { font-size:1.1rem; font-weight:700; margin:0 0 12px; }
.em-shell .em-admin-list { margin-bottom:12px; font-size:1rem; color:#475569; }
.em-shell .em-admin-note { font-size:0.9rem; color:#94a3b8; margin:8px 0 0; }
.em-shell .em-confirm-body-box { white-space:pre-wrap; font-size:1.05rem; color:#475569; overflow-y:auto; max-height:60vh; }
/* `--em-border` is declared nowhere in this app, so #ccc is the live value. */
.em-shell .em-sweep-hours-input { width:70px; padding:4px 6px; border:1px solid var(--em-border, #ccc); border-radius:6px; }
/* Compounded onto .em-modal (0,2,0 -> 0,3,0 against .em-modal's own max-width)
   so the narrow confirm dialog cannot lose a file-order tie. */
.em-shell .em-modal.em-modal-narrow { max-width:480px; }
/* Compounded onto .em-card for the same reason: .em-card sets padding:20px. */
.em-shell .em-card.em-card-scroll-x { padding:0; overflow-x:auto; }
/* Compounded twice so it beats the 768px `.em-admin-add-row .em-field
   { flex:1 1 100% }` rule (0,2,0): the email field keeps its 200px basis on
   mobile too. */
.em-shell .em-admin-add-row .em-field.em-admin-email-field { flex:1 1 200px; min-width:0; }

/* Layout for hidden-by-default elements. Others reuse a class above
   (em-warn-hint, em-mt-8, em-mt-16, em-ml-8); these four are their own. */
.em-shell .em-emarswp-wrap { display:inline-flex; align-items:flex-end; gap:6px; }
.em-shell .em-route-swatch-box { width:18px; height:18px; flex-shrink:0; }
.em-shell .em-conflict-box { margin-top:6px; padding:8px 10px; background:#fef2f2; border:1px solid #fecaca; border-radius:6px; color:#b91c1c; font-size:0.9rem; }
.em-shell .em-checkin-hint { color:#e11d48; font-size:0.8rem; margin-top:2px; }
.em-shell .em-admin-section { margin-top:20px; border-top:1px solid #e2e8f0; padding-top:16px; }
.em-shell .em-admin-error-box { margin-bottom:12px; padding:10px 12px; border:1px solid #dc2626; border-radius:8px; background:#fef2f2; color:#991b1b; font-size:0.95rem; }