/* AJKFi site 0.4.0 - account area (state file section 234): sidebar with coloured icons, Sales, My machines list,
   theme toggle, phone tab bar. Same Cool gray tokens as style.css; the dark values are in dark.css.
   Accents: the site indigo #3f4fd9 stays the blue; neon orange + purple are added (softer in light). No inline style (CSP). */

:root{--neo-in:#3f4fd9;--neo-or:#f2711c;--neo-pu:#8b5cf6;--neo-gy:#5b6475;
  --ch-coin:#8c97f2;--ch-vou:#dd94e8;--ch-spark:#a98ee8;--dot-off:#a3abb8}

/* ---- coloured duotone icons ---- */
.ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;color:var(--neo-in);background:rgba(63,79,217,.11)}
.ico svg{width:18px;height:18px;display:block}
.ico.c-or{color:var(--neo-or);background:rgba(242,113,28,.12)}
.ico.c-pu{color:var(--neo-pu);background:rgba(139,92,246,.12)}
.ico.c-gy{color:var(--neo-gy);background:rgba(91,100,117,.12)}

/* ---- sidebar (the 0.3.7 floating nav) ---- */
.top .nav a{display:flex;align-items:center;gap:10px}
.top .nav a .ico{width:28px;height:28px}
.top .nav a.on{box-shadow:0 0 0 1px var(--line),0 2px 10px -4px rgba(63,79,217,.35)}
.nlbl{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:6px 12px 2px}
.nsep{height:1px;background:var(--line);margin:8px 6px;flex:none}

/* ---- theme toggle ---- */
.thm{display:inline-flex;background:var(--bg-2);border-radius:10px;padding:3px;gap:2px}
.thm a{width:30px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--faint)}
.thm a:hover{color:var(--ink);text-decoration:none}
.thm a svg{width:16px;height:16px}
.thm a.on{background:var(--card);color:var(--brand);box-shadow:0 1px 2px rgba(21,27,38,.15)}
@media (max-width:420px){.thm a{width:26px}}

/* ---- page head + tools ---- */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ph h1{margin:0;font-size:1.75rem;line-height:1.15}
.ph .sub{color:var(--faint);font-size:.86rem;margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;flex:none}
.dot.off{background:var(--dot-off)}.dot.old{background:var(--neo-or)}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;background:var(--bg-2);border-radius:11px;padding:3px;gap:2px}
.seg a{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:.85rem;color:var(--muted);padding:6px 12px;border-radius:8px;white-space:nowrap}
.seg a svg{width:15px;height:15px}
.seg a:hover{text-decoration:none;color:var(--ink)}
.seg a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(21,27,38,.12)}
.seg.seg-sm a{font-size:.78rem;padding:4px 10px}
.tbl .act-m{display:none;color:var(--ok);font-weight:700}

/* ---- Machines picker ---- */
.mpick{position:relative}
.pickbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--card);border-radius:11px;padding:7px 12px;
  font-weight:700;font-size:.86rem;color:var(--ink);cursor:pointer;list-style:none;user-select:none}
.pickbtn::-webkit-details-marker{display:none}
.pickbtn svg{width:16px;height:16px;color:var(--muted)}
.pickbtn .n{background:var(--brand-soft);color:var(--brand-deep);border-radius:99px;padding:0 8px;font-size:.78rem}
.pop{position:absolute;right:0;top:calc(100% + 8px);width:340px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 32px rgba(21,27,38,.16);z-index:12;padding:10px;margin:0;
  display:flex;flex-direction:column;max-height:min(620px,calc(100vh - 210px));max-height:min(620px,calc(100dvh - 210px))}
.pop .ps{display:flex;flex-direction:row;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:10px;padding:0 10px;color:var(--faint);font-weight:400}
.pop .ps svg{width:16px;height:16px;flex:none}
.pop .ps input{border:0;min-height:36px;padding:6px 0;background:transparent;box-shadow:none}
.pop .pa{display:flex;justify-content:space-between;padding:8px 4px 4px;font-size:.8rem;font-weight:700}
.lnk{border:0;background:none;padding:0;font:inherit;color:var(--brand);cursor:pointer}
.lnk:hover{text-decoration:underline}
.pop .pl{flex:1 1 auto;min-height:0;overflow-y:auto}
.pop label{display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px 6px;border-radius:9px;font-size:.88rem;font-weight:400;cursor:pointer}
.pop label:hover{background:var(--card-2)}
.pop label[hidden]{display:none}
.pop label .mn{flex:1;min-width:0}
.pop label .mn b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop label .mn span{display:block;font-size:.76rem;color:var(--faint)}
.pop .pf{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line);margin-top:6px;padding-top:10px}

