/* Pulse Analytics launch: styles for the five storylines. Uses the base demo's tokens. */

/* ---------- home brief ---------- */
.sl-icard__kicker { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.sl-icard .icard__hero { margin-top: 2px; }
.sl-icard__viz { margin-top: 4px; }
.sl-icard__axis { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink3); margin-top: 4px; }
.sl-icard__leg { display: inline-flex; align-items: center; gap: 6px; }
.sl-icard__leg i { display: inline-block; width: 14px; height: 2px; background: var(--brand-light); border-radius: 2px; }
.sl-icard__leg i.is-dash { background: repeating-linear-gradient(90deg, var(--ink3) 0 3px, transparent 3px 6px); margin-left: 6px; }
.slspark { width: 100%; display: block; }
.sl-explain { background: var(--brand); border-color: var(--brand); color: #fff; }
.sl-explain:hover { background: var(--brand-light); border-color: var(--brand-light); color: #fff; }

/* ---------- charts ---------- */
.slc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slc__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--ink2); }
.slc__legend span { display: inline-flex; align-items: center; gap: 6px; }
.slc__legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.slc__legend-thr i { background: repeating-linear-gradient(90deg, var(--red) 0 4px, transparent 4px 7px); }
.slc__legend-band i { height: 10px; width: 10px; background: color-mix(in srgb, var(--red) 25%, transparent); }
.slc__plot { position: relative; }
.slc__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.slc__ytick { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line2); font-size: 10px; color: var(--ink3); padding-top: 1px; pointer-events: none; }
.slc__x { position: relative; height: 14px; font-size: 10px; color: var(--ink3); }
.slc__x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.slc__x span:first-child { transform: none; }
.slc__x span:last-child:not(:first-child) { transform: translateX(-100%); }
.slc__dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); }
.slc__mark { position: absolute; transform: translate(8px, -130%); font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; background: var(--canvas-bg); padding: 0 4px; border-radius: 4px; }

/* bridge */
.slbr { display: flex; flex-direction: column; gap: 8px; }
.slbr__plot { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); align-items: end; border-bottom: 1px solid var(--line2); padding-top: 4px; }
.slbr__col { display: flex; justify-content: center; }
.slbr__col.is-click { cursor: pointer; }
.slbr__col.is-click:hover .slbr__bar { filter: brightness(1.15); outline: 2px solid var(--brand-light); outline-offset: 2px; }
.slbr__track { position: relative; width: 52%; max-width: 64px; }
.slbr__bar { position: absolute; left: 0; right: 0; border-radius: 4px; }
.slbr__bar--base { background: color-mix(in srgb, var(--ink3) 45%, transparent); }
.slbr__bar--end { background: var(--brand); }
.slbr__bar--promo { background: var(--brand-light); }
.slbr__bar--more { background: var(--green); }
.slbr__bar--new { background: var(--teal); }
.slbr__val { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; white-space: nowrap; }
.slbr__val--promo { color: var(--brand-light); } .slbr__val--more { color: var(--green); } .slbr__val--new { color: var(--teal); }
.slbr__break { position: absolute; left: -4px; bottom: -9px; font-size: 14px; color: var(--ink3); background: var(--canvas-bg); padding: 0 2px; }
.slbr__labels { display: grid; grid-template-columns: repeat(var(--cols), 1fr); text-align: center; font-size: 12px; color: var(--ink2); gap: 4px; }

/* levers */
.sllev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sllev__card { background: var(--surface); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.sllev__card.is-click { cursor: pointer; transition: border-color .15s; }
.sllev__card.is-click:hover { border-color: var(--brand-light); }
.sllev__top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink2); }
.sllev__dot { width: 8px; height: 8px; border-radius: 2px; }
.sllev__dot--promo { background: var(--brand-light); } .sllev__dot--more { background: var(--green); } .sllev__dot--new { background: var(--teal); }
.sllev__card b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.sllev__card p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink2); }
.sllev__ask { margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--brand-light); }
.sllev__ask .material-symbols-outlined { font-size: 14px; }

