/* Shared components for every page. Colours, spacing and motion come from tokens.css only. */
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0}
body{background:var(--bg);color:var(--tx);font-size:calc(15px*var(--fz));line-height:1.5;font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
a{color:var(--acc-ink)}h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.02em;text-wrap:balance}h1{font-size:clamp(calc(26px*var(--fz)),3.6vw,calc(38px*var(--fz)));line-height:1.15}h2{font-size:calc(20px*var(--fz))}h3{font-size:calc(15px*var(--fz))}
p{max-width:64ch}.mut{color:var(--tx2)}.num{font-variant-numeric:tabular-nums}small{font-size:calc(12px*var(--fz))}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r1)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s3);top:calc(-60px*var(--fz));z-index:100;background:var(--tx);color:var(--tx-inv);padding:var(--s2) var(--s4);border-radius:var(--r2);text-decoration:none}.skip:focus{top:var(--s3)}
ul,ol{list-style:none;padding:0;margin:0}
.ico{width:calc(16px*var(--fz));height:calc(16px*var(--fz));flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);position:relative;min-height:var(--ctl);padding:0 var(--s4);border-radius:var(--r2);border:1px solid var(--bd2);background:var(--bg2);color:var(--tx);font:inherit;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:var(--sh1);
transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--d1) var(--ease)}
.btn:hover{background:var(--bg3);border-color:#c5c1b7}.btn:active{background:var(--bg4);transform:translateY(1px)}
.btn.primary{background:var(--grad);color:var(--tx-inv);border-color:transparent;box-shadow:0 1px 2px rgba(53,85,240,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary:hover{background:var(--grad);filter:brightness(1.07);border-color:transparent}.btn.primary:active{filter:brightness(.95)}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none}.btn.ghost:hover{background:var(--bg4)}
.btn.danger{color:var(--bad)}.btn.danger:hover{background:var(--bad-soft);border-color:#efb3b7}
.btn.sm{min-height:var(--ctl-sm);padding:0 var(--s3);font-size:calc(13px*var(--fz))}.btn.icon{width:var(--ctl-sm);padding:0}.btn.lg{min-height:calc(48px*var(--fz));padding:0 var(--s5);font-size:calc(16px*var(--fz));border-radius:var(--r3)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.btn.loading{pointer-events:none;color:transparent!important}.btn.loading .ico{opacity:0}
.btn.loading::after{content:"";position:absolute;width:calc(16px*var(--fz));height:calc(16px*var(--fz));border-radius:50%;border:2px solid var(--bd2);border-top-color:var(--acc);animation:spin .7s linear infinite}
.btn.primary.loading::after{border-color:rgba(255,255,255,.45);border-top-color:#fff}@keyframes spin{to{transform:rotate(360deg)}}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--acc-ink);text-decoration:underline;cursor:pointer}

/* forms */
label{display:block;font-size:calc(13px*var(--fz));font-weight:500;color:var(--tx2);margin:var(--s3) 0 calc(6px*var(--fz))}
input,select,textarea{width:100%;min-height:var(--ctl);padding:calc(9px*var(--fz)) var(--s3);background:var(--bg2);color:var(--tx);border:1px solid var(--bd2);border-radius:var(--r2);font:inherit;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:#c5c1b7}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input[aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}input:disabled,select:disabled,textarea:disabled{opacity:.55;background:var(--bg3);cursor:not-allowed}textarea{min-height:calc(90px*var(--fz));resize:vertical}
input[type=checkbox],input[type=radio],progress,input[type=range]{accent-color:var(--acc)}
input[type=checkbox],input[type=radio]{width:calc(18px*var(--fz));min-height:calc(18px*var(--fz));height:calc(18px*var(--fz));padding:0;flex:none}
input[type=color]{padding:2px;cursor:pointer}
progress{appearance:none;-webkit-appearance:none;height:calc(6px*var(--fz));border:0;border-radius:calc(99px*var(--fz));background:var(--bg4);overflow:hidden;width:100%}
progress::-webkit-progress-bar{background:var(--bg4)}progress::-webkit-progress-value{background:var(--grad);border-radius:calc(99px*var(--fz));transition:width var(--d3) var(--ease)}progress::-moz-progress-bar{background:var(--acc)}
.msg{min-height:calc(20px*var(--fz));font-size:calc(13px*var(--fz));color:var(--tx2);margin-top:calc(10px*var(--fz))}.msg.bad{color:var(--bad)}.msg.good{color:var(--ok)}
.hint{font-size:calc(12px*var(--fz));color:var(--tx3);margin:calc(6px*var(--fz)) 0 0}

/* surfaces */
.card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r3);padding:var(--s5);box-shadow:var(--sh1)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(250px*var(--fz)),1fr));gap:var(--s4)}
.empty{border:1px dashed var(--bd2);border-radius:var(--r3);padding:var(--s6) var(--s5);text-align:center;color:var(--tx2);display:grid;gap:var(--s2);justify-items:center;background:var(--bg2)}.empty p{margin:0}.empty h3{color:var(--tx)}
.skel{height:calc(200px*var(--fz));border-radius:var(--r3);background:linear-gradient(90deg,var(--bg3),var(--bg4),var(--bg3));background-size:200% 100%;animation:sk 1.4s linear infinite}@keyframes sk{to{background-position:-200% 0}}
.enter{animation:in var(--d3) var(--ease) both}@keyframes in{from{opacity:0;transform:translateY(6px)}}

/* status chips: always an icon/shape + text, never colour alone */
.chip{display:inline-flex;align-items:center;gap:calc(5px*var(--fz));height:calc(22px*var(--fz));padding:0 calc(8px*var(--fz));border-radius:calc(99px*var(--fz));font-size:calc(12px*var(--fz));font-weight:500;background:var(--bg4);color:var(--tx2);white-space:nowrap}
.chip .ico{width:calc(12px*var(--fz));height:calc(12px*var(--fz));stroke-width:2.2}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.bad{background:var(--bad-soft);color:var(--bad)}.chip.acc{background:var(--acc-soft);color:var(--acc-ink)}
.chip.busy .ico{animation:spin 1s linear infinite}

/* segmented control (radio group styled as buttons) */
.seg{display:inline-flex;padding:calc(3px*var(--fz));gap:2px;background:var(--bg4);border-radius:var(--r2)}
.seg label{margin:0;position:relative;font-size:calc(13px*var(--fz));color:var(--tx2)}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;gap:calc(6px*var(--fz));min-height:calc(var(--ctl-sm) - 2px);padding:0 var(--s3);border-radius:calc(var(--r2) - calc(3px*var(--fz)));transition:background-color var(--t) var(--ease),color var(--t) var(--ease);cursor:pointer}
.seg input:checked+span{background:var(--bg2);color:var(--tx);box-shadow:var(--sh1);font-weight:600}
.seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:1px}

