/* ============================================================================
   CE admin — styles for screens written against this design directly, such as
   the Spin & Win wedge form.

   The admin stays on its established light theme, so this file matches the
   palette already in app.css rather than introducing a second look:

     #FAFAFF  panel / row ground      #E0E0E6  borders
     #1B2240  body text               #737994  muted text
     #0056EF  primary                 #27BC6C  positive
     #F22F19  destructive             #FFB300  warning

   Everything is scoped under .ce-admin. Nothing here targets the shell,
   bare elements, or anything shared with the member app.
   ========================================================================= */
.ce-admin {
  --a-page:    #FFFFFF;
  --a-surface: #FAFAFF;
  --a-border:  #E0E0E6;
  --a-text:    #1B2240;
  --a-muted:   #737994;
  --a-accent:  #0056EF;
  --a-good:    #27BC6C;
  --a-warn:    #FFB300;
  --a-bad:     #F22F19;

  color: var(--a-text);
  padding: 4px 0 40px;
}

/* ---- page head ---- */
.ce-admin .ah { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.ce-admin .ah h1 { font-size: 20px; font-weight: 800; margin: 0; color: var(--a-text); letter-spacing: -0.01em; }
.ce-admin .ah .crumb { color: var(--a-muted); font-size: 12px; }
.ce-admin .ah .spacer { flex: 1; }

/* ---- card ---- */
.ce-admin .acard {
  background: var(--a-page);
  border: 1px solid var(--a-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(27, 34, 64, 0.05);
}
.ce-admin .acard > h2 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--a-text); }
.ce-admin .acard > .hint { color: var(--a-muted); font-size: 12px; margin: 0 0 18px; }

/* ---- form grid ---- */
.ce-admin .agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ce-admin .agrid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .ce-admin .agrid { grid-template-columns: 1fr; } }

.ce-admin label.al {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--a-muted); margin-bottom: 6px;
}
.ce-admin input[type=text], .ce-admin input[type=number],
.ce-admin select, .ce-admin textarea {
  width: 100%; padding: 10px 13px; font-size: 14px;
  color: var(--a-text); background: var(--a-page);
  border: 1px solid var(--a-border); border-radius: 10px;
  outline: none; font-family: inherit;
}
.ce-admin input:focus, .ce-admin select:focus, .ce-admin textarea:focus {
  border-color: var(--a-accent);
  box-shadow: 0 0 0 3px rgba(0, 86, 239, 0.15);
}
.ce-admin input[type=color] {
  width: 100%; height: 42px; padding: 4px; cursor: pointer;
  background: var(--a-page); border: 1px solid var(--a-border); border-radius: 10px;
}
.ce-admin .help { font-size: 11px; color: var(--a-muted); margin-top: 6px; }

/* ---- buttons ---- */
.ce-admin .abtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 999px; border: 1px solid transparent;
  font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--a-accent); color: #fff;
}
.ce-admin .abtn:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.ce-admin .abtn--ghost {
  background: var(--a-page); border-color: var(--a-border); color: var(--a-text);
}
.ce-admin .abtn--ghost:hover { background: var(--a-surface); color: var(--a-text); }
.ce-admin .abtn--danger { background: var(--a-page); border-color: var(--a-bad); color: var(--a-bad); }
.ce-admin .abtn--sm { padding: 7px 13px; font-size: 12px; }

