/* Stoplight (PREVIEW Oct 27 2026) — per-campus Stoplight report on the case log (data-sl-mode="log")
   and the Stoplight admin on the campus Manager page (data-sl-mode="manager").
   Storybook language of the Cabarrus Team chat (small-caps kicker, IM Fell title, gold rule),
   in Classic / Maroon / Enterprise. Status is never colour-only: every state has a glyph + word. */

/* ---------- tokens ---------- */
.sl {
  --sl-ink: #f4f7fb; --sl-muted: #c4b5e0; --sl-soft: rgba(196,181,224,.78); --sl-gold: #E2B65C;
  --sl-accent: #e879f9; --sl-accent-ink: #1a0533;
  --sl-card: rgba(255,255,255,.045); --sl-card-hover: rgba(255,255,255,.07); --sl-line: rgba(255,255,255,.08); --sl-line-2: rgba(232,121,249,.16);
  --sl-well: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.06));
  --sl-field: rgba(0,0,0,.32); --sl-field-line: rgba(232,121,249,.2); --sl-field-hover: rgba(232,121,249,.36); --sl-ph: rgba(196,181,224,.7);
  --sl-focus: 0 0 0 3px rgba(226,182,92,.24), 0 0 16px rgba(232,121,249,.2); --sl-focus-line: rgba(226,182,92,.8);
  --sl-primary: linear-gradient(135deg,#f0abfc,#e879f9 45%,#c026d3); --sl-primary-ink: #1a0533; --sl-primary-shadow: 0 6px 20px -6px rgba(232,121,249,.55);
  --sl-ghost: rgba(232,121,249,.08); --sl-ghost-hover: rgba(232,121,249,.16); --sl-ghost-line: rgba(232,121,249,.28);
  --sl-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -14px rgba(0,0,0,.6);
  --sl-r: 12px; --sl-r-sm: 8px;
  --sl-y: #FACC15; --sl-y-ink: #FDE68A; --sl-y-bg: rgba(250,204,21,.10); --sl-y-line: rgba(250,204,21,.34);
  --sl-g: #34D399; --sl-g-ink: #A7F3D0; --sl-g-bg: rgba(52,211,153,.10); --sl-g-line: rgba(52,211,153,.34);
  --sl-r-: #F87171; --sl-r-ink: #FECACA; --sl-r-bg: rgba(248,113,113,.10); --sl-r-line: rgba(248,113,113,.36);
  --sl-n: #E2B65C; --sl-n-ink: #F1D9A8; --sl-n-bg: rgba(226,182,92,.10); --sl-n-line: rgba(226,182,92,.36);
  --sl-head: "IM Fell English SC", "Playfair Display", Georgia, serif;
  --sl-body: "EB Garamond", Georgia, "Times New Roman", serif;
  --sl-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sl-num: Outfit, "Source Sans 3", system-ui, sans-serif;
  --sl-ease: cubic-bezier(.2,.7,.2,1);
}
html[data-theme="maroon"] .sl {
  --sl-ink: #1F1A1D; --sl-muted: #5E5459; --sl-soft: #6E6166; --sl-gold: #B48A3C;
  --sl-accent: #8A1538; --sl-accent-ink: #fff;
  --sl-card: #fff; --sl-card-hover: #FFFDFB; --sl-line: rgba(92,6,50,.10); --sl-line-2: rgba(92,6,50,.12);
  --sl-well: linear-gradient(180deg, rgba(92,6,50,.03), rgba(180,138,60,.035));
  --sl-field: #fff; --sl-field-line: #CFC3C8; --sl-field-hover: #B9A9B0; --sl-ph: #7A6B72;
  --sl-focus: 0 0 0 3px rgba(180,138,60,.26); --sl-focus-line: #B48A3C;
  --sl-primary: #5C0632; --sl-primary-ink: #fff; --sl-primary-shadow: 0 6px 16px -8px rgba(92,6,50,.55);
  --sl-ghost: #fff; --sl-ghost-hover: #F7EEF1; --sl-ghost-line: #D9CCD1;
  --sl-shadow: 0 1px 2px rgba(60,10,30,.05), 0 8px 20px -14px rgba(60,10,30,.28);
  --sl-r: 10px; --sl-r-sm: 7px;
  --sl-y: #C99A06; --sl-y-ink: #6E4A00; --sl-y-bg: #FBF4DC; --sl-y-line: #E9D58F;
  --sl-g: #1F8A4C; --sl-g-ink: #17573A; --sl-g-bg: #E6F3EB; --sl-g-line: #A9D6BB;
  --sl-r-: #C2343F; --sl-r-ink: #8B1E2A; --sl-r-bg: #FBEAEB; --sl-r-line: #EDB3B8;
  --sl-n: #B48A3C; --sl-n-ink: #6B4E16; --sl-n-bg: #FBF5EA; --sl-n-line: #E3CFA4;
}
html[data-theme="enterprise"] .sl {
  --sl-ink: #14202E; --sl-muted: #405068; --sl-soft: #52627A; --sl-gold: #C8902E;
  --sl-accent: #1A6E8E; --sl-accent-ink: #fff;
  --sl-card: #fff; --sl-card-hover: #FBFDFE; --sl-line: rgba(15,53,80,.10); --sl-line-2: rgba(15,53,80,.12);
  --sl-well: linear-gradient(180deg, rgba(15,53,80,.03), rgba(200,144,46,.03));
  --sl-field: #fff; --sl-field-line: #C4CFDB; --sl-field-hover: #A9B7C6; --sl-ph: #5A6B80;
  --sl-focus: 0 0 0 3px rgba(26,110,142,.24); --sl-focus-line: #1A6E8E;
  --sl-primary: #0F3550; --sl-primary-ink: #fff; --sl-primary-shadow: 0 6px 16px -8px rgba(11,42,64,.55);
  --sl-ghost: #fff; --sl-ghost-hover: #EEF4F8; --sl-ghost-line: #C4CFDB;
  --sl-shadow: 0 1px 2px rgba(11,42,64,.05), 0 8px 20px -14px rgba(11,42,64,.3);
  --sl-r: 8px; --sl-r-sm: 6px;
  --sl-y: #C99A06; --sl-y-ink: #664700; --sl-y-bg: #FBF4DC; --sl-y-line: #E9D58F;
  --sl-g: #1F8A4C; --sl-g-ink: #15553A; --sl-g-bg: #E5F3EC; --sl-g-line: #A8D5BD;
  --sl-r-: #C2343F; --sl-r-ink: #8A1D2A; --sl-r-bg: #FBE9EB; --sl-r-line: #ECB2B8;
  --sl-n: #C8902E; --sl-n-ink: #6A4A12; --sl-n-bg: #FBF3E4; --sl-n-line: #E6CF9F;
}

