/*!
 * Studio Light (S): components. gully-labs/gully-ops sites/_shared/studio-light/components.css (spec: README.md).
 * Every class is prefixed sl-. Reads only tokens.css. All motion is off under prefers-reduced-motion.
 */
.sl-body { margin: 0; background: var(--sl-bg); color: var(--sl-text); font: 400 var(--sl-fs)/var(--sl-lh) var(--sl-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.sl-body *, .sl-body *::before, .sl-body *::after { box-sizing: border-box; }
.sl-body a { color: var(--sl-link); text-decoration: none; }
.sl-body a:hover { color: var(--sl-link-hover); }
.sl-body :focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 2px; border-radius: 6px; }
.sl-wrap { width: 100%; max-width: var(--sl-maxw); margin: 0 auto; padding: 0 var(--sl-gutter); }
.sl-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--sl-text); color: #fff !important; padding: 8px 12px; border-radius: var(--sl-r-sm); }
.sl-skip:focus { left: 8px; }
.sl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-num { font-variant-numeric: tabular-nums; }
.sl-muted { color: var(--sl-muted); }

/* ---- brand lockup: kit dark tile icon + kit light-bg wordmark SVG (slWordmark/slLockup), never redrawn ---- */
.sl-wm { display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; line-height: 1; text-decoration: none !important; color: var(--sl-text) !important; }
.sl-wm .sl-wm-i { display: block; flex: none; width: 32px; height: 32px; max-width: none; }
.sl-wm .sl-wm-t { display: block; flex: none; width: auto; height: 24px; max-width: none; }
.sl-wm.sm .sl-wm-i { width: 28px; height: 28px; }
.sl-wm.sm .sl-wm-t { height: 20px; }
.sl-wm small { font: 600 12px/1 var(--sl-font); color: var(--sl-muted); margin-left: 2px; }
@media (max-width: 380px) { .sl-wm:not(.sm) .sl-wm-t { height: 20px; } }
.sl-cbadge img { display: block; max-width: 100%; height: auto; }

/* ---- header + nav (menu icons) ---- */
.sl-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--sl-border); }
.sl-header > .sl-wrap { height: var(--sl-header-h); display: flex; align-items: center; gap: 16px; }
.sl-nav { display: flex; gap: 2px; min-width: 0; }
.sl-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--sl-r-sm); font-weight: 500; color: var(--sl-text-2); white-space: nowrap; transition: background var(--sl-dur); }
.sl-nav a:hover { background: var(--sl-hover); color: var(--sl-text); }
.sl-nav a[aria-current="page"] { background: var(--sl-hover); color: var(--sl-text); font-weight: 700; }
.sl-spacer { flex: 1; }
@media (max-width: 900px) { .sl-nav { display: none; } }

/* side nav (dashboards: Studio Console, admin) */
.sl-side { border-right: 1px solid var(--sl-border); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.sl-side a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--sl-r-sm); font-weight: 500; color: var(--sl-text-2); transition: background var(--sl-dur); }
.sl-side a:hover { background: var(--sl-hover); color: var(--sl-text); }
.sl-side a[aria-current="page"] { background: var(--sl-hover); color: var(--sl-text); font-weight: 700; }

