/* ============================================================================
   style.css - shared UI styles, linked in every page head next to theme.css.
   Batch 1: the SETTINGS MODAL (#vg-settings-modal / .vgs-*), moved verbatim
   out of vgcollect-auth.js _buildSettingsModal(), where it lived inside a JS
   string. Tokens (var(--text), --green, --danger, ...) resolve from theme.css.
============================================================================ */

#vg-settings-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:flex-start;justify-content:center;background:rgba(0,0,0,.78);font-family:'Oxanium','Open Sans',system-ui,-apple-system,sans-serif;overflow-y:auto;padding:36px 12px}
#vg-settings-modal.open{display:flex}
body.vg-modal-open{overflow:hidden}   /* lock the page: scroll the modal, not the page behind it */
#vg-settings-modal .vgs-card{position:relative;width:100%;max-width:360px;background:var(--surface-raise);border:1px solid rgba(var(--ui-accent-rgb),.4);border-radius:8px;padding:22px 20px;color:var(--text);box-shadow:0 12px 44px rgba(0,0,0,.6);max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#vg-settings-modal .vgs-x{position:absolute;top:12px;right:12px;z-index:10;width:28px;height:28px;padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--ui-accent-rgb),.10);border:1px solid rgba(var(--ui-accent-rgb),.42);color:var(--text);font-size:1.7rem;line-height:1;cursor:pointer;transition:all .12s}
#vg-settings-modal .vgs-x:hover{background:var(--ui-accent);border-color:var(--ui-accent);color:#0b0b0b;transform:rotate(90deg)}
#vg-settings-modal .vgs-grp{margin-bottom:15px}
/* breathing room between the account/upgrade block and the first setting (CHART VALUES) */
#vg-settings-modal .vgs-settings{margin-top:22px;padding-top:20px;border-top:1px solid rgba(var(--ui-accent-rgb),.18)}
#vg-settings-modal .vgs-section{color:var(--ui-accent);font-size:.8rem;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;margin:20px 0 11px;padding-bottom:5px;border-bottom:1px solid rgba(var(--ui-accent-rgb),.28)}
#vg-settings-modal .vgs-body>.vgs-section:first-child{margin-top:16px}
/* the settings block already has its own divider (margin+padding+border), so the first
   section header inside it (COLLECTION) must not add another 20px on top */
#vg-settings-modal .vgs-settings>.vgs-section:first-child{margin-top:0}
#vg-settings-modal .vgs-lbl{font-size:.68rem;letter-spacing:1.3px;font-weight:700;color:var(--text-strong,#e8eef4);margin-bottom:6px}
#vg-settings-modal .vgs-acct{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
#vg-settings-modal .vgs-acct-info{min-width:0}
#vg-settings-modal .vgs-signout{flex:0 0 auto;padding:5px 12px;background:transparent;border:1px solid rgba(var(--ui-accent-rgb),.35);color:var(--ui-accent);border-radius:5px;cursor:pointer;font-family:inherit;font-size:.6rem;font-weight:600;letter-spacing:1.5px}
#vg-settings-modal .vgs-signout:hover{background:rgba(var(--ui-accent-rgb),.12);border-color:rgba(var(--ui-accent-rgb),.6)}
#vg-settings-modal .vgs-row{display:flex;width:100%}
#vg-settings-modal .vgs-btn{flex:1 1 0;text-align:center;background:transparent;border:1px solid rgba(var(--ui-accent-rgb),.25);color:var(--text-muted);font-family:inherit;font-size:.62rem;letter-spacing:1px;padding:8px 4px;cursor:pointer}
/* >4 options → a real N-column grid (e.g. Sort Order = 8 as a clean 4×2), not a faux-wrapped flex row */
#vg-settings-modal .vgs-gridwrap{display:flex;flex-direction:column;gap:5px}
#vg-settings-modal .vgs-row.vgs-grid{display:flex;gap:5px}
#vg-settings-modal .vgs-row.vgs-grid .vgs-btn{flex:1 1 0;min-width:0;margin:0;border-radius:4px}
#vg-settings-modal .vgs-btn+.vgs-btn{margin-left:-1px}
#vg-settings-modal .vgs-btn.on{background:rgba(var(--ui-accent-rgb),.14);color:var(--ui-accent);border-color:rgba(var(--ui-accent-rgb),.5);position:relative;z-index:1}
#vg-settings-modal .vgs-email{color:var(--text-strong);font-size:.86rem;font-weight:600;margin-bottom:3px;word-break:break-all;line-height:1.25}
#vg-settings-modal .vgs-tier{font-size:.66rem;letter-spacing:1.5px;color:var(--text-muted)}
#vg-settings-modal .vgs-tier.is-pro{color:var(--gold);font-weight:700}
#vg-settings-modal .vgs-act{width:100%;padding:9px;background:transparent;border:1px solid var(--ui-accent);color:var(--ui-accent);border-radius:4px;cursor:pointer;font-family:inherit;font-size:.75rem;letter-spacing:1px}
/* SIGN IN is the primary action, so it is the only FILLED button here and the only green
   one — the plan cards are outlined orange (A+) and gold (A++), so an outlined orange
   button read as a third card instead of the way in. --green is the brand colour in both
   themes (#4ade80 / #16a34a) and --accent-fg flips black/white to stay legible on it. */
