/* Design tokens: same names and values as docs/mockups/login.html and docs/mockups/shell.html (approved 2026-10-10). */
:root{
  --bg:#f4f6f8; --surface:#fff; --surface-2:#eceff3; --border:#cfd5dd;
  --text:#18202b; --text-2:#4d5967; --primary:#1d5fd0; --on-primary:#fff;
  --danger:#b3261e; --danger-bg:#fdecea; --warn:#8a5a00; --warn-bg:#fff3d6;
  --ok:#1b7a3d; --focus:#1d5fd0;
  /* Project colours (WBS-1.A6, docs/mockups/progetti.html): 10, contrast >= 4.5:1 on background and surface in both themes */
  --pc-blu:#1d5fd0; --pc-verde:#1b7a3d; --pc-rosso:#c62828; --pc-arancio:#b85500; --pc-viola:#6a3fc1;
  --pc-ciano:#00788a; --pc-rosa:#c2185b; --pc-oliva:#5f6e00; --pc-marrone:#8d5524; --pc-ardesia:#546e7a;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-sm:8px; --r-md:12px; --touch:48px; --rail:240px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f141a; --surface:#171e27; --surface-2:#202935; --border:#33404f;
  --text:#e6ebf1; --text-2:#a3afbd; --primary:#6ea2ff; --on-primary:#0b1220;
  --danger:#ff9d94; --danger-bg:#3a1c1a; --warn:#f0c470; --warn-bg:#392d12;
  --ok:#6fd08c; --focus:#6ea2ff;
  --pc-blu:#6ea2ff; --pc-verde:#5cc97f; --pc-rosso:#ff7b72; --pc-arancio:#ffa94d; --pc-viola:#b69cff;
  --pc-ciano:#4dd0e1; --pc-rosa:#f783ac; --pc-oliva:#c0cf4a; --pc-marrone:#d4a373; --pc-ardesia:#a3b8c4;
}}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.45 var(--font);background:var(--bg);color:var(--text);min-height:100dvh}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
svg{flex:none}
h1:focus{outline:none}
code{font-family:var(--mono)}

/* ===== Shell: phone (bottom bar) ===== */
.app{min-height:100dvh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--border);
  padding:env(safe-area-inset-top) calc(var(--s3) + env(safe-area-inset-right)) 0 calc(var(--s3) + env(safe-area-inset-left));
  display:flex;align-items:center;gap:var(--s2);min-height:calc(56px + env(safe-area-inset-top))}
.ibtn{min-width:var(--touch);min-height:var(--touch);border:0;background:transparent;border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer;color:var(--text)}
.ibtn:hover:not(:disabled){background:var(--surface-2)}
.ibtn:disabled{cursor:default;color:var(--text-2)}
.ctx{display:flex;align-items:center;gap:var(--s2);min-height:var(--touch);padding:0 var(--s3);border:1px solid var(--border);
  background:var(--surface-2);border-radius:var(--r-sm);cursor:pointer;min-width:0;flex:1 1 auto;max-width:280px;text-align:left}
