/* Tuck GC client portal */
:root{
  --ink:#1c2329; --muted:#5b666f; --line:#dde1e4; --bg:#f3f4f5; --card:#ffffff;
  --accent:#cc0000; --accent-dark:#a30000; --ok:#1d6b3a; --info:#1f4f7a; --warn:#8a5a00;
  --radius:4px; --shadow:0 1px 2px rgba(20,28,34,.06),0 4px 14px rgba(20,28,34,.05);
}
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:70px }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif }
.wrap{ width:100%; max-width:960px; margin:0 auto; padding:0 18px }
a{ color:var(--accent-dark) }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:3px solid #2a6fb8; outline-offset:2px }
h1,h2,h3{ line-height:1.2; margin:0 0 .5em }
h1{ font:700 30px/1.15 Georgia,"Times New Roman",serif }
h2{ font-size:21px }
h3{ font-size:17px; margin-top:1.6em }
p{ margin:0 0 1em }
code{ font:14px/1.4 ui-monospace,Menlo,Consolas,monospace; background:#eef0f1; padding:2px 6px; border-radius:3px; word-break:break-all }

.top{ background:var(--card); border-bottom:3px solid var(--accent); position:sticky; top:0; z-index:5 }
.signin .top{ position:static }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:58px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px }
.brand{ text-decoration:none; color:var(--ink); display:flex; align-items:center }
.brand img{ height:38px; width:auto; display:block }
.cardlogo{ display:block; width:min(260px,82%); height:auto; margin:4px 0 20px }
.signin .top .brand img{ visibility:hidden }   /* on the sign-in pages the logo sits on the card instead */
.wordmark{ font:700 20px/1 Georgia,"Times New Roman",serif; letter-spacing:.01em }
.topnav{ display:flex; align-items:center; gap:4px 16px; flex-wrap:wrap; font-size:15px }
.topnav a{ color:var(--ink); text-decoration:none; padding:6px 0 }
.topnav a:hover{ text-decoration:underline }
.topnav form{ margin:0 }
.linkbtn{ background:none; border:0; padding:6px 0; font:inherit; color:var(--accent-dark); cursor:pointer; text-decoration:underline }

main.wrap{ padding-top:22px; padding-bottom:40px }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 22px 10px; margin:0 0 18px }
.card.narrow{ max-width:460px; margin:6vh auto 18px }
.cardhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px }
.lead{ color:var(--muted) }
.muted,.help,.hint,.note{ color:var(--muted); font-size:15px }
.note{ border-top:1px solid var(--line); padding-top:12px; margin-top:14px }
.crumb{ font-size:15px; color:var(--muted) }

.hero{ padding:10px 2px 14px }
.hero .for{ margin:0 0 4px; color:var(--muted); font-size:15px }
.hero h1{ font-size:34px; margin:0 0 4px }
.hero .addr{ margin:0; color:var(--muted) }
.tabs{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; margin:0 -2px 6px; scrollbar-width:none }
.tabs::-webkit-scrollbar{ display:none }
.tabs a{ flex:none; padding:9px 14px; min-height:44px; display:flex; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); text-decoration:none; font-weight:600; font-size:15px }
.tabs a:hover{ border-color:var(--accent) }
.prose p:last-child,.prose ul:last-child{ margin-bottom:14px }
.prose ul{ margin:0 0 1em; padding-left:1.2em }

.frame{ position:relative; height:min(70vh,620px); min-height:380px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#cfdde9 }
.frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.actions{ margin-top:14px }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-bottom:6px }
.gitem{ margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fafafa }
.gitem > a{ display:block }
.gitem figcaption{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 10px; font-size:15px }
.dl{ font-size:14px; white-space:nowrap }
.getall{ margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.video figcaption{ display:flex; justify-content:space-between; gap:10px }
.mat .dl{ margin-top:4px }
.actions .dl{ margin-left:10px }
.docs li .dl{ margin-left:auto }
.gallery img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover }

.gallery.small{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px }
.gallery.small img{ aspect-ratio:4/3 }
.video{ margin:0 0 16px }
.video video{ display:block; width:100%; max-height:70vh; background:#000; border-radius:var(--radius) }
.video figcaption{ font-size:15px; color:var(--muted); padding-top:6px }
.docs,.plist,.log,.plain,.checks{ list-style:none; margin:0 0 14px; padding:0 }
.docs li,.plist li{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--line) }
.docs li:first-child,.plist li:first-child{ border-top:0 }
.docs a,.plist a{ font-weight:600 }
.docs span,.plist span{ color:var(--muted); font-size:15px }
.log li{ padding:7px 0; border-top:1px solid var(--line); font-size:15px }
.log li:first-child{ border-top:0 }
.log span{ color:var(--muted); display:inline-block; min-width:11.5em }
.plain li,.checks li{ padding:5px 0 }
.checks li.ok::before{ content:"OK  "; color:var(--ok); font-weight:700 }
.checks li.bad::before{ content:"Fix  "; color:var(--accent); font-weight:700 }