/* ---- custom range ---- */
.custom.panel{display:flex;gap:10px 12px;flex-wrap:wrap;align-items:flex-end;padding:14px 18px}
.custom label{flex:0 1 170px}
.custom .quick{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-bottom:10px}
.custom .quick a{font-size:.78rem;padding:3px 10px}
.custom .quick a:hover{text-decoration:none;filter:brightness(.97)}
.note-line{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);margin:-6px 0 14px}
.note-line svg{width:16px;height:16px;flex:none;color:var(--faint)}

/* ---- tiles ---- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);min-width:0}
.kpi small{display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:700;color:var(--muted)}
.kpi small .ico{width:28px;height:28px}
.kpi .v{font:800 1.65rem/1.2 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:6px;overflow-wrap:anywhere}
.kpi .v.s{font-size:1.12rem;line-height:1.35}
.kpi .d{font-size:.8rem;font-weight:700;margin-top:4px;color:var(--faint)}
.kpi.kpi-top .d{color:var(--neo-or);font-weight:800}
.up{color:var(--ok)}.down{color:var(--bad)}

/* ---- panels, chart, tables ---- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;min-width:0}
.panel .phd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 6px;flex-wrap:wrap}
.panel h2{margin:0;font-size:1.05rem}
.legend{display:flex;gap:14px;font-size:.8rem;color:var(--muted);font-weight:650}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend i.lc{background:var(--ch-coin)}.legend i.lv{background:var(--ch-vou)}
.chart{padding:6px 18px 14px}
.chart svg{display:block;width:100%;height:auto}
.chart text{font-family:var(--font)}
.chart .ax{font-size:11px}.chart .val{font-size:11px;font-weight:700}.chart .lbl{font-size:11.5px;font-weight:600}.chart .now{font-weight:800}
.cm .chart .lbl,.cm text.lbl{font-size:11px}
.cg{stroke:var(--line);stroke-width:1}.ct{fill:var(--faint)}.cv{fill:var(--ink)}
.cc{fill:var(--ch-coin)}.cvv{fill:var(--ch-vou)}
.spark{width:84px;height:24px;display:block}
.sp{fill:none;stroke:var(--ch-spark);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.cm{display:none}
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--card-2);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.cur{font-weight:800}
.tbl td.upd{white-space:normal}
.tbl .mname b{display:block;font-weight:700}
.tbl .mname>span{display:block;font-size:.78rem;color:var(--faint)}
.tbl tr.ex td{color:var(--faint);background:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(21,27,38,.025) 8px 16px)}
.tbl tr.ex .mname b{color:var(--muted)}
.tbl tr[hidden]{display:none}
.tbl .show-m{display:none}
.st{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.84rem;white-space:nowrap}
.st small{font-weight:600;color:var(--faint);font-size:.78rem}
.tg{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.72rem;font-weight:800;background:var(--raise);color:var(--muted);white-space:nowrap}
.tg.warn{background:var(--gold-soft);color:#7a5600}.tg.brand{background:var(--brand-soft);color:var(--brand-deep)}
.mono{font-family:var(--mono)}
.tbl td.mono{font-size:.8rem;color:var(--muted)}
.foot-note2{font-size:.8rem;color:var(--faint);padding:10px 18px 14px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.foot-note2 svg{width:15px;height:15px;flex:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pad{padding:16px 18px}

/* ---- My machines ---- */
.bar2{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);margin:0}
.search{flex:1 1 260px;display:flex;flex-direction:row;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:11px;padding:0 12px;
  background:var(--card);color:var(--faint);min-width:0;font-weight:400}
.search svg{width:17px;height:17px;flex:none}
.search input{border:0;background:transparent;min-height:38px;padding:6px 0;box-shadow:none}
.search input:focus{box-shadow:none}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.sel{display:inline-flex;flex-direction:row;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:11px;padding:0 0 0 12px;background:var(--card);
  font-weight:700;font-size:.85rem;white-space:nowrap;min-width:0}
