/* ============================================================
   CLIP PORTAL — mobile-first admin design system

   Implements the Claude Design handoff
   (design_handoff_clip_mobile_portal). Designed at 390x844,
   fluid to ~430px, widening to a centred 640px column at 768px+
   where the bottom tab bar becomes a left rail.

   This file owns the palette. clip-ui.css (the component kit)
   reads the same custom properties, so redefining the tokens
   here re-themes every existing page as well as the new screens.
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --cp-bg-root:      #070B14;   /* backdrop outside the app column */
  --cp-bg-app:       #0B1120;   /* app background, top bar */
  --cp-bg-nav:       #0D1424;   /* tab bar, drawer */
  --cp-surface-1:    #131B2E;   /* cards, inputs, buttons */
  --cp-surface-2:    #17203A;   /* card headers, raised rows */
  --cp-surface-sunk: #0F1729;   /* inset tiles, avatars, secondary buttons */
  --cp-surface-key:  #151E33;   /* keypad keys */

  /* ---- lines ---- */
  --cp-line-1: #1B2540;   /* row dividers */
  --cp-line-2: #1F2A45;   /* section dividers */
  --cp-line-3: #24314F;   /* card borders */
  --cp-line-4: #2A375A;   /* emphasised borders */

  /* ---- accents ---- */
  --cp-gold:      #D4A537;
  --cp-gold-soft: #F0CE7A;
  --cp-gold-wash: rgba(212, 165, 55, 0.14);
  --cp-green:     #2FA36B;
  --cp-red:       #D9455F;
  --cp-red-soft:  #E86A6A;
  --cp-blue:      #5B93F5;

  /* ---- text ramp ---- */
  --cp-text-1: #F2F5FA;   /* headings */
  --cp-text-2: #E8ECF5;   /* body */
  --cp-text-3: #C7D2E5;   /* secondary body */
  --cp-text-4: #8D9BB8;   /* muted */
  --cp-text-5: #7C8CAB;   /* captions */
  --cp-text-6: #6F7E9C;   /* field labels */
  --cp-text-7: #5F6E8C;   /* tertiary / meta */
  --cp-text-8: #3C4A6B;   /* disabled, chevrons */

  /* ---- gradients ---- */
  --cp-grad-card: linear-gradient(160deg, #17203A 0%, #111A2E 100%);
  --cp-grad-live: linear-gradient(150deg, rgba(212,165,55,.10) 0%, #131B2E 60%);

  /* ---- type ---- */
  --cp-display: 'Barlow Condensed', 'Bebas Neue', Impact, sans-serif;
  --cp-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- chrome sizes ---- */
  --cp-topbar-h: 58px;
  --cp-tabbar-h: 56px;
  --cp-safe-bottom: env(safe-area-inset-bottom, 0px);

  --cp-ease: cubic-bezier(.2, .8, .2, 1);

  /* ============================================================
     Remap the Clip UI kit onto this palette. Everything built
     during the Syncfusion removal reads these names, so the
     existing pages pick up the new theme without being touched.
     ============================================================ */
  --bg-primary:        var(--cp-bg-app);
  --bg-surface:        var(--cp-surface-1);
  --bg-elevated:       var(--cp-surface-2);
  --bg-chip:           var(--cp-surface-sunk);
  --bg-overlay:        rgba(5, 8, 16, 0.72);
  --bg-inset:          var(--cp-surface-sunk);

  --accent-gold:       var(--cp-gold);
  --accent-gold-hover: var(--cp-gold-soft);
  --accent-gold-muted: var(--cp-gold-wash);
  --on-accent:         var(--cp-bg-app);

  --text-primary:      var(--cp-text-1);
  --text-secondary:    var(--cp-text-3);
  --text-muted:        var(--cp-text-5);
  --text-dark:         var(--cp-bg-app);

  --border:            var(--cp-line-3);
  --border-strong:     var(--cp-line-4);
  --border-subtle:     var(--cp-line-1);
  --border-color:      var(--cp-line-3);

  --success:           var(--cp-green);
  --warning:           var(--cp-gold);
  --error:             var(--cp-red);
  --danger:            var(--cp-red);
  --info:              var(--cp-blue);

  --font-family-heading: var(--cp-display);
  --font-family-body:    var(--cp-body);
}

/* ============================================================
   APP SHELL
   ============================================================ */

body.cp-body {
  margin: 0;
  background: var(--cp-bg-root);
  color: var(--cp-text-2);
  font-family: var(--cp-body);
  -webkit-font-smoothing: antialiased;
}

.cp-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background:
    radial-gradient(120% 80% at 50% 0%, #101A30 0%, var(--cp-bg-root) 60%)
    fixed;
  color: var(--cp-text-2);
  font-family: var(--cp-body);
}

/* ---- top bar ---- */
.cp-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--cp-bg-app);
  border-bottom: 1px solid var(--cp-line-1);
  position: sticky;
  top: 0;
  z-index: 40;
}