/* ---------- shell ---------- */
.sl { color: var(--sl-ink); font-family: var(--sl-sans); }
.sl *, .sl *::before, .sl *::after { box-sizing: border-box; }
.panel.sl { margin-top: 16px; }
.sl [hidden] { display: none !important; }
.sl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 18px; }
.sl-head-txt { min-width: 0; flex: 1 1 320px; }
.sl-kicker { margin: 0 0 6px; font: 700 11px/1.2 var(--sl-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sl-gold); display: flex; align-items: center; gap: 8px; }
.sl-kicker .sl-lights { display: inline-flex; gap: 3px; }
.sl-kicker .sl-lights i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.sl-kicker .sl-lights i:nth-child(1) { background: var(--sl-r-); }
.sl-kicker .sl-lights i:nth-child(2) { background: var(--sl-y); }
.sl-kicker .sl-lights i:nth-child(3) { background: var(--sl-g); }
html body .sl h2.sl-title, html[data-theme] body .sl h2.sl-title {
  margin: 0 !important; font-family: var(--sl-head) !important; font-weight: 400 !important;
  font-size: clamp(24px, 4.2vw, 30px) !important; line-height: 1.15 !important; letter-spacing: .01em !important;
  color: var(--sl-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-transform: none !important;
}
.sl-title::after { content: ""; display: block; width: 56px; height: 1px; margin: 10px 0 0; background: linear-gradient(90deg, var(--sl-gold), transparent); }
.sl-sub { margin: 10px 0 0; max-width: 74ch; font: 400 15px/1.5 var(--sl-sans); color: var(--sl-muted); }
.sl-head-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- buttons ---------- */
html body .sl .sl-btn {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 700 13.5px/1 var(--sl-sans) !important; letter-spacing: .01em; width: auto !important; min-width: 0 !important;
  border: 1px solid var(--sl-ghost-line) !important; background: var(--sl-ghost) !important; color: var(--sl-ink) !important;
  box-shadow: none !important; text-shadow: none !important; transition: background .18s var(--sl-ease), border-color .18s, transform .18s var(--sl-ease), box-shadow .18s;
}
html body .sl .sl-btn:hover { background: var(--sl-ghost-hover) !important; }
html body .sl .sl-btn:active { transform: translateY(1px); }
html body .sl .sl-btn:focus-visible { outline: none; box-shadow: var(--sl-focus) !important; border-color: var(--sl-focus-line) !important; }
html body .sl .sl-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
html body .sl .sl-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
html body .sl .sl-btn-primary { background: var(--sl-primary) !important; color: var(--sl-primary-ink) !important; border-color: transparent !important; box-shadow: var(--sl-primary-shadow) !important; }
html body .sl .sl-btn-primary:hover { filter: brightness(1.06); background: var(--sl-primary) !important; }
html body .sl .sl-btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px !important; gap: 6px; }
html body .sl .sl-btn-quiet { background: transparent !important; border-color: transparent !important; color: var(--sl-muted) !important; }
html body .sl .sl-btn-quiet:hover { color: var(--sl-ink) !important; background: var(--sl-ghost-hover) !important; }
html body .sl .sl-btn-danger { color: var(--sl-r-ink) !important; }
html body .sl .sl-btn-danger.is-arming { background: var(--sl-r-bg) !important; border-color: var(--sl-r-line) !important; }
html body .sl .sl-btn.is-busy { pointer-events: none; opacity: .7; }
html body .sl .sl-btn.is-busy::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sl-spin .7s linear infinite; }

/* ---------- meter (three lights with counts) ---------- */
.sl-meter { display: inline-flex; align-items: stretch; border: 1px solid var(--sl-line-2); border-radius: 999px; padding: 3px; background: var(--sl-well); }
.sl-meter-i { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font: 700 13px/1 var(--sl-num); color: var(--sl-ink); }
.sl-meter-i + .sl-meter-i { border-left: 1px solid var(--sl-line); border-radius: 0 999px 999px 0; }
.sl-meter-i .sl-glyph { width: 18px; height: 18px; }
.sl-meter-i small { font: 600 12px/1 var(--sl-sans); color: var(--sl-muted); letter-spacing: .01em; }

