/* ═══════════════════════════════════════════════════════════ */
/* PortfolioCalc — Shared Chrome CSS                          */
/* Nav, footer, user menu, modals, mobile nav, search, toast  */
/* Source of truth: index.html <style> block                  */
/* ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root{
  --bg:#f4f2ed;--bg2:#eceae3;--bg3:#fff;
  --text:#1a1916;--text2:#6b6860;--text3:#a09e97;
  --border:rgba(26,25,22,0.1);--border2:rgba(26,25,22,0.2);
  --accent:#1a6b4a;--accent-l:#e8f5ef;--accent-m:#c5e8d8;
  --red:#c0392b;--red-l:#fdf0ee;
  --blue:#1a4a8a;--blue-l:#e8eef8;
  --amber:#b45309;--amber-l:#fef3c7;
  --card:#ffffff;--nav:rgba(244,242,237,0.94);
  --shadow:0 1px 4px rgba(26,25,22,0.07),0 4px 16px rgba(26,25,22,0.06);
  --shadow-lg:0 8px 32px rgba(26,25,22,0.12);
  --radius:14px;--radius-sm:8px;--radius-xs:6px;
}
[data-theme="dark"]{
  --bg:#141210;--bg2:#1d1b18;--bg3:#252320;
  --text:#f0ede8;--text2:#9c9a93;--text3:#6b6860;
  --border:rgba(240,237,232,0.09);--border2:rgba(240,237,232,0.18);
  --accent:#4ade9a;--accent-l:#0d2419;--accent-m:#1a3d2c;
  --red:#f87171;--red-l:#2a0f0f;
  --blue:#6aabf0;--blue-l:#0f1e30;
  --amber:#fbbf24;--amber-l:#2a1f08;
  --card:#1d1b18;--nav:rgba(20,18,16,0.94);
  --shadow:0 1px 4px rgba(0,0,0,0.2),0 4px 16px rgba(0,0,0,0.18);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.35);
}

/* ── SCREEN-READER ONLY ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}


/* ── UNIFIED NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--nav);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:0.5px solid var(--border);height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem;gap:1rem;}
.logo{font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:var(--text);text-decoration:none;letter-spacing:-.3px;flex-shrink:0;}
.logo span{color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:.25rem;}
.nav-links a{font-size:13px;color:var(--text2);text-decoration:none;padding:5px 11px;border-radius:8px;transition:all .15s;font-weight:450;}
.nav-links a:hover{color:var(--text);background:var(--bg2);}
.nav-links a.active{color:var(--text);background:var(--bg2);font-weight:500;}
.nav-r{display:flex;align-items:center;gap:.4rem;}
.nav-btn{padding:6px 15px;border-radius:100px;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;border:0.5px solid var(--border2);background:transparent;color:var(--text);white-space:nowrap;}
.nav-btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);}
.nav-btn:hover{opacity:.8;}
.theme-btn{width:32px;height:32px;border-radius:8px;border:0.5px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;transition:background .15s;}
.theme-btn:hover{background:var(--bg2);}
#user-nav{display:none;align-items:center;gap:.5rem;}
.avatar{width:30px;height:30px;border-radius:9px;background:var(--accent-l);color:var(--accent);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;border:0.5px solid var(--accent-m);flex-shrink:0;cursor:pointer;transition:all .15s;}
.avatar:hover{background:var(--accent-m);}
#user-name{font-size:13px;color:var(--text2);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;background:var(--card);border:0.5px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);min-width:224px;overflow:hidden;z-index:400;}
.user-menu.open{display:block;animation:menu-in .15s ease;}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.user-menu-header{padding:.9rem 1rem;border-bottom:0.5px solid var(--border);background:var(--bg2);}
.user-menu-greeting{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.user-menu-email{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-menu-section{padding:.35rem .5rem;}
.user-menu-section+.user-menu-section{border-top:0.5px solid var(--border);}
.user-menu a,.user-menu-item{display:flex;align-items:center;gap:10px;padding:.55rem .65rem;font-size:13px;color:var(--text);text-decoration:none;transition:background .1s;cursor:pointer;border:none;background:transparent;width:100%;font-family:'DM Sans',sans-serif;border-radius:8px;}
.user-menu a:hover,.user-menu-item:hover{background:var(--bg2);}
.user-menu-badge{font-size:9px;padding:1px 6px;border-radius:100px;margin-left:auto;font-weight:500;background:var(--accent-l);color:var(--accent);border:0.5px solid var(--accent-m);}
.user-menu a svg,.user-menu-item svg{transition:transform .2s ease,color .15s;}
.user-menu a:hover svg,.user-menu-item:hover svg{transform:scale(1.15);}
.mobile-nav-item svg{transition:transform .2s ease;}
.mobile-nav-item.active svg{transform:scale(1.1);}
.mobile-nav-item:active svg{transform:scale(0.9);}
.site-footer{border-top:0.5px solid var(--border);background:var(--bg2);padding:2.5rem 2rem 1.5rem;margin-top:auto;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;max-width:1100px;margin:0 auto 2rem;}
.footer-brand p{font-size:12px;color:var(--text3);line-height:1.75;margin-top:.6rem;max-width:220px;}
.footer-col-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:.8rem;}
.footer-col a{display:block;font-size:13px;color:var(--text2);text-decoration:none;margin-bottom:.45rem;transition:color .15s;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{max-width:1100px;margin:0 auto;padding-top:1.25rem;border-top:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}
.footer-bottom-text{font-size:11px;color:var(--text3);}
.footer-bottom-links{display:flex;gap:1.25rem;}
.footer-bottom-links a{font-size:11px;color:var(--text3);text-decoration:none;transition:color .15s;}
.footer-bottom-links a:hover{color:var(--text2);}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}


.builder-guide-banner{display:none;align-items:flex-start;gap:.75rem;background:var(--accent-l);border:0.5px solid var(--accent-m);border-radius:10px;padding:.75rem 1rem;margin-bottom:.75rem;}
.builder-guide-banner.show{display:flex;}
.builder-guide-banner-body{flex:1;min-width:0;}
.builder-guide-banner-title{font-size:12px;font-weight:600;color:var(--accent);margin-bottom:2px;}
.builder-guide-banner-sub{font-size:11px;color:var(--text2);line-height:1.55;}
.builder-guide-banner-dismiss{background:none;border:none;cursor:pointer;color:var(--text3);font-size:14px;flex-shrink:0;padding:0;line-height:1;transition:color .15s;}
.builder-guide-banner-dismiss:hover{color:var(--text);}
/* ── NAV MOBILE COLLAPSE ── */
.nav-hide-mobile{display:flex;align-items:center;gap:.5rem;}
@media(max-width:680px){
  .nav-links{display:none;}
  #user-name{display:none;}
  .nav-hide-mobile .nav-btn{display:none;}
  nav{padding:0 1rem;}
}


