/* =====================================================================
   JR Softz Projects Archive - styles
   Material 3 adaptive shell (floating app bar, side drawer, row list).
   Per-project pages re-seed the colour roles from one hue: html[data-proj] + --h.
   ===================================================================== */
/* Layout: Material 3 adaptive shell. Compact (<840px): modal drawer. Expanded (>=840px): permanent drawer on the start side. Seed: deep teal. */
:root{
  --primary:#3053a4; --on-primary:#ffffff; --primary-container:#dae2ff; --on-primary-container:#001847;
  --secondary-container:#dce2f9; --on-secondary-container:#151b2c;
  --surface:#f9f9ff; --sc-lowest:#ffffff; --sc-low:#f3f3fa; --sc:#edeef4; --sc-high:#e7e8ee; --sc-highest:#e2e2e9;
  --on-surface:#191b20; --on-surface-variant:#44474f; --outline:#74777f; --outline-variant:#c4c6d0;
  --error:#ba1a1a; --error-container:#ffdad6; --on-error-container:#410002;
  --inverse-surface:#2e3036; --inverse-on-surface:#f0f0f7; --inverse-primary:#b1c5ff;
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --shadow-3:0 1px 3px rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15);
  --display:"Noto Kufi Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --primary:#b1c5ff; --on-primary:#002c71; --primary-container:#1f438f; --on-primary-container:#dae2ff;
  --secondary-container:#3f4759; --on-secondary-container:#dce2f9;
  --surface:#111318; --sc-lowest:#0c0e13; --sc-low:#191b20; --sc:#1d2024; --sc-high:#282a2f; --sc-highest:#33353a;
  --on-surface:#e2e2e9; --on-surface-variant:#c4c6d0; --outline:#8e9099; --outline-variant:#44474f;
  --error:#ffb4ab; --error-container:#93000a; --on-error-container:#ffdad6;
  --inverse-surface:#e2e2e9; --inverse-on-surface:#2e3036; --inverse-primary:#3053a4;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --primary:#b1c5ff; --on-primary:#002c71; --primary-container:#1f438f; --on-primary-container:#dae2ff;
  --secondary-container:#3f4759; --on-secondary-container:#dce2f9;
  --surface:#111318; --sc-lowest:#0c0e13; --sc-low:#191b20; --sc:#1d2024; --sc-high:#282a2f; --sc-highest:#33353a;
  --on-surface:#e2e2e9; --on-surface-variant:#c4c6d0; --outline:#8e9099; --outline-variant:#44474f;
  --error:#ffb4ab; --error-container:#93000a; --on-error-container:#ffdad6;
  --inverse-surface:#e2e2e9; --inverse-on-surface:#2e3036; --inverse-primary:#3053a4;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--surface);color:var(--on-surface);font:400 14px/1.5 var(--font);-webkit-text-size-adjust:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.muted{color:var(--on-surface-variant)}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* password gate */
body.locked .appbar, body.locked .shell, body.locked .selbar{display:none}
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--surface)}
.gate-card{width:min(400px,100%);display:flex;flex-direction:column;gap:16px;background:var(--sc-low);border-radius:28px;padding:32px 24px}
.gate-card h1{margin:0;font:500 28px/36px var(--font);text-align:center}
.gate-logo{width:96px;height:96px;align-self:center}
.gate-card>p{text-align:center}
.gate-card p{margin:0;color:var(--on-surface-variant)}
.gate-card .btn{align-self:flex-end}

/* top app bar */
.appbar{position:sticky;top:0;z-index:20;background:var(--surface);display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;
  padding-block:8px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));min-height:64px}
.appbar h1{margin:0;font:500 22px/28px var(--font);white-space:nowrap}
.appbar .grow{flex:1}
.search{order:3;flex:1 1 100%;display:flex;align-items:center;gap:4px;height:48px;border-radius:999px;background:var(--sc-high);padding-inline:12px 4px}
.search:focus-within{box-shadow:0 0 0 2px var(--primary)}
.search input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0;font-size:16px}
.search input::placeholder{color:var(--on-surface-variant)}
.search input::-webkit-search-cancel-button{display:none}
.ib{position:relative;width:40px;height:40px;border-radius:50%;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--on-surface-variant);text-decoration:none;flex:none}
.ib::before,.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;transition:opacity .15s}
.ib:hover::before,.btn:hover::before{opacity:.08}
.ib:active::before,.btn:active::before{opacity:.12}
.ib[disabled]{opacity:.38;cursor:default}
.ib.on{color:var(--primary)}
@media (min-width:600px){
  .search{order:0;flex:1 1 auto;max-width:640px;margin-inline:16px auto}
  .appbar .grow{display:none}
}
.menu-btn{display:inline-flex}
@media (min-width:840px){.menu-btn{display:none}}