/* ---------- status glyph (shape + colour) ---------- */
.sl-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; color: #fff; }
.sl-glyph svg { width: 62%; height: 62%; }
.sl-glyph[data-st="pending"] { background: var(--sl-y); color: #3d2a00; box-shadow: 0 0 0 3px var(--sl-y-bg); }
.sl-glyph[data-st="fulfilled"] { background: var(--sl-g); color: #fff; box-shadow: 0 0 0 3px var(--sl-g-bg); }
.sl-glyph[data-st="unfulfilled"] { background: var(--sl-r-); color: #fff; box-shadow: 0 0 0 3px var(--sl-r-bg); }
.sl-glyph[data-st="review"] { background: var(--sl-n); color: #fff; box-shadow: 0 0 0 3px var(--sl-n-bg); }
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .sl-glyph[data-st="fulfilled"],
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .sl-glyph[data-st="unfulfilled"],
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .sl-glyph[data-st="review"] { color: #14051f; }

.sl-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 4px; border-radius: 999px; font: 700 12px/1 var(--sl-sans); letter-spacing: .01em; border: 1px solid; }
.sl-tag .sl-glyph { width: 16px; height: 16px; box-shadow: none; }
.sl-tag[data-st="pending"] { color: var(--sl-y-ink); background: var(--sl-y-bg); border-color: var(--sl-y-line); }
.sl-tag[data-st="fulfilled"] { color: var(--sl-g-ink); background: var(--sl-g-bg); border-color: var(--sl-g-line); }
.sl-tag[data-st="unfulfilled"] { color: var(--sl-r-ink); background: var(--sl-r-bg); border-color: var(--sl-r-line); }
.sl-tag[data-st="review"] { color: var(--sl-n-ink); background: var(--sl-n-bg); border-color: var(--sl-n-line); }

/* ---------- compose (new request) ---------- */
.sl-compose { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; overflow: hidden; contain: paint; transition: grid-template-rows .32s var(--sl-ease), opacity .24s, visibility 0s linear .32s; }
.sl-compose.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; overflow: visible; contain: none; transition: grid-template-rows .32s var(--sl-ease), opacity .24s, visibility 0s; }
.sl-compose > .sl-compose-in { overflow: hidden; min-height: 0; }
.sl-form { margin: 0 0 18px; padding: 18px; border-radius: var(--sl-r); border: 1px solid var(--sl-line-2); background: var(--sl-well); }
.sl-form-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px 16px; }
.sl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sl-field-wide { grid-column: 1 / -1; }
html body .sl .sl-field label { margin: 0 !important; font: 700 11px/1.2 var(--sl-sans) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--sl-muted) !important; }
.sl-field label span { font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .85; }
html body .sl .sl-field input, html body .sl .sl-field textarea, html body .sl .sl-pin {
  -webkit-appearance: none; appearance: none; width: 100% !important; margin: 0 !important; min-height: 44px; padding: 10px 13px !important;
  font: 400 15.5px/1.4 var(--sl-sans) !important; color: var(--sl-ink) !important; -webkit-text-fill-color: var(--sl-ink) !important;
  background: var(--sl-field) !important; border: 1px solid var(--sl-field-line) !important; border-radius: var(--sl-r-sm) !important;
  box-shadow: none !important; outline: none !important; transition: border-color .16s, box-shadow .16s;
}
html body .sl .sl-field textarea { min-height: 104px; resize: vertical; }
html body .sl .sl-field input::placeholder, html body .sl .sl-field textarea::placeholder { color: var(--sl-ph) !important; -webkit-text-fill-color: var(--sl-ph) !important; opacity: 1; }
html body .sl .sl-field input:hover, html body .sl .sl-field textarea:hover, html body .sl .sl-pin:hover { border-color: var(--sl-field-hover) !important; }
html body .sl .sl-field input:focus, html body .sl .sl-field textarea:focus, html body .sl .sl-pin:focus { border-color: var(--sl-focus-line) !important; box-shadow: var(--sl-focus) !important; }
.sl-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.sl-note { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 13px/1.4 var(--sl-sans); color: var(--sl-muted); }
.sl-count { font: 600 12px/1 var(--sl-num); color: var(--sl-soft); text-align: right; }
.sl-err { margin: 10px 0 0; font: 600 13px/1.4 var(--sl-sans); color: var(--sl-r-ink); min-height: 0; }
.sl-form-actions { display: flex; gap: 8px; margin-left: auto; }
.sl-done { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 16px; border-radius: var(--sl-r); background: var(--sl-y-bg); border: 1px solid var(--sl-y-line); animation: sl-rise .35s var(--sl-ease) both; }
.sl-done p { margin: 0; font: 500 14.5px/1.45 var(--sl-sans); color: var(--sl-ink); }
.sl-done strong { font-weight: 700; }
.sl-done .sl-btn { margin-left: auto; }

/* ---------- phone lane switcher ---------- */
.sl-seg { display: none; }

/* ---------- board ---------- */
.sl-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sl-lane { min-width: 0; display: flex; flex-direction: column; border-radius: var(--sl-r); background: var(--sl-well); border: 1px solid var(--sl-line); padding: 12px; }
.sl-lane-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; margin-bottom: 10px; border-bottom: 1px solid var(--sl-line); }
.sl-lane-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-lane-name b { font: 700 14.5px/1.15 var(--sl-sans); color: var(--sl-ink); letter-spacing: .01em; }
.sl-lane-name small { font: 500 12.5px/1.2 var(--sl-sans); color: var(--sl-muted); }
.sl-lane-n { margin-left: auto; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; font: 700 12.5px/1 var(--sl-num); border: 1px solid; }
.sl-lane[data-st="pending"] .sl-lane-n { color: var(--sl-y-ink); background: var(--sl-y-bg); border-color: var(--sl-y-line); }
.sl-lane[data-st="fulfilled"] .sl-lane-n { color: var(--sl-g-ink); background: var(--sl-g-bg); border-color: var(--sl-g-line); }
.sl-lane[data-st="unfulfilled"] .sl-lane-n { color: var(--sl-r-ink); background: var(--sl-r-bg); border-color: var(--sl-r-line); }
.sl-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sl-lane-empty { margin: 4px 0 2px; padding: 16px 12px; border: 1px dashed var(--sl-line-2); border-radius: var(--sl-r-sm); text-align: center; font: 500 13px/1.4 var(--sl-sans); color: var(--sl-soft); }

