/* Shared by the sign-in page and the app: faces and the two themes. */
@font-face{font-family:"Switzer";font-weight:300;font-display:swap;src:url(/static/fonts/switzer-300.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-weight:400;font-display:swap;src:url(/static/fonts/switzer-400.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-weight:500;font-display:swap;src:url(/static/fonts/switzer-500.woff2) format("woff2")}
@font-face{font-family:"Archivo NF";font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/static/fonts/archivo-wdth.woff2) format("woff2")}

:root{--blue:#1e47d1;--blue-soft:#8aa4ff;--navy:#2a3544;--gray:#6b7077;--fog:#ebeef2;
 --font:"Switzer","Helvetica Neue",Helvetica,Arial,sans-serif;--display:"Power Grotesk","Archivo NF","Switzer",sans-serif}
:root,[data-theme=light]{--bg:#fff;--ink:#2a3544;--strong:#151b24;--muted:#6b7077;--line:#e3e7ec;--line2:#c3cad3;
 --tile-a:#ebeef2;--tile-b:#f8f9fb;--btn:#2a3544;--btnink:#fff;--accent:#1e47d1;--accent-ink:#fff;--sel:#1e47d1;color-scheme:light}
[data-theme=dark]{--bg:#0d121a;--ink:#dfe3ea;--strong:#fff;--muted:#8d939b;--line:#222b37;--line2:#3a4555;
 --tile-a:#1a2230;--tile-b:#10161f;--btn:#dfe3ea;--btnink:#0d121a;--accent:#8aa4ff;--accent-ink:#0d121a;--sel:#1e47d1;color-scheme:dark}
::selection{background:var(--sel);color:#fff}

/* The CRM: the tracker's layout (fine rules, small tracked labels, outlined controls) in Northfalk colours. */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:300 13px/1.55 var(--font);-webkit-font-smoothing:antialiased;transition:background-color .4s,color .4s}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--line2)}::-webkit-scrollbar-track{background:transparent}
a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--line2)}
a:hover{text-decoration-color:var(--ink)}
input,textarea,select{font:300 13px var(--font);color:var(--strong);background:transparent;border:0;border-bottom:1px solid var(--line2);padding:6px 0;width:100%;border-radius:0;outline:none}
input:focus,textarea:focus,select:focus{border-bottom-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--muted)}
select{background:var(--bg)}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* top bar */
.top{display:flex;align-items:center;gap:3vw;padding:26px 3.2vw 16px;position:sticky;top:0;z-index:7;background:var(--bg);border-bottom:1px solid var(--line);transition:background-color .4s}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 11px/1 var(--display);font-stretch:115%;letter-spacing:.24em;text-transform:uppercase;color:var(--strong)}
.brand img{display:block;height:24px;width:auto}
.brand .logo-light{display:none}
[data-theme=dark] .brand .logo-dark{display:none}
[data-theme=dark] .brand .logo-light{display:block}
.top nav{display:flex;gap:1.5vw;flex-wrap:wrap;row-gap:6px}
.top nav a,.top-right button{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink);opacity:.6;text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.top nav a:hover,.top nav a.active,.top-right button:hover{opacity:1}
.top nav a.active{border-bottom-color:var(--ink)}
.top-right{display:flex;gap:2.2vw;align-items:center;margin-left:auto}
.top-right button.solid{opacity:1;background:var(--blue);color:#fff;padding:7px 12px;border:0}
.top-right button.solid:hover{background:var(--navy)}

main{padding:5vh 6.2vw 80px}

/* headings and labels */
.title{font:300 clamp(28px,3vw,44px)/1.05 var(--display);font-stretch:115%;letter-spacing:-.025em;color:var(--strong);margin-bottom:6px}
.lab,.colhead,.block h3{display:block;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.colhead,.block h3{color:var(--ink);margin-bottom:14px}
.muted{color:var(--muted);font-size:12px}
.headrow{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}

/* stats strip */
.stats{display:inline-grid;grid-auto-flow:column;border:1px solid var(--ink);margin-bottom:34px;max-width:100%;overflow-x:auto}
.stats a{padding:14px 26px 12px;border-right:1px solid var(--line2);min-width:112px;text-decoration:none}
.stats a:last-child{border-right:0}
.stats a:hover{background:var(--tile-a)}
.stats small{display:block;font-size:8px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-bottom:6px;white-space:nowrap}
.stats b{font:300 28px/1 var(--display);font-stretch:115%;color:var(--strong)}
.stats .hi b{color:var(--accent)}

/* buttons */
.btn,.seg button{border:1px solid var(--ink);padding:6px 14px;font-size:12px;font-weight:400;background:transparent;color:var(--ink);white-space:nowrap}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.solid{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.solid:hover{background:var(--navy);border-color:var(--navy)}
.btn.quiet{border-color:var(--line2);color:var(--muted)}
.btn.quiet:hover{background:transparent;color:var(--strong);border-color:var(--strong)}
.btn:disabled{opacity:.45;cursor:default}
.linkbtn{font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:2px}
.seg{display:inline-flex;flex-wrap:wrap}
.seg button{border-right:0;font-size:11px;letter-spacing:.06em;padding:7px 14px}
.seg button:last-child{border-right:1px solid var(--ink)}
.seg button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.seg button.on+button{border-left-color:var(--blue)}

/* board */
.board{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:18px;overflow-x:auto;padding-bottom:8px}
.col{min-width:0}
.col .colhead{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--ink);margin-bottom:12px}
.col .colhead span{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:12px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:14px 16px;background:linear-gradient(180deg,var(--tile-a) 0%,var(--tile-b) 78%);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .2s}
.tile:hover{border-color:var(--accent)}
.tile .k{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tile .t{font-weight:500;font-size:13px;line-height:1.35;color:var(--strong);overflow-wrap:anywhere}
.tile .d{font-size:12px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile .tags{margin-top:auto;font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.tile .due{color:var(--accent)}
.empty{padding:18px 0;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}

/* due list */
.card{margin:0 0 34px}
.card h3{font-size:8px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--ink);margin-bottom:0;color:var(--ink)}
.row2{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:11px 0;text-decoration:none}
.row2:hover .name{text-decoration:underline}
.row2 .meta{color:var(--muted);font-size:11px;overflow-wrap:anywhere;text-align:right}
.row2 .name{color:var(--strong)}

/* table */
.searchrow{display:flex;gap:18px;align-items:end;margin-bottom:22px;flex-wrap:wrap}
.searchrow input{flex:2;min-width:200px}
.searchrow select{flex:1;min-width:150px;width:auto}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;font-size:12px;width:100%}
th{font-size:8px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;text-align:left;padding:8px 14px 8px 0;border-bottom:1px solid var(--ink);white-space:nowrap}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--tile-a)}
td.strong{color:var(--strong);font-weight:400}
.pill{display:inline-block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:3px 7px;border:1px solid var(--line2);white-space:nowrap}
.pill.new{border-color:var(--accent);color:var(--accent)}
.pill.won{background:var(--blue);border-color:var(--blue);color:#fff}
.pill.lost{color:var(--muted)}

/* lead */
.split{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,2.2fr);gap:5vw;align-items:start}
.rail{display:flex;flex-direction:column;gap:22px;position:sticky;top:100px}
.field{display:flex;flex-direction:column;gap:2px}
.field textarea{min-height:120px;resize:vertical;border:1px solid var(--line2);padding:10px 12px;line-height:1.6}
.field textarea:focus{border-color:var(--accent)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.block{margin-bottom:34px}
.goals{display:flex;flex-wrap:wrap;gap:6px}
.goals label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);padding:6px 10px;font-size:12px;cursor:pointer}
.goals input{width:auto;margin:0;accent-color:var(--blue)}
.goals label:has(input:checked){border-color:var(--accent);color:var(--strong)}
.message{font-size:15px;line-height:1.7;max-width:760px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--strong);border-left:1px solid var(--accent);padding:2px 0 2px 16px}
.timeline{border-top:1px solid var(--ink)}
.timeline li{list-style:none;display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.timeline ul{margin:0;padding:0}
.timeline .when{font-size:11px;color:var(--muted)}
.timeline .body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--strong)}
.timeline .status .body{color:var(--muted)}
.notebox{display:flex;gap:10px;align-items:stretch;margin-bottom:18px}
.notebox textarea{flex:1;resize:vertical;border:1px solid var(--line2);padding:10px 12px;min-height:44px}
.notebox textarea:focus{border-color:var(--accent)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.saved{font-size:11px;color:var(--accent);opacity:0;transition:opacity .3s}
.saved.on{opacity:1}

/* activity and settings */
.log li{list-style:none;display:grid;grid-template-columns:150px 120px 1fr;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}
.log ul{margin:0;padding:0;border-top:1px solid var(--ink)}
.log .when,.log .who{color:var(--muted)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:5vw}
.state{display:inline-flex;align-items:center;gap:8px}
.state::before{content:"";width:7px;height:7px;border:1px solid var(--muted)}
.state.on::before{background:var(--accent);border-color:var(--accent)}
pre.codes{margin:12px 0 0;padding:10px 12px;border:1px solid var(--line2);font:400 12px/1.7 ui-monospace,Menlo,monospace;user-select:all;color:var(--strong)}
code{font:400 12px ui-monospace,Menlo,monospace;color:var(--strong)}

/* new-lead dialog */
dialog{border:1px solid var(--ink);background:var(--bg);color:var(--ink);padding:28px;width:min(560px,92vw)}
dialog::backdrop{background:rgba(13,18,26,.45)}
dialog form{display:flex;flex-direction:column;gap:16px}

@media(max-width:1100px){.split,.cols2{grid-template-columns:minmax(0,1fr)}.rail{position:static}}
@media(max-width:760px){
  .top{flex-wrap:wrap;gap:14px}.top nav{gap:16px;order:3;width:100%}
  main{padding:4vh 4vw 60px}
  .board{grid-template-columns:repeat(5,82vw)}
  .stats{display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);width:100%}
  .stats a{padding:12px 14px;min-width:0;border-bottom:1px solid var(--line2)}
  .stats a:nth-child(3n){border-right:0}
  .stats a:nth-last-child(-n+3){border-bottom:0}
  .stats small{white-space:normal;min-height:2.6em}
  .twocol{grid-template-columns:1fr}
  .timeline li,.log li{grid-template-columns:1fr;gap:2px}
}
@media print{.top,.actions,.notebox{display:none!important}}