#vg-settings-modal .vgs-act-primary{background:var(--green);border:2px solid var(--green);
  color:var(--accent-fg);font-weight:800;
  padding:19px 12px;font-size:.85rem;letter-spacing:1.4px;line-height:1.25;border-radius:6px;
  transition:filter .13s ease, transform .13s ease}
#vg-settings-modal .vgs-act-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
#vg-settings-modal .vgs-act-gold{margin-top:10px;border-color:var(--gold);color:var(--gold);
  background:rgba(255,209,102,.10);font-weight:800;padding:0 12px;min-height:38px;line-height:1;
  display:flex;align-items:center;justify-content:center;gap:2px;
  letter-spacing:1.2px;border-radius:6px;transition:background .13s ease, transform .13s ease}
#vg-settings-modal .vgs-act-gold:hover{background:rgba(255,209,102,.18);transform:translateY(-1px)}
#vg-settings-modal .vgs-caret{display:inline-block;margin-left:5px;font-size:.7em;line-height:1;
  transition:transform .15s ease}
#vg-settings-modal .vgs-act-gold.is-open .vgs-caret{transform:rotate(180deg)}
#vg-settings-modal .vgs-upsell{border:1px solid var(--gold);border-top:none;border-radius:0 0 6px 6px;
  margin-top:-4px;padding:12px 14px 11px;background:linear-gradient(180deg, rgba(255,209,102,.10), rgba(255,209,102,.04))}
#vg-settings-modal .vgs-upsell-list{list-style:none;margin:0 0 11px;padding:0}
#vg-settings-modal .vgs-upsell-list li{position:relative;padding:3px 0 3px 20px;color:var(--text);font-size:.75rem;line-height:1.35}
#vg-settings-modal .vgs-upsell-list li::before{content:"\2713";position:absolute;left:0;color:var(--gold);font-weight:700}
#vg-settings-modal .vgs-upsell .vgs-act-gold{margin-top:0}
#vg-settings-modal .vgs-note{font-size:.68rem;color:var(--text-faint);text-align:center;margin-top:6px}
#vg-settings-modal .vgs-benefits{margin:12px 0 16px}
#vg-settings-modal .vgs-subline{text-align:center;color:var(--text-muted);font-size:.62rem;
  letter-spacing:.5px;margin:8px 0 14px;line-height:1.6}
#vg-settings-modal .vgs-or{color:var(--ui-accent);font-weight:800;letter-spacing:1px}
#vg-settings-modal .vgs-plans{display:flex;gap:10px;margin:10px 0 18px;align-items:stretch}
/* Cards lift off the modal surface so they read as choices, not panels. Shadow is rgba
   (not a token) so it works on both the dark and light surfaces without a second rule. */
#vg-settings-modal .vgs-plan{position:relative;flex:1;border:1px solid rgba(var(--ui-accent-rgb),.4);border-radius:10px;
  padding:12px 12px 11px;background:rgba(var(--ui-accent-rgb),.05);
  transition:transform .13s ease, background .13s ease}
#vg-settings-modal .vgs-plan:hover{transform:translateY(-2px);background:rgba(var(--ui-accent-rgb),.1)}
/* centered, prominent header block, divided from the bullet list by a hairline */
#vg-settings-modal .vgs-plan-top{display:flex;justify-content:center;align-items:baseline}
#vg-settings-modal .vgs-plan-name{font-weight:800;letter-spacing:2px;color:var(--ui-accent);
  font-size:1.15rem;text-align:center;line-height:1.1}
#vg-settings-modal .vgs-plan-price{font-weight:800;color:var(--ui-accent);font-size:.95rem}
#vg-settings-modal .vgs-plan-price small{font-size:.58rem;color:var(--text-muted);font-weight:400;letter-spacing:0}
#vg-settings-modal .vgs-plan-cap{font-size:.68rem;letter-spacing:2px;color:var(--text-muted);
  text-align:center;text-transform:uppercase;margin:2px 0 8px;padding-bottom:8px;
  border-bottom:1px solid rgba(var(--ui-accent-rgb),.22)}