/* shell */
.shell{display:grid;grid-template-columns:minmax(0,1fr)}
.drawer{background:var(--sc-low);display:flex;flex-direction:column;gap:2px;padding:12px;overflow-y:auto;
  position:fixed;z-index:40;inset-block:0;inset-inline-start:0;width:min(330px,88vw);transform:translateX(100%);visibility:hidden;
  border-radius:0 16px 16px 0;border-radius:16px 0 0 16px;transition:transform .25s cubic-bezier(.2,0,0,1),visibility .25s;
  padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
.drawer.open{transform:none;visibility:visible;box-shadow:var(--shadow-3)}
.scrim{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
@media (min-width:840px){
  .shell{grid-template-columns:300px minmax(0,1fr)}
  .drawer{position:sticky;top:64px;height:calc(100dvh - 64px);width:auto;transform:none;visibility:visible;border-radius:0 16px 0 0;background:transparent;box-shadow:none;padding-top:8px;z-index:1}
  .scrim{display:none}
  .drawer .dhead{display:none}
}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:4px 12px 8px;font:500 14px var(--font);color:var(--on-surface-variant)}
.dsec{padding:16px 16px 8px;font:500 12px var(--font);color:var(--on-surface-variant);letter-spacing:.04em}
.nav{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 16px;border:0;border-radius:999px;background:transparent;text-align:start;position:relative;color:var(--on-surface-variant);font:500 14px var(--font)}
.nav:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent)}
.nav.act{background:var(--secondary-container);color:var(--on-secondary-container)}
.nav .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav .n{font:500 12px var(--font);font-variant-numeric:tabular-nums}
.logo{width:32px;height:32px;margin-inline-end:4px;flex:none}
.dlinks{margin-top:auto;padding-top:12px;border-top:1px solid var(--outline-variant);display:flex;flex-direction:column;gap:2px}
.dlinks a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px;border-radius:999px;color:var(--on-surface-variant);text-decoration:none;font:500 13px var(--font)}
.dlinks a:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent)}
.dlinks svg.i{width:20px;height:20px}

