/* Layout: a warm, light shop board. Phase columns of job cards, job pages, kiosk, TV and client views of the same data. */
:root{
  --bg:#F8F6F0; --surface:#FFFFFF; --surface-2:#F1EDE2; --ink:#2C2A22; --muted:#6B6553; --line:#E6E0D1;
  --accent:#64593C; --accent-soft:#EEE9DA; --on-accent:#FFFFFF; --accent-2:#9C8F64;
  --good:#5B7150; --good-soft:#E8ECDF; --warn:#9A7232; --warn-soft:#F4ECDA; --crit:#9C4F3C; --crit-soft:#F3E3DC; --info:#56677A; --info-soft:#E6EAEE;
  --wood:#B98A55; --wood-soft:#F4E8D8;
  --shadow:0 1px 2px rgba(70,58,25,.06), 0 2px 8px rgba(70,58,25,.05);
  --shadow-lift:0 4px 16px rgba(70,58,25,.10);
  --display:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--body);font-size:14px;line-height:1.45}
*{box-sizing:border-box}
button,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1400px;margin:0 auto}
header.top{border-bottom:1px solid var(--line);background:var(--surface)}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-block:12px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font-family:var(--display);font-size:24px;letter-spacing:.02em}
.tag{font-family:var(--mono);font-size:11px;color:var(--warn);background:var(--warn-soft);padding:2px 7px;border-radius:4px;white-space:nowrap}
nav.tabs{display:flex;gap:4px;flex-wrap:wrap}
nav.tabs a{padding:6px 12px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:500}
nav.tabs a[aria-current="page"]{background:var(--accent-soft);color:var(--ink)}
.actor{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.actor select,.sel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
main{padding-block:20px 48px}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;letter-spacing:.01em}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.note{color:var(--muted);font-size:13px;max-width:65ch}

/* summary */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.stat .v{font-family:var(--display);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.stat.warn .v{color:var(--warn)} .stat.crit .v{color:var(--crit)}

/* board */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.board{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.col{background:var(--surface-2);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.col h2{font-size:18px;display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 4px}
.col h2 span{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:500}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 11px;text-align:left;display:flex;flex-direction:column;gap:6px;width:100%}
.card:hover{border-color:var(--accent)}
.card .row{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.card .client{font-weight:600}
.card .room{color:var(--muted);font-size:13px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--ink);width:fit-content}
.flags{display:flex;flex-wrap:wrap;gap:4px}
.flag{font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:4px}
.flag.warn{background:var(--warn-soft);color:var(--warn)} .flag.crit{background:var(--crit-soft);color:var(--crit)} .flag.info{background:var(--surface-2);color:var(--muted)}
.fin{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.dots{display:flex;gap:3px}
.dots i{width:9px;height:9px;border-radius:2px;border:1.5px solid var(--wood);display:block}
.dots i.on{background:var(--wood)}
.empty{color:var(--muted);font-size:13px;padding:6px 4px}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(10,14,12,.45);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surface);z-index:21;overflow-y:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) 20px;
  display:flex;flex-direction:column;gap:20px;border-left:1px solid var(--line)}