.ctx:disabled{cursor:default;color:var(--text)}
.ctx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{display:none;flex:1;max-width:520px;align-items:center;gap:var(--s2);min-height:var(--touch);padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-2)}
.search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--text);min-height:var(--touch)}
.search input:focus{outline:0}.search:focus-within{outline:3px solid var(--focus)}
.sp{flex:1}
.conn{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-2);padding:0 var(--s2)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--text-2)}
.conn .lbl{display:none}
/* connection state is written by app.js: idle (no circuit yet) / online (a circuit is connected) / offline (circuit lost) */
body[data-conn=online] .dot{background:var(--ok)}
body[data-conn=offline] .dot{background:var(--danger)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.banner{display:none;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--warn-bg);color:var(--warn);border-bottom:1px solid var(--warn);font-size:.92rem}
body[data-conn=offline] .banner{display:flex}
.banner .rc{display:none}
.banner[data-rc=show] .rc-show,.banner[data-rc=failed] .rc-failed,.banner[data-rc=paused] .rc-paused{display:inline}
.banner a,.banner .link{color:inherit;font-weight:700;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.content{flex:1;padding:var(--s4) calc(var(--s4) + env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) calc(var(--s4) + env(safe-area-inset-left));width:100%;max-width:1200px;margin:0 auto}
h1{font-size:1.4rem;margin:0}
.head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.btn{min-height:var(--touch);border:0;border-radius:var(--r-sm);background:var(--primary);color:var(--on-primary);font-weight:600;padding:0 var(--s4);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.65;cursor:not-allowed}
/* bottom bar */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(6,1fr);background:var(--surface);border-top:1px solid var(--border);
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.nav a{min-height:64px;min-width:var(--touch);border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.75rem;color:var(--text-2);cursor:pointer;position:relative;text-decoration:none}
.nav a[aria-current=page]{color:var(--primary);font-weight:700}
.nav a[aria-current=page]::before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;background:var(--primary);border-radius:0 0 3px 3px}
/* empty states */
.empty{border:1px dashed var(--border);border-radius:var(--r-md);background:var(--surface);padding:var(--s6) var(--s4);text-align:center;display:grid;justify-items:center;gap:var(--s3)}
.empty>svg{color:var(--text-2)} .empty h2{margin:0;font-size:1.15rem} .empty p{margin:0;color:var(--text-2);max-width:38ch}
/* profile menu */
.menu{display:none;position:fixed;z-index:8;top:calc(60px + env(safe-area-inset-top));right:var(--s3);width:min(280px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s2);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.menu.open{display:block}
.menu .who{padding:var(--s3);border-bottom:1px solid var(--border);margin-bottom:var(--s2);overflow-wrap:anywhere}
.menu form{margin:0}
.menu button{width:100%;min-height:var(--touch);border:0;background:transparent;border-radius:var(--r-sm);display:flex;align-items:center;gap:var(--s3);padding:0 var(--s3);cursor:pointer;text-align:left}
.menu button:hover{background:var(--surface-2)}
.scrim{display:none;position:fixed;inset:0;z-index:7}.scrim.open{display:block}
/* ===== Shell: desktop (sidebar / rail) ===== */
.side{display:none}
@media (min-width:1024px){
  .app{display:grid;grid-template-columns:var(--rail) 1fr;grid-template-rows:auto 1fr;min-height:100dvh}
  body.collapsed{--rail:72px}
  .side{display:flex;flex-direction:column;gap:var(--s1);grid-row:1/3;position:sticky;top:0;height:100dvh;background:var(--surface);border-right:1px solid var(--border);padding:var(--s3)}
  .side .logo{display:flex;align-items:center;gap:var(--s3);min-height:var(--touch);padding:0 var(--s2);font-weight:700;margin-bottom:var(--s3);white-space:nowrap;overflow:hidden}
  .side .logo i{flex:none;width:32px;height:32px;border-radius:var(--r-sm);background:var(--primary);color:var(--on-primary);display:grid;place-items:center}
  .side .item{min-height:var(--touch);border:0;background:transparent;border-radius:var(--r-sm);display:flex;align-items:center;gap:var(--s3);padding:0 var(--s3);cursor:pointer;color:var(--text-2);text-align:left;white-space:nowrap;overflow:hidden;text-decoration:none}
  .side .item:hover{background:var(--surface-2)}
  .side .item[aria-current=page]{background:var(--surface-2);color:var(--primary);font-weight:700;box-shadow:inset 3px 0 0 var(--primary)}
  body.collapsed .side .t{display:none}
  .side .grow{flex:1}
  #side-items{display:grid;gap:var(--s1)} .side .item{width:100%}
  .nav{display:none}
  .top{grid-column:2;padding-left:var(--s5);padding-right:var(--s5)}
  .search{display:flex}.sbtn{display:none}.ctx{flex:0 0 auto}
  .conn .lbl{display:inline}
  .banner{grid-column:2;grid-row:2}
  .content{grid-column:2;padding:var(--s5);max-width:none;margin:0}
  .app{grid-template-rows:auto auto 1fr}
  .side{grid-row:1/4} .content{grid-row:3}
  .menu{top:64px;right:var(--s5)}
}

/* ===== Login (docs/mockups/login.html), scoped so it cannot leak into the shell ===== */
.auth-root{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.auth-root .page{min-height:100dvh;display:grid;grid-template-columns:1fr;align-content:center;padding:var(--s5) var(--s4)}
.auth-root .brand{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.auth-root .logo{width:40px;height:40px;border-radius:var(--r-sm);background:var(--primary);color:var(--on-primary);display:grid;place-items:center}
.auth-root .brand b{display:block;font-size:1.05rem}.auth-root .brand span{color:var(--text-2);font-size:.85rem}
.auth-root .card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s5);width:100%;max-width:420px;margin:0 auto}
.auth-root .aside{display:none}
.auth-root h1{margin:0 0 var(--s1)} .auth-root .sub{margin:0 0 var(--s5);color:var(--text-2)}
.auth-root label{display:block;font-weight:600;margin-bottom:var(--s1)}
.auth-root .field{margin-bottom:var(--s4)}
.auth-root .input{display:flex;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);min-height:var(--touch)}
.auth-root .input:focus-within{outline:3px solid var(--focus);outline-offset:1px}
.auth-root .input input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;padding:0 var(--s3);min-height:var(--touch)}
.auth-root .input input:focus{outline:0}
.auth-root .eye{border:0;background:transparent;color:var(--text-2);min-width:var(--touch);min-height:var(--touch);display:grid;place-items:center;cursor:pointer}
.auth-root .btn{width:100%;display:flex;padding:0}
.auth-root .btn[disabled]{opacity:.65;cursor:progress}
.auth-root .alert{display:flex;gap:var(--s3);align-items:flex-start;border-radius:var(--r-sm);padding:var(--s3);margin-bottom:var(--s4);font-size:.95rem}
.auth-root .alert svg{flex:none;margin-top:2px}
.auth-root .alert.danger{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger)}
.auth-root .alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn)}
.auth-root .hint{margin:var(--s4) 0 0;color:var(--text-2);font-size:.88rem;text-align:center}
.auth-root .spin{width:18px;height:18px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;display:none;animation:r .8s linear infinite}
@keyframes r{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auth-root .spin{animation-duration:3s}}
.auth-root form[data-busy] .spin{display:block}
@media (min-width:1024px){
  .auth-root .page{grid-template-columns:minmax(380px,5fr) 7fr;padding:0;align-content:stretch}
  .auth-root .main{display:grid;align-content:center;padding:var(--s6)}
  .auth-root .aside{display:flex;flex-direction:column;justify-content:center;gap:var(--s5);padding:var(--s6) 8vw;background:var(--surface-2);border-left:1px solid var(--border)}
  .auth-root .aside h2{font-size:1.8rem;margin:0;max-width:20ch}
  .auth-root .aside ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);max-width:46ch;color:var(--text-2)}
  .auth-root .aside li{display:flex;gap:var(--s3)} .auth-root .aside svg{flex:none;color:var(--primary);margin-top:3px}
}

