/* NOL design system. One file, no build. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&family=JetBrains+Mono:wght@500;700&display=swap');
:root{
  --bg:#0a0a0b; --bg2:#111113; --card:#161618; --line:#26262b; --line2:#333339;
  --fg:#f4f4f5; --mute:#8b8b95; --dim:#5b5b66;
  --acid:#d9ff3d; --acid-ink:#121400; --red:#ff5a5f; --ok:#3ddc84; --blue:#6aa7ff; --amber:#ffb84d;
  --r:14px; --r2:8px; --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(40px,7vw,96px);font-weight:800}
h2{font-size:clamp(26px,3.6vw,44px);font-weight:800}
h3{font-size:18px;font-weight:600}
p{margin:0}
.mute{color:var(--mute)} .dim{color:var(--dim)} .acid{color:var(--acid)} .mono{font-family:var(--mono)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.stack>*+*{margin-top:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* topbar */
.top{position:sticky;top:0;z-index:20;background:rgba(10,10,11,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px 18px;min-height:56px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.mark{font-weight:800;letter-spacing:.06em;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.mark b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--acid);color:var(--acid-ink);font-family:var(--mono);font-size:15px}
.tabs{display:flex;gap:2px;margin-left:8px}
.tabs a{padding:6px 10px;border-radius:8px;color:var(--mute);font-weight:500}
.tabs a:hover{color:var(--fg);background:var(--bg2)}
.tabs a.on{color:var(--fg);background:var(--card);border:1px solid var(--line)}
.top .grow{flex:1}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid var(--line2);background:var(--card);cursor:pointer;font-weight:600;white-space:nowrap;transition:.15s}
.btn:hover{border-color:var(--mute)}
.btn.acid{background:var(--acid);color:var(--acid-ink);border-color:var(--acid)}
.btn.acid:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn.danger{color:var(--red)}
.btn.lg{padding:14px 22px;font-size:17px;border-radius:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* inputs */
.input,textarea.input,select.input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);outline:none}
.input:focus{border-color:var(--acid)}
textarea.input{min-height:120px;resize:vertical;font-family:var(--mono);font-size:13px}
label.f{display:block;font-size:12px;color:var(--mute);margin-bottom:6px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.field+.field{margin-top:12px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card.pad0{padding:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.card h3{margin-bottom:6px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line2);color:var(--mute)}
.badge.acid{background:var(--acid);color:var(--acid-ink);border-color:var(--acid)}
.badge.ok{color:var(--ok);border-color:rgba(61,220,132,.35)}
.badge.red{color:var(--red);border-color:rgba(255,90,95,.35)}
.badge.blue{color:var(--blue);border-color:rgba(106,167,255,.35)}
.badge.amber{color:var(--amber);border-color:rgba(255,184,77,.35)}
.kpi{font-family:var(--mono);font-weight:700;font-size:clamp(28px,4vw,44px);letter-spacing:-.03em}
.kpi small{font-size:13px;color:var(--mute);font-family:var(--font);font-weight:500;display:block;margin-top:4px;letter-spacing:0}

/* table */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);padding:10px 14px;border-bottom:1px solid var(--line);font-weight:600}
.table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:hover td{background:rgba(255,255,255,.02)}
.table tr.click{cursor:pointer}
.table .num{font-family:var(--mono);text-align:right}
/* a wide table scrolls inside its own card, never the page: every card that holds one is the scroll container (a padded .card as much as .card.pad0), and on phones the table keeps its natural width instead of being crushed to min-content */
.card:has(>.table){overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){.card>.table{min-width:max-content}}
.empty{padding:48px 20px;text-align:center;color:var(--mute)}
.empty b{display:block;color:var(--fg);font-size:18px;margin-bottom:6px}

/* kanban */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start}
.col{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:10px;min-height:120px}
.col h4{margin:4px 6px 10px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between}
.col.over{border-color:var(--acid)}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:grab}
.kcard:hover{border-color:var(--line2)}
.kcard .t{font-weight:600}
.kcard .m{font-size:12px;color:var(--mute);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}