.slcallout { display: flex; gap: 12px; align-items: flex-start; background: color-mix(in srgb, var(--orange) 12%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); border-radius: 10px; padding: 10px 14px; }
.slcallout .material-symbols-outlined { color: var(--orange); font-size: 20px; }
.slcallout div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink2); }
.slcallout b { font-size: 13px; color: var(--ink); font-weight: 600; }

/* ranked, stacked, outcome, kpis */
.slrank { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; }
.slrank__plot { position: relative; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line2); }
.slrank__plot i { flex: 1; background: color-mix(in srgb, var(--ink3) 40%, transparent); border-radius: 2px 2px 0 0; min-width: 2px; }
.slrank__plot i.is-hl { background: var(--orange); }
.slrank__bracket { position: absolute; left: 0; top: -22px; border-top: 1px solid var(--orange); height: 8px; border-left: 1px solid var(--orange); border-right: 1px solid var(--orange); }
.slrank__bracket span { position: absolute; left: 0; top: -18px; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--orange); }
.slrank__x { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); }
.slstk { display: flex; flex-direction: column; gap: 6px; }
.slstk__plot { display: flex; align-items: stretch; gap: 8px; }
.slstk__col { flex: 1; display: flex; flex-direction: column-reverse; gap: 1px; border-radius: 4px; overflow: hidden; }
.slstk__col i { display: block; min-height: 1px; }
.slstk__x { display: flex; gap: 8px; font-size: 10px; color: var(--ink3); }
.slstk__x span { flex: 1; text-align: center; }
.slout { display: flex; flex-direction: column; gap: 10px; }
.slout__bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; gap: 2px; }
.slout__rows { display: flex; flex-direction: column; gap: 6px; }
.slout__row { display: grid; grid-template-columns: 10px 1fr 56px 44px 120px; gap: 10px; align-items: center; font-size: 13px; color: var(--ink2); }
.slout__row > i { width: 10px; height: 10px; border-radius: 2px; }
.slout__row b { color: var(--ink); font-weight: 600; text-align: right; }
.slout__pct { color: var(--ink3); text-align: right; font-size: 12px; }
.slout__val { text-align: right; font-size: 12px; }
.slout__val.is-red { color: var(--red); font-weight: 600; }
.slkpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.slkpi div { background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.slkpi b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.slkpi b.is-red { color: var(--red); } .slkpi b.is-green { color: var(--green); }
.slkpi span { font-size: 11px; color: var(--ink3); }

/* ---------- artefact shell additions ---------- */
.sl-art { max-height: none; }
.sl-art__body { -webkit-mask-image: none; mask-image: none; gap: 16px; overflow: visible; }
.sl-art__icon { font-size: 15px; vertical-align: -3px; margin-right: 6px; color: var(--brand-light); }
.sl-saved { color: var(--green) !important; }
.slsaved { display: flex; align-items: center; gap: 12px; background: var(--canvas-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; margin: 8px 0 12px; max-width: 620px; }
.slsaved__icon { width: 34px; height: 34px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 25%, transparent); display: grid; place-items: center; color: var(--brand-light); }
.slsaved div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.slsaved b { font-size: 14px; font-weight: 600; }
.slsaved span { font-size: 12px; color: var(--ink3); }
.sl-composite .artefact { max-height: none; }
.sidebar__nav-badge.sl-bump { animation: slBump .6s ease; }
@keyframes slBump { 0% { transform: scale(1); } 35% { transform: scale(1.45); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 40%, transparent); } 100% { transform: scale(1); } }

/* "Worked for" query */
.did__query { border-top: 1px solid var(--line); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.did__query > span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.did__query pre { margin: 0; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink2); white-space: pre-wrap; background: var(--surface2); border-radius: 8px; padding: 8px 10px; }