/* ---------- item card ---------- */
.sl-item { position: relative; padding: 12px 14px 12px 16px; border-radius: var(--sl-r-sm); background: var(--sl-card); border: 1px solid var(--sl-line); box-shadow: var(--sl-shadow); overflow: hidden; transition: background .18s, transform .18s var(--sl-ease); }
.sl-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sl-n); }
.sl-item[data-st="pending"]::before { background: var(--sl-y); }
.sl-item[data-st="fulfilled"]::before { background: var(--sl-g); }
.sl-item[data-st="unfulfilled"]::before { background: var(--sl-r-); }
.sl-item:hover { background: var(--sl-card-hover); }
.sl-item-top { display: flex; align-items: flex-start; gap: 10px; }
.sl-item h4 { margin: 0; flex: 1 1 auto; min-width: 0; font: 700 15px/1.3 var(--sl-sans) !important; color: var(--sl-ink) !important; letter-spacing: 0 !important; text-transform: none !important; overflow-wrap: anywhere; }
.sl-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; font: 500 12.5px/1.3 var(--sl-sans); color: var(--sl-soft); }
.sl-item-meta span + span::before { content: "·"; margin-right: 10px; opacity: .7; }
.sl-item-desc { margin: 8px 0 0; font: 400 16px/1.45 var(--sl-body); color: var(--sl-ink); opacity: .92; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sl-item.is-open .sl-item-desc { -webkit-line-clamp: unset; display: block; }
html body .sl .sl-more { margin: 4px 0 0; padding: 0; border: 0; background: none !important; box-shadow: none !important; font: 700 12.5px/1.4 var(--sl-sans) !important; color: var(--sl-accent) !important; cursor: pointer; width: auto !important; height: auto !important; }
html body .sl .sl-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.sl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--sl-line); }
.sl-actions .sl-spacer { flex: 1 1 auto; }
.sl-act-end { display: inline-flex; flex-wrap: nowrap; gap: 4px; margin-left: auto; }

/* ---------- skeleton / empty / error ---------- */
.sl-skel { height: 76px; border-radius: var(--sl-r-sm); background: linear-gradient(100deg, var(--sl-card) 30%, var(--sl-card-hover) 50%, var(--sl-card) 70%) 0 0 / 300% 100%; border: 1px solid var(--sl-line); animation: sl-shimmer 1.4s linear infinite; }
.sl-skel.short { height: 56px; opacity: .7; }
.sl-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 30px 16px 26px; border-radius: var(--sl-r); border: 1px dashed var(--sl-line-2); background: var(--sl-well); }
.sl-empty-art { display: inline-flex; flex-direction: column; gap: 6px; padding: 9px 8px; border-radius: 14px; border: 1px solid var(--sl-line-2); background: var(--sl-card); box-shadow: var(--sl-shadow); }
.sl-empty-art i { width: 14px; height: 14px; border-radius: 50%; display: block; opacity: .9; }
.sl-empty-art i:nth-child(1) { background: var(--sl-r-); }
.sl-empty-art i:nth-child(2) { background: var(--sl-y); animation: sl-glow 2.8s ease-in-out infinite; }
.sl-empty-art i:nth-child(3) { background: var(--sl-g); }
.sl-empty h3 { margin: 4px 0 0 !important; font: 400 21px/1.2 var(--sl-head) !important; color: var(--sl-ink) !important; letter-spacing: .01em !important; text-transform: none !important; }
.sl-empty p { margin: 0; max-width: 46ch; font: 400 14.5px/1.5 var(--sl-sans); color: var(--sl-muted); }
.sl-empty.is-error { border-style: solid; border-color: var(--sl-r-line); background: var(--sl-r-bg); }
.sl-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; font: 500 12.5px/1.4 var(--sl-sans); color: var(--sl-soft); }
.sl-foot .sl-live { width: 7px; height: 7px; border-radius: 50%; background: var(--sl-g); box-shadow: 0 0 0 3px var(--sl-g-bg); }
.sl-foot.is-off .sl-live { background: var(--sl-soft); box-shadow: none; }

/* ---------- manager: gate ---------- */
.sl-gate { display: grid; justify-items: center; text-align: center; gap: 12px; max-width: 420px; margin: 4px auto 2px; padding: 26px 22px 22px; border-radius: var(--sl-r); border: 1px solid var(--sl-line-2); background: var(--sl-well); }
.sl-gate-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--sl-gold); border: 1px solid var(--sl-n-line); background: var(--sl-n-bg); }
.sl-gate-ico svg { width: 22px; height: 22px; }
.sl-gate h3 { margin: 0 !important; font: 400 22px/1.2 var(--sl-head) !important; color: var(--sl-ink) !important; text-transform: none !important; letter-spacing: .01em !important; }
.sl-gate p { margin: 0; font: 400 14.5px/1.5 var(--sl-sans); color: var(--sl-muted); }
.sl-gate form { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
html body .sl .sl-pin { flex: 1 1 auto; text-align: center; font: 700 20px/1 var(--sl-num) !important; letter-spacing: .5em !important; padding-left: calc(13px + .5em) !important; height: 46px; }
html body .sl .sl-gate .sl-btn { height: 46px; padding: 0 20px; border-radius: var(--sl-r-sm); }
.sl-gate .sl-err { margin: 0; min-height: 18px; }
.sl-gate.is-shake { animation: sl-shake .38s var(--sl-ease); }
.sl-gate.is-off .sl-gate-ico { color: var(--sl-soft); border-color: var(--sl-line-2); background: var(--sl-card); }

/* ---------- manager: stats + sections ---------- */
.sl-session { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; font: 600 12.5px/1 var(--sl-sans); color: var(--sl-g-ink); background: var(--sl-g-bg); border: 1px solid var(--sl-g-line); }
.sl-session::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sl-g); }
.sl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.sl-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--sl-r); background: var(--sl-card); border: 1px solid var(--sl-line); box-shadow: var(--sl-shadow); min-width: 0; }
.sl-stat .sl-glyph { width: 30px; height: 30px; }
.sl-stat-v { font: 700 26px/1 var(--sl-num); color: var(--sl-ink); font-variant-numeric: tabular-nums; }
.sl-stat-k { margin-top: 4px; font: 600 12.5px/1.2 var(--sl-sans); color: var(--sl-muted); }
.sl-sec { margin: 0 0 22px; }
.sl-sec:last-child { margin-bottom: 0; }
.sl-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
html body .sl .sl-sec-head h3 { margin: 0 !important; font: 400 20px/1.2 var(--sl-head) !important; color: var(--sl-ink) !important; letter-spacing: .01em !important; text-transform: none !important; }
.sl-sec-head p { margin: 0; font: 500 13px/1.4 var(--sl-sans); color: var(--sl-muted); }
.sl-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sl-review .sl-empty-line { grid-column: 1 / -1; }
.sl-empty-line { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--sl-r-sm); border: 1px dashed var(--sl-line-2); font: 500 14px/1.4 var(--sl-sans); color: var(--sl-muted); }
.sl-toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 2147482000; opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: 999px; font: 600 14px/1.2 var(--sl-sans); color: var(--sl-ink); background: var(--sl-card-solid, var(--sl-card)); border: 1px solid var(--sl-line-2); box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); transition: opacity .22s, transform .22s var(--sl-ease); display: flex; align-items: center; gap: 8px; }
.sl-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .sl-toast { background: rgba(26,14,52,.96); }
html[data-theme="maroon"] .sl-toast, html[data-theme="enterprise"] .sl-toast { background: #fff; }

/* ---------- motion ---------- */
@keyframes sl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sl-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sl-shimmer { to { background-position: -300% 0; } }
@keyframes sl-spin { to { transform: rotate(360deg); } }
@keyframes sl-glow { 50% { opacity: .45; } }
@keyframes sl-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .sl *, .sl *::before, .sl *::after { animation: none !important; transition: none !important; }
}

