/* ══════════════════════════════════════════════════════════════════
   app-shell.css — the signed-in frame: navy left menu + navy top bar
   ──────────────────────────────────────────────────────────────────
   Taken from the dashboard (dashboard.html) so the Budget planner, the
   profile pages and the dashboard share one menu, one top bar and one
   theme. Built by vendor/js/app-shell.js. Every class is prefixed as- so
   it cannot collide with the pages' own .rail / .top / .card styles.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --as-w:234px;
  --as-bar:#0B2F5E; --as-bar-2:#123A6F; --as-dim:rgba(255,255,255,.62);
  --as-accent:#EA580C; --as-accent-2:#F97316;
  --as-panel:#FFFFFF; --as-panel-2:#F6F8F9; --as-rule:#E1E6E7;
  --as-fg:#16202B; --as-fg-2:#3C4855; --as-fg-3:#64717E;
  --as-good:#12A07E; --as-warn:#B8730A; --as-bad:#E23D5C; --as-info:#2F7CD6;
  --as-soft:rgba(234,88,12,.1);
  --as-sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --as-bar:#0A1A33; --as-bar-2:#10264A; --as-dim:rgba(255,255,255,.6);
  --as-accent:#F97316; --as-accent-2:#FB923C;
  --as-panel:#141D27; --as-panel-2:#1A2531; --as-rule:#293542;
  --as-fg:#EEF3F5; --as-fg-2:#C2CDD6; --as-fg-3:#8E9CA8;
  --as-good:#2FC09B; --as-warn:#E09A2C; --as-bad:#F4647F; --as-info:#7DB3F2;
  --as-soft:rgba(249,115,22,.14);
}}
:root[data-theme="dark"]{
  --as-bar:#0A1A33; --as-bar-2:#10264A; --as-dim:rgba(255,255,255,.6);
  --as-accent:#F97316; --as-accent-2:#FB923C;
  --as-panel:#141D27; --as-panel-2:#1A2531; --as-rule:#293542;
  --as-fg:#EEF3F5; --as-fg-2:#C2CDD6; --as-fg-3:#8E9CA8;
  --as-good:#2FC09B; --as-warn:#E09A2C; --as-bad:#F4647F; --as-info:#7DB3F2;
  --as-soft:rgba(249,115,22,.14);
}

/* the page content sits to the right of the menu */
.as-host{padding-left:var(--as-w)}
.as-rail,.as-rail *,.as-top,.as-top *,.as-pop,.as-pop *{box-sizing:border-box}
.as-rail :where(button,a):focus-visible,.as-top :where(button,a,select,input):focus-visible,.as-pop :where(button,a):focus-visible{
  outline:2px solid var(--as-accent);outline-offset:2px;border-radius:7px}

/* ---- left menu ---- */
.as-rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--as-w);z-index:45;
  background:var(--as-bar);color:#fff;font:14.5px/1.5 var(--as-sans);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;
  padding-block:16px calc(14px + env(safe-area-inset-bottom,0px));
  padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:14px;
}
.as-logo{display:block;padding:2px 4px 16px;text-decoration:none}
.as-logo img{display:block;height:40px;width:auto}
.as-group{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:16px 8px 7px}
.as-nav{appearance:none;border:0;width:100%;text-align:left;background:transparent;color:var(--as-dim);
  font:inherit;font-size:13.5px;font-weight:500;padding:8px 10px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;gap:10px;text-decoration:none;line-height:1.5}