.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid #b9c0c5; border-radius:var(--radius); background:var(--card); color:var(--ink); font-family:inherit; font-size:16px; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer }
.btn[disabled]{ opacity:.45; cursor:default; pointer-events:none }
.btn:hover{ border-color:var(--ink) }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff }
.btn.primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark) }
.btn.small{ min-height:34px; padding:4px 10px; font-size:14px; font-weight:500 }
.stack{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; max-width:560px }
.stack label{ font-weight:600; font-size:15px; margin-top:8px }
.stack label.check{ font-weight:400; display:flex; gap:8px; align-items:center }
.stack .help{ margin:0 }
.stack .btn{ align-self:flex-start; margin-top:12px }
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=url],input[type=date],input[type=time],input[type=number],input[type=datetime-local],textarea,select{ width:100%; min-height:44px; padding:9px 11px; border:1px solid #aeb6bc; border-radius:var(--radius); background:#fff; color:var(--ink); font:inherit }
textarea{ resize:vertical; line-height:1.45 }
input[type=file]{ font:inherit; padding:6px 0 }
form.inline{ display:inline-flex; gap:6px; align-items:center; margin:0 4px 4px 0 }
form.rename input[type=text]{ min-height:34px; padding:4px 8px; min-width:11em }
form.rename select{ min-height:34px; padding:4px 8px; width:auto; font-size:14px }
form.rename{ flex-wrap:wrap }

.finder{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 14px }
.finder input[type=text]{ flex:1 1 260px; width:auto }
.finder select{ flex:0 1 auto; width:auto }
.vh{ position:absolute !important; width:1px !important; height:1px !important; min-width:0 !important; min-height:0 !important; padding:0 !important; margin:-1px !important; border:0 !important; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.progress{ margin:8px 0 0; font-size:15px; color:var(--info); min-height:1.4em }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; margin:0 0 16px }
.tcard{ border:1px solid var(--line); border-radius:var(--radius); background:#fafbfb; padding:8px; display:flex; flex-direction:column; gap:8px }
.tcard.off{ opacity:.6 }
.tcard img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px; background:#e8eaec }
.tform{ display:flex; flex-direction:column; gap:6px; margin:0 }
.tform input[type=text],.tform select,.tform textarea{ min-height:34px; padding:4px 8px; font-size:14px }
.tform strong{ font-size:15px }
.tform .muted{ font-size:13px }
.tbtns{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; font-size:13px }
.tbtns form.inline{ margin:0 }
.libpick{ border-top:1px solid var(--line); padding-top:12px; margin:0 0 18px }
.liblist{ list-style:none; margin:0 0 12px; padding:0 }
.liblist li{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:7px 0; border-top:1px solid var(--line) }
.liblist li:first-child{ border-top:0 }
.liblist label{ display:flex; gap:10px; align-items:center; flex:1 1 230px; font-weight:600; font-size:15px; cursor:pointer }
.liblist img{ width:64px; height:48px; object-fit:cover; border-radius:3px; background:#e8eaec }
.liblist input[type=text]{ flex:2 1 260px; width:auto; min-height:38px }
.materials{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-bottom:6px }
.mat{ margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fafafa }
.mat img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover }
.mat figcaption{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:3px }
.mat .use{ font-size:15px }
.mat .desc{ font-size:14px; color:var(--muted) }
.card h3{ border-top:1px solid var(--line); padding-top:14px }
.card h2 + h3{ border-top:0; padding-top:0; margin-top:.6em }
.tablewrap{ overflow-x:auto; margin:0 0 14px }
table{ border-collapse:collapse; width:100%; font-size:15px }
th,td{ text-align:left; padding:9px 10px 9px 0; border-top:1px solid var(--line); vertical-align:top }
thead th{ border-top:0; color:var(--muted); font-weight:600; white-space:nowrap }
td.acts{ white-space:nowrap }
.pill{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:13px; font-weight:600; background:#e8eaec }
.pill-live{ background:#e2f1e7; color:var(--ok) }
.pill-draft{ background:#fdf0d5; color:var(--warn) }

.flash{ padding:11px 14px; border-radius:var(--radius); border:1px solid var(--line); background:var(--card); margin:0 0 16px }
.flash-error{ border-color:#e3a4a4; background:#fdf1f1; color:#7c1111 }
.flash-ok{ border-color:#a8d3b6; background:#eff8f2; color:#134f2a }
.flash-info{ border-color:#aac6df; background:#eef5fb; color:#16405f }
.flashes{ margin:10px 0 14px } .flashes .flash{ margin:0 0 8px } .flashes .flash:last-child{ margin-bottom:0 }   /* a result moved to where the page lands */
.flashrow td{ padding:4px 0 10px; border-top:0 } .leadrow .flashes{ margin:10px 0 0 } .scriptseen{ margin-top:4px } .scriptseen.warn{ color:#7c1111 }
.card.key{ border-color:#aac6df; background:#f4f9fd; box-shadow:none; margin:6px 0 20px }
.creds{ margin:0 0 12px }
.creds dt{ font-weight:600; font-size:15px; margin-top:10px }
.creds dd{ margin:2px 0 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.mail{ max-width:640px; margin:0 0 12px; padding:14px 16px 4px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); font-size:15.5px }
.mail p,.mail ol{ margin:0 0 .85em }
.mail ol{ padding-left:1.4em }
.mailsubj{ font-weight:600 }
h2.sub{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line) }
.card.danger{ border-color:#e6c3c3 }
.signin .card.narrow h1{ font-size:26px }

.foot{ border-top:3px solid #5f6a70; background:var(--card); padding:20px 0 26px; font-size:15px; color:var(--muted) }
.foot p{ margin:0 0 3px }
.foot strong{ color:var(--ink) }

@media (max-width:600px){
  body{ font-size:16px }
  .hero h1{ font-size:27px }
  h1{ font-size:25px }
  .card{ padding:18px 16px 6px }
  .frame{ height:62vh; min-height:340px }
  .gallery{ grid-template-columns:1fr }
  .gallery.small{ grid-template-columns:1fr 1fr }
  .log span{ display:block; min-width:0 }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
@media print{ .top,.tabs,.foot,.frame,.actions{ display:none } body{ background:#fff } .card{ box-shadow:none } }

/* ---- project log ---- */
.plog{ list-style:none; margin:0 0 10px; padding:0 }
.plog li{ padding:12px 0 12px 14px; border-top:1px solid var(--line); border-left:3px solid var(--accent) }
.plog li:first-child{ border-top:0 }
.plog .when{ font-weight:600; font-size:15.5px }
.plog .what{ margin:3px 0 0 }
.plog .rec{ margin-top:4px; font-size:14px; color:var(--muted) }
.plog.staff li.internal{ border-left-color:#8a939a; background:#f6f7f8 }
.plog .lacts{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; margin-top:8px }
.pill.pc{ background:#e7f3ea; color:#1e5a2c } .pill.pi{ background:#e9ecee; color:#40484e }
details.more{ margin:0 0 10px } details.more summary{ cursor:pointer; padding:8px 0; font-weight:600 }
details.earlier{ margin:10px 0 2px } details.earlier summary{ cursor:pointer; color:var(--accent-dark); text-decoration:underline; padding:6px 0 }
.when2{ display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:center; max-width:360px; margin-top:8px }
.when2 label{ margin:0 }
details.fix summary{ list-style:none; display:inline-flex } details.fix summary::-webkit-details-marker{ display:none }
details.fix[open]{ flex-basis:100% } details.fix form{ margin-top:8px }
.logtable{ width:100%; border-collapse:collapse; margin:14px 0 }
.logtable th{ text-align:left; font-size:14px; color:var(--muted); padding:6px 10px 6px 0; border-bottom:2px solid var(--line) }
.logtable td{ padding:10px 10px 10px 0; border-top:1px solid var(--line); vertical-align:top }
.logtable td.when{ white-space:nowrap; font-weight:600 }
.logtable .rec{ margin-top:4px; font-size:13.5px; color:var(--muted) }
html:has(body.admin){ scroll-behavior:auto }   /* staff pages jump straight to the spot, with no sliding */
.tcard:target,tr:target{ outline:2px solid #aac6df; outline-offset:2px }
@media print{
  .top,.foot,.noprint,.flash{ display:none !important }
  body{ background:#fff } .card{ border:0; box-shadow:none; padding:0 } .wrap{ max-width:none; padding:0 }
  .logtable td.when{ white-space:normal; width:22% }
}

.pill.start{ background:var(--accent); color:#fff; margin-left:8px }
.mail ul{ margin:0 0 .85em; padding-left:1.3em }

.pill.st-ok{ background:#e2f1e7; color:#1e5a2c } .pill.st-wait{ background:#fdf0d5; color:#7a5300 } .pill.st-late{ background:#fbe1e1; color:#8f1414 } .pill.st-idle{ background:#e9ecee; color:#40484e }
.pill[class*="st-"]{ white-space:normal; border-radius:6px; font-weight:600 }
#logins td:nth-child(3){ min-width:200px }

.statusbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:0 0 16px; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--line) }
.statusbar p{ margin:0 } .statusbar .sbacts{ display:flex; flex-wrap:wrap; gap:8px }
.statusbar.sb-live{ background:#e9f5ed; border-color:#b9dcc4 } .statusbar.sb-draft{ background:#fdf3de; border-color:#ecd49a } .statusbar.sb-archived{ background:#eef0f1 }

/* ---- the Overview editor and formatted Overview text ---- */
.richwrap[hidden],#plainwrap[hidden]{ display:none }
.richbar{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px }
.rich{ min-height:170px; max-height:60vh; overflow:auto; padding:12px 14px; background:#fff; border:1px solid #9aa4ab; border-radius:var(--radius) }
.rich:focus{ outline:3px solid #aac6df; outline-offset:1px }
.rich > :first-child{ margin-top:0 }
.prose h3{ font-size:1.12rem; margin:1.1em 0 .4em } .prose h4{ font-size:1rem; margin:1em 0 .35em }
.prose ol{ margin:0 0 1em; padding-left:1.4em } .prose li{ margin:.2em 0 }
.prose li > ul,.prose li > ol{ margin:.2em 0 .3em }
.prose p:last-child,.prose ol:last-child{ margin-bottom:14px }

/* the VDOT package: each file under its label, with its exact file name beneath */
.pkname{ display:inline-flex; flex-direction:column; gap:2px; min-width:0 }
.pkname .fname{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--muted); overflow-wrap:break-word }

.donebar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:16px; padding-top:14px; border-top:1px solid #c9dbea }
.donebar .help{ margin:0; flex:1 1 260px }

/* the VDOT package email, folded under the package on the staff page */
.vdotmail{ margin:4px 0 14px }
.vdotmail > summary{ list-style:none; display:inline-flex; cursor:pointer }
.vdotmail > summary::-webkit-details-marker{ display:none }
.vdotmail-in{ margin-top:12px; padding:14px 16px; border:1px solid #aac6df; border-radius:var(--radius); background:#f4f9fd }
.vdotmail-in .actions form{ display:inline }

/* the draft script in Settings */
pre.code{ max-height:320px; overflow:auto; padding:12px 14px; background:#f6f7f8; border:1px solid var(--line); border-radius:var(--radius); font:12.5px/1.45 ui-monospace,Menlo,Consolas,monospace; white-space:pre }
ol.steps{ padding-left:1.3em } ol.steps li{ margin:.35em 0 }

/* ---- Quick note, the screen the app opens to ---- */
.quick #qnote{ min-height:150px; font-size:17px }
.quick .qbtns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.quick .qbtns .btn{ flex:1 1 180px; min-height:48px; font-size:16px }
.installbox{ margin-top:16px; padding:14px 16px; border:1px solid #aac6df; border-radius:var(--radius); background:#f4f9fd }
.installbox[hidden]{ display:none }
.installbox p{ margin:0 0 10px }

/* ---- the pipeline ---- */
.pacts{ display:flex; flex-wrap:wrap; gap:8px }
.chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; margin:6px 0 4px; -webkit-overflow-scrolling:touch }
@media (min-width: 760px){ .chips{ flex-wrap:wrap; overflow-x:visible } }   /* a wide screen shows every stage; a phone scrolls the row */
.chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); text-decoration:none; font-size:15px; white-space:nowrap }
.chip span{ color:var(--muted); font-size:13px }
.chip.on{ background:var(--ink); border-color:var(--ink); color:#fff } .chip.on span{ color:#d6dadd }
.stagehead{ font-size:17px; margin:22px 0 6px; padding-bottom:6px; border-bottom:2px solid var(--line) }
.stagehead span{ color:var(--muted); font-weight:400; font-size:15px }
ul.leads{ list-style:none; margin:0 0 6px; padding:0 }
.leadrow{ padding:12px 0; border-top:1px solid var(--line) }
.leadrow:first-child{ border-top:0 }
.lhead{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px }
.lname{ font-weight:700; font-size:17px }
.ltype{ color:var(--muted); font-size:15px }
.lmeta{ color:var(--muted); font-size:14px; margin-top:3px }
.lmeta .due{ color:var(--accent-dark); font-weight:700 }
.lacts{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px }
.stageform{ display:inline-flex; gap:6px; align-items:center; margin-left:auto }
.stageform select{ max-width:190px; padding:6px 8px; font-size:15px }
.duebox{ margin:6px 0 10px; padding:10px 14px 4px; border:1px solid #ecd49a; background:#fdf6e6; border-radius:var(--radius) }
.duebox h2{ font-size:17px; margin:2px 0 4px }
.leadform .two,.leadform .three,.pipeform{ display:grid; gap:0 12px }
.leadform .two{ grid-template-columns:1fr 1fr } .leadform .three{ grid-template-columns:2fr 1fr 1fr }
.pipebox{ margin:14px 0 18px; padding:14px 16px 6px; border:1px solid var(--line); border-radius:var(--radius); background:#fafbfb }
.pipeform{ grid-template-columns:repeat(4,minmax(0,1fr)) auto; align-items:end }
.pipeform label{ margin-top:0 }
.pipeform .pbsave{ padding-bottom:2px }
.contact{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line) }
.cname{ margin:0 0 8px } .cbtns{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px }
.lfacts{ display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:0 0 10px; font-size:15px }
.lfacts dt{ color:var(--muted) } .lfacts dd{ margin:0; overflow-wrap:anywhere }
.ldetails h3{ font-size:15px; margin:6px 0 4px } .ldetails p{ margin:0 0 10px; white-space:normal }
.leadedit{ margin:6px 0 8px } .leadedit summary{ cursor:pointer; color:var(--accent-dark); font-weight:600; padding:6px 0 }
.imptable td,.imptable th{ font-size:14px; vertical-align:top }
.folderline{ margin:4px 0 10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.folderline .help{ font-size:14px }
.folderinfo{ margin:4px 0 10px; font-size:15px }
.pipebox .flash form{ margin-top:6px } .pipebox .flash p{ margin:0 }
.bookform [hidden]{ display:none !important }
.appts{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line) }
.appts h3{ font-size:16px; margin:0 0 6px }
.apptlist{ list-style:none; margin:0 0 6px; padding:0 }
.apptlist li{ padding:8px 0; border-bottom:1px solid var(--line) }
.apptlist li:last-child{ border-bottom:0 }
.apptlist li.past{ opacity:.65 }
.apptlist .help{ font-size:14px; margin:2px 0 0 }
.aacts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.aacts form{ display:inline }
.bookbox{ margin:8px 0 10px }
.bookbox > summary{ list-style:none; display:inline-flex; cursor:pointer }
.bookbox > summary::-webkit-details-marker{ display:none }
.bookform{ margin-top:10px; padding:12px 14px; border:1px solid #aac6df; border-radius:var(--radius); background:#f4f9fd }
.bookform .two,.bookform .three{ display:grid; gap:0 12px }
.bookform .two{ grid-template-columns:1fr 1fr } .bookform .three{ grid-template-columns:1.3fr 1fr 1fr }
.comingbox{ border-color:#aac6df; background:#f4f9fd }
.comelist{ list-style:none; margin:0 0 8px; padding:0 }
.comelist li{ padding:4px 0; font-size:15px }
textarea.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px }
#lineup-table td{ font-size:14px; vertical-align:top }
#lineup-table td.now{ min-width:170px }
@media (max-width:720px){
  .bookform .two,.bookform .three{ grid-template-columns:1fr }
  .pipeform{ grid-template-columns:1fr 1fr }
  .pipeform .pbsave{ grid-column:1 / -1 } .pipeform .pbsave .btn{ width:100% }
  .leadform .two,.leadform .three{ grid-template-columns:1fr }
  .stageform{ margin-left:0; width:100% } .stageform select{ flex:1; max-width:none }
}

/* ---- payments: the schedule on the staff page, the Pay list on the client's page, the PayPal card in Settings ---- */
.pill.pp-sandbox{ background:#fdf0d5; color:#7a5300 } .pill.pp-live{ background:#e2f1e7; color:#1e5a2c } a.pill{ text-decoration:none; color:var(--accent-dark) }
.payrows{ list-style:none; margin:0 0 10px; padding:0 }
.payrows li{ padding:12px 0 6px; border-top:1px solid var(--line) } .payrows li:first-child{ border-top:0; padding-top:4px }
.payhead{ display:grid; grid-template-columns:minmax(150px,1.1fr) auto 2fr; gap:4px 18px; align-items:baseline; margin-bottom:8px }
.payname small{ display:block; font-size:14px } .payamt{ white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600; text-align:right } .paywhere{ font-size:15px }
.payacts form.inline,.payacts details.fix{ display:inline-block; vertical-align:top; margin:0 6px 6px 0 }
.payacts details.fix[open]{ display:block } .payacts details.fix form{ margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); max-width:560px }
.payedit .two,.paypaid .three,.payppd .two,.payadd .two{ display:grid; gap:0 12px } .payedit .two,.payadd .two{ grid-template-columns:1fr 1fr } .paypaid .three{ grid-template-columns:1fr 1fr 1.4fr } .payppd .two{ grid-template-columns:1fr 1.6fr }
.paypaid .help,.payppd .help{ margin:8px 0 0; font-size:14px }
.paytotals{ color:var(--muted); font-size:15px; border-top:2px solid var(--line); padding-top:10px } .paytotals strong{ color:var(--ink) }
.payadd{ margin-top:14px }
.paylist{ list-style:none; margin:0 0 10px; padding:0; display:grid; grid-template-columns:1fr max-content max-content max-content; gap:0 18px }
.paylist li{ display:grid; grid-column:1 / -1; grid-template-columns:subgrid; gap:6px 18px; align-items:center; padding:12px 0; border-top:1px solid var(--line) }
.paylist li:first-child{ border-top:0 }
.paylist .payname{ font-weight:600 } .paylist .payamt{ font-weight:400; text-align:right; font-variant-numeric:tabular-nums } .paylist .paystate{ color:var(--muted); font-size:15px; text-align:right } .paylist .paystate.paid{ color:var(--ok); font-weight:600 }
.paylist li .btn{ min-width:88px; text-align:center }
.paylist li:not(:has(.btn)) .paystate{ grid-column:3 / 5 }
.card.due{ border-color:#aac6df; background:#f4f9fd; box-shadow:none } .card.due .help{ margin:6px 0 10px }
.ppmode{ padding:10px 14px; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg) }
.ppenv{ border:1px solid var(--line); border-radius:var(--radius); padding:6px 14px 4px; margin:0 0 12px } .ppenv legend{ font-weight:600; font-size:15px; padding:0 6px }
.help.warn{ color:#7c1111 }
@media (max-width:720px){
  .payhead{ grid-template-columns:1fr auto } .paywhere{ grid-column:1 / -1 }
  .payedit .two,.paypaid .three,.payppd .two,.payadd .two{ grid-template-columns:1fr }
  .payacts form.inline button,.payacts details.fix summary{ white-space:normal }
  .paylist{ grid-template-columns:1fr max-content } .paylist li{ grid-template-columns:1fr max-content }
  .paylist .paystate,.paylist li:not(:has(.btn)) .paystate{ grid-column:1 / -1; text-align:left }
  .paylist li .btn{ grid-column:1 / -1; justify-self:stretch }
}

/* ---- e-signatures (1.38): the documents list, the editor and signing page ---- */
.esdocs{ list-style:none; margin:0 0 10px; padding:0 }
.esdocs li{ padding:12px 0 6px; border-top:1px solid var(--line) } .esdocs li:first-child{ border-top:0; padding-top:4px }
.eshead{ display:flex; justify-content:space-between; gap:8px 18px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px }
.esname small{ display:block; font-size:14px }
.esacts form.inline,.esacts .btn,.esacts small{ display:inline-block; vertical-align:top; margin:0 6px 6px 0 }
.esadd[open]{ display:block } .esadd form{ margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg) }
.pill.es-draft{ background:#e8eaec } .pill.es-sent,.pill.es-viewed{ background:#dde9f5; color:var(--info) } .pill.es-signed_client{ background:#fdf0d5; color:var(--warn) } .pill.es-completed{ background:#e2f1e7; color:var(--ok) } .pill.es-void{ background:#f3dede; color:#7c1111 }
.holidays li{ font-size:15px; padding:2px 0 }
.eslog{ margin:0 0 12px; padding-left:20px } .eslog li{ font-size:15px; padding:3px 0 } .eslog .when{ color:var(--muted); margin-right:6px }
.eshead-card .cardhead{ align-items:flex-start } .estitle{ font-size:24px; margin-bottom:4px } .esback .btn{ margin:0 6px 6px 0 }
body.esign main.wrap{ max-width:1100px }
.estools{ position:sticky; top:62px; z-index:4; padding:12px 14px 8px }
.esrow{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin-bottom:6px }
.eslabel{ font-size:15px; font-weight:600; display:inline-flex; align-items:center; gap:6px }
.estools .btn.on,.esdialog .btn.on{ background:var(--ink); color:#fff; border-color:var(--ink) }
.estools .help{ margin:0 0 6px }
.es-msg{ margin:0 0 8px } .essign{ border-top:1px solid var(--line); padding-top:8px }
.esadopted{ display:inline-flex; gap:8px; align-items:center } .esmini{ border:1px solid var(--line); border-radius:3px; background:#fff }
.esstatus{ font-size:15px }
.esstep{ font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-dark); margin-right:2px }   /* 1.43.1: the client's step counter */
.essign .btn.primary{ min-height:44px; padding:8px 18px; font-size:16px; order:-1 }   /* the one red button is the biggest thing in the row, right after the step */
.essign .esstep{ order:-2 }
.eslayouts[open]{ flex-basis:100% } #es-layouts{ margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); max-width:560px }
.espages{ display:flex; flex-direction:column; gap:18px; margin-bottom:30px }
.espage{ position:relative; width:100%; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); touch-action:pan-y }
.escanvas{ display:block; width:100%; height:100% }
.esoverlay{ position:absolute; inset:0 }
.espagenum{ margin:-12px 0 0; padding:0 2px; font-size:12px; line-height:1.2; color:var(--muted); text-align:right; pointer-events:none }   /* 1.40.1: under the page, in the gap, so it never covers a box */
.esbox{ position:absolute; box-sizing:border-box; border:1.5px dashed #2a6fb8; background:rgba(42,111,184,.14); cursor:move; touch-action:none; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:11px; line-height:1.1; color:#1f4f7a; user-select:none }
.esbox.signer-t{ border-color:#b8860b; background:rgba(216,166,0,.18); color:#6a4e00 }
.esbox.signer-c2{ border-color:#2e8b57; background:rgba(46,139,87,.14); color:#1e5a3a }
.esbox.optional{ border-style:dotted }
.esbox.selected{ outline:3px solid var(--accent); outline-offset:1px; z-index:2 }
.esbox.filled{ background:transparent; border-color:rgba(20,32,96,.35); border-style:solid; cursor:default }
.esbox.filled canvas{ max-width:100%; max-height:100% }
.esbox .estag{ pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 3px }
.esbox .esval{ font:11px/1 Helvetica,Arial,sans-serif; color:#142060; white-space:nowrap; padding:0 2px; align-self:flex-end; margin-bottom:2px } .esbox .escheck{ font-size:14px; align-self:center; margin-bottom:0 }
.eshandle{ position:absolute; right:-6px; bottom:-6px; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid #2a6fb8; cursor:nwse-resize; touch-action:none }
.esbox.signer-t .eshandle{ border-color:#b8860b } .esbox.filled .eshandle{ display:none }
.esactions{ position:absolute; z-index:3; display:flex; gap:4px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:3px }
.esdialog{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; width:min(680px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto }
.esdialog::backdrop{ background:rgba(20,28,34,.45) } .esdialog h3{ margin-top:14px } .esdialog .flash{ margin-top:10px }
.espadsec{ margin-bottom:8px }
.espad{ display:block; width:100%; max-width:600px; background:#fff; border:1px solid #b9c0c5; border-radius:var(--radius); touch-action:none; cursor:crosshair }
.estype{ font:italic 26px Georgia,"Times New Roman",serif; color:#142060; padding:8px 10px; border:1px solid #b9c0c5; border-radius:var(--radius); width:100%; max-width:600px }
@media (max-width:640px){
  .estools{ position:static } .estitle{ font-size:20px } .esdialog{ padding:12px }
  .essign{ position:fixed; left:0; right:0; bottom:0; z-index:6; background:rgba(255,255,255,.97); border-top:1px solid var(--line); padding:8px 12px; margin:0; box-shadow:0 -2px 10px rgba(20,28,34,.08) }
  body.esign main.wrap{ padding-bottom:100px } .esadopted .esmini{ height:30px; width:auto }
}
.esundo{ margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); max-width:560px } .esundo form{ margin-top:6px }
/* 1.39: the stage prompt after a completed contract, the client's signing page */
.esprompt{ display:block } .esprompt p{ margin:0 0 .5rem } .esprompt form.esrow{ display:inline-flex; gap:.4rem; align-items:center; margin-right:.5rem } .esprompt select{ max-width:16rem }
.esignclient .eshead-card .help{ margin:.4rem 0 0 }
#es-send-dlg label{ display:block; margin:.6rem 0 } #es-send-dlg input{ width:100%; box-sizing:border-box }
@media (max-width: 600px){ .esprompt form.esrow{ display:flex; flex-wrap:wrap } }
.esignclient .estools{ padding:0; border:0; box-shadow:none; background:transparent; min-height:0 } .esignclient .estools .es-msg{ margin:0 0 10px }
.esprep{ margin:6px 0 10px } .esprep form{ margin:0 6px 6px 0 }
.pill.signed{ background:#e2f1e7; color:#1e5a2c; margin-left:8px; font-size:12px }
/* 1.40: the "Jump to" bar on long pages. It sticks under the top bar; the script sets --toph to the top bar's height. */
.jump{ position:sticky; top:var(--toph,62px); z-index:4; background:var(--bg); margin:-6px -18px 14px; padding:8px 18px }
.jumplbl{ font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; align-self:center; margin-right:4px; white-space:nowrap }
.jumprow{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.jumprow a{ flex:none; padding:5px 11px; min-height:32px; display:inline-flex; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:999px; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px }
.jumprow a:hover{ border-color:var(--accent) }
.jumprow a[aria-current]{ border-color:var(--accent-dark); color:var(--accent-dark); background:#fff5f5 }
.jumpdd{ display:none; position:relative }
.jumpdd summary{ list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:6px 36px 6px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); font-weight:600; cursor:pointer; position:relative; max-width:100% }
.jumpdd summary::-webkit-details-marker{ display:none }
.jumpdd summary::after{ content:""; position:absolute; right:14px; top:50%; width:8px; height:8px; border:solid var(--ink); border-width:0 2px 2px 0; transform:translateY(-70%) rotate(45deg) }
.jumpdd[open] summary::after{ transform:translateY(-20%) rotate(225deg) }
.jumpdd .jumplbl{ margin:0 }
.jumpcur{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .jumpcur:empty{ display:none }
.jumplist{ position:absolute; left:0; right:0; top:100%; margin-top:6px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(20,28,34,.14); padding:6px 0; max-height:min(60vh,480px); overflow:auto; z-index:6 }
.jumplist a{ display:block; padding:11px 16px; color:var(--ink); text-decoration:none; font-weight:600; font-size:16px }
.jumplist a:hover{ background:#f1f3f4 }
.jumplist a[aria-current]{ color:var(--accent-dark); background:#fff5f5 }
@media (max-width:720px){ .jumprow{ display:none } .jumpdd{ display:block } .jump{ margin-top:-4px; padding:6px 18px } }
@media print{ .jump{ display:none } }
.filejump{ font-size:15px; margin:0 0 8px; color:var(--muted) } .filejump a{ white-space:nowrap }
/* 1.40: typed signatures. Three script fonts (SIL Open Font License, see assets/fonts/LICENSES.txt), also embedded in the finished PDF. */
@font-face{ font-family:"Dancing Script"; src:url(fonts/dancingscript.woff) format("woff"); font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"Alex Brush"; src:url(fonts/alexbrush.woff) format("woff"); font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"Sacramento"; src:url(fonts/sacramento.woff) format("woff"); font-weight:400; font-style:normal; font-display:swap }
.estypegrid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:10px 14px; margin:4px 0 10px } .estypegrid label{ display:block; font-weight:600; font-size:15px } .estypegrid input{ display:block; width:100%; margin-top:4px; font-size:17px; padding:8px 10px; border:1px solid #b9c0c5; border-radius:var(--radius) }
.esstyles{ display:grid; gap:10px; margin:0 0 12px }
.esstyle{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; width:100%; min-height:72px; padding:8px 18px; background:#fff; border:1px solid #b9c0c5; border-radius:var(--radius); color:#142060; cursor:pointer; text-align:left }
.esstyle.on{ border:2px solid var(--accent-dark); padding:7px 17px; background:#fff8f8 }
.esstylename{ font-size:40px; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.esstyleinit{ font-size:30px; line-height:1.1; flex:none; color:#3a4a8a }
.esdrawpane .espadsec h3{ margin:0 } .esdrawpane .esrow{ justify-content:space-between }
@media (max-width:640px){ .estypegrid{ grid-template-columns:minmax(0,2fr) minmax(0,1fr) } .esstylename{ font-size:32px } .esstyleinit{ font-size:24px } .esstyle{ min-height:60px; padding:6px 12px } }

/* ---- 1.41: job numbers ---- */
.jnprice{ margin:0 0 12px; font-size:16px } .jnprice strong{ font-size:19px } .jnprice form.inline{ display:inline-block; margin-left:4px; vertical-align:middle }
.jnwarn{ display:block; color:var(--warn); font-size:15px; font-weight:600 }
.jnform .three,.subadd .three,.subedit .three,.subadd .two,.subedit .two{ display:grid; gap:0 12px } .jnform .three,.subadd .three,.subedit .three{ grid-template-columns:1fr 1fr 1fr } .subadd .two,.subedit .two{ grid-template-columns:1fr 1fr }
.jnform{ margin-bottom:6px } .subadd{ margin-top:10px }
.jnsum{ border-collapse:collapse; margin:0 0 14px; width:100%; max-width:640px } .jnsum th{ text-align:left; font-weight:400; padding:7px 10px 7px 0; border-bottom:1px solid var(--line) } .jnsum td{ padding:7px 0 7px 10px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.jnsum td.muted{ text-align:left; font-size:14px; white-space:normal; padding-left:14px } .jnsum tr.jntotal th,.jnsum tr.jntotal td{ font-weight:700; border-top:2px solid var(--ink); border-bottom:0 } .jnsum tr.jnmuted th,.jnsum tr.jnmuted td{ color:var(--muted); border-bottom:0; font-size:15px }
.jnread{ margin:4px 0 14px } .jnreadrow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center } .jnread details.fix summary{ display:inline-block } .jnread details.fix textarea{ margin-top:8px; font:14px/1.4 ui-monospace,Menlo,Consolas,monospace }
.jnallow{ display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; margin:0 0 14px } .jnallow dt{ color:var(--muted) } .jnallow dd{ margin:0 }
.paylist .payname small{ display:block; font-weight:400; font-size:14px; color:var(--muted) }
.lmoney{ font-weight:600; font-variant-numeric:tabular-nums }
.subrows .payhead{ grid-template-columns:minmax(150px,1.4fr) auto 1.4fr }
@media (max-width:720px){ .jnform .three,.subadd .three,.subedit .three,.subadd .two,.subedit .two{ grid-template-columns:1fr } .jnallow{ grid-template-columns:1fr; gap:2px 0 } .jnallow dd{ margin-bottom:10px } .subrows .payhead{ grid-template-columns:1fr auto } .jnsum td.muted{ display:none } }

/* ---- 1.42: reports ---- */
.rpnav{ margin:0 0 10px } .rpnav .chip{ font-weight:600 }
.rpfilter{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 12px; align-items:end; margin:0 0 6px } .rpfilter .rpgo{ margin-bottom:14px; white-space:nowrap } .rpfilter label{ font-size:14px }
.rptiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:4px 0 12px }
.rptile{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--ink); text-decoration:none; min-height:44px }
.rptile:hover{ border-color:var(--accent) } .rptile .rpn{ font:700 26px/1.1 Georgia,"Times New Roman",serif } .rptile .rpl{ font-size:14px; color:var(--muted) } .rptile .rpv{ font-weight:600; font-variant-numeric:tabular-nums } .rptile .rpv small{ display:block; font-weight:400; font-size:13px; color:var(--muted) }
.rpsum{ margin:4px 0 8px; font-size:16px }
.rptable{ width:100%; border-collapse:collapse; font-size:15px } .rptable th,.rptable td{ text-align:left; padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:top } .rptable th{ font-size:14px; color:var(--muted); border-bottom:2px solid var(--line); white-space:nowrap }
.rptable th a{ color:inherit; text-decoration:none } .rptable th a:hover{ text-decoration:underline } .rptable th[aria-sort] a{ color:var(--ink) }
.rptable .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap } .rptable tfoot th{ color:var(--ink); border-bottom:0; border-top:2px solid var(--ink) }
.rptable td .muted{ font-size:14px }
.rpfilter > div{ min-width:0 } .rpfilter input,.rpfilter select{ width:100%; min-width:0; max-width:100%; box-sizing:border-box }
@media (max-width:720px){ .rptiles{ grid-template-columns:1fr 1fr } .rptile .rpn{ font-size:22px } .rpfilter{ grid-template-columns:1fr 1fr } .rpfilter .rpgo{ grid-column:1 / -1 } .rptable{ font-size:14px } .rptable th,.rptable td{ padding:7px 8px 7px 0 } .rptable th,.rptable th.num{ white-space:normal } .rptable .rpx{ display:none } }

/* ---- 1.43: the job folder's numbers, and the reports' print and copy ---- */
.jnfound{ margin:0 0 16px; padding:12px 14px 4px; border:1px solid #ecd49a; background:#fdf6e6; border-radius:var(--radius) } .jnfound h3{ margin:0 0 6px; font-size:17px } .jnfound .jnpart{ margin:12px 0 2px; font-size:16px; overflow-wrap:anywhere } .jnfound .jnpart .pill{ margin-left:6px; vertical-align:middle; font-size:13px }
.jnticks{ list-style:none; margin:0 0 6px; padding:0 } .jnticks li{ padding:4px 0 } .jnticks li.muted{ padding:0 0 4px 28px; font-size:14px } .jnticks label.check{ margin:0 }
.jnlines{ list-style:none; margin:2px 0 0; padding:0 0 0 28px } .jnticks .jnlines li{ padding:2px 0; font-size:15px } .jnticks .jnlines .muted{ font-size:14px } .jnticks .jnshown{ margin:2px 0 0 28px; font-size:14px }
.jnfound .jnflag{ margin:0 0 8px; padding:6px 10px; border-left:3px solid #c0392b; background:#fff; font-size:15px } .jnfound .jncheck{ margin:0 0 6px }
.jnpick{ list-style:none; margin:0 0 8px; padding:0 } .jnpick li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:8px 0; border-top:1px solid #ecd49a } .jnpick li:first-child{ border-top:0 } .jnpickname{ flex:1 1 260px; min-width:0; overflow-wrap:anywhere } .jnpickfig{ flex:1 1 200px; font-size:15px } .jnpick .btn{ flex:0 0 auto } .jnfound .jnalso{ margin:0 0 6px; font-size:14px; overflow-wrap:anywhere }
.jnfolder{ margin:0 0 14px }
.rpactions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
@media print{ .rpnav,.rpfilter,.rptiles,.rpactions,.pacts,.crumb{ display:none } .rptable th a{ color:inherit } .card{ border:0; padding:0 } }
/* 1.45: the client's appointments, first on their page */
.apptlist{ list-style:none; margin:0 0 10px; padding:0 }
.apptlist li{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 18px; padding:12px 0; border-top:1px solid var(--line) }
.apptlist li:first-child{ border-top:0 }
.apptlist .apptkind{ font-weight:600 } .apptlist .apptwhen{ color:var(--muted); font-variant-numeric:tabular-nums }
/* 1.46: the estimated start under the address on the client's page */
.hero .eststart{ margin:10px 0 0; font-size:17px } .hero .eststart-note{ margin:2px 0 0; color:var(--muted); font-size:14px }
/* 1.47: the estimated completion beside the days to complete (staff), and the working days on the client's page */
.jnfinish .lbl{ font-weight:600; font-size:15px } .jnfinish #jn-finish{ display:flex; align-items:center; min-height:46px }
.hero .eststart .estdays{ color:var(--muted); font-size:15px }