/* clients, proposals, invoices */
.lead-gap{margin-top:18px}
.note-bar{margin:-6px 0 28px;padding:10px 14px;border-left:2px solid var(--accent);background:var(--tile-a);font-size:12px}
.aibox{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--tile-a),var(--tile-b))}
.aibox .colhead{margin:0}
.aibox textarea,.rep textarea{border:1px solid var(--line2);padding:10px 12px;resize:vertical;line-height:1.6}
.aibox textarea:focus,.rep textarea:focus{border-color:var(--accent)}
.repeat{display:flex;flex-direction:column;gap:14px;margin-bottom:12px}
.rep{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line)}
.rep .linkbtn{align-self:flex-start;color:var(--muted);border-color:var(--line2)}
.block>input{font-size:16px}
.block .field textarea{min-height:0}
.lines{display:flex;flex-direction:column}
.line{display:grid;grid-template-columns:1fr 70px 120px 34px;gap:12px;align-items:end;padding:6px 0}
.line.head{padding-bottom:0}
.line .btn{padding:4px 0;height:30px}
.total{margin-left:auto;font:300 20px/1 var(--display);font-stretch:115%;color:var(--strong)}
dialog.wide{width:min(820px,94vw)}
dialog form.wide{gap:18px}
.row2 .meta .pill{margin-right:4px}
@media(max-width:760px){.line{grid-template-columns:1fr 54px 90px 30px;gap:8px}}