/* ---------- tablet / phone ---------- */
@media (max-width: 960px) {
  .sl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sl-head { align-items: stretch; }
  .sl-head-side { width: 100%; justify-content: space-between; }
  .sl-board { grid-template-columns: minmax(0, 1fr); }
  .sl-board.has-seg .sl-lane { display: none; }
  .sl-board.has-seg[data-on="pending"] .sl-lane[data-st="pending"],
  .sl-board.has-seg[data-on="fulfilled"] .sl-lane[data-st="fulfilled"],
  .sl-board.has-seg[data-on="unfulfilled"] .sl-lane[data-st="unfulfilled"] { display: flex; }
  .sl-board.has-seg .sl-lane-head { display: none; }
  .sl-board.has-seg .sl-lane { padding: 10px; }
  .sl-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 12px; border: 1px solid var(--sl-line-2); background: var(--sl-well); }
  html body .sl .sl-seg button { -webkit-appearance: none; appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 58px; width: 100% !important; padding: 0 4px; border: 1px solid transparent !important; border-radius: 9px; background: transparent !important; color: var(--sl-muted) !important; font: 700 12.5px/1 var(--sl-sans) !important; cursor: pointer; box-shadow: none !important; transition: background .18s, color .18s; }
  .sl-seg button .sl-seg-top { display: inline-flex; align-items: center; gap: 6px; font: 700 16px/1 var(--sl-num); color: var(--sl-ink); }
  .sl-seg button .sl-glyph { width: 18px; height: 18px; box-shadow: none; }
  html body .sl .sl-seg button[aria-selected="true"] { background: var(--sl-card) !important; color: var(--sl-ink) !important; border-color: var(--sl-line) !important; box-shadow: var(--sl-shadow) !important; }
  .sl-form { padding: 14px; }
  .sl-form-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-form-actions { width: 100%; }
  .sl-form-actions .sl-btn { flex: 1 1 0; }
  .sl-review { grid-template-columns: minmax(0, 1fr); }
  .sl-stats { gap: 8px; }
  .sl-stat { padding: 12px; gap: 10px; }
  .sl-stat .sl-glyph { width: 26px; height: 26px; }
  .sl-stat-v { font-size: 22px; }
  .sl-done { flex-wrap: wrap; }
  .sl-sec-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sl-head-side { justify-content: flex-start; gap: 8px; }
  .sl-head-side .sl-session { flex: 1 0 100%; justify-content: center; }
  .sl-head-side .sl-session ~ .sl-btn { flex: 1 1 0; justify-content: center; }
  .sl-review .sl-actions .sl-btn-primary { flex: 1 1 100%; justify-content: center; }
  .sl-review .sl-act-end { margin-left: 0; width: 100%; justify-content: flex-end; }
  .sl-done .sl-btn { margin-left: 0; }
}
@media (max-width: 420px) {
  .sl-meter-i small { display: none; }
  .sl-head-side .sl-btn-primary { flex: 1 1 auto; }
  .sl-gate form { flex-direction: column; }
}