/* ── MODALS ── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1rem;}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);border-radius:20px;padding:2rem;width:100%;max-width:400px;border:0.5px solid var(--border);box-shadow:var(--shadow-lg);}
.modal-header{display:flex;align-items:start;justify-content:space-between;margin-bottom:1.5rem;}
.modal-header h2{font-family:'Fraunces',serif;font-size:22px;font-weight:600;line-height:1.2;}
.modal-header p{font-size:13px;color:var(--text2);margin-top:.2rem;}
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:.85rem;}
.form-group label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);font-weight:500;display:flex;justify-content:space-between;}
.form-group .pw-wrap{position:relative;}
.form-group .pw-wrap input{width:100%;padding-right:42px;}
.form-group .pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text3);font-size:13px;padding:2px;line-height:1;}
.form-group .pw-toggle:hover{color:var(--text);}
.form-group input{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;color:var(--text);font-family:'DM Sans',sans-serif;transition:border-color .2s;width:100%;}
.form-group input:focus{outline:none;border-color:var(--accent);}
.form-group input.input-error{border-color:var(--red);}
.form-group input.input-ok{border-color:var(--accent);}
.field-hint{font-size:11px;margin-top:2px;line-height:1.4;}
.field-hint.hint-err{color:var(--red);}
.field-hint.hint-ok{color:var(--accent);}
.pw-strength{display:flex;gap:3px;margin-top:4px;}
.pw-bar{flex:1;height:3px;border-radius:2px;background:var(--border2);transition:background .2s;}
.pw-bar.s-weak{background:var(--red);}
.pw-bar.s-fair{background:var(--amber);}
.pw-bar.s-good{background:var(--accent);}
.pw-bar.s-strong{background:#1D9E75;}
.pw-label{font-size:11px;margin-top:3px;color:var(--text3);}
.btn-full{width:100%;padding:12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;border:none;transition:opacity .2s;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-full:hover:not(:disabled){opacity:.85;}
.btn-full:disabled{opacity:.6;cursor:default;}
.btn-primary{background:var(--text);color:var(--bg);}
.btn-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;}
.modal-switch{text-align:center;font-size:13px;color:var(--text2);margin-top:1rem;}
.modal-switch a{color:var(--accent);cursor:pointer;font-weight:500;}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text3);font-size:18px;line-height:1;padding:4px;border-radius:6px;flex-shrink:0;margin-top:2px;}
.modal-close:hover{color:var(--text);background:var(--bg2);}
.msg{font-size:13px;padding:10px 14px;border-radius:var(--radius-xs);margin-bottom:1rem;display:none;line-height:1.5;}
.msg.error{background:var(--red-l);color:var(--red);display:block;}
.msg.success{background:var(--accent-l);color:var(--accent);display:block;}
.forgot-link{font-size:12px;color:var(--text3);cursor:pointer;transition:color .15s;}
.forgot-link:hover{color:var(--accent);}


.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--text);color:var(--bg);padding:10px 18px;border-radius:100px;font-size:13px;z-index:999;opacity:0;transform:translateY(8px);transition:all .3s;pointer-events:none;box-shadow:var(--shadow-lg);max-width:360px;}
.toast.has-undo{pointer-events:auto;cursor:default;border-radius:14px;padding:10px 14px;}
.toast-undo-btn{background:rgba(255,255,255,0.2);border:none;color:inherit;font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;cursor:pointer;margin-left:8px;font-family:'DM Sans',sans-serif;transition:background .15s;}
.toast-undo-btn:hover{background:rgba(255,255,255,0.35);}
.toast.show{opacity:1;transform:translateY(0);}


.ai-spinner{width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}
.ai-refine-chip{font-size:11px;padding:5px 12px;border-radius:100px;border:0.5px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;}
.ai-refine-chip:hover{background:var(--bg2);border-color:var(--border2);}
.ai-refine-chip:disabled{opacity:.4;cursor:default;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── TOOLTIPS ── */
.gl{display:inline;border-bottom:1.5px dotted var(--text3);cursor:help;position:relative;white-space:nowrap;}
.gl-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);font-size:12px;line-height:1.5;padding:8px 12px;border-radius:8px;width:220px;white-space:normal;z-index:300;opacity:0;pointer-events:none;transition:opacity .15s;font-weight:400;font-family:'DM Sans',sans-serif;box-shadow:var(--shadow-lg);}
.gl-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--text);}
.gl:hover .gl-tip,.gl.open .gl-tip{opacity:1;pointer-events:auto;}
.gl-tip.tip-right{left:0;transform:none;}
.gl-tip.tip-right::after{left:16px;transform:none;}
.gl-tip.tip-left{left:auto;right:0;transform:none;}
.gl-tip.tip-left::after{left:auto;right:16px;transform:none;}