/* content */
.content{padding-block:8px 140px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));min-width:0}
.banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--primary-container);color:var(--on-primary-container);border-radius:16px;padding:16px 20px;margin-bottom:16px}
.banner .tx{flex:1 1 260px;min-width:0}
.banner b{display:block;font:600 16px var(--font);margin-bottom:2px}
.banner.err{background:var(--error-container);color:var(--on-error-container)}
.banner.ok{background:var(--sc-high);color:var(--on-surface)}
.banner.ok{padding:8px 8px 8px 16px;border-radius:999px}
.banner.ok .tx{font-size:13px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 24px;border-radius:999px;border:0;font:500 14px var(--font);background:var(--primary);color:var(--on-primary);white-space:nowrap;text-decoration:none;flex:none}
.btn svg.i{width:18px;height:18px}
.btn.tonal{background:var(--secondary-container);color:var(--on-secondary-container);padding:0 16px}
.btn.text{background:transparent;color:var(--primary);padding:0 12px}
.btn.outline{background:transparent;color:var(--primary);border:1px solid var(--outline)}
.btn.inv{background:transparent;color:var(--inverse-primary);padding:0 12px}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--outline);background:transparent;color:var(--on-surface-variant);font:500 14px var(--font)}
.chip:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent)}
.chip[aria-pressed="true"]{background:var(--secondary-container);color:var(--on-secondary-container);border-color:transparent}
.chip svg.i{width:18px;height:18px;display:none}
.chip[aria-pressed="true"] svg.i{display:block}
.chip .c{font-variant-numeric:tabular-nums;opacity:.8}
.toolbar .sp{flex:1}
.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.count{font:500 13px var(--font);color:var(--on-surface-variant)}
.heading{font:500 24px/32px var(--font);margin:4px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border-radius:12px;background:var(--sc-lowest);border:1px solid var(--outline-variant);transition:background .15s,border-color .15s}
.card:hover{background:var(--sc-low)}
.desc{min-height:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo,:root:not([data-theme="light"]) .gate-logo{background:#f9f9ff;border-radius:8px;padding:2px}}
:root[data-theme="dark"] .logo,:root[data-theme="dark"] .gate-logo{background:#f9f9ff;border-radius:8px;padding:2px}
.card.sel{background:color-mix(in srgb,var(--primary-container) 55%,var(--sc-lowest));border-color:var(--primary)}
.card-top{display:flex;align-items:center;gap:8px;min-width:0}
.slug{margin:0;font:500 15px/22px var(--mono);overflow-wrap:anywhere;min-width:0;flex:1}
.why{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:8px;background:var(--secondary-container);color:var(--on-secondary-container);margin-inline-end:6px;vertical-align:1px}
.en{margin:6px 0 0;font-size:12px;color:var(--on-surface-variant);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desc{margin:0;color:var(--on-surface-variant);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:63px}
.card-foot{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.tag{font:500 12px var(--font);color:var(--on-surface-variant);background:var(--sc);padding:2px 10px;border-radius:8px;margin-inline-end:auto}
.sbadge{display:inline-flex;align-items:center;gap:4px;max-width:100%;font:600 11.5px var(--font);color:var(--on-primary-container);background:var(--primary-container);border:0;border-radius:8px;padding:3px 9px;margin-bottom:2px;cursor:pointer}
.sbadge .i{width:14px;height:14px}
.sbadge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suitebar{margin:0 0 16px;padding:16px;border-radius:16px;background:var(--sc);border:1px solid var(--outline-variant);display:grid;gap:10px}
.suitebar h3{margin:0;font:700 16px var(--font);display:flex;align-items:center;gap:8px}
.suitebar p{margin:0;color:var(--on-surface-variant);font:400 13.5px/1.7 var(--font)}
.suitebar .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.suitebar .miss{font:500 12.5px var(--font);color:var(--on-surface-variant)}

.acts{display:flex;align-items:center;gap:0}
.card .ib{width:36px;height:36px}
.card .ib svg.i{width:20px;height:20px}
.cb{position:relative;width:40px;height:40px;margin:-8px;margin-inline-end:0;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.cb input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cb span{width:18px;height:18px;border:2px solid var(--on-surface-variant);border-radius:2px;display:block;position:relative}
.cb input:checked + span{background:var(--primary);border-color:var(--primary)}
.cb input:checked + span::after{content:"";position:absolute;left:3px;top:0;width:5px;height:10px;border:solid var(--on-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cb input:focus-visible + span{outline:2px solid var(--primary);outline-offset:3px}
.more{display:flex;justify-content:center;margin-top:20px}
.empty{text-align:center;padding:64px 16px;color:var(--on-surface-variant)}
.empty b{display:block;font:500 18px var(--font);color:var(--on-surface);margin-bottom:4px}

/* selection bar + snackbar */
.selbar{position:fixed;z-index:25;inset-inline:0;margin-inline:auto;width:min(600px,calc(100% - 32px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-radius:16px;background:var(--inverse-surface);color:var(--inverse-on-surface);box-shadow:var(--shadow-3)}
.selbar .t{flex:1;min-width:0;font:500 14px var(--font)}
.selbar .btn{background:var(--inverse-primary);color:var(--inverse-surface)}
.selbar .btn.inv{background:transparent;color:var(--inverse-primary)}
.snack{position:fixed;z-index:60;inset-inline:0;margin-inline:auto;width:min(480px,calc(100% - 32px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  background:var(--inverse-surface);color:var(--inverse-on-surface);border-radius:4px;padding:14px 16px;box-shadow:var(--shadow-3);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}
.snack.on{opacity:1;transform:none}
body.has-sel .snack{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 72px)}

/* dialogs */
dialog{border:0;padding:0;border-radius:28px;background:var(--sc-high);color:var(--on-surface);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);box-shadow:var(--shadow-3)}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog[open]{display:flex;flex-direction:column}
dialog.wide{width:min(760px,calc(100vw - 32px))}
.dl-h{padding:24px 24px 0}
.dl-h h2{margin:0;font:500 24px/32px var(--font)}
.dl-h p{margin:8px 0 0;color:var(--on-surface-variant)}
.dl-b{padding:16px 24px;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:16px}
.dl-f{display:flex;justify-content:flex-end;gap:8px;padding:0 24px 24px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:500 12px var(--font);color:var(--on-surface-variant)}
.field input{height:56px;border-radius:4px;border:1px solid var(--outline);background:transparent;padding:0 16px;font:400 16px var(--mono);direction:ltr;text-align:left}
.field input:focus{outline:2px solid var(--primary);outline-offset:-2px;border-color:var(--primary)}
.steps{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;color:var(--on-surface-variant)}
.steps a{color:var(--primary)}
.seg{display:flex;border:1px solid var(--outline);border-radius:999px;overflow:hidden}
.seg button{flex:1;min-height:40px;border:0;background:transparent;padding:6px 12px;font:500 13px var(--font);color:var(--on-surface)}
.seg button+button{border-inline-start:1px solid var(--outline)}
.seg button[aria-pressed="true"]{background:var(--secondary-container);color:var(--on-secondary-container)}
.note{font-size:13px;color:var(--on-surface-variant);margin:0}
pre.src{margin:0;background:var(--sc-lowest);border:1px solid var(--outline-variant);border-radius:12px;padding:16px;overflow:auto;max-height:50dvh;font:400 12.5px/1.65 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left}
.bar{height:4px;border-radius:2px;background:var(--secondary-container);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--primary);transition:width .2s}
.bar.ind i{width:40%;animation:ind 1.2s infinite ease-in-out}
@keyframes ind{0%{margin-inline-start:-40%}100%{margin-inline-start:100%}}
.logs{font-size:12px;color:var(--error);margin:0;padding-inline-start:18px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- mobile polish ---- */
.appbar h1{min-width:0;overflow:hidden;text-overflow:ellipsis}
.appbar .logo{border-radius:6px}
.gate{overflow-y:auto;align-items:safe center;min-height:100dvh;padding-block:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-bottom,0px))}
.gate input{font-size:16px}
@media (max-width:599px){
  .appbar{gap:2px 4px;padding-inline:max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px))}
  .appbar h1{font-size:19px;line-height:24px;flex:0 1 auto}
  .appbar .logo{width:28px;height:28px}
  .ib{width:44px;height:44px}
  .card .ib{width:44px;height:44px}
  .search{height:44px}
  .chips{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:2px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .chips::-webkit-scrollbar{display:none}
  .chips .chip{flex:none;height:40px;padding:0 14px}
  .toolbar .btn.text{min-height:44px}
  .desc{min-height:0}
  .card{padding:14px}
  .banner{padding:12px 16px;gap:8px}
  .banner.err{border-radius:12px}
  .heading{font-size:22px;line-height:28px}
  .gate-card{padding:24px 20px;border-radius:24px}
  dialog{width:calc(100vw - 24px);border-radius:24px}
}

/* ---- identity: blue = business, ink = tech ---- */
:root{--g-biz:var(--primary);--g-tech:var(--on-surface)}
.appbar h1,.heading,.gate-card h1,.hero-t,dialog h2{font-family:var(--display);letter-spacing:0}
.appbar h1{font-weight:700}
.hero{margin:4px 0 20px}
.hero-t{margin:0;font:700 clamp(18px,2.4vw,24px)/1.5 var(--display)}
.hero-t span{font-weight:500;color:var(--on-surface-variant)}
.hero-t #heroN,.hero-t #heroC{font-weight:700;color:var(--on-surface)}
.chip[data-view="biz"],.chip[data-view="tech"]{display:none}
.split{display:flex;gap:4px;height:16px;margin-top:12px}
.mix{border:0;padding:0;height:100%;min-width:8px;cursor:pointer;transition:flex-grow .45s cubic-bezier(.2,.8,.2,1),opacity .2s;position:relative}
.mix::after{content:"";position:absolute;inset:-14px 0}
.mix.b{background:var(--g-biz);border-radius:4px 10px 4px 4px}
.mix.t{background:var(--g-tech);border-radius:10px 4px 4px 4px}
.split[data-v="biz"] .seg.t,.split[data-v="tech"] .mix.b{opacity:.22}
.split-l{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px;color:var(--on-surface-variant)}
.split-l b{font-weight:600;color:var(--on-surface);font-variant-numeric:tabular-nums}
.split-l span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:6px;background:var(--g-biz)}
.split-l span+span::before{background:var(--g-tech)}
/* rows instead of identical cards */
.grid{grid-template-columns:1fr;gap:0;column-gap:40px}
@media (min-width:1100px){.grid{grid-template-columns:1fr 1fr}}
.card{background:transparent;border:0;border-radius:0;border-bottom:1px solid var(--outline-variant);border-inline-start:3px solid var(--g-biz);padding:16px 16px 14px;box-shadow:none}
.card[data-g="t"]{border-inline-start-color:var(--g-tech)}
.card:hover{background:var(--sc-low)}
.card.sel{background:color-mix(in srgb,var(--primary-container) 55%,transparent)}
.tag{background:transparent;padding:0;font-size:12px;color:var(--on-surface-variant)}

/* ---- polish: floating bar, hairline icons, haptic controls ---- */
:root{--ease:cubic-bezier(.32,.72,0,1);--tint:rgba(48,83,164,.28)}
.appbar{top:8px;margin:8px 12px 0;border-radius:28px;min-height:56px;padding-inline:max(10px,env(safe-area-inset-left,0px)) max(10px,env(safe-area-inset-right,0px));
  background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--outline-variant) 80%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 60%,transparent),0 10px 28px -14px var(--tint)}
@media (min-width:840px){.drawer{top:80px;height:calc(100dvh - 80px)}}
.search{background:color-mix(in srgb,var(--sc-high) 85%,transparent);transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.search:focus-within{background:var(--sc-lowest);box-shadow:0 0 0 2px var(--primary),0 8px 20px -10px var(--tint)}
.kbd{display:none;font:500 11px var(--mono);padding:2px 7px;border-radius:6px;border:1px solid var(--outline-variant);color:var(--on-surface-variant);margin-inline-end:8px}
@media (min-width:840px) and (pointer:fine){.kbd{display:inline-block}.search:focus-within .kbd{display:none}}
.ib,.btn,.chip,.nav,.seg,.card{transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),color .2s,opacity .2s}
.ib:active,.btn:active,.chip:active{transform:scale(.96)}
.card .btn.tonal{padding-inline-start:6px;gap:8px}
.card .btn.tonal svg.i{width:28px;height:28px;padding:6px;border-radius:50%;background:color-mix(in srgb,var(--primary) 16%,transparent);transition:transform .35s var(--ease)}
.card .btn.tonal:hover svg.i{transform:translateY(2px)}
.menu-btn svg path{transition:transform .45s var(--ease),opacity .25s;transform-box:fill-box;transform-origin:center}
.menu-btn[aria-expanded="true"] .m1{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .m2{opacity:0}
.menu-btn[aria-expanded="true"] .m3{transform:translateY(-5px) rotate(-45deg) scaleX(1.5)}
.drawer{transition:transform .5s var(--ease),visibility .5s}
.scrim{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.card{will-change:auto}
.card.in{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.desc,.hero-t,.empty{text-wrap:pretty}
.heading,.empty b{text-wrap:balance}
.selbar{border-radius:999px;padding:6px 8px 6px 20px;box-shadow:0 18px 40px -16px rgba(20,30,70,.55),inset 0 1px 0 rgba(255,255,255,.12)}
.selbar .btn{border-radius:999px}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:48px 16px}
.empty svg.i{width:40px;height:40px;color:var(--primary);opacity:.8;stroke-width:1.25}
.empty .btn{margin-top:4px}
@media (max-width:599px){.appbar{margin:6px 8px 0;top:6px;border-radius:24px}}

/* ---- mobile hardening (real-device report) ---- */
html,body{max-width:100%;overflow-x:clip}
.shell,.content,.grid,.card,.toolbar{min-width:0}
@media (max-width:679px){
  .appbar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:6px 4px;width:auto;max-width:calc(100% - 16px);box-sizing:border-box;overflow:hidden}
  .appbar>.grow{display:none}
  .appbar>h1{grid-column:3;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(15px,5vw,19px)}
  .appbar>.search{grid-column:1/-1;grid-row:2;order:0;width:100%;max-width:none;margin:0;min-width:0;box-sizing:border-box}
  .search input{width:100%}
  .chips .chip{scroll-snap-align:start}
}
.keep{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--on-surface-variant);min-height:44px;cursor:pointer}.keep input{width:20px;height:20px;accent-color:var(--primary)}
@media (pointer:coarse){.chip{min-height:40px}.nav{min-height:48px}}

/* ================= projects archive: additions on the skills-library shell ================= */
:root{
  --acc:var(--primary);--acc-ink:var(--on-primary);--ink:var(--on-surface);--ink2:var(--on-surface-variant);--mute:var(--outline);
  --good:#2f7d5b;--warn:#a2641b;--crit:var(--error);
  --good-soft:rgba(47,125,91,.13);--warn-soft:rgba(162,100,27,.14);--crit-soft:var(--error-container);
  --ec:oklch(.92 .04 var(--eh,230));--ef:oklch(.42 .12 var(--eh,230));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--good:#6fc29a;--warn:#d9a35c;--good-soft:rgba(111,194,154,.14);--warn-soft:rgba(217,163,92,.15);--ec:oklch(.34 .06 var(--eh,230));--ef:oklch(.84 .09 var(--eh,230))}}
:root[data-theme="dark"]{--good:#6fc29a;--warn:#d9a35c;--good-soft:rgba(111,194,154,.14);--warn-soft:rgba(217,163,92,.15);--ec:oklch(.34 .06 var(--eh,230));--ef:oklch(.84 .09 var(--eh,230))}

/* each project page re-seeds the same Material roles from its own hue */
:root[data-proj]{--primary:oklch(.46 .12 var(--h));--on-primary:#fff;--primary-container:oklch(.91 .05 var(--h));--on-primary-container:oklch(.25 .08 var(--h));
  --secondary-container:oklch(.92 .025 var(--h));--on-secondary-container:oklch(.24 .04 var(--h));--inverse-primary:oklch(.8 .09 var(--h));--tint:oklch(.5 .12 var(--h) / .28)}
@media (prefers-color-scheme:dark){:root[data-proj]:not([data-theme="light"]){--primary:oklch(.8 .09 var(--h));--on-primary:oklch(.26 .07 var(--h));--primary-container:oklch(.36 .09 var(--h));--on-primary-container:oklch(.92 .04 var(--h));
  --secondary-container:oklch(.33 .03 var(--h));--on-secondary-container:oklch(.92 .02 var(--h));--inverse-primary:oklch(.45 .12 var(--h))}}
:root[data-proj][data-theme="dark"]{--primary:oklch(.8 .09 var(--h));--on-primary:oklch(.26 .07 var(--h));--primary-container:oklch(.36 .09 var(--h));--on-primary-container:oklch(.92 .04 var(--h));
  --secondary-container:oklch(.33 .03 var(--h));--on-secondary-container:oklch(.92 .02 var(--h));--inverse-primary:oklch(.45 .12 var(--h))}
body{transition:background-color .5s var(--ease,ease)}
.content{padding-block:8px 72px}
.i.s{width:18px;height:18px}.i.l{width:22px;height:22px}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}

/* app bar: back link replaces the search field inside a project */
.search.backlink{text-decoration:none;color:var(--on-surface-variant);font:500 14px var(--font);gap:10px;padding-inline:16px;cursor:pointer}
.search.backlink:hover{color:var(--primary)}
.search.backlink .sp2{flex:1}
.search.backlink small{font:500 12px var(--mono);color:var(--outline)}

/* library rows */
.card .top{display:flex;align-items:flex-start;gap:12px}
.card .tt{flex:1;min-width:0}
.emb{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--ec);color:var(--ef)}
.pt{margin:0;font:600 17px/1.55 var(--display);text-wrap:balance}
.pt a{color:inherit;text-decoration:none}
.pt a:hover{color:var(--primary)}
.pslug{display:block;margin-top:2px;font:400 12px var(--mono);color:var(--on-surface-variant);direction:ltr;text-align:right}
.bs{display:flex;gap:6px;flex-wrap:wrap}
.sb{display:inline-flex;align-items:center;gap:4px;font:600 11.5px var(--font);padding:3px 9px;border-radius:8px;background:var(--primary-container);color:var(--on-primary-container);white-space:nowrap}
.sb.warn{background:var(--warn-soft);color:var(--warn)}
.sb.crit{background:var(--crit-soft);color:var(--crit)}
.sb.good{background:var(--good-soft);color:var(--good)}
.sb.plain{background:var(--sc);color:var(--on-surface-variant)}
.mods{display:flex;gap:6px;flex-wrap:wrap}
.mt{font:500 12px var(--font);color:var(--on-surface-variant);background:var(--sc);padding:2px 10px;border-radius:8px}
.card-foot .lf{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin-inline-end:auto}
.card-foot .lf .tag{margin:0}
.meta{display:inline-flex;gap:12px;align-items:center;font:500 12px var(--font);color:var(--on-surface-variant)}
.meta span{display:inline-flex;align-items:center;gap:4px}
.meta .i{width:16px;height:16px}
.card[data-g="b"]{border-inline-start-color:var(--primary)}
a.btn{text-decoration:none}
.card .btn.tonal{padding-inline-start:6px}

/* drawer: project header */
.dproj{display:flex;align-items:center;gap:12px;padding:8px 12px 4px}
.dproj b{display:block;font:600 15px/1.5 var(--display)}
.dproj small{display:block;color:var(--on-surface-variant);font-size:12px}
a.nav{text-decoration:none}
.nav .emb{width:28px;height:28px;border-radius:9px}
.nav .emb .i{width:16px;height:16px}

/* project view */
.phero{display:grid;gap:20px;margin:4px 0 18px}
@media (min-width:960px){.phero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}}
.ptitle{margin:10px 0 2px;font:700 clamp(24px,3.4vw,36px)/1.4 var(--display);text-wrap:balance}
.lead{margin:12px 0 16px;font-size:16px;line-height:1.85;color:var(--on-surface-variant);max-width:60ch;text-wrap:pretty}
.pbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.sig{border-radius:24px;background:var(--sc-low);box-shadow:inset 0 0 0 1px var(--outline-variant),inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent);padding:20px;display:grid;place-items:center;min-height:220px;animation:rise .7s var(--ease) both .1s}
.sig svg{width:100%;max-width:420px;height:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-block:1px solid var(--outline-variant);margin:0 0 20px}
.stat{padding:14px 16px;border-inline-start:1px solid var(--outline-variant)}
.stat:first-child{border-inline-start:0}
.stat b{display:block;font:700 26px/1.3 var(--display);color:var(--primary);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:12.5px;color:var(--on-surface-variant);line-height:1.5}
.secchips{margin-bottom:16px}
@media (min-width:840px){.secchips{display:none}}
.secchips .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.secchips .chips::-webkit-scrollbar{display:none}
.secchips .chip{flex:none}
.secchips .chip svg.i{display:block}
.pcols{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.pb{grid-column:span var(--s,6);min-width:0;background:var(--sc-lowest);border:1px solid var(--outline-variant);border-radius:20px;padding:20px 22px;animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0)*50ms)}
.pb h3{margin:0 0 12px;font:600 17px var(--display);display:flex;align-items:center;gap:10px}
.pb h3 .i{color:var(--primary);width:22px;height:22px}
.pb p{margin:0;color:var(--on-surface-variant);line-height:1.85;text-wrap:pretty}
.pb p+p{margin-top:10px}
@media (max-width:899px){.pb{grid-column:1/-1!important}}
ul.pl{list-style:none;margin:0;padding:0;display:grid;gap:9px}
ul.pl li{display:flex;gap:10px;color:var(--on-surface-variant);line-height:1.75}
ul.pl li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-top:.75em}
ul.pl.x li::before{background:var(--outline)}
.callout{display:flex;gap:12px;padding:14px 16px;border-radius:16px;background:var(--primary-container);color:var(--on-primary-container);font-size:14px;line-height:1.75;margin-top:14px}
.callout.warn{background:var(--warn-soft);color:var(--warn)}
.callout.crit{background:var(--crit-soft);color:var(--crit)}
.callout.good{background:var(--good-soft);color:var(--good)}
.callout .i{margin-top:2px}
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.role{padding:16px 18px;border-radius:16px;background:var(--sc-lowest);border:1px solid var(--outline-variant);border-inline-start:3px solid var(--primary);animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
.role b{display:flex;gap:8px;align-items:center;font:600 15px var(--display);margin-bottom:4px}
.role b .i{color:var(--primary);width:18px;height:18px}
.role p{margin:0;font-size:14px;color:var(--on-surface-variant);line-height:1.75}
ol.flow{list-style:none;margin:0;padding:0;counter-reset:s}
ol.flow li{counter-increment:s;position:relative;padding:0 48px 18px 0;color:var(--on-surface-variant);min-height:44px;line-height:1.75}
ol.flow li::before{content:counter(s);position:absolute;right:0;top:0;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--primary-container);color:var(--on-primary-container);font:500 13px var(--mono)}
ol.flow li::after{content:"";position:absolute;right:15px;top:36px;bottom:2px;width:1px;background:var(--outline-variant)}
ol.flow li:last-child{padding-bottom:0}ol.flow li:last-child::after{display:none}
.mchips{display:flex;gap:8px;flex-wrap:wrap}
.mchip{padding:6px 12px;border-radius:10px;background:var(--sc);font-size:13.5px;color:var(--on-surface-variant)}
.mchip code{font:500 11.5px var(--mono);color:var(--primary);margin-inline-end:8px;direction:ltr;unicode-bidi:isolate;display:inline-block}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:start;padding:10px 6px;border-bottom:1px solid var(--outline-variant);vertical-align:top;line-height:1.7}
.tbl th{width:30%;color:var(--on-surface-variant);font-weight:500}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.rk{display:grid;gap:8px}
.rk div{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--sc-low);line-height:1.7;font-size:14px;color:var(--on-surface-variant)}
.rk code{font:500 11.5px var(--mono);padding:2px 8px;border-radius:8px;background:var(--crit-soft);color:var(--crit);flex:none;margin-top:3px;direction:ltr}
.rk.d code{background:var(--warn-soft);color:var(--warn)}
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:14px}
.doc{padding:14px 16px;border-radius:14px;background:var(--sc-low);border:1px solid var(--outline-variant);display:flex;flex-direction:column;gap:6px}
.doc .i{color:var(--primary)}
.doc code{font:600 12.5px var(--mono);direction:ltr;text-align:right}
.doc span.n{font-size:13px;color:var(--on-surface-variant)}
.doc .bs{margin-top:auto}
.np{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.np a{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:16px;border:1px solid var(--outline-variant);text-decoration:none;color:inherit;transition:background .35s var(--ease),border-color .35s var(--ease)}
.np a:hover{background:var(--sc-low);border-color:var(--primary)}
.np small{color:var(--on-surface-variant);font-size:12px}
.np b{font:600 15px var(--display)}
.pfoot{margin-top:28px;padding-top:14px;border-top:1px solid var(--outline-variant);color:var(--on-surface-variant);font-size:12.5px}
dialog .stats{margin:0}
@media (max-width:599px){.np{grid-template-columns:1fr}.pb{padding:18px 16px}}

.sig svg{direction:ltr}
#secHead{scroll-margin-top:92px}
.desc{min-height:0}

.srcref{font:500 11px var(--mono);color:var(--outline);margin-inline:3px;direction:ltr;unicode-bidi:isolate;display:inline-block}
.mdh{margin:14px 0 6px;font:600 15px var(--display)}
.card[data-g="u"]{border-inline-start-color:var(--outline)}
#sync{margin-bottom:12px}
#sync .tx{font-size:13px}
.pb table.tbl{margin-top:6px}

.tscroll{overflow-x:auto}
.dtbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px}
.dtbl th,.dtbl td{padding:10px 8px;border-bottom:1px solid var(--outline-variant);text-align:start;vertical-align:middle}
.dtbl thead th{color:var(--on-surface-variant);font-weight:500;font-size:12.5px}
.dtbl tbody th{width:36%;font-weight:400}
.dtbl th code{display:block;font:600 12.5px var(--mono);direction:ltr;text-align:right}
.dtbl th span{font-size:12.5px;color:var(--on-surface-variant)}
.dfile{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 12px;border-radius:12px;background:var(--sc);color:var(--on-surface);text-decoration:none;font-size:13px;transition:background .3s var(--ease)}
.dfile:hover{background:var(--primary-container);color:var(--on-primary-container)}
.dfile small{color:var(--on-surface-variant);font-size:11.5px}
.dmiss{font-size:12.5px;color:var(--warn)}