#vg-settings-modal .vgs-plan ul{list-style:none;margin:0;padding:0}
#vg-settings-modal .vgs-plan li{position:relative;padding:3px 0 3px 20px;color:var(--text);font-size:.75rem;line-height:1.35}
#vg-settings-modal .vgs-plan li::before{content:"\2713";position:absolute;left:0;color:var(--ui-accent);font-weight:700}
/* A++ premium treatment. Was .vgs-plan-soon, which greyed the card out — wrong now that
   it is purchasable, so it reads as the upgrade rather than a disabled teaser. */
/* Gold glow is INSET, not outer. .vgs-track is a 200%-wide flex row holding the main and
   sign-in panes side by side (sliding is just translateX(-50%)), so the A++ card is the
   rightmost thing in the main pane and ANY outer glow crosses the seam and lights up the
   sign-in panel. An inset glow cannot leave the card, so the seam stays clean. */
#vg-settings-modal .vgs-plan-gold{border-color:var(--gold);
  background:linear-gradient(180deg, rgba(255,209,102,.14), rgba(255,209,102,.06));
  box-shadow:inset 0 0 18px -8px var(--gold)}
#vg-settings-modal .vgs-plan-gold:hover{box-shadow:inset 0 0 22px -6px var(--gold)}
#vg-settings-modal .vgs-plan-gold .vgs-plan-name{color:var(--gold)}
#vg-settings-modal .vgs-plan-gold .vgs-plan-cap{color:var(--gold);opacity:.9;font-weight:700;border-bottom-color:rgba(255,209,102,.35)}
#vg-settings-modal .vgs-plan-gold li::before{color:var(--gold)}
#vg-settings-modal .vgs-plan-badge{position:absolute;top:-8px;right:9px;background:var(--gold);
  color:#1a1400;font-size:.44rem;font-weight:800;letter-spacing:1px;padding:2px 6px;border-radius:9px;white-space:nowrap}