/* ===== Framework error bar ===== */
#blazor-error-ui{color-scheme:light only;background:lightyellow;color:#18202b;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem}


/* ===== Account provider page (WBS-4.A12): rules from docs/mockups/account-provider.html; tokens, buttons and shell come from above ===== */
:root{--ok-bg:#e3f4e8}
@media (prefers-color-scheme:dark){:root{--ok-bg:#16301f}}
.lead{margin:0 0 var(--s4);color:var(--text-2);font-size:.92rem;max-width:70ch}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.danger{background:var(--danger);color:#fff}
.btn.dghost{background:transparent;color:var(--danger);border:1px solid var(--danger)}
@media (prefers-color-scheme:dark){.btn.danger{color:#2a0b08}}
.menu a{display:flex;align-items:center;gap:var(--s3);min-height:var(--touch);padding:0 var(--s3);border-radius:var(--r-sm);color:inherit;text-decoration:none}
.menu a:hover{background:var(--surface-2)}
.menu a[aria-current=page]{color:var(--primary);font-weight:700;background:var(--surface-2)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);align-items:start}
@media (min-width:1024px){.pgrid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--s4)}}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);display:grid;gap:var(--s3);min-width:0}
.pcard.hl{outline:3px solid var(--focus);outline-offset:2px}
.ph{display:flex;align-items:center;gap:var(--s3);min-width:0}
.logo-p{flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-weight:700}
.ph h2{margin:0;font-size:1.1rem;flex:1;min-width:0;overflow-wrap:anywhere}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 10px;font-size:.8rem;font-weight:600;background:var(--surface-2);border:1px solid var(--border);white-space:nowrap}
.chip.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok)}
.chip.run{color:var(--primary);border-color:var(--primary)}
.chip.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn)}
.chip.off{color:var(--text-2)}
dl.facts{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s4);font-size:.9rem}
dl.facts dt{color:var(--text-2)} dl.facts dd{margin:0;overflow-wrap:anywhere}
.box{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-sm);padding:var(--s3);display:grid;gap:var(--s3);min-width:0}
.box .step{margin:0;font-size:.92rem;overflow-wrap:anywhere}
.box .step b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:.78rem;margin-right:6px}
.urlrow{display:flex;gap:var(--s2);min-width:0;align-items:stretch;flex-wrap:wrap}
.url{flex:1 1 100%;min-width:0;min-height:var(--touch);display:flex;align-items:center;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font:.82rem var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urlrow .btn{flex:1 1 120px}
.field{display:grid;gap:6px}
.field label{font-size:.85rem;color:var(--text-2)}
.field input{width:100%;min-height:var(--touch);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);padding:0 var(--s3);font-family:var(--mono);font-size:1rem}
.field .hint{font-size:.82rem;color:var(--text-2);overflow-wrap:anywhere}
.codebig{font:700 clamp(1.7rem,9vw,2.4rem)/1.1 var(--mono);letter-spacing:.1em;text-align:center;padding:var(--s4) var(--s2);border:2px dashed var(--primary);border-radius:var(--r-md);background:var(--surface);user-select:all;overflow-wrap:anywhere}
.cd{display:flex;align-items:center;gap:var(--s2);font-size:.9rem;color:var(--text-2)}
.cd b{font-family:var(--mono);color:var(--text);font-size:1rem}
.wait{display:flex;align-items:center;gap:var(--s3);font-size:.92rem}
.spin{width:18px;height:18px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:sp 1s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.note{display:flex;gap:var(--s3);align-items:flex-start;border-radius:var(--r-sm);padding:var(--s3);font-size:.9rem;border:1px solid var(--border);background:var(--surface-2);overflow-wrap:anywhere}
.note svg{margin-top:2px}
.note.bad{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.note.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.note p{margin:0}.note p+p{margin-top:4px}
.note .why{color:var(--text)}
.acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.acts .btn{flex:1 1 140px}
/* sheet (dialogo di conferma) */
.sw{display:none;position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.5);align-items:flex-end;justify-content:center}
.sw.open{display:flex}
.sheet{background:var(--surface);width:100%;max-width:480px;max-height:90dvh;overflow:auto;border-radius:var(--r-md) var(--r-md) 0 0;padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));display:grid;gap:var(--s3);border:1px solid var(--border)}
.sheet h2{margin:0;font-size:1.15rem}.sheet p{margin:0;overflow-wrap:anywhere}
.sheet ul{margin:0;padding-left:var(--s5);display:grid;gap:4px}
@media (min-width:640px){.sw{align-items:center}.sheet{border-radius:var(--r-md)}}
.pcard form{margin:0}
.pcard .acts form{display:contents}
.sw-x{position:absolute;inset:0;z-index:-1}
.sheet form{display:grid;gap:var(--s3);margin:0}
@media (max-width:480px){.acts .btn,.urlrow .btn{flex-basis:100%}}
/* ===== end Account provider page ===== */