/* ---------- manager page placement ---------- */
body.cm-page .ms-main.ms-main--sl { display: block; padding-top: 8px; }
body.cm-page .ms-main--sl .cm-card.sl { width: 100%; max-width: none; padding: 28px; text-align: left; }
body.cm-page .ms-more { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 0; font: 500 13.5px/1.4 var(--cm-sans, "Source Sans 3", sans-serif); color: var(--cm-soft, #8a7f9e) !important; text-align: center; }
@media (max-width: 760px) { body.cm-page .ms-main--sl .cm-card.sl { padding: 18px 16px; } }

/* page p/h rules override; pin our text colours */
html body .sl .sl-item-desc { color: var(--sl-ink) !important; }
html body .sl .sl-sub, html body .sl .sl-empty p, html body .sl .sl-gate p, html body .sl .sl-sec-head p, html body .sl .sl-note { color: var(--sl-muted) !important; }
html body .sl .sl-done p { color: var(--sl-ink) !important; }
html body .sl .sl-kicker { color: var(--sl-gold) !important; }
html body .sl .sl-foot { color: var(--sl-soft) !important; }
html body .sl .sl-err { color: var(--sl-r-ink) !important; }

.sl-tag { white-space: nowrap; flex: none; }

/* Oct 27 2026 · Cabarrus + Pineville: minimum-length hint under the form + "not set up yet" admin note */
.sl-hint { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font: 500 12.5px/1.4 var(--sl-sans); }
.sl-hint > span { display: inline-flex; align-items: center; gap: 6px; color: var(--sl-muted); }
.sl-hint > span.is-ok { color: var(--sl-g-ink, #1e7a46); }
.sl-hint > span .sl-glyph, .sl-hint > span > span { flex: none; }
.sl-hint.is-ok > span { opacity: .85; }
.sl-form [aria-invalid] { border-color: var(--sl-r-ink) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-r-ink) 16%, transparent) !important; }
.sl-btn.is-waiting { opacity: .72; }
.sl-err[data-kind] { padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--sl-r-ink) 9%, var(--sl-card, #fff)); border: 1px solid color-mix(in srgb, var(--sl-r-ink) 28%, transparent); }
.sl-setup h3 { margin: 0; }
.sl-setup p { max-width: 52ch; margin: 0; }
html body .sl .sl-hint > span { color: var(--sl-muted) !important; }
html body .sl .sl-hint > span.is-ok { color: var(--sl-g-ink, #1e7a46) !important; }

/* Oct 27 2026 · Cabarrus (PREVIEW): "What is this? How to use it" note under the Stoplight header (data-sl-howto) */
.sl-howto { margin: -4px 0 18px; border-radius: var(--sl-r); border: 1px solid var(--sl-line-2); background: var(--sl-well); overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.sl-howto[open] { border-color: var(--sl-n-line); box-shadow: var(--sl-shadow); }
.sl-howto > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; border-radius: inherit; }
.sl-howto > summary::-webkit-details-marker { display: none; }
.sl-howto > summary::marker { content: ""; }
.sl-howto > summary:hover { background: var(--sl-ghost-hover); }
.sl-howto > summary:focus-visible { outline: none; box-shadow: var(--sl-focus); }
.sl-howto-q { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; font: 700 13px/1 var(--sl-num); color: var(--sl-n-ink); background: var(--sl-n-bg); border: 1px solid var(--sl-n-line); }
.sl-howto-sum { flex: 1 1 auto; min-width: 0; font: 700 13.5px/1.3 var(--sl-sans); letter-spacing: .01em; color: var(--sl-ink); }
.sl-howto-sum2 { font-weight: 500; color: var(--sl-muted); }
.sl-howto-sum2::before { content: "·"; margin: 0 7px 0 3px; color: var(--sl-gold); font-weight: 700; }
.sl-howto-chev { width: 16px; height: 16px; flex: none; color: var(--sl-muted); transition: transform .22s var(--sl-ease); }
.sl-howto[open] .sl-howto-chev { transform: rotate(180deg); }
.sl-howto-body { padding: 2px 16px 16px 46px; display: grid; gap: 10px; animation: sl-rise .3s var(--sl-ease) both; }
html body .sl .sl-howto-body p { margin: 0; max-width: 78ch; font: 400 14.5px/1.55 var(--sl-sans); color: var(--sl-muted) !important; }
html body .sl .sl-howto-body p.sl-howto-lead { font-family: var(--sl-body); font-size: 16.5px; line-height: 1.5; color: var(--sl-ink) !important; }
.sl-howto-steps { list-style: none; counter-reset: slh; margin: 2px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sl-howto-steps li { counter-increment: slh; display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 6px; border-radius: 999px; background: var(--sl-card); border: 1px solid var(--sl-line-2); font: 600 13.5px/1.25 var(--sl-sans); color: var(--sl-ink); }
.sl-howto-steps li b { font-weight: 600; }
.sl-howto-steps li::before { content: counter(slh); display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; font: 700 12px/1 var(--sl-num); background: var(--sl-primary); color: var(--sl-primary-ink); }
.sl-howto-c { display: inline-flex; align-items: center; gap: 5px; vertical-align: -3px; padding: 1px 8px 1px 3px; border-radius: 999px; font: 700 13px/1.3 var(--sl-sans); border: 1px solid; white-space: nowrap; }
.sl-howto-c[data-st="pending"] { color: var(--sl-y-ink); background: var(--sl-y-bg); border-color: var(--sl-y-line); }
.sl-howto-c[data-st="fulfilled"] { color: var(--sl-g-ink); background: var(--sl-g-bg); border-color: var(--sl-g-line); }
.sl-howto-c[data-st="unfulfilled"] { color: var(--sl-r-ink); background: var(--sl-r-bg); border-color: var(--sl-r-line); }
html body .sl .sl-howto-body p.sl-howto-care { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--sl-n-ink) !important; }
@media (max-width: 760px) {
  .sl-howto { margin-top: 0; }
  .sl-howto > summary { padding: 11px 12px; }
  .sl-howto-body { padding: 2px 14px 14px; }
  html body .sl .sl-howto-body p.sl-howto-lead { font-size: 16px; }
  .sl-howto-steps { flex-direction: column; align-items: stretch; }
  .sl-howto-steps li { border-radius: 12px; }
  .sl-howto-c { white-space: normal; }
}
@media (max-width: 420px) { .sl-howto-sum2 { display: block; margin-top: 1px; } .sl-howto-sum2::before { display: none; } }

/* ===== Oct 28 2026 · Cabarrus (PREVIEW) · easy manager list (data-sl-easy) =====
   One list, filter chips, big one-tap status buttons (min 44px), inline confirmation with Undo. */
.sl[data-sl-easy] .sl-head { margin-bottom: 14px; }
html body .sl[data-sl-easy] .sl-head-side .sl-btn { height: 44px; min-width: 44px !important; padding: 0 14px; }
.sle { display: grid; gap: 12px; min-width: 0; }
.sle-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; max-width: 480px; border-radius: 14px; border: 1px solid var(--sl-line-2); background: var(--sl-well); }
html body .sl .sle-chip {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; width: 100% !important; margin: 0; padding: 0 8px;
  border: 1px solid transparent !important; border-radius: 10px; background: transparent !important; color: var(--sl-muted) !important; box-shadow: none !important;
  font: 700 14.5px/1 var(--sl-sans) !important; letter-spacing: .01em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s, color .18s;
}
.sle-chip-n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; font: 700 12.5px/1 var(--sl-num); color: var(--sl-ink); background: var(--sl-ghost-hover); font-variant-numeric: tabular-nums; }
html body .sl .sle-chip[aria-pressed="true"] { background: var(--sl-card) !important; color: var(--sl-ink) !important; border-color: var(--sl-line) !important; box-shadow: var(--sl-shadow) !important; }
html body .sl .sle-chip[aria-pressed="true"] .sle-chip-n { background: var(--sl-primary); color: var(--sl-primary-ink); }
html body .sl .sle-chip:focus-visible { outline: none; box-shadow: var(--sl-focus) !important; }
.sle-lead { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: var(--sl-r); background: var(--sl-n-bg); border: 1px solid var(--sl-n-line); font: 500 14px/1.4 var(--sl-sans); color: var(--sl-n-ink); }
html body .sl .sle-lead { color: var(--sl-n-ink) !important; }
.sle-lead .sl-glyph { width: 20px; height: 20px; box-shadow: none; }
.sle-lead b { font-weight: 700; }
.sle-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sle-empty { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 16px; border-radius: var(--sl-r); border: 1px dashed var(--sl-line-2); background: var(--sl-well); font: 500 14.5px/1.45 var(--sl-sans); color: var(--sl-muted); }
html body .sl .sle-empty { color: var(--sl-muted) !important; }
.sle-empty b { color: var(--sl-ink); }

.sle-card { position: relative; min-width: 0; padding: 12px 14px 14px 18px; border-radius: var(--sl-r); background: var(--sl-card); border: 1px solid var(--sl-line); box-shadow: var(--sl-shadow); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.sle-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sl-n); transition: background .25s; }
.sle-card[data-st="pending"]::before { background: var(--sl-y); }
.sle-card[data-st="fulfilled"]::before { background: var(--sl-g); }
.sle-card[data-st="unfulfilled"]::before { background: var(--sl-r-); }
.sle-card[data-flash][data-st="pending"] { border-color: var(--sl-y-line); }
.sle-card[data-flash][data-st="fulfilled"] { border-color: var(--sl-g-line); }
.sle-card[data-flash][data-st="unfulfilled"] { border-color: var(--sl-r-line); }
.sle-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sle-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid; font: 700 12.5px/1 var(--sl-sans); letter-spacing: .01em; white-space: nowrap; }
.sle-pill .sl-glyph { width: 18px; height: 18px; box-shadow: none; }
.sle-pill[data-st="review"] { color: var(--sl-n-ink); background: var(--sl-n-bg); border-color: var(--sl-n-line); }
.sle-pill[data-st="pending"] { color: var(--sl-y-ink); background: var(--sl-y-bg); border-color: var(--sl-y-line); }
.sle-pill[data-st="fulfilled"] { color: var(--sl-g-ink); background: var(--sl-g-bg); border-color: var(--sl-g-line); }
.sle-pill[data-st="unfulfilled"] { color: var(--sl-r-ink); background: var(--sl-r-bg); border-color: var(--sl-r-line); }
.sle-when { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/1.2 var(--sl-sans); color: var(--sl-soft); }
html body .sl .sle-dots { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-items: center; width: 44px !important; height: 44px; margin: -8px -8px -8px 0; padding: 0; border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--sl-muted) !important; box-shadow: none !important; cursor: pointer; }
html body .sl .sle-dots svg { width: 18px; height: 18px; }
html body .sl .sle-dots:hover, html body .sl .sle-dots[aria-expanded="true"] { background: var(--sl-ghost-hover) !important; color: var(--sl-ink) !important; }
html body .sl .sle-dots:focus-visible { outline: none; box-shadow: var(--sl-focus) !important; }
html body .sl h4.sle-title { margin: 8px 0 0 !important; font: 700 17px/1.3 var(--sl-sans) !important; color: var(--sl-ink) !important; letter-spacing: 0 !important; text-transform: none !important; overflow-wrap: anywhere; }
html body .sl .sle-desc { margin: 4px 0 0; font: 400 16px/1.45 var(--sl-body); color: var(--sl-ink) !important; opacity: .9; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .sl .sle-desc.is-open { display: block; -webkit-line-clamp: unset; }
html body .sl .sle-showmore { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -10px; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; font: 700 13.5px/1 var(--sl-sans) !important; color: var(--sl-accent) !important; cursor: pointer; width: auto !important; }

/* Approve (new requests) */
html body .sl .sle-approve {
  -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100% !important; min-height: 58px; margin: 14px 0 0; padding: 8px 16px;
  border: 0 !important; border-radius: 12px; background: var(--sl-primary) !important; color: var(--sl-primary-ink) !important; box-shadow: var(--sl-primary-shadow) !important;
  font: 700 16.5px/1.15 var(--sl-sans) !important; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s var(--sl-ease), filter .15s;
}
html body .sl .sle-approve svg { width: 22px; height: 22px; flex: none; }
.sle-approve span, .sle-act span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sle-approve small { font: 500 12.5px/1.2 var(--sl-sans); opacity: .86; }
html body .sl .sle-approve:active { transform: scale(.985); }
html body .sl .sle-approve:focus-visible { outline: none; box-shadow: var(--sl-focus), var(--sl-primary-shadow) !important; }

/* the three lights */
.sle-lights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; }
html body .sl .sle-light {
  -webkit-appearance: none; appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; width: 100% !important; min-width: 0 !important; margin: 0; padding: 8px 4px;
  border: 1px solid var(--sl-ghost-line) !important; border-radius: 12px; background: var(--sl-ghost) !important; color: var(--sl-ink) !important; box-shadow: none !important;
  font: 700 14px/1.1 var(--sl-sans) !important; letter-spacing: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s, border-color .18s, transform .15s var(--sl-ease), box-shadow .18s;
}
html body .sl .sle-light span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html body .sl .sle-light small { font: 500 11.5px/1 var(--sl-sans); color: var(--sl-soft); }
html body .sl .sle-light .sl-glyph { width: 24px; height: 24px; box-shadow: none; opacity: .55; filter: saturate(.6); transition: opacity .18s, filter .18s; }
html body .sl .sle-light:hover { background: var(--sl-ghost-hover) !important; }
html body .sl .sle-light:hover .sl-glyph { opacity: .85; filter: none; }
html body .sl .sle-light:active { transform: scale(.97); }
html body .sl .sle-light:focus-visible { outline: none; box-shadow: var(--sl-focus) !important; }
html body .sl .sle-light[disabled] { cursor: progress; }
html body .sl .sle-light[aria-pressed="true"] .sl-glyph { opacity: 1; filter: none; }
html body .sl .sle-light[aria-pressed="true"][data-st="pending"] { background: var(--sl-y-bg) !important; border-color: var(--sl-y) !important; box-shadow: inset 0 0 0 1px var(--sl-y) !important; color: var(--sl-y-ink) !important; }
html body .sl .sle-light[aria-pressed="true"][data-st="fulfilled"] { background: var(--sl-g-bg) !important; border-color: var(--sl-g) !important; box-shadow: inset 0 0 0 1px var(--sl-g) !important; color: var(--sl-g-ink) !important; }
html body .sl .sle-light[aria-pressed="true"][data-st="unfulfilled"] { background: var(--sl-r-bg) !important; border-color: var(--sl-r-) !important; box-shadow: inset 0 0 0 1px var(--sl-r-) !important; color: var(--sl-r-ink) !important; }
html body .sl .sle-light[aria-pressed="true"] small { color: inherit; opacity: .8; }