/* today strip: what needs you today, on top of every app */
.today{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:9px 12px;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r2)}
.today[hidden]{display:none}
.today .ttl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600;flex:none}
.today .items{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.today .it{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:3px 4px 3px 7px}
.today .it:hover{border-color:var(--line2)}
.today .badge{font-size:11px;padding:1px 7px;flex:none}
.today .tt{font-size:13px;font-weight:500;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today .tt:hover{color:var(--acid)}
.today .x{background:none;border:0;padding:1px 5px 3px;border-radius:99px;color:var(--dim);cursor:pointer;font-size:15px;line-height:1}
.today .x:hover{color:var(--fg);background:var(--line)}
.today .more{font-size:12px;color:var(--mute);text-decoration:underline}

/* layout helpers for apps */
.app{padding-top:24px;padding-bottom:80px}
.app-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.app-head h2{font-size:30px}
.split{display:grid;grid-template-columns:280px 1fr;gap:16px;min-height:60vh}
@media(max-width:800px){.split{grid-template-columns:1fr}}
.side{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:10px;max-height:75vh;overflow:auto}
.side a{display:block;padding:7px 10px;border-radius:8px;color:var(--mute)}
.side a.on,.side a:hover{background:var(--card);color:var(--fg)}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar .input{width:auto;min-width:220px}
/* internal [[links]] and inline images, rendered by NOL.md() wherever Markdown is shown */
.wl{color:var(--acid);text-decoration:underline;text-underline-offset:3px}
.wl.new{color:var(--amber);text-decoration-style:dashed}
img[data-nol]{max-width:100%;height:auto;border-radius:var(--r2);border:1px solid var(--line)}

/* dialog */
dialog{background:var(--card);color:var(--fg);border:1px solid var(--line2);border-radius:var(--r);padding:0;width:min(560px,94vw)}
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
dialog form{padding:22px}
dialog h3{margin-bottom:14px;font-size:20px}
dialog .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;z-index:99;box-shadow:0 10px 40px rgba(0,0,0,.5)}

/* landing */
.hero{padding:88px 0 56px}
.zeros{display:grid;gap:4px;margin:28px 0 36px}
.zeros div{font-size:clamp(34px,6.4vw,88px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.zeros b{font-family:var(--mono);color:var(--acid);font-weight:700}
.lead{font-size:clamp(17px,1.6vw,21px);color:var(--mute);max-width:720px}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0}
.strip .kpi{padding:22px 0;font-size:clamp(24px,3vw,36px)}
.strip .kpi+.kpi{border-left:1px solid var(--line);padding-left:22px}
.sec{padding:72px 0}
.sec h2{margin-bottom:10px}
.sec .lead{margin-bottom:28px}
.appcard{display:block;position:relative;overflow:hidden}
.appcard:hover{border-color:var(--acid)}
.appcard .ic{width:40px;height:40px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:var(--acid);margin-bottom:14px}
.appcard .rep{font-size:13px;color:var(--mute);margin-top:10px}
.feed{display:grid;gap:0}
.ev{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.ev time{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:4px}
.ev .ty{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-right:8px}
.ty.release{color:var(--acid)} .ty.build{color:var(--blue)} .ty.test{color:var(--ok)} .ty.request{color:var(--amber)} .ty.deploy{color:var(--fg)}
footer{border-top:1px solid var(--line);padding:40px 0 60px;color:var(--mute);font-size:14px}
.manifesto{font-size:clamp(18px,2vw,26px);line-height:1.35;font-weight:500;max-width:900px}
.manifesto em{color:var(--acid);font-style:normal}
.cmp{width:100%;border-collapse:collapse}
.cmp td,.cmp th{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.cmp th{color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.cmp td:last-child{color:var(--acid);font-weight:600}
.big{font-family:var(--mono);font-weight:700;font-size:clamp(40px,8vw,110px);letter-spacing:-.04em;line-height:1}
.hidden{display:none!important}
@media(max-width:820px){.tabs{display:none}}
@media(max-width:640px){.ev{grid-template-columns:1fr}.hero{padding:56px 0 36px}}

@media print{html,body{background:#fff;color:#111}.top,.nav,.today,.demo-tag,.toast,dialog,.noprint{display:none!important}body.shell{display:block!important}body.shell main.app{padding:0!important;max-width:none}} /* the shell is screen furniture: an invoice or a contract prints as paper, without the sidebar column */

/* ===== app shell v2: sidebar on wide screens, top strip on phones ===== */
body.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.nav{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:var(--bg2);border-right:1px solid var(--line);overflow:auto}
.nav .mark{padding:6px 10px 14px;font-size:16px}
.nav .ws{display:flex;align-items:center;gap:8px;margin:0 10px 12px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:12px;color:var(--mute);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .ws:hover{border-color:var(--line2);color:var(--fg)}
.nav .ws i{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.nav a.item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--mute);font-weight:500;font-size:14px}
.nav a.item svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a.item:hover{background:var(--card);color:var(--fg)}
.nav a.item.on{background:var(--card);color:var(--fg);box-shadow:inset 3px 0 0 var(--acid)}
.nav a.item kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dim);border:1px solid var(--line2);border-radius:5px;padding:1px 5px}
.nav .sec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:14px 12px 4px;font-weight:600}
.nav .foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;padding:10px 4px 0}
.nav .foot .btn{flex:1 1 44%;justify-content:center}
.nav .strip{display:contents}
.nav .more{display:none}
/* ☰ More sheet: the same sidebar, upright, with labels — .nav.sheet inherits the item/section styles and undoes the column-and-phone-strip layout */
dialog.navdrawer{width:min(340px,92vw);max-height:88vh;margin:5vh auto auto;overflow:auto}
.nav.sheet{position:static;height:auto;border-right:0;border-bottom:0;background:transparent;padding:14px}
.nav.sheet .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 6px}
body.shell main.app{padding:28px 32px 80px;max-width:1320px;margin:0;width:100%}
@media(max-width:900px){
  body.shell{grid-template-columns:minmax(0,1fr)}
  .nav{position:sticky;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line);z-index:20}
  .nav .mark{padding:4px 6px}.nav .ws{margin:0;max-width:150px;font-size:11px}.nav .sec{display:none}
  .nav .strip{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .nav .strip::-webkit-scrollbar{display:none}
  .nav a.item{display:none;padding:7px 9px;font-size:13px;flex:none}.nav a.item span,.nav a.item kbd{display:none}
  .nav a.item.quick,.nav a.item.on{display:flex}
  .nav .ws,.nav .foot{display:none}.nav .more{display:inline-flex;flex:none}
  .nav.sheet{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:6px;padding:14px}
  .nav.sheet .sec{display:block}
  .nav.sheet a.item{display:flex;padding:9px 12px;font-size:14px}.nav.sheet a.item span{display:inline}
  .nav.sheet .ws{display:flex;max-width:none;min-width:0;margin:0 0 8px;font-size:12px}
  .nav.sheet .foot{display:flex;margin:10px 0 0;padding:10px 4px 0;border-top:1px solid var(--line)}.nav.sheet .foot .btn{flex:1 1 44%}
  body.shell main.app{padding:18px 16px 60px}
}
/* roles: interface visibility, not access control. body.role-* hides what that role does not use; a guest outside their one app sees .gate instead of the page */
body.role-employee [data-owner],body.role-guest [data-owner],body.role-guest .today,body.role-guest .nav .sec,body.role-guest .nav a.item:not(.guest){display:none!important}
.gate{display:none;margin:28px 32px;max-width:560px;align-self:start}
body.gated .gate{display:block}body.gated main.app{display:none!important}
/* avatars, bars, tiles */
.av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:11px;font-weight:700;color:#0b0b0c;flex:none;letter-spacing:.02em}
.av.lg{width:40px;height:40px;font-size:14px}
.who{display:inline-flex;align-items:center;gap:8px}
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:minmax(90px,140px) 1fr auto;gap:10px;align-items:center;font-size:13px}
.bar .lbl{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .trk{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}
.bar .fil{height:100%;border-radius:99px;background:var(--acid);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar .val{font-family:var(--mono);font-size:12px;color:var(--fg)}
.cols{display:flex;align-items:flex-end;gap:6px;height:120px}
.cols .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.cols .c b{width:100%;border-radius:6px 6px 2px 2px;background:var(--acid);min-height:2px;transition:height .6s}
.cols .c b.dim{background:var(--line2)}
.cols .c small{font-size:11px;color:var(--dim);font-family:var(--mono)}
.tile{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;position:relative;overflow:hidden}
.tile:hover{border-color:var(--line2)}
.tile .k{font-family:var(--mono);font-weight:700;font-size:28px;letter-spacing:-.03em;line-height:1.2;white-space:nowrap;min-height:34px;display:flex;align-items:center}
.tile .l{font-size:12px;color:var(--mute);margin-top:6px}
.tile .d{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.tile.acc{border-color:rgba(217,255,61,.35)}.tile.acc .k{color:var(--acid)}
.tile.warn{border-color:rgba(255,90,95,.35)}.tile.warn .k{color:var(--red)}
/* sparkline (NOL.spark) and the manual metric card behind it */
.spark{display:block;width:100%;height:34px;overflow:visible}
.mtr{display:flex;flex-direction:column;gap:10px;cursor:pointer}
.mtr .v{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mtr .v b{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.03em}
.mtr .ft{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--dim);font-family:var(--mono)}
.mtr .trk{height:6px;border-radius:99px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.mtr .trk i{display:block;height:100%;background:var(--acid)}
.list{display:grid}
.list .it{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.list .it:last-child{border-bottom:0}
.list .it.click{cursor:pointer}
.list .it .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .it .m{font-size:12px;color:var(--mute);font-family:var(--mono);flex:0 1 auto;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .it{min-width:0}.list .it .badge{flex:none}.list .it .av{flex:none}
.card h3.h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.card h3.h a{font-size:12px;color:var(--mute);font-weight:500}
.card h3.h a:hover{color:var(--acid)}
.table td .who{max-width:100%}
.table tbody tr{transition:background .12s}
.kcard{transition:transform .12s,border-color .12s}.kcard:hover{transform:translateY(-1px)}
.btn{transition:transform .08s,border-color .15s,filter .15s}.btn:active{transform:scale(.98)}
.empty{padding:40px 20px 48px;max-width:640px;margin:0 auto;text-align:left}
.empty b{font-size:22px;text-align:center}
.empty .cap{display:grid;gap:8px;margin:18px 0 22px;color:var(--mute)}
.empty .cap div{display:flex;gap:10px;align-items:flex-start}
.empty .cap div::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acid);margin-top:8px;flex:none}
.empty .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.demo-tag{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:30;display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line2);border-radius:99px;padding:6px 8px 6px 14px;font-size:12px;color:var(--mute);box-shadow:0 10px 40px rgba(0,0,0,.5)}
/* notes timeline on any record */
.notes .lst{max-height:280px;overflow:auto}
.notes .n{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.notes .n:last-child{border-bottom:0}
.notes .n .b{flex:1;min-width:0}
.notes .n .hd{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--mute);flex-wrap:wrap}
.notes .n .hd b{color:var(--fg)}
.notes .n .hd .ops{margin-left:auto;display:flex;gap:4px;opacity:.35;transition:opacity .15s}
.notes .n:hover .hd .ops{opacity:1}
.notes .tx{font-size:14px;overflow-wrap:break-word}
.notes .tx p{margin:3px 0}
.notes .tx ul,.notes .tx ol{margin:3px 0;padding-left:20px}
.mention{color:var(--acid);font-weight:600}
dialog .notes{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
/* global search palette (Cmd/Ctrl+K) */
dialog.pal{width:min(620px,94vw);margin:8vh auto auto}
.pal .bd{padding:12px}
.pal .lst{max-height:min(52vh,420px);overflow:auto;margin-top:8px}
.pal .r{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;min-width:0}
.pal .r.on{background:var(--bg2)}
.pal .r .badge{flex:none}
.pal .r .tt{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal .r .sub{margin-left:auto;color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;padding-left:8px}
.pal .hd{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:6px 10px 2px;font-weight:600}
.pal .none{color:var(--mute);padding:12px 10px}
.pal .ft{border-top:1px solid var(--line);margin-top:8px;padding:10px 10px 2px;font-size:12px;color:var(--dim)}
.greet{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.greet h2{font-size:34px}
.greet .date{color:var(--mute)}
.g6{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.gh{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* attachments (NOL.filesPanel) */
.files.over{outline:2px dashed var(--acid);outline-offset:6px;border-radius:var(--r2)}
.files .lst{max-height:220px;overflow:auto}
.files .r{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.files .r:last-child{border-bottom:0}
.files .ic{font:700 10px/1 var(--mono);color:var(--dim);border:1px solid var(--line2);border-radius:5px;padding:5px 6px;flex:none}
.files .nm{flex:1;min-width:0;background:none;border:0;padding:0;cursor:pointer;font-weight:600;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .nm:hover{color:var(--acid)}
.files .m{flex:none;color:var(--mute);font-size:12px;font-family:var(--mono)}
.files .ops{flex:none;display:flex;gap:4px;opacity:.35;transition:opacity .15s}
.files .r:hover .ops{opacity:1}
dialog .files{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
dialog.filedlg{width:min(900px,94vw)}
.filedlg .bd{padding:16px;display:flex;flex-direction:column;gap:12px}
.filedlg img{max-width:100%;max-height:70vh;object-fit:contain;background:var(--bg2);border-radius:var(--r2)}
.filedlg iframe{width:100%;height:70vh;border:0;background:#fff;border-radius:var(--r2)}
/* timeline (NOL.timeline): notes, deals, tickets and invoices of one record, newest first */
.tline .lst{max-height:280px;overflow:auto}
.tline .e{display:flex;gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.tline .e:last-child{border-bottom:0}
.tline .e .badge{flex:none}
.tline .e b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tline .e .mute{flex:0 1 auto;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tline a.e:hover b{color:var(--acid)}
.tline .ts{margin-left:auto;flex:none;font-size:12px;padding-left:8px}
dialog .tline{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
/* SVG charts (NOL.svg): closed-won by month, win rate */
.chart{display:block;width:100%;height:auto}
.chart .ax{stroke:var(--line);stroke-width:1}
.chart .ar{fill:var(--acid);opacity:.13}
.chart .ln{fill:none;stroke:var(--acid);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dt{fill:var(--acid)}
.chart .lb{fill:var(--dim);font:11px var(--mono)}
.chart .vl{fill:var(--mute);font:11px var(--mono)}
.donut{display:block;width:132px;height:132px;flex:none}
.donut .bg{fill:none;stroke:var(--line2);stroke-width:3.4}
.donut .fg{fill:none;stroke:var(--acid);stroke-width:3.4;stroke-linecap:round}
.donut .pc{fill:var(--fg);font:700 8px var(--mono);text-anchor:middle}
/* duplicate contacts: five columns need more room than a form dialog */
dialog.dupdlg{width:min(780px,94vw)}
.dupdlg .table td{white-space:nowrap}
.chartwrap{overflow-x:auto}
.chartwrap .chart{min-width:620px}

/* month calendar (Leave) */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cal .wd{background:var(--bg2);padding:8px 10px;font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.cal .d{background:var(--card);min-height:104px;padding:6px 7px;display:flex;flex-direction:column;gap:4px;align-items:stretch}
.cal .d.off{background:var(--bg2)}
.cal .d.pad .n{color:var(--dim)}
.cal .n{font-size:12px;color:var(--mute);font-weight:600;align-self:flex-start;padding:1px 6px;border-radius:6px}
.cal .d.today .n{background:var(--acid);color:var(--acid-ink)}
.cal .hol{font-size:11px;font-weight:600;color:var(--amber);line-height:1.3;overflow-wrap:anywhere}
.cal .ch{display:flex;gap:5px;align-items:center;font-size:11px;line-height:1.3;padding:2px 6px;border-radius:7px;background:var(--bg2);border:1px solid var(--line2);cursor:pointer;text-align:left;color:inherit;overflow:hidden}
.cal .ch:hover{border-color:var(--acid)}
.cal .ch.pend{border-style:dashed;color:var(--mute)}
.cal .ch .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ch i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--blue)}
.cal .more{font-size:11px;color:var(--mute);padding:0 6px}
@media(max-width:700px){.cal .d{min-height:74px;padding:4px}.cal .wd{padding:6px 4px;font-size:10px}.cal .ch{padding:1px 4px}}