/* ===== Home and Projects (WBS-1.A6): rules from docs/mockups/progetti.html; tokens, shell, .head, .btn, .empty, .chip come from above ===== */
.content{overflow-wrap:anywhere;min-width:0}
.head h1{min-width:0;overflow-wrap:anywhere}
a.btn{text-decoration:none}
.cards{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);display:grid;gap:var(--s2)}
.card h3{margin:0;font-size:1.05rem}
.card .meta{color:var(--text-2);font-size:.88rem;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
a.card{color:inherit;text-decoration:none;min-height:var(--touch)}
a.card:hover{border-color:var(--primary)}
.card h3,.card .meta{min-width:0}
.card{align-content:start}.card .meta{align-items:center}.card .chip,.detail .chip{text-transform:capitalize}
.sec{font-size:.85rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;margin:var(--s5) 0 var(--s2)}
.head+.sec{margin-top:0}
.link{display:inline-flex;align-items:center;min-height:var(--touch);color:var(--primary);font-weight:600}
.crumb{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--touch);color:var(--primary);text-decoration:none;font-weight:600;margin-bottom:var(--s2)}
.form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);display:grid;gap:var(--s4);max-width:560px}
.form .field{gap:var(--s2)}
.form .field label{font-size:1rem;font-weight:600;color:var(--text)}
.form .field input{background:var(--bg);color:var(--text);font:inherit}
.field input[aria-invalid=true]{border-color:var(--danger);border-width:2px}
.form .field .hint{color:var(--text-2);font-size:.88rem;margin:0}
.err{color:var(--danger);font-size:.9rem;margin:0;font-weight:600}
.alert{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger)}
.alert.okmsg{background:var(--surface);color:var(--ok);border-color:var(--ok);margin-bottom:var(--s4);max-width:720px}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.actions .btn{flex:1 1 150px;white-space:nowrap}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.form form,.form{margin:0}
.detail{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);display:grid;gap:var(--s3);max-width:720px;margin-bottom:var(--s4)}
.detail dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:0}
.detail dt{color:var(--text-2)} .detail dd{margin:0}
.detail h2,.pane h2{margin:0;font-size:1.1rem}
.pane{border:1px dashed var(--border);border-radius:var(--r-md);background:var(--surface);padding:var(--s4);display:grid;gap:var(--s3);max-width:720px;justify-items:start}
.pane p{margin:0;color:var(--text-2)}
.nf{max-width:560px;margin:var(--s6) auto 0;text-align:center;display:grid;justify-items:center;gap:var(--s3)}
.nf>svg{color:var(--text-2)} .nf h1{margin:0} .nf p{color:var(--text-2);margin:0}
@media (min-width:1024px){.cards.wide{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}.form{padding:var(--s5)}}
/* Project colour (WBS-1.A6): stripe on the card, dot next to the name; the name is always written (colour is never the only sign) */
a.card{border-left:6px solid var(--pc,var(--border))}
.pdot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:var(--pc,var(--border));display:inline-block}
.pdot.big{width:18px;height:18px}
.card h3{display:flex;gap:var(--s2);align-items:baseline}.card h3 .pdot{transform:translateY(1px)}
.head h1.withdot{display:flex;gap:var(--s3);align-items:center}
.colrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.pcpick>summary{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 var(--s4);border:1px solid var(--border);border-radius:var(--r-sm);font-weight:600;cursor:pointer}
.pcpick[open]>summary{margin-bottom:var(--s3)}
.pcpick form{display:grid;gap:var(--s3);margin:0}
.swatches{display:grid;grid-template-columns:repeat(5,var(--touch));gap:var(--s2);border:0;margin:0;padding:0}
.swatches legend{padding:0;margin-bottom:var(--s2);font-weight:600}
.swatches .pcsw{position:relative;width:var(--touch);height:var(--touch)}
.swatches .pcsw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.swatches .pcsw span{display:block;width:100%;height:100%;border-radius:50%;background:var(--pc);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border)}
.swatches .pcsw input:checked+span{box-shadow:0 0 0 3px var(--text)}
.swatches .pcsw input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
.pcpick .actions{max-width:420px}
.detail .hint{color:var(--text-2);font-size:.88rem;margin:0}
/* ===== end Home and Projects ===== */