.cp-iconbtn {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--cp-line-3);
  background: var(--cp-surface-1);
  color: var(--cp-gold);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color 140ms var(--cp-ease), background 140ms var(--cp-ease);
}
.cp-iconbtn:hover { border-color: var(--cp-gold); }
.cp-iconbtn:focus-visible { outline: none; border-color: var(--cp-gold); box-shadow: 0 0 0 3px rgba(212,165,55,.18); }

/* hamburger bars */
.cp-burger { display: flex; flex-direction: column; gap: 4px; }
.cp-burger span { display: block; width: 15px; height: 2px; background: var(--cp-gold); border-radius: 1px; }

.cp-topbar__titles { flex: 1; min-width: 0; }

.cp-topbar__title {
  font-family: var(--cp-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cp-text-1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-topbar__sub {
  font-family: var(--cp-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cp-text-5);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* right-slot pill button (Scan) */
.cp-topbtn {
  flex: none;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: none;
  border-radius: 12px;
  background: var(--cp-gold);
  color: var(--cp-bg-app);
  font-family: var(--cp-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* ---- content ---- */
.cp-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 26px;
}
.cp-content--tight { padding: 12px 14px 26px; }

/* ---- bottom tab bar ---- */
.cp-tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(22px + var(--cp-safe-bottom));
  background: var(--cp-bg-nav);
  border-top: 1px solid var(--cp-line-2);
  position: sticky;
  bottom: 0;
  z-index: 40;
}

.cp-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.cp-tab__puck {
  width: 30px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--cp-text-7);
  font-size: 15px;
  transition: background 140ms var(--cp-ease), color 140ms var(--cp-ease);
}

.cp-tab__label {
  font-family: var(--cp-body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .03em;
  color: var(--cp-text-7);
}

.cp-tab.active .cp-tab__puck { background: var(--cp-gold-wash); color: var(--cp-gold); }
.cp-tab.active .cp-tab__label { color: var(--cp-gold); }

/* ---- drawer ---- */
.cp-drawer {
  padding: 0;
  border: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  background: transparent;
  position: fixed;
  inset: 0;
  overflow: visible;
}
.cp-drawer::backdrop { background: rgba(5, 8, 16, .72); }
.cp-drawer[open] { display: flex; justify-content: flex-start; }

.cp-drawer__panel {
  width: 282px;
  height: 100dvh;
  background: var(--cp-bg-nav);
  border-right: 1px solid var(--cp-line-3);
  padding: 52px 0 22px;
  display: flex;
  flex-direction: column;
  animation: cp-slide-in 240ms var(--cp-ease);
}
@keyframes cp-slide-in { from { transform: translateX(-100%); } to { transform: none; } }

.cp-drawer__head {
  padding: 0 18px 16px;
  border-bottom: 1px solid var(--cp-line-1);
}
.cp-drawer__comp {
  font-family: var(--cp-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--cp-text-1);
  line-height: 1.15;
}
.cp-drawer__switch {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--cp-body);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--cp-gold);
  cursor: pointer;
}

.cp-drawer__items { padding: 10px 10px 0; overflow-y: auto; flex: 1; }

.cp-navrow {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--cp-text-3);
  font-family: var(--cp-body);
  font-weight: 600;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.cp-navrow:hover { background: rgba(255, 255, 255, .03); color: var(--cp-text-1); }
.cp-navrow.active { background: rgba(212, 165, 55, .12); color: var(--cp-gold-soft); }

.cp-navrow__puck {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--cp-surface-1);
  color: var(--cp-gold);
  font-size: 13px;
}

/* ============================================================
   SHARED PIECES
   ============================================================ */

.cp-card {
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-line-3);
  border-radius: 16px;
  /* Cards carry their own interior spacing. Without this every card relied on
     its page to add padding, and the ones that did not - the class overview,
     reports, sponsors, the team member picker - had their content flush against
     the border. Cards that are edge-to-edge lists opt out below. */
  padding: 14px;
}
.cp-card--grad { background: var(--cp-grad-card); }

/* A card whose children are full-width rows with their own padding: the rows
   run to the border, so the card must not add any of its own. */