.as-nav:hover{background:rgba(255,255,255,.08);color:#fff}
.as-nav[aria-current="page"]{background:var(--as-accent);color:#fff;font-weight:650}
.as-nav svg{width:16px;height:16px;flex:none;opacity:.9}
.as-tag{margin-left:auto;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.16);padding:1px 6px;border-radius:999px;line-height:1.6}
.as-nav[aria-current="page"] .as-tag{background:rgba(0,0,0,.22)}
.as-space{flex:1}
.as-site{display:flex;flex-wrap:wrap;gap:2px 4px;padding:12px 4px 10px;margin-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.as-site a{font-size:12px;font-weight:500;color:rgba(255,255,255,.55);text-decoration:none;padding:3px 6px;border-radius:6px;line-height:1.5}
.as-site a:hover{color:#fff;background:rgba(255,255,255,.08)}
/* short laptop screens: keep the name card in view; the logo still goes home */
@media (min-width:901px) and (max-height:760px){.as-site{display:none}}
.as-user{appearance:none;border:0;width:100%;text-align:left;font:inherit;color:#fff;cursor:pointer;
  display:flex;align-items:center;gap:10px;background:var(--as-bar-2);border-radius:10px;padding:10px;margin-top:10px}
.as-user:hover,.as-user[aria-expanded="true"]{background:#1A4A85}
.as-av{width:32px;height:32px;border-radius:9px;background:var(--as-accent);display:grid;place-items:center;
  font-weight:750;font-size:13px;color:#fff;flex:none;background-size:cover;background-position:center}
.as-nm{display:block;font-size:12.5px;font-weight:650;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-sb{display:block;font-size:11px;color:var(--as-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-user>span:nth-child(2){min-width:0;flex:1}
.as-user svg{flex:none;opacity:.6}

/* ---- top bar ---- */
.as-top{
  position:sticky;top:0;z-index:40;
  background:var(--as-bar);color:#fff;font:14.5px/1.5 var(--as-sans);-webkit-font-smoothing:antialiased;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:62px;
  padding-block:10px;padding-inline:max(18px,env(safe-area-inset-left,0px)) max(18px,env(safe-area-inset-right,0px));
  border-bottom:1px solid rgba(255,255,255,.1);
}
.as-crumb{font-size:11.5px;color:var(--as-dim);line-height:1.4}
.as-crumb a{color:var(--as-dim);text-decoration:none}.as-crumb a:hover{color:#fff}
.as-crumb b{color:#fff;font-weight:600}
.as-title{margin:1px 0 0;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:#fff;font-family:var(--as-sans)}
/* a long section name shortens with … rather than pushing the bar wider than a phone */
.as-top>div:has(>.as-title){min-width:0;flex:0 1 auto}
.as-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-grow{flex:1 1 auto}
.as-slot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.as-slot:empty{display:none}
.as-seg{display:flex;background:rgba(255,255,255,.1);border-radius:9px;padding:3px;gap:2px}
.as-seg button{appearance:none;border:0;background:transparent;color:var(--as-dim);font:inherit;font-size:12.5px;
  font-weight:550;padding:6px 11px;border-radius:6px;cursor:pointer;white-space:nowrap;line-height:1.5}
.as-seg button:hover{color:#fff;background:rgba(255,255,255,.09)}
.as-seg button[aria-pressed="true"]{background:#fff;color:var(--as-bar);font-weight:680}
.as-seg button{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px}
.as-seg svg{display:block}
.as-ghost{appearance:none;border:1px solid rgba(255,255,255,.26);background:transparent;color:#fff;font:inherit;
  font-size:12.5px;font-weight:600;padding:7px 9px;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;position:relative;line-height:1.4}
.as-ghost:hover,.as-ghost[aria-expanded="true"]{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.as-ghost svg{display:block;flex:none}
.as-menu{display:none}
/* the search box: the list under it is vendor/js/site-search.js */
.as-top .as-sbar{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 7px 0 10px;border-radius:9px;cursor:text;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--as-dim);font-family:var(--as-sans)}
.as-top .as-sbar svg{flex:none}
.as-top .as-sbar:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.as-top .as-sbar:focus-within{background:rgba(255,255,255,.14);border-color:var(--as-accent);color:#fff}
.as-top .mbt-sin{border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:13px;width:180px;min-width:0;padding:0;margin:0;
  -webkit-appearance:none;appearance:none}
.as-top .mbt-sin:focus-visible{outline:0}
.as-top .mbt-sin::placeholder{color:var(--as-dim);opacity:1}
.as-top .mbt-sin::-webkit-search-cancel-button{display:none}
.as-top .mbt-sx{display:none;place-items:center;flex:none;width:22px;height:22px;border:0;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font:600 15px/1 var(--as-sans)}
.as-top .as-sbar.has-q .mbt-sx,.as-top .as-sbar.is-open .mbt-sx{display:grid}
/* narrow: the box is an icon until tapped, then opens across the top bar */
@media (max-width:1180px){
  .as-top .as-sbar:not(.is-open){width:36px;padding:0;justify-content:center;cursor:pointer}
  .as-top .as-sbar:not(.is-open) .mbt-sin{display:none}
  .as-top .as-sbar.is-open{position:fixed;left:12px;right:12px;z-index:2001;background:var(--as-bar);box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
  .as-top .as-sbar.is-open .mbt-sin{flex:1;width:auto;font-size:16px}
}
.as-dot{position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--as-accent);color:#fff;font-size:.66rem;font-weight:800;line-height:18px;text-align:center;
  box-shadow:0 0 0 2px var(--as-bar);font-variant-numeric:tabular-nums}
.as-dot[hidden]{display:none}

/* ---- pop-overs: notifications and the account menu ---- */
.as-pop{position:fixed;z-index:58;background:var(--as-panel);color:var(--as-fg);border:1px solid var(--as-rule);
  border-radius:14px;box-shadow:0 24px 60px -20px rgba(8,14,28,.55);font:14px/1.5 var(--as-sans);overflow:hidden}
.as-pop[hidden]{display:none}
.as-bell{top:68px;right:18px;width:min(360px,calc(100vw - 24px))}
.as-acct{left:12px;bottom:78px;width:calc(var(--as-w) - 24px);padding:6px}
.as-pop-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--as-rule)}
.as-pop-hd b{font-size:.95rem}
.as-pop-hd small{font-size:.76rem;color:var(--as-fg-3)}
.as-list{list-style:none;margin:0;padding:6px;max-height:min(420px,60vh);overflow-y:auto}
.as-item{display:grid;grid-template-columns:10px minmax(0,1fr) 8px;gap:11px;align-items:start;width:100%;
  padding:10px;border-radius:10px;text-align:left;color:var(--as-fg);font:inherit;background:none;border:0;cursor:pointer}
.as-item:hover,.as-item:focus-visible{background:var(--as-soft);outline:none}
.as-mark{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--as-fg-3)}
.as-item.s-bad .as-mark{background:var(--as-bad)}
.as-item.s-watch .as-mark{background:var(--as-warn)}
.as-item.s-info .as-mark{background:var(--as-info)}
.as-item b{display:block;font-size:.87rem;font-weight:600;line-height:1.35}
.as-item span span{display:block;font-size:.8rem;color:var(--as-fg-2);line-height:1.45;margin-top:2px}
.as-new{width:8px;height:8px;border-radius:50%;background:var(--as-accent);margin-top:6px}
.as-empty{padding:22px 14px;text-align:center;font-size:.85rem;color:var(--as-fg-2);line-height:1.55}
.as-empty b{display:block;color:var(--as-fg);margin-bottom:4px}
.as-pop-ft{margin:0;padding:10px 16px 12px;border-top:1px solid var(--as-rule);font-size:.74rem;color:var(--as-fg-3);line-height:1.5}
.as-pop-ft a{display:block;margin-top:3px;color:var(--as-accent);font-weight:600;text-decoration:none}
.as-pop-ft a:hover{text-decoration:underline}
.as-mi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;border:0;background:none;
  font:inherit;font-size:.88rem;font-weight:500;color:var(--as-fg-2);text-decoration:none;text-align:left;cursor:pointer}
.as-mi:hover,.as-mi:focus-visible{background:var(--as-soft);color:var(--as-fg);outline:none}
.as-mi svg{color:var(--as-fg-3);flex:none}
.as-mi.as-out{color:var(--as-bad)}.as-mi.as-out svg{color:var(--as-bad)}
.as-sep{height:1px;background:var(--as-rule);margin:5px 4px}
.as-mhd{padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--as-rule)}
.as-mhd b{display:block;font-size:.9rem;overflow:hidden;text-overflow:ellipsis}
.as-mhd small{display:block;font-size:.74rem;color:var(--as-fg-3);word-break:break-all}

/* ---- the month and year calendar (vendor/js/month-picker.js) ---- */
button.mp-btn{appearance:none;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff;
  font:inherit;font-family:var(--as-sans);font-size:12.5px;font-weight:600;padding:7px 10px;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;line-height:1.4;width:auto;height:auto;min-width:0}
button.mp-btn:hover,button.mp-btn[aria-expanded="true"]{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
button.mp-btn svg{display:block;flex:none}
.mp-val{font-variant-numeric:tabular-nums}
.mp{width:min(292px,calc(100vw - 24px));padding:12px}
.mp button{font-family:var(--as-sans)}
.mp-hd{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.mp-one{flex:1;text-align:center;font-size:.95rem}
.mp-step{appearance:none;flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--as-rule);background:var(--as-panel);
  color:var(--as-fg);font-size:1.1rem;line-height:1;cursor:pointer}
.mp-step:hover:not(:disabled){background:var(--as-soft)}
.mp-step:disabled{opacity:.35;cursor:default}
.mp-year{flex:1;min-width:0;height:32px;border-radius:8px;border:1px solid var(--as-rule);background:var(--as-panel-2);
  color:var(--as-fg);font:inherit;font-size:.92rem;font-weight:650;text-align:center;text-align-last:center;cursor:pointer;
  font-variant-numeric:tabular-nums}
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.mp-grid button{appearance:none;position:relative;height:38px;border:0;border-radius:8px;background:var(--as-panel-2);
  color:var(--as-fg);font-size:.86rem;font-weight:550;cursor:pointer}
.mp-grid button:hover:not(:disabled){background:var(--as-soft)}
.mp-grid button.mp-now{box-shadow:inset 0 0 0 1.5px var(--as-accent)}
.mp-grid button[aria-pressed="true"]{background:var(--as-accent);color:#fff;font-weight:700;box-shadow:none}
.mp-grid button:disabled{opacity:.35;cursor:default}
.mp-grid i{position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--as-good)}
.mp-grid button[aria-pressed="true"] i{background:#fff}
.mp-fy{appearance:none;display:block;width:100%;margin-top:8px;padding:8px 10px;border-radius:9px;border:1px solid var(--as-rule);
  background:var(--as-panel);color:var(--as-fg);text-align:left;cursor:pointer}
.mp-fy b{display:block;font-size:.86rem;font-weight:650}
.mp-fy small{display:block;font-size:.74rem;color:var(--as-fg-3)}
.mp-fy:hover:not(:disabled){background:var(--as-soft)}
.mp-fy[aria-pressed="true"]{border-color:var(--as-accent);background:var(--as-soft)}
.mp-fy:disabled{opacity:.4;cursor:default}
.mp-quick{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--as-rule)}
.mp-quick span{width:100%;font-size:.7rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--as-fg-3)}
.mp-quick button{appearance:none;border:1px solid var(--as-rule);background:var(--as-panel);color:var(--as-fg-2);
  font-size:.8rem;font-weight:550;padding:5px 10px;border-radius:999px;cursor:pointer}
.mp-quick button:hover{background:var(--as-soft);color:var(--as-fg)}
.mp-quick button[aria-pressed="true"]{background:var(--as-accent);border-color:var(--as-accent);color:#fff}
.mp :where(button,select):focus-visible{outline:2px solid var(--as-accent);outline-offset:2px}

/* closed, it is hidden outright: a blur left on an invisible full-screen layer still costs every scroll */
.as-scrim{position:fixed;inset:0;background:rgba(8,14,20,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility 0s .22s;z-index:44}

/* ---- narrow screens: the menu slides in ---- */
@media (max-width:900px){
  .as-host{padding-left:0}
  .as-rail{transform:translateX(-100%);transition:transform .24s;box-shadow:12px 0 40px -18px rgba(0,0,0,.6)}
  .as-rail.on{transform:none}
  .as-rail.on ~ .as-scrim,body.as-navopen .as-scrim{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;backdrop-filter:blur(2px)}
  .as-menu{display:inline-flex}
  .as-top{gap:8px}
  .as-acct{left:12px;bottom:auto;top:auto}
}
.as-rail-seg{display:none}
@media (max-width:560px){
  .as-crumb{display:none}
  .as-seg button{padding:5px 7px}
  .as-top > .as-seg{display:none}
  .as-rail-seg{display:flex;align-self:flex-start;margin:10px 4px 0}
}
@media print{.as-rail,.as-top,.as-scrim,.as-pop{display:none!important}.as-host{padding-left:0}}
@media (prefers-reduced-motion:reduce){.as-rail,.as-scrim{transition:none}}

/* the chat assistant's button sits just right of the menu, not on the account card */
@media (min-width:901px){
  .as-host .cbw-launcher,body.as-host .cbw-launcher{left:calc(var(--as-w) + 22px)}
  .as-host .cbw-panel,body.as-host .cbw-panel{left:calc(var(--as-w) + 22px)}
}