/* prototype-only pieces on top of the mockup CSS: dialogs, toasts, variant switch, clickable rows */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--text) 38%,transparent);animation:fade .2s both}
.modal .panel{width:min(100%,460px);box-shadow:var(--float);background:var(--surface);animation:slide .3s cubic-bezier(.2,.8,.2,1) both}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:70;background:var(--text);color:var(--bg);padding:10px 18px;border-radius:99px;font-weight:600;font-size:.85rem;animation:slide .3s both}
tbody tr.click{cursor:pointer}
.vsw{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.vsw button{border:0;background:none;color:var(--muted);padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:650;cursor:pointer}.vsw .on{background:var(--text);color:var(--bg)}
.err{color:var(--warn);font-size:.8rem}
@media (max-width:900px){.vsw{display:none}}
/* ---- prototype v2: variant C only, slim header and footer, icon buttons ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn,a.ib{position:relative}
.btn>svg,a.ib>svg{width:18px;height:18px;flex:none}
.btn:has(>.sr),a.ib{width:38px;height:38px;padding:0;border-radius:var(--rad-s,12px)}
.btn.sm:has(>.sr){width:34px;height:34px}
a.ib{display:inline-grid;place-items:center;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);flex:none}a.ib:hover{border-color:var(--text)}
.btn:hover>.sr,.btn:focus-visible>.sr,a.ib:hover>.sr,a.ib:focus-visible>.sr{width:auto;height:auto;clip:auto;overflow:visible;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:4px 9px;border-radius:8px;font-size:.75rem;font-weight:600;z-index:80;pointer-events:none}
.rowh a.ib{align-self:center}
.inw{position:relative}.inw>svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.inw input.in{padding-left:42px!important;padding-right:46px!important}
.inw .eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:calc(var(--rad-s,10px) - 2px);background:none;color:var(--muted);cursor:pointer}.inw .eye:hover{color:var(--text);background:var(--surface-2)}.inw .eye svg{width:18px;height:18px}
.inw .okm{position:absolute;right:42px;top:50%;transform:translateY(-50%);color:var(--live);display:grid}.inw .okm svg{width:18px;height:18px}
.sso3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.btn.sso{height:46px;padding:0;border-radius:var(--rad-s,12px)}.btn.sso svg{width:22px;height:22px}.brandi{width:22px;height:22px}
.btn.sso:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
/* slim, wide header and footer (95-100% of the window) */
.v-c .nav{width:calc(100% - 24px);max-width:none;height:50px;margin:10px auto 0;padding:0 8px 0 18px}
.v-c .brand{font-size:1.1rem;margin-right:14px}.v-c .brand svg{width:20px;height:20px}
.v-c .links a{padding:0 12px;margin:7px 0;font-size:.88rem;font-weight:550}
.v-c .util{gap:8px;font-size:.88rem}.v-c .util .av{width:30px;height:30px;font-size:.72rem}.v-c .util>svg,.util>svg{width:18px;height:18px}
.v-c .page{max-width:1560px;padding-top:22px}
.v-c .foot{width:calc(100% - 24px);max-width:none;min-height:38px;margin:0 auto 10px;padding:4px 16px;border:1px solid var(--line);border-radius:99px;background:var(--glass);backdrop-filter:blur(12px);font-size:.72rem;gap:12px;position:sticky;bottom:10px}
.v-c .foot nav{font-size:.76rem;gap:2px 14px;max-width:calc(50% - 120px)}.v-c .foot .pill{padding:2px 9px;font-size:.7rem;border:0;background:var(--surface-2);border-radius:99px}.v-c .foot .pill svg{width:12px;height:12px}
.v-c .ledger .foot{position:relative;bottom:auto;margin-bottom:10px}
@media (max-width:900px){.v-c .nav{width:100%;margin:0;border-radius:0;height:50px}.v-c .foot{position:static;border-radius:var(--rad-s,16px);width:calc(100% - 24px);padding:8px 12px}}
/* ---- application additions ---- */
.boot{display:grid;place-items:center;min-height:60vh;color:var(--muted)}
.sso5{grid-template-columns:repeat(5,1fr)}
a.btn.sso{display:inline-flex;align-items:center;justify-content:center}.btn.sso.off{opacity:.45;cursor:not-allowed;filter:grayscale(1);pointer-events:auto}.btn.sso.off:hover{border-color:var(--line-strong);background:var(--surface)}
.btn:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:480px){.sso5{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}}
/* icons are 24-unit SVGs; the global svg{width:100%} rule must not blow them up */
svg[viewBox="0 0 24 24"]{width:1.15em;height:1.15em;flex:none}
.ch{height:auto}
/* goals */
.goal-hero{flex-direction:row;gap:clamp(20px,4vw,48px);flex-wrap:wrap;align-items:center;max-width:860px}
.tile-new{display:flex;align-items:center;justify-content:center;gap:8px;min-height:84px;border:2px dashed var(--line-strong);border-radius:var(--rad,16px);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.tile-new:hover,.tile-new:focus-visible{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);outline:none}
.tile-new svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.tile-new{transition:none}}