.sl-chip--nav { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); }
.sl-chip--nav .material-symbols-outlined { font-size: 15px; }
.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 500; }

/* ---------- data table ---------- */
.sltbl { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sltbl__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sltbl__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sltbl__chip { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--ink2); font: 500 12px inherit; font-family: inherit; cursor: pointer; }
.sltbl__chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sltbl__count { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--surface); font-size: 12px; color: var(--ink2); }
.sltbl__count .material-symbols-outlined { font-size: 14px; }
.sltbl__dl { margin-left: auto; display: flex; gap: 6px; }
.sltbl__dl .canvas__bar-btn { height: 28px; padding: 0 10px; gap: 4px; }
.sltbl__dl .material-symbols-outlined { font-size: 15px; }
.sltbl__sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.sltbl__sum div { background: var(--surface); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.sltbl__sum span { font-size: 11px; color: var(--ink3); }
.sltbl__sum b { font-size: 17px; font-weight: 600; }
.sltbl__sum em { font-style: normal; font-size: 11px; color: var(--ink3); }
.sltbl__sum .is-total { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.sltbl__scroll { overflow: auto; border: 1px solid var(--line2); border-radius: 10px; }
.sltbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sltbl th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 600; font-size: 11px; color: var(--ink3); letter-spacing: .02em; padding: 8px 12px; white-space: nowrap; z-index: 1; }
.sltbl th.is-sort { cursor: pointer; user-select: none; }
.sltbl th.is-sort:hover { color: var(--ink); }
.sltbl th .material-symbols-outlined { font-size: 13px; vertical-align: -2px; margin-left: 2px; }
.sltbl td { padding: 8px 12px; border-top: 1px solid var(--line); white-space: nowrap; color: var(--ink); }
.sltbl .is-r { text-align: right; }
.sltbl tr.is-click { cursor: pointer; }
.sltbl tr.is-click:hover td { background: var(--nav-hover); }
.sl-open { font-size: 13px; vertical-align: -2px; margin-left: 6px; color: var(--ink3); }
.sltag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--surface); color: var(--ink2); margin-left: 6px; }
td > .sltag:first-child { margin-left: 0; }
.sltag--promo { background: color-mix(in srgb, var(--brand-light) 20%, transparent); color: var(--brand-light); }
.sltag--more { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.sltag--new { background: color-mix(in srgb, var(--teal) 18%, transparent); color: var(--teal); }
.sltag--warn { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.sltag--ok { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.sltag--bad { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }

/* ---------- share sheet ---------- */
.slshare { background: var(--canvas-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; margin: 8px 0 16px; max-width: 620px; }
.sl-modal .slshare { margin: 0; border: 0; padding: 0; background: transparent; max-width: none; }
.slshare__head { display: flex; gap: 10px; align-items: flex-start; }
.slshare__head > .material-symbols-outlined { color: var(--brand-light); font-size: 22px; }
.slshare__head div { display: flex; flex-direction: column; }
.slshare__head b { font-size: 15px; font-weight: 600; }
.slshare__head span { font-size: 12px; color: var(--ink3); }
.slshare__team { display: flex; gap: 8px; flex-wrap: wrap; }
.slshare__pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line2); font-size: 13px; }
.slshare__pill b { font-weight: 600; }
.slshare__pill em { font-style: normal; font-size: 12px; color: var(--ink3); }
.slshare__pill button { border: 0; background: transparent; color: var(--ink3); cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.slshare__pill button:hover { background: var(--nav-hover); color: var(--ink); }
.slshare__pill button .material-symbols-outlined { font-size: 18px; }
.slshare__me { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-style: normal; display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.slshare__list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--ink2); }
.slshare__list span { display: inline-flex; align-items: center; gap: 6px; }
.slshare__list i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 9px; font-weight: 600; }
.slshare__rows { display: flex; flex-direction: column; border: 1px solid var(--line2); border-radius: 10px; }
.slshare__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--ink2); }
.slshare__row + .slshare__row { border-top: 1px solid var(--line2); }
.slshare__row > .material-symbols-outlined { font-size: 17px; color: var(--ink3); }
.slshare__row > span:nth-child(2) { flex: 1; }
.slshare__sel { height: 30px; border-radius: 8px; border: 1px solid var(--line2); background: var(--input-bg); color: var(--ink); font: inherit; font-size: 13px; padding: 0 8px; }
.slshare__toggles { display: flex; gap: 14px; }
.sltoggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: var(--ink); }
.sltoggle input { display: none; }
.sltoggle i { width: 28px; height: 16px; border-radius: 999px; background: var(--line2); position: relative; transition: background .15s; }
.sltoggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sltoggle input:checked + i { background: var(--brand); }
.sltoggle input:checked + i::after { transform: translateX(12px); }
.slshare__note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--ink2); background: var(--surface); border-radius: 10px; padding: 8px 12px; line-height: 1.5; }
.slshare__note .material-symbols-outlined { font-size: 16px; color: var(--teal); }
.slshare__actions { display: flex; gap: 8px; }
.slshare.is-done { padding: 12px 16px; }
.slshare__ok { display: flex; align-items: center; gap: 12px; }
.slshare__okicon { width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #100e13; display: grid; place-items: center; flex-shrink: 0; }
.slshare__okicon .material-symbols-outlined { font-size: 18px; font-variation-settings: 'wght' 600; }
.slshare__ok > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.slshare__ok b { font-size: 14px; font-weight: 600; }
.slshare__ok > div span { font-size: 12px; color: var(--ink3); }
.slav { display: inline-flex; }
.slav i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--canvas-bg); margin-left: -7px; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 9px; font-weight: 600; }
.slav i:first-child { margin-left: 0; }
.slav i.is-more { background: var(--surface3); color: var(--ink2); }
.sl-modal { width: 480px; }