/* revenue: Squarebook's Home layout in the CRM's own type. One blue for the current period, a grey dash for the previous. */
.rev{--c-cur:var(--accent);--c-prev:var(--line2);--s1:#1e47d1;--s2:#4a6fe0;--s3:#8aa4ff;--s4:#b9c8fa;--s5:#dbe3fc}
[data-theme=dark] .rev{--s1:#8aa4ff;--s2:#6a86e8;--s3:#4a6fe0;--s4:#2f4fba;--s5:#22389a}
.rev-top{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(24px,4vw,64px);padding-bottom:36px;border-bottom:1px solid var(--line)}
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:14px}
.rev-select{width:auto;font:300 clamp(22px,2.4vw,32px)/1.1 var(--display);font-stretch:115%;letter-spacing:-.02em;color:var(--strong);padding:2px 22px 6px 0;border-bottom:1px solid var(--line2);cursor:pointer}
.rev-controls .rev-select{font:400 13px var(--font);letter-spacing:0;font-stretch:100%;padding:4px 18px 4px 0}
.rev-legend{display:flex;gap:32px;flex-wrap:wrap}
.rev-legend b,.rev-value{display:block;font:300 clamp(22px,2.2vw,30px)/1.15 var(--display);font-stretch:112%;letter-spacing:-.02em;color:var(--strong);font-variant-numeric:tabular-nums}
.rev-legend b.dim,.rev-value.dim{color:var(--muted)}
.key{display:inline-block;width:12px;height:2px;background:var(--c-cur);margin-right:8px;vertical-align:middle}
.key.prev{background:repeating-linear-gradient(90deg,var(--c-prev) 0 3px,transparent 3px 6px)}
.rev .key.s1{background:var(--s1);height:8px;width:8px}.rev .key.s2{background:var(--s2);height:8px;width:8px}.rev .key.s3{background:var(--s3);height:8px;width:8px}
.rev .key.s4{background:var(--s4);height:8px;width:8px}.rev .key.s5{background:var(--s5);height:8px;width:8px}
.rev-chart{display:block;width:100%;height:auto;overflow:visible}
.rev-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.rev-axis{fill:var(--muted);font:300 10px var(--font);letter-spacing:.04em}
.rev-cur{fill:none;stroke:var(--c-cur);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rev-prev{fill:none;stroke:var(--c-prev);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.rev-fill{fill:var(--c-cur);opacity:.07;stroke:none}
.rev-end{fill:var(--c-cur)}
.rev-side{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,36px)}
.rev-side>div{padding:0 0 26px}.rev-side>div+div{padding-top:26px;border-top:1px solid var(--line)}
.rev-over{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:34px 0 20px}
.title.sm{font-size:clamp(20px,2vw,26px);margin:0}
.rev-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rev-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);margin-bottom:20px}
.rev-card{padding:22px 24px 20px;border-right:1px solid var(--line);min-width:0}
.rev-card:last-child{border-right:0}
.rev-card h3{display:block;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--ink);margin:0 0 14px}
.rev-value{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rev-delta{font:400 12px var(--font);letter-spacing:0;color:var(--accent)}
.rev-card .rev-chart{margin-top:14px}
.rev-bar{display:flex;height:10px;gap:2px;margin-bottom:16px;background:var(--line)}
.rev-bar i{display:block}.rev-bar .s1{background:var(--s1)}.rev-bar .s2{background:var(--s2)}.rev-bar .s3{background:var(--s3)}.rev-bar .s4{background:var(--s4)}.rev-bar .s5{background:var(--s5)}
.rev-break{list-style:none;margin:0;padding:0}
.rev-break li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.rev-break li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-break b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--strong)}
.rev-empty{max-width:46ch;color:var(--muted);font-size:14px;padding:24px 0}
@media (max-width:900px){.rev-top{grid-template-columns:1fr}.rev-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px;flex-direction:row;gap:32px}.rev-side>div+div{border-top:0;padding-top:0}
 .rev-axis{font-size:20px}
 .rev-grid3{grid-template-columns:1fr}.rev-card{border-right:0;border-bottom:1px solid var(--line)}.rev-card:last-child{border-bottom:0}}

.chk{display:flex;gap:8px;align-items:center;margin:12px 0 0;font-size:12px}
.chk input{width:auto}
.navgroup{position:relative}
.navgroup summary{list-style:none;cursor:pointer;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink);opacity:.6;padding-bottom:2px;border-bottom:1px solid transparent}
.navgroup summary::-webkit-details-marker{display:none}
.navgroup summary::after{content:" ▾";font-size:8px}
.navgroup summary:hover,.navgroup[open] summary,.navgroup.active summary{opacity:1}
.navgroup.active summary{border-bottom-color:var(--ink)}
.navgroup>div{position:absolute;top:calc(100% + 12px);left:-14px;z-index:30;display:flex;flex-direction:column;gap:12px;min-width:150px;padding:16px 18px;background:var(--bg);border:1px solid var(--ink)}
@media (max-width:760px){.navgroup>div{position:static;border:0;padding:10px 0 0;flex-direction:row;flex-wrap:wrap;gap:16px}}