/* ===== Voce page (WBS-10.A5): rules from docs/mockups/voce.html, all scoped under .voice so nothing leaks into other pages ===== */
.voice [hidden]{display:none!important}
.voice .vhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.voice .vgrid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.voice .vgrid{grid-template-columns:minmax(0,2fr) minmax(320px,1fr);align-items:start}.voice .dock{position:static!important}}
.voice .vstack,.voice .stack{display:grid;gap:var(--s3);min-width:0;align-content:start}
.voice .vpanel{display:none}
.voice[data-s=off] [data-p~=off],.voice[data-s=connecting] [data-p~=connecting],.voice[data-s=live] [data-p~=live],.voice[data-s=lost] [data-p~=lost],
.voice[data-s=denied] [data-p~=denied],.voice[data-s=unavail] [data-p~=unavail]{display:grid}
.voice .vcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);display:grid;gap:var(--s2);min-width:0}
.voice .vcard h2,.voice .vcard h3{margin:0}.voice .vcard h3{font-size:1.05rem}.voice .vcard p{margin:0}
.voice .hero{text-align:center;justify-items:center;padding:var(--s5) var(--s4)}
.voice .hero p{max-width:40ch;color:var(--text-2)}
.voice .hint{color:var(--text-2);font-size:.88rem;margin:0}
.voice .meta{color:var(--text-2);font-size:.88rem}
.voice .chip{max-width:100%;white-space:normal}
.voice .state{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);min-height:56px}
.voice .state .led{width:14px;height:14px;border-radius:50%;background:var(--text-2);flex:none}
.voice .state small{display:block;color:var(--text-2)}
.voice .state[data-k=listening] .led{background:var(--ok);animation:vpulse 1.4s infinite}
.voice .state[data-k=thinking] .led{background:var(--warn);animation:vpulse .9s infinite}
.voice .state[data-k=speaking] .led{background:var(--primary);animation:vpulse 1.1s infinite}
.voice .state[data-k=bad] .led{background:var(--danger)}
@keyframes vpulse{50%{transform:scale(1.5);opacity:.5}}
.voice .callout{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn)}
.voice .callout.bad{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.voice .callout>svg{margin-top:2px}.voice .callout p{margin:0;overflow-wrap:anywhere}
.voice .log{display:grid;gap:var(--s2);min-width:0}
.voice .log:empty{display:none}
.voice[data-s=off] .log,.voice[data-s=denied] .log,.voice[data-s=unavail] .log{display:none}
.voice .msg{max-width:92%;padding:var(--s3) var(--s4);border-radius:var(--r-md);overflow-wrap:anywhere}
.voice .msg.u{justify-self:end;background:var(--primary);color:var(--on-primary);border-bottom-right-radius:4px}
.voice .msg.a{justify-self:start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.voice .msg.partial{opacity:.75;font-style:italic}
.voice .msg .who{display:block;font-size:.72rem;opacity:.75;margin-bottom:2px}
.voice .meter{display:flex;align-items:center;gap:var(--s3)}
.voice[data-k=speaking] .meter,.voice[data-k=thinking] .meter{display:none}
.voice[data-mic="0"] .meter{display:none}
.voice .bar{display:flex;gap:3px;align-items:flex-end;height:36px;flex:1;min-width:0}
.voice .bar i{flex:1;max-width:10px;height:8%;background:var(--ok);border-radius:2px;transition:height 80ms linear}
.voice .bar[data-speech] i{background:var(--primary)}
.voice .wave{display:none;gap:3px;align-items:center;height:36px}
.voice[data-k=speaking] .wave{display:flex}
.voice .wave i{width:4px;height:32px;background:var(--primary);border-radius:2px;animation:vscl 1.2s infinite ease-in-out}
@keyframes vscl{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.voice .wave i:nth-child(2n){animation-delay:.3s}.voice .wave i:nth-child(3n){animation-delay:.6s}
@media (prefers-reduced-motion:reduce){.voice .led,.voice .wave i{animation:none!important}.voice .bar i{transition:none}}
.voice .row{display:flex;gap:var(--s3);flex-wrap:wrap}.voice .row>.btn{flex:1 1 120px}
.voice .field{display:block;flex:1 1 200px;min-width:0;min-height:var(--touch);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;padding:0 var(--s3);width:auto}
.voice .vcard>label{font-weight:600}
.voice .cd{display:inline;font-variant-numeric:tabular-nums;font-weight:700}
.voice ol.fix{margin:0;padding-left:1.3em;display:grid;gap:6px}
.voice .det{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);margin-top:var(--s2)}
.voice .det summary{min-height:var(--touch);display:flex;align-items:center;padding:0 var(--s3);cursor:pointer}
.voice .det pre{margin:0;padding:var(--s3);font:12px/1.4 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.voice .seg{display:flex;flex-wrap:wrap;gap:var(--s2)}
.voice .seg label{flex:1 1 120px;position:relative}
.voice .seg input{position:absolute;opacity:0;inset:0;cursor:pointer;width:100%;height:100%;margin:0}
.voice .seg span{display:grid;place-items:center;min-height:var(--touch);padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);text-align:center}
.voice .seg input:checked+span{background:var(--primary);color:var(--on-primary);border-color:var(--primary);font-weight:700}
.voice .seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.voice .rng{display:grid;gap:4px}.voice .rng input{width:100%;min-height:var(--touch);accent-color:var(--primary)}
.voice .rng div{display:flex;justify-content:space-between;gap:var(--s2)}
.voice .sw-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--touch)}
.voice .sw-row input{flex:none;width:44px;height:44px}
.voice .dock{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:4;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s3) 0;margin-top:var(--s4);background:linear-gradient(transparent,var(--bg) 35%)}
.voice .ptt-row{flex:0 0 100%;display:flex;justify-content:center}
.voice .btn.ptt{min-height:64px;width:100%;max-width:420px;font-size:1.05rem;touch-action:none;user-select:none;-webkit-user-select:none}
.voice .btn.ptt[aria-pressed=true]{background:var(--danger);color:#fff}
.voice .mic{width:88px;height:88px;border-radius:50%;border:4px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.voice[data-s=connecting] .mic,.voice[data-s=live] .mic,.voice[data-s=lost] .mic{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.voice[data-s=denied] .mic,.voice[data-s=unavail] .mic{color:var(--text-2)}
.voice .side-b{min-width:var(--touch);min-height:var(--touch);border:1px solid var(--border);background:var(--surface)}
.voice .side-b[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
/* ===== end Voce page ===== */