/* Exalda · Our Work list (/work) and system pages (/work/<system>).
   Loaded after exalda.css, main.css and course.css (the .cl-* list and .ck cards come from course.css). */

/* ---------- Our Work list ---------- */
.wk-sub{margin:-6px 0 22px;font-size:15.5px;line-height:1.6;color:var(--text);max-width:620px}
html:not(.js) .wk-bar{display:none}
.ck.wkc[hidden]{display:none}
.ck-cv.wkv{aspect-ratio:16/10;background:#eef2f8}
.ck-cv.wkv .pj-prev{position:absolute;inset:0;aspect-ratio:auto;border:0;background:none}
.ck-cv.wkv .ck-lv,.ck-soon{z-index:2}
.ck.wkc:hover .pj-prev .scr{transform:translateY(-4%) scale(1.03)}
.ck.wkc:hover .erd .tb.t1{transform:translate(-2%,-3%)}
.ck.wkc:hover .erd .tb.t2{transform:translate(2%,-3%)}
.ck.wkc:hover .erd .tb.t3{transform:translate(-2%,3%)}
.ck.wkc:hover .erd .tb.t4{transform:translate(2%,3%)}
.motion .ck.wkc:hover .erd path{animation:dash 1s linear infinite}
.ck-soon{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:rgba(10,18,33,.8);backdrop-filter:blur(4px);font-size:12px;font-weight:700;color:#fff}
.ck-soon .ic{width:14px;height:14px;color:#fba412}
.ck-st{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#33425e;white-space:nowrap}
.ck-st i{width:8px;height:8px;border-radius:50%;background:#13805a;box-shadow:0 0 0 4px #e7f6ef}
.ck-st.mu i{background:#a9b4c8;box-shadow:0 0 0 4px #f1f3f8}
button.ck-go{border:0;cursor:pointer;font-family:inherit}
div.ck.wkc{cursor:default}
.oo .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
.oo .s-head{margin-bottom:clamp(22px,3vw,32px)}
@media (max-width:640px){.oo .cl-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Asset Register: screenshots of the real system ---------- */
.shot{position:relative;display:block;width:100%;padding:0;border:0;border-radius:14px;background:#eef2f8;overflow:hidden;cursor:zoom-in;font:inherit;color:inherit;text-align:left;box-shadow:0 2px 6px rgba(20,34,61,.06),0 30px 70px rgba(20,34,61,.18);transition:box-shadow .5s var(--ease-out),transform .6s var(--ease-out)}
.shot img{display:block;width:100%;height:auto;transition:transform 1s var(--ease-out)}
.shot:hover{box-shadow:0 2px 6px rgba(20,34,61,.06),0 36px 80px rgba(20,34,61,.24)}
.shot:hover img{transform:scale(1.018)}
.shot:focus-visible{outline:2px solid #fba412;outline-offset:3px}
.shot-zoom{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 10px;border-radius:999px;background:rgba(10,18,33,.84);backdrop-filter:blur(4px);color:#fff;font-size:12.5px;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease-out)}
.shot-zoom svg{width:16px;height:16px;fill:none;stroke:#fba412;stroke-width:2.2;stroke-linecap:round}
.shot:hover .shot-zoom,.shot:focus-visible .shot-zoom{opacity:1;transform:none}
@media (hover:none){.shot-zoom{opacity:1;transform:none}}
.app-wrap>.shot-hero{position:relative;z-index:1;border-radius:12px;border:1px solid rgba(20,34,61,.08)}

/* Screens gallery: tabs, one screen at a time */
.gal-tabs{margin-bottom:18px}
.gal-tabs button[aria-selected="true"]{background:#14223d;border-color:#14223d;color:#fff}
.gal-p{margin:0}
.gal-p[hidden]{display:none}
.gal-p .shot{aspect-ratio:1800/975;border:1px solid #e3e8f1}
.gal-p .shot img{height:100%;object-fit:cover;object-position:left top}
.gal-p figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:16px;font-size:15px;line-height:1.55;color:var(--text)}
.gal-p figcaption b{font:700 1.02rem/1.4 var(--font-head);color:#14223d}
.motion .gal-p.on .shot{animation:galIn .6s var(--ease-out) both}
.motion .gal-p.on figcaption{animation:fadeUp .6s var(--ease-out) .08s both}
@keyframes galIn{from{opacity:0;transform:translateY(14px) scale(.99)}}
@media (max-width:760px){.gal-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.gal-tabs::-webkit-scrollbar{display:none}.gal-tabs button{flex:none}}

/* Full-size viewer */
.lbx{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}
.lbx[hidden]{display:none}
.lbx-scrim{position:absolute;inset:0;background:rgba(10,18,33,.84);opacity:0;transition:opacity .35s}
.lbx.open .lbx-scrim{opacity:1}
.lbx-card{position:relative;display:flex;flex-direction:column;width:min(1440px,100%);max-height:100%;border-radius:16px;background:#fff;overflow:hidden;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .4s,transform .55s var(--ease-out)}
.lbx.open .lbx-card{opacity:1;transform:none}
.lbx-top{display:flex;align-items:center;gap:16px;padding:10px 10px 10px 20px;border-bottom:1px solid #e6ebf2}
.lbx-top b{flex:1;min-width:0;font:600 14.5px/1.45 var(--font);color:#14223d}
.lbx .lbx-x{position:static;flex:none}
.lbx-body{overflow:auto;overscroll-behavior:contain;background:#eef2f8}
.lbx-body img{display:block;width:100%;height:auto}

/* ---------- Asset Register: activity log ---------- */
.alog{max-width:540px;margin-left:auto;padding:20px 22px;border:1px solid #e3e8f1;border-radius:14px;background:#fff;box-shadow:0 2px 6px rgba(20,34,61,.04),0 24px 50px rgba(20,34,61,.1)}
.alog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.alog-head b{font:700 1.05rem/1.3 var(--font-head);color:#14223d}
.alog-head .pill{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid #dde3ec;color:#5b6b86}
.alog li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eef1f6}
.alog li:last-child{border-bottom:0;padding-bottom:2px}
.al-ev{display:inline-grid;place-items:center;min-width:74px;height:26px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700}
.al-ev.a-new{background:#e7f6ef;color:#13805a}
.al-ev.a-mov{background:#e8eef9;color:#2c4f93}
.al-ev.a-dis{background:#fff1d6;color:#8a5200}
.al-ev.a-edt{background:#f1f3f8;color:#475571}
.alog .w{min-width:0;font-size:14px;line-height:1.35;color:#14223d}
.alog .tag{display:inline-block;margin-right:6px;padding:3px 6px;border-radius:6px;background:#14223d;color:#fff;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em;vertical-align:1px}
.alog .w small{display:block;margin-top:3px;font-size:12.5px;color:#5b6b86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alog .who{text-align:right;font-size:12px;line-height:1.35;color:#5b6b86;white-space:nowrap}
.alog .who b{display:block;font-weight:600;color:#14223d}
.motion .alog.rv-in li{animation:fadeUp .7s var(--ease-out) both;animation-delay:calc(.25s + var(--i,0)*.14s)}
.motion .alog.rv-in .tag{animation:okPop .55s var(--ease-spring) both;animation-delay:calc(.55s + var(--i,0)*.14s)}
@media (max-width:480px){.alog{padding:16px}.alog li{grid-template-columns:minmax(0,1fr) auto}.al-ev{grid-column:1/-1;justify-self:start;min-width:0}}

/* ---------- Asset Register: how to use it (video + steps) ---------- */
.howto{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,64px);align-items:center}
.howto .vid{margin-left:0;max-width:none;width:100%}
.hv-poster{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;width:100%;padding:clamp(18px,3vw,28px);border:0;background:#14223d;color:#fff;font:inherit;text-align:left;cursor:default;overflow:hidden}
.hv-poster::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.3px);background-size:18px 18px;opacity:.6}
.hv-poster>*{position:relative}
.hv-poster>.hv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:.26}
.hv-poster .hv-e{position:absolute;right:6%;top:50%;width:26%;transform:translateY(-50%);opacity:.08}
.hv-poster .hv-tag{position:absolute;left:clamp(18px,3vw,28px);top:clamp(18px,3vw,26px);display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12px;font-weight:700;letter-spacing:.04em}
.hv-poster .hv-tag .ic{width:15px;height:15px;color:#fba412}
.hv-poster .pl{position:absolute;left:50%;top:46%;width:72px;height:72px;margin:-36px 0 0 -36px;display:grid;place-items:center;border-radius:50%;background:#fba412;color:#14223d;box-shadow:0 14px 34px rgba(0,0,0,.3);transition:transform .5s var(--ease-out)}
.hv-poster .pl::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fba412}
.motion .hv-poster .pl::before{animation:playRing 2.2s ease-out infinite}
.hv-poster .pl svg{position:relative;width:26px;height:26px;margin-left:3px}
.hv-poster b{font:800 clamp(1.05rem,1.5vw,1.3rem)/1.25 var(--font-head);max-width:80%}
.hv-poster small{font-size:13px;color:#b9c3d6}
.hv[data-ready] .hv-poster{cursor:pointer}
.hv[data-ready] .hv-poster:hover .pl{transform:scale(1.08)}
.hv:not([data-ready]) .pl{opacity:.9}
.hv:not([data-ready]) .pl::before{display:none}
.hsteps{position:relative;display:flex;flex-direction:column;gap:2px;margin-top:20px}
.hsteps::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;border-left:2px dotted #c9d2e0}
.hsteps li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;padding:9px 0}
.hsteps .n{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#14223d;color:#fff;font:800 15px/1 var(--font-head);transition:background-color .3s,color .3s,transform .4s var(--ease-out)}
.hsteps li:hover .n{background:#fba412;color:#14223d;transform:scale(1.06)}
.hsteps b{display:block;padding-top:1px;font:700 1.02rem/1.35 var(--font-head);color:#14223d}
.hsteps p{margin-top:2px;font-size:14.5px;line-height:1.55;color:var(--text)}
.motion .hsteps.rv-in .n{animation:stepLit 1s var(--ease-out) backwards;animation-delay:calc(.3s + var(--i,0)*.25s)}
@keyframes stepLit{0%{background:#fff;color:#14223d;box-shadow:inset 0 0 0 1.5px #dde3ec}45%{background:#fba412;color:#14223d;transform:scale(1.1);box-shadow:none}}
@media (max-width:900px){.howto{grid-template-columns:minmax(0,1fr)}.howto .vid{order:2}}


/* ---------- System pages drawn from the Systems builder (assets/js/system.js) ---------- */
#sys[aria-busy="true"] .hs-vis{display:block}
#sys[aria-busy="true"] .sk-t{margin-top:14px}
.shot-plain{max-width:560px;margin-left:auto;border:1px solid #e3e8f1}
.shot-plain img{background:#fff}
.sys-note{display:flex;align-items:flex-start;gap:8px;max-width:520px;margin-top:18px;font-size:13.5px;line-height:1.55;color:var(--text)}
.sys-note .ic{flex:none;width:16px;height:16px;margin-top:2px;color:#13805a}
.sys-note a{color:#14223d;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sys-draft{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 13px;border-radius:999px;background:#fff1d6;color:#5c3a00;font-size:13px;font-weight:600;line-height:1.4}
.sys-draft .ic{flex:none;width:16px;height:16px}
@media (max-width:900px){.shot-plain{margin-left:0;max-width:none}}
.sys-own{display:flex;align-items:flex-start;gap:8px;max-width:520px;margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--text)}
.sys-own .ic{flex:none;width:16px;height:16px;margin-top:2px;color:#13805a}