.wk{margin:0 0 30px}
.wk-h{font-size:8px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--ink);color:var(--ink)}
.tl{display:grid;grid-template-columns:150px 110px 1fr auto auto;gap:14px;align-items:center;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:11px 0;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.tl:hover,.tl.open{background:var(--tile-a)}
.tl-when{color:var(--muted)}.tl-title{color:var(--strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-img{object-fit:cover;border:1px solid var(--line2)}

.pl-back{position:fixed;inset:0;z-index:60;background:rgba(8,11,17,.42)}
.pl-drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(820px,100vw);background:var(--bg);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-18px 0 48px rgba(0,0,0,.25)}
.pl-head{display:flex;align-items:flex-start;gap:14px;padding:22px 26px 16px;border-bottom:1px solid var(--line)}
.pl-head>div{flex:1;min-width:0}
.pl-title{margin:6px 0 0;font-size:20px;line-height:1.3;font-weight:500;color:var(--strong)}
.pl-body{flex:1;overflow-y:auto;padding:4px 26px 24px}
.pl-body .pv-card{border-bottom:0}
.pl-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 26px;border-top:1px solid var(--line);background:var(--bg)}
.pl-note{flex-basis:100%;margin:0}
.pay-drawer{width:min(520px,100vw)}
.pl-drawer .pv-grid{grid-template-columns:1fr}
.pl-drawer .pv img{max-width:460px}
@media(max-width:760px){.pl-head,.pl-body,.pl-foot{padding-left:16px;padding-right:16px}}
.pv-card{padding:18px 0 26px;border-bottom:1px solid var(--line)}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.pv{border:1px solid var(--line2);padding:16px;background:var(--bg);max-width:100%}
.pv small{display:block;font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pv b{display:block;margin-bottom:10px;color:var(--strong)}
.pv img{display:block;width:100%;height:auto;margin:10px 0}
.pv-p{margin:0 0 10px;line-height:1.55;font-size:13px;color:var(--ink);white-space:pre-wrap}
.pv-noimg{display:grid;place-items:center;height:200px;border:1px dashed var(--line2);color:var(--muted);margin:10px 0}
.pv-page{max-width:760px}.pv-title{font-size:26px;font-weight:300;margin:6px 0 10px;color:var(--strong)}.pv-sum{color:var(--muted);margin:0 0 16px}
.pv-h{margin:20px 0 8px;font-size:15px;color:var(--strong)}.pv-ul{margin:0 0 12px;padding-left:20px;font-size:13px;line-height:1.6}.pv-q{margin:0 0 12px;padding-left:14px;border-left:2px solid var(--blue);color:var(--muted)}
.pv-chatbox{margin-top:22px}.pv-chat p{margin:8px 0;font-size:12px;line-height:1.5}.pv-chat .me{color:var(--muted)}
.pv-edit{margin-top:18px}
.setup{margin:0 0 18px;font-size:12px;color:var(--muted)}.setup summary{cursor:pointer}.setup ul{margin:8px 0 0;padding-left:18px;line-height:1.7}
@media (max-width:760px){.tl{grid-template-columns:1fr auto;grid-auto-flow:row}.tl-when,.tl-title{grid-column:1/-1}}
.pv img{max-width:360px}
.pv-card .actions input[type=datetime-local]{max-width:230px;width:auto}

.rev-menu{position:relative;display:inline-block}
button.rev-select{background:transparent;text-align:left;border:0;border-bottom:1px solid var(--line2)}
button.rev-select::after{content:"";display:inline-block;width:7px;height:7px;margin:0 0 4px 12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.6}
.rev-list{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:150px;margin:0;padding:6px 0;list-style:none;background:var(--bg);border:1px solid var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.rev-list[hidden]{display:none}
.rev-list li{margin:0}
.rev-list button{display:block;width:100%;text-align:left;background:transparent;border:0;padding:8px 16px;font:400 13px/1.2 var(--font);font-stretch:100%;letter-spacing:0;color:var(--ink);cursor:pointer}
.rev-list button:hover,.rev-list button:focus-visible{background:var(--tile-a);outline:none}
.rev-list button.on{color:var(--blue);font-weight:500}

.top-right button.themeswitch{position:relative;width:68px;height:30px;padding:0;border:1px solid var(--line2);border-radius:0;background:transparent;opacity:1;color:var(--ink);cursor:pointer;vertical-align:middle;overflow:hidden;transition:border-color .2s}
.themeswitch:hover{border-color:var(--ink)}
.themeswitch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.themeswitch svg{position:absolute;top:6px;width:16px;height:16px}
.themeswitch .sun{left:9px}.themeswitch .moon{right:9px}
.themeswitch .knob{position:absolute;top:0;left:0;width:50%;height:100%;border-radius:0;background:var(--ink);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.themeswitch[aria-checked=true] .knob{transform:translateX(100%)}
.themeswitch .sun,.themeswitch .moon{z-index:1;transition:color .2s}
.themeswitch[aria-checked=false] .sun,.themeswitch[aria-checked=true] .moon{color:var(--bg)}
@media (prefers-reduced-motion:reduce){.themeswitch .knob{transition:none}}
.actions select{width:auto;min-width:130px}

/* sticky bottom bar and the assistant drawer */
main{padding-bottom:92px}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:18px;min-height:56px;padding:8px clamp(16px,3vw,48px);background:var(--bg);border-top:1px solid var(--line2)}
.dock-info{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;flex:1;min-width:0;font-size:12px;color:var(--muted)}
.dock-chip b{color:var(--strong);font-weight:500}
.dock-chip.hot b{color:var(--accent)}
.dock-toast{color:var(--strong)}.dock-toast.bad{color:#c0392b}
.dock-acts{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.dock-acts .btn{padding:7px 14px;font-size:12px}
.dock-chat{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:7px 14px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.dock-chat:hover,.dock-chat[aria-expanded=true]{background:var(--ink);color:var(--bg)}
.dock-report{text-decoration:none}
.dock-report:hover{text-decoration:none}
.dock-ico{width:14px;height:14px}
.assistant{position:fixed;right:0;bottom:56px;top:72px;width:min(420px,100vw);z-index:55;display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--line2);border-top:1px solid var(--line2);box-shadow:-8px 0 28px rgba(0,0,0,.14)}
.assistant[hidden]{display:none}
.as-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.as-note{padding:10px 18px 0;margin:0}
.as-log{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.as-msg p{margin:0;font-size:13px;line-height:1.55;white-space:pre-wrap}
.as-msg.me p{color:var(--muted)}
.as-msg.me{align-self:flex-end;max-width:85%;text-align:right}
.as-acts{display:flex;flex-direction:column;gap:6px;margin-top:8px;align-items:flex-start}
.as-acts .btn{text-align:left;white-space:normal}
.as-in{display:flex;gap:10px;padding:12px 18px;border-top:1px solid var(--line);align-items:flex-end}
.as-in textarea{flex:1;min-height:0;border:1px solid var(--line2);padding:8px 10px;resize:none}
.as-talk{align-self:stretch;width:44px;border:1px solid var(--line2);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.as-talk:hover{border-color:var(--ink)}
.as-talk.on{background:#1E47D1;border-color:#1E47D1;color:#fff}
.as-talk .wave path{transform-box:fill-box;transform-origin:center}
.as-talk.on .wave path{animation:nf-wave .9s ease-in-out infinite}
.as-talk.on .wave .b2{animation-delay:.12s}.as-talk.on .wave .b3{animation-delay:.24s}.as-talk.on .wave .b4{animation-delay:.36s}.as-talk.on .wave .b5{animation-delay:.48s}
.as-pic{display:block;width:100%;max-width:340px;height:auto;margin:10px 0;border:1px solid var(--line)}
@keyframes nf-wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.15)}}
@media (prefers-reduced-motion:reduce){.as-talk.on .wave path{animation:none}}
@media (max-width:760px){
  .dock{flex-wrap:wrap;gap:8px 12px;padding:8px 14px}
  .dock-info{flex:1 1 100%;order:1;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
  .dock-acts{order:2;flex:1;overflow-x:auto}
  .dock-chat{order:3}
  .dock-report{order:3}
  main{padding-bottom:120px}
  .assistant{top:0;bottom:104px;width:100vw;border-left:0}
}

/* invoice builder */
.ib{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:5vw;align-items:start;padding-bottom:90px}
.ib-form .ib-card{margin-bottom:26px}
.ib-body{display:flex;flex-direction:column;gap:16px;padding-top:16px}
.ib-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ib-side{position:sticky;top:100px;order:-1}
.ib-doc{border:1px solid var(--line2);padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.ib-title{font-size:26px;font-weight:300;margin:0}
.ib-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.ib-facts small{display:block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ib-facts b{font-weight:400;overflow-wrap:anywhere}
.ib-desc{white-space:pre-wrap;margin:0}
.ib-total{font-weight:500;color:var(--strong)}
.ib-items .line{grid-template-columns:1fr 64px 100px 30px}
@media(max-width:1100px){.ib{grid-template-columns:1fr}.ib-side{position:static;order:0}}
@media(max-width:760px){.ib-two{grid-template-columns:1fr}.ib-doc{padding:18px}}
.ib-items .line .linkbtn{font-size:20px;line-height:1;text-decoration:none}
.field[hidden]{display:none}
.as-prop{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.reminder{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}.rem-body{white-space:pre-wrap;font-size:12px;color:var(--muted)}

/* confirmation windows (dialogs.js) */
.nf-dialog{width:min(440px,92vw);padding:28px}
.nf-dialog .nf-msg{margin:0 0 22px;font-size:14px;line-height:1.55;color:var(--strong);white-space:pre-wrap;overflow-wrap:anywhere}
.nf-dialog input{margin:-8px 0 22px}
.nf-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.btn.danger{background:#b3261e;border-color:#b3261e;color:#fff}
.btn.danger:hover{background:#8f1d17;border-color:#8f1d17;color:#fff}

.svc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.svc-chip{display:inline-flex;border:1px solid var(--line2)}
.svc-chip button{border:0;background:transparent;color:var(--strong);font:inherit;font-size:12px;padding:5px 9px;cursor:pointer}
.svc-chip .svc-add:hover{background:var(--blue);color:#fff}
.svc-chip .svc-x{color:var(--muted);border-left:1px solid var(--line2);padding:5px 7px}
.svc-chip .svc-x:hover{color:#b3261e}

.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:16px}
.ph-tile{background:var(--tile-a,#e9ecf1);display:grid;place-items:center;overflow:hidden}
.ph-tile.portrait{aspect-ratio:2/3}.ph-tile.landscape{aspect-ratio:3/2}
.ph-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ph-item .muted{margin:6px 0;font-size:12px}

/* ---- light motion: screens, windows and panels ease in, buttons respond; all under a quarter of a second, off for reduced motion ---- */
@media (prefers-reduced-motion:no-preference){
  @keyframes nf-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes nf-fade{from{opacity:0}to{opacity:1}}
  @keyframes nf-pop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes nf-slide-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
  @keyframes nf-dock-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  /* a screen eases in whenever it is shown */
  #view>*{animation:nf-rise .26s cubic-bezier(.2,.7,.2,1) both}
  /* the first few tiles, cards and rows follow one after another */
  .stats>*,.board>*,.cols2>div>.card,.tablewrap{animation:nf-rise .3s cubic-bezier(.2,.7,.2,1) both}
  .stats>*:nth-child(2),.board>*:nth-child(2),.cols2>div>.card:nth-child(2){animation-delay:.04s}
  .stats>*:nth-child(3),.board>*:nth-child(3),.cols2>div>.card:nth-child(3){animation-delay:.08s}
  .stats>*:nth-child(4),.board>*:nth-child(4),.cols2>div>.card:nth-child(4){animation-delay:.12s}
  .stats>*:nth-child(5),.board>*:nth-child(5){animation-delay:.16s}
  /* windows, panels and the bottom bar */
  dialog[open]{animation:nf-pop .18s cubic-bezier(.2,.7,.2,1) both}
  dialog[open]::backdrop{animation:nf-fade .18s ease-out both}
  .assistant:not([hidden]){animation:nf-slide-in .22s cubic-bezier(.2,.7,.2,1) both}
  .dock{animation:nf-dock-in .3s cubic-bezier(.2,.7,.2,1) both}
  .dock-toast{animation:nf-fade .2s ease-out both}
  /* buttons answer the pointer */
  .btn,.dock-chat,.seg button,.linkbtn{transition:transform .12s ease,background-color .2s,border-color .2s,color .2s}
  .btn:hover,.dock-chat:hover{transform:translateY(-1px)}
  .btn:active,.dock-chat:active,.seg button:active{transform:translateY(0) scale(.98)}
  .btn:disabled:hover{transform:none}
  .row2,.tile{transition:background-color .15s,border-color .2s}
}

/* verse of the day */
.verse-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 12px;padding:9px 3.2vw;background:var(--tile-a,#eef0f4);border-bottom:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.verse-bar[hidden]{display:none}
.verse-text{font-style:italic;color:var(--ink)}
.verse-ref{font-weight:500;font-style:normal;letter-spacing:.14em;text-transform:uppercase;font-size:10px;color:var(--muted)}
@media(max-width:760px){.verse-bar{font-size:11px;padding:8px 14px}}
@media (prefers-reduced-motion:no-preference){.verse-bar:not([hidden]){animation:nf-fade .4s ease-out both}}

/* settings tabs */
.tabs{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 30px;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--strong)}
.tabs button.on{color:var(--strong);border-bottom-color:var(--accent)}
.settings-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:0 5vw;align-items:start}
.settings-panel[hidden]{display:none}
@media(max-width:760px){.tabs{gap:2px 16px;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}}

.nf-dialog.nf-image{width:min(900px,94vw);padding:18px}
.nf-image img{display:block;max-width:100%;max-height:72vh;margin:0 auto 12px;object-fit:contain}
.nf-image .nf-msg{margin:0 0 14px;font-size:12px;color:var(--muted)}
.ph-tile img{cursor:zoom-in}
.ph-own{border:1px solid var(--accent)}
.card .note-bar{margin:14px 0 18px}

/* Website screen */
.wb-h{font-size:8px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin:30px 0 14px;color:var(--ink)}
.wb-diff{font-size:14px;line-height:1.6;margin:10px 0}
.wb-diff del{color:var(--muted);text-decoration:line-through}
.wb-diff ins{text-decoration:none;background:var(--tile-a);border-bottom:1px solid var(--accent);padding:0 3px}
.wb-photo{display:block;max-width:360px;width:100%;margin:10px 0;cursor:zoom-in}
.wb-ask{display:grid;gap:12px;max-width:760px}
.wb-ask select,.wb-ask textarea{width:100%}

/* Website screen: the page on a pan-and-zoom canvas, its controls in the bottom bar, the rest in a side drawer */
body.wb-lock{overflow:hidden}
.wb-canvas{position:fixed;left:0;right:0;z-index:5;overflow:hidden;overscroll-behavior:none;touch-action:none;background:var(--tile-a);outline:none}
.wb-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;background:#fff;box-shadow:0 12px 48px rgba(0,0,0,.4)}
.wb-stage.glide{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.wb-frame{display:block;border:0;max-width:none;background:#fff}
.wb-loading{padding:60px;text-align:center;color:#666}
.wb-drawer{position:fixed;right:0;z-index:40;width:min(420px,92vw);display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--line2);box-shadow:-14px 0 45px rgba(0,0,0,.3)}
.wb-drawer[hidden]{display:none}
.wb-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line2)}
.wb-drawer-head b{font-size:8px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.wb-x{background:transparent;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.wb-drawer-body{flex:1;overflow-y:auto;padding:16px 20px}
.wb-drawer-body textarea{width:100%}
.wb-edit{display:inline-flex;align-items:center;padding:5px 9px}
.wb-edit svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wb-cur{font-size:11px;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.wb-drawer .wb-back+b{flex:1;min-width:0;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-back{white-space:nowrap;background:transparent;border:0;color:var(--accent);font:inherit;font-size:11px;letter-spacing:.08em;cursor:pointer;padding:0}
.wb-pic{border-bottom:1px solid var(--line);padding:8px 0}
.wb-pic summary{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;cursor:pointer;list-style:none}
.wb-pic summary::-webkit-details-marker{display:none}
.wb-pic summary img{width:72px;height:50px;object-fit:cover}
.wb-pic summary span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.wb-pic summary small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-pic-body{padding:12px 0 4px}
.wb-list{display:flex;flex-direction:column}
.wb-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:11px 4px;font:inherit;font-size:14px;cursor:pointer}
.wb-item small{font-size:11px;color:var(--muted)}
.wb-item:hover:not(:disabled){color:var(--accent)}
.wb-item.on{color:var(--accent)}
.wb-item:disabled{opacity:.5;cursor:default}
.wb-saved{border-left:3px solid var(--accent);padding:6px 10px;background:var(--tile-a);font-size:12px}
.wb-score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.wb-big{display:flex;align-items:baseline;gap:6px}
.wb-big b{font-size:44px;font-weight:500;line-height:1}
.wb-big.ok b{color:#2e9e5b}.wb-big.warn b{color:#c98a12}.wb-big.bad b{color:#d1453b}
.wb-snip{border:1px solid var(--line2);padding:10px 12px;margin-bottom:14px;background:var(--tile-a)}
.wb-snip b{display:block;font-weight:500;font-size:15px;color:#6b8cff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-snip small{display:block;font-size:11px;color:#2e9e5b;margin:2px 0}
.wb-snip p{margin:0;font-size:12px;color:var(--muted)}
.wb-field{display:grid;gap:5px;margin-bottom:12px;font-size:12px}
.wb-field>span{display:flex;justify-content:space-between;gap:10px}
.wb-field input,.wb-field textarea{width:100%}
.wb-count{font-variant-numeric:tabular-nums;color:var(--muted)}
.wb-count.bad{color:#d1453b}
.wb-check{display:grid;grid-template-columns:20px 1fr;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.wb-check i{font-style:normal;font-weight:600;text-align:center}
.wb-check.ok i{color:#2e9e5b}.wb-check.warn i{color:#c98a12}.wb-check.bad i{color:#d1453b}
.wb-check b{font-weight:500;font-size:13px}
.wb-check p{margin:2px 0 0;font-size:12px}
.wb-pills{display:flex;gap:6px;align-items:center}
.wb-pill{flex:none;background:transparent;color:var(--ink);border:1px solid var(--line2);padding:5px 11px;font-size:11px;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s}
.wb-pill:hover{border-color:var(--ink)}
.wb-publish{padding:6px 14px;font-size:11px;white-space:nowrap}
.wb-pill.on{background:var(--blue);border-color:var(--blue);color:#fff}
.wb-pill.hot{border-color:var(--accent);color:var(--accent)}
.wb-pill.hot.on{color:#fff}
.dock-info:has(.wb-pills){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.wb-seg{display:inline-flex;border:1px solid var(--line2);flex:none}
.wb-seg button{background:transparent;color:var(--ink);border:0;padding:6px 11px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.wb-seg button.on{background:var(--ink);color:var(--bg)}
.wb-icons button{padding:6px 9px;display:inline-flex;align-items:center}
.wb-icons svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wb-zoom{display:inline-flex;align-items:center;flex:none}
.wb-zoom-text{min-width:58px;font-variant-numeric:tabular-nums}
.wb-zoom-open{display:none;align-items:center;gap:8px}
.wb-zoom-open input{width:150px}
.wb-zoom-pct{font-size:11px;font-weight:500;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.wb-zoom.open .wb-zoom-text{display:none}
.wb-zoom.open .wb-zoom-open{display:inline-flex}
.dock-acts .linkbtn{white-space:nowrap}

/* Designer: the post image on a sheet in the canvas viewport */
.dz-sheet{position:absolute;box-shadow:0 12px 48px rgba(0,0,0,.4);background:#fff}
.dz-sheet img{display:block}
.dz-hots{position:absolute;inset:0;pointer-events:none}
.dz-hot{position:absolute;pointer-events:auto;background:transparent;border:2px solid transparent;border-radius:4px;cursor:text;padding:0;transition:border-color .12s,background-color .12s}
.dz-hot:hover,.dz-hot:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);outline:none}
.dz-swatches{display:flex;gap:7px;align-items:center;flex:none}
.dz-swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);cursor:pointer;padding:0}
.dz-swatch.on{outline:2px solid var(--accent);outline-offset:2px}
.dz-status{white-space:nowrap;font-size:11px}
.dz-check{display:flex;gap:10px;align-items:center;margin-top:22px;cursor:pointer;font-size:12px}
.dz-check input{width:auto;flex:none;margin:0}

.insp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:14px}
.insp{display:flex;flex-direction:column;gap:8px}
.insp img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line2)}
.insp input{font-size:13px}

/* the proposal bar: secondary actions sit in "More" on a phone */
.dock-more{display:none;position:relative}
.dock-more summary{list-style:none;cursor:pointer}
.dock-more summary::-webkit-details-marker{display:none}
.dock-more-menu{position:absolute;right:0;bottom:calc(100% + 10px);display:flex;flex-direction:column;gap:6px;min-width:190px;padding:10px;background:var(--bg);border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.18);z-index:62}
.dock-more-menu .btn{text-align:left}
@media(max-width:760px){.dock-sec{display:none}.dock-more{display:block}.dock-acts{overflow:visible}}

/* The installed app: only the assistant, full screen */
.chat-app .top,.chat-app #view,.chat-app #dock,.chat-app .verse-bar{display:none}
.chat-app .assistant{top:0;bottom:0;left:0;right:0;width:100vw;border:0;box-shadow:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.chat-app .as-head .btn{display:none}

/* Plan: how far the writing has got */
.plan-prog{margin-bottom:18px}
.pp-track{height:6px;background:var(--line);margin:14px 0 10px;overflow:hidden}
.pp-fill{height:100%;width:0;background:#1E47D1;transition:width .6s ease}

/* Send now / Schedule: live steps */
.sendpanel{border:1px solid var(--line2);padding:16px 18px;margin-bottom:18px}
.sendpanel .pp-track{margin:12px 0}
.pp-fill.bad{background:#b3261e}
.sendsteps .ss{margin:6px 0;font-size:13px}
.sendsteps .ss-wait{color:var(--muted)}
.sendsteps .ss-fail b{color:#b3261e}
.ss-done{margin-top:10px;font-weight:500}

/* Website analytics */
.tr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--ink);margin-bottom:24px}
.tr-stat{padding:16px 20px 14px;border-right:1px solid var(--line2);display:flex;flex-direction:column;gap:6px}
.tr-stat:last-child{border-right:0}
.tr-visitor .name b{font-variant-numeric:tabular-nums}
.tr-tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line2);vertical-align:middle}
.tr-tag.person{border-color:#1E47D1;color:#1E47D1}
.tr-tag.bot{border-color:#b45309;color:#b45309}
.tr-ua{display:block;overflow-wrap:anywhere;margin-top:2px}
.tr-stat small{font-size:9px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.tr-stat b{font:300 30px/1 var(--display);font-stretch:115%;color:var(--strong)}
.tr-bars{display:flex;align-items:flex-end;gap:2px;height:120px;margin-top:14px}
.tr-bars i{flex:1;min-width:2px;background:#1E47D1;display:block}
.tr-score{display:inline-block;min-width:34px;text-align:center;padding:2px 7px;border:1px solid var(--line2);font:500 12px/1.5 var(--sans)}
.tr-score.hi{background:#1E47D1;border-color:#1E47D1;color:#fff}
.tr-score.mid{border-color:#1E47D1;color:#1E47D1}
.tr-score.bad{background:#b3261e;border-color:#b3261e;color:#fff}
.tr-hmouter,.tr-stageouter{position:relative;overflow:hidden;border:1px solid var(--line2);margin-top:14px}
.tr-hm,.tr-stage{position:absolute;left:0;top:0}
.tr-frame,.tr-pframe{display:block;border:0;background:#fff}
.tr-frame{pointer-events:none}
.tr-canvas{position:absolute;left:0;top:0;pointer-events:none}
.tr-cursor{position:absolute;display:none;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #1E47D1;background:rgba(30,71,209,.25);border-radius:50%;pointer-events:none;transition:left .12s linear,top .12s linear}
.tr-ripple{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #1E47D1;border-radius:50%;pointer-events:none;animation:tr-rip .7s ease-out forwards}
@keyframes tr-rip{from{transform:scale(.4);opacity:1}to{transform:scale(3);opacity:0}}
@media (prefers-reduced-motion:reduce){.tr-ripple{animation:none;opacity:.5}.tr-cursor{transition:none}}
.tr-rec small{font-size:11px}
.tr-small{margin-bottom:14px}.tr-small .tr-stat{padding:12px 16px 10px}.tr-small .tr-stat b{font-size:24px}
.tr-mini{height:60px;margin:0 0 14px}
.pl-when{font-size:12px;line-height:1.5}.pl-when b{font-weight:500;color:var(--ink)}

/* phone menu: the header links collapse into a Menu button that opens a full-screen list (menu.js) */
.top-right .menu-btn{display:none}
.mmenu{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;gap:6px;padding:18px 5vw 40px;overflow-y:auto;background:var(--bg);color:var(--ink)}
.mmenu[hidden]{display:none}
body.menu-open{overflow:hidden}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mm-head b{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.mm-close{font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid var(--line2);padding:9px 14px;cursor:pointer}
.mm-lab{margin:22px 0 4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mm-acts,.mm-nav,.mm-foot{display:flex;flex-direction:column}
.mm-act,.mm-nav a{display:flex;align-items:center;min-height:52px;padding:0 2px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--strong);font:inherit;font-size:20px;text-align:left;text-decoration:none;cursor:pointer}
.mm-nav a.active{color:var(--accent)}
.mm-sub a{font-size:17px;min-height:46px;color:var(--ink)}
.mm-act:focus-visible,.mm-nav a:focus-visible,.mm-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){
  .top nav,.top-right #theme,.top-right #lock{display:none}
  .top-right{gap:12px}
  .top-right .menu-btn{display:inline-block;opacity:1;padding:7px 12px;border:1px solid var(--line2)}
}
@media print{.mmenu,.menu-btn{display:none!important}}
/* recurring plan form: one line per item (description, quantity, price, remove) */
.plan-line{display:grid;grid-template-columns:minmax(0,1fr) 64px 110px auto;gap:10px;align-items:center;margin-bottom:8px}
@media (max-width:640px){.plan-line{grid-template-columns:minmax(0,1fr) 56px 90px;}.plan-line .btn{grid-column:1/-1;justify-self:start}}
.rev-break li.rev-sub{padding:5px 0 5px 14px;border-top:0;color:var(--muted);font-size:12px}
/* Invoices list (Squarebook's layout): tabs with counts, filter chips, footer with paging */
.il-tabs{margin-bottom:16px}
.il-tabs button b{font-weight:600;margin-left:4px;color:var(--strong)}
.il-tabs button.due b{color:var(--accent)}
.il-chips{flex-wrap:wrap;gap:8px;margin:0 0 14px;align-items:flex-end}
.il-chips input[type=search]{min-width:220px}
.il-chip{display:inline-flex;align-items:center;gap:6px}
.il-chip .lab{margin:0}
.il-table td,.il-table th{white-space:nowrap}
.il-table tbody tr{cursor:pointer}
.il-foot{display:flex;justify-content:space-between;align-items:center;margin:10px 0 0}
@media(max-width:760px){.il-hide{display:none}}

/* "A new version of the CRM is ready" (update.js) */
.nf-update{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg);color:var(--strong);border:1px solid var(--accent);box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:13px;max-width:calc(100% - 32px);flex-wrap:wrap}

/* the website editor's photo gallery (takes over the drawer, wider) */
.wb-drawer.wb-wide{width:min(760px,96vw)}
.wb-gallery-bar{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.wb-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wb-gallery>.wb-h,.wb-gallery>p{grid-column:1/-1;margin:10px 0 0}
.wb-tile{display:flex;flex-direction:column;gap:6px;padding:4px;background:transparent;border:2px solid transparent;color:var(--ink);font:inherit;font-size:11px;text-align:left;cursor:pointer}
.wb-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tile-a)}
.wb-tile span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.wb-tile:hover{border-color:var(--line2)}
.wb-tile.on{border-color:var(--accent)}
.wb-tile.on span{color:var(--strong)}
.wb-tile.is-current{opacity:.55;cursor:default}
/* the Website card on a client's profile (sites.js) */
.site-row .due{color:#d1453b;font-size:13px;margin:8px 0 0}
.site-rule{cursor:pointer;font-size:13px}.site-rule input[type=checkbox]{width:auto;margin:0 8px 0 0;vertical-align:-2px;accent-color:var(--blue)}
.site-rule input.num-sm{width:56px;display:inline-block;text-align:right;margin-right:6px}.site-rule .meta{white-space:nowrap}
.site-cell{display:inline-flex;gap:12px;align-items:center;white-space:nowrap}
.site-msgs{margin:12px 0}.site-msgs>summary{cursor:pointer;font-size:13px;padding:8px 0}.site-msg{padding:8px 0;border-bottom:1px solid var(--line)}.site-msg p{margin-top:6px;white-space:pre-wrap;font-size:13px}
.hc-prov{padding:8px 0 10px}.hc-prov+.hc-prov{border-top:1px solid rgba(127,127,127,.2)}

/* Build log panel in a client's Website card (sites.js) */
.bl-panel{margin:14px 0}.bl-panel>summary{cursor:pointer;font-size:13px;padding:8px 0}
.bl-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.bl-entry{padding:12px 0;border-top:1px solid var(--line)}
.bl-entry textarea{width:100%;margin:6px 0}
.bl-entry .bl-raw{font-size:12px;color:var(--muted);margin:0}
.bl-entry .row2 input{max-width:220px}
.bl-link{font-size:12px;word-break:break-all}.bl-digest{font-size:13px;display:flex;gap:6px;align-items:center}

/* Support (support.js) */
.sp-in{border-left:3px solid var(--accent)}.sp-out{border-left:3px solid var(--line2)}
.sp-body{white-space:pre-wrap;margin:8px 0 0;font-size:14px;line-height:1.55}
.pick{width:36px;padding-right:0}.pick input{width:auto;margin:0;cursor:pointer}.rowdel{color:var(--muted);border-color:var(--line2);opacity:.7}tr:hover .rowdel{opacity:1}
[hidden]{display:none!important}
td.when{white-space:nowrap}
.nf-dialog .nf-choice{display:flex;gap:10px;align-items:center;margin:0 0 12px;font-size:14px;color:var(--strong);cursor:pointer}
.nf-dialog .nf-choice input{margin:0;width:auto}
.nf-dialog input.nf-date{margin:2px 0 22px;width:100%}.nf-dialog input.nf-date:disabled{opacity:.45}
.pv-extras{border-top:1px solid var(--line);padding-top:18px}.feat-img{display:block;max-width:100%;max-height:260px;margin:8px 0 12px;border:1px solid var(--line)}
.pv-extras{border-top:0;padding-top:0;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}.pv-read>summary{cursor:pointer;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 0 12px}
.pk-back{position:fixed;inset:0;z-index:70;background:rgba(8,11,17,.5)}
.pk-drawer{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(900px,100vw);background:var(--bg);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-18px 0 48px rgba(0,0,0,.25)}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}.pk-body{padding:18px 24px 40px;overflow:auto;flex:1}

/* a project's full page: proposal, timeline and notes beside the build log and client preview */
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start;margin-top:24px}
.proj-col{display:grid;gap:24px;min-width:0}
@media (max-width:980px){.proj-grid{grid-template-columns:1fr}}

/* the preview link box copies on click */
.link-copy{cursor:copy;min-width:min(100%,420px);flex:1}

/* Sites: a card per client website with its home page scaled down (crm/static/site-manager.js) */
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:28px}
.sm-card{border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .15s}
.sm-card:hover{border-color:var(--ink)}
.sm-open{display:block;text-decoration:none;color:inherit}
.sm-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--line);border-bottom:1px solid var(--line)}
.sm-thumb iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.sm-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 10px}
.sm-domain{font:400 16px/1.2 var(--display);color:var(--strong);word-break:break-all}
.sm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sm-chip{font-size:9px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line2);padding:4px 7px;color:var(--muted)}
.sm-chip.on{border-color:var(--blue);color:var(--blue)}
.sm-chip.due{border-color:currentColor}
.sm-card{cursor:pointer;background:var(--bg)}
.sm-card.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.sm-card:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.sm-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.sm-quick > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.sm-quick small{font-size:10.5px}
.sm-q-v{font:400 17px/1.1 var(--display);color:var(--strong)}
.sm-q-v.ok{color:#2e9e5b}.sm-q-v.warn{color:#c98a12}.sm-q-v.bad{color:#d1453b}
.sm-links{align-items:center}
/* the side panel: everything about one website */
.sm-drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);z-index:9;background:var(--bg);border-left:1px solid var(--line2);display:flex;flex-direction:column;box-shadow:-18px 0 40px rgba(0,0,0,.18)}
.sm-dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.sm-dbody{overflow-y:auto;padding:18px 24px 90px;display:flex;flex-direction:column;gap:6px}
.sm-dbody > .actions{margin-bottom:10px}
.sm-sec{padding:18px 0 8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.sm-h{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.sm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px}
.sm-stat{display:flex;flex-direction:column;gap:3px;min-width:0}
.sm-stat > b{font:400 19px/1.1 var(--display);color:var(--strong)}
.sm-stat.wb-big{flex-direction:row}
.sm-bars{height:70px;margin-top:2px}
.sm-list{display:flex;flex-direction:column}
.sm-list > .lab{margin-bottom:6px}
.sm-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:12.5px}
.sm-row > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-row > span:last-child{flex:none;text-align:right;max-width:60%}
a.sm-row:hover{color:var(--strong)}
.sm-plan{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
@media (min-width:1100px){body.sm-open main{margin-right:560px}}
.sm-links{display:flex;gap:16px;padding:0 16px 14px;margin-top:auto}
.wb-domain{font-weight:500;margin-right:6px}
.row2.is-done{opacity:.55}

/* owner console additions */
.signin{max-width:360px;margin:12vh auto 0;padding:0 24px;display:flex;flex-direction:column;gap:12px}
.signin .brand{margin-bottom:10px}.signin h1{font:300 28px/1.1 var(--display);margin:6px 0}
.signin input{width:100%;padding:10px 12px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);font:inherit}
.signin .btn{width:100%}.err{color:#c0392b;font-size:12.5px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:6px 0 14px;font-size:13px}.kv dt{color:var(--muted)}.kv dd{margin:0}
.pill.ok,.pill.paid,.pill.active,.pill.action{border-color:#1a7f4b;color:#1a7f4b}.pill.warn,.pill.trial,.pill.pending,.pill.idle,.pill.slow,.pill.past_due,.pill.open{border-color:#a8740a;color:#a8740a}
.pill.bad,.pill.error,.pill.client_error,.pill.suspended,.pill.expired,.pill.canceled,.pill.void,.pill.uncollectible{border-color:#c0392b;color:#c0392b}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--muted)}
.msg{padding:10px 12px;border:1px solid var(--line);margin:0 0 8px}.msg.owner{background:var(--tile-a)}.msg div{white-space:pre-wrap}

/* the logo draws itself: outline, then the three lines, then the name */
@keyframes lgdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lgword{from{opacity:0;letter-spacing:.5em;transform:translateX(-6px)}to{opacity:1;transform:none}}
.brand.anim .lr,.brand.anim .lb{stroke-dasharray:1;stroke-dashoffset:1;animation:lgdraw .9s cubic-bezier(.5,0,.2,1) .15s forwards}
.brand.anim .lb{animation-duration:.5s}
.brand.anim .lb:nth-of-type(1){animation-delay:.85s}.brand.anim .lb:nth-of-type(2){animation-delay:1s}.brand.anim .lb:nth-of-type(3){animation-delay:1.15s}
.brand.anim .bword{animation:lgword .9s cubic-bezier(.2,.7,.2,1) .7s both}
@media (prefers-reduced-motion:reduce){.brand.anim .lr,.brand.anim .lb{animation:none;stroke-dashoffset:0}.brand.anim .bword{animation:none}}