/* ---------- rule confirmation card ---------- */
.slrule { background: var(--canvas-bg); border: 1px solid color-mix(in srgb, var(--brand-light) 45%, var(--card-border)); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin: 8px 0 16px; max-width: 680px; }
.slrule__head { display: flex; align-items: center; gap: 10px; }
.slrule__head b { font-size: 15px; font-weight: 600; }
.slrule__hint { margin-left: auto; font-size: 12px; color: var(--ink3); }
.slrule__rule { background: var(--surface); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.slrule__name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.slrule__num { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--brand-light); display: grid; place-items: center; font-size: 12px; }
.slrule__num .material-symbols-outlined { font-size: 14px; }
.slrule__fields { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.slrule__f { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.slrule__inwrap { display: inline-flex; align-items: center; gap: 6px; }
.slrule__inwrap em { font-style: normal; color: var(--ink2); }
.slrule__in { height: 30px; border-radius: 8px; border: 1px solid var(--line2); background: var(--input-bg); color: var(--ink); font: 600 13px inherit; font-family: inherit; padding: 0 8px; min-width: 3ch; box-sizing: content-box; }
select.slrule__in { padding: 0 6px; font-weight: 500; }
.slrule__in:focus { outline: none; border-color: var(--brand-light); }
.slrule__in.is-changed { border-color: var(--brand-light); background: color-mix(in srgb, var(--brand) 18%, var(--input-bg)); }
.slrule__in:disabled { opacity: .85; }
.slrule__foot { font-size: 12px; color: var(--ink3); }
.slrule__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.slrule__actnote { font-size: 12px; color: var(--ink3); }
.slrule__confirmed { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--green); }
.slrule__confirmed .material-symbols-outlined { font-size: 18px; font-variation-settings: 'FILL' 1; }
.slrule.is-done { border-color: var(--card-border); }

/* ---------- watch-set cards ---------- */
.sl-wcard { max-width: 680px; }
.sl-status i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sl-status--ok i { background: var(--green); }
.sl-status--alert { color: var(--red) !important; font-weight: 600; }
.sl-status--alert i { background: var(--red); animation: slPulse 1.6s infinite; }
.sl-status--match { color: var(--orange) !important; font-weight: 600; }
.sl-status--match i { background: var(--orange); }
@keyframes slPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 50%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.sl-wcard.is-alert { border-color: color-mix(in srgb, var(--red) 50%, var(--card-border)); }
.sl-wcard__shared { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink3); }
.sl-wcard__shared .material-symbols-outlined { font-size: 14px; }
.sl-wcard__more { align-self: flex-start; }
.sl-wcard__table { margin-top: -4px; }
.slwatch2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 16px; max-width: 900px; }
.slwatch2 .wcard { max-width: none; }
.slbins { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 10px; }
.slbins__b { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--ink3); }
.slbins__b.is-hit span:first-child { color: var(--red); font-weight: 600; }
.slbins__b .slc { gap: 0; }
.slbins__b .slc__x { display: none; }
.slbins__note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); }
.slbins__note .material-symbols-outlined { font-size: 15px; }
.slrisk { display: flex; align-items: baseline; gap: 8px; background: color-mix(in srgb, var(--orange) 12%, transparent); border-radius: 10px; padding: 10px 12px; }
.slrisk b { font-size: 22px; font-weight: 600; color: var(--orange); }
.slrisk span { font-size: 13px; color: var(--ink2); }
.sllapse { display: flex; flex-direction: column; }
.sllapse div { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink2); cursor: pointer; border-radius: 6px; }
.sllapse div:hover { background: var(--nav-hover); }
.sllapse b { color: var(--ink); }
.sllapse em { font-style: normal; font-weight: 600; color: var(--ink); }
.watch-view__items--cards .sl-wcard { max-width: none; }