/* ---- type pills ---- */
.ce-admin .pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.ce-admin .pill--win     { background: rgba(0, 86, 239, 0.10);  color: var(--a-accent); }
.ce-admin .pill--award   { background: rgba(39, 188, 108, 0.12); color: #1B7F4A; }
.ce-admin .pill--deduct  { background: rgba(242, 47, 25, 0.10);  color: var(--a-bad); }
.ce-admin .pill--neutral { background: var(--a-surface); color: var(--a-muted); }

/* ---- errors ---- */
.ce-admin .aerr {
  background: rgba(242, 47, 25, 0.06); border: 1px solid rgba(242, 47, 25, 0.35);
  color: #8E1B10; border-radius: 11px; padding: 13px 15px; margin-bottom: 16px; font-size: 13px;
}
.ce-admin .aerr ul { margin: 8px 0 0; padding-left: 18px; }

/* ============================================================================
   Member status pills
   ------------------------------------------------------------------------
   Tone comes from App\MemberStatus::TONES, so a new tier needs an entry
   there plus one rule here. Deliberately readable on the light row ground:
   each pill is a tinted wash with a darkened ink of the same hue, which
   clears 4.5:1 against #FFFFFF and #FAFAFF alike.
   ========================================================================= */
.ce-ms {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.35;
  letter-spacing: 0.01em; white-space: nowrap;
  border: 1px solid transparent;
}
.ce-ms--gold    { background: rgba(255, 179, 0, 0.16);  color: #7A5200; border-color: rgba(255, 179, 0, 0.42); }
.ce-ms--violet  { background: rgba(139, 92, 246, 0.14); color: #5B2BC4; border-color: rgba(139, 92, 246, 0.38); }
.ce-ms--blue    { background: rgba(0, 86, 239, 0.10);   color: #0043BC; border-color: rgba(0, 86, 239, 0.30); }
.ce-ms--grey    { background: #F1F1F6;                  color: #5A6079; border-color: #E0E0E6; }
/* Invitation is an offer, not a tier held yet — dashed to read as pending. */
.ce-ms--pending {
  background: transparent; color: #8A5A00;
  border-color: rgba(255, 179, 0, 0.75); border-style: dashed;
}

/* ============================================================================
   Admin list pages — the users table and its filters, in the SZN6 look
   (soft cards, 14px radii, quiet borders) held to the light palette.
   ========================================================================= */

/* ---- stat strip ---- */
.ce-admin .ce-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.ce-admin .ce-stat {
  background: var(--a-page); border: 1px solid var(--a-border);
  border-radius: 12px; padding: 12px 14px;
}
.ce-admin .ce-stat b {
  display: block; font-size: 21px; font-weight: 800;
  color: var(--a-text); line-height: 1.15; letter-spacing: -0.02em;
}
.ce-admin .ce-stat span {
  display: block; font-size: 10.5px; font-weight: 700; margin-top: 3px;
  color: var(--a-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
/* A tier tile carries its pill colour as a left edge, tying the strip to
   the Status column without repeating the pill itself. */
.ce-admin .ce-stat--tier { border-left: 3px solid var(--a-border); }
.ce-admin .ce-stat--gold    { border-left-color: #FFB300; }
.ce-admin .ce-stat--violet  { border-left-color: #8B5CF6; }
.ce-admin .ce-stat--pending { border-left-color: rgba(255, 179, 0, 0.6); }
.ce-admin .ce-stat--blue    { border-left-color: var(--a-accent); }
.ce-admin .ce-stat--grey    { border-left-color: #C7C9D6; }

/* ---- filter bar ---- */
.ce-admin .ce-filters { padding: 16px 16px 6px; }
.ce-admin .ce-filters .form-group { margin-bottom: 10px; }
.ce-admin .ce-filters label { font-size: 12px; color: var(--a-text); font-weight: 500; }
.ce-admin .ce-search {
  display: block; width: 100%; max-width: 460px;
  padding: 11px 15px; font-size: 14px; border-radius: 999px;
}

/* ---- table ---- */
.ce-admin .ce-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ce-admin .ce-tbl thead th {
  background: #F4F5FA; color: var(--a-muted);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--a-border); border-top: 1px solid var(--a-border);
}
.ce-admin .ce-tbl tbody tr { background: var(--a-page); }
.ce-admin .ce-tbl tbody tr:nth-child(even) { background: var(--a-surface); }
.ce-admin .ce-tbl tbody tr:hover { background: rgba(0, 86, 239, 0.05); }
/* An unverified email keeps its warning ground, but as a wash rather than
   the solid amber that used to swamp the row. */
.ce-admin .ce-tbl tbody tr.ce-row--unverified { background: rgba(255, 179, 0, 0.13); }
.ce-admin .ce-tbl tbody tr.ce-row--unverified:hover { background: rgba(255, 179, 0, 0.2); }
.ce-admin .ce-tbl td {
  border-bottom: 1px solid var(--a-border);
  color: var(--a-text); vertical-align: middle;
}
.ce-admin .ce-tbl td b { font-weight: 700; }
.ce-admin .ce-tbl .ce-ceid {
  font-size: 11px; color: var(--a-muted); font-weight: 600; letter-spacing: 0.02em;
}
.ce-admin .ce-tbl .ce-sub { font-size: 11.5px; color: var(--a-muted); }
.ce-admin .ce-tbl .ce-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.ce-admin .ce-tbl img.radius--circle {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--a-border);
}

/* ---- row action buttons ---- */
.ce-admin .ce-rowbtns { display: flex; gap: 6px; align-items: center; }
.ce-admin .ce-rowbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--a-border); background: var(--a-page);
  color: var(--a-muted); font-size: 12px; padding: 0;
}
.ce-admin .ce-rowbtn:hover { border-color: var(--a-accent); color: var(--a-accent); }
.ce-admin .ce-rowbtn--danger:hover { border-color: var(--a-bad); color: var(--a-bad); }

/* ---- the tier editor on the user page ---- */
.ce-admin .ce-tier-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ce-admin .ce-tier-form select { min-width: 200px; flex: 1 1 200px; }

/* A profile that has not cleared verification. Its own style rather than a
   status pill: dashed amber already means Varsity Invitation, and the two
   sit two columns apart in the same row. */
.ce-admin .ce-flag {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--a-bad);
}

/* ============================================================================
   Admin forms — the activity create/edit screens.

   A real CSS grid rather than the float-based grid--lg-* classes: those let a
   field with two lines of help text push its neighbours out of line, which is
   what made the activity form read as ragged. Here every cell starts at the
   top of its row, so labels line up across the row whatever sits beneath them.
   ========================================================================= */
.ce-admin .ce-form {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px 16px; align-items: start;
}
.ce-admin .ce-form .fld { grid-column: span 12; min-width: 0; }
@media (min-width: 900px) {
  .ce-admin .ce-form .f-3 { grid-column: span 3; }
  .ce-admin .ce-form .f-4 { grid-column: span 4; }
  .ce-admin .ce-form .f-6 { grid-column: span 6; }
  .ce-admin .ce-form .f-8 { grid-column: span 8; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ce-admin .ce-form .f-3,
  .ce-admin .ce-form .f-4,
  .ce-admin .ce-form .f-6 { grid-column: span 6; }
}
.ce-admin .ce-form .fld > label.al { min-height: 0; }

/* The date, time and file inputs were never in the base rule, so they kept
   the browser's default chrome next to the styled text fields. */
.ce-admin input[type=date], .ce-admin input[type=time],
.ce-admin input[type=datetime-local], .ce-admin input[type=email],
.ce-admin input[type=url], .ce-admin input[type=tel], .ce-admin input[type=password] {
  width: 100%; padding: 10px 13px; font-size: 14px;
  color: var(--a-text); background: var(--a-page);
  border: 1px solid var(--a-border); border-radius: 10px;
  outline: none; font-family: inherit;
}
.ce-admin textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.ce-admin select { appearance: auto; }

/* File pickers. app.css hides the input and styles the label that follows it,
   and app.js swaps that label's text for the chosen filename — so the label
   has to stay the input's next sibling. Only its look changes here. */
.ce-admin .ce-file { display: block; }
.ce-admin .ce-file input[type=file] + label {
  display: block; width: 100%; margin: 0; cursor: pointer;
  padding: 16px 14px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--a-muted);
  border: 1px dashed var(--a-border); border-radius: 10px;
  background: var(--a-surface);
}
.ce-admin .ce-file input[type=file] + label:hover {
  border-color: var(--a-accent); color: var(--a-accent); background: var(--a-page);
}
.ce-admin .ce-file input[type=file] + label.ellipsis {
  color: var(--a-text); border-style: solid;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ce-admin .ce-thumb {
  width: 96px; height: 96px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--a-border); display: block; margin-bottom: 10px;
}

/* Section heading inside a form card. */
.ce-admin .ce-sec { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--a-text); }
.ce-admin .ce-sec-hint { color: var(--a-muted); font-size: 12px; margin: 0 0 18px; }

/* The action row. Sits at the end of the form, buttons to the right. */
.ce-admin .ce-actions-bar {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  flex-wrap: wrap; padding-top: 4px;
}
.ce-admin .ce-actions-bar .spacer { flex: 1; }

/* CKEditor replaces the description and success-message textareas. Give the
   editor the same frame as everything else rather than its own grey box. */
.ce-admin .ck-editor__editable { min-height: 180px; }
.ce-admin .ck.ck-editor__main > .ck-editor__editable {
  border-color: var(--a-border); border-radius: 0 0 10px 10px; background: var(--a-page);
}
.ce-admin .ck.ck-toolbar {
  border-color: var(--a-border); border-radius: 10px 10px 0 0; background: var(--a-surface);
}
.ce-admin .ck.ck-editor__editable.ck-focused { border-color: var(--a-accent); box-shadow: none; }

/* The note beside the kind picker: says what the choice actually changes. */
.ce-admin .ce-kindnote {
  font-size: 12.5px; line-height: 1.5; color: var(--a-muted);
  padding: 12px 14px; border-radius: 11px;
  background: var(--a-surface); border: 1px solid var(--a-border);
}
.ce-admin .ce-kindnote b { color: var(--a-text); font-weight: 700; }
.ce-admin .ce-kindnote.is-event {
  background: rgba(0, 86, 239, 0.06); border-color: rgba(0, 86, 239, 0.28);
}

/* A group of fields that appears only for a given choice (Event Access). */
.ce-admin .ce-subform {
  grid-column: 1 / -1;
  border: 1px solid var(--a-border); border-radius: 12px;
  padding: 18px; background: var(--a-surface);
}
.ce-admin .ce-subform .ce-form { gap: 16px 16px; }

/* ---- state tags for list rows ---- */
.ce-admin .ce-tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
.ce-admin .ce-tag--ok   { background: rgba(39, 188, 108, 0.13); color: #1B7F4A; }
.ce-admin .ce-tag--warn { background: rgba(255, 179, 0, 0.16);  color: #7A5200; }
.ce-admin .ce-tag--off  { background: #F1F1F6;                  color: #5A6079; }
.ce-admin .ce-tag--live { background: rgba(0, 86, 239, 0.10);   color: #0043BC; }
.ce-admin .ce-tagstack { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

/* Company logo in a list row. */
.ce-admin .ce-logo {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--a-border); background: var(--a-surface); display: block;
}

/* Two numbers stacked in one cell: applied over approved. */
.ce-admin .ce-count { font-size: 12px; color: var(--a-muted); white-space: nowrap; }
.ce-admin .ce-count b { color: var(--a-text); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Row actions that carry a word as well as an icon. */
.ce-admin .ce-linkbtns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ce-admin .ce-linkbtn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start;
  padding: 5px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--a-border); background: var(--a-page); color: var(--a-text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ce-admin .ce-linkbtn:hover { border-color: var(--a-accent); color: var(--a-accent); text-decoration: none; }
.ce-admin .ce-linkbtn--danger:hover { border-color: var(--a-bad); color: var(--a-bad); }
.ce-admin .ce-logo--initial {
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--a-muted);
}

/* ============================================================================
   Audience targeting — who sees an activity.

   Chips instead of bare checkboxes: app.css hides every input[type=checkbox]
   in the admin, which left this screen showing a row of words with nothing to
   tick. The input stays (Livewire binds to it) and the label is the target.
   ========================================================================= */
.ce-admin.ce-target { padding: 0; }

.ce-target-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--a-border);
}
.ce-target-head h2 { margin: 0 0 2px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.ce-target-head .hint { margin: 0; font-size: 12.5px; color: var(--a-muted); }
.ce-target-count {
  margin-left: auto; text-align: right; line-height: 1.15;
  padding: 8px 16px; border-radius: 12px;
  background: rgba(0, 86, 239, 0.08); border: 1px solid rgba(0, 86, 239, 0.22);
}
.ce-target-count b {
  display: block; font-size: 24px; font-weight: 800; color: var(--a-accent);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.ce-target-count span {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--a-muted);
}
.ce-target-count.is-busy { opacity: 0.45; }

/* ---- one filter ---- */
.ce-target-groups {
  display: flex; flex-direction: column; gap: 8px;
  max-height: min(58vh, 520px); overflow-y: auto; padding-right: 2px;
}
.ce-tgroup { border: 1px solid var(--a-border); border-radius: 12px; background: var(--a-page); }
.ce-tgroup.is-open { border-color: rgba(0, 86, 239, 0.35); background: var(--a-surface); }

.ce-tgroup-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; background: none; border: none; cursor: pointer;
  font: inherit; color: var(--a-text); text-align: left;
}
.ce-tgroup-head.is-static { cursor: default; }
.ce-tgroup-chev { color: var(--a-muted); display: grid; place-items: center; flex: 0 0 auto; transition: transform 0.16s ease; }
.ce-tgroup.is-open .ce-tgroup-chev { transform: rotate(90deg); color: var(--a-accent); }
.ce-tgroup-name { font-size: 14px; font-weight: 700; flex: 0 0 auto; }
.ce-tgroup-sum {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  min-width: 0; justify-content: flex-end;
}
.ce-tgroup-any { font-size: 12px; color: var(--a-muted); }
.ce-tgroup-pill {
  flex: 0 0 auto; padding: 2px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  background: rgba(0, 86, 239, 0.10); color: #0043BC;
}
.ce-tgroup-names {
  font-size: 11.5px; color: var(--a-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
@media (max-width: 560px) { .ce-tgroup-names { display: none; } }

.ce-tgroup-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ce-tgroup-bulk { display: flex; align-items: center; gap: 8px; }
.ce-tgroup-bulk button {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 700; color: var(--a-accent); text-decoration: underline;
}
.ce-tgroup-bulk span { color: var(--a-border); }

/* ---- the chips ---- */
.ce-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ce-chip { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
/* Kept in the accessibility tree and still what Livewire binds to. */
.ce-chip input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; pointer-events: none;
}
.ce-chip span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--a-border); background: var(--a-page);
  font-size: 12.5px; font-weight: 600; color: var(--a-text);
  line-height: 1.25; user-select: none;
  /* app.css uppercases and letter-spaces bare labels; a school name is not
     a field label and reads badly shouted. */
  text-transform: none; letter-spacing: normal;
}
.ce-chip span::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto;
  border-radius: 4px; border: 1.5px solid var(--a-border); background: var(--a-page);
}
.ce-chip:hover span { border-color: var(--a-accent); }
.ce-chip input:checked + span {
  background: rgba(0, 86, 239, 0.10); border-color: var(--a-accent); color: #0043BC;
}
.ce-chip input:checked + span::before {
  background: var(--a-accent); border-color: var(--a-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px; background-repeat: no-repeat; background-position: center;
}
.ce-chip input:focus-visible + span { outline: 2px solid var(--a-accent); outline-offset: 2px; }

/* ---- the age range ---- */
.ce-range { display: flex; gap: 12px; flex-wrap: wrap; }
.ce-range label { display: flex; flex-direction: column; gap: 4px; }
.ce-range .al { margin: 0; text-transform: none; letter-spacing: normal; }
.ce-range input { width: 110px; }

/* ---- footer ---- */
.ce-target-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--a-border);
}
.ce-target-foot .spacer { flex: 1; }

@media (prefers-reduced-motion: reduce) { .ce-tgroup-chev { transition: none; } }

/* ---- a held event settlement ---- */
.ce-hold {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; margin: 14px 0; border-radius: 14px;
  background: rgba(255, 179, 0, 0.08); border: 1px solid rgba(255, 179, 0, 0.45);
}
.ce-hold-ic { color: #B77A00; flex: 0 0 auto; margin-top: 1px; }
.ce-hold b { display: block; font-size: 14.5px; color: var(--a-text, #1B2240); }
.ce-hold p { margin: 4px 0 0; font-size: 13px; color: var(--a-muted, #737994); max-width: 68ch; }
.ce-hold-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---- a note at the top of a form, e.g. after duplicating an activity ---- */
.ce-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; margin: 14px 0; border-radius: 12px;
  background: rgba(45, 63, 231, 0.06); border: 1px solid rgba(45, 63, 231, 0.28);
  font-size: 13.5px; color: var(--a-text, #1B2240); line-height: 1.5;
}
.ce-note-ic { color: #2D3FE7; flex: 0 0 auto; margin-top: 1px; }

/* ---- which commit this server is running; admin sidebar footer ---- */
.on-sb__footer--build {
  margin-top: 8px; font-size: 10.5px; letter-spacing: 0.02em;
  color: var(--a-muted, #737994); opacity: 0.75;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* ---- wallet check on the Passes tab ---- */
.ce-diag {
  margin: 14px 0; padding: 14px 18px; border-radius: 14px;
  background: rgba(45, 63, 231, 0.05); border: 1px solid rgba(45, 63, 231, 0.22);
}
.ce-diag.is-bad { background: rgba(255, 61, 138, 0.06); border-color: rgba(255, 61, 138, 0.45); }
.ce-diag-t { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-muted, #737994); margin-bottom: 8px; }
.ce-diag-grid { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; margin: 0; font-size: 13px; }
.ce-diag-grid dt { color: var(--a-muted, #737994); }
.ce-diag-grid dd { margin: 0; color: var(--a-text, #1B2240); font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.ce-diag-grid dd.bad { color: #C81E5B; font-weight: 700; }
.ce-diag-chip { display: inline-block; padding: 2px 9px; margin: 0 6px 4px 0; border-radius: 999px; background: rgba(0,0,0,0.05); font-size: 12px; }
.ce-diag-chip.is-wallet { background: rgba(45, 63, 231, 0.12); font-weight: 700; }
.on-sb__footer--build.is-bad { color: #C81E5B; opacity: 1; font-weight: 700; }

/* ---- Designation filter chips (users list, membership screens) ------ */
.ce-tierpick { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-tierchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--a-line, #E0E0E6);
  background: #fff; color: var(--a-text, #1B2240);
  font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer;
}
.ce-tierchip:hover { background: #F7F7FB; }
.ce-tierchip.is-on {
  background: #1B2240; border-color: #1B2240; color: #fff;
}
.ce-tierchip-n { font-size: 11px; opacity: 0.6; font-variant-numeric: tabular-nums; }

/* ============================================================================
   Real checkboxes and radios.

   app.css sets `position: absolute; opacity: 0` on every checkbox and radio
   in the admin, so the old forms could draw their own box with a ::before on
   the following label. Screens built since then use the control itself, and
   inherited that rule: the box was there, tickable by a script, and invisible
   to a person. Inside .ce-ctl the real control comes back.
   ========================================================================= */
.ce-ctl input[type="checkbox"],
.ce-ctl input[type="radio"] {
  position: static;
  opacity: 1;
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #0056EF;
  cursor: pointer;
}
.ce-ctl input[type="checkbox"]:disabled,
.ce-ctl input[type="radio"]:disabled { cursor: default; opacity: 0.5; }

/* ---- Publishing modal ---------------------------------------------- */
.ce-pub-h { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 4px; }
.ce-pub-sub { margin: 0 0 18px; font-size: 13px; color: var(--a-muted, #737994); }
.ce-pub-sec { margin-bottom: 18px; }
.ce-pub-k {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--a-muted, #737994); margin-bottom: 9px;
}
.ce-pub-opt { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; cursor: pointer; }
.ce-pub-opt b { display: block; font-size: 14px; font-weight: 600; color: var(--a-text, #1B2240); }
.ce-pub-opt small { display: block; font-size: 12px; color: var(--a-muted, #737994); margin-top: 1px; }
.ce-pub-tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px; margin: 8px 0 0 24px;
}
.ce-pub-tier {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border: 1px solid var(--a-border, #E0E0E6); border-radius: 11px; cursor: pointer;
  background: #fff;
}
.ce-pub-tier:hover { background: #F7F7FB; }
.ce-pub-when { margin: 8px 0 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ce-pub-when input[type="datetime-local"] {
  padding: 9px 12px; border: 1px solid var(--a-border, #E0E0E6); border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--a-text, #1B2240); background: #fff;
}
.ce-pub-when span { font-size: 12px; color: var(--a-muted, #737994); }
.ce-pub-warn { margin: 7px 0 0 24px; font-size: 12.5px; color: #C81E5B; font-weight: 600; }
.ce-pub-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ce-pub-btn {
  font: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 18px;
  border-radius: 11px; border: 1px solid transparent; cursor: pointer;
}
.ce-pub-btn--go { background: var(--a-accent, #0056EF); color: #fff; }
.ce-pub-btn--go:hover { filter: brightness(1.06); }
.ce-pub-btn--off { background: #fff; color: #C81E5B; border-color: rgba(200, 30, 91, 0.4); }
.ce-pub-btn--off:hover { background: rgba(200, 30, 91, 0.06); }
.ce-pub-btn--quiet { background: #F1F1F6; color: var(--a-text, #1B2240); }
.ce-pub-btn--quiet:hover { background: #E7E7EF; }