.cp-card--flush {
  overflow: hidden;
  padding: 0;
}

.cp-section-label {
  font-family: var(--cp-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cp-text-5);
  margin: 20px 0 10px 2px;
}

/* ---- pills ---- */
.cp-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--cp-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.cp-pill--success { background: rgba(47,163,107,.16); color: var(--cp-green); }
.cp-pill--gold    { background: rgba(212,165,55,.16); color: var(--cp-gold-soft); }
.cp-pill--info    { background: rgba(91,147,245,.14); color: var(--cp-blue); }
.cp-pill--danger  { background: rgba(217,69,95,.16);  color: var(--cp-red); }
.cp-pill--neutral { background: rgba(147,163,196,.10); color: var(--cp-text-4); }

/* ---- chips (filters, tabs, stand selector) ---- */
.cp-chiprow {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.cp-chiprow::-webkit-scrollbar { display: none; }

.cp-chip {
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 11px;
  border: 1px solid var(--cp-line-3);
  background: var(--cp-surface-1);
  color: var(--cp-text-4);
  font-family: var(--cp-body);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.cp-chip.active {
  border-color: var(--cp-gold);
  background: var(--cp-gold-wash);
  color: var(--cp-gold-soft);
}

/* ---- buttons ---- */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-family: var(--cp-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms var(--cp-ease), border-color 140ms var(--cp-ease);
}
.cp-btn:disabled { opacity: .45; cursor: not-allowed; }
.cp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,165,55,.18); }

.cp-btn--gold   { background: var(--cp-gold); color: var(--cp-bg-app); }
.cp-btn--green  { background: var(--cp-green); color: #fff; }
.cp-btn--sec    { background: var(--cp-surface-1); border-color: var(--cp-line-4); color: var(--cp-text-2); font-weight: 600; }
.cp-btn--sunk   { background: var(--cp-surface-sunk); border-color: var(--cp-line-4); color: var(--cp-text-2); font-weight: 600; }
.cp-btn--ghost  { background: transparent; border: 1px dashed var(--cp-line-4); color: var(--cp-text-4); font-weight: 600; }
.cp-btn--danger { background: var(--cp-red); color: #fff; }
.cp-btn--block  { width: 100%; }
.cp-btn--lg     { min-height: 54px; font-size: 16px; border-radius: 16px; }

/* ---- inputs ---- */
.cp-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--cp-line-3);
  background: var(--cp-surface-1);
  color: var(--cp-text-2);
  font-family: var(--cp-body);
  /* 16px floor stops iOS Safari zooming on focus */
  font-size: max(16px, 15px);
  outline: none;
  transition: border-color 140ms var(--cp-ease), box-shadow 140ms var(--cp-ease);
}
.cp-input::placeholder { color: var(--cp-text-7); }
.cp-input:focus {
  border-color: var(--cp-gold);
  box-shadow: 0 0 0 3px rgba(212, 165, 55, .18);
}

.cp-searchrow { display: flex; gap: 8px; margin-bottom: 12px; }

/* ---- progress ---- */
.cp-progress { height: 5px; border-radius: 5px; background: var(--cp-bg-app); overflow: hidden; }
.cp-progress__fill { height: 100%; background: var(--cp-green); border-radius: 5px; transition: width 240ms var(--cp-ease); }

/* ---- avatars / pucks ---- */
.cp-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cp-surface-sunk);
  border: 1px solid var(--cp-line-4);
  font-family: var(--cp-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--cp-text-4);
  overflow: hidden;
}
.cp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-avatar--lg { width: 64px; height: 64px; font-family: var(--cp-display); font-size: 23px; color: var(--cp-gold); }

/* ---- rails ---- */
.cp-rail { flex: none; width: 4px; align-self: stretch; border-radius: 4px; background: var(--cp-text-8); }
.cp-rail--live { background: var(--cp-green); }
.cp-rail--next { background: var(--cp-gold); }
.cp-rail--done { background: var(--cp-text-8); }
.cp-rail--thin { width: 3px; }