.nav-search-wrap{position:relative;flex:0 0 auto;}
.nav-search-input{background:var(--bg2);border:0.5px solid var(--border);border-radius:100px;padding:5px 14px 5px 32px;font-size:12px;color:var(--text);font-family:'DM Sans',sans-serif;width:180px;transition:all .2s;outline:none;}
.nav-search-input:focus{width:240px;border-color:var(--accent);background:var(--card);}
.nav-search-input::placeholder{color:var(--text3);}
.nav-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;display:flex;align-items:center;justify-content:center;}
.nav-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:260px;background:var(--card);border:0.5px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);z-index:500;display:none;max-height:280px;overflow-y:auto;}
.nav-search-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;transition:background .1s;border-bottom:0.5px solid var(--border);text-decoration:none;}
.nav-search-item:last-child{border-bottom:none;}
.nav-search-item:hover{background:var(--bg2);}
.nav-search-item .nsi-tick{font-family:Roboto Mono,monospace;font-size:12px;font-weight:600;color:var(--text);min-width:55px;}
.nav-search-item .nsi-name{font-size:12px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-search-item .nsi-exch{font-size:10px;color:var(--text3);flex-shrink:0;}
@media(max-width:820px){.nav-search-input{width:130px;}.nav-search-input:focus{width:200px;}}
.nav-search-mobile-btn{display:none;width:32px;height:32px;border-radius:8px;border:0.5px solid var(--border);background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;color:var(--text2);}
.nav-search-mobile-btn:hover{background:var(--bg2);}
@media(max-width:680px){.nav-search-wrap{display:none;}.nav-search-mobile-btn{display:flex;}}
.mobile-search-overlay{display:none;position:fixed;top:0;left:0;right:0;z-index:500;background:var(--nav);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:10px 1rem;gap:8px;align-items:center;border-bottom:0.5px solid var(--border);}
.mobile-search-overlay.open{display:flex;}
.mobile-search-overlay input{flex:1;background:var(--bg2);border:0.5px solid var(--border);border-radius:100px;padding:9px 14px;font-size:14px;color:var(--text);font-family:'DM Sans',sans-serif;outline:none;}
.mobile-search-overlay input:focus{border-color:var(--accent);background:var(--card);}
.mobile-search-overlay input::placeholder{color:var(--text3);}
.mobile-search-close{background:none;border:none;cursor:pointer;color:var(--text2);font-size:18px;padding:4px 8px;flex-shrink:0;font-family:'DM Sans',sans-serif;}
.mobile-search-results{position:fixed;top:52px;left:0;right:0;z-index:501;background:var(--card);border-bottom:0.5px solid var(--border);box-shadow:var(--shadow-lg);max-height:60vh;max-height:60dvh;overflow-y:auto;}

.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;top:auto;z-index:300;background:var(--nav);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:0.5px solid var(--border);padding:.4rem .5rem env(safe-area-inset-bottom,.4rem);justify-content:space-around;align-items:center;height:auto;border-bottom:none;}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 4px;flex:1;border-radius:10px;text-decoration:none;color:var(--text3);font-size:10px;font-weight:500;letter-spacing:.03em;transition:all .15s;border:none;background:none;cursor:pointer;font-family:'DM Sans',sans-serif;}
.mobile-nav-item:hover,.mobile-nav-item.active{color:var(--accent);}
.mobile-nav-item .mni-icon{font-size:18px;line-height:1;}
@media(max-width:680px){
  .mobile-bottom-nav{display:flex;}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));}
  .ticker-bar{display:none;}
}

/* ── Toast responsive ── */
@media(max-width:680px){
  .toast{bottom:calc(72px + env(safe-area-inset-bottom,0px));}
}
@media(max-width:560px){
  .toast{left:1rem;right:1rem;text-align:center;}
}