#vg-settings-modal .vgs-cap-soon{color:var(--gold);font-weight:700}
#vg-settings-modal .vgs-locked{opacity:.4;pointer-events:none;filter:grayscale(1)}
#vg-settings-modal .vgs-checks{max-height:130px;overflow-y:scroll;border:1px solid rgba(var(--ui-accent-rgb),.25);border-radius:4px;padding:4px 8px;scrollbar-width:thin;scrollbar-color:rgba(var(--ui-accent-rgb),.55) rgba(255,255,255,.05)}
#vg-settings-modal .vgs-checks::-webkit-scrollbar{width:9px}
#vg-settings-modal .vgs-checks::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:5px}
#vg-settings-modal .vgs-checks::-webkit-scrollbar-thumb{background:rgba(var(--ui-accent-rgb),.45);border-radius:5px}
#vg-settings-modal .vgs-checks::-webkit-scrollbar-thumb:hover{background:rgba(var(--ui-accent-rgb),.7)}
#vg-settings-modal .vgs-chk{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:.75rem;color:var(--text);cursor:pointer}
#vg-settings-modal .vgs-chk input{accent-color:var(--ui-accent)}
@media (max-width:768px){#vg-settings-modal .vgs-checks{max-height:140px}}
/* Two-pane slider: benefits/settings <-> sign-in. The view height animates to the active pane. */
#vg-settings-modal .vgs-view{position:relative;overflow:hidden;transition:height .28s ease}
#vg-settings-modal .vgs-track{display:flex;align-items:flex-start;width:200%;transition:transform .28s ease}
#vg-settings-modal .vgs-pane{flex:0 0 50%;width:50%;box-sizing:border-box}
#vg-settings-modal .vgs-card.auth .vgs-track{transform:translateX(-50%)}
/* Sign-in pane (moved here from the old standalone auth modal) */
#vg-settings-modal .vgs-pane-auth{padding-left:2px}
#vg-settings-modal .vg-back{background:none;border:none;color:var(--text-muted);font-family:inherit;font-size:.72rem;letter-spacing:1px;cursor:pointer;padding:0 0 14px;display:flex;align-items:center;gap:6px}
#vg-settings-modal .vg-back:hover{color:var(--ui-accent)}
#vg-settings-modal .vgs-pane-auth h3{margin:0 0 16px;color:var(--ui-accent);text-align:center;font-size:1.05rem;letter-spacing:1.5px}
#vg-settings-modal .vg-g{width:100%;padding:16px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:8px;font-weight:700;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;font-family:inherit;box-shadow:0 1px 5px rgba(0,0,0,.28);transition:box-shadow .15s ease,transform .05s ease}
#vg-settings-modal .vg-g:hover{box-shadow:0 4px 14px rgba(0,0,0,.4)}
#vg-settings-modal .vg-g:active{transform:translateY(1px)}
#vg-settings-modal .vg-g svg{width:20px;height:20px;flex:0 0 auto}
/* Email sign-in is deliberately secondary: collapsed behind this toggle so Google is the
   only thing competing for attention when the pane opens. .vgs-view already transitions
   height, so re-measuring on toggle animates the reveal without any extra machinery. */
#vg-settings-modal .vg-or{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;background:none;border:none;padding:6px 0;margin:16px 0 0;color:var(--text-muted);font-family:inherit;font-size:.86rem;letter-spacing:1px;cursor:pointer;transition:color .15s}
#vg-settings-modal .vg-or:hover{color:var(--ui-accent)}
#vg-settings-modal .vg-or-chev{display:inline-block;font-size:.9em;line-height:1;transition:transform .22s ease}
#vg-settings-modal .vgs-pane-auth[data-email="on"] .vg-or-chev{transform:rotate(180deg)}
#vg-settings-modal .vg-email-box{display:none;padding-top:14px}
#vg-settings-modal .vgs-pane-auth[data-email="on"] .vg-email-box{display:block}
/* Sign In / Create Account — obvious sliding-pill toggle (a green thumb slides under the active side) */
#vg-settings-modal .vg-tabs{position:relative;display:flex;background:var(--modal-field);border:1px solid rgba(var(--ui-accent-rgb),.3);border-radius:999px;padding:4px;margin-bottom:14px}
#vg-settings-modal .vg-tabs::before{content:"";position:absolute;top:4px;left:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ui-accent);box-shadow:0 1px 5px rgba(var(--ui-accent-rgb),.4);transition:transform .26s cubic-bezier(.4,1.3,.5,1);z-index:0}
#vg-settings-modal .vgs-pane-auth[data-mode="signup"] .vg-tabs::before{transform:translateX(100%)}
#vg-settings-modal .vg-tab{position:relative;z-index:1;flex:1;padding:9px 4px;background:transparent;border:none;color:var(--text-muted);font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:color .2s}
#vg-settings-modal .vg-tab.on{color:var(--accent-fg)}
#vg-settings-modal .vgs-pane-auth input{width:100%;padding:9px 10px;margin-bottom:9px;background:var(--modal-field);border:1px solid var(--modal-field-bd);border-radius:5px;color:var(--text);font-family:inherit;box-sizing:border-box;font-size:.9rem}
#vg-settings-modal .vg-submit{width:100%;padding:10px;border-radius:5px;cursor:pointer;font-family:inherit;letter-spacing:1px;font-weight:600;background:var(--ui-accent);color:var(--accent-fg);border:none}
#vg-settings-modal .vg-submit:hover{filter:brightness(1.06)}
#vg-settings-modal .vg-forgot{display:block;text-align:center;color:var(--text-muted);margin-top:12px;font-size:.75rem;cursor:pointer;text-decoration:underline;background:none;border:none;width:100%;font-family:inherit}
#vg-settings-modal .vg-msg{font-size:.78rem;min-height:1.1em;margin:10px 0 0;text-align:center;color:var(--danger)}
    

/* ============================================================================
   Site footer (.credits) - moved from the _footer.html partial (loaded on
   all 6 pages that link this file). Print override lives in collect.html.
============================================================================ */
    .credits {
        text-align: center; max-width: 960px; margin: 40px auto 0; padding: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1); color: #555; font-size: 0.8rem;
    }
    body.work-mode .credits { border-color: var(--border, #d1d5db); color: #999; }

/* ============================================================================
   Confirm dialog (#vg-dialog / .vgd-*) - moved out of vgcollect-auth.js
   vgConfirm(); loads on all 6 pages that link this file. (Batch 2)
============================================================================ */
#vg-dialog{position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.78);padding:24px 14px;font-family:'Oxanium','Open Sans',system-ui,-apple-system,sans-serif;overflow-y:auto}
#vg-dialog.open{display:flex}
#vg-dialog .vgd-card{position:relative;width:100%;max-width:380px;background:var(--surface-raise);border:1px solid rgba(var(--ui-accent-rgb),.4);border-radius:8px;padding:24px 20px 20px;color:var(--text);box-shadow:0 12px 44px rgba(0,0,0,.6);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain}
#vg-dialog .vgd-title{color:var(--ui-accent);font-size:.72rem;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;margin:0 0 12px;padding-right:44px;padding-bottom:14px;border-bottom:1px solid rgba(var(--ui-accent-rgb),.28)}
#vg-dialog .vgd-title.is-gold{color:var(--gold);border-bottom-color:rgba(255,209,102,.35)}
#vg-dialog .vgd-title.is-danger{color:var(--danger);border-bottom-color:rgba(255,107,107,.35)}
#vg-dialog .vgd-sub{font-size:.9rem;font-weight:700;color:var(--text-strong);margin-bottom:8px;line-height:1.3;word-break:break-word}
#vg-dialog .vgd-body{font-size:.8rem;line-height:1.45;color:var(--text)}
#vg-dialog .vgd-body ul{list-style:none;margin:8px 0 0;padding:0}
#vg-dialog .vgd-body ul li{position:relative;padding:3px 0 3px 18px;font-size:.78rem}
#vg-dialog .vgd-body ul li::before{content:"\2713";position:absolute;left:0;color:var(--gold);font-weight:700}
#vg-dialog .vgd-rows{list-style:none;margin:10px 0 0;padding:0}
#vg-dialog .vgd-rows li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:.76rem;border-bottom:1px solid rgba(128,128,128,.18)}
#vg-dialog .vgd-rows li span:first-child{color:var(--text-muted);letter-spacing:.5px;white-space:nowrap}
#vg-dialog .vgd-rows li span:last-child{color:var(--text-strong);text-align:right;word-break:break-word}
#vg-dialog .vgd-acts{display:flex;gap:8px;margin-top:16px}
#vg-dialog .vgd-btn{flex:1;padding:10px 8px;border-radius:5px;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:1px;border:none}
#vg-dialog .vgd-ok{background:var(--ui-accent);color:var(--accent-fg)}
#vg-dialog .vgd-ok.is-danger{background:var(--danger);color:#fff}
/* gold CTA for the A++ upsell so the button matches the gold title + ticks */
#vg-dialog .vgd-ok.is-gold{background:var(--gold);color:#1a1400}
#vg-dialog .vgd-cancel{background:transparent;color:var(--text-muted);border:1px solid var(--modal-field-bd)}
#vg-dialog .vgd-alt{background:rgba(var(--ui-accent-rgb),.16);color:var(--ui-accent);border:1px solid rgba(var(--ui-accent-rgb),.5)}
#vg-dialog .vgd-btn:hover{filter:brightness(1.08)}
/* Circled X, top right -- the same affordance the page modals use (#editModal
   .pop-modal-close). Escape and a backdrop click already closed the dialog; this makes
   the way out visible instead of assumed. */
#vg-dialog .vgd-x{position:absolute;top:12px;right:12px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer;padding:0;transition:background .12s,border-color .12s,color .12s,transform .12s}
#vg-dialog .vgd-x:hover{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--accent-fg);transform:rotate(90deg)}
body.work-mode #vg-dialog .vgd-x{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.22);color:#1c1c1c}
    

/* ============================================================================
   Shared close-X: a geometric X (two crossing lines) drawn with pseudo-elements
   instead of the "times" glyph, so it is ALWAYS dead-centered in the circle (no
   font-metric drift). The button spins 90deg on hover and on press.
============================================================================ */
#vg-settings-modal .vgs-x, #vg-dialog .vgd-x {
    font-size: 0;
    transition: background .12s, border-color .12s, color .12s, transform .2s cubic-bezier(.34,1.2,.5,1);
}
#vg-settings-modal .vgs-x::before, #vg-settings-modal .vgs-x::after,
#vg-dialog .vgd-x::before, #vg-dialog .vgd-x::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44%; height: 2px; border-radius: 2px; background: currentColor;
}
#vg-settings-modal .vgs-x::before, #vg-dialog .vgd-x::before { transform: translate(-50%, -50%) rotate(45deg); }
#vg-settings-modal .vgs-x::after,  #vg-dialog .vgd-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
#vg-settings-modal .vgs-x:hover, #vg-dialog .vgd-x:hover {
    background: var(--ui-accent); border-color: var(--ui-accent); color: var(--accent-fg);
    transform: rotate(90deg);
}
#vg-settings-modal .vgs-x:active, #vg-dialog .vgd-x:active { transform: rotate(90deg) scale(.88); }
body.work-mode #vg-settings-modal .vgs-x:hover, body.work-mode #vg-dialog .vgd-x:hover {
    color: var(--accent-fg);
}