/* thumbnails */
.th{position:relative;background:var(--bg4) center/cover no-repeat;display:grid;place-items:center;color:var(--tx3);overflow:hidden}
.th .ico{width:calc(22px*var(--fz));height:calc(22px*var(--fz))}

/* overflow menu */
.menu{position:absolute;z-index:var(--z-menu);min-width:calc(200px*var(--fz));background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r2);box-shadow:var(--sh2);padding:calc(4px*var(--fz));animation:in var(--d2) var(--ease) both}
.menu button,.menu a{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:var(--ctl-sm);padding:0 var(--s3);border:0;background:none;border-radius:var(--r1);font:inherit;font-size:calc(13px*var(--fz));color:var(--tx);text-align:left;cursor:pointer;text-decoration:none}
.menu button:hover,.menu a:hover,.menu button:focus-visible,.menu a:focus-visible{background:var(--bg3);outline:none}.menu [aria-disabled=true]{opacity:.45;cursor:not-allowed}.menu hr{border:0;border-top:1px solid var(--bd);margin:calc(4px*var(--fz)) 0}

/* app shell */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
.side{border-right:1px solid var(--bd);background:var(--bg2);padding:var(--s5) var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s1);position:sticky;top:0;height:100vh;z-index:var(--z-side)}
.brand{display:inline-flex;align-items:center;gap:calc(10px*var(--fz));font-weight:700;letter-spacing:.16em;padding:0 calc(10px*var(--fz)) var(--s4);text-decoration:none;color:var(--tx)}
.brand img{display:block;height:calc(32px*var(--fz));width:auto;flex:none}.brand .brand-sym{display:none;width:auto}.brand .brand-full{width:auto}
.mbar{display:none}
.side a.nav{display:flex;align-items:center;gap:var(--s3);min-height:var(--ctl);padding:0 calc(10px*var(--fz));border-radius:var(--r2);color:var(--tx2);text-decoration:none;font-weight:500;transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.side a.nav:hover{background:var(--bg3);color:var(--tx)}.side a.nav.on{background:var(--acc-soft);color:var(--acc-ink)}
.side .ico{width:calc(18px*var(--fz));height:calc(18px*var(--fz));stroke-width:1.7}.side .sp{flex:1}
.who{text-decoration:none;color:inherit;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) calc(10px*var(--fz));border-top:1px solid var(--bd);margin-top:var(--s2);min-width:0}
.who .av{width:calc(32px*var(--fz));height:calc(32px*var(--fz));border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:600;font-size:calc(13px*var(--fz));flex:none}
.who span{min-width:0;font-size:calc(13px*var(--fz));line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.who small{display:block;color:var(--tx3);overflow:hidden;text-overflow:ellipsis}
.main{padding:var(--s6) clamp(calc(16px*var(--fz)),4vw,calc(56px*var(--fz))) var(--s7);max-width:calc(1240px*var(--fz));width:100%;margin:0 auto}
.bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}

