/* AXLE ONE 2026 shell refresh.
   Inspired by the spatial rhythm of modern workspaces, not a clone of another app.
   Black, near-black and warm gold only: no medium-grey structural panels.
   Existing section/form IDs and interactive behaviour remain untouched. */
:root{
  --bg:#080808;
  --side:#0d0d0d;
  --panel:#12110f;
  --edge:#27241e;
  --text:#f6f3eb;
  --muted:#a9a398;
  --gold:#e7b122;
  --surface-hover:#1b1811;
  --surface-deep:#0e0e0d;
  --page-gutter:clamp(22px,3vw,52px);
}
html,body{background:var(--bg);color:var(--text)}
.shell{display:flex;min-height:100dvh;align-items:stretch;background:var(--bg)}
.shell-icon{height:19px;width:19px;display:inline-block;flex:0 0 19px;stroke:currentColor;stroke-width:1.85;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sidebar{
 width:270px;flex:0 0 270px;height:100dvh;position:sticky;top:0;
 background:var(--side);border-right:1px solid #24221d;
 padding:27px 14px 17px;display:flex;flex-direction:column;gap:0;
 box-shadow:none;z-index:20;overflow-x:hidden;overflow-y:auto;
}
.signature{gap:12px;padding:0 7px 18px;margin-bottom:14px;border-bottom:1px solid #221f19}
.signature-mark{
 width:46px;height:46px;display:flex;align-items:center;justify-content:center;
 flex:0 0 46px;min-width:46px;max-width:46px;box-sizing:border-box;
 white-space:nowrap;overflow:hidden;word-break:normal;
 border:1px solid #4e3f21;border-radius:12px;color:var(--gold);
 font-family:Manrope,Arial,sans-serif;font-size:15px;font-weight:800;
 line-height:1;letter-spacing:-.7px;
}
.signature-text{min-width:0}
.signature strong{font-size:14px;font-weight:800;letter-spacing:-.35px;white-space:nowrap}
.signature small{font-size:10px;color:#817d74;line-height:1.4;white-space:nowrap}
.sidebar-mobile-close{display:none}
#nav{display:flex;flex-direction:column;gap:21px;padding:8px 3px 0}
.nav-group{display:grid;gap:3px}
.nav-group-title{color:#777166;font-size:11px;font-weight:700;padding:0 11px;margin:0 0 6px;letter-spacing:0;text-transform:none}
#nav button{
 width:100%;display:flex;align-items:center;gap:13px;padding:10px 12px;
 border:1px solid transparent;border-radius:9px;color:#bab5a9;
 font-size:12.5px;font-weight:650;line-height:1.35;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
 background:transparent;transition:background .16s,color .16s,border-color .16s;
}
#nav button .shell-icon{height:17px;width:17px;flex-basis:17px;color:#80796b}
#nav button.active{border-left:1px solid #57451c;background:#211b10;color:#f3c65b}
#nav button.active .shell-icon{color:var(--gold)}
#nav button:hover{background:#1a1813;color:#f4efe3}
#nav button:hover .shell-icon{color:#d4aa55}
.main{
 flex:1 1 0;min-width:0;width:100%;
 max-width:none;margin:0;padding:0 var(--page-gutter) 100px;
 background:radial-gradient(80vw 42vw at 72% -35%,#171209 0%,transparent 78%),var(--bg);
}
.topbar{
 margin:0 calc(-1 * var(--page-gutter)) 29px;
 padding:21px var(--page-gutter);border-bottom:1px solid #27231b;
 background:#0e0d0b;display:flex;align-items:center;justify-content:space-between;
 gap:24px;flex-wrap:wrap;min-height:116px;
 position:relative;z-index:11;
}
.topbar-heading{min-width:0}
.topbar-location{display:flex;align-items:center;gap:11px;color:#8d8678;font-size:11px;font-weight:700;margin-bottom:6px}
.topbar-location span:last-child{color:#d8c59b}
.location-divider{font-size:16px;font-weight:400;color:#675c47}
h1{font-size:clamp(24px,2.5vw,33px);line-height:1.22;letter-spacing:-1.4px;margin:0 0 4px;color:#f8f5ed}
h2{font-size:16px;letter-spacing:-.4px;font-weight:800;line-height:1.45;margin:0 0 16px}
h3{color:var(--text)}
.topbar p{font-size:12px;color:#8e8779;line-height:1.5}
.actions{gap:10px;flex-wrap:wrap;justify-content:flex-end}
.topbar-date{
 color:#c0b5a0;white-space:nowrap;border:1px solid #2a261e;
 padding:10px 13px;border-radius:10px;font:600 11px Manrope,Arial,sans-serif;
 background:#12110e;
}
.button,.item button,.workload-actions button{
 background:#1a1814;border:1px solid #343026;color:#e3dccc;
 border-radius:9px;box-shadow:none;font-weight:700;
 transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.button{padding:10px 15px;font-size:12px}
.button.primary,.button-quick{
 background:var(--gold);color:#0a0907;border-color:var(--gold);
}
.button-quick{display:inline-flex;align-items:center;gap:8px;font-weight:800}
.button-quick .shell-icon{width:15px;height:15px;flex-basis:15px}
.button-signout{display:inline-flex;align-items:center;gap:8px}
.button-signout .shell-icon{width:15px;height:15px;flex-basis:15px}
.account-actions{margin-top:22px;padding-top:17px;border-top:1px solid var(--edge)}
.account-actions .button-signout{padding:10px 14px}
.button:hover:not(:disabled),.item button:hover,.workload-actions button:hover{
 background:#292318;border-color:#97752b;color:#f4d078;filter:none;
}
.button.primary:hover:not(:disabled),.button-quick:hover:not(:disabled){
 background:#f2c34a;border-color:#f2c34a;color:#080808;
}
.panel{
 background:var(--panel);
 border:1px solid var(--edge);
 border-radius:13px;padding:24px;min-width:0;
 box-shadow:0 6px 22px #00000013;
}
.panel:hover{border-color:#322c22}
.auth-panel{max-width:550px;background:#12110f;border-color:#30291a}
#dashboard{max-width:1640px;margin-left:auto;margin-right:auto}
.stats{gap:14px;margin-bottom:18px}
.stats .stat{
 min-width:0;min-height:148px;
 background:linear-gradient(145deg,#16140f 0%,#111110 100%);
 border-color:#2a251b;
 padding:22px 23px;gap:9px;
}
.stat>span,.stat small{font-size:11px;color:#a59c8b;font-weight:600}
.stat strong{color:#f4d17a;font:800 clamp(25px,2.6vw,32px)/1.2 Manrope,Arial,sans-serif;letter-spacing:-1.3px}
.cols{gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr)}
.item{border-color:#29251e;padding:14px 0;gap:14px}
.item-main strong{color:#f5efe2;font-size:12.5px;line-height:1.5}
.item-main small{color:#a29a8b;line-height:1.6;font-size:11.5px}
.item button{font-size:11px;padding:7px 10px}
.muted,.empty,.fine-print{color:#a49d8e}
.empty{line-height:1.6}
.form-stack label{font-size:12px;color:#b1a99a;gap:7px}
.form-stack input,.form-stack textarea,.form-stack select,.actions select,
.list-filter select,.list-filter input{
 border-color:#332e25!important;background:#0f0f0e!important;
 color:#f3efe4!important;border-radius:9px!important;
 font-size:12px;min-height:42px;
}
.form-stack input:focus,.form-stack textarea:focus,.list-filter input:focus{
 border-color:#ad8736!important;
}
.form-stack input::placeholder,.form-stack textarea::placeholder{color:#776f62}
.list-filter{color:#b5ac9b;flex-wrap:wrap}
.list-filter input{width:min(100%,320px);padding:9px 11px}
.pair{gap:13px}
.sectionhead{margin-bottom:5px}
.sectionhead h2{margin-bottom:11px}
.pill{color:#edc668;border-color:#6b5422;background:#1e190f}
.timer-running-box,.estimate-context,.quote-total{
 background:#201a0e;border-color:#58451d;color:#f7e4b1;
}
.workload-meter{background:#2a2419}
.workload-meter-fill{background:#e7b122}
.workload-details{color:#a49a89}
.workload-details strong{color:#f1e6cc}
.workload-actions button{font-size:11px}
#status:not(:empty){background:#24200f;border-color:#5b491c;color:#f7d780}
#status.error{background:#2b1511;border-color:#8a3e30;color:#ffb7a5}
#nav button:focus-visible,.bottom-nav button:focus-visible,.sidebar-mobile-close:focus-visible{
 outline:2px solid var(--gold);outline-offset:2px;
}
/* Theme all shared date, time, dropdown and dialog controls, not only cards. */
.axle-select-trigger,.axle-date-input,.axle-calendar-trigger,.axle-dialog-input{
 background:#11100f;border-color:#393125;color:#f6efdf;
}
.axle-select-trigger:hover,.axle-date-input:hover,.axle-calendar-trigger:hover{
 background:#16130e;border-color:#846a32;
}
.axle-select-trigger[aria-expanded=true]{background:#221c10;border-color:#e7b122}
.axle-popover,.axle-dialog{background:#13120f;border-color:#463822;color:#f8f2e7;box-shadow:0 24px 70px #000d}
.axle-option{color:#d7cebe}
.axle-option.selected,.axle-option:hover,.axle-option:focus-visible{
 background:#292111;color:#f1c25b;
}
.axle-calendar-nav,.axle-calendar-today{background:#211c13;border-color:#403524;color:#f2e6ce}
.axle-calendar-day:hover{background:#292111}
.axle-dialog-secondary{background:#211b13;border-color:#483d2b;color:#f7f1e5}
.axle-dialog-primary{background:#e7b122;color:#070707}
.axle-dialog::backdrop{background:#030303d9}
.sidebar-scrim{display:none}
/* Tablet: let data cards collapse before horizontal space becomes cramped. */
@media(max-width:1240px){
 .sidebar{width:245px;flex-basis:245px}
 .main{--page-gutter:clamp(18px,2.4vw,32px)}
 .cols{grid-template-columns:1fr}
}
@media(max-width:900px){
 .shell{display:block}
 .sidebar{
  position:fixed;left:0;top:0;bottom:0;width:min(310px,85vw);height:100dvh;
  transform:translateX(-102%);transition:transform .22s ease;
  z-index:60;box-shadow:18px 0 50px #0008;display:flex;
  overflow-y:auto;
 }
 .mobile-nav-open .sidebar{transform:translateX(0)}
 .sidebar-mobile-close{
  display:grid;place-items:center;width:31px;height:31px;margin-left:auto;
  background:#201b12;border:1px solid #3f3320;color:#e7b122;border-radius:9px;
 }
 .sidebar-mobile-close .shell-icon{width:16px;height:16px}
 .sidebar-scrim{display:block;position:fixed;inset:0;background:#000c;z-index:59}
 .sidebar-scrim[hidden]{display:none!important}
 .main{--page-gutter:clamp(14px,3.5vw,25px);padding-bottom:calc(102px + env(safe-area-inset-bottom))}
 .topbar{min-height:90px;gap:12px;padding-top:17px;padding-bottom:17px;margin-bottom:19px}
 .topbar h1{font-size:24px}
 .topbar p{font-size:11px}
 .topbar-date{display:none}
 .bottom-nav{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  position:fixed;left:0;right:0;bottom:0;z-index:51;
  padding:8px max(4px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
  gap:3px;background:#10100ef5;border-top:1px solid #342c1b;
  backdrop-filter:blur(18px);
  overflow:hidden;box-shadow:0 -10px 35px #0006;
 }
 .bottom-nav button{
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:5px;min-width:0;flex:1 1 0;max-width:none;
  color:#a7a092;background:transparent;border:0;border-radius:9px;
  padding:9px 3px;font-size:10px;line-height:1.2;white-space:nowrap;
  scroll-snap-align:none;
 }
 .bottom-nav button .shell-icon{height:19px;width:19px}
 .bottom-nav button.active,.bottom-nav button:hover,#mobile-menu-toggle[aria-expanded="true"]{
  background:#271f10;color:#e7b122;
 }
 .stats{gap:10px}
 .stats .stat{min-height:124px;padding:16px}
}
@media(max-width:580px){
 .topbar{flex-wrap:wrap;align-items:flex-start}
 .topbar-location{font-size:10px;margin-bottom:5px}
 .topbar h1{font-size:22px}
 .actions{margin-left:0;width:100%;justify-content:flex-start;gap:8px}
 .button-quick{padding:8px 12px}
 .button-signout{padding:8px 11px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .stats>.stat:last-child{grid-column:span 2}
 .stats .stat strong{font-size:25px}
 .panel{padding:18px}
 .pair{grid-template-columns:1fr}
 .cols{gap:13px}
 .item{align-items:flex-start}
 .formactions .button{min-height:39px}
}
@media(max-width:370px){
 .stats{grid-template-columns:1fr}
 .stats>.stat:last-child{grid-column:span 1}
 .bottom-nav button{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .sidebar,#nav button,.button{transition:none!important}
}