/* ---- buttons ---- */
.sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--sl-r-sm); border: 1px solid transparent; font: 700 14px/1 var(--sl-font); cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform .15s ease, background .15s, border-color .15s; }
.sl-btn:hover { transform: translateY(-1px); }
.sl-btn:active { transform: none; }
.sl-btn-dark { background: var(--sl-text); color: #FFFFFF !important; }
.sl-btn-dark:hover { background: #23262E; }
.sl-btn-pri { background: var(--sl-accent); color: var(--sl-on-accent) !important; font-weight: 800; }
.sl-btn-pri:hover { background: #0877AD; }
.sl-btn-sec { background: var(--sl-bg); color: var(--sl-text) !important; border-color: var(--sl-border-strong); }
.sl-btn-sec:hover { background: var(--sl-hover); }
.sl-btn-ghost { background: transparent; color: var(--sl-text-2) !important; }
.sl-btn-ghost:hover { background: var(--sl-hover); }
.sl-btn-lg { min-height: 46px; padding: 0 20px; border-radius: var(--sl-r); font-size: 15px; }
.sl-btn-sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.sl-btn[disabled], .sl-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- type ---- */
.sl-h1 { margin: 0; font-size: var(--sl-fs-h1); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
.sl-h2 { margin: 0; font-size: var(--sl-fs-h2); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; }
.sl-h3 { margin: 0; font-size: var(--sl-fs-h3); font-weight: 800; }
.sl-lede { margin: 0; font-size: var(--sl-fs-xl); color: var(--sl-muted); line-height: 1.5; max-width: 560px; }
.sl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--sl-link); }
.sl-label { font-size: 12px; color: var(--sl-muted); font-weight: 500; }

/* ---- cards, KPI tiles ---- */
.sl-card { background: var(--sl-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-r-lg); padding: 16px; }
.sl-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sl-card-head > b, .sl-card-head > h2, .sl-card-head > h3 { flex: 1; font-size: 14px; font-weight: 800; margin: 0; }
.sl-card-lift { transition: transform .2s ease, box-shadow .2s ease; }
.sl-card-lift:hover { transform: translateY(-4px); box-shadow: var(--sl-shadow); }
.sl-kpis { display: grid; grid-template-columns: repeat(var(--sl-kpi-cols, 4), minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .sl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.sl-kpi { border: 1px solid var(--sl-border); border-radius: var(--sl-r-md); padding: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: border-color var(--sl-dur); }
.sl-kpi:hover { border-color: var(--sl-accent); }
.sl-kpi-v { display: flex; align-items: flex-end; gap: 8px; }
.sl-kpi-v b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-kpi-v svg { width: 80px; height: 28px; flex: none; }
.sl-kpi-d { font-size: 12px; font-weight: 700; color: var(--sl-ok); }
.sl-kpi-d.down { color: var(--sl-danger); }
.sl-kpi-d.flat { color: var(--sl-muted); font-weight: 500; }
/* stat strip (landing): label + value + sparkline in a row, divided by a top rule */
.sl-stats { display: grid; grid-template-columns: repeat(var(--sl-stat-cols, 4), minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--sl-border); padding-top: 18px; }
.sl-stat { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sl-stat > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sl-stat b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sl-stat svg { width: 90px; height: 30px; flex: none; }
@media (max-width: 760px) { .sl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sl-stat svg { width: 64px; } }

/* ---- pills, tags ---- */
.sl-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--sl-r-pill); font-size: 12px; font-weight: 700; background: var(--sl-surface); color: var(--sl-text-2); white-space: nowrap; }
.sl-pill.ok { background: var(--sl-ok-bg); color: var(--sl-ok); }
.sl-pill.info { background: var(--sl-info-bg); color: var(--sl-info); }
.sl-pill.warn { background: var(--sl-warn-bg); color: var(--sl-warn); }
.sl-pill.danger { background: var(--sl-danger-bg); color: var(--sl-danger); }
.sl-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em; border-radius: 5px; padding: 2px 6px; background: var(--sl-warn-bg); color: var(--sl-warn); }
.sl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sl-live); flex: none; }
.sl-dot.ok { background: #16A34A; } .sl-dot.idle { background: #8C93A0; }
.sl-live { animation: sl-pulse 1.4s ease-in-out infinite; }

/* ---- tables ---- */
.sl-table-wrap { overflow-x: auto; border: 1px solid var(--sl-border); border-radius: var(--sl-r-md); }
.sl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sl-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--sl-muted); background: var(--sl-surface); padding: 9px 12px; border-bottom: 1px solid var(--sl-border); white-space: nowrap; }
.sl-table td { padding: 10px 12px; border-bottom: 1px solid var(--sl-divider); vertical-align: middle; }
.sl-table tr:last-child td { border-bottom: 0; }
.sl-table tbody tr:hover td { background: var(--sl-surface); }
.sl-table td.num, .sl-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- segmented control / tabs ---- */
.sl-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--sl-r-sm); background: var(--sl-surface); }
.sl-seg button, .sl-seg a { all: unset; cursor: pointer; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--sl-muted); }
.sl-seg [aria-selected="true"], .sl-seg [aria-pressed="true"], .sl-seg [aria-current="page"] { background: var(--sl-text); color: #FFFFFF; }
.sl-seg :focus-visible { outline: 2px solid var(--sl-accent); }

/* ---- stepper ---- */
.sl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--sl-step-cols, 3), minmax(0, 1fr)); gap: 10px; counter-reset: sl-step; }
.sl-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--sl-border); border-radius: var(--sl-r-md); counter-increment: sl-step; min-width: 0; }
.sl-steps li::before { content: counter(sl-step); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--sl-surface); color: var(--sl-text); }
.sl-steps li[aria-current="step"]::before { background: var(--sl-accent); color: #fff; }
.sl-steps li.done::before { content: "\2713"; background: var(--sl-ok-bg); color: var(--sl-ok); }
.sl-steps b { display: block; font-size: 13px; }
.sl-steps span { font-size: 12px; color: var(--sl-muted); }
@media (max-width: 760px) { .sl-steps { grid-template-columns: 1fr; } }

/* ---- progress ---- */
.sl-prog { height: 6px; border-radius: 3px; background: var(--sl-divider); overflow: hidden; }
.sl-prog > span { display: block; height: 100%; border-radius: 3px; background: var(--sl-accent); }
.sl-prog.run > span { background-image: linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%); background-size: 28px 28px; animation: sl-stripe 1s linear infinite; }