/* ---- toast ---- */
.cp-toasts {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(104px + var(--cp-safe-bottom));
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.cp-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 15px;
  background: #12331F;
  border: 1px solid var(--cp-green);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .8);
  color: #D6F3E2;
  font-family: var(--cp-body);
  font-weight: 600;
  font-size: 14px;
  pointer-events: auto;
  animation: cp-toast-in 200ms var(--cp-ease);
}
@keyframes cp-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cp-toast__icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cp-green);
  color: #06280f;
  font-size: 12px;
}
.cp-toast--error   { background: #331216; border-color: var(--cp-red); color: #F6D6DC; }
.cp-toast--error   .cp-toast__icon { background: var(--cp-red); color: #fff; }
.cp-toast--warning { background: #33280F; border-color: var(--cp-gold); color: #F6E6C2; }
.cp-toast--warning .cp-toast__icon { background: var(--cp-gold); color: var(--cp-bg-app); }
.cp-toast--info    { background: #0F2138; border-color: var(--cp-blue); color: #D6E4F8; }
.cp-toast--info    .cp-toast__icon { background: var(--cp-blue); color: #fff; }

/* ---- key/value rows ---- */
.cp-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cp-key {
  font-family: var(--cp-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cp-text-6);
}
.cp-val-num { font-family: var(--cp-display); font-weight: 700; font-size: 19px; color: var(--cp-text-1); }
.cp-val-txt { font-family: var(--cp-body); font-weight: 600; font-size: 13px; color: var(--cp-text-3); }

/* ---- generic list rows ---- */
.cp-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-line-3);
  border-radius: 14px;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.cp-row:hover { border-color: var(--cp-line-4); }
.cp-row--static { cursor: default; }
.cp-list { display: flex; flex-direction: column; gap: 7px; }

/* display:block matters - these are spans, and ellipsis does nothing on an
   inline box, so long class names ran under the value on the right. */
.cp-name { display: block; font-family: var(--cp-body); font-weight: 600; font-size: 15px; color: var(--cp-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-sub  { display: block; font-family: var(--cp-body); font-weight: 400; font-size: 11.5px; color: var(--cp-text-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-grow { flex: 1; min-width: 0; }

/* ---- empty / loading ---- */
.cp-empty {
  padding: 34px 16px;
  text-align: center;
  color: var(--cp-text-5);
  border: 1px dashed var(--cp-line-4);
  border-radius: 16px;
  font-size: 13.5px;
}
.cp-skeleton {
  height: 62px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--cp-surface-1) 25%, var(--cp-surface-2) 50%, var(--cp-surface-1) 75%);
  background-size: 200% 100%;
  animation: cp-shimmer 1.3s linear infinite;
}
@keyframes cp-shimmer { to { background-position: -200% 0; } }

/* live dot */
.cp-livedot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cp-green);
  animation: cp-pulse 2s ease-in-out infinite;
}
@keyframes cp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   RESPONSIVE
   Designed at 390. From 768px the column centres at 640px and
   the tab bar becomes a left rail.
   ============================================================ */

@media (min-width: 768px) {
  .cp-app {
    display: grid;
    grid-template-columns: 232px 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100dvh;
  }

  .cp-topbar { grid-column: 2; }

  .cp-content {
    grid-column: 2;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 18px 18px 40px;
  }

  /* 640px is a comfortable reading column for the list screens, but it is
     far too narrow for a wide data grid - the results table's fixed column
     widths do not fit and the columns collapse over each other. Screens that
     host one opt out at the desktop breakpoint. */
  .cp-content--wide { max-width: 640px; }

  /* tab bar -> left rail */
  .cp-tabbar {
    grid-column: 1;
    grid-row: 1 / -1;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 4px;
    padding: 18px 12px;
    border-top: 0;
    border-right: 1px solid var(--cp-line-2);
    position: sticky;
    top: 0;
    height: 100dvh;
  }
  .cp-tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .cp-tab.active { background: rgba(212, 165, 55, .10); }
  .cp-tab__label { font-size: 14px; }

  /* the hamburger is redundant once the rail is visible */
  .cp-topbar .cp-burger-btn { display: none; }

  .cp-toasts { left: auto; right: 24px; bottom: 24px; width: 380px; }
}

/* Desktop: wide screens get the full column. This is the same breakpoint the
   results screen switches from the keypad to the grid at, so the column only
   widens once something wide is actually in it. */
@media (min-width: 1024px) {
  .cp-content--wide {
    max-width: 1500px;
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-drawer__panel, .cp-toast, .cp-livedot, .cp-skeleton { animation: none; }
}

/* --- shared portal form/page pieces ------------------------------
   These started life in individual pages' <style> blocks, which meant a
   page that used one without also declaring it rendered unstyled. They
   are shared, so they belong here. */

.cp-note {
  background: var(--cp-bg-app);
  border: 1px solid var(--cp-line-3);
  border-radius: 14px;
  padding: 11px 13px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--cp-text-5);
  line-height: 1.45;
}

/* Full-width link out to a desktop page that owns the deeper settings. */
.cp-fulledit {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  text-decoration: none;
}

/* Why the screen is read-only - missing permission, or a closed competition. */
.cp-readonly {
  background: rgba(212, 165, 55, .10);
  border: 1px solid var(--cp-gold);
  border-radius: 12px;
  padding: 10px 13px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--cp-gold);
}

.cp-btn--save {
  min-height: 54px;
  border-radius: 16px;
  border: none;
  background: var(--cp-green);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.cp-btn--save:disabled { opacity: .45; }

/* A labelled switch on its own row - the standard shape for the on/off
   settings that make up most of the portal's editors. */
.cp-switchrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-line-2);
  border-radius: 14px;
}
.cp-switchrow__label { font-size: 15px; font-weight: 600; color: var(--cp-text-1); }
.cp-switchrow__hint { font-size: 12px; color: var(--cp-text-5); margin-top: 2px; }

/* Sticky-feeling footer for a form's save action plus its dirty/saved note. */
.cp-savebar {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cp-line-2);
  display: grid;
  gap: 8px;
}
.cp-savebar__note { font-size: 12px; color: var(--cp-gold); text-align: center; }
.cp-savebar__note.saved { color: var(--cp-text-7); }

/* --- heat / draw list ---------------------------------------------
   A round shown as a card with one row per stand. Used by the class
   screen, the draw and the draw editor; it lived in two of those as a
   duplicated <style> block, so the third rendered unstyled. */

.cp-heatcard {
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-line-2);
  border-radius: 16px;
  overflow: hidden;
}
.cp-heatcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  background: rgba(255, 255, 255, .02);
  border-bottom: 1px solid var(--cp-line-2);
}
.cp-heatcard__name {
  font-family: var(--cp-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cp-text-1);
}

