/* ==========================================================================
   Computer: the full feature list (computer.html). Builds on site.css tokens.
   ========================================================================== */

/* ---------- hero ---------- */
.cp-hero { position: relative; padding: calc(64px + 9vh) 0 3rem; text-align: center; }
.cp-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48% 55% at 50% 35%, color-mix(in oklch, #6b4cf0 20%, transparent), transparent 72%); }
.cp-hero .wrap { position: relative; }
.cp-faces { display: flex; justify-content: center; margin-bottom: 2.25rem; }
.cp-faces img { width: clamp(2.6rem, 4vw, 3.4rem); height: clamp(2.6rem, 4vw, 3.4rem); border-radius: 50%; object-fit: cover; background: #0d0b17; box-shadow: 0 0 0 2px var(--background), 0 10px 24px -12px rgb(0 0 0 / .6); }
.cp-faces img + img { margin-left: calc(clamp(2.6rem, 4vw, 3.4rem) * -.32); }
/* fourteen faces are wider than a phone: show ten */
@media (max-width: 440px) { .cp-faces img:nth-child(n+11) { display: none; } }
.cp-h { font-size: clamp(3rem, 7.2vw, 6.75rem); letter-spacing: -0.025em; line-height: .98; }
.cp-lede { margin: 1.5rem auto 0; max-width: 38rem; }
.cp-cta { justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
  .cp-faces img { animation: cp-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .cp-faces img:nth-child(1) { animation-delay: .00s; } .cp-faces img:nth-child(2) { animation-delay: .04s; }
  .cp-faces img:nth-child(3) { animation-delay: .08s; } .cp-faces img:nth-child(4) { animation-delay: .12s; }
  .cp-faces img:nth-child(5) { animation-delay: .16s; } .cp-faces img:nth-child(6) { animation-delay: .20s; }
  .cp-faces img:nth-child(7) { animation-delay: .24s; } .cp-faces img:nth-child(8) { animation-delay: .28s; }
  .cp-faces img:nth-child(9) { animation-delay: .32s; } .cp-faces img:nth-child(10) { animation-delay: .36s; }
  .cp-faces img:nth-child(11) { animation-delay: .40s; } .cp-faces img:nth-child(12) { animation-delay: .44s; }
  .cp-faces img:nth-child(13) { animation-delay: .48s; } .cp-faces img:nth-child(14) { animation-delay: .52s; }
  .cp-h, .cp-lede, .cp-cta { animation: cp-fade .9s ease both; }
  .cp-lede { animation-delay: .15s; } .cp-cta { animation-delay: .25s; }
}
@keyframes cp-rise { from { opacity: 0; transform: translateY(14px) scale(.9); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cp-fade { from { opacity: 0; transform: translateY(12px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- showcase: the five biggest features, pinned ---------- */
.sc { position: relative; height: 620vh; height: 620svh; }
.sc-pin { display: flex; align-items: center; padding-top: 64px; }
.sc-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 50% at 68% 55%, color-mix(in oklch, #6b4cf0 18%, transparent), transparent 72%); }
.sc-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.sc-list li { position: relative; border-top: 1px solid var(--hair); }
.sc-list li:last-child { border-bottom: 1px solid var(--hair); }
.sc-list button { display: flex; align-items: baseline; gap: 1rem; width: 100%; padding: 1rem 0; text-align: left; }
.sc-n { flex: none; font: 400 .8125rem/1 var(--font-mono); color: var(--text-ghost); transition: color .3s ease; }
.sc-t { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.018em; color: var(--muted-foreground); transition: color .3s ease; }
.sc-list li:hover .sc-t { color: var(--foreground); }
.sc-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.sc-d p { overflow: hidden; padding-left: 2.15rem; color: var(--muted-foreground); font-size: clamp(.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; max-width: 30rem; }
.sc-list li.on .sc-d { grid-template-rows: 1fr; }
.sc-list li.on .sc-d p { padding-bottom: 1.15rem; }
.sc-list li.on .sc-t { color: var(--foreground); }
.sc-list li.on .sc-n { color: var(--link); }
.sc-prog { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--hl); transform-origin: left; transform: scaleX(var(--f, 0)); }

.sc-win { border-radius: 1.125rem; overflow: hidden; border: 1px solid var(--hair); background: var(--card);
  box-shadow: 0 60px 120px -50px color-mix(in oklch, #6b4cf0 55%, transparent), var(--e3); }
.sc-bar { display: flex; align-items: center; gap: .35rem; height: 2.1rem; padding: 0 .85rem; border-bottom: 1px solid var(--hair); }
.sc-bar span { width: .5rem; height: .5rem; border-radius: 50%; background: color-mix(in oklch, var(--foreground) 18%, transparent); }
.sc-bar em { margin: 0 auto; padding-right: 1.6rem; font: 500 .75rem/1 var(--font-display); font-style: normal; color: var(--muted-foreground); }
.sc-stage { position: relative; aspect-ratio: 16 / 11; container-type: inline-size; }
.sc-scr { position: absolute; inset: 0; padding: 4.2cqw 4.5cqw; font-size: clamp(10px, 1.85cqw, 15px); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.sc-scr.on { opacity: 1; visibility: visible; }

/* shared bits inside the product moments (all em, so they scale with the window) */
.sc-scr [data-at] { opacity: 0; transform: translateY(.5em); transition: opacity .35s ease, transform .35s var(--ease); }
.sc-scr [data-at].in { opacity: 1; transform: none; }
.sx-f { width: 2.4em; height: 2.4em; border-radius: 50%; object-fit: cover; flex: none; background: #0d0b17; }
.sx-head { display: flex; align-items: center; gap: .8em; margin-bottom: 1.3em; }
.sx-head b { font: 600 1.5em/1 var(--font-display); letter-spacing: -0.015em; }
.sx-pill { padding: .3em .7em; border-radius: 999px; font-size: .8em; color: var(--link); background: color-mix(in oklch, #a78bfa 14%, transparent); }
.sx-search { margin-left: auto; padding: .55em 1em; border-radius: 999px; border: 1px solid var(--hair); font-size: .85em; color: var(--text-ghost); }
.sx-tabs { display: flex; gap: 1.2em; margin-left: auto; font: 500 .9em/1 var(--font-display); color: var(--muted-foreground); }
.sx-tabs .on { color: var(--foreground); box-shadow: 0 2px 0 0 #a78bfa; padding-bottom: .3em; }
.sx-btn { position: relative; display: inline-grid; place-items: center; flex: none; padding: .5em .95em; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--foreground) 16%, transparent); font: 500 .85em/1 var(--font-body); white-space: nowrap; transition: background .3s ease, color .3s ease; }
.sx-btn i { grid-area: 1 / 1; font-style: normal; transition: opacity .25s ease; }
.sx-btn i + i { opacity: 0; }
.sx-btn.on i:first-child, .on > .sx-btn i:first-child, .on .sx-btn-p i:first-child { opacity: 0; }
.sx-btn.on i + i, .on > .sx-btn i + i, .on .sx-btn-p i + i { opacity: 1; }
.sx-btn-p { border: 0; color: #fff; background: var(--btn-fill); }
.on .sx-btn-p, .sx-btn-p.on { color: var(--ok); background: color-mix(in oklch, var(--ok) 15%, transparent); }
.sx-bar { display: block; height: .3em; margin-top: .55em; border-radius: 999px; background: color-mix(in oklch, var(--foreground) 10%, transparent); overflow: hidden; }
.sx-bar i { display: block; height: 100%; background: var(--hl); }
.sx-ok { color: var(--ok); margin-right: .6em; }

/* 1. Workforce */
.sx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3em 1em; }
.sx-grid li { display: grid; justify-items: center; text-align: center; gap: .15em; }
.sx-grid .sx-f { width: 3.6em; height: 3.6em; margin-bottom: .35em; }
.sx-grid b { font: 600 .95em/1.2 var(--font-display); }
.sx-grid span { font-size: .78em; color: var(--muted-foreground); }

/* 2. My Radar */
.sx-hi { margin-bottom: 1.2em; }
.sx-hi b { display: block; font: 600 1.6em/1.1 var(--font-display); letter-spacing: -0.015em; }
.sx-hi span { display: block; margin-top: .3em; color: var(--muted-foreground); font-size: .95em; }
.sx-rows li { display: flex; align-items: center; gap: .9em; padding: .8em 0; border-top: 1px solid var(--hair); }
.sx-rows li > div { flex: 1; min-width: 0; }
.sx-rows b { display: block; font: 600 1em/1.25 var(--font-display); }
.sx-rows div > span { display: block; font-size: .85em; color: var(--muted-foreground); }
.sx-sub { margin: 1.2em 0 .5em; font: 600 .95em/1 var(--font-display); }
.sx-away li { display: flex; align-items: center; padding: .35em 0; font-size: .9em; color: var(--muted-foreground); }

/* 3. Approval */
.sx-chat { display: flex; flex-direction: column; gap: .9em; }
.sx-msg { display: flex; gap: .7em; align-items: flex-start; }
.sx-msg b { display: block; margin-bottom: .25em; font: 600 .9em/1 var(--font-display); }
.sx-msg.me { justify-content: flex-end; }
.sx-bub { display: inline-block; padding: .6em .85em; border-radius: .25em 1em 1em 1em; background: var(--tint); border: 1px solid var(--hair); font-size: .95em; line-height: 1.4; }
.sx-msg.me .sx-bub { border-radius: 1em .25em 1em 1em; background: color-mix(in oklch, #8b7bff 26%, transparent); border-color: color-mix(in oklch, #a78bfa 30%, transparent); }
.sx-ask { margin-left: 3.1em; padding: .9em 1em; border-radius: .9em; border: 1px solid color-mix(in oklch, #a78bfa 45%, transparent); background: color-mix(in oklch, #a78bfa 8%, transparent); }
.sx-ask-h { font: 600 1em/1.3 var(--font-display); }
.sx-ask code { display: inline-block; margin: .55em 0 .8em; padding: .35em .6em; border-radius: .4em; background: color-mix(in oklch, var(--foreground) 7%, transparent); font: 400 .82em/1.3 var(--font-mono); }
.sx-ask-a { display: flex; gap: .5em; }
.sx-log { margin-top: .7em; font-size: .8em; color: var(--muted-foreground); }
.sx-chart { display: flex; align-items: flex-end; gap: .3em; height: 3em; margin-top: .6em; }
.sx-chart i { width: 1.4em; height: calc(var(--v) * 100%); border-radius: .2em .2em .1em .1em; background: linear-gradient(#c084fc, #6b4cf0); }

/* 4. Board */
.sx-colh { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: .7em; font: 500 .85em/1 var(--font-display); color: var(--muted-foreground); }
.sx-colh span { padding-left: .45em; }
.sx-cards { position: relative; height: 17em; }
.sx-cards::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), var(--hair) calc(33.33% - .5px), var(--hair) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), var(--hair) calc(66.66% - .5px), var(--hair) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.sx-card { position: absolute; left: calc(var(--col, 0) * 33.333% + .45em); top: calc(var(--row, 0) * 5.4em); width: calc(33.333% - .9em); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6em; align-items: center;
  padding: .7em .75em; border-radius: .7em; border: 1px solid var(--hair); background: color-mix(in oklch, var(--background) 50%, var(--card)); box-shadow: 0 .4em 1em -.6em rgb(0 0 0 / .5);
  transition: left .6s var(--ease), top .6s var(--ease), border-color .3s ease; }
.sx-card .sx-f { grid-row: span 2; width: 2em; height: 2em; }
.sx-card b { font: 600 .88em/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-card span { font-size: .75em; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-card.moved { border-color: color-mix(in oklch, #a78bfa 50%, transparent); }

/* 5. SLAs */
.sx-sla li { display: flex; align-items: center; gap: .9em; padding: .85em 0; border-top: 1px solid var(--hair); }
.sx-sla li > div { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: .6em; align-items: center; }
.sx-sla b { font: 600 .98em/1.25 var(--font-display); }
.sx-p { font: 500 .72em/1 var(--font-mono); padding: .3em .45em; border-radius: .35em; color: var(--muted-foreground); background: var(--tint); }
.sx-clock { grid-column: 1 / -1; display: block; height: .32em; margin-top: .55em; border-radius: 999px; background: color-mix(in oklch, var(--foreground) 10%, transparent); overflow: hidden; }
.sx-clock i { display: block; height: 100%; width: 100%; border-radius: 999px; background: color-mix(in oklch, var(--ok) 70%, transparent); transform-origin: left; transition: background .3s ease; }
.sx-clock.done i { background: color-mix(in oklch, var(--foreground) 25%, transparent); }
.sx-left { min-width: 5.5em; text-align: right; font: 500 .82em/1.2 var(--font-body); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sx-risk.at .sx-clock i { background: var(--warn); }
.sx-risk.at .sx-left { color: var(--warn); }
.sx-note { margin-top: 1em; font-size: .85em; color: var(--muted-foreground); }

@media (max-width: 900px) {
  .sc-pin { align-items: flex-start; padding-top: calc(64px + 2svh); }
  .sc-grid { grid-template-columns: 1fr; gap: 1rem; }
  .sc-list li:not(.on) { display: none; }
  .sc-list li { border: 0 !important; }
  .sc-list button { padding: .25rem 0 .4rem; }
  .sc-t { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .sc-d p { padding-left: 0; font-size: .9375rem; }
  .sc-prog { top: auto; bottom: -.25rem; }
  .sc-stage { aspect-ratio: 4 / 4.6; }
  .sc-scr { font-size: clamp(10px, 3.3cqw, 14px); }
  .sx-grid { grid-template-columns: repeat(3, 1fr); }
  .sx-grid li:nth-child(n+10) { display: none; }
  .sx-search { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc { height: auto; }
  .sc .sc-pin { position: relative; height: auto; padding: 4rem 0; }
}

/* ---------- toolbar: find and filter ---------- */
.toolbar { position: sticky; top: 64px; z-index: 30; padding: .75rem 0; background: color-mix(in oklch, var(--background) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.toolbar-in { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.75rem; }
.search { position: relative; flex: 0 1 20rem; display: flex; align-items: center; }
.search svg { position: absolute; left: .9rem; width: 1rem; height: 1rem; fill: none; stroke: var(--text-ghost); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.search input {
  width: 100%; height: 2.5rem; padding: 0 1rem 0 2.5rem; border-radius: 999px; outline: 0;
  border: 1px solid color-mix(in oklch, var(--foreground) 14%, transparent); background: color-mix(in oklch, var(--foreground) 4%, transparent);
  color: var(--foreground); font: 400 .9375rem/1 var(--font-body); transition: border-color .2s ease, box-shadow .2s ease;
}
.search input::placeholder { color: var(--text-ghost); }
.search input:focus { border-color: #a78bfa; box-shadow: 0 0 0 4px color-mix(in oklch, #a78bfa 16%, transparent); }
.tabs.filt { flex: none; margin-top: 0; gap: 1.5rem; -webkit-mask: none; mask: none; padding-right: 0; }
.count { margin-left: auto; font-size: .8125rem; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- table of contents + list ---------- */
.cp-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); padding-top: 3.5rem; }
.toc { position: sticky; top: calc(64px + 5.5rem); align-self: start; max-height: calc(100vh - 64px - 7rem); overflow: auto; scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc a { display: flex; gap: .75rem; padding: .4rem .6rem; margin-left: -.6rem; border-radius: .5rem; font-size: .875rem; color: var(--muted-foreground); transition: color .2s ease, background .2s ease, opacity .2s ease; }
.toc a span { flex: none; width: 1.4rem; font: 400 .75rem/1.6 var(--font-mono); color: var(--text-ghost); }
.toc a:hover { color: var(--foreground); background: var(--tint); }
.toc a.on { color: var(--foreground); background: var(--tint); }
.toc a.on span { color: var(--link); }
.toc a.dim { opacity: .35; }

.fsec { padding-bottom: 4.5rem; scroll-margin-top: calc(64px + 5rem); }
.fsec[hidden] { display: none; }
.fsec-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; align-items: baseline; padding-bottom: 1.25rem; }
.fsec-n { font: 400 .8125rem/1 var(--font-mono); color: var(--text-ghost); }
.fsec-head h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); letter-spacing: -0.018em; line-height: 1.1; }
.fsec-intro { margin-top: .35rem; color: var(--muted-foreground); }
.fsec-st { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.st-more { font-size: .75rem; color: var(--muted-foreground); }

.feat { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding: 1rem .75rem; margin: 0 -.75rem; border-top: 1px solid var(--hair); border-radius: .625rem; transition: background .2s ease; }
.feat:hover { background: var(--tint); }
.feat h3 { font: 600 1rem/1.35 var(--font-display); letter-spacing: -0.006em; }
.feat p { font-size: .9375rem; line-height: 1.55; color: var(--muted-foreground); }
.feat .fst { justify-self: end; }
.feat[hidden], .fgroup[hidden] { display: none; }
.fgroup { padding: 1.75rem 0 .6rem; font: 500 .875rem/1.2 var(--font-display); color: var(--link); }
.fgroup:first-child { padding-top: .25rem; }
mark { background: color-mix(in oklch, #a78bfa 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* status, always a word with its colour */
.fst { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 999px; font: 500 .75rem/1.2 var(--font-body); white-space: nowrap; }
.fst-live { color: var(--ok); background: color-mix(in oklch, var(--ok) 13%, transparent); }
.filt-key { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--text-ghost); }
.filt-key b { color: var(--muted-foreground); font-weight: 500; }
.fst-on { color: var(--link); background: color-mix(in oklch, #a78bfa 15%, transparent); }
.fst-soon { color: var(--muted-foreground); background: var(--tint); }

.igroup { margin-bottom: 1.75rem; }
.igroup-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; font: 500 1rem/1.3 var(--font-display); }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-feat { display: block; margin: 0; padding: .5rem .95rem; border: 1px solid var(--hair); border-radius: 999px; }
.pill-feat h3 { font: 500 .9375rem/1.2 var(--font-body); }

.empty { padding: 2rem 0 4rem; color: var(--muted-foreground); }
.legend { display: grid; gap: .7rem; padding: 1.75rem 0 1rem; border-top: 1px solid var(--hair); }
.legend p { display: flex; align-items: center; gap: .9rem; font-size: .875rem; color: var(--muted-foreground); }
.legend .fst, .lg-none { min-width: 6.5rem; justify-content: center; }
.lg-none { display: inline-flex; padding: .25rem .6rem; border-radius: 999px; border: 1px dashed var(--hair); font-size: .75rem; color: var(--text-ghost); }
.cp-join { border-top: 1px solid var(--hair); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .cp-grid { grid-template-columns: 1fr; padding-top: 2rem; }
  .toc { display: none; }
}
@media (max-width: 700px) {
  .toolbar-in { flex-wrap: wrap; gap: .6rem 1rem; }
  .search { flex: 1 1 100%; }
  .tabs.filt { flex: 1 1 100%; gap: 1.1rem; overflow-x: auto; }
  .count { display: none; }
  .fsec-head { grid-template-columns: auto minmax(0, 1fr); }
  .fsec-st { grid-column: 2; }
  .feat { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; }
  .feat h3 { grid-column: 1; }
  .feat .fst { grid-column: 2; grid-row: 1; }
  .feat p { grid-column: 1 / -1; }
}