/* ---- toasts ---- */
.sl-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.sl-toast { display: flex; gap: 10px; align-items: flex-start; background: var(--sl-bg); color: var(--sl-text); border: 1px solid var(--sl-border); border-left: 3px solid var(--sl-accent); border-radius: var(--sl-r); padding: 10px 12px; box-shadow: var(--sl-shadow-pop); font-size: 13px; animation: sl-rise .25s ease-out both; }
.sl-toast.ok { border-left-color: #16A34A; } .sl-toast.warn { border-left-color: #F59E0B; } .sl-toast.danger { border-left-color: var(--sl-danger); }
.sl-toast b { display: block; font-size: 13px; }

/* ---- mascot card (kit art has a dark ground: always on --sl-night) ---- */
.sl-mascot { margin: 0; position: relative; min-height: 220px; border-radius: var(--sl-r-xl); overflow: hidden; background: var(--sl-night); isolation: isolate; }
.sl-mascot > img { position: absolute; right: 8px; bottom: 0; height: 94%; max-height: 300px; width: auto; display: block; transition: transform .3s ease; z-index: -1; }
.sl-mascot:hover > img { transform: scale(1.04) rotate(-2deg); }
.sl-mascot .sl-say { position: absolute; left: 14px; top: 14px; max-width: 200px; background: #FFFFFF; color: var(--sl-text); border-radius: 14px 14px 14px 4px; padding: 9px 11px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.sl-mascot .sl-say-2 { display: none; }
.sl-mascot:hover .sl-say-1, .sl-mascot:focus-within .sl-say-1 { display: none; }
.sl-mascot:hover .sl-say-2, .sl-mascot:focus-within .sl-say-2 { display: inline; }
.sl-mascot .sl-float { position: absolute; left: 14px; bottom: 14px; width: 200px; background: rgba(255,255,255,.97); color: var(--sl-text); border-radius: var(--sl-r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.sl-mascot .sl-float b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sl-mascot .sl-float svg { width: 100%; height: 30px; }
.sl-bob { animation: sl-bob 3.2s ease-in-out infinite; }

/* ---- charts (charts.js) ---- */
.sl-chart { position: relative; width: 100%; }
.sl-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sl-chart .grid { stroke: var(--sl-divider); stroke-width: 1; }
.sl-chart .axis { fill: var(--sl-muted); font: 500 11px var(--sl-font); }
.sl-chart .empty { fill: var(--sl-muted); font: 500 12px var(--sl-font); }
.sl-chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--sl-muted); margin-top: 4px; }
.sl-tip { position: absolute; pointer-events: none; background: var(--sl-text); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -120%); z-index: 2; }
.sl-draw { stroke-dasharray: var(--sl-len, 1400); stroke-dashoffset: 0; animation: sl-draw 1.6s ease-out both; }
.sl-fade { animation: sl-fade 1.2s .4s ease-out both; }
.sl-bar { transform-box: fill-box; transform-origin: bottom; animation: sl-grow .8s var(--sl-ease) both; }
.sl-rise { animation: sl-rise .6s ease-out both; }

/* ---- footer + Powered by Gully Labs badge ---- */
.sl-footer { border-top: 1px solid var(--sl-border); padding: 20px 0; font-size: 13px; color: var(--sl-muted); }
.sl-footer > .sl-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sl-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: 1; }
.sl-footer nav a { color: var(--sl-text-2); font-weight: 500; }
.sl-badge img { display: block; height: 32px; width: auto; }
/* Community & bots (sites/_shared/community.json): icon, name, one-line description */
.sl-commw { padding: 16px 0 4px; border-top: 1px solid var(--sl-border); margin-top: 14px; width: 100%; }
.sl-commw h3 { margin: 0 0 10px; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; }
.sl-commw h3 a { color: var(--sl-text) !important; text-decoration: none; }
.sl-commw h3 a:hover { color: var(--sl-link) !important; }
.sl-comm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; }
@media (max-width: 1000px) { .sl-comm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sl-comm { grid-template-columns: minmax(0, 1fr); } }
.sl-comm a { display: flex; gap: 10px; align-items: flex-start; padding: 8px; margin: 0 -8px; border-radius: var(--sl-r); color: var(--sl-text-2) !important; text-decoration: none; transition: background var(--sl-dur); }
.sl-comm a:hover { background: var(--sl-hover); }
.sl-comm .ic, .sl-comm svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--sl-accent); stroke: currentColor; fill: none; stroke-width: 2; }
.sl-comm span { display: flex; flex-direction: column; min-width: 0; }
.sl-comm b { font-size: 13px; color: var(--sl-text); }
.sl-comm small { font-size: 12px; color: var(--sl-muted); line-height: 1.4; }

/* ---- motion ---- */
@keyframes sl-draw { from { stroke-dashoffset: var(--sl-len, 1400); } to { stroke-dashoffset: 0; } }
@keyframes sl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sl-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sl-stripe { from { background-position: 0 0; } to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) {
  .sl-draw, .sl-fade, .sl-bar, .sl-rise, .sl-bob, .sl-live, .sl-toast, .sl-prog.run > span { animation: none !important; }
  .sl-btn, .sl-card-lift, .sl-mascot > img, .sl-kpi { transition: none !important; }
  .sl-btn:hover, .sl-card-lift:hover, .sl-mascot:hover > img { transform: none !important; }
}