/* ---------- dashboard canvas ---------- */
.sldash { max-height: none; }
.sldash .artefact__body { padding: 16px; }
.sldash__inner { display: flex; flex-direction: column; gap: 12px; }
.sldash__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sldash__meta { display: flex; flex-direction: column; margin-right: auto; }
.sldash__meta b { font-size: 16px; font-weight: 600; }
.sldash__meta span { font-size: 12px; color: var(--ink3); }
.sldash__filter { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--ink); font-size: 12px; font-weight: 500; }
.sldash__filter .material-symbols-outlined { font-size: 15px; }
.sldash__filter button { border: 0; background: transparent; color: var(--ink2); cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.sldash__filter button:hover { background: var(--nav-hover); }
.sldash__range { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.sldash__range button { border: 0; background: transparent; color: var(--ink2); font: 500 12px inherit; font-family: inherit; padding: 6px 10px; cursor: pointer; }
.sldash__range button + button { border-left: 1px solid var(--line2); }
.sldash__range button.is-on { background: var(--surface3); color: var(--ink); }
.sldash__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sldash__tile { background: var(--surface); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sldash__tile.is-wide { grid-column: 1 / -1; }
.sldash__tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sldash__tile-head b { font-size: 13px; font-weight: 600; }
.sldash__big { font-size: 18px; font-weight: 600; }
.sldash__tile-sub { font-size: 11px; color: var(--ink3); }
.slfeed { display: flex; flex-direction: column; }
.slfeed div { display: grid; grid-template-columns: 70px 92px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink2); }
.slfeed div:first-child { border-top: 0; }
.slfeed b { color: var(--ink); }

/* ---------- report ---------- */
.slrep-art { max-height: 560px; }
.slrep { background: var(--paper, var(--bg)); border: 1px solid var(--line2); border-radius: 12px; padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.6; color: var(--ink2); }
.slrep p { margin: 0; }
.slrep__top { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.slrep__title { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.slrep__meta { font-size: 12px; color: var(--ink3); }
.slrep__sec { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line2); padding-bottom: 4px; }
.slrep__tl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.slrep__tl li { display: grid; grid-template-columns: 52px 1fr; }
.slrep__tl b { color: var(--ink); }
.slrep__tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.slrep__tbl th { text-align: left; font-weight: 600; color: var(--ink3); padding: 5px 8px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.slrep__tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.slrep__tbl .is-r { text-align: right; }
.slrep__tbl .is-red { color: var(--red); font-weight: 600; }
.slrep__tbl--sm td, .slrep__tbl--sm th { font-size: 11px; padding: 4px 6px; }
.slrep__ask { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.slrep__foot { margin-top: 8px; font-size: 11px; color: var(--ink3); }

/* ---------- zip file ---------- */
.slzip { display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: 12px; padding: 12px 14px; }
.slzip__icon { width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange); display: grid; place-items: center; }
.slzip__icon .material-symbols-outlined { font-size: 24px; }
.slzip__meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.slzip__meta b { font-size: 14px; font-weight: 600; }
.slzip__meta span { font-size: 12px; color: var(--ink3); }
.slidx { border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; }
.slidx > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; font-weight: 500; }
.slidx > summary::-webkit-details-marker { display: none; }
.slidx > summary .material-symbols-outlined { font-size: 17px; color: var(--ink3); }
.slidx > summary .chev { margin-left: auto; transition: transform .2s; }
.slidx[open] > summary .chev { transform: rotate(180deg); }
.slidx .sltbl { padding: 0 12px 12px; }

/* ---------- demo 3 / 5 bits ---------- */
.slstand { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.slstand div { display: flex; align-items: center; gap: 10px; }
.slstand b { min-width: 34px; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.slmatch { background: var(--canvas-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; max-width: 680px; }
.slmatch__head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.slmatch__head .material-symbols-outlined { color: var(--green); }
.slmatch__head b { font-weight: 600; margin-right: 4px; }
.slmatch__ids { display: flex; flex-wrap: wrap; gap: 6px; }
.slmatch__ids span:not(.slmatch__rest) { font: 500 11px ui-monospace, Menlo, monospace; background: var(--surface); border-radius: 4px; padding: 3px 6px; color: var(--ink2); }
.slmatch__ids button { border: 1px dashed var(--line2); background: transparent; color: var(--ink2); border-radius: 4px; font: 500 11px inherit; font-family: inherit; padding: 3px 8px; cursor: pointer; }
.slmatch__rest { display: none; }
.slmatch__ids.is-all .slmatch__rest { display: contents; }
.sl-paste { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.sl-paste .material-symbols-outlined { font-size: 15px; }
.sl-paste button { border: 0; background: transparent; color: var(--ink2); cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.sl-paste--sent { margin-left: 8px; padding-right: 10px; vertical-align: middle; }
.sl-from-alert { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); border-radius: 999px; padding: 4px 12px; align-self: flex-start; }
.sl-from-alert .material-symbols-outlined { font-size: 15px; }
.sl-alert-link { cursor: pointer; border-color: color-mix(in srgb, var(--red) 45%, transparent) !important; }
.sl-alert-link .alert-card__time { color: var(--brand-light); font-weight: 600; }

/* customer view */
.slcust { width: 520px; }
.slcust__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.slcust__id { font: 600 18px ui-monospace, Menlo, monospace; }
.slcust__tag { font-size: 11px; font-weight: 600; color: var(--teal); background: color-mix(in srgb, var(--teal) 15%, transparent); border-radius: 4px; padding: 2px 8px; }
.slcust__x { margin-left: auto; border: 0; background: transparent; color: var(--ink2); cursor: pointer; }
.slcust__hist { display: flex; flex-direction: column; }
.slcust__hist div { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.slcust__hist b { color: var(--ink); font-weight: 500; }
.slcust__note { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--ink3); }
.slcust__note .material-symbols-outlined { font-size: 15px; color: var(--teal); }

/* ---------- presenter bar ---------- */
#slPresenter { position: fixed; left: 50%; top: 9px; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: #17171a; color: #f4f4f5; border: 1px solid #2f2f33; box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 12px; padding-top: 4px; padding-bottom: 4px; }
#slPresenter[hidden] { display: none; }
.slp__label { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; color: #8b8b93; }
.slp__group { display: inline-flex; gap: 2px; background: #100e13; border-radius: 999px; padding: 2px; }
.slp__group button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: #a1a1aa; font: 600 12px inherit; font-family: inherit; cursor: pointer; }
.slp__group button.is-on { background: #703bf7; color: #fff; }
.slp__who { color: #a1a1aa; padding: 0 4px; white-space: nowrap; }
.slp__btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #2f2f33; background: transparent; color: #f4f4f5; font: 500 12px inherit; font-family: inherit; cursor: pointer; white-space: nowrap; }
.slp__btn:hover { background: rgba(255,255,255,.06); }
.slp__btn .material-symbols-outlined { font-size: 15px; }
.slp__x { border: 0; background: transparent; color: #8b8b93; cursor: pointer; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }

@media (max-width: 760px) {
  .sllev, .slwatch2, .sldash__grid { grid-template-columns: 1fr; }
  .slbins { grid-template-columns: repeat(4, 1fr); }
  .slout__row { grid-template-columns: 10px 1fr 48px 40px; }
  .slout__val { grid-column: 2 / -1; text-align: left; }
  .sltbl__dl { margin-left: 0; }
  #slPresenter { left: 8px; right: 8px; transform: none; overflow-x: auto; }
  .slrep { padding: 16px; }
  .slbr__val { font-size: 11px; }
  .slbr__labels { font-size: 11px; }
}
.slshare__list[hidden], .sl-wcard__table[hidden] { display: none; }
.slrep-art .sl-art__body { overflow-y: auto; }
.slc__mark.is-left { transform: translate(calc(-100% - 8px), -130%); }
.slp__keys { color: #8b8b93; font-size: 11px; white-space: nowrap; padding: 0 2px; }

/* ---------- start page ---------- */
#slLaunch { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; transition: opacity .3s; }
#slLaunch.is-out { opacity: 0; pointer-events: none; }
.sll { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.sll__mark { width: 44px; height: 44px; border-radius: 12px; background: var(--brand); display: grid; place-items: center; }
.sll__mark svg { width: 22px; height: 17px; }
.sll__kicker { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-light); }
.sll__title { margin: -8px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.sll__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; }
.sll__list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; font-size: 14px; }
.sll__list li + li { border-top: 1px solid var(--line2); }
.sll__list b { width: 24px; height: 24px; border-radius: 50%; background: var(--surface3); display: grid; place-items: center; font-size: 12px; }
.sll__list em { font-style: normal; font-size: 12px; color: var(--ink3); text-align: right; }
.sll__note { display: flex; gap: 12px; align-items: flex-start; background: color-mix(in srgb, var(--brand) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brand-light) 40%, transparent); border-radius: 14px; padding: 14px 16px; }
.sll__note .material-symbols-outlined { color: var(--brand-light); font-size: 22px; }
.sll__note div { display: flex; flex-direction: column; gap: 4px; }
.sll__note b { font-size: 15px; font-weight: 600; }
.sll__note span:not(.material-symbols-outlined) { font-size: 13px; color: var(--ink2); line-height: 1.5; }
.sll__go { height: 48px; border: 0; border-radius: 14px; background: var(--brand); color: #fff; font: 600 15px inherit; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.sll__go:hover { background: var(--brand-light); }
.sll__blocked { font-size: 13px; color: var(--orange); text-align: center; }
.sll__blocked[hidden] { display: none; }
.sll__skip { border: 0; background: transparent; color: var(--ink3); font: 13px inherit; font-family: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .sll__list li { grid-template-columns: 28px 1fr; } .sll__list em { grid-column: 2; text-align: left; } .sll__title { font-size: 22px; } }