.sel span{color:var(--faint);font-weight:600}
.sel select{border:0;background:transparent;min-height:38px;padding:6px 10px 6px 2px;font-weight:700;font-size:.85rem;width:auto;max-width:200px;box-shadow:none;cursor:pointer}
.sel:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.counts{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:.84rem;color:var(--muted);font-weight:650;padding:10px 18px;border-bottom:1px solid var(--line)}
.counts b{color:var(--ink)}
.acts{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.acts form{margin:0}
.btn.xs{padding:5px 10px;font-size:.8rem;border-radius:9px;min-height:32px}
.btn.xs svg{width:16px;height:16px}
.btn.wide{width:100%;justify-content:center}
.more{position:relative}
.more>summary{list-style:none;cursor:pointer}
.more>summary::-webkit-details-marker{display:none}
.more-pop{position:absolute;right:0;top:calc(100% + 6px);width:300px;z-index:11;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 32px rgba(21,27,38,.16);padding:12px;display:grid;gap:10px;text-align:left;white-space:normal}
.more-pop .facts{margin:0}
.more-pop form{margin:0}
.mach-grid.pad{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:14px}
.mach-grid .card{margin:0}
.card.mach.ex{background:repeating-linear-gradient(-45deg,var(--card) 0 8px,var(--card-2) 8px 16px)}
.mach-top .ico{width:40px;height:40px;border-radius:12px}
.mach-top .ico svg{width:22px;height:22px}
.mach-actions .more-pop{right:auto;left:0}

/* ---- phone tab bar ---- */
.tabbar{display:none}

@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:13px 14px}.kpi .v{font-size:1.3rem}
  .ph h1{font-size:1.45rem}
  .ph{display:block}.ph .tools{margin-top:12px}
  .tools{width:100%}.tools .seg{flex:1}.tools .seg a{flex:1;padding:6px 6px}
  .mpick{width:100%}.pickbtn{width:100%;justify-content:space-between}
  .pop{left:0;right:0;width:auto}
  .cd{display:none}.cm{display:block}
  .tbl.cards thead{display:none}
  .tbl.cards,.tbl.cards tbody,.tbl.cards tr,.tbl.cards td{display:block;width:100%}
  .tbl.cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:center}
  .tbl.cards tr:last-child{border-bottom:0}
  .tbl.cards td{border:0;padding:0;width:auto}
  .tbl.cards td.hide-m{display:none}
  .tbl.cards td.show-m{display:block}
  .tbl.cards .act-m{display:inline}
  .tbl.cards td.num{text-align:right}
  .tbl.cards td[data-l]:before{content:attr(data-l) " ";color:var(--faint);font-size:.76rem;font-weight:600}
  .tbl.cards tr.ex{background:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(21,27,38,.03) 8px 16px)}
  .tbl.cards tr.ex td{background:none}
  .mach-t.cards tr{grid-template-columns:minmax(0,1fr) auto}
  .mach-t.cards td.acts-td{grid-column:1/-1;margin-top:6px}
  .mach-t.cards td.acts-td .acts{justify-content:flex-start}
  .bar2 .sel{flex:1 1 140px;min-width:0;overflow:hidden}.bar2 .sel select{flex:1;min-width:0;width:100%;max-width:none;text-overflow:ellipsis}
  body.acct-area .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);
    border-top:1px solid var(--line);z-index:20;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:grid;justify-items:center;gap:2px;font-size:.7rem;font-weight:700;color:var(--faint);padding:4px}
  .tabbar a:hover{text-decoration:none}
  .tabbar a .ico{width:30px;height:26px;background:transparent}
  .tabbar a:not(.on) .ico{color:var(--faint)}
  .tabbar a.on{color:var(--ink)}
  .tabbar a.on .ico{background:rgba(63,79,217,.11)}
  .tabbar a.on .ico.c-or{background:rgba(242,113,28,.12)}.tabbar a.on .ico.c-pu{background:rgba(139,92,246,.12)}.tabbar a.on .ico.c-gy{background:rgba(91,100,117,.12)}
  body.acct-area main.wrap{padding-bottom:96px}
  body.acct-area .site-foot{display:none}
  body.acct-area .help-fab{bottom:78px}
  .more-pop{position:fixed;left:12px;right:12px;top:auto;bottom:84px;width:auto;max-height:70vh;overflow-y:auto}
}
[data-mrow][hidden],[data-pick-row][hidden]{display:none!important}

/* 0.4.1: the picker always shows Cancel / Save (the list scrolls inside), and "Need help?" steps aside while a popover is open */
.pop .ps,.pop .pa,.pop .pf{flex:none}
body:has(details[data-pick][open]) .help-fab,body:has(details.more[open]) .help-fab{display:none}
@media (max-width:900px){.pop{max-height:max(260px,calc(100vh - 350px));max-height:max(260px,calc(100dvh - 350px))}}