/* project cards */
.pcard{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh1);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.pcard:hover,.pcard:focus-within{border-color:var(--bd2);box-shadow:var(--sh2)}
.pcard .th{aspect-ratio:16/9;width:100%}.pcard.r916 .th,.pcard.r11 .th{aspect-ratio:16/9}
.pcard .th .tag{position:absolute;left:var(--s2);bottom:var(--s2);background:rgba(13,13,18,.72);color:#fff;font-size:calc(11px*var(--fz));padding:2px calc(7px*var(--fz));border-radius:calc(99px*var(--fz))}
.pcard .pb{padding:var(--s3) var(--s4) var(--s4);display:grid;gap:2px}.pcard h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .pm{font-size:calc(12.5px*var(--fz));color:var(--tx2)}
.pcard .pa{display:flex;gap:var(--s2);margin-top:var(--s3);align-items:center}.pcard .pa .btn{flex:1}

/* toasts */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--s5) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--s2);align-items:center;z-index:var(--z-toast);pointer-events:none;width:max-content;max-width:92vw}
.toast{display:flex;align-items:center;gap:var(--s2);background:var(--tx);color:var(--tx-inv);padding:calc(10px*var(--fz)) var(--s4);border-radius:var(--r2);font-size:calc(14px*var(--fz));box-shadow:var(--sh2);animation:in var(--d3) var(--ease) both;transition:opacity 160ms var(--ease-in),transform 160ms var(--ease-in)}.toast.out{opacity:0;transform:translateY(6px)}
.toast .ico{width:calc(16px*var(--fz));height:calc(16px*var(--fz))}.toast.ok .ico{stroke:#7be0aa}.toast.bad .ico{stroke:#ff9aa0}

/* dialogs */
dialog{background:var(--bg2);color:var(--tx);border:1px solid var(--bd2);border-radius:var(--r3);padding:var(--s5);width:min(calc(440px*var(--fz)),calc(100vw - calc(32px*var(--fz))));z-index:var(--z-dlg);box-shadow:var(--sh2);animation:dlg var(--d3) var(--ease)}
dialog::backdrop{background:var(--overlay);animation:fade var(--d3) var(--ease)}
dialog.closing{animation:dlgout 140ms var(--ease-in) forwards}dialog.closing::backdrop{opacity:0;transition:opacity 140ms}
@keyframes dlg{from{opacity:0;transform:scale(.98) translateY(4px)}}@keyframes dlgout{to{opacity:0;transform:scale(.98)}}@keyframes fade{from{opacity:0}}
.dlgacts{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s4);flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.brand-pulse{width:calc(44px*var(--fz));height:calc(44px*var(--fz));animation:bpulse 1.6s var(--ease) infinite}@keyframes bpulse{50%{opacity:.45;transform:scale(.94)}}
.empty .brand-mark{width:calc(44px*var(--fz));height:calc(44px*var(--fz))}
@media(max-width:359px){.brand .brand-full{display:none}.brand .brand-sym{display:block}}