/* App shell: fixed left rail + content column with a slim top bar. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bg-1);border:1px solid var(--line-2);
  padding:10px 16px;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

#shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh;position:relative;z-index:1;max-width:100%;overflow-x:clip}
#col{min-width:0;display:flex;flex-direction:column}

/* ---------- left rail ---------- */
#rail{position:sticky;top:0;height:100vh;overflow-y:auto;min-width:0;background:var(--bg-1);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 0 16px}
.rail-brand{padding:2px 20px 18px;border-bottom:1px solid var(--line);margin-bottom:12px}
.rail-logo{display:block;line-height:0}
.rail-logo-full{height:26px;width:auto;display:block}          /* 1494x276 lockmark, aspect kept */
.rail-logo-mark{display:none;height:28px;width:auto}
.rail-logo:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.rail-product{display:block;font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin-top:11px}
.rail-brand #railAccount{display:block;font-size:11.5px;color:var(--ink-3);margin-top:5px}
#railNav{flex:1 1 auto;min-width:0;padding:0 10px}
.rail-sec{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);
  font-weight:700;padding:14px 10px 6px}
.rail-sec:first-child{padding-top:2px}
#railNav a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-s);
  font-size:12.5px;color:var(--ink-2);transition:background .15s var(--ease),color .15s var(--ease)}
#railNav a .dot{width:6px;height:6px;border-radius:2px;flex:0 0 auto;background:var(--ink-4)}
#railNav a .nm{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#railNav a .vl{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);flex:0 0 auto;font-variant-numeric:tabular-nums}
#railNav a:hover{background:var(--bg-3);color:var(--ink)}
#railNav a[aria-current=page]{background:var(--brand-tint);color:var(--brand-dark);font-weight:600;position:relative}
#railNav a[aria-current=page]::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;
  border-radius:0 2px 2px 0;background-image:var(--brand-gradient)}
#railNav a[aria-current=page] .vl{color:var(--ink-2)}
.rail-foot{padding:14px 20px 0;margin-top:12px;border-top:1px solid var(--line);font-size:10.5px;
  color:var(--ink-4);line-height:1.5}

/* ---------- top bar ---------- */
#topbar{position:sticky;top:0;z-index:40;background:var(--topbar-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;
  padding:0 32px;height:56px;min-height:56px}
.crumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);min-width:0;flex:1 1 auto}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.crumb .sep{color:var(--ink-4)}
.crumb .cur{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.period{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-3)}
.period>span{letter-spacing:.09em;text-transform:uppercase;font-size:9.5px;font-weight:700;color:var(--ink-4)}
.period select{font:inherit;font-size:11.5px;color:var(--ink);background:var(--bg-1);
  border:1px solid var(--line-2);border-radius:var(--r-s);padding:4px 7px;cursor:pointer}
.top-total{display:flex;align-items:baseline;gap:7px;padding-left:18px;border-left:1px solid var(--line)}
.top-total .num{font-size:14.5px}
.top-total-l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.method-btn{font-size:11.5px;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;
  padding:5px 11px;transition:.16s var(--ease)}
.method-btn:hover,.method-btn[aria-expanded=true]{color:var(--brand-dark);background:var(--brand-tint);border-color:var(--brand-soft)}

.method-pop{position:absolute;top:50px;right:32px;z-index:70;width:min(400px,calc(100vw - 40px));
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--shadow-2);padding:18px 20px}
.method-pop h3{margin:0;font-size:13px;font-weight:600}
.method-pop .formula{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-s);padding:9px 11px;margin:11px 0 4px}
.method-pop .worked{font-size:11px;color:var(--ink-3);font-family:var(--mono);margin:0 0 14px}
.method-pop dl{display:grid;grid-template-columns:auto 1fr;gap:9px 12px;margin:0;font-size:12px;align-items:start}
.method-pop dd{margin:0;color:var(--ink-3);line-height:1.45}
.method-pop .close{position:absolute;top:12px;right:12px;color:var(--ink-3);font-size:14px;line-height:1;
  width:24px;height:24px;border-radius:5px;display:grid;place-items:center}
.method-pop .close:hover{background:var(--bg-3);color:var(--ink)}

/* ---------- content ---------- */
main{flex:1 1 auto;min-width:0;padding-bottom:80px}
.view{animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
footer.foot{border-top:1px solid var(--line);padding:18px 32px;font-size:11px;color:var(--ink-4);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* page header shared by every destination */
.page-head{padding:38px 0 22px}
.page-head .eyebrow{display:block}
.page-head h1{margin:9px 0 0;font-size:26px;font-weight:600;letter-spacing:-.018em}
.page-head p{margin:8px 0 0;font-size:13px;color:var(--ink-3);max-width:70ch}

.unavail{padding:80px 0;max-width:46ch}
.unavail h2{font-size:19px;font-weight:600;margin:8px 0 6px}
.unavail p{color:var(--ink-3);font-size:13px;margin:0}
.unavail-a{display:flex;gap:10px;align-items:center;margin-top:18px}
.unavail-a button,.unavail-a a{border:1px solid var(--line-2);border-radius:6px;padding:7px 14px;font-size:12.5px;color:var(--ink-2)}
.unavail-a button:hover,.unavail-a a:hover{color:var(--ink);background:var(--bg-3)}

@media (max-width:1000px){
  #shell{grid-template-columns:minmax(0,1fr)}
  #rail{position:static;height:auto;flex-direction:column;border-right:0;border-bottom:1px solid var(--line);padding:14px 0 10px}
  .rail-logo-full{height:24px}
  .rail-brand{padding:0 20px 12px;margin-bottom:8px}
  #railNav{display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    min-width:0;max-width:100%;padding:0 14px 2px}
  .rail-sec{display:none}
  #railNav a{flex:0 0 auto}
  #railNav a .vl{display:none}
  .rail-foot{display:none}
  #topbar{padding:0 20px;gap:12px}
  .top-total{padding-left:12px}
  .wrap{padding:0 20px}
  footer.foot{padding:18px 20px}
}
@media (max-width:620px){
  .period{display:none}
  .crumb{font-size:11px}
}

/* collapsed / narrow rail keeps the icon mark only */
@media (max-width:1180px) and (min-width:1001px){
  #shell{grid-template-columns:76px minmax(0,1fr)}
  .rail-logo-full{display:none}
  .rail-logo-mark{display:block;margin:0 auto}
  .rail-product,.rail-brand #railAccount,#accountSlot,.rail-foot,.rail-sec{display:none}
  .rail-brand{padding:2px 10px 14px}
  #railNav{padding:0 8px}
  #railNav a{justify-content:center;padding:9px 6px}
  #railNav a .nm,#railNav a .vl{display:none}
  #railNav a .dot{width:9px;height:9px}
}