/* confirmation + Undo */
.sle-flash { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 10px 0 0; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1px solid var(--sl-line-2); background: var(--sl-well); font: 600 14px/1.3 var(--sl-sans); color: var(--sl-ink); animation: sl-rise .28s var(--sl-ease) both; }
.sle-flash[data-st="pending"] { background: var(--sl-y-bg); border-color: var(--sl-y-line); }
.sle-flash[data-st="fulfilled"] { background: var(--sl-g-bg); border-color: var(--sl-g-line); }
.sle-flash[data-st="unfulfilled"] { background: var(--sl-r-bg); border-color: var(--sl-r-line); }
.sle-flash[data-st="review"] { background: var(--sl-n-bg); border-color: var(--sl-n-line); }
.sle-flash.is-err { background: var(--sl-r-bg); border-color: var(--sl-r-line); color: var(--sl-r-ink); }
.sle-flash.is-busy { color: var(--sl-muted); }
.sle-flash > svg { width: 18px; height: 18px; flex: none; color: var(--sl-muted); }
.sle-flash .sl-glyph { width: 22px; height: 22px; box-shadow: none; }
.sle-flash-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sle-flash-t b { font-weight: 700; }
.sle-spin { width: 18px; height: 18px; flex: none; margin: 0 2px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sl-spin .7s linear infinite; }
html body .sl .sle-undo {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; width: auto !important; margin: 0; padding: 0 16px;
  border: 1px solid var(--sl-ghost-line) !important; border-radius: 999px; background: var(--sl-card) !important; color: var(--sl-ink) !important; box-shadow: none !important;
  font: 700 14px/1 var(--sl-sans) !important; cursor: pointer;
}
html body .sl .sle-undo svg { width: 16px; height: 16px; }
html body .sl .sle-undo:hover { background: var(--sl-ghost-hover) !important; }
html body .sl .sle-undo:focus-visible { outline: none; box-shadow: var(--sl-focus) !important; }
.sle-card.is-gone { padding: 0; box-shadow: none; }
.sle-card.is-gone::before { display: none; }
.sle-card.is-gone .sle-flash { margin: 0; border: 0; border-radius: 0; background: var(--sl-well); }