.cp-numchip {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--cp-bg-app);
  border: 1px solid var(--cp-line-3);
  display: grid;
  place-items: center;
  font-family: var(--cp-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--cp-text-5);
}

.cp-drawlist { display: flex; flex-direction: column; }

.cp-drawrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-top: 1px solid var(--cp-line-1);
}
.cp-drawrow:first-child { border-top: 0; }

/* Smaller than the general numchip - a draw row is denser. */
.cp-numchip--draw {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--cp-bg-app);
  border: 1px solid var(--cp-line-3);
  display: grid;
  place-items: center;
  flex: none;
  font-family: var(--cp-display);
  font-weight: 700;
  color: var(--cp-text-5);
}

.cp-drawrow__state {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cp-drawrow__state.in { color: var(--cp-green); }

/* A points type on the class editor: the on/off head, then its options. */
.cp-ptcard { padding: 0; margin-bottom: 8px; overflow: hidden; }
.cp-ptcard__head { display: flex; align-items: center; gap: 12px; padding: 11px 13px; }
.cp-ptcard__body { padding: 0 13px 11px; border-top: 1px solid var(--cp-line-2); }
.cp-ptrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--cp-text-3, var(--cp-text-1));
}

/* A person/entry row, and the small square button used to reorder or remove
   one. Both were declared inside single pages, so the next page to use them
   rendered unstyled - which is how the team editor's member list first came
   out flat. */
.cp-entryrow2 {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-line-2);
  border-radius: 14px;
}

.cp-movebtn {
  /* 40px so two stacked arrows stay separately hittable with a thumb. */
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--cp-line-3);
  background: var(--cp-bg-app);
  color: var(--cp-text-5);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.cp-movebtn:disabled { opacity: .3; cursor: default; }

.cp-tabhead { font-size: 13px; color: var(--cp-text-5); margin-bottom: 11px; }

/* A state toggle that reads as a word rather than a switch - "Hidden/Public",
   "Check in/In". Quiet in its resting state, green once it is on. */
.cp-pubbtn {
  flex: none;
  min-width: 84px;
  min-height: 40px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--cp-bg-app);
  border: 1px solid var(--cp-line-3);
  color: var(--cp-text-5);
}
.cp-pubbtn.is-public {
  background: rgba(22, 163, 74, .16);
  border-color: rgba(22, 163, 74, .5);
  color: var(--cp-green);
}
.cp-pubbtn:disabled { opacity: .45; cursor: default; }

/* Inline "are you sure" for a destructive action, in place of a JS confirm. */
.cp-confirm {
  margin-top: 12px;
  padding: 12px;
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-line-2);
  border-radius: 12px;
}
.cp-confirm__text { font-size: 13px; color: var(--cp-text-1); margin-bottom: 10px; }
.cp-confirm__row { display: flex; gap: 8px; }
.cp-confirm__row > * { flex: 1 1 0; }