.drawer .head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.drawer h2{font-size:30px}
.x{background:none;border:1px solid var(--line);border-radius:6px;padding:4px 10px}
.btn{border:0;border-radius:8px;padding:10px 16px;font-weight:600;background:var(--accent);color:var(--on-accent)}
.btn:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);padding:6px 10px;font-weight:500;font-size:13px}
.btn.big{font-size:20px;padding:16px 20px;width:100%;font-family:var(--display);letter-spacing:.02em}
.hold{background:var(--warn-soft);color:var(--ink);border-radius:8px;padding:10px 12px;font-size:13px}
.hold b{color:var(--warn)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.steps li:last-child{border-bottom:0}
.mk{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);justify-self:center}
.steps li.done .mk{background:var(--accent);border-color:var(--accent)}
.steps li.now .mk{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.steps li.now{font-weight:600}
.steps li.done{color:var(--muted)}
.who{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fin-steps li.done .mk{background:var(--wood);border-color:var(--wood)}
.fin-steps li.now .mk{border-color:var(--wood);box-shadow:0 0 0 3px var(--wood-soft)}
.pay{display:grid;grid-template-columns:1fr auto auto;gap:8px 12px;align-items:center;font-size:13.5px}
.pay .ok{color:var(--good);font-weight:600;font-size:12.5px}
.log{list-style:none;margin:0;padding:0;font-size:12.5px;display:flex;flex-direction:column;gap:6px}
.log li{display:grid;grid-template-columns:auto 1fr;gap:10px;color:var(--muted)}
.log li span:last-child{color:var(--ink)}
section.block{display:flex;flex-direction:column;gap:8px}
section.block h3{font-size:16px;color:var(--muted)}

/* kiosk & subs */
.kiosk{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.station{background:var(--surface-2);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.station h2{font-size:26px}
.ktile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px}
.ktile .client{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.1}
.ktile .gate{font-size:13px;color:var(--warn);font-weight:500}
.subpick{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}

/* tv */
.tv{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:18px}
.tvhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tvhead h1{font-size:40px}
.clock{font-family:var(--mono);font-size:22px;color:var(--muted)}
.tvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.2fr);gap:14px}
@media (max-width:900px){.tvgrid{grid-template-columns:1fr}}
.tvcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.tvcol h2{font-size:24px;border-bottom:3px solid var(--accent);padding-bottom:4px}
.tvcard{background:var(--surface-2);border-radius:8px;padding:12px}
.tvcard .client{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.05}
.tvcard .meta{font-size:15px;color:var(--muted)}
.tvcard.alert{border-left:6px solid var(--crit)} .tvcard.alertw{border-left:6px solid var(--warn)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:transparent;border:0;padding:6px 14px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.bigstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.bigstats .stat .v{font-size:48px}

/* portal */
.portal{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:18px}
.pcard h1{font-size:34px}
.track{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pstep{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;min-width:0}
.pstep .bar{height:8px;border-radius:4px;background:var(--surface-2)}
.pstep.done .bar{background:var(--accent)}
.pstep.active .bar{background:repeating-linear-gradient(90deg,var(--accent) 0 10px,var(--accent-soft) 10px 16px)}
.pstep.upcoming{color:var(--muted)}
.pstep small{font-weight:400;color:var(--muted);font-size:12px}
@media (max-width:520px){.track{grid-template-columns:1fr}.pstep{flex-direction:row;align-items:center;gap:10px}.pstep .bar{width:60px;flex:none}}
.todo{border-radius:8px;padding:12px 14px;background:var(--accent-soft);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px}
dl.facts dt{color:var(--muted)}
dl.facts dd{margin:0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-size:13px;z-index:30}
@media (prefers-reduced-motion:no-preference){.card,.btn{transition:border-color .15s,background .15s}}

/* real app additions */
html,body{min-height:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.login{max-width:420px;margin:12vh auto 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px}
.login h1{font-size:32px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.list{display:flex;flex-direction:column;gap:8px}
.listrow{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
.panel{background:var(--surface-2);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}
.panel h2{font-size:22px}
body.tvmode header.top{display:none}
body.tvmode main{max-width:none}
.err{color:var(--crit);font-size:13px}
/* drag and drop */
.grip{font-size:16px;line-height:1;color:var(--muted);cursor:grab;touch-action:none;padding:2px 4px;border-radius:4px;user-select:none}
.grip:hover{background:var(--surface-2);color:var(--ink)}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none}
.card.dragging-src{opacity:.35}
.dragghost{position:fixed;z-index:40;pointer-events:none;box-shadow:0 10px 28px rgba(0,0,0,.22);transform:rotate(1.5deg);margin:0}
.col.drop{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-soft)}
.picker{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));max-height:calc(100% - 48px);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
.picker h2{font-size:24px}
/* ---------- update 2: job pages, checklists, time, files, reports ---------- */
.pagetitle{font-size:28px}
.jobwrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
.rail{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 40px)}
.raillist{overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-right:4px}
.railitem{display:flex;flex-direction:column;padding:7px 10px;border-radius:6px;text-decoration:none;color:var(--ink)}
.railitem:hover{background:var(--surface-2)}
.railitem.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.railitem .rn{font-weight:600}
.railitem .rs{font-size:12px;color:var(--muted)}
.raillist details summary{cursor:pointer;padding:8px 10px}
.jobmain{min-width:0;display:flex;flex-direction:column;gap:14px}
.jobnav{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.jobnav > :last-child{justify-self:end}
.jobnav .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
#jobjump{max-width:260px}
.jobhead{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end}
.jobhead h1{font-size:38px;line-height:1.05}
.headlinks{display:flex;gap:8px;flex-wrap:wrap}
.headlinks a{text-decoration:none}
.statusline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.subtabs button{background:none;border:0;padding:9px 14px;font-weight:500;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.subtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.count{font-family:var(--mono);font-size:11px;background:var(--surface-2);padding:1px 6px;border-radius:999px}
.tabbody{min-width:0}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.block.quiet{opacity:.85}
.block h3 .note{text-transform:none;font-family:var(--body);font-weight:400;letter-spacing:0}
.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.task .tt{display:flex;flex-direction:column;gap:2px}
.task.isdone .tt > :first-child{color:var(--muted)}
.tick{width:24px;height:24px;border-radius:6px;border:2px solid var(--line);background:var(--surface);padding:0;position:relative}
.tick[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.tick[aria-pressed="true"]::after{content:"";position:absolute;left:6px;top:2px;width:7px;height:12px;border:solid var(--on-accent);border-width:0 3px 3px 0;transform:rotate(45deg)}
.tasks.big .tick{width:34px;height:34px}
.tasks.big .tick[aria-pressed="true"]::after{left:10px;top:4px;width:9px;height:16px}
.tasks.big .task{font-size:16px}
.req{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--warn);background:var(--warn-soft);padding:1px 6px;border-radius:4px}
.check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink)}
.check.small{font-size:12px;color:var(--muted)}
.x.small,.btn.small{font-size:12px;padding:2px 8px}
.warnline{border-color:var(--warn)!important}
.clockrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.sum td{font-weight:600;border-top:2px solid var(--line)}
.bad{color:var(--crit)}
.flag.good{background:var(--good-soft);color:var(--good)}
.uploadbox{background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:16px}
.uploadbtns{display:flex;gap:10px;flex-wrap:wrap}
.uploadbtns label.btn{cursor:pointer}
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ph{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--surface-2);display:block}
.ph figcaption{font-size:11.5px;color:var(--muted)}
.filelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.filelist li{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.filelist a{font-weight:500;color:var(--ink);word-break:break-word}
.prog{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.prog .bar{width:60px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.prog .bar i{display:block;height:100%;background:var(--accent)}
.clocked{font-size:12px;color:var(--good);font-weight:600}
.kioskbar{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.sel.big{font-size:18px;padding:10px 12px;min-width:220px}
.note.big{font-size:16px}
.btn.big2{font-size:16px;padding:12px 16px;width:100%}
.ktile.working{border-color:var(--good);box-shadow:inset 4px 0 0 var(--good)}
.tvclock{display:flex;gap:8px;flex-wrap:wrap}
.tvclock .chip{font-size:15px;padding:4px 12px}
.reports{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.panel.wide{grid-column:1/-1}
.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.plain a{color:var(--ink);font-weight:500}
.tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tplstage{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.tplstage h3{font-size:15px}
.tplrow{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tplrow > span{flex:1;min-width:120px}
.listrow.col1{display:block}
.listrow.col1 summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:900px){
  .jobwrap{grid-template-columns:1fr}
  .rail{display:none}
  .jobhead h1{font-size:30px}
}
@media (min-width:901px){ #jobjump{display:none} }

label.btn{display:inline-flex;align-items:center}
.jobnav > :first-child{justify-self:start}
/* ---------- update 3: schedule ---------- */
.loadchart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end}
.lc{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lcbar{position:relative;width:100%;height:120px;display:flex;align-items:flex-end;justify-content:center}
.lcbar .cap{position:absolute;bottom:0;left:15%;right:15%;border:1.5px dashed var(--line);border-bottom:0;border-radius:4px 4px 0 0}
.lcbar .used{position:relative;width:56%;background:var(--accent);border-radius:4px 4px 0 0;min-height:1px}
.lcbar .used.over{background:var(--crit)}
.lcv{font-size:11px;color:var(--muted)}
.lcl{font-size:11px;color:var(--muted);white-space:nowrap}
@media (max-width:700px){.lcv{display:none}.lcl{font-size:10px;writing-mode:vertical-rl;transform:rotate(180deg)}}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.tbl.sched td,.tbl.sched th{white-space:nowrap}
.tbl.sched td:nth-child(2){white-space:normal;min-width:180px}
.tbl.sched .wk{text-align:center;min-width:46px;font-variant-numeric:tabular-nums;position:relative;color:var(--ink);font-size:12.5px}
.tbl.sched tr.late td:first-child{box-shadow:inset 4px 0 0 var(--crit)}
.instmark{color:var(--crit);font-size:13px;margin-left:2px}
.prio{display:flex;flex-direction:column;gap:2px}
.prio .x{padding:0 6px;line-height:1.2}
.proj{font-size:12.5px}
.calweeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.calweek{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.calitem{font-size:13px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline}
.calitem.inst a{font-weight:600;color:var(--ink)}
.calitem.time_off{color:var(--warn)}
.calitem.closure{color:var(--crit);font-weight:600}
.copyrow{display:flex;gap:8px}
.copyrow input{flex:1;min-width:0;font-size:12px}
.tbl a,.calitem a,.panel a{color:var(--ink)}

/* ---------- warm light refresh ---------- */
body{font-size:14.5px;letter-spacing:0}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
header.top{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(70,58,25,.03)}
.brand{align-items:center}
.brand b{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.brand b::before{content:"E";display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:800}
nav.tabs a{border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px}
nav.tabs a:hover{background:var(--surface-2);color:var(--ink)}
nav.tabs a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.pagetitle{font-size:26px}
.btn{border-radius:10px;font-weight:600;box-shadow:0 1px 2px rgba(70,58,25,.12)}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn.ghost{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover:not(:disabled){background:var(--surface-2);filter:none}
.btn.big{font-family:var(--display);font-size:18px;letter-spacing:0;border-radius:12px}
.stat{border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px}
.stat .v{font-family:var(--display);font-weight:700;font-size:28px;color:var(--ink)}
.eyebrow{color:var(--muted);letter-spacing:.07em;font-size:10.5px}
.col{background:var(--surface-2);border-radius:14px;padding:12px}
.col h2{font-size:15px;padding:2px 6px 6px;color:var(--ink)}
.col h2 span{background:var(--surface);border-radius:999px;padding:1px 8px}
.card{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 13px}
.card:hover{border-color:var(--accent-2);box-shadow:var(--shadow-lift);transform:translateY(-1px)}
@media (prefers-reduced-motion:no-preference){.card{transition:box-shadow .15s,transform .15s,border-color .15s}}
.chip{background:var(--accent-soft);color:var(--accent);font-weight:600}
.flag{border-radius:999px;padding:2px 9px}
.dots i{border-radius:3px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px}
.panel h2{font-size:18px}
.listrow{border-radius:10px;background:var(--surface-2);border-color:transparent}
section.block h3{font-size:14px;color:var(--ink);letter-spacing:0}
.station{background:var(--surface-2);border-radius:16px}
.station h2{font-size:22px}
.ktile{border-radius:14px;box-shadow:var(--shadow)}
.ktile .client{font-family:var(--display);font-size:22px}
.kioskbar{border-radius:14px;box-shadow:var(--shadow)}
.tv{border-radius:18px;box-shadow:var(--shadow)}
.tvhead h1{font-size:36px}
.tvcol h2{font-size:20px;border-bottom:3px solid var(--accent-2)}
.tvcard{background:var(--surface-2);border-radius:12px}
.tvcard .client{font-family:var(--display);font-size:24px}
.jobhead h1{font-size:34px;letter-spacing:-.02em}
.subtabs button{font-weight:600}
.subtabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.railitem{border-radius:10px}
.railitem.on{background:var(--accent-soft)}
.tablewrap,.tbl{border-radius:12px}
.tablewrap{box-shadow:var(--shadow)}
.calweek,.tplstage,.uploadbox{border-radius:12px}
.field input,.field select,.field textarea,.sel{border-radius:10px;border-color:var(--line);background:var(--surface)}
.field input:focus,.field select:focus,.field textarea:focus,.sel:focus{outline:2px solid var(--accent-soft);border-color:var(--accent-2)}
.login{border-radius:18px;box-shadow:var(--shadow-lift)}
.login h1{font-size:26px}
.drawer,.picker{border-radius:16px 0 0 16px;box-shadow:var(--shadow-lift)}
.picker{border-radius:16px}
.hold{border-radius:10px}
.toast{border-radius:12px;background:#2C2A22;color:#FFFFFF;box-shadow:var(--shadow-lift)}
.lcbar .used{background:var(--accent-2);border-radius:6px 6px 0 0}
.prog .bar i{background:var(--accent-2)}
.pcard{border-radius:18px;box-shadow:var(--shadow)}
.pstep.done .bar{background:var(--accent-2)}
.pstep.active .bar{background:repeating-linear-gradient(90deg,var(--accent-2) 0 10px,var(--accent-soft) 10px 16px)}
/* ---------- left sidebar ---------- */
.side{position:fixed;top:0;bottom:0;left:0;width:228px;z-index:15;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;overflow-y:auto;
  padding:calc(18px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.side[hidden]{display:none}
.sidehead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 4px}
.side .brand b{font-size:16.5px;line-height:1.15}
.menubtn{display:none;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-weight:600}
.sidenav{display:flex;flex-direction:column;gap:2px}
.sidenav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14.5px}
.sidenav a svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidenav a:hover{background:var(--surface-2);color:var(--ink)}
.sidenav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.navlabel{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:14px 12px 4px}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:12px 4px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
body.has-side main.wrap{margin-left:228px;max-width:none;padding-left:28px;padding-right:max(24px,env(safe-area-inset-right,0px))}
body.has-side .rail{top:calc(16px + env(safe-area-inset-top,0px))}
body.tvmode .side{display:none}
body.tvmode main.wrap{margin-left:0}
@media (max-width:900px){
  .side{position:sticky;bottom:auto;width:auto;border-right:0;border-bottom:1px solid var(--line);gap:0;overflow:visible;
    padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
  .menubtn{display:inline-flex}
  .createm:not([hidden]){display:inline-flex}
  .navcreate{display:none!important}
  .sidenav,.sidefoot{display:none}
  .side.open .sidenav{display:flex;margin-top:10px}
  .side.open .sidefoot{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}
  body.has-side main.wrap{margin-left:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}

/* ---------- calendar page ---------- */
.caltools{display:flex;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg button{background:transparent;border:0;padding:7px 14px;font-weight:600;color:var(--muted)}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12.5px;color:var(--muted);margin:12px 0 20px}
.lg{display:inline-block;width:18px;height:10px;border-radius:3px;margin-right:-8px}
.lg.shop{background:var(--accent-2)} .lg.late{background:var(--crit)} .lg.inst{background:var(--accent);transform:rotate(45deg);width:9px;height:9px;border-radius:2px;margin-right:-6px}
.lg.off{background:var(--warn-soft);border:1px solid var(--warn)} .lg.closed{background:var(--crit-soft);border:1px solid var(--crit)}
/* Gantt */
.ganttwrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.gantt{--namew:220px;position:relative;display:grid;grid-template-columns:var(--namew) minmax(0,1fr);min-width:900px}
.gantt.wide{min-width:1400px}
.gname{position:sticky;left:0;z-index:3;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 12px;display:flex;flex-direction:column;justify-content:center;text-decoration:none;color:var(--ink);min-width:0}
.gname b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gname span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.gname:hover b{color:var(--accent)}
.gtrack{position:relative;min-height:42px;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--dw) * 5),var(--surface-2) calc(var(--dw) * 5),var(--surface-2) calc(var(--dw) * 7)),
             repeating-linear-gradient(90deg,var(--line) 0,var(--line) 1px,transparent 1px,transparent calc(var(--dw) * 7))}
.ghead{position:sticky;top:0;z-index:4;background:var(--surface);min-height:46px}
.gname.ghead{z-index:5}
.gtrack.ghead{background:var(--surface)}
.gmonths,.gdays{position:relative;height:22px}
.gmonths span{position:absolute;top:4px;padding-left:6px;font-weight:700;font-size:12.5px;white-space:nowrap}
.gdays span{position:absolute;top:3px;padding-left:5px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.gbar{position:absolute;top:10px;height:22px;border-radius:7px;display:flex;align-items:center;padding:0 7px;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-decoration:none;color:#fff}
.gbar.shop{background:var(--accent-2)} .gbar.late{background:var(--crit)}
.gbar.off{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn)}
.gbar.closed{top:0;bottom:0;height:auto;border-radius:0;background:color-mix(in srgb,var(--crit) 12%,transparent);border:0}
.gbar.other{background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.gmark{position:absolute;top:13px;width:15px;height:15px;margin-left:-7.5px;background:var(--accent);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 0 2px var(--surface);z-index:2}
.gsection{grid-column:1 / -1;padding:10px 12px 4px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;left:0}
.gtoday{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--good);z-index:2;pointer-events:none}
@media (max-width:700px){.gantt{--namew:140px}}
/* Month */
.month{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.mtitle{font-weight:700;font-size:18px;padding:14px 16px 6px}
.mhead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.mhead span{padding:6px 8px}
.mweek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:3px;border-bottom:1px solid var(--line);min-height:96px}
.mweek:last-child{border-bottom:0}
.mday{border-right:1px solid var(--line);padding:5px 7px}
.mday:nth-child(7){border-right:0}
.mday.wkend{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.mday.out .mnum{color:color-mix(in srgb,var(--muted) 55%,transparent)}
.mnum{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.mday.today .mnum{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:1px 7px}
.mbar{z-index:1;margin:0 3px;border-radius:6px;padding:0 7px;font-size:11.5px;font-weight:600;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:#fff;min-width:0}
.mbar.shop{background:var(--accent-2)} .mbar.late{background:var(--crit)}
.mbar.inst{background:var(--accent);color:var(--on-accent)}
.mbar.off{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);line-height:22px}
.mbar.closed{background:var(--crit-soft);color:var(--crit);border:1px solid var(--crit);line-height:22px}
.mbar.other{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);line-height:22px}
.mbar.cont-l{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.mbar.cont-r{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.mmore{z-index:1;font-size:11px;color:var(--muted);padding:0 8px;font-weight:600}
@media (max-width:700px){.mbar{font-size:10px;padding:0 4px}.mweek{min-height:80px}}
.calform{margin-top:8px}
/* connections */
.connrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.connbtns{display:flex;gap:8px;flex-wrap:wrap}
.connbtns a{text-decoration:none}
.dthumb{width:40px;height:40px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-right:4px}
code{font-family:var(--mono);font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:4px}
/* ---------- leads, uploads and camera ---------- */
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.camerabtn{display:inline-flex;align-items:center;gap:8px}
.uploadbtns{align-items:flex-end}
.field.inline{flex-direction:row;align-items:center;gap:8px;margin-left:auto}
.field.inline select{padding:7px 10px}
@media (max-width:700px){.field.inline{margin-left:0;width:100%}.field.inline select{flex:1}.uploadbtns .camerabtn{width:100%;justify-content:center;padding:14px;font-size:16px}}
.leadgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:14px}
.leadcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
.leadcard h2{font-size:18px}
.leadcard .camerabtn{justify-content:center;padding:12px}
.leadlinks{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.leadlinks a{text-decoration:none}
label.btn.small{cursor:pointer}
body.camera-open{overflow:hidden}
.camera{position:fixed;inset:0;z-index:50;background:#000;color:#fff;display:flex;flex-direction:column}
.camera{overflow:hidden}
.camera video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:center;touch-action:none}
.camflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.camflash.go{animation:camflash .25s ease-out}
@keyframes camflash{from{opacity:.75}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.camflash.go{animation:none}}
.camtop{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));background:linear-gradient(rgba(0,0,0,.55),transparent)}
.camtop div{display:flex;flex-direction:column}
.camtop span{font-size:12.5px;opacity:.85}
.cammsg{position:relative;margin:auto 20px;background:rgba(255,255,255,.95);color:#2C2A22;border-radius:14px;padding:16px;font-size:15px;max-width:420px;align-self:center}
.camstrip{position:relative;margin-top:auto;display:flex;gap:6px;overflow-x:auto;padding:0 max(16px,env(safe-area-inset-left,0px)) 10px}
.camstrip img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:2px solid rgba(255,255,255,.8);flex:none}
.cambar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:14px max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,rgba(0,0,0,.6))}
.shutter{width:76px;height:76px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.45);background-clip:padding-box;box-shadow:0 0 0 3px #fff}
.shutter:active{transform:scale(.94)}
.shutter:disabled{opacity:.35}
.camalt{justify-self:start;font-size:13.5px;font-weight:600;background:rgba(255,255,255,.18);padding:8px 12px;border-radius:999px;cursor:pointer}
.camcount{justify-self:end;font-size:13.5px;font-weight:600;text-align:right}
/* ---------- logo ---------- */
.brand b::before{content:none!important}
.side .brand{display:block;padding:2px 6px 4px}
.side .brand .logo{display:block;width:150px;height:auto}
.loginlogo{display:block;width:180px;height:auto;margin:0 auto 4px}
.login h1{text-align:center;font-size:20px;color:var(--muted);font-weight:600}
.portallogo{display:block;width:170px;height:auto;margin:0 auto 4px}
@media (max-width:900px){ .side .brand{padding:0} .side .brand .logo{width:auto;height:46px} }
/* ---------- video in the camera ---------- */
.cambar{grid-template-rows:auto auto}
.cammode{grid-column:1 / -1;justify-self:center;display:flex;gap:4px;background:rgba(0,0,0,.35);border-radius:999px;padding:3px}
.cammode button{background:transparent;border:0;color:#fff;font-weight:600;font-size:13px;padding:6px 16px;border-radius:999px;opacity:.75}
.cammode button[aria-pressed="true"]{background:#fff;color:#2C2A22;opacity:1}
.shutter.video{background:var(--crit);background-clip:padding-box}
.shutter.recording{background:var(--crit);border-radius:18px;width:64px;height:64px;margin:6px;box-shadow:0 0 0 3px #fff}
@media (prefers-reduced-motion:no-preference){.shutter{transition:border-radius .2s,width .2s,height .2s}}
.camrec{position:relative;align-self:center;margin-top:8px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.55);padding:5px 12px;border-radius:999px;font-variant-numeric:tabular-nums;font-weight:600}
.camrec i{width:10px;height:10px;border-radius:50%;background:var(--crit)}
@media (prefers-reduced-motion:no-preference){.camrec i{animation:recblink 1s steps(2) infinite}}
@keyframes recblink{50%{opacity:.2}}
.vthumb{width:56px;height:56px;border-radius:8px;border:2px solid rgba(255,255,255,.8);flex:none;background:#333 center/cover;display:grid;place-items:center}
.vthumb b{font-size:16px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ph video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#222;display:block}
/* ---------- pipeline bar and phase board ---------- */
.pipe{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 18px}
.pipe a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}
.pipe a b{font-family:var(--mono);font-size:12px;font-weight:500;background:var(--surface-2);color:var(--ink);border-radius:999px;padding:1px 8px}
.pipe a:hover{border-color:var(--accent-2);color:var(--ink)}
.pipe a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pipe a[aria-current="page"] b{background:rgba(255,255,255,.2);color:var(--on-accent)}
.pipearrow{color:var(--muted);font-size:14px}
.boardwrap{overflow-x:auto;padding-bottom:8px;margin-inline:-4px;padding-inline:4px}
.board.phases{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);grid-template-columns:none;min-width:min-content}
@media (max-width:1100px){.board.phases{grid-template-columns:none;grid-auto-columns:240px}}
.leadhead{text-decoration:none;color:var(--ink)}
.leadhead:hover h2{color:var(--accent)}
.pipecard{background:var(--accent-soft);border-radius:12px;padding:14px 16px}
.pipecard b{font-size:16px}
.pipecard p{margin:4px 0 0;color:var(--ink)}
.subtag{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:4px}
.railgroup{cursor:pointer;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 10px 4px;display:flex;justify-content:space-between}
.raillist details{display:flex;flex-direction:column}
.syncok{background:var(--good-soft);border-radius:10px;padding:10px 12px;font-size:13px}

/* ---------- change orders ---------- */
.cocard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.cocard.sent{border-color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}
.cocard.declined{box-shadow:inset 3px 0 0 var(--crit)}
.cocard.void{opacity:.6}
.cohead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.cohead h4{font-family:var(--display);font-size:17px;margin:2px 0 0}
.coamt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto}
.coamt b{font-size:18px}
.codetails{margin:0;white-space:pre-wrap}
.coacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.coacts a.btn{text-decoration:none}
.coacts .check{display:inline-flex;gap:6px;align-items:center;font-size:13px}
.coedit summary{cursor:pointer;color:var(--muted);font-size:13px;margin-bottom:8px}
.signform{display:flex;flex-direction:column;gap:12px;background:var(--surface-2);border-radius:10px;padding:14px}
.signform p{margin:0}
.sigwrap{position:relative}
#sigpad{display:block;width:100%;height:150px;background:#fff;border:1px dashed var(--accent-2);border-radius:8px;touch-action:none;cursor:crosshair}
.sigclear{position:absolute;top:6px;right:6px}
.codochead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sigblock{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.sigblock p{margin:0}
.sigimg{max-width:320px;width:100%;height:auto;max-height:140px;object-fit:contain;object-position:left bottom;border-bottom:1px solid var(--ink)}
@media print{.noprint{display:none!important} body{background:#fff} .pcard{box-shadow:none;border-color:#ccc}}

/* ---------- job timelines ---------- */
:root{--p-pre:#B98A55;--p-shop:#64593C;--p-site:var(--good);--p-fin:var(--info);--p-other:#7A7462}
.g-pre{--pc:var(--p-pre)} .g-shop{--pc:var(--p-shop)} .g-site{--pc:var(--p-site)} .g-fin{--pc:var(--p-fin)} .g-other{--pc:var(--p-other)}
.gbar.part,.mbar.part{border:1.5px dashed var(--pc);background:color-mix(in srgb,var(--pc) 22%,var(--surface));color:var(--ink);cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;text-align:left}
.gbar.part.pinned,.mbar.part.pinned{border-style:solid;background:var(--pc);color:#fff}
.gbar.part.late,.mbar.part.late{box-shadow:0 0 0 2px var(--crit)}
.gbar.part span{overflow:hidden;text-overflow:ellipsis}
.gbar.part:hover,.mbar.part:hover{filter:brightness(.95)}
.gbar.part:focus-visible,.mbar.part:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.lg.g-pre{background:var(--p-pre)} .lg.g-shop{background:var(--p-shop)} .lg.g-site{background:var(--p-site)} .lg.g-fin{background:var(--p-fin)}
.lg.planned{background:color-mix(in srgb,var(--p-shop) 22%,var(--surface));border:1.5px dashed var(--p-shop)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tlrow{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.tlrow:last-child{border-bottom:0}
.tldot{width:12px;height:12px;border-radius:50%;margin-top:4px;border:2px dashed var(--pc);background:color-mix(in srgb,var(--pc) 22%,var(--surface))}
.tlrow.pinned .tldot{border-style:solid;background:var(--pc)}
.tlmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.tlacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* week view */
.weekgrid{display:grid;grid-template-columns:minmax(90px,140px) repeat(7,minmax(110px,1fr));border:1px solid var(--line);border-radius:10px;overflow:auto;background:var(--surface)}
.weekgrid > div{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:6px;min-height:56px}
.whead{min-height:0!important;font-size:12px;color:var(--muted);background:var(--surface-2);text-align:center}
.whead.today{color:var(--accent);font-weight:700}
.wname{display:flex;flex-direction:column;gap:2px;font-size:13px;background:var(--surface-2)}
.wcell{display:flex;flex-direction:column;gap:4px;cursor:copy}
.wcell.wkend{background:color-mix(in srgb,var(--surface-2) 50%,transparent)}
.wcell.planned{cursor:default;background:color-mix(in srgb,var(--surface-2) 40%,transparent)}
.wchip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;font:inherit;font-size:11.5px;line-height:1.25;padding:5px 7px;border-radius:7px;border:0;background:var(--pc);color:#fff;cursor:pointer}
.wchip b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.wchip.ghost{background:color-mix(in srgb,var(--pc) 18%,var(--surface));border:1.5px dashed var(--pc);color:var(--ink)}
@media (max-width:700px){.weekgrid{grid-template-columns:90px repeat(7,minmax(96px,1fr))}}

/* ---------- specs ---------- */
.specform{display:flex;flex-direction:column;gap:14px;max-width:900px}
.specsec{border:1px solid var(--line);border-radius:12px;padding:12px 16px 16px;margin:0;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.specsec.todo{border-left:4px solid var(--warn)}
.specsec.done{border-left:4px solid var(--good)}
.specsec legend{font-family:var(--display);font-weight:700;font-size:16px;padding:0 6px;display:flex;align-items:center;gap:8px}
.specmark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid var(--warn);font-size:12px;color:#fff}
.specsec.done .specmark{background:var(--good);border-color:var(--good)}
.specgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.specchoice{border:0;padding:0;margin:0;grid-column:1/-1}
.specchoice legend{font-size:13px;color:var(--muted);margin-bottom:6px;padding:0}
.specchoice .seg{display:inline-flex;flex-wrap:wrap}
.specchoice .seg label{position:relative}
.specchoice .seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.specchoice .seg span{display:block;padding:8px 14px;border:1px solid var(--line);background:var(--surface);font-weight:600;cursor:pointer}
.specchoice .seg label:first-child span{border-radius:8px 0 0 8px} .specchoice .seg label:last-child span{border-radius:0 8px 8px 0}
.specchoice .seg label + label span{border-left:0}
.specchoice .seg input:checked + span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.specchoice .seg input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.applist{display:flex;flex-direction:column;gap:8px}
.approw{display:grid;grid-template-columns:1.4fr 1fr 1fr .6fr 1.4fr auto;gap:8px;align-items:end}
.approw .x{margin-bottom:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.specsave{position:sticky;bottom:0;background:var(--bg);padding:10px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line)}
.count.warn{background:var(--warn);color:#fff}
.leadcard .flag{width:fit-content;text-decoration:none}
@media (max-width:700px){.approw{grid-template-columns:1fr 1fr;padding-bottom:10px;border-bottom:1px dashed var(--line)}.approw .field:first-child{grid-column:1/-1}.approw .field .sr{position:static;width:auto;height:auto;clip:auto}}
.specsec{min-width:0;min-inline-size:0}
.specbody{display:block;width:100%;min-width:0}
.specgrid{width:100%}
.specchoice .seg{border:0;background:none;box-shadow:none;padding:0;width:auto;gap:0}
.approw .field{min-width:0} .approw input{width:100%;min-width:0;box-sizing:border-box}
.specsec > .check{align-self:flex-start;display:inline-flex;gap:8px;align-items:center}
/* spec areas */
#specareas{display:flex;flex-direction:column;gap:18px}
.specarea{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:var(--surface-2)}
.areahead{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.areaname{flex:1 1 260px}
.areaname span{font-weight:700;color:var(--ink)}
.areaname input{font-size:16px;font-weight:600}
.approw{grid-template-columns:1fr 1.3fr 1fr 1fr .6fr 1.3fr auto}
.specbody[hidden]{display:none}

/* ---------- tasks ---------- */
.taskstrip{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.taskstrip h2,.tcol h2{font-size:15px;margin:0 0 6px;display:flex;gap:8px;align-items:center}
.taskstrip h2 span,.tgroup span{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:600}
.quickadd{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.quickadd input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--bg)}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.trow{display:grid;grid-template-columns:28px 1fr auto;gap:8px 10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow .tick{margin-top:1px}
.tbody{display:flex;flex-direction:column;gap:2px;min-width:0}
.ttitle{font-weight:600;overflow-wrap:anywhere}
.trow.isdone .ttitle{text-decoration:line-through;color:var(--muted)}
.tmeta{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted)}
.tmeta a{color:inherit}
.tnotes{font-size:13px;color:var(--muted);white-space:pre-wrap}
.tdue.late{color:var(--crit);font-weight:700}
.tdue.today{color:var(--warn);font-weight:700}
.trow .taskform{grid-column:1/-1;background:var(--surface-2);border-radius:10px;padding:12px}
.tgroup{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 2px;display:flex;gap:8px}
.tabsseg button b{font-family:var(--mono);font-weight:600;margin-left:4px;opacity:.75}
.gtstatus{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:700px){.taskstrip{grid-template-columns:1fr}}
.tcol{min-width:0} .taskstrip{overflow:hidden}
/* email suggestions */
.sgstrip{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:10px}
.sgrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sgrow:last-child{border-bottom:0}
.sgcard{border:1px solid var(--line);border-left:4px solid var(--p-site,var(--good));border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--surface)}
.sgform{grid-template-columns:repeat(3,minmax(0,1fr))}
.sgfrom{grid-column:1/-1;font-size:12.5px;color:var(--muted)}
.sgcard input[name=title]{font-weight:600}
@media (max-width:700px){.sgform{grid-template-columns:1fr 1fr}.sgform .field:last-of-type{grid-column:1/-1}}
.taskstrip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.trow{grid-template-columns:28px minmax(0,1fr) auto}
.sgrow{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:700px){.taskstrip{grid-template-columns:minmax(0,1fr)}.sgrow{grid-template-columns:minmax(0,1fr)}.sgrow .tacts{justify-content:flex-start}}
.siri h3{margin:0 0 6px}
.siricopy{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.siricopy code,.siristeps code{background:var(--surface-2);padding:2px 6px;border-radius:6px;font-size:12px;overflow-wrap:anywhere}
.siristeps{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px}
/* task alerts */
.navcount{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--crit);color:#fff;font-size:11.5px;font-weight:700;display:inline-grid;place-items:center;font-family:var(--mono)}
.navcount.dot{min-width:10px;width:10px;height:10px;padding:0}
.navcount[hidden]{display:none}
.updates .uphead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.updates h3{margin:0;display:flex;gap:8px;align-items:center}
.note-row{display:flex;flex-direction:column;gap:2px;padding:8px 0 8px 12px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.note-row.unread{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.note-row:last-child{border-bottom:0}
.tdone{color:var(--good)}
.refreshbtn{margin-left:auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.refreshbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.refreshbtn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.refreshbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.menubtn{display:inline-flex;align-items:center;gap:6px} .menubtn .navcount{margin-left:0}
/* drag and drop */
.dragtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
[data-drag]{touch-action:pan-x pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.gbar .grip,.mbar .grip{position:absolute;right:0;top:0;bottom:0;width:10px;cursor:ew-resize;border-radius:0 7px 7px 0}
.gbar .grip:hover,.mbar .grip:hover{background:rgba(0,0,0,.15)}
.mbar[data-drag]{position:relative}
.gbar .pin{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.25);margin-right:5px;flex:none}
.gbar.part:not(.pinned) .pin{background:var(--pc)}
.dragging{z-index:20!important;box-shadow:0 6px 18px rgba(0,0,0,.25)!important;opacity:.92;cursor:grabbing}
body.isdragging,body.isdragging *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.mday.droptarget{background:color-mix(in srgb,var(--accent) 14%,transparent);outline:2px dashed var(--accent);outline-offset:-3px}
.dragtip{position:fixed;z-index:100;pointer-events:none;background:var(--ink);color:#fff;font:600 13px Figtree,sans-serif;padding:6px 10px;border-radius:8px;white-space:nowrap}
.ggap{position:absolute;top:20px;height:0;border-top:2px dotted var(--muted);opacity:.8;pointer-events:auto}
.ggap span{position:absolute;left:50%;top:-9px;transform:translateX(-50%);background:var(--bg);padding:0 5px;font-size:10.5px;color:var(--muted);white-space:nowrap}
.undobar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;display:flex;gap:14px;align-items:center;background:var(--ink);color:#fff;padding:10px 12px 10px 16px;border-radius:12px;font:15px Figtree,sans-serif;max-width:calc(100vw - 32px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.undobar button{background:#fff;color:var(--ink);border:0;border-radius:8px;padding:7px 12px;font:700 14px Figtree,sans-serif;cursor:pointer}
/* dashboard */
.finstats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat.fin .v{font-size:24px}
.stat.fin .note{margin-top:4px;line-height:1.35}
.stat.fin.warn{border-color:var(--warn)}
.bad{color:var(--crit)} .good{color:var(--good)}
.fincols{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.finchart{width:100%;height:auto;display:block}
.finchart .fb.b{fill:var(--accent)} .finchart .fb.i{fill:#B98A55} .finchart .fb.c{fill:var(--good)}
.finchart .fx{font:11px Figtree,sans-serif;fill:var(--muted)} .finchart .fg{stroke:var(--line)}
.lg.fb-b{background:var(--accent)} .lg.fb-i{background:#B98A55} .lg.fb-c{background:var(--good)}
.fintbl td .note{font-size:11.5px}
.tablewrap{overflow-x:auto}
.finflags li{margin:6px 0;line-height:1.4}
.finchg li{margin:6px 0}
@media (max-width:1000px){.fincols{grid-template-columns:1fr}}
.stat.fin{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.stat.fin .eyebrow{white-space:normal}
.fintbl td:first-child{min-width:170px}
.fintbl{min-width:860px}
.errtext{white-space:pre-wrap;word-break:break-word;font:12px/1.4 ui-monospace,monospace;background:var(--surface);padding:8px;border-radius:8px;margin:8px 0 0;user-select:text}
.liveblock{border-top:1px solid var(--line);padding:12px 0;display:grid;gap:8px}
.copyrow{display:flex;gap:8px;align-items:center}.copyrow input{flex:1;min-width:0;font:12px ui-monospace,monospace}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.lines{width:100%;border-collapse:collapse;font-size:14px}
table.lines th,table.lines td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.lines th{font-size:12px;color:var(--muted);font-weight:600}
table.lines .num{text-align:right;white-space:nowrap}
table.lines tfoot th,table.lines tfoot td{border-bottom:0;border-top:2px solid var(--line)}
.linedesc{color:var(--muted);font-size:13px;margin-top:4px;white-space:pre-line;max-width:60ch}
/* receipts sheet */
body.sheetopen{overflow:hidden}
.sheetback{position:fixed;inset:0;background:rgba(30,28,22,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:640px;max-height:94vh;overflow:auto;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.15)}
@media (min-width:700px){.sheetback{align-items:center}.sheet{border-radius:16px;max-height:88vh;padding:20px 24px}}
.sheethead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.sheethead h2{margin:0;font-size:20px}
.rcchoices{display:grid;gap:10px;margin-top:12px}
.rcchoice{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);cursor:pointer}
.rcchoice .big{font-weight:700;font-size:16px;color:var(--ink)}
.rcchoice:hover,.rcchoice:focus-within{border-color:var(--ink)}
.rcbusy{display:flex;gap:10px;align-items:center;padding:28px 4px;color:var(--muted)}
.spin{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.scanwrap{position:relative;display:flex;justify-content:center;background:#222;border-radius:10px;overflow:hidden;margin:8px 0}
.scanwrap img{max-width:100%;max-height:58vh;display:block;user-select:none;-webkit-user-select:none;pointer-events:none}
.scanwrap svg{position:absolute;top:0;left:50%;transform:translateX(-50%);touch-action:none}
.scanpoly{fill:rgba(255,255,255,.12);stroke:#F2C14E;stroke-width:2}
.scanpt{fill:#F2C14E;fill-opacity:.85;stroke:#fff;stroke-width:2;cursor:grab}
.scanbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.rcbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rcthumbs{display:flex;gap:8px;overflow-x:auto;margin:8px 0 14px}.rcthumbs img{height:110px;border-radius:6px;border:1px solid var(--line)}
.rcpreview{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.rcpreview img,.pdfbadge{width:64px;height:84px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:none}
.pdfbadge{display:grid;place-items:center;background:var(--crit-soft);color:var(--crit);font-weight:700;font-size:13px}
.linkbtn{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;font:inherit;font-size:13px;cursor:pointer}
.coststat{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
/* search everything */
.gsearch{position:relative;margin:0 2px}
.gsearch input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font:inherit;font-size:16px;color:var(--ink)}
.gsearch input:focus{background:var(--surface);border-color:var(--ink);outline:none}
.gsicon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.gsres{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);z-index:40;max-height:min(70vh,520px);overflow:auto;padding:4px}
.gsitem .note{white-space:normal}
.gsitem{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink)}
.gsitem b{font-weight:600}
.gsitem.on,.gsitem:hover{background:var(--surface-2)}
.gsnone{padding:12px}
@media (max-width:900px){.gsearch{margin:10px 0 2px}}
/* jobs list */
.jobspage{max-width:760px}
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.pagehead .pagetitle{margin:0}
.jseg{display:flex;width:100%;margin-bottom:10px}.jseg button{flex:1;padding:9px 8px}
.jseg button[aria-pressed="true"] .count{background:rgba(255,255,255,.2);color:inherit}
.jlfilter{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:inherit;font-size:16px;margin-bottom:6px}
.jgroup{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 2px 6px;display:flex;gap:8px;align-items:center}
.jgroup span{font-family:var(--mono);font-size:11px}
.jlist{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.jlist li + li{border-top:1px solid var(--line)}
.jlist li[hidden]{display:none}
.jrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 14px;text-decoration:none;color:var(--ink);min-height:56px}
.jrow:hover,.jrow:focus-visible{background:var(--surface-2)}
.jmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.jmain b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jmain .note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jside{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.jside .note{font-size:12px;white-space:nowrap}
.jgo{color:var(--muted);font-size:22px;line-height:1}
@media (max-width:520px){.jrow{grid-template-columns:1fr auto;padding:12px}.jgo{display:none}}
/* job page: back to the list, previous and next */
.jobnav{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.jnavarrows{display:flex;gap:6px;min-width:0}
.jnavarrows .btn{display:inline-flex;gap:6px;align-items:center;max-width:220px}
.jnavname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.jnavname{display:none}.jnavarrows .btn{padding:8px 14px;font-size:18px}}

.camlens{position:relative;align-self:center;display:flex;gap:6px;background:rgba(0,0,0,.4);border-radius:999px;padding:4px;margin-bottom:8px}
.camlens:empty{display:none}
.camlens button{min-width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font:600 12.5px/1 var(--sans, system-ui);padding:0 6px;font-variant-numeric:tabular-nums}
.camlens button[aria-pressed="true"]{background:rgba(255,255,255,.95);color:var(--warn);font-size:13.5px}
.camrec[hidden],.cammsg[hidden]{display:none}
.ph figcaption{display:flex;flex-direction:column;gap:2px}
.phwhen{font-weight:600;color:var(--ink)}
.phwhere{color:var(--ink);text-decoration:none;font-size:12.5px;line-height:1.35}
.phwhere:hover{text-decoration:underline}
a.statlink{position:relative;display:block;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.statlink:hover,a.statlink:focus-visible{border-color:var(--ink)}
a.statlink:active{transform:scale(.98)}
.statgo{position:absolute;top:10px;right:12px;color:var(--muted);font-size:18px;line-height:1}
.jfilterbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:10px 0}
.jextra{color:var(--ink)!important;font-weight:600}
.qbolog{margin:4px 0 12px}.qbolog summary{cursor:pointer;font-size:13px;color:var(--muted)}
button.jrow{width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.invsum{display:grid;grid-template-columns:repeat(4,auto);gap:12px;align-items:end;margin-bottom:8px}
.invsum b{font-size:17px}
.sheeth3{font-size:14px;margin:14px 0 6px}
.paylist{list-style:none;margin:0 0 6px;padding:0;border:1px solid var(--line);border-radius:10px}
.paylist li{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;font-size:14px}.paylist li+li{border-top:1px solid var(--line)}
@media (max-width:520px){.invsum{grid-template-columns:1fr 1fr}}
.wgroup{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:8px;background:var(--surface)}
.wgroup summary{cursor:pointer;font-weight:600}
.wgroup[open] summary{margin-bottom:8px}
.wfield{display:block;margin:10px 0}.wfield textarea,.wfield input{width:100%;margin-top:4px}
.panel code{font-size:12px;background:var(--surface-2);padding:1px 4px;border-radius:4px}
/* clients */
.clhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.clcontact{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 4px;font-size:14px}
.clcontact a{color:var(--ink);text-decoration:none}.clcontact a:hover{text-decoration:underline}
.clnotes{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:14px;white-space:pre-line}
.addrblock{margin-top:12px}
.addrhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}.addrhead h3{margin:0}
.histq{margin-top:8px}.histq summary{cursor:pointer;font-size:13px;color:var(--muted);margin-bottom:6px}
.jrow.static{cursor:default}
.jobwhere{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:13.5px}.jobwhere a{color:var(--ink);text-decoration:none}.jobwhere a:hover{text-decoration:underline}
.prcat{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 14px;margin-bottom:8px}
.prcat summary{cursor:pointer}.prcat[open] summary{margin-bottom:8px}
.prtable td{font-size:13.5px}.prex summary{cursor:pointer;font-size:12px;color:var(--muted);margin-top:4px}
.prex ul{margin:4px 0 0;padding-left:16px;font-size:12.5px;color:var(--muted)}
.pritem .form{padding:12px}
[data-projnew],[data-addaddr]{white-space:nowrap;flex:none}
.navsep{border:0;border-top:1px solid var(--line);margin:8px 6px}
.navcreate{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;border:0;background:none;color:var(--ink);font:inherit;font-weight:700;font-size:14.5px;cursor:pointer;text-align:left;margin-bottom:4px}
.navcreate svg{width:21px;height:21px;flex:none}.navcreate svg circle{fill:var(--accent);stroke:none}.navcreate svg path{stroke:#fff;stroke-width:2.2;stroke-linecap:round;fill:none}
.navcreate:hover,.navcreate[aria-expanded="true"]{background:var(--surface-2)}
.createm{display:none;width:40px;height:40px;border-radius:12px;border:0;background:var(--accent);color:#fff;align-items:center;justify-content:center;cursor:pointer}
.createm svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.createmenu{position:fixed;z-index:60;min-width:190px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column}
.createmenu button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;background:none;border-radius:8px;font:inherit;font-weight:600;font-size:14.5px;color:var(--ink);cursor:pointer;text-align:left}
.createmenu button:hover,.createmenu button:focus{background:var(--surface-2);outline:none}
.createmenu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.navcreate[hidden],.createm[hidden]{display:none}
.crnewaddr{grid-column:1/-1;display:grid;grid-template-columns:2fr 64px 90px;gap:10px}
.crnewaddr .crstreet{grid-column:1/-1}.crnewaddr[hidden]{display:none}
.crnewaddr>*{min-width:0}.crnewaddr input{width:100%;box-sizing:border-box}
/* clients list, Jobber-style */
.clpage{max-width:1180px}
.clcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 18px}
.clcard{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;color:var(--ink);cursor:pointer}
.clcard:hover{border-color:var(--accent)}.clcard[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.clcardt{font-weight:700;font-size:15px}.clcardn{font-size:28px;font-weight:700;margin-top:10px;display:flex;align-items:center;gap:8px}
.clchg{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.clchg.down{background:var(--crit-soft);color:var(--crit)}.clchg.up{background:var(--good-soft);color:var(--good)}
.clbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cltitle{font-size:19px;margin:0}.cltitle .note{font-weight:400;font-size:14px}
.clctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.clsel{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);font:inherit;font-weight:600;font-size:14px;color:var(--ink)}
.clsearch{width:240px;margin:0}
.cltable{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.clrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) 110px 120px;gap:16px;align-items:center;padding:13px 16px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.clrow:first-child{border-top:0}a.clrow:hover{background:var(--surface-2)}
.clhead{font-size:13px;font-weight:600;color:var(--muted);padding-top:11px;padding-bottom:11px}
.clhead button{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.clname{display:flex;flex-direction:column;min-width:0}.clname b{font-weight:700}.clname span{color:var(--muted);font-size:13.5px}
.claddr{font-size:14px;min-width:0;overflow-wrap:anywhere}.cllast{font-size:14px;color:var(--muted)}
.clstat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px}
.clstat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.clstat.active{background:var(--good-soft);color:var(--good)}.clstat.lead{background:var(--info-soft);color:var(--info)}.clstat.archived{background:var(--surface-2);color:var(--muted)}
@media (max-width:700px){
  .clcards{grid-template-columns:1fr 1fr}.clcards .clcard:last-child{grid-column:1/-1}
  .clcardn{font-size:22px;margin-top:6px}
  .clctl,.clsearch,.clsel{width:100%}
  .clhead{display:none}
  .clrow{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px}
  .clrow .clname{grid-column:1}.clrow .claddr{grid-column:1;grid-row:2;color:var(--muted);font-size:13px}
  .clrow [role=cell]:nth-child(3){grid-column:2;grid-row:1;justify-self:end}.clrow .cllast{grid-column:2;grid-row:2;justify-self:end;font-size:12.5px}
}
.reqpanel{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--info);border-radius:12px;padding:14px 16px;margin:12px 0}
.reqhead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.reqcontact{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;margin-bottom:6px}.reqcontact a{color:var(--accent);font-weight:600}
.reqpanel p{margin:4px 0;font-size:14px}.reqmsg{margin:8px 0;padding:8px 12px;background:var(--surface-2);border-radius:8px;white-space:pre-wrap;font-size:14.5px}
.lsh{font-size:15px;margin:16px 0 6px}
.lsurl{display:flex;gap:8px;margin:6px 0}.lsurl input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:13px ui-monospace,monospace;background:var(--surface-2)}
.lstoggle{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-weight:600;font-size:14.5px}.lstoggle input{width:20px;height:20px;margin-top:1px;flex:none}
.lssteps{padding-left:20px;font-size:14px;line-height:1.5}.lssteps li{margin:4px 0}
.lsrecent{margin:0;padding-left:18px;font-size:14px}
.newleads{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--info);border-radius:12px;padding:14px 16px;margin:4px 0 16px}
.nlhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}.nlhead h2{font-size:18px;margin:0}
.nllist{list-style:none;margin:0;padding:0}.nllist li+li{border-top:1px solid var(--line)}
.nlrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;color:var(--ink);text-decoration:none}.nlrow:hover b{text-decoration:underline}
.nlname{display:flex;flex-direction:column;gap:2px;min-width:0}.nlmsg{font-size:13.5px;color:var(--ink);opacity:.8}
.nlside{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.leadacts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.leadacts .note{flex:1 1 220px}
.clcards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.clcards{grid-template-columns:1fr 1fr}.clcards .clcard:last-child{grid-column:auto}}
/* proposal builder */
.qb .field{display:block;margin:10px 0}.qb .field input,.qb .field textarea{width:100%}
.qbhead{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}.qbhead h2{margin:0}
.qbstatus{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}.qbacts{display:flex;gap:8px;flex-wrap:wrap}
.qbh{font-size:16px;margin:18px 0 8px}
.qblines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.qbline{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}.qbline.opt{border-style:dashed;background:var(--surface-2)}
.qbl1{display:flex;gap:8px;align-items:center}.qbname{flex:1;min-width:0;font-weight:700;font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.qbmove{display:flex;gap:4px}.iconbtn{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;font-size:14px;color:var(--ink)}.iconbtn[disabled]{opacity:.35;cursor:default}
.qbline textarea{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;resize:vertical;background:var(--surface)}
.qbl3{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}.qbl3 label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:2px}
.qbl3 input[type=number]{width:120px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:15px;background:var(--surface)}
.qbl3 .qbopt{flex-direction:row;align-items:center;gap:6px;font-size:14px;color:var(--ink);padding-bottom:8px}.qbopt input{width:18px;height:18px}
.qbtot{margin-left:auto;font-size:16px;padding-bottom:8px}
.qbadd{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.qbpicker{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-top:10px;padding:10px 12px;max-height:420px;overflow:auto}
.qbpickhead{display:flex;gap:8px;position:sticky;top:-10px;background:var(--surface);padding:4px 0 8px}.qbpickhead input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font:inherit}
.qbcat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.qbpicker ul{list-style:none;margin:0;padding:0}.qbpicker li button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:9px 8px;border:0;border-radius:8px;background:none;font:inherit;color:var(--ink);cursor:pointer}
.qbpicker li button:hover{background:var(--surface-2)}.qbpicker li button>span:first-child{display:flex;flex-direction:column;min-width:0}
.qbsum{margin:16px 0 0 auto;min-width:280px;border-collapse:collapse}.qbsum td{padding:4px 0}.qbsum td:last-child{text-align:right;padding-left:20px}.qbsum .big td{font-weight:700;font-size:17px;border-top:1.5px solid var(--ink);padding-top:8px}
.qbsaved{text-align:right}
.qbsend{border:1.5px solid var(--ink);border-radius:12px;padding:14px 16px;margin-top:14px;background:var(--surface)}.qbsend h3{margin:0 0 6px}
.banner-good{background:var(--good-soft);color:var(--good);border-radius:10px;padding:12px 14px;margin:12px 0}
.qbro{list-style:none;padding:0;margin:8px 0}.qbro li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.termsec{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0}.termsec input{width:100%;font-weight:700;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.termsec textarea{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px}
.termtext{white-space:pre-line;font-size:13.5px;margin:2px 0 8px}
@media (max-width:700px){.qbl3 input[type=number]{width:100px}.qbsum{min-width:0;width:100%}}
.navcount.navact{background:var(--crit);color:#fff}
/* reports */
.rppage{max-width:1180px}
.rpgroup{font-size:18px;margin:22px 0 10px}
.rpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rpcard{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);text-decoration:none}
.rpcard b{font-size:15.5px}.rpcard:hover{border-color:var(--accent)}.rpcard .note{font-size:13px;line-height:1.4}
.rppage .pagehead{align-items:flex-start;gap:12px;flex-wrap:wrap}.rppage .pagehead .note{margin:4px 0 0}
.rpacts{display:flex;gap:8px;flex-wrap:wrap}
.rprange{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 14px}
.rprange select,.rprange input{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);font:inherit;font-weight:600;font-size:14px;color:var(--ink)}
.rptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 16px}
.rptile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.rptile .v{font-size:26px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}.rptile .note{font-size:12.5px;margin-top:2px}
.rpchg{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.rpchg.up{background:var(--good-soft);color:var(--good)}.rpchg.down{background:var(--crit-soft);color:var(--crit)}
.rpchart{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 14px 4px;overflow-x:auto;margin-bottom:6px}
.rpchart svg{display:block}.rpchart text{font-size:11px;fill:var(--muted);font-family:inherit}.rpchart .grid{stroke:var(--line);stroke-width:1}
.rplegend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin:0 0 16px;align-items:center}.rplegend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.rph{font-size:16px;margin:20px 0 8px}
.rpfilter{margin:0 0 12px}
.rptable th button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;text-align:inherit;white-space:nowrap}
.rptable td.bad{color:var(--crit);font-weight:600}.rptable tfoot td{border-top:1.5px solid var(--ink)}
.rptable td{font-size:13.5px}
@media (max-width:700px){.rptiles{grid-template-columns:1fr 1fr}.rptile .v{font-size:20px}.rpfilter button{font-size:13px;padding:8px 10px}}
@media print{.sidenav,.top,.noprint,#tabs{display:none!important}.rppage{max-width:none}.rpchart{overflow:visible}body{background:#fff}}
/* job list on phones: client, "#77 · job name" and address wrap instead of being cut off; stage and dates go underneath */
@media (max-width:520px){
  .jlist .jrow{grid-template-columns:1fr;gap:6px}
  .jlist .jmain b,.jlist .jmain .note{white-space:normal;overflow:visible}
  .jlist .jside{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 10px;text-align:left}
}
.jextra{font-weight:500!important}
.rcdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;border:2px dashed var(--line);border-radius:12px;padding:22px 16px;background:var(--surface-2);cursor:pointer;margin:10px 0}
.rcdrop b{font-size:15px}.rcdrop:hover,.rcdrop:focus-visible{border-color:var(--accent)}
.rcdrop.over{border-color:var(--accent);background:var(--accent-soft, #EFEADC);outline:2px solid var(--accent);outline-offset:2px}
@media (hover:none){.rcdrop{display:none}}
.hubbox{margin-top:14px;border-left:4px solid var(--accent)}.hubhead{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}.hubhead h3{margin:0 0 4px}
.hubacts{display:flex;gap:8px;flex-wrap:wrap}#hubForm{margin-top:10px}
.hubbox{padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px}
/* follow-ups and leaving Jobber */
.fuform{display:flex;flex-direction:column;gap:12px}.fuset{border:1px solid var(--line);border-radius:12px;padding:12px 16px 14px;margin:0}
.fuset legend{font-weight:700;padding:0 6px}.fuset .field{display:block;margin:10px 0}.fuset .field input:not([type=checkbox]),.fuset .field textarea,.fuset .field select{width:100%}
.fuin{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.fuin input{width:90px!important}
.furow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fuset code{background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:12px}
.fuline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.exprog{display:flex;gap:12px;align-items:center;margin:10px 0 4px}.exbar{flex:1;height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}.exbar i{display:block;height:100%;background:var(--good)}
.exlist{list-style:none;margin:0;padding:0}.exlist li{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.exlist li:first-child{border-top:0}
.exlist li>span:last-child,.exchk>span{display:flex;flex-direction:column;gap:2px}.exmark{width:22px;flex:none;font-weight:700;text-align:center}
.exlist li.exok .exmark{color:var(--good)}.exlist li.exopen .exmark{color:var(--muted)}.exlist li.exinfo .exmark{color:var(--accent)}
.exchk{display:flex;gap:10px;align-items:flex-start;cursor:pointer;width:100%}.exchk input{width:20px;height:20px;flex:none;margin-top:1px}
.exsub{font-size:13px}.exsub a{color:var(--accent)}
@media (max-width:700px){.furow{grid-template-columns:1fr}}
.exlist li>span:last-child,.exchk>span{align-items:flex-start}.exlist .flag{display:inline-block;margin-left:6px}
.arbox{border:1px solid var(--line);border-radius:12px;padding:4px 16px 14px;margin:14px 0;background:var(--surface-2)}
.jnblock h3{margin-top:0}.jnlist{list-style:none;margin:0;padding:0}.jnlist li{padding:10px 0;border-top:1px solid var(--line)}.jnlist li:first-child{border-top:0}
.jnhead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.jnmsg{white-space:pre-wrap;margin:4px 0;font-size:14px}
.jnfiles{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px}.jnfiles a{color:var(--accent)}.jnblock details summary{cursor:pointer}
.ccbar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin:4px 0 12px}.ccbar i{display:block;height:100%;background:var(--accent,#2f6f4f)}
.cctabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 8px}.cctabs button{border:1px solid var(--line);background:none;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;color:inherit}.cctabs button.on{background:var(--ink,#222);color:var(--surface,#fff);border-color:transparent}
.cclist{max-height:420px;overflow:auto;border-top:1px solid var(--line)}
.ccrow{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}.ccrow>div{min-width:0}.ccrow b{display:block;font-weight:600}.ccrow span{font-size:12.5px;opacity:.7}
.ccrow select{max-width:46%;font:inherit;font-size:13px;padding:5px 6px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:inherit}
@media(max-width:640px){.ccrow{flex-direction:column;align-items:stretch}.ccrow select{max-width:100%}}
.ccfail{margin:10px 0;font-size:13px}.ccfail ul{margin:6px 0 0 18px;padding:0}
.ccwhy{display:block;font-style:normal;font-size:12.5px;color:var(--accent);margin-top:2px}
.ccreasons{margin:0 0 8px}
/* Photos tab */
.phmonth h3{margin:18px 0 8px;font-size:15px}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:4px}
.phcell{position:relative;aspect-ratio:1;padding:0;border:0;border-radius:6px;overflow:hidden;background:var(--surface-2);cursor:pointer}
.phcell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.phcell:hover img{transform:scale(1.03)}
.phcell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.phblank{display:block;width:100%;height:100%;background:var(--line)}
.phplay{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:999px}
@media(max-width:640px){.phgrid{grid-template-columns:repeat(3,1fr);gap:2px}.phcell{border-radius:2px}}
.phview{position:fixed;inset:0;z-index:300;background:#0d0d0c;color:#f4f2ec;display:flex;flex-direction:column}
.phtop{display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;font-size:14px;opacity:.9}
.phstage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.phstage img,.phstage video{max-width:100%;max-height:100%;object-fit:contain}
.phplaybig{position:absolute;background:rgba(0,0,0,.65);color:#fff;text-decoration:none;padding:12px 20px;border-radius:999px;font-weight:600}
.phnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:34px;line-height:1;cursor:pointer}
.phnav:hover{background:rgba(255,255,255,.16)}.phnav.prev{left:10px}.phnav.next{right:10px}
@media(max-width:640px){.phnav{display:none}}
.phinfo{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08)}
.phinfo b{display:block;font-size:14.5px}.phinfo span{font-size:12.5px;opacity:.65}
.phacts{display:flex;gap:8px}.phview .btn.ghost{color:#f4f2ec;border-color:rgba(255,255,255,.25);background:transparent}
.phacts .btn,.uploadbox a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.duepick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duechips{display:flex;gap:6px;flex-wrap:wrap}
.duechips button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 13px;font:inherit;font-size:13.5px;cursor:pointer;min-height:36px}
.duechips button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:transparent}
.duepick input:disabled{opacity:.5}
.chargebox{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0;background:var(--surface-2)}
.chargebox>div{display:flex;flex-direction:column;gap:2px}.chargebox .note{font-size:12.5px}
@media(max-width:640px){.chargebox{flex-direction:column;align-items:stretch}}
.clstat.past{background:#efe9db;color:var(--warn)}
.cltabs{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.cltabs [role=tab]{border:0;background:none;font:inherit;font-weight:600;font-size:14.5px;color:var(--muted);padding:8px 12px;border-radius:999px;cursor:pointer;min-height:38px}
.cltabs [role=tab]:hover{background:var(--surface-2);color:var(--ink)}
.cltabs [role=tab][aria-selected=true]{background:var(--ink);color:var(--surface)}
.cltabs [role=tab] .count{font-weight:500;opacity:.7;margin-left:2px}
.clspecial{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:var(--accent-soft);border-radius:999px;padding:4px 6px 4px 12px;margin-left:6px}
.cltabs [role=tab] .count{background:none;color:inherit;padding:0;min-width:0}
.phshared{position:absolute;right:5px;top:5px;background:rgba(255,255,255,.92);color:var(--ink);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px}
.phtick{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.25);color:transparent;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.phcell.chosen .phtick{background:var(--accent);color:#fff}
.phgrid.picking .phcell:not(.chosen) img{opacity:.75}.phgrid.picking .phcell:disabled{opacity:.35;cursor:not-allowed}
.phcell.chosen{outline:3px solid var(--accent);outline-offset:-3px}
.phpickbar{position:sticky;top:8px;z-index:5;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--line)}
.phpickbtns{display:flex;gap:8px}
.tplsave{display:grid;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--surface-2)}
.tpllist{list-style:none;margin:0;padding:0}.tpllist li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.tpllist li>span:first-child{display:flex;flex-direction:column}.tplbtns{display:flex;gap:6px;flex:none}
/* Timesheets */
.tsbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tsweek{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tsweek b{font-size:16px}
.tsgrid th,.tsgrid td{white-space:nowrap}.tsgrid td:first-child{white-space:normal;min-width:170px}
.tssum{display:flex;gap:22px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:12px;background:var(--surface)}
.tssum b{font-size:22px}.tsacts{margin-left:auto}
.tsday{margin:10px 0 14px}.tsdayh{display:flex;justify-content:space-between;font-weight:700;font-size:14px;padding:6px 0;border-bottom:1px solid var(--line)}
.tslist{list-style:none;margin:0;padding:0}.tslist li{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.tswhen{flex:none;width:150px;font-variant-numeric:tabular-nums;font-size:14px}.tswhat{flex:1;display:flex;flex-direction:column;min-width:0}
.tslist li.tscheck{background:var(--warn-soft);padding-left:8px;padding-right:8px;border-radius:8px}
.tsform{grid-template-columns:repeat(3,1fr);width:100%;padding:10px 0}
.kshop{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media(max-width:640px){.tslist li{flex-wrap:wrap}.tswhen{width:auto}.tsform{grid-template-columns:1fr 1fr}.tsacts{margin-left:0}}
.tswhat a{color:inherit;text-decoration:none}.tswhat a:hover{text-decoration:underline}
.gchecks{display:flex;gap:14px;flex-wrap:wrap}.gustobtn{text-decoration:none}
.sheet a.btn,.kshop a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.bknas{margin-top:12px}.bknas summary{cursor:pointer;font-weight:600}.bknas ol{margin:8px 0 6px 18px;padding:0;font-size:14px;line-height:1.55}
.aplist{list-style:none;margin:0;padding:0}.aplist li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}.aplist li>span{display:flex;flex-direction:column}
/* Messages */
.cmhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.cmacts{display:flex;gap:6px;flex-wrap:wrap}.cmacts a.btn{text-decoration:none}
.cmthreads{list-style:none;margin:8px 0 0;padding:0}.cmthreads>li{border-top:1px solid var(--line)}
.cmrow{display:grid;grid-template-columns:160px 1fr auto;gap:12px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:10px 4px;font:inherit;color:inherit;cursor:pointer}
.cmrow:hover{background:var(--surface-2)}.cmwho{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmsub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmdate{font-size:13px;color:var(--muted)}
.cmmsgs{padding:4px 4px 12px}.cmmsg{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--surface)}.cmmsg.out{background:var(--surface-2);margin-left:28px}
.cmmeta{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}.cmbody{white-space:pre-wrap;font-size:14px;line-height:1.5;margin-bottom:6px;overflow-wrap:anywhere}
@media(max-width:640px){.cmrow{grid-template-columns:1fr auto}.cmsub{grid-column:1/-1;white-space:normal}.cmmsg.out{margin-left:12px}}
/* Sub portal onboarding */
.obbox .client{font-size:20px}.oblist{list-style:none;margin:8px 0 0;padding:0}.obitem{border-top:1px solid var(--line)}
.obrow{display:flex;gap:12px;align-items:center;width:100%;background:none;border:0;padding:12px 2px;font:inherit;color:inherit;text-align:left;cursor:pointer}.obrow>span:nth-child(2){flex:1}
.obtick{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.obitem.ok .obtick{background:var(--good,var(--good));border-color:transparent}
.obform{grid-template-columns:1fr;padding:4px 2px 14px}.obradios{display:flex;flex-direction:column;gap:8px}
.obform:has(input[name=pay_method][value=ach]:not(:checked)) .obach{display:none}
.substatus{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
.paykeybox ol{margin:8px 0 10px 18px;padding:0;font-size:14px;line-height:1.55}.paykeybox .note{margin:6px 0}
.keycheck{margin:10px 0;padding:10px 12px;background:#fff;border:1px solid #E4C9A8;border-radius:8px;font-size:14px}.keycheck ul{margin:6px 0 0;padding-left:20px}.keycheck .btn{margin-left:6px}
/* ---------- communication hub (Messages, top right) ---------- */
.hubbtn{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.hubbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.hubbtn:hover{background:var(--surface-2)}
.hubbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hubcount{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--crit);color:#fff;font-size:11.5px;line-height:20px;text-align:center}
@media (min-width:901px){
  body.tvmode .hubbtn{display:none}
}
body.tvmode .hubbtn{display:none}
.hub[hidden]{display:none}
.hub{position:fixed;inset:0;z-index:70}
.hubback{position:absolute;inset:0;background:rgba(30,28,22,.35)}
.hubpanel{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--bg,var(--surface));border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,.12);
  padding:calc(14px + env(safe-area-inset-top,0px)) 0 env(safe-area-inset-bottom,0px)}
body.hubopen{overflow:hidden}
.hubhead{display:flex;align-items:center;gap:10px;padding:0 16px 12px;border-bottom:1px solid var(--line)}
.hubhead h2{margin:0;font-size:19px}
.hubwho{flex:1;min-width:0;display:flex;flex-direction:column}.hubwho h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubhead > h2{flex:1}
.hubacts{display:flex;gap:6px;align-items:center}
.hubclose{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.hubseg{margin:12px 16px 4px;align-self:flex-start}
.hubnote{margin:12px 16px}
.hubconvs{list-style:none;margin:6px 0 0;padding:0;overflow-y:auto;flex:1}
.hubconv{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 16px;cursor:pointer;color:var(--ink);font:inherit}
.hubconv:hover{background:var(--surface-2)}
.hubconv:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.hubav{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700}
.hubmid{display:flex;flex-direction:column;min-width:0;gap:2px}
.hubname{font-weight:600}.hubconv.unread .hubname{font-weight:800}
.hubprev{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubconv.unread .hubprev{color:var(--ink)}
.hubjob{font-size:12px}
.hubright{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12px}
.hubdot{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:11.5px;line-height:20px;text-align:center}
.hubneeds{font-size:11px;font-weight:700;color:var(--warn);border:1px solid var(--warn);border-radius:6px;padding:1px 6px}
.hubtag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:5px;padding:1px 5px;margin-right:6px;background:var(--accent-soft);color:var(--accent);vertical-align:1px}
.hubtag.em{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.hubjobs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0}
.hubjobs .chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.hubjobs .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hubneedsbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 16px 0;padding:8px 12px;border-radius:10px;background:var(--warn-soft);font-size:13.5px;font-weight:600}
.hubmsgs{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:12px}
.hubmsg{display:flex;flex-direction:column;max-width:86%}
.hubmsg.in{align-self:flex-start}.hubmsg.out{align-self:flex-end;align-items:flex-end}
.hubmsg.email{max-width:100%;width:100%;align-items:stretch}
.bubble{padding:9px 13px;border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.4}
.hubmsg.in .bubble{background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:5px}
.hubmsg.out .bubble{background:var(--accent);color:var(--on-accent);border-bottom-right-radius:5px}
.hubmeta{font-size:11.5px;margin-top:3px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hubmsg.out .hubmeta{justify-content:flex-end}
.hubjobtag{background:none;border:1px dashed var(--line);border-radius:6px;padding:0 6px;font:inherit;font-size:11.5px;color:var(--muted);cursor:pointer}
.hubjobtag:hover{border-style:solid;color:var(--ink)}
.hubmove{font-size:12.5px;max-width:220px}
.emcard{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.hubmsg.email.out .emcard{background:var(--surface-2)}
.embody{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;max-height:220px;overflow:auto}
.emacts{display:flex;gap:12px;align-items:center;margin-top:4px}
.hubcompose{border-top:1px solid var(--line);padding:10px 16px 12px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.hubrow{display:flex;gap:8px;align-items:flex-end}
.hubrow textarea{flex:1;resize:none;min-height:42px;max-height:160px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:16px;background:var(--surface)}
.hubphone{align-self:flex-start;font-size:13px}
.hubpick{padding:12px 16px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.hubpicklist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hubpicklist button{width:100%;display:flex;justify-content:space-between;gap:10px;text-align:left;background:var(--surface);border:0;border-bottom:1px solid var(--line);padding:10px 12px;font:inherit;cursor:pointer;color:var(--ink)}
.hubpicklist button:hover{background:var(--surface-2)}
.hubpicklist li.note{padding:10px 12px}
.cmtexts{display:flex;flex-direction:column;gap:10px;padding:10px 4px}
.txsteps{padding-left:20px;display:flex;flex-direction:column;gap:12px}
.txsteps li.done{color:var(--muted)}
.txnum{display:flex;gap:8px;margin-top:6px;max-width:340px}.txnum input{flex:1}
@media (max-width:600px){ .hubpanel{width:100%;border-left:0} .hubmsg{max-width:92%} }
.hubcompose .note a{color:inherit}
.copytxt{margin:8px 0;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;background:var(--surface-2);font-size:14px;user-select:all}
/* Settings: grouped sections with a jump bar */
.setjump{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0}
.setjump .chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.setjump .chip:hover{background:var(--surface-2)}
.setgroup{margin:0 0 30px;scroll-margin-top:64px}
.setgh{font-size:20px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
@media (max-width:900px){ .setjump{top:56px} }
@media (max-width:900px){ .setjump{position:static;flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 16px;padding:4px 16px;scrollbar-width:none} .setjump::-webkit-scrollbar{display:none} .setjump .chip{flex:none} }
/* ---------- Home: the welcome strip ---------- */
.hmhero{position:relative;display:flex;flex-direction:column;gap:14px;margin:0 0 22px;padding:20px 22px;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,var(--accent-soft) 0%,var(--surface) 62%);border:1px solid var(--line);box-shadow:var(--shadow)}
.hmhero.hasphoto{background:linear-gradient(100deg,rgba(251,250,246,.97) 0%,rgba(251,250,246,.9) 48%,rgba(251,250,246,.62) 100%),var(--hmphoto) center/cover no-repeat}
.hmtop{display:grid;grid-template-columns:minmax(240px,1.1fr) minmax(0,1.5fr) minmax(220px,1fr);gap:18px;align-items:stretch}
.hmglance{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hmchip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
a.hmchip:hover{border-color:var(--accent)}
.hmchip.quiet{color:var(--muted);font-weight:500}
.hmpeople{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:13.5px;color:var(--muted)}
.hmparty{color:var(--ink);font-weight:700;font-size:15px}
.hmalerts{display:flex;flex-direction:column;gap:6px}
.hmalert{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--info-soft);border:1px solid #C8D6E5;color:var(--ink);text-decoration:none;font-size:14px}
.hmalert:hover{border-color:var(--info)}
.hmwins{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hmwinsh{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-right:4px}
.hmwin{display:inline-flex;gap:6px;align-items:center;padding:5px 11px;border-radius:999px;background:var(--good-soft,var(--good-soft));color:var(--ink);font-size:13px;text-decoration:none}
.hmwin[href]:hover{outline:1px solid var(--good,var(--good))}
.hmphotolabel{align-self:flex-end;font-size:12px;color:var(--muted);text-decoration:none;background:rgba(255,255,255,.75);padding:3px 9px;border-radius:999px}
.hmconfetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:200}
.hmhello{display:flex;flex-direction:column;justify-content:center;gap:4px}
.hmhello h2{margin:0;font-size:28px;line-height:1.15;letter-spacing:-.01em}
.hmhello .note{font-size:15px}
.hmverse{margin:0;padding:4px 0 4px 18px;border-left:3px solid var(--accent);display:flex;flex-direction:column;justify-content:center;gap:8px}
.hmverse blockquote{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:17px;line-height:1.5;font-style:italic;color:var(--ink)}
.hmverse figcaption{font-size:13.5px;font-weight:700;color:var(--accent)}
.hmverse figcaption .note{font-weight:500}
.hmweather{display:flex;flex-direction:column;gap:10px;justify-content:center}
.hmwx{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.hmwx > div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.hmwx .note{font-size:12.5px}
.hmwxicon{font-size:28px;line-height:1;flex:none}
.hmtemp{font-weight:800;font-size:18px}
.hmhero.hmin{animation:hmIn .6s cubic-bezier(.2,.7,.2,1) both}
.hmhero.hmin .hmhello h2{animation:hmIn .7s .08s cubic-bezier(.2,.7,.2,1) both}
.hmhero.hmin .hmverse{animation:hmIn .7s .18s cubic-bezier(.2,.7,.2,1) both}
.hmhero.hmin .hmweather{animation:hmIn .7s .28s cubic-bezier(.2,.7,.2,1) both}
@keyframes hmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .hmhero.hmin, .hmhero.hmin *{animation:none !important} }
@media (max-width:1100px){ .hmtop{grid-template-columns:1fr 1fr} .hmverse{grid-column:1/-1;order:3} }
@media (max-width:640px){ .hmhero{padding:16px} .hmtop{grid-template-columns:1fr;gap:14px} .hmhero.hasphoto{background:linear-gradient(180deg,rgba(251,250,246,.93),rgba(251,250,246,.9)),var(--hmphoto) center/cover no-repeat} .hmhello h2{font-size:24px} .hmweather{flex-direction:column} .hmwx{padding:8px 12px} .hmwxicon{font-size:24px} }
.teamdates{display:flex;gap:10px;flex-wrap:wrap}.teamdates input{width:150px}

.hubbtn{height:auto;padding:10px 16px;font-size:15px}
.homerefresh{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;font-size:15px}
.homerefresh svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.homerefresh.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.refreshbtn[hidden]{display:none !important}
@media (max-width:900px){ .sidehead .createm{margin-left:auto} }
/* ---------- Estimator ---------- */
.estlist{list-style:none;margin:0;padding:0}
.estlist a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.estlist a:hover{background:var(--surface-2)}
.estlist .note{grid-column:1}.estlistp{grid-column:2;grid-row:1/3;align-self:center;text-align:right}
.estgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.estmain{display:flex;flex-direction:column;gap:18px}
.estside{position:sticky;top:16px}
.estsum{display:flex;flex-direction:column;gap:8px}
.esttotal{font-size:34px;font-weight:800;line-height:1.1}
.estsum hr{border:0;border-top:1px solid var(--line);width:100%;margin:6px 0}
.estt{border:0;background:transparent;font:inherit;font-size:28px;font-weight:800;padding:2px 0;min-width:0;flex:1;color:var(--ink)}
.estt:focus{outline:2px solid var(--accent);border-radius:6px}
.estfiles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.estfiles li{display:flex;flex-direction:column;gap:3px}
.estkinds{display:flex;flex-wrap:wrap;gap:4px}
.chip.small{font-size:11.5px;padding:1px 7px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.estup{cursor:pointer;align-self:flex-start}
.estspec{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.esth2{display:flex;justify-content:space-between;align-items:center}
.esth2 h2{margin:0}
.estarea{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.estarow{display:grid;grid-template-columns:minmax(140px,1.4fr) minmax(140px,1fr) 110px minmax(110px,auto) 28px;gap:8px;align-items:center}
.estaname{font-weight:700}
.estlf{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.estlf input{width:76px}
.estap{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}.estap b{font-size:17px}
.estameta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px}
.estfeat{margin:0}
.estover summary{cursor:pointer;font-size:13px;color:var(--muted)}
.estover .estspec{margin-top:8px}
.estadds{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.estadd{display:inline-flex;gap:6px;align-items:center;font-size:13px;background:var(--surface-2);border-radius:999px;padding:3px 6px 3px 11px}
.estadd input{width:54px;padding:2px 6px}
.estsug{border:1px dashed var(--accent);background:none;border-radius:999px;padding:3px 10px;font-size:12.5px;color:var(--accent);cursor:pointer;font-weight:600}
.estaddpick{max-width:240px;font-size:13px}
.estq{display:flex;flex-direction:column;gap:10px;padding-left:20px}
.estq li{display:flex;flex-direction:column;gap:3px}
.esttable{width:100%;border-collapse:collapse;font-size:14px}
.esttable th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:6px;border-bottom:1px solid var(--line)}
.esttable td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
.esttable input[type=number]{width:96px}.esttable textarea{width:100%;min-width:220px;font-size:13px}
.estadjs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.estadjs h3{margin:0 0 6px;font-size:15px}
.estadjrow{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.estadjrow input:not([type=number]):not([type=checkbox]){flex:1;min-width:120px}.estadjrow input[type=number]{width:72px}
.estsavebar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;position:sticky;bottom:12px;z-index:4}
.estsavebar #estrnote{flex:1;min-width:200px}
.esthist{list-style:none;margin:0;padding:0}
.esthist li{padding:10px 2px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.esthist li.off{opacity:.55}
.esthact{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
@media (max-width:1000px){ .estgrid{grid-template-columns:1fr} .estside{position:static;order:-1} }
@media (max-width:640px){ .estarow{grid-template-columns:1fr 1fr} .estarow .estaname{grid-column:1/-1} .estap{align-items:flex-start} }
@media (min-width:901px){ .sidehead .menubtn, .sidehead .createm{display:none !important} }
.estgrid > *, .estmain > *, .estside > *{min-width:0}
.estsum .sel, .estsum select{width:100%;max-width:100%;box-sizing:border-box}
.esttable textarea, .estq input, textarea.sel{font-family:inherit}
.estsavebar{padding:10px 14px}
@media (max-width:640px){ .esttable{display:block;overflow-x:auto} .estside{width:100%} }
.estfile{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.estpages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.estpage{position:relative;display:flex;flex-direction:column;gap:6px;border:2px solid var(--line);border-radius:12px;padding:6px;background:var(--surface);cursor:pointer}
.estpage.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.estpage.dim:not(.on){opacity:.6}
.estpage input{position:absolute;top:10px;left:10px;width:20px;height:20px;accent-color:var(--accent);z-index:1}
.estthumb{display:grid;place-items:center;aspect-ratio:3/2;background:#fff;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.estthumb img{width:100%;height:100%;object-fit:contain}
.estpcap{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.3}
.estpcap .note{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.estpcap .flag{align-self:flex-start;font-size:11px}
.flag.muted{background:var(--surface-2);color:var(--muted)}
.estpickbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}
.estplanbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.estdrop{position:relative}
.estdropmsg{display:none}
.estdrop.dragging{outline:3px dashed var(--accent);outline-offset:-6px;background:var(--accent-soft)}
.estdrop.dragging .estdropmsg{display:grid;place-items:center;position:absolute;inset:0;z-index:3;border-radius:inherit;background:rgba(251,250,246,.85);font-size:20px;font-weight:800;color:var(--accent);pointer-events:none}
.esterr{color:var(--crit);margin-top:6px}
.invstats{margin:0 0 4px}
.invstats .stat .v{font-size:22px}
.invstats .stat.good .v{color:var(--good)}
.invjb details summary{list-style:none;cursor:pointer}
.invjb details summary::-webkit-details-marker{display:none}
.invjb details[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.invjb .paylist{margin:0 0 8px;padding:6px 14px}
.invedit{margin-top:14px}
.invedit summary{cursor:pointer}
.estover{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 2px}
.estover label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2, #6b6457)}
.estover input{width:130px}
/* Refresh at the top right of every page: in the page on a computer, in the top bar on a phone */
.pagerefresh{float:right;margin:0 0 10px 14px;position:relative;z-index:1}
@media (max-width:900px){ .pagerefresh{display:none !important} }
@media (min-width:901px){ #refreshbtn{display:none !important} }
.refreshbtn:not([hidden]) + .createm{margin-left:8px}
/* Settings -> Booking page */
.bkform{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.bkdays{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px}
.bkcode{width:100%;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:6px 0}
.bksteps{padding-left:20px;margin:8px 0}
.bkbtnopts{display:grid;grid-template-columns:1fr 120px;gap:10px;max-width:520px}
.bkbtnopts input[type=color]{height:42px;padding:2px;width:100%}
.note.good{color:var(--good)}
.settings>.panelwide{grid-column:1/-1}
/* Payment schedule: rows that open an invoice */
tr.invclick{cursor:pointer}
tr.invclick:hover td,tr.invclick:focus-visible td{background:var(--surface-2, #f3efe5)}
tr.invclick:focus-visible{outline:2px solid var(--accent, #5f5236);outline-offset:-2px}
.planform{grid-template-columns:repeat(4,minmax(0,1fr));margin:8px 0 12px}
@media (max-width:640px){ .planform{grid-template-columns:repeat(2,minmax(0,1fr))} }
.planpresets{display:flex;flex-wrap:wrap;gap:6px}
.jlines td{vertical-align:top}
/* Settings → Match the app to Jobber */
.rclist{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.rcjob{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.rcjob.ok{opacity:.85}
.rchead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.rcact{display:flex;gap:6px;flex-wrap:wrap}
.rcissues{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.rcissues li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 10px;border-radius:8px;font-size:14px}
.rcissues .rccrit{background:var(--crit-soft)}
.rcissues .rcwarn{background:#f6eedb}
.rcissues .rcinfo{background:var(--surface-2, #f3efe5);color:var(--ink-2, #6b6457)}
.rcok{margin-top:12px}
/* Pull down to refresh (home-screen app) */
.ptr{position:fixed;top:calc(env(safe-area-inset-top) + 6px);left:50%;transform:translate(-50%,-50px);opacity:0;z-index:60;width:38px;height:38px;border-radius:50%;background:var(--surface,#fff);box-shadow:0 2px 10px rgba(0,0,0,.18);display:grid;place-items:center;pointer-events:none;transition:opacity .15s}
.ptr svg{width:20px;height:20px;fill:none;stroke:var(--accent,#5f5236);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ptr.ready svg{stroke:var(--good,var(--good))}
.ptr.spin{transition:transform .2s}
.ptr.spin svg{animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
/* Files: drag-and-drop upload, and "what kind of file is it?" */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;border:2px dashed var(--line);border-radius:12px;padding:26px 16px;background:var(--surface-2);cursor:pointer;margin:10px 0}
.dropzone b{font-size:15px}.dropzone .dzicon{font-size:26px;line-height:1;color:var(--accent)}
.dropzone:hover,.dropzone:focus-within{border-color:var(--accent)}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft);outline:2px solid var(--accent);outline-offset:2px}
.upkchoices{display:flex;flex-direction:column;gap:8px}
.upkopt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.upkopt span{display:flex;flex-direction:column;gap:2px}
.upkopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.upkopt input{margin-top:3px;accent-color:var(--accent)}
.upklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.upklist li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}
.upklist li > span{min-width:0;overflow-wrap:anywhere}
/* Invoice amount: dollars, % of contract, or billed-to % */
.amtlink{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.amtlink .amtafter{margin:0;max-width:none;background:var(--surface-2);border-radius:8px;padding:8px 10px}
/* Invoice: who gets it */
.rcpts{display:flex;flex-direction:column;gap:6px}
.rcpt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface);cursor:pointer;color:var(--ink)}
.rcpt span{display:flex;flex-direction:column;gap:1px;min-width:0;overflow-wrap:anywhere}
.rcpt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.rcpt input{margin-top:3px;accent-color:var(--accent)}
.rcptadd{display:flex;gap:8px;margin:8px 0 6px}
.rcptadd input{flex:1;min-width:0}
/* Site tab: site contact, readiness checks, delays */
.sitecontact,.sitesend,.sitedelay{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.sitechks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sitechk{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.sitechk.draft{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.sitechkhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sitechkhead h3{margin:0}
.sitedelay .check{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
.sitedelays li{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
.sitedelays li > span{display:block}

/* Partners page */
.ptnpage{max-width:1100px}
.ptnpage .ptntbl{width:100%}
.ptnform{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ptntbl tr.muted td{opacity:.6}
.tchform{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.selform{display:grid;grid-template-columns:1fr;gap:12px}
.selblock{margin-top:16px}

/* Orders tab */
.ordform{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:10px 0}
.ordlist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ordrow{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.ordrow.late{border-color:var(--crit)}
.ordmain{min-width:0;flex:1 1 260px}
.ordacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Production tab and box scan */
.prdform{display:grid;gap:10px;margin:10px 0}
.prdform input{padding:6px 8px;border:1px solid var(--line);border-radius:8px}
.prdbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:12px 0}
.prdst{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.prdst b{font-size:18px}
.prdfill{height:6px;background:var(--line);border-radius:4px;overflow:hidden}.prdfill i{display:block;height:100%;background:var(--accent)}
.prdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.prdbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);cursor:pointer}
.prdbox .prdlabel{display:flex;flex-direction:column;min-width:0;flex:1}.prdbox .prdacts{display:flex;gap:4px}
.prdbox.st-cut,.prdbox.st-banded{border-left-color:var(--warn)}.prdbox.st-assembled,.prdbox.st-finished{border-left-color:#3E6E9E}.prdbox.st-loaded,.prdbox.st-installed{border-left-color:#3F6B3A}
.prdarea{margin:14px 0 6px;display:flex;gap:8px;align-items:baseline}
.prdbulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--accent-soft);border-radius:10px;padding:8px 12px;margin:8px 0;position:sticky;top:8px;z-index:3}
.boxscan{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.boxscan h1{font-size:30px;margin:6px 0 0}
.boxnext{font-size:20px;padding:18px;width:100%}
.boxall{display:grid;grid-template-columns:1fr 1fr;gap:8px}.boxall .btn{padding:14px}.boxall .btn.on{background:var(--accent-soft);border-color:var(--accent)}

/* Next step */
.nextform{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.nextblock .nexttext{margin:0 0 4px;font-size:16px}
.nextblock.late{border-color:var(--crit)}
.card .nextline{display:block;font-size:12.5px;color:var(--ink);margin-top:4px}
.card .nextline.late{color:var(--crit);font-weight:600}

/* ===== New layout (preview, html.l2) ===== */
/* ---------- Client portal tab, daily log, punch list ---------- */
.ptlink{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 4px}.ptlink input{flex:1 1 260px;min-width:0;font-size:13px}
.pth{margin:18px 0 6px;font-size:14px}
.ptlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.ptrow{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);cursor:pointer;height:100%}
.ptrow input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);flex:none}.ptrow span{display:flex;flex-direction:column;gap:2px}
.ptrow:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.logform,.form.logform{margin:10px 0}.chk{display:flex;gap:8px;align-items:center;font-size:14px}.chk input{width:18px;height:18px;accent-color:var(--accent)}
.logday{margin-top:14px}.logentry{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);margin-top:6px}.logentry p{margin:4px 0}
.lgphotos{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.lgthumb{display:block;width:84px;height:84px;border-radius:8px;overflow:hidden;background:var(--surface-2)}.lgthumb img{width:100%;height:100%;object-fit:cover;display:block}
.punlist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.punrow{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}.punrow .ordmain{flex:1;min-width:0}
.punchk{flex:none;width:30px;height:30px;border-radius:8px;border:2px solid var(--line);background:var(--surface);color:#fff;font-weight:700;cursor:pointer}
.punrow.done .punchk{background:var(--good);border-color:var(--good)}.punrow.done b{color:var(--muted);text-decoration:line-through}
.okline{color:var(--good);font-weight:600}
/* ---------- Stock and saved replies ---------- */
.stkrow{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.stkrow .form{width:100%}.stkrow.low{border-color:var(--warn);background:var(--warn-soft)}
.stkqty{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.stkqty .btn.small{min-width:38px;font-size:18px;padding:4px 10px}.stkn{min-width:84px;text-align:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rplpick{align-self:flex-start;margin:2px 0 4px;font-size:13px;padding:5px 8px;max-width:100%}
.rpllist{list-style:none;margin:8px 0 12px;padding:0}.rpllist li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}.rpllist li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
/* ---------- Team: shout-outs, leaderboard, games ---------- */
.funwrap{margin:22px 0 8px}.funhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}.funhead h2{margin:0;font-size:20px}
.safety{background:var(--good-soft);color:var(--good);border-radius:999px;padding:5px 12px;font-size:13.5px}.safety b{font-size:16px}
.fungrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.funcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;min-width:0}
.funcardh{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.funcard h3{margin:0;font-size:16px}.funcard h4{margin:6px 0 2px;font-size:14px}.funcard p{margin:2px 0}
.shoutlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.shoutlist li{display:flex;gap:10px;align-items:flex-start}.shoutlist li>span:nth-child(2){flex:1;min-width:0}
.shoutemoji{font-size:22px;line-height:1}
.emojis{display:flex;gap:6px;flex-wrap:wrap}.emojis label{cursor:pointer}.emojis input{position:absolute;opacity:0;pointer-events:none}.emojis span{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);font-size:20px}
.emojis input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}.emojis input:focus-visible+span{outline:2px solid var(--accent)}
.lboard{list-style:none;margin:0;padding:0}.lboard li{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line)}.lboard li:first-child{border-top:0}.lbrank{width:26px;text-align:center}.lbn{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.guess{border-top:1px dashed var(--line);padding-top:8px;margin-top:4px}.guessform label{display:flex;flex-direction:column;gap:6px;font-size:14px}.guessrow{display:flex;gap:8px}.guessrow input{width:110px;font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:8px}
.species img{width:100%;max-height:240px;object-fit:cover;border-radius:10px;display:block;background:var(--surface-2)}
.spopts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.spopts .btn{white-space:normal;line-height:1.2;min-height:40px}
.spres{margin-top:8px!important;font-size:14.5px}.spres.good{color:var(--good)}.spres.bad{color:var(--crit)}
.tvfun{display:grid;grid-template-columns:minmax(200px,.6fr) 1fr 1fr;gap:16px;margin-top:16px}.tvsafety{text-align:center}.tvbig{font-size:96px;font-weight:800;line-height:1;margin:10px 0 4px;color:var(--good)}
@media (max-width:900px){.tvfun{grid-template-columns:1fr}}
/* Easter eggs */
.eggcut{animation:eggcut 2.1s ease-in-out}
@keyframes eggcut{0%,100%{clip-path:inset(0);transform:none}35%{clip-path:polygon(0 0,100% 0,100% 49%,0 51%);transform:translateY(-6px)}55%{clip-path:polygon(0 0,100% 0,100% 49%,0 51%);transform:translateY(-6px) rotate(-.4deg)}80%{clip-path:inset(0);transform:none}}
.eggsaw{position:fixed;top:50%;left:-60px;font-size:48px;z-index:200;pointer-events:none;animation:eggsaw 1.5s ease-in-out forwards}
@keyframes eggsaw{0%{left:-60px;transform:translateY(-50%) rotate(0)}100%{left:calc(100% + 60px);transform:translateY(-50%) rotate(-8deg)}}
.egg404{text-align:center;padding:60px 16px;max-width:520px;margin:0 auto}.egg404n{font-size:72px;font-weight:800;color:var(--wood);letter-spacing:-.02em}.egg404 h1{font-size:26px;margin:8px 0}
.eggbye{position:fixed;inset:0;background:rgba(30,26,18,.55);z-index:300;display:grid;place-items:center;padding:16px}
.eggbyecard{background:var(--surface);border-radius:18px;padding:28px 26px;max-width:420px;text-align:center;box-shadow:var(--shadow-lift)}.eggbyeemoji{font-size:56px}.eggbyecard h2{margin:6px 0 8px;font-size:26px}
/* ---------- Conversations (Plaud) ---------- */
.reccard{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;margin-top:10px}
.rechead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.recsum{margin-top:8px;line-height:1.55}
.rectx{margin-top:8px}.rectx summary{cursor:pointer;font-weight:600;color:var(--accent)}.rectx>div{margin-top:6px;max-height:420px;overflow:auto;font-size:13.5px;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:10px 12px}
.recmove{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:10px;align-items:end}@media (max-width:640px){.recmove{grid-template-columns:1fr}}
.recsteps{margin:8px 0 12px;padding-left:20px;line-height:1.6}.recclient summary{cursor:pointer;list-style:revert}
/* ---------- Parts catalog, scanning, hardware ---------- */
.stkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}.stkbar input[type=search]{flex:1 1 260px;min-width:0}
.stkpick{display:flex;align-items:center}.stkpick input{width:18px;height:18px;accent-color:var(--accent)}.stkrow .ordmain{flex:1;min-width:0}.stkname{color:inherit;text-decoration:none}.stkname:hover b{text-decoration:underline}
.stkitem{max-width:640px}.stkbig{font-size:18px;margin:10px 0 14px;padding:12px 14px;border-radius:12px;background:var(--surface-2)}.stkbig b{font-size:32px}.stkbig.low{background:var(--warn-soft)}
.stkuse{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.stkqtybig{display:flex;align-items:center;gap:10px}.stkqtybig .btn{min-width:56px;min-height:52px;font-size:24px}.stkqtybig input{width:110px;font:inherit;font-size:28px;font-weight:700;text-align:center;padding:8px;border:1px solid var(--line);border-radius:10px}
.stkuse>*{min-width:0}.stkuse select{width:100%;min-width:0;max-width:100%}
.stkacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.stkacts .btn{white-space:normal;line-height:1.2}.btn.big{min-height:52px;font-size:16px}
.stkmoves{list-style:none;margin:0;padding:0}.stkmoves li{padding:6px 0;border-top:1px solid var(--line)}
.rqty{width:80px}.reorder .tbl{width:100%}
.scanbox{position:fixed;inset:0;background:#000;z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
.scanbox video{width:100%;max-width:640px;max-height:70vh;object-fit:cover;border-radius:12px}.scanframe{position:absolute;width:min(60vw,260px);aspect-ratio:1;border:3px solid rgba(255,255,255,.85);border-radius:16px;top:50%;left:50%;transform:translate(-50%,-60%);pointer-events:none}
.scanhint{color:#fff;margin:0}
button.shopscan{border:0;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.hwlist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.hwkind{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:10px 12px}.hwkind.set{border-color:var(--good);}
.hwkindh{display:flex;align-items:center;gap:10px}.hwbtns{margin-left:auto;display:flex;gap:12px}
.hwchk{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none}.hwkind.set .hwchk{background:var(--good);border-color:var(--good)}
.hwitems{list-style:none;margin:8px 0 0 32px;padding:0}.hwitems li{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line);flex-wrap:wrap}.hwname{flex:1;min-width:180px}.hwst{font-size:13px;padding:3px 6px}.hwcost{min-width:80px;text-align:right;font-variant-numeric:tabular-nums}
.hwadd{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0 32px}.hwadd select{flex:1 1 220px;min-width:0}.hwadd input[name=name]{flex:1 1 220px;min-width:0;font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:8px}.hwqty{width:70px;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px}
@media (max-width:640px){.hwitems,.hwadd{margin-left:0}}
/* ---------- Payment receipt popup ---------- */
.sheetback.rcpback{z-index:120}
#rcpForm{display:flex;flex-direction:column;gap:12px}
.rcpto{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0;display:flex;flex-direction:column;gap:6px}.rcpto legend{font-weight:600;padding:0 4px}
.rcpfacts{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface-2)}.rcpfacts .tbl{width:100%;margin-top:4px}.rcpfacts td{padding:4px 0}.rcpfacts .strong{font-weight:700}
#rcpForm textarea{min-height:220px}
/* ---------- Notification bell ---------- */
.bellbtn{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.sidehead .bellbtn{margin-left:8px}@media (min-width:901px){ .sidehead .bellbtn{margin-left:auto} }
.bellbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bellbtn:hover{background:var(--surface-2)}.bellbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bellbadge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--crit);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;line-height:1;border:2px solid var(--bg, #F6F3EC)}
.bellbadge[hidden]{display:none}
.bellback{position:fixed;inset:0;z-index:130;background:rgba(30,28,22,.25)}
.bellpanel{position:absolute;top:104px;left:16px;width:400px;max-width:calc(100vw - 32px);max-height:calc(100vh - 100px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.22)}
.bellhead{position:sticky;top:0;background:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line);z-index:1}
.bellhead h2{margin:0;font-size:18px;display:flex;align-items:center;gap:8px}.bellhead>div{display:flex;align-items:center;gap:12px}.bellcount{font-size:12px;font-weight:700;color:#fff;background:var(--crit);border-radius:999px;padding:2px 8px}
.belllist{list-style:none;margin:0;padding:6px}
.bellitem{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-radius:10px;padding:10px;cursor:pointer}
.bellitem:hover,.bellitem:focus-visible{background:var(--surface-2);outline:none}.bellitem.unread{background:var(--accent-soft)}
.bellic{font-size:20px;line-height:1.2;flex:none;width:26px;text-align:center}
.belltxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.belltxt b{font-weight:600;line-height:1.3}.bellitem:not(.unread) .belltxt b{font-weight:500}
.bellbody{font-size:13.5px;color:var(--muted);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bellwhen{font-size:12px;color:var(--muted)}
.belldot{width:9px;height:9px;border-radius:50%;background:var(--crit);flex:none;margin-top:6px}
.bellempty{padding:20px 18px;color:var(--muted)}
@media (max-width:900px){ .bellpanel{top:auto;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:82vh;border-radius:18px 18px 0 0} }
body.bellopen{overflow:hidden}
/* ---------- Check scanner and check photos ---------- */
.sheetback.ckback{z-index:125}
.cksheet{max-width:760px}
.ckcam{position:relative;background:#000;border-radius:12px;overflow:hidden;margin:8px 0}.ckcam video{display:block;width:100%;max-height:60vh;object-fit:contain}
.ckcam svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.ckcam.mirror video,.ckcam.mirror svg{transform:scaleX(-1)}
.scanpoly.live{fill:rgba(63,125,78,.18);stroke:#5BD37A;stroke-width:4}
.cklive{text-align:center;font-weight:600;margin:6px 0 10px}
.ckout{background:var(--surface-2);border-radius:12px;padding:12px;display:grid;place-items:center}.ckout img{max-width:100%;max-height:55vh;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.ckdrop.over,.ckpay.over{outline:2px dashed var(--accent);outline-offset:2px;background:var(--accent-soft)}
.ckpay{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:10px;padding:10px 12px}
.ckpay img{width:150px;max-height:80px;object-fit:contain;border-radius:6px;background:var(--surface-2)}
.payeditrow{display:block!important}.payeditrow .form{margin:6px 0 10px}
.leadwait{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warn-soft);border:1px solid var(--warn);border-radius:12px;padding:10px 14px}.leadwait.late{background:var(--crit-soft,var(--crit-soft));border-color:var(--crit)}
.hmalert.late{border-color:var(--crit)}
.l2{ --info:var(--info); --info-soft:var(--info-soft); }
.l2 .flag.info{background:var(--info-soft);color:var(--info)}
/* Home command center */
.cmdcenter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 20px}
.cmdband{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);min-width:0}
.cmdband h2{font-size:15px;margin:0 0 10px;display:flex;gap:8px;align-items:center}
.cmdband h2 span{background:var(--surface-2);border-radius:999px;padding:1px 8px;font-size:12px;color:var(--muted)}
.cmdband.needs{border-top:4px solid var(--crit)} .cmdband.today{border-top:4px solid var(--info,var(--info))} .cmdband.week{border-top:4px solid var(--good)}
.cmdlist{display:flex;flex-direction:column;gap:6px}
.cmditem{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;background:var(--bg);text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.cmditem:hover{background:var(--accent-soft)}
.cmditem > span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.cmditem b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.cmditem.red{border-left-color:var(--crit)} .cmditem.amber{border-left-color:var(--warn)} .cmditem.green{border-left-color:var(--good)} .cmditem.blue{border-left-color:var(--info,var(--info))}
.cmdicon{width:22px;text-align:center}.cmdgo{color:var(--muted);font-size:20px}
.cmdempty{padding:8px 2px}
@media (max-width:900px){ .cmdcenter{grid-template-columns:1fr} }
/* Jobs view switch */
.viewseg{margin:8px 0}
/* Job page: sticky summary and tabs */
.jobsum{display:none}
.l2 .jobsum{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:10px 0;position:sticky;top:0;z-index:5;box-shadow:var(--shadow)}
.l2 .jobsum > div{display:flex;flex-direction:column;min-width:0}
.l2 .jobsum b{font-size:15px}
.l2 .jsstage{min-width:140px}.l2 .jsbar{height:5px;background:var(--line);border-radius:3px;margin-top:4px;overflow:hidden}.l2 .jsbar i{display:block;height:100%;background:var(--accent)}
.l2 .jsnext{flex:1 1 220px}.l2 .jsnext.late b{color:var(--crit)}
.l2 .subtabs{background:var(--bg)}
/* Phone bottom tab bar */
.l2tabbar{display:none}
@media (max-width:760px){
  .l2 .l2tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -2px 10px rgba(0,0,0,.05)}
  .l2 .l2tabbar a,.l2 .l2tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);text-decoration:none;background:none;border:0;padding:4px 8px;min-width:56px;font-family:inherit}
  .l2 .l2tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .l2 .l2tabbar [aria-current]{color:var(--accent);font-weight:700}
  .l2 .l2tabbar button svg{background:var(--accent);color:#fff;border-radius:999px;padding:3px;stroke:#fff}
  .l2 body{padding-bottom:84px}
  .l2 .jobsum{top:0}.l2 .subtabs{top:auto;position:static}
}
/* Shop mode */
.shopmode{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.shophead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}.shophead h1{font-size:34px;margin:0}
.shopclock{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:18px}
.shopclock.on{border-color:var(--good);background:var(--good-soft)}.shopclock > div{display:flex;flex-direction:column}.shopclock b{font-size:24px}
.shopbig{font-size:20px;padding:16px 26px;border-radius:14px;min-height:60px}.shopbig.stop{background:var(--crit);border-color:var(--crit)}
.shoph{margin:6px 0 0}
.shopjobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.shopjob{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.shopjob > a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink)}.shopjob > a b{font-size:20px}
.shopbtns{display:flex;gap:8px;flex-wrap:wrap}.shopbtns .shopbig{flex:1}
.shopscan{display:flex;gap:16px;align-items:center;background:var(--accent-soft);border-radius:18px;padding:18px}.shopscan > span{font-size:44px}.shopscan > div{display:flex;flex-direction:column;gap:4px}.shopscan b{font-size:20px}
/* Deposits and cash flow */
.deplist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.deprow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.deprow input{width:20px;height:20px;flex:none}
.deprow .jmain{flex:1;min-width:0}
.fcbars{display:flex;gap:6px;align-items:stretch;margin:16px 0 6px;overflow-x:auto;padding-bottom:4px}
.fcbar{flex:1 0 56px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:1px solid transparent;border-radius:10px;padding:6px 2px;cursor:pointer;color:inherit;font:inherit}
.fcbar.on{border-color:var(--line);background:var(--surface)}
.fcamt{font-size:12px}
.fccol{height:140px;width:28px;display:flex;align-items:flex-end}
.fccol i{display:flex;align-items:flex-end;width:100%;background:color-mix(in srgb,var(--accent,#64593C) 35%,transparent);border-radius:5px 5px 0 0;min-height:2px;overflow:hidden}
.fccol em{display:block;width:100%;background:var(--accent,#64593C)}
.fcbar.late .fccol i,.fcbar.late .fccol em{background:var(--crit)}
.fclab{font-size:12px;color:var(--muted);white-space:nowrap}
.fckey{display:inline-block;width:10px;height:10px;border-radius:2px;background:color-mix(in srgb,var(--accent,#64593C) 35%,transparent);vertical-align:middle;margin:0 2px 0 8px}
.fckey.billed{background:var(--accent,#64593C);margin-left:0}
.capblock{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;margin:10px 0;border:1px solid var(--line);border-radius:10px;background:var(--accent-soft)}
.capblock>span{flex:1 1 260px}
.caph{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.caph input{width:72px;padding:4px 6px}
/* Before and after */
.rvpairs{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}
.rvpairs li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.rvthumbs{display:flex;gap:4px}.rvthumbs img{width:72px;height:54px;object-fit:cover;border-radius:6px;background:var(--surface-2)}
.rvpairs .sel{flex:1 1 200px;min-width:0}
.rvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;margin:8px 0}
.rvcell{padding:0;border:3px solid transparent;border-radius:8px;overflow:hidden;background:var(--surface-2);aspect-ratio:1;cursor:pointer}
.rvcell img{width:100%;height:100%;object-fit:cover;display:block}.rvcell.on{border-color:var(--accent)}
.rvextra{display:grid;gap:8px;margin-top:12px;max-width:560px}
/* Machines */
.mctasks{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.mctasks li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--surface-2)}
.mctasks li.late{box-shadow:inset 3px 0 0 var(--crit)}.mctasks li.soon{box-shadow:inset 3px 0 0 var(--warn)}
.mcacts{display:flex;align-items:center;gap:8px;flex:none}
.mcnew{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mcnew input[name=title]{flex:1 1 200px;min-width:0}.mcnew input[name=every]{width:64px}
.mcrow.late b{color:var(--crit)}.mclog ul{margin:6px 0 0;padding-left:18px;font-size:14px}
/* Computer: the bell sits at the top right of the page, beside Refresh */
@media (min-width:901px){
  .bellbtn.deskbell{position:fixed;top:14px;right:18px;margin:0;z-index:120;box-shadow:0 1px 3px rgba(0,0,0,.08)}
  body.has-side:not(.tvmode) main.wrap{padding-right:74px}
}
@media (min-width:901px){ .bellpanel{top:64px;left:auto;right:18px} }

.bellbtn[hidden]{display:none !important}
body.tvmode .bellbtn.deskbell{display:none}
/* Job page: tabs wrap onto a second line on a computer instead of running off the right edge, in labelled groups */
.subtabs .tabgroup{display:none}
@media (min-width:901px){
  .subtabs{flex-wrap:wrap;overflow:visible;row-gap:0;align-items:flex-end}
  .subtabs .tabgroup{display:inline-flex;align-items:center;align-self:center;margin:0 2px 0 14px;padding-left:14px;border-left:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);height:20px}
  .subtabs button{padding:9px 11px}
}
/* Money strip on every job */
.moneystrip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:12px 0 14px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.moneystrip>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.moneystrip b{font-size:17px}
.moneystrip .msbar{display:block;width:120px;height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:3px}
.moneystrip .msbar i{display:block;height:100%;background:var(--good);border-radius:3px}
.moneystrip .msnext{padding-left:22px;border-left:1px solid var(--line)}
.moneystrip .msnext.late b{color:var(--crit)}
.moneystrip .msacts{flex-direction:row;gap:8px;margin-left:auto;align-items:center}
@media (max-width:900px){ .moneystrip{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:12px}.moneystrip b{font-size:15px}.moneystrip .msbar{width:100%}.moneystrip .msnext{padding-left:0;border-left:0}.moneystrip .msacts{margin-left:0;grid-column:1/-1}.moneystrip .msacts .btn{flex:1} }
/* ---------- New layout (switch in Settings): calmer buttons and type ---------- */
/* Two button sizes, all the same height in a row */
.l2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 16px;font-size:14px;line-height:1.2;box-shadow:none}
.l2 .btn.ghost{min-height:38px;padding:8px 14px;font-size:14px;font-weight:500;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.l2 .btn.small,.l2 .btn.ghost.small{min-height:30px;padding:4px 10px;font-size:13px}
.l2 .btn.big{min-height:48px}
/* One filled button per area: the header's photo button is outlined, form Save buttons are outlined */
.l2 .headlinks .camerabtn{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:500}
.l2 .headlinks .camerabtn svg{stroke:var(--accent)}
.l2 .stack form .btn[type=submit]:not(.ghost){background:var(--surface);color:var(--accent);border:1px solid var(--accent);font-weight:600}
/* Money and numbers in the regular font, with numbers that line up */
.l2 .mono,.l2 .num{font-family:var(--body);font-variant-numeric:tabular-nums;letter-spacing:0}
.l2 .eyebrow.mono{letter-spacing:.06em}
/* "More" menu in the job header */
.moremenu{position:relative;display:inline-block}
.moremenu>summary{list-style:none;cursor:pointer}
.moremenu>summary::-webkit-details-marker{display:none}
.moremenu .moreitems{position:absolute;right:0;top:calc(100% + 6px);z-index:40;display:flex;flex-direction:column;gap:4px;min-width:200px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lift)}
.moremenu .moreitems .btn{justify-content:flex-start;border:0;background:none;width:100%}
.moremenu .moreitems .btn:hover{background:var(--surface-2)}
@media (max-width:900px){ .moremenu .moreitems{left:0;right:auto} }
/* Phone: the job's main action pinned above the bottom bar */
.jobactbar{display:none}
@media (max-width:900px){
  .l2 .jobactbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:45;padding:8px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift)}
  .l2 .jobactbar .btn{flex:1;min-height:46px;font-size:15px}
  .l2 .jobmain{padding-bottom:84px}
}
/* Job sections: group buttons, then the group's own tabs as smaller buttons */
.jobnavtabs{display:flex;flex-direction:column;gap:10px;margin:6px 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tabgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.tgbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:600;font-size:14px}
.tgbtn svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tgbtn:hover{background:var(--surface-2)}
.tgbtn[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent-2);color:var(--accent)}
.tgdot{position:absolute;top:7px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--warn)}
.subpills{display:flex;flex-wrap:wrap;gap:6px}
.subpills button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-weight:500;font-size:14px}
.subpills button:hover{background:var(--surface);color:var(--ink)}
.subpills button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.subpills button[aria-selected="true"] .count{background:rgba(255,255,255,.22);color:inherit}
@media (max-width:900px){
  .tabgroups{grid-template-columns:repeat(3,1fr);gap:6px}
  .tgbtn{min-height:42px;padding:6px 8px;font-size:13px;gap:6px}
  .subpills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .subpills::-webkit-scrollbar{display:none}
  .subpills button{flex:0 0 auto}
}
/* Thank-you email */
.clblock.ready{border-color:var(--accent-2);background:var(--accent-soft)}
.clsheet{max-width:760px}
.clphotos{border:0;padding:0;margin:0}.clphotos legend{font-weight:600;margin-bottom:6px}
.rvcell{position:relative}.clnum{position:absolute;top:4px;left:4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.clchecks{display:flex;flex-wrap:wrap;gap:6px 18px}
/* Material prices */
.prfilters{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px}.prfilters .sel{max-width:420px}
.prtbl td{vertical-align:middle}.prspark{display:block}
.prup{color:var(--crit);font-weight:600}.prdown{color:var(--good);font-weight:600}
.prhist{list-style:none;margin:0;padding:0;display:grid;gap:4px}.prhist li{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:4px 0;border-bottom:1px dashed var(--line)}
/* Social posts */
.socols{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:22px;align-items:start;margin-top:12px}
.igcard{position:sticky;top:12px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.ighead{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:13px}.ighead img{width:30px;height:30px;border-radius:50%;object-fit:contain;background:var(--surface-2);padding:3px}
.igimg{position:relative;aspect-ratio:4/5;background:var(--surface-2);display:flex;align-items:center;justify-content:center}.igimg img{width:100%;height:100%;object-fit:cover}
.igcount{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:2px 8px;border-radius:10px}
.igdots{display:flex;justify-content:center;gap:4px;padding:8px}.igdots i{width:6px;height:6px;border-radius:50%;background:#ccc}.igdots i.on{background:var(--accent)}
.igcap{padding:4px 12px 14px;font-size:13px;line-height:1.45}
.socap{width:100%;font:inherit;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
@media (max-width:900px){ .socols{grid-template-columns:1fr}.igcard{position:static} }
/* Profit chart and year in review */
.pfchart{margin:14px 0;display:grid;gap:6px;max-width:820px}
.pfrow{display:grid;grid-template-columns:minmax(120px,200px) 1fr 140px;gap:10px;align-items:center;font-size:13px}
.pfname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pftrack{height:14px;background:var(--surface-2);border-radius:7px;overflow:hidden}.pftrack i{display:block;height:100%;background:var(--good);border-radius:7px}
.pftrack i.low{background:var(--warn)}.pftrack i.neg{background:var(--crit)}
.pfval{font-variant-numeric:tabular-nums;color:var(--muted)}
.yirtitle{font-family:Georgia,serif;font-weight:400;font-size:26px;margin:4px 0 14px}
.yirshout{list-style:none;padding:0;display:grid;gap:6px}
@media print{ .side,.sidehead,.bellbtn,header.top,.rpnav,.btn{display:none !important} body.has-side main.wrap{margin:0;padding:0} }
/* Project story strip */
.phstrip{display:flex;gap:0;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x proximity}
.phstep{position:relative;flex:0 0 150px;display:flex;flex-direction:column;gap:4px;padding:0 10px 0 0;background:none;border:0;text-align:left;scroll-snap-align:start}
.phstep img{width:140px;height:105px;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.phstep::after{content:"";position:absolute;left:140px;right:0;top:52px;height:2px;background:var(--line)}
.phstep:last-child::after{display:none}
.phwhen{font-weight:600;font-size:13px}.phwhat{font-size:12px;color:var(--muted)}
.vtbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;padding:4px !important}
.vtbtn svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
.vtbtn.listening{background:var(--crit-soft);border-color:var(--crit)}.vtbtn.listening svg{stroke:var(--crit)}
/* Shop TV news line */
.tvticker{position:fixed;left:0;right:0;bottom:0;overflow:hidden;background:var(--accent);color:#fff;font-size:26px;padding:12px 0;z-index:5}
.tvtrack{display:flex;width:max-content;animation:tvscroll linear infinite}
.tvtrack span{white-space:nowrap;padding-right:60px}
.tkdot{opacity:.5;padding:0 28px}
@keyframes tvscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .tvtrack{animation:none} }
.tv{padding-bottom:80px}
/* AmEx charges */
.ccdrop{display:flex;align-items:center;justify-content:center;min-height:84px;margin-top:12px;border:2px dashed var(--line);border-radius:14px;background:var(--surface);cursor:pointer;text-align:center;padding:12px}
.ccdrop.over{border-color:var(--accent);background:var(--accent-soft)}.ccdrop.busy{opacity:.6}
.cclist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ccrow{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ccmain{display:flex;flex-direction:column;min-width:0}.ccamt{font-weight:600;font-variant-numeric:tabular-nums;align-self:start}
.ccacts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.ccacts .sel{min-width:0;max-width:280px}
/* Home: warmer hello, quiet weather line, the project photo as a picture */
.hmwarm .hmtop{grid-template-columns:minmax(260px,1.3fr) minmax(0,1.2fr) minmax(200px,.8fr)}
.hmwarm:not(.haspic) .hmtop{grid-template-columns:minmax(260px,1.2fr) minmax(0,1.4fr)}
.hmwarm .hmhello{justify-content:flex-start;gap:6px}
.hmwarm .hmhello h2{font-size:32px}
.hmdate{margin:0;font-size:15px;color:var(--muted)}
.hmwxline{margin:0;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 0}
.hmwxline .hmsep{padding:0 8px;opacity:.6}
.hmnote{margin:8px 0 4px;font-size:16px;line-height:1.5;color:var(--ink);max-width:46ch}
.hmpic{order:4;position:relative;display:block;border-radius:12px;overflow:hidden;min-height:180px;background:var(--surface-2);text-decoration:none}
.hmpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hmpic span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:12.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
@media (max-width:1100px){ .hmwarm .hmtop{grid-template-columns:1fr 1fr} .hmwarm .hmpic{grid-column:1/-1;min-height:200px} }
@media (max-width:640px){ .hmwarm .hmtop{grid-template-columns:1fr} .hmwarm .hmhello h2{font-size:26px} }
/* Tasks: the add bar at the top */
.taskadd{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tarow{display:flex;gap:8px;align-items:center}
.tarow input{flex:1 1 0;width:auto;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.tarow .btn{min-height:42px;padding-inline:18px}.tarow .vtbtn{width:42px;min-height:42px}
.taopts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.taopts label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.taopts select,.taopts input{font:inherit;font-size:14px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.tamore{flex-basis:100%}.tamore>summary{cursor:pointer;font-size:13px;color:var(--accent);width:max-content}
.tamore[open]>summary{margin-bottom:8px}.tanotes{flex-basis:100%}.tanotes textarea{flex:1;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px}
.tamore:not([open]){flex-basis:auto}
/* ---------- TV screens (tv.js), sized for a 1920×1080 TV ---------- */
body.tvmode main.wrap{padding:16px 20px 0}
.tvx{border:0;box-shadow:none;border-radius:0;background:var(--bg);padding:0 0 70px;gap:14px;min-height:calc(100vh - 16px)}
.tvx h2{font-size:17px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:10px;border:0;padding:0}
.tvx h2 span{font-size:15px;background:var(--surface-2);color:var(--ink);border-radius:999px;padding:1px 10px;letter-spacing:0}
.tvxhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.tvxhead h1{font-family:var(--display);font-size:46px;line-height:1;margin:0;display:inline}
.tvxdate{font-size:22px;color:var(--muted);margin-left:16px}
.tvxheadr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tvxtime{font-size:40px;font-weight:600;font-variant-numeric:tabular-nums;margin-left:8px}
.tvxpill{font-size:18px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 14px}
.tvxpill b{font-size:20px}.tvxpill.good b{color:var(--good)}
.tvhome{font-size:14px;color:var(--muted);text-decoration:none;margin-left:6px}
.tvxclocks{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tvxlbl{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tvxclk{font-size:18px;background:var(--good-soft);border-radius:8px;padding:6px 12px}
.tvxclk b{color:var(--good)}.tvxclk em{font-style:normal;color:var(--muted);margin-left:6px}
.tvx{height:calc(100vh - 16px);overflow:hidden}
.tvxmain{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;flex:1;min-height:0}
.tvxleft{display:flex;flex-direction:column;gap:16px;min-height:0}
.tvxleft .tvxcols{flex:1;min-height:0;overflow:hidden;align-items:start}
.tvxside{min-height:0;overflow:hidden}
.tvxcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tvxcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.tvxjob{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent-2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.tvxjob.soon{border-left-color:var(--warn)}.tvxjob.late{border-left-color:var(--crit)}
.tvxjtop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tvxclient{font-family:var(--display);font-size:27px;font-weight:700;line-height:1.05;overflow:hidden;text-overflow:ellipsis}
.tvxnum{font-size:15px;color:var(--muted);flex:none}
.tvxroom{font-size:17px;color:var(--muted);line-height:1.2}
.tvxinst{display:flex;align-items:baseline;gap:8px;font-size:17px}
.tvxinst span{color:var(--muted)}.tvxinst em{font-style:normal;margin-left:auto;font-weight:600}
.tvxjob.soon .tvxinst em{color:var(--warn)}.tvxjob.late .tvxinst em{color:var(--crit)}
.tvxline{font-size:16px;color:var(--ink)}
.tvxbar{height:9px;border-radius:9px;background:var(--surface-2);overflow:hidden;margin-top:3px}
.tvxbar i{display:block;height:100%;background:var(--good);border-radius:9px}
.tvxbarlbl{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.tvxwarn{font-size:15px;color:var(--crit);font-weight:600}
.tvxwho{display:flex;gap:6px;flex-wrap:wrap}.tvxwho span{font-size:14px;color:var(--good);background:var(--good-soft);border-radius:6px;padding:2px 8px}
.tvxempty{font-size:16px;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:14px;text-align:center}
.tvxside{display:flex;flex-direction:column;gap:18px}
.tvxsite{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px}
.tvxcount{flex:none;width:62px;text-align:center;line-height:1}
.tvxcount b{display:block;font-size:30px;font-variant-numeric:tabular-nums}.tvxcount span{font-size:13px;color:var(--muted)}
.tvxsite.soon .tvxcount b{color:var(--warn)}
.tvxsclient{font-size:20px;font-weight:600;line-height:1.15}
.tvxmeta{font-size:15px;color:var(--muted)}
.tvxup{font-size:16px;padding:6px 0;border-bottom:1px solid var(--line);display:flex;gap:6px;flex-wrap:wrap}
.tvxup em{font-style:normal;margin-left:auto;color:var(--muted)}.tvxup.due em{color:var(--crit);font-weight:600}
.tvxlead{display:flex;flex-direction:column;gap:6px}.tvxlead span{font-size:18px;display:flex;gap:10px;align-items:center}
.tvxlead i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:14px}.tvxlead b{margin-left:auto}
.tvxweek{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tvxday{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;min-height:90px}
.tvxday.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tvxdh{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.tvxdh b{color:var(--ink);font-size:18px}
.tvxchip{font-size:14px;display:flex;gap:6px;align-items:baseline;border-radius:6px;padding:3px 8px;background:var(--surface-2);overflow:hidden;white-space:nowrap}
.tvxchip span{color:var(--muted);flex:none}.tvxchip b{overflow:hidden;text-overflow:ellipsis}
.tvxchip.g-shop{background:var(--accent-soft)}.tvxchip.g-site{background:var(--info-soft)}
.tvxnone{font-size:14px;color:var(--muted)}
/* office */
.tvxkpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tvxkpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;min-width:0}
.tvxkpis.money .tvxkpi{padding:18px 20px}
.tvxkpi .l{font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tvxkpi .v{font-size:40px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:4px}
.tvxkpis.money .v{font-size:52px}
.tvxkpis.ops .v{font-size:34px}
.tvxkpi .v .sm{font-size:22px;font-weight:500}
.tvxkpi .s{font-size:15px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvxkpi.warn .v{color:var(--warn)}
.tvxchg.up{color:var(--good)}.tvxchg.down{color:var(--crit)}
.tvxoffice{padding-bottom:16px}
.tvxogrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:14px;flex:1;min-height:0}
.tvxogrid .tvxpanel{overflow:hidden}
.tvxogrid .tvxchartwrap{display:flex;flex-direction:column}
.tvxogrid .tvxalerts{grid-column:3;grid-row:1/3}
.tvxco{color:var(--muted)}
.tvxogrid.nomoney{grid-template-columns:repeat(3,minmax(0,1fr))}
.tvxpanel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-width:0}
.tvxchart{width:100%;flex:1;min-height:0;display:block}
.tvxchart .g{stroke:var(--line);stroke-width:1}.tvxchart .ax{font-size:15px;fill:var(--muted)}.tvxchart .ax.cur{fill:var(--ink);font-weight:600}
.tvxchart .bs,.tvxlegend .bs{fill:var(--accent);background:var(--accent)}.tvxchart .bc,.tvxlegend .bc{fill:var(--good);background:var(--good)}
.tvxlegend{display:flex;gap:18px;font-size:15px;color:var(--muted);margin-top:4px}.tvxlegend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tvxstages{display:flex;flex-direction:column;gap:4px}
.tvxst{display:grid;grid-template-columns:150px minmax(0,1fr) 34px 64px;gap:10px;align-items:center;font-size:16px}
.tvxst .b{height:14px;background:var(--surface-2);border-radius:14px;overflow:hidden}.tvxst .b i{display:block;height:100%;background:var(--accent-2);border-radius:14px}
.tvxst b{text-align:right;font-variant-numeric:tabular-nums}.tvxst em{font-style:normal;color:var(--muted);text-align:right;font-size:15px}
.tvxalert{display:flex;flex-direction:column;border-left:4px solid var(--warn);padding:4px 0 4px 10px;margin-bottom:8px}
.tvxalert.crit{border-left-color:var(--crit)}.tvxalert b{font-size:18px}.tvxalert span{font-size:15px;color:var(--muted)}
.tvxrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:7px 0;border-bottom:1px solid var(--line)}
.tvxrow b{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tvxrow span{grid-column:1;font-size:15px;color:var(--muted)}
.tvxrow em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:600;font-size:17px}
.tvxrow.warn em{color:var(--warn)}.tvxrow.crit em{color:var(--crit)}
.tvxmore{font-size:14px;color:var(--muted)}
@media (max-width:1300px){.tvx{height:auto;overflow:visible}.tvxogrid .tvxchartwrap,.tvxogrid .tvxalerts{grid-row:auto;grid-column:auto}.tvxmain{grid-template-columns:1fr}.tvxcols{grid-template-columns:repeat(2,minmax(0,1fr))}.tvxkpis{grid-template-columns:repeat(3,minmax(0,1fr))}.tvxogrid,.tvxogrid.nomoney{grid-template-columns:1fr}}
@media (max-width:700px){.tvxcols,.tvxweek{grid-template-columns:1fr}.tvxkpis{grid-template-columns:1fr 1fr}.tvxhead{flex-direction:column;align-items:flex-start}}

.trow.tflash{animation:tflash 2.4s ease-out}
@keyframes tflash{0%,30%{background:var(--warn-soft);box-shadow:0 0 0 2px var(--warn)}100%{background:transparent;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.trow.tflash{animation:none;box-shadow:0 0 0 2px var(--warn)}}