/* More: Archive / Delete, kept away from the status buttons */
.sle-morebox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--sl-line); animation: sl-rise .22s var(--sl-ease) both; }
html body .sl .sle-act {
  -webkit-appearance: none; appearance: none; display: flex; align-items: center; gap: 10px; min-height: 56px; width: 100% !important; min-width: 0 !important; margin: 0; padding: 8px 12px;
  border: 1px solid var(--sl-ghost-line) !important; border-radius: 12px; background: var(--sl-ghost) !important; color: var(--sl-ink) !important; box-shadow: none !important;
  font: 700 14px/1.15 var(--sl-sans) !important; text-align: left; cursor: pointer;
}
html body .sl .sle-act svg { width: 18px; height: 18px; flex: none; color: var(--sl-muted); }
html body .sl .sle-act small { font: 500 11.5px/1.25 var(--sl-sans); color: var(--sl-muted); }
html body .sl .sle-act:hover { background: var(--sl-ghost-hover) !important; }
html body .sl .sle-act:focus-visible { outline: none; box-shadow: var(--sl-focus) !important; }
html body .sl .sle-act-danger, html body .sl .sle-act-danger svg { color: var(--sl-r-ink) !important; }
html body .sl .sle-act-danger.is-arming { background: var(--sl-r-bg) !important; border-color: var(--sl-r-line) !important; }
html body .sl .sle-act.is-busy { opacity: .6; pointer-events: none; }

@media (min-width: 900px) {
  .sle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .sl[data-sl-easy] .sl-head-side { flex-wrap: nowrap; }
  .sl[data-sl-easy] .sl-head-side .sl-session { flex: 1 1 auto; min-width: 0; height: 44px; justify-content: center; }
  html body .sl[data-sl-easy] .sl-head-side .sl-session ~ .sl-btn { flex: 0 0 auto; padding: 0; width: 44px !important; }
  .sl[data-sl-easy] .sle-btxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sle-chips { max-width: none; }
}
@media (max-width: 360px) {
  html body .sl .sle-light small { display: none; }
  .sle-morebox { grid-template-columns: minmax(0, 1fr); }
}