/* ============================================================
   SWIFT Desk texts (MEA-21): the staff pages (/admin/officer-engagement,
   /da/engagement/review, /ada/engagement/review) and the officer sign-up
   page (/officer/engagement).

   The staff pages reuse the .admin-screens / .asd-* card system from
   admin-screens.css; this sheet only adds the pieces those pages have and
   that system lacks: the tab row, status banners, the message text block,
   guard findings and the approvals list. The officer page reuses the
   officer dashboard's .dashboard-panel card.

   Rule of the desk: anything placed directly on the dark desk background
   uses --t-text-inverse; everything else sits on a --t-card-bg card and
   uses the card text tokens. Structure in @layer layout, paint in
   @layer design, tokens only (D10).
   ============================================================ */

@layer layout {
  /* Tab row between the scheduled texts and the Welcome text. */
  .oe-tabs { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); }
  .oe-tabs a { display: inline-flex; align-items: center;
               min-height: var(--t-target-min, 44px);
               padding: var(--mea-space-2) var(--mea-space-4);
               border-radius: var(--mea-radius-pill); text-decoration: none; }

  /* Saved / sent / refused banners and the page-level Welcome warning. */
  .oe-flash { margin: 0; padding: var(--mea-space-3) var(--mea-space-5);
              border-radius: var(--mea-radius-xl); }
  .oe-flash .panel-empty { margin: 0; padding: 0; }

  .oe-back { margin: 0; }

  /* Inside a version card. */
  .oe-version .asd-editor__body > p,
  .oe-version .asd-editor__body > h3 { margin: 0; }
  .oe-status { margin: 0; }
  .oe-body { margin: 0; padding: var(--mea-space-4); border-radius: var(--mea-radius-md);
             white-space: pre-wrap; overflow-wrap: anywhere; }
  .oe-reasons { margin: 0; padding-inline-start: var(--mea-space-5);
                display: grid; gap: var(--mea-space-2); }
  .oe-reasons p { margin: 0; }
  .oe-soft, .oe-version .asd-msg-error { display: grid; gap: var(--mea-space-3);
                                         padding: var(--mea-space-4);
                                         border-radius: var(--mea-radius-md); }
  .oe-soft > p, .oe-version .asd-msg-error > p { margin: 0; }
  .oe-ack, .oe-send-now { display: grid; gap: var(--mea-space-3);
                          margin-block-start: var(--mea-space-2); }
  .oe-send-now > p { margin: 0; }
  .oe-parties { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mea-space-3); }
  .oe-party { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3); }
  .oe-page .asd-field__help { margin: 0; }
  .oe-list-help { padding: var(--mea-space-4) var(--mea-space-5) 0; }

  /* How often a slot text goes out: two radio choices. */
  .oe-repeat { margin: 0; padding: 0; border: 0; display: grid; gap: var(--mea-space-2); min-inline-size: 0; }
  .oe-repeat legend { padding: 0; margin-block-end: var(--mea-space-1); }
  .oe-repeat__choice { display: flex; align-items: center; gap: var(--mea-space-3);
                       min-height: var(--t-target-min, 44px); }

  /* Officer sign-up card. */
  .officer-engagement__body { display: grid; gap: var(--mea-space-4); }
  .officer-engagement__body p,
  .officer-engagement__heading { margin: 0; }
  .officer-engagement__section { display: grid; gap: var(--mea-space-4); }
  .officer-engagement__disclosure { display: grid; gap: var(--mea-space-2);
                                    padding: var(--mea-space-4);
                                    border-radius: var(--mea-radius-md); }
  .officer-engagement__form { display: grid; gap: var(--mea-space-4); }
  .officer-engagement__code { max-inline-size: 14rem; }
}

@layer design {
  /* Tabs sit on the desk: white outline pills; the current tab is a card. */
  .oe-tabs a { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
               color: var(--t-text-inverse); border: 1px solid currentColor; }
  .oe-tabs a[aria-current] { background: var(--t-card-bg); color: var(--t-text);
                                    border-color: var(--t-card-border); }
  .oe-tabs a:focus-visible { outline: 2px solid var(--t-text-inverse); outline-offset: 2px; }

  .oe-flash { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
              box-shadow: var(--mea-shadow-sm); font-size: var(--mea-text-sm); }
  .oe-flash .panel-empty { color: var(--t-text-secondary); }

  .oe-back a { color: var(--t-text-inverse); font-size: var(--mea-text-sm);
               font-weight: var(--mea-w-semibold); }

  .oe-body { background: var(--t-bg-recessed); color: var(--t-text);
             border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .oe-soft { background: var(--t-warning-bg); color: var(--t-warning-text);
             font-size: var(--mea-text-sm); }
  .oe-version .asd-msg-error { border: 1px solid var(--t-border); }
  .oe-page .asd-field__help { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .oe-party { font-size: var(--mea-text-sm); color: var(--t-text); }
  .oe-repeat__choice { font-size: var(--mea-text-md); color: var(--t-text); }
  .oe-repeat__choice input { accent-color: var(--t-accent); }

  /* Officer sign-up card. */
  .officer-engagement__body { color: var(--t-text); font-size: var(--mea-text-md); }
  .officer-engagement__heading { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                                 font-weight: var(--mea-w-bold); color: var(--t-text); }
  .officer-engagement__disclosure { background: var(--t-bg-recessed); color: var(--t-text);
                                    border: 1px solid var(--t-border); }
  .officer-engagement__hint,
  .officer-engagement__note { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
}