/* JobTools. Tokens and rules: DESIGN.md */
:root{
  --ground:#fff;--sheet:#f1f5f8;--ink:#19384f;--muted:#4f6577;--rule:#d3dee7;
  --signal:#326b98;--signal-hover:#244f73;--good:#2f6b45;--bad:#a8323c;
  --display:"Barlow Semi Condensed","Arial Narrow",sans-serif;--body:"Barlow","Segoe UI",sans-serif;
  --r-sm:3px;--r-md:4px;color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.5 var(--body)}
a{color:var(--signal);text-underline-offset:3px}
a:hover{color:var(--signal-hover)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0 0 12px}
h1{font-size:34px}h2{font-size:24px;margin-top:28px}h3{font-size:19px}
p{margin:0 0 12px}
.muted{color:var(--muted)}.good{color:var(--good)}.bad{color:var(--bad)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
main.wrap{padding-top:28px;padding-bottom:64px}

/* top bar */
.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:baseline;gap:28px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{font:600 22px/1 var(--display);color:var(--ink);text-decoration:none}
.top nav{display:flex;gap:20px;flex:1;flex-wrap:wrap}
.top nav a{color:var(--ink);text-decoration:none}
.top nav a.on,.top nav a:hover{color:var(--signal);text-decoration:underline}
.top form{margin:0}

/* page head */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.head h1{margin:0}

/* buttons and forms */
.btn,button{font:500 15px/1 var(--body);border-radius:var(--r-sm);padding:10px 16px;cursor:pointer;border:1px solid var(--signal);background:var(--signal);color:#fff;text-decoration:none;display:inline-block;transition:background .15s}
.btn:hover,button:hover{background:var(--signal-hover);color:#fff}
.quiet{background:var(--ground);color:var(--signal);border-color:var(--rule)}
.quiet:hover{background:var(--sheet);color:var(--signal-hover)}
.link{background:none;border:0;padding:0;color:var(--signal);text-decoration:underline;font:inherit}
.link:hover{background:none;color:var(--signal-hover)}
.link.bad{color:var(--bad)}
label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500}
input,select,textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:var(--ground);border:1px solid var(--muted);border-radius:var(--r-sm);padding:8px 10px;min-width:0}
input:hover,select:hover,textarea:hover{border-color:var(--ink)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--signal)}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:400}
textarea{min-height:80px;resize:vertical}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;max-width:760px}
.form .wide{grid-column:1/-1}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}

/* tables */
table{width:100%;border-collapse:collapse;margin:6px 0 18px}
th,td{text-align:left;vertical-align:top;padding:9px 10px 9px 0;border-bottom:1px solid var(--rule)}
thead th{font:500 13px/1.3 var(--body);color:var(--muted);border-bottom:1px solid var(--ink)}
tfoot td{border-bottom:0;font-family:var(--display);font-size:18px}
tbody tr:hover{background:#fafcfd}
td a{text-decoration:none}td a:hover{text-decoration:underline}

.flash{border:1px solid var(--rule);background:var(--sheet);padding:10px 14px;border-radius:var(--r-md);margin-bottom:18px}
.box{border:1px solid var(--rule);border-radius:var(--r-md);padding:16px;margin-bottom:18px}
.box.sheet{background:var(--sheet)}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:32px}
@media (max-width:1100px){.split.builder{grid-template-columns:1fr}}
.lines td:first-child{min-width:220px}
.stats{display:flex;gap:40px;flex-wrap:wrap;margin:6px 0 22px}
.stats div{min-width:90px}
.stats b{display:block;font:600 30px/1 var(--display)}
.stats span{font-size:14px;color:var(--muted)}
.events{list-style:none;padding:0;margin:0;font-size:14px}
.events li{padding:7px 0;border-bottom:1px solid var(--rule)}
.events time{display:block;color:var(--muted);font-size:13px}
.copy{display:flex;gap:8px}.copy input{flex:1}
details.inline summary{cursor:pointer;color:var(--signal)}

/* proposal builder */
.option{border-top:1px solid var(--rule);padding-top:16px;margin-top:30px}
.option-head{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.option-head input[name=name]{font:600 20px var(--display);width:220px}
.lines td input{width:100%;padding:5px 6px;font-size:15px}
.lines td input[type=checkbox]{width:18px;padding:0}
.lines .q{width:80px}.lines .u{width:80px}.lines .m{width:110px}
.addline{background:var(--sheet);padding:10px;border-radius:var(--r-md)}
.photos{display:flex;gap:12px;flex-wrap:wrap}
.photos figure{margin:0;width:180px}
.photos img{width:180px;height:130px;object-fit:cover;border-radius:var(--r-md);display:block}
.photos input{width:100%;font-size:13px;margin-top:4px}

/* client page */
.doc{max-width:860px;margin:0 auto;padding:32px 20px 80px}
.doc header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:22px}
.doc header .co{font:600 24px/1.1 var(--display)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:18px 0}
.gallery figure{margin:0}.gallery img{width:100%;border-radius:var(--r-md);display:block}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:4px}
table.compare{table-layout:fixed;min-width:560px}
table.compare th:first-child{width:34%}
table.compare th.opt{font:600 20px/1.1 var(--display);color:var(--ink);vertical-align:bottom;white-space:normal;padding-left:12px}
table.compare td.num{padding-left:12px}
table.compare td.inc{color:var(--ink)}
table.compare .choose td{border-bottom:0;padding-top:14px}
table.compare label.check{font-weight:500}
.sum{max-width:380px;margin-left:auto}
.sum td{padding:6px 0}
.sum tr.total td{font:600 22px var(--display);border-top:1px solid var(--ink);border-bottom:0}
canvas.sig{width:100%;max-width:480px;height:140px;border:1px solid var(--muted);border-radius:var(--r-sm);touch-action:none;background:#fff}
.done{padding:16px;background:var(--sheet);border-radius:var(--r-md)}

/* schedule */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--ink);margin-bottom:24px}
.daycol{min-height:260px;padding:8px 6px;border-right:1px solid var(--rule)}
.daycol:last-child{border-right:0}
.daycol h3{font-size:16px;color:var(--muted)}
.daycol.today h3{color:var(--ink)}
.daycol.over{background:var(--sheet)}
.slot{border:1px solid var(--rule);border-radius:var(--r-sm);padding:6px 8px;margin-bottom:6px;font-size:14px;background:var(--ground);cursor:grab}
.slot b{display:block;font-weight:500}
.slot span{display:block;font-size:13px}
.slot.dragging{opacity:.5}
.unsched{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}

@media (max-width:760px){
  .week{grid-template-columns:1fr}
  .daycol{min-height:0;border-right:0;border-bottom:1px solid var(--rule)}
  .wrap{padding:0 16px}
  .form,.split{grid-template-columns:1fr}
  h1{font-size:28px}
  .lines thead{display:none}
  .lines tr{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 0;border-bottom:1px solid var(--rule)}
  .lines td{border:0;padding:0}
  .lines td:first-child{grid-column:1/-1}
  table.compare{font-size:14px}
}
@media print{.top,.noprint{display:none}}