/* ============================================================
   The dashboard (dashboard.html), on top of builder.css (its colors,
   buttons, fields and dialogs). Owners and clients share it; the
   invoice and quote page prints cleanly.
   ============================================================ */
body.dash-page{height:auto;min-height:100%;overflow:auto;background:var(--canvas);touch-action:auto}
html:has(body.dash-page){height:auto}
.db-loading{padding:40px;text-align:center;color:var(--muted)}
.dash{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh}

/* side: brand, navigation, who is signed in */
.db-side{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:var(--chrome);border-right:1px solid var(--line);overflow:auto}
.db-brand{padding:4px 6px 10px}
.db-role{margin:0 8px 6px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ice)}
.db-nav,.db-nav-in{display:grid;gap:2px;align-content:start}
.db-nav-a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:500}
.db-nav-a:hover{background:var(--panel-2);color:var(--text)}
.db-nav-a[aria-current]{background:color-mix(in srgb,var(--ice) 14%,transparent);color:var(--text)}
.db-nav-a[aria-current] svg{color:var(--ice)}
.db-nav-a span{flex:1;min-width:0}
.db-nav-a em{font-style:normal;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:99px;background:var(--panel-2);color:var(--muted)}
.db-side-foot{margin-top:auto;display:grid;gap:10px;padding-top:12px}
.db-side{overflow-x:hidden;scrollbar-width:thin}
.db-side-foot>.btn{width:100%;min-width:0;justify-content:center;padding-left:12px;padding-right:12px}
.db-menu{display:none}
.db-pol{margin:0;font-size:12px;color:var(--muted);text-align:center}
.db-pol a{color:inherit}
.db-legal a{color:var(--ice)}
.db-doc-terms a{color:#0a8fa3}
.db-who{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:10px;min-width:0}
.db-who>span:nth-child(2){display:grid;min-width:0;flex:1}
.db-who b{font-weight:600}
.db-who small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-who .av,.av{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--ice);color:var(--on-ice);font-weight:700}

/* the page */
.db-main{padding:28px clamp(16px,3vw,36px) 48px;display:grid;gap:18px;align-content:start;min-width:0;max-width:1240px;width:100%;outline:none}
.db-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.db-head h1{margin:0;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em;line-height:1.2}
.db-head p{margin:4px 0 0;color:var(--muted);max-width:720px}
.db-head a{color:inherit}
.db-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.db-test{color:var(--warn)}
.db-card{background:var(--chrome);border:1px solid var(--line);border-radius:14px;min-width:0}
.db-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 0;flex-wrap:wrap}
.db-card-h h2{margin:0;font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.db-card-b{padding:12px 18px 16px;min-width:0}
.db-card-b>p:first-child{margin-top:0}
.db-card-b>.db-scroll{margin:0 -18px -16px}
.db-count{font-style:normal;font-size:12px;padding:1px 8px;border-radius:99px;background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.db-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.db-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.db-tile{display:grid;gap:4px;padding:16px 18px;background:var(--chrome);border:1px solid var(--line);border-radius:14px;min-width:0}
.db-tile small{color:var(--muted);font-weight:500}
.db-tile b{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;font-weight:600;overflow-wrap:anywhere}
.db-tile span{color:var(--muted);font-size:12.5px}
.db-tile.warn b{color:var(--warn)}
.db-tile.ok b{color:var(--ok)}
.db-empty{margin:4px 0;color:var(--muted)}
.db-sub{display:block;color:var(--muted);font-size:12px;font-weight:400}
.db-sub-p{margin:0;color:var(--muted);font-size:13px}
/* a warning line: the icon hangs on the left, the words (bold names too) flow as one paragraph */
.db-sub-p.warn{color:var(--warn);display:block;position:relative;padding-left:20px}
.db-sub-p.warn>svg{position:absolute;left:0;top:2px}
.db-tools{display:flex;gap:8px}
.db-tools input{max-width:360px;padding:8px 10px}
.modal .db-tools input{max-width:none;flex:1;min-width:0}
.db-chips{display:flex;gap:6px;flex-wrap:wrap}
.db-chips button{border:1px solid var(--line);background:var(--chrome);padding:6px 12px;border-radius:99px;cursor:pointer;font-weight:500;color:var(--muted)}
.db-chips button[aria-pressed="true"]{background:var(--text);color:var(--chrome);border-color:var(--text)}
.db-chips em{font-style:normal;opacity:.7;margin-left:2px}
.db-ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--muted)}

/* badges */
.db-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--panel-2);color:var(--muted)}
.db-badge.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.db-badge.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.db-badge.bad{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.db-badge.muted{background:transparent;border:1px solid var(--line)}

/* tables (rows become cards on phones) */
.db-scroll{overflow-x:auto}
.db-table{width:100%;border-collapse:collapse}
.db-table th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:10px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.db-table td{padding:11px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.db-table tr:last-child td{border-bottom:0}
.db-table .r{text-align:right}
.db-table tr.click{cursor:pointer}
.db-table tr.click:focus-visible td{background:var(--panel)}
@media (hover:hover){.db-table tr.click:hover td{background:var(--panel)}}
.db-table tr.click:active td{background:var(--panel)}
.db-table a{color:inherit}

/* lists */
.db-list{display:grid}
.db-li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;min-width:0;background:none;border-left:0;border-right:0;border-top:0;font:inherit;text-align:left;width:100%}
.db-li:last-child{border-bottom:0}
.db-li>svg{flex:none;color:var(--muted)}
.db-li>span:first-of-type{flex:1;min-width:0;display:grid}
.db-li b{font-weight:600;overflow-wrap:anywhere}
.db-li b.db-plain{font-weight:400}
.db-li small{color:var(--muted);font-size:12.5px}
.db-li a{color:inherit}
.db-li.click{cursor:pointer;border-radius:8px}
.db-li.click:hover{background:var(--panel)}
.db-li.ended{opacity:.55}
.db-when{display:grid;text-align:right;font-size:13px;white-space:nowrap}
.db-when small{font-size:12px}
.db-when.soon{color:var(--warn);font-weight:600}
.db-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0}
.db-dl dt{color:var(--muted)}
.db-dl dd{margin:0;overflow-wrap:anywhere}
.db-dl a{color:inherit}
.db-notes{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--panel)}
.db-notes small{color:var(--muted);font-weight:600}
.db-notes p{margin:4px 0 0}
.db-alerts{display:grid;gap:10px}
.db-alert{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--warn);border-radius:12px;background:color-mix(in srgb,var(--warn) 8%,var(--chrome))}
.db-alert>svg{flex:none;color:var(--warn)}
.db-alert p{margin:0;flex:1;min-width:0}
.db-plan p{margin:0 0 12px}
.db-money{display:block;margin-top:2px}
.db-money b,.db-table b.pos,.db-table b.neg{font-weight:600}
.db-money .pos,.db-table .pos{color:var(--ok)}
.db-money .neg,.db-table .neg{color:var(--danger)}
.db-tile a{color:inherit}
.db-stripe{display:grid;gap:8px}
.db-costs{display:grid;gap:18px;min-width:0}
.db-cost{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
@media (max-width:600px){.db-cost{grid-template-columns:minmax(0,1fr)}}
.db-mini-h{margin:6px 0 0;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.db-found{display:grid;gap:12px;margin-top:12px}
.db-found-c{padding:12px 14px;border:1px solid var(--line);border-radius:12px;display:grid;gap:6px}
.db-found-c>.db-li{border-bottom:0;padding-top:0}

/* forms */
.db-form,.db-form fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
.db-form fieldset{grid-column:1/-1;border:0;margin:0;padding:0;min-width:0}
.db-form .wide,.db-form .fld.wide{grid-column:1/-1}
.db-form input,.db-form select,.db-form textarea,.db-form .dd{padding:8px 10px}
.db-form input[type=date]{width:100%;background:var(--chrome);border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit;min-width:0}
.db-lines{display:grid;gap:6px;margin:6px 0 12px}
.db-line{display:grid;grid-template-columns:minmax(0,1fr) 80px 110px 100px 32px;gap:8px;align-items:center}
.db-line-h{font-size:12px;color:var(--muted);font-weight:500}
.db-line-rows{display:grid;gap:6px}
.db-line .r{text-align:right}
.db-amt{font-variant-numeric:tabular-nums}
.db-doc-total{display:grid;justify-content:end;gap:4px;margin-top:8px}
.db-doc-total p,.db-doc-sums p{display:flex;justify-content:space-between;gap:40px;margin:0}
.db-doc-total .tot,.db-doc-sums .tot{font-size:17px;padding-top:6px;border-top:1px solid var(--line)}
.db-doc-acts{justify-content:flex-start}

/* signing in */
.db-auth{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.db-auth-box{width:min(420px,100%);display:grid;gap:4px;padding:28px;background:var(--chrome);border:1px solid var(--line);border-radius:18px}
.db-auth-box h1{margin:10px 0 2px;font-size:24px;letter-spacing:-.02em}
.db-auth-box .ln-lead{margin:0 0 14px;color:var(--muted)}
.db-auth-box .acct-form{display:grid;gap:4px}
.db-auth-box .acct-go{margin-top:6px;padding:10px}
.db-auth-box .acct-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.db-legal{margin:16px 0 0;font-size:11.5px;color:var(--muted)}
.ln-link{border:0;background:none;color:var(--ice);cursor:pointer;padding:4px 0;font:inherit;font-weight:500}

/* one invoice or quote */
.db-docpage{min-height:100dvh;padding:24px 16px 48px;display:grid;gap:16px;justify-items:center;align-content:start}
.db-doc-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:min(820px,100%)}
.db-doc-bar .ai-status{flex-basis:100%}
.btn.big{padding:11px 18px;font-size:15px}
.db-doc{width:min(820px,100%);background:#fff;color:#1a1d24;border-radius:14px;padding:clamp(20px,5vw,48px);box-shadow:0 20px 60px -24px rgba(0,0,0,.35);display:grid;gap:22px}
.db-doc-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.db-doc-from{margin:10px 0 0;color:#5f6677;font-size:13px;line-height:1.55}
.db-doc-title{text-align:right}
.db-doc-title h1{margin:0;font-size:28px;letter-spacing:-.02em;text-transform:uppercase;color:#0a8fa3}
.db-doc-title p{margin:4px 0 0;color:#5f6677;font-size:13.5px}
.db-doc-to small,.db-doc-notes small{color:#5f6677;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.db-doc-to p{margin:4px 0 0;line-height:1.55}
.db-doc-sub{margin:0;font-size:18px}
.db-doc-lines{width:100%;border-collapse:collapse}
.db-doc-lines th{text-align:left;font-size:12px;color:#5f6677;padding:8px 0;border-bottom:2px solid #1a1d24}
.db-doc-lines td{padding:10px 0;border-bottom:1px solid #dde0e6;vertical-align:top}
.db-doc-lines .r{text-align:right;padding-left:12px;white-space:nowrap}
.db-doc-sums{display:grid;gap:5px;justify-self:end;min-width:min(280px,100%)}
.db-doc-sums .tot{border-color:#1a1d24}
.db-doc-state{padding:12px 14px;border-radius:10px;background:#f1f3f6;display:flex;gap:8px;align-items:center;font-weight:500}
.db-doc-state.ok{background:#e6f6ec;color:#15803d}
.db-doc-state.warn{background:#fdf3e4;color:#92400e}
.db-doc-state.bad{background:#fdeaea;color:#b42323}
.db-doc-notes p{margin:4px 0 0}
.db-doc-terms{margin:0;color:#5f6677;font-size:12.5px}
.db-doc .brand-plate{--brand-plate:#14151a}

@media (max-width:900px){
  .dash{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr} /* short pages: the top bar keeps its height, the page takes the rest */
  .db-side{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:6px 10px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .db-brand{padding:0}
  .db-role{display:none}
  .db-side{overflow:visible}
  .db-side-foot{order:1}
  .db-side>.db-menu{order:2;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer}
  .db-side>.db-menu span{display:block;width:18px;height:2px;background:var(--text);transition:transform .25s,opacity .2s}
  .db-side>.db-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .db-side>.db-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
  .db-side>.db-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* the menu: a panel under the menu button, every entry in its group */
  .db-side>.db-nav{position:absolute;top:calc(100% + 8px);right:16px;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - var(--db-top,72px) - 16px);display:flex;flex-direction:column;overflow:hidden;
    padding:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .db-side>.db-nav.open{opacity:1;visibility:visible;transform:none}
  .db-side>.db-nav>.db-nav-in{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px}
  .db-side-foot{margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:8px}
  .db-side-foot>.btn,.db-pol{display:none}
  .db-who{border:0;padding:0}
  .db-who>span:nth-child(2){display:none}
  .db-grid2{grid-template-columns:minmax(0,1fr)}
  .db-main{padding-top:20px}
}
@media (max-width:600px){
  .db-form,.db-form fieldset{grid-template-columns:minmax(0,1fr)}
  .db-table thead{display:none}
  .db-table,.db-table tbody,.db-table tr,.db-table td{display:block;width:100%}
  .db-table tr{padding:10px 16px;border-bottom:1px solid var(--line)}
  .db-table tr:last-child{border-bottom:0}
  .db-table td{border:0;padding:3px 0;text-align:left!important}
  .db-table td:empty{display:none}
  .db-table tr.click{transition:background .15s}
  .db-table tr.click :is(td,td:hover){background:none!important}
  .db-table tr.click:focus-visible,.db-table tr.click:active{background:var(--panel);outline:none}
  @media (hover:hover){.db-table tr.click:hover{background:var(--panel)}}
  .db-scroll{overflow-x:visible}
  .db-line{grid-template-columns:minmax(0,1fr) 64px 32px;grid-template-areas:"d d d" "q p x" "a a a"}
  .db-line>:nth-child(1){grid-area:d}.db-line>:nth-child(2){grid-area:q}.db-line>:nth-child(3){grid-area:p}.db-line>:nth-child(4){grid-area:a}.db-line>:nth-child(5){grid-area:x}
  .db-line{grid-template-columns:64px minmax(0,1fr) 32px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
  .db-line-h{display:none}
  .db-alert{flex-wrap:wrap}
  .db-alert .btn{width:100%}
  .db-doc-title{text-align:left}
  /* rows: the words get the full width; the date, badges and buttons wrap underneath, lined up with them */
  .db-li{flex-wrap:wrap;row-gap:8px;position:relative;padding-left:36px}
  .db-li>svg:first-child{position:absolute;left:6px;top:12px}
  .db-li>.db-dot:first-child{position:absolute;left:10px;top:17px;margin:0}
  .db-li>svg:last-child:not(:first-child){display:none}
  .db-li>span:first-of-type{flex:1 1 100%}
  .db-when{text-align:left}
}
@media print{
  body.dash-page{background:#fff}
  .no-print,.toast{display:none!important}
  .db-docpage{padding:0}
  .db-doc{box-shadow:none;width:100%;padding:0}
}
.db-stats .db-acts{margin-top:14px}
.db-up-sum{margin:10px 0 0}
/* Server and resources (owner.js server()): health checks and plan meters */
.db-res{display:grid;gap:16px;min-width:0}
.db-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin-bottom:12px;align-items:start}
.db-meter{display:grid;gap:6px;min-width:0}
.db-meter-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.db-meter-top span{color:var(--muted)}
.db-meter-bar{height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.db-meter-bar i{display:block;height:100%;border-radius:inherit;background:var(--ok)}
.db-meter.warn .db-meter-bar i{background:var(--warn)}
.db-meter.bad .db-meter-bar i{background:var(--danger)}
.db-meter small{font-size:12px;color:var(--muted)}
.db-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent);align-self:center}
.db-dot.warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}
.db-dot.bad{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent)}
.db-res code{font-family:var(--mono);font-size:12px}

/* ============================================================
   Motion: cards rise in one after another; calm with reduced motion
   ============================================================ */
@keyframes db-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes db-fade{from{opacity:0}}
@keyframes db-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes db-grow{from{width:0}}
@keyframes db-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes db-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.db-in{animation:db-rise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.db-rise{animation:db-rise .35s cubic-bezier(.2,.7,.2,1) both}
.db-tiles .db-tile{animation:db-rise .5s cubic-bezier(.2,.7,.2,1) both}
.db-tiles .db-tile:nth-child(2){animation-delay:50ms}.db-tiles .db-tile:nth-child(3){animation-delay:100ms}.db-tiles .db-tile:nth-child(4){animation-delay:150ms}.db-tiles .db-tile:nth-child(5){animation-delay:200ms}
.db-tile,.db-card,.db-site{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.db-tile:hover{transform:translateY(-2px);box-shadow:0 12px 28px -18px color-mix(in srgb,var(--ice) 60%,transparent)}
.db-tile{position:relative;overflow:hidden}
.db-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--ice),color-mix(in srgb,var(--violet,var(--ice)) 80%,transparent));opacity:.55}
.db-tile.warn::before{background:var(--warn)}.db-tile.ok::before{background:var(--ok)}
.db-nav-a{position:relative;transition:background .15s,color .15s}
.db-nav-a svg{transition:transform .2s}
.db-nav-a:hover svg{transform:translateX(2px)}
.db-li.click,.db-table tr.click td{transition:background .15s}
.db-li.click:hover>svg:last-child{transform:translateX(2px)}
.db-li>svg{transition:transform .2s}
.db-loading{display:grid;gap:14px;max-width:1240px;padding:28px clamp(16px,3vw,36px)}
.db-skel{height:90px;border-radius:14px;background:linear-gradient(90deg,var(--chrome) 25%,var(--panel-2) 50%,var(--chrome) 75%);background-size:200% 100%;animation:db-shimmer 1.4s linear infinite}
@media (prefers-reduced-motion:reduce){.db-in,.db-rise,.db-tiles .db-tile,.db-progress i,.db-spark svg,.db-spark-dot,.db-dot,.db-thread li{animation:none!important}.db-tile:hover,.db-site:hover{transform:none}}

/* status dots: new reply, site up / down / not checked yet */
.db-dot{display:inline-block;vertical-align:middle}
.db-dot.new{background:var(--ice);color:var(--ice);box-shadow:none;animation:db-pulse 2s infinite;width:9px;height:9px;margin:0 4px}
.db-dot.up{background:var(--ok);color:var(--ok);animation:db-pulse 2.6s infinite}
.db-dot.down{background:var(--danger);color:var(--danger);box-shadow:none;animation:db-pulse 1.2s infinite}
.db-dot.checking{background:var(--muted);box-shadow:none}
.db-up{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.db-badge.info{background:color-mix(in srgb,var(--ice) 16%,transparent);color:var(--ice)}
.db-count.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.db-li.unread b{color:var(--text)}
.db-li.unread{background:color-mix(in srgb,var(--ice) 5%,transparent)}
.db-stack{display:grid;gap:10px;min-width:0}
.db-stack>.db-mini-h{margin-top:10px}
.db-stack>.db-mini-h:first-child{margin-top:0}

/* View as client */
.db-preview-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;border:1px dashed var(--ice);background:color-mix(in srgb,var(--ice) 8%,var(--chrome))}
.db-preview-bar span{flex:1;min-width:200px}
.db-preview-bar svg{color:var(--ice)}

/* launch checklist */
.db-progress{height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden;margin-bottom:12px}
.db-progress i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--ok),var(--ice));animation:db-grow .9s cubic-bezier(.2,.7,.2,1) both .2s}
.db-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:6px 16px}
.db-check li{display:flex;align-items:center;gap:8px;padding:6px 0;color:var(--muted);min-width:0}
.db-check li svg{flex:none}
.db-check li.done{color:var(--text)}
.db-check li.done svg{color:var(--ok)}
.db-check li span{flex:1;min-width:0}
.db-check li small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.db-check:not(.edit) li{align-items:flex-start}
.db-check:not(.edit) li span{display:grid}
.db-check:not(.edit) li small{display:none}
.db-check.edit{grid-template-columns:minmax(0,1fr)}
.db-check.edit li{padding:2px 0;border-bottom:1px solid var(--line)}
.db-check.edit label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer;min-width:0;padding:6px 0}
.db-check.edit li.hid{opacity:.45}
.db-check.edit li.done span{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}

/* websites: one card each */
.db-sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.db-site{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);min-width:0}
.db-site:hover{border-color:color-mix(in srgb,var(--ice) 35%,var(--line));transform:translateY(-1px)}
.db-site header{display:flex;align-items:center;gap:12px;min-width:0}
.db-site header>div{flex:1;min-width:0;display:grid}
.db-site header b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-site header a{color:inherit;text-decoration:none}
.db-site header a:hover{color:var(--ice)}
.db-site header small{color:var(--muted);font-size:12.5px}
.db-site-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.db-site-stats div{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--chrome);min-width:0}
.db-site-stats small{color:var(--muted);font-size:11.5px}
.db-site-stats b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.db-site-stats b.warn{color:var(--warn)}
.db-site .db-stats{padding-top:12px;border-top:1px solid var(--line)}

/* requests: the rate, the conversation */
.db-rate{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ice) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--ice) 25%,var(--line))}
.db-rate svg{flex:none;margin-top:2px;color:var(--ice)}
.db-rate p{margin:0;font-size:13.5px;line-height:1.5}
.db-thread-wrap{display:grid;gap:14px;min-width:0}
.db-req-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--muted);font-size:13px}
.db-req-meta b{color:var(--text)}
.db-thread{scrollbar-width:thin;scrollbar-color:var(--line) transparent;list-style:none;margin:0;padding:4px 2px;display:grid;gap:12px;max-height:min(52vh,520px);overflow:auto;scroll-behavior:smooth}
.db-thread li{display:grid;gap:4px;max-width:min(560px,88%);animation:db-rise .3s ease both}
.db-thread li.me{justify-self:end;justify-items:end}
.db-thread li.them{justify-self:start}
.db-msg{padding:10px 14px;border-radius:16px;background:var(--panel-2);line-height:1.5;overflow-wrap:anywhere}
.db-msg p{margin:0}
.db-thread li.me .db-msg{background:linear-gradient(135deg,color-mix(in srgb,var(--ice) 85%,#000),color-mix(in srgb,var(--violet,var(--ice)) 70%,#000));color:#fff;border-bottom-right-radius:5px}
.db-thread li.them .db-msg{border-bottom-left-radius:5px}
.db-thread small{font-size:11.5px;color:var(--muted);padding:0 6px}
.db-reply{align-items:end}
.db-reply-acts{display:grid;gap:4px}
.db-reply-acts .btn{justify-self:end}
.db-req-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.db-time{display:grid;gap:14px}
.db-time-big{display:grid;gap:2px}
.db-time-big small b{font-size:inherit;font-family:inherit;background:none;color:var(--text);-webkit-text-fill-color:currentColor}
.db-time-big>b{font-size:32px;font-weight:700;font-family:var(--sv-display,inherit);letter-spacing:-.01em}
.db-time-big small{color:var(--muted)}
.db-time .db-form{grid-template-columns:minmax(0,1fr)}

/* messages and email settings */
.db-prefs{display:grid;gap:4px}
.db-prefs .switch{align-items:flex-start;margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.db-prefs .switch:last-child{border-bottom:0}
.db-prefs .switch span{display:grid;gap:2px}
.db-prefs .switch small{color:var(--muted)}


/* client timeline */
.db-note-form{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.db-note-form input[type=text]{flex:1 1 180px;min-width:0;padding:7px 10px}
.db-note-form select,.db-note-form .dd{width:auto;flex:0 0 auto}
.db-note-form .dd{padding:7px 8px;min-height:0}
.db-note-form select,.db-note-form input[type=date]{padding:7px 8px;background:var(--chrome);border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit}
.db-timeline{scrollbar-width:thin;scrollbar-color:var(--line) transparent;list-style:none;margin:0;padding:0;display:grid;max-height:440px;overflow:auto}
.db-timeline li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:8px 0;position:relative}
.db-timeline li::before{content:"";position:absolute;left:13px;top:34px;bottom:-6px;width:2px;background:var(--line)}
.db-timeline li:last-child::before{display:none}
.db-timeline li>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel-2);color:var(--ice);font-style:normal}
.db-timeline li>div{min-width:0}
.db-timeline li p{margin:2px 0 0;color:var(--text);overflow-wrap:anywhere}
.db-timeline li small{color:var(--muted);font-size:12px;margin-right:8px}
.db-tl-at{display:block}
.db-tl-acts{display:flex;align-items:flex-start}
.db-when-in{font-size:12px;color:var(--muted)}
.db-when-in.soon{color:var(--warn);font-weight:600}

/* trends */
.db-trend{display:grid;gap:12px}
.db-trend-tops{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.db-trend-tops>div{display:grid;gap:2px}
.db-trend-tops small{color:var(--muted);font-size:12px}
.db-trend-tops b{font-size:22px;font-weight:600;font-family:var(--sv-display,inherit)}
.db-trend-chart{color:var(--ice);height:120px}
.db-spark{position:relative;width:100%;height:100%}
.db-spark svg{display:block;width:100%;height:100%;overflow:visible;animation:db-reveal 1.1s cubic-bezier(.3,.7,.2,1) both .15s}
.db-spark-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:currentColor;color:inherit;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 25%,transparent);animation:db-fade .3s ease both 1.1s}
@keyframes db-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* find anything (Ctrl+K) */
.db-finder{align-items:start;padding-top:12vh}
.db-finder .sheet{width:min(620px,100%);padding:0;overflow:hidden}
.db-finder-q{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.db-finder-q input{flex:1;border:0;background:none;font-size:16px;padding:4px 0;outline:none;color:var(--text)}
.db-finder-q kbd{font-family:var(--mono);font-size:11px;padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--muted)}
.db-finder-l{max-height:min(56vh,480px);overflow:auto;padding:6px}
.db-finder-l .db-li{border:0;padding:9px 10px;border-radius:9px}
.db-finder-l .db-li.sel{background:color-mix(in srgb,var(--ice) 14%,transparent)}
.db-finder-l .db-li svg{color:var(--ice)}

@media (max-width:900px){
  .db-req-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .db-site-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-thread li{max-width:94%}
  .db-check{grid-template-columns:minmax(0,1fr)}
  .db-finder{padding-top:0;align-items:end}
}
@media (max-width:600px){
  .db-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .db-tile{padding:12px 14px}
  .db-tile b{font-size:20px}
  .db-tile span{font-size:12px}
  .db-head .db-acts{width:100%}
  .db-head .db-acts>.btn{flex:1 1 auto;justify-content:center;min-width:0}
}
/* Test mode ribbon, and Business settings › Payments */
.db-ribbon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--warn) 18%,var(--chrome)) 0 14px,color-mix(in srgb,var(--warn) 10%,var(--chrome)) 14px 28px);border:1px solid var(--warn);color:var(--text);text-decoration:none}
.db-ribbon svg{color:var(--warn);flex:none}
.db-ribbon span{flex:1;min-width:200px}
.db-ribbon em{font-style:normal;font-weight:600;color:var(--warn)}
.db-pay{display:grid;gap:14px}
.db-pay-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.db-pay-state{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);min-width:240px}
.db-pay-state b{display:block;font-size:20px;font-family:var(--sv-display,inherit)}
.db-pay-state small{color:var(--muted)}
.db-pay-state.live{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:color-mix(in srgb,var(--ok) 8%,transparent)}
.db-pay-state.live b{color:var(--ok)}
.db-pay-state.test{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.db-pay-state.test b{color:var(--warn)}
.db-pay-state .db-dot.warn{animation:db-pulse 1.6s infinite;color:var(--warn)}
.db-pay-facts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.db-pay-facts li{display:flex;align-items:center;gap:8px;color:var(--muted);flex-wrap:wrap}
.db-pay-facts li svg{flex:none;color:var(--ice)}
.db-pay-facts a{color:var(--ice)}
.db-payrole-box{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.db-payroles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:8px}
.db-payrole{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}
.db-payrole input{position:absolute;opacity:0;pointer-events:none}
.db-payrole b{font-weight:600}
.db-payrole small{color:var(--muted);font-size:12px;line-height:1.4}
.db-payrole:has(input:checked){border-color:var(--ice);background:color-mix(in srgb,var(--ice) 8%,transparent)}
.db-payrole:has(input:focus-visible){outline:2px solid var(--ice);outline-offset:2px}
/* Owner menu groups, and Accounts */
.db-nav-h{margin:12px 10px 2px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--muted) 75%,transparent)}
.db-nav-h:first-child{margin-top:2px}
.db-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.db-cat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--chrome);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.db-cat svg{grid-row:1/3;color:var(--ice)}
.db-cat b{font-size:22px;font-weight:600;line-height:1.1;font-family:var(--sv-display,inherit)}
.db-cat span{font-size:12.5px;color:var(--muted)}
.db-cat:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--ice) 40%,var(--line))}
.db-cat.on{border-color:var(--ice);background:color-mix(in srgb,var(--ice) 10%,var(--chrome))}
.db-acct-tools{flex-wrap:wrap}
.db-acct-tools input{flex:1 1 240px}
.db-acct-tools select{width:auto;flex:0 0 auto;padding:8px 10px;background:var(--chrome);border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit}
.db-acct-tools .dd{width:auto;flex:0 0 auto;padding:8px 10px}
.db-acct{display:flex;align-items:center;gap:10px;min-width:0}
.db-acct>span:last-child{display:grid;min-width:0}
.db-acct .av{width:32px;height:32px;font-size:13px}
.db-acct-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:12px 0}
.db-acct-cat{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.db-acct-cat svg{grid-row:1/3;color:var(--ice)}
.db-acct-cat small{color:var(--muted);font-size:12px}

@media (max-width:600px){.db-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.db-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}.db-chips::-webkit-scrollbar{display:none}.db-chips button{flex:none}
  .db-card .db-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
.db-badges{display:flex;flex-wrap:wrap;gap:5px}
.db-nowrap{white-space:nowrap}
/* a wide table scrolls inside its card instead of widening the page */
.db-main{grid-template-columns:minmax(0,1fr)}
.db-cat span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-scroll{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.db-acct-money{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0 10px}
.db-acct-money>div{display:grid;gap:1px;padding:10px 12px;border-radius:10px;background:var(--panel)}
.db-acct-money small{color:var(--muted);font-size:11.5px}
.db-acct-money b{font-size:19px;font-weight:600;font-family:var(--sv-display,inherit)}
.db-acct-money span{color:var(--muted);font-size:12px}
.db-acct-money .pos{color:var(--ok)}.db-acct-money .neg{color:var(--danger)}
.db-row-acts{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.db-mini-sel{padding:5px 8px;background:var(--chrome);border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit;font-size:12.5px;width:auto}
.db-mini-sel+.dd{width:auto;min-height:0;padding:5px 8px;font-size:12.5px}
.db-fee{margin:0;font-size:12.5px;color:var(--muted)}
.db-sub.pos{color:var(--ok)}.db-sub.neg{color:var(--warn)}
.db-progress i{transition:width .35s ease}
.db-check.edit li{transition:opacity .2s}
/* Overview › Next 12 months */
.db-fc{display:grid;gap:14px}
.db-fc-tops{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.db-fc-tops>div{display:grid;gap:2px}
.db-fc-tops small{color:var(--muted);font-size:12px}
.db-fc-tops b{font-size:22px;font-weight:600;font-family:var(--sv-display,inherit)}
.db-fc-tops b.neg{color:var(--danger)}
.db-fc-tops span{color:var(--muted);font-size:12px}
.db-fc-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end}
.db-fc-m{display:grid;gap:4px;justify-items:center;min-width:0;outline:none;border-radius:8px;padding:4px 0}
.db-fc-m:hover,.db-fc-m:focus-visible{background:var(--panel)}
.db-fc-bars{display:flex;align-items:flex-end;gap:3px;height:110px;width:100%;justify-content:center}
.db-fc-bars i{display:block;width:min(14px,40%);height:var(--h);min-height:2px;border-radius:4px 4px 0 0;transform-origin:bottom;animation:db-bar .7s cubic-bezier(.2,.7,.2,1) both}
.db-fc-m:nth-child(n) .db-fc-bars i{animation-delay:calc(var(--d,0) * 1ms)}
.db-fc-bars i.in,.db-fc-key i.in{background:linear-gradient(180deg,var(--ice),color-mix(in srgb,var(--ice) 50%,transparent))}
.db-fc-bars i.out,.db-fc-key i.out{background:color-mix(in srgb,var(--warn) 70%,transparent)}
.db-fc-m b{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.db-fc-m.neg b{color:var(--danger)}
.db-fc-m small{font-size:11px;color:var(--muted)}
.db-fc-key{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.db-fc-key i{display:inline-block;width:10px;height:10px;border-radius:3px}
@keyframes db-bar{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.db-fc-bars i{animation:none}}
@media (max-width:700px){.db-fc-chart{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:12px}.db-fc-bars{height:80px}}
.db-ck-at{font-size:11.5px;color:var(--muted);white-space:nowrap}
.db-ck-at:empty{display:none}
/* Domains: show the ended ones too */
.db-ended-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
/* Overview: payments and renewals for everyone, with a summary per client */
.db-due .db-card-h{align-items:flex-start}
.db-due-tabs button{padding:4px 10px;font-size:12.5px}
.db-due-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:2px 0 12px}
.db-due-sum>div{display:grid;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--chrome)}
.db-due-sum small{font-size:11.5px;color:var(--muted)}
.db-due-sum b{font-size:17px;font-variant-numeric:tabular-nums}
.db-due-sum .bad b{color:var(--danger)}
.db-due-who{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.db-due-chip{display:grid;padding:6px 10px;border:1px solid var(--line);border-radius:10px;color:inherit;text-decoration:none;min-width:0;max-width:100%;line-height:1.3}
.db-due-chip:hover{background:var(--panel)}
.db-due-chip b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-due-chip span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.db-due-chip.soon{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.db-due-chip.soon span{color:var(--warn)}
.db-due-chip.late{border-color:color-mix(in srgb,var(--danger) 60%,var(--line))}
.db-due-chip.late span{color:var(--danger)}
.db-due-list{max-height:420px;overflow-y:auto;overscroll-behavior:contain}
.db-due-list .db-li{flex-wrap:nowrap;padding:8px 4px;gap:10px}
.db-due-list .db-li>span:first-of-type{flex:none}
.db-due-list .db-li>span:nth-of-type(2){flex:1;min-width:0;display:grid}
.db-due-list .db-li>span:nth-of-type(2) b,.db-due-list .db-li>span:nth-of-type(2) small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-due-list .db-when{text-align:right;font-variant-numeric:tabular-nums}
.db-li>span.db-due-date,.db-due-date{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:9px;border:1px solid var(--line);line-height:1;flex:none}
.db-due-date b{font-size:15px}
.db-due-date small{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.db-due-date.soon{border-color:var(--warn);color:var(--warn)}
.db-due-date.late{border-color:var(--danger);color:var(--danger)}
@media (max-width:600px){
  .db-due-list .db-li{padding-left:4px}
  .db-due-list .db-li>span:first-of-type{flex:none}
  .db-due-list .db-when{text-align:right}
}
/* Owner: a client's password */
.db-form .db-pw-pick{border:0;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.db-pw-pick label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.db-pw-pick label:has(input:checked){border-color:var(--text)}
.db-pw-pick input{margin-top:3px;flex:none}
.db-pw-pick span{display:grid;gap:2px}
.db-pw-pick small{color:var(--muted);font-size:12.5px}
.db-pw-row{display:flex;gap:8px}
/* Dashboard pop-ups ease out as they close (builder.css eases them in); a button waiting on the server spins */
body.dash-page .modal.closing{animation:db-m-out .2s ease forwards;pointer-events:none}
body.dash-page .modal.closing .sheet{animation:db-sheet-out .2s ease forwards}
@keyframes db-m-out{to{opacity:0}}
@keyframes db-sheet-out{to{opacity:0;transform:translateY(10px) scale(.985)}}
.db-spin{display:inline-block;width:13px;height:13px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.85;animation:hp-spin .7s linear infinite;vertical-align:-2px;margin-right:2px}
@media (prefers-reduced-motion:reduce){.db-spin{animation-duration:2s}.db-add-pane>div,.db-add-skel i{animation:none}}
/* Owner: Add to a client (the guided way, the hand form folded under it) */
.db-add-pane>div{animation:db-fade .22s ease}
.db-add-skel{display:grid;gap:8px}
.db-add-skel i{display:block;height:44px;border-radius:9px;background:linear-gradient(90deg,var(--chrome) 25%,var(--panel-2) 50%,var(--chrome) 75%);background-size:200% 100%;animation:db-shimmer 1.4s linear infinite}
.db-add-skel i:nth-child(2){opacity:.7}.db-add-skel i:nth-child(3){opacity:.45}
.db-add{display:grid;gap:12px;min-width:0}
.db-add-pane>div{display:grid;gap:10px;min-width:0}
.db-add-list{max-height:min(320px,40dvh);overflow:auto}
.db-add-list button.db-li{width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid var(--line)}
.db-add-list button.db-li>svg:last-child{margin-left:auto;flex:none;color:var(--muted)}
.db-add-row{display:flex;gap:8px;min-width:0}
.db-add-row input{flex:1;min-width:0}
.db-add-say{display:grid;gap:8px}
.db-form .db-tiers{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.db-add-acts{justify-content:flex-end}
.db-manual{border-top:1px solid var(--line);padding-top:10px}
.db-manual>summary{cursor:pointer;color:var(--muted);font-size:13px}
.db-manual[open]>summary{margin-bottom:10px}
.db-manual-in{display:grid;gap:10px}
.db-pw-row input{flex:1;min-width:0;font-family:var(--mono,monospace)}
.db-copy{width:100%}
.db-pw-set[hidden]{display:none}
/* Owner: page tabs (Profit | Costs | Books, Sites | Domains...) */
.db-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--chrome);width:max-content;max-width:100%;overflow-x:auto}
.db-tabs a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap}
.db-tabs a:hover{color:var(--text);background:var(--panel)}
.db-tabs a[aria-current]{color:var(--text);background:var(--panel);box-shadow:inset 0 -2px 0 var(--ice)}
.db-tabs em{font-style:normal;font-size:12px;padding:0 7px;border-radius:99px;background:var(--panel-2);color:var(--muted)}
.db-alert.info{border-color:color-mix(in srgb,var(--ice) 50%,var(--line));background:color-mix(in srgb,var(--ice) 6%,var(--chrome))}
.db-alert.info>svg{color:var(--ice)}
.db-alert+.db-alert{margin-top:8px}
/* Costs: what Hostinger charges, month by month; auto-renew switches in tables */
.db-hxb{display:grid;gap:10px}
.db-hxb-months{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;align-items:end;height:90px}
.db-hxb-months span{display:grid;grid-template-rows:1fr auto;justify-items:center;height:100%;gap:3px;min-width:0}
.db-hxb-months i{align-self:end;width:min(16px,70%);height:var(--h);min-height:2px;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--warn) 70%,transparent)}
.db-hxb-months small{font-size:10.5px;color:var(--muted);white-space:nowrap}
@media (max-width:600px){
  .db-hxb-months small{font-size:9.5px}
  .db-hxb-months small em{display:none} /* Oct, not Oct 26: twelve months fit in one row */
  .db-due-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.db-hxb-months small em{font-style:normal}
.switch.db-renew{margin:0}
.switch.db-renew span:empty{display:none}
/* Prices and margins */
.pr-basis{display:grid;gap:10px}
.pr-basis .db-due-sum span{font-size:11.5px;color:var(--muted)}
.pr-knobs{max-width:520px}
.pr-groups{display:grid;gap:16px}
.pr-table input,.pr-table select{width:100%;min-width:0;padding:6px 8px;background:var(--chrome);border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit}
.pr-table td{vertical-align:middle}
.pr-table td:first-child{min-width:150px}
.pr-money{display:inline-flex;align-items:center;gap:3px;justify-content:flex-end;width:100%}
.pr-money input{width:92px;text-align:right}
.pr-money small{color:var(--muted);font-size:11px;margin-right:2px}
.pr-auto{display:inline-grid;justify-items:end;gap:0}
.pr-auto small{font-size:11px;color:var(--muted)}
.pr-low td{background:color-mix(in srgb,var(--warn) 7%,transparent)}
.db-table b.warn{color:var(--warn)}
.pr-quote fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0}
.pr-quote legend{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 4px}
.pr-addons>div{display:flex;flex-wrap:wrap;gap:8px 16px}
.pr-dom-row{display:flex;gap:8px;align-items:center}
.pr-dom-row input{flex:1;min-width:0}
.pr-dom-say:empty{display:none}
.pr-dom-say svg{vertical-align:-2px}
.pr-chk{display:flex;align-items:center;gap:8px;cursor:pointer}
.pr-chk small{color:var(--muted)}
.pr-pay{display:grid;gap:8px}
.pr-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.pr-opt:has(input:checked){border-color:var(--ice);background:color-mix(in srgb,var(--ice) 5%,transparent)}
.pr-opt input{margin-top:3px;flex:none}
.pr-opt span{display:grid;gap:2px}
.pr-opt small{color:var(--muted);font-size:12.5px}
.pr-dep[hidden]{display:none}
.pr-sum{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
/* Total Profit This Year */
.yr{display:grid;gap:16px}
.yr-top{display:grid;gap:10px}
.yr-top>div:first-child{display:grid;gap:2px}
.yr-top small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.yr-big{font-size:clamp(28px,4vw,40px);font-weight:700;font-family:var(--sv-display,inherit);line-height:1.1;background:linear-gradient(90deg,var(--ice),var(--sv-purple,#a855f7));-webkit-background-clip:text;background-clip:text;color:transparent}
.yr-big.neg{background:none;color:var(--danger)}
.yr-top span{color:var(--muted);font-size:13px}
.yr-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.yr-bar i{display:block;width:var(--w);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.yr-bar i.real,.yr-key i.real{background:linear-gradient(90deg,var(--ice),color-mix(in srgb,var(--ice) 60%,var(--sv-purple,#a855f7)))}
.yr-bar i.exp,.yr-key i.exp{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--sv-purple,#a855f7) 55%,transparent) 0 6px,color-mix(in srgb,var(--sv-purple,#a855f7) 25%,transparent) 6px 12px)}
.yr-key{margin:0;display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:12.5px}
.yr-key span{display:inline-flex;align-items:center;gap:6px}
.yr-key i{display:inline-block;width:12px;height:12px;border-radius:3px}
.yr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.yr-col{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--chrome);display:grid;gap:10px;align-content:start}
.yr-col.exp{border-style:dashed}
.yr-col h3{margin:0;font-size:13px;font-weight:600}
.yr-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.yr-nums small{display:block;color:var(--muted);font-size:11.5px}
.yr-nums b{font-size:17px;font-variant-numeric:tabular-nums}
.yr-nums .pos{color:var(--ok)}.yr-nums .neg{color:var(--danger)}
.yr-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px}
.yr-list li{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.yr-list b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.yr-list b.neg{color:var(--muted)}
.yr-note{margin:0}
.yr-match select,.yr-match .dd{max-width:240px;flex:none}
@media (max-width:700px){.yr-cols{grid-template-columns:minmax(0,1fr)}}
/* Pipeline › Hunt */
.hp-hunt textarea{min-height:96px}
.hp-run{display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.hp-run .hp-est{margin:0 auto 0 0}
.spin-dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ice);vertical-align:-1px;animation:hp-spin .7s linear infinite}
@keyframes hp-spin{to{transform:rotate(360deg)}}
.hp-tools{flex-wrap:wrap;margin-bottom:10px}
.hp-tools input{flex:1;min-width:180px}
.hp-tools select,.hp-tools .dd{width:auto;flex:none;padding:8px 10px}
.hp-list .db-chips{margin-bottom:12px}
.hp-rows{display:grid;gap:8px}
.hp-row{border:1px solid var(--line);border-radius:12px;background:var(--chrome);transition:border-color .15s}
.hp-row.open{border-color:color-mix(in srgb,var(--ice) 45%,var(--line))}
.hp-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:12px;padding:10px 12px}
.hp-score{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font-weight:700;font-family:var(--sv-display,inherit);color:var(--ice);border:1px solid color-mix(in srgb,var(--ice) 30%,var(--line));font-size:15px;flex:none}
.hp-score.hot{color:#ff4fd8;border-color:color-mix(in srgb,#ff4fd8 50%,var(--line));box-shadow:0 0 14px -4px #ff4fd8}
.hp-main{display:grid;gap:2px;min-width:0}
.hp-main b{overflow-wrap:anywhere}
.hp-main small{color:var(--muted);font-size:12.5px}
.hp-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.hp-tag{font-size:11px;padding:1px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.hp-tag.red{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line));background:color-mix(in srgb,var(--danger) 8%,transparent)}
.hp-tag.amber{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn) 8%,transparent)}
.hp-tag.green{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--ok) 8%,transparent)}
.hp-phone{display:grid;justify-items:end;font-size:12.5px;white-space:nowrap}
.hp-phone small{display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-family:inherit}
.hp-st,.hp-st+.dd{padding:6px 8px;min-width:120px}
.hp-st+.dd{width:auto;min-height:0}
.hp-st[data-s=queued],.hp-st[data-s=queued]+.dd{color:var(--warn)}.hp-st[data-s=contacted],.hp-st[data-s=contacted]+.dd{color:var(--ice)}.hp-st[data-s=replied],.hp-st[data-s=replied]+.dd{color:#ff4fd8}.hp-st[data-s=deal],.hp-st[data-s=deal]+.dd{color:var(--ok)}.hp-st[data-s=skip],.hp-st[data-s=skip]+.dd{color:var(--muted)}
.hp-tool{display:grid;gap:14px;padding:4px 14px 14px;border-top:1px solid var(--line)}
.hp-sec{display:grid;gap:8px}
.hp-sec .db-mini-h{margin-top:10px}
.hp-links,.hp-email{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hp-email-in{flex:1;min-width:200px;max-width:320px;padding:6px 10px}
.btn.ghost{background:transparent}
.hp-chans{margin:0}
.hp-chans button{display:inline-flex;align-items:center;gap:5px}
.hp-compose{display:grid;gap:8px;margin-top:8px}
.hp-vrow{display:flex;gap:8px;align-items:center}
.hp-vrow select,.hp-vrow input,.hp-vrow .dd{flex:1;min-width:0;max-width:300px;padding:6px 8px}
.hp-compose textarea,.hp-compose input,.hp-notes{width:100%;padding:9px 11px;font:inherit;line-height:1.5}
.hp-subj[hidden]{display:none}
.hp-send,.hp-acts{flex-wrap:wrap}
.hp-more{justify-self:center;margin-top:6px}
.hp-tpls{display:grid;gap:12px}
.hp-tpl{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px}
.hp-tpl input,.hp-tpl textarea{width:100%;padding:7px 9px;font:inherit}
@media (max-width:760px){
  .hp-head{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .hp-phone{grid-column:2;justify-items:start}
  .hp-st,.hp-st+.dd,.hp-open{grid-column:1/-1;width:100%;min-height:40px}
}
/* Hostinger */
.hx-dom{display:grid;gap:12px}
.hx-dns td{vertical-align:middle}
.hx-val{max-width:380px;overflow-wrap:anywhere;font-size:12.5px}
.hx-add{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.hx-ns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}
.hx-ns legend{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hx-ns .note,.hx-ns .db-acts{grid-column:1/-1}
.hx-snaps{margin-top:10px}
.hx-snaps summary{cursor:pointer;color:var(--muted);font-size:13px}
@media (max-width:600px){.hx-ns{grid-template-columns:minmax(0,1fr)}.db-tabs{width:100%}.db-tabs a{flex:1;justify-content:center}}
.yr-line details{width:100%}
.yr-line summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;list-style:none}
.yr-line summary::-webkit-details-marker{display:none}
.yr-line summary span::before{content:"▸";display:inline-block;width:12px;color:var(--muted);transition:transform .15s}
.yr-line details[open] summary span::before{transform:rotate(90deg)}
.yr-line ul{list-style:none;margin:4px 0 8px 12px;padding:0 0 0 8px;border-left:1px solid var(--line);display:grid;gap:3px;font-size:12.5px}
.yr-line ul li{display:flex;justify-content:space-between;gap:10px}
.yr-line ul b{font-weight:500;color:var(--muted)}
.yr-line ul small{color:var(--muted)}
/* Owner: pages grouped as tabs (Clients | Accounts, Profit | Costs | Prices, Sites | Domains, Business | Server) */
.db-head+.db-tabs{margin-top:-4px}
.db-site-tools{flex-wrap:wrap;align-items:center;gap:10px}
.db-site-tools input[type=search]{flex:1 1 220px;max-width:none}
.db-site-tools .db-chips{flex:1 1 auto}
/* phones: tables become stacked rows, so each value says which column it is (tables made by D.table) */
@media (max-width:600px){
  .db-table td:has(>.db-cell):not(:first-child){display:flex;gap:12px;align-items:baseline;justify-content:space-between}
  .db-table td:has(>.db-cell):not(:first-child):not([data-l=""])::before{content:attr(data-l);flex:none;font-size:12px;color:var(--muted)}
  .db-table td:not(:first-child)>.db-cell{text-align:right;min-width:0}
  .db-table td[data-l=""]>.db-cell{text-align:left;width:100%}
  .db-table td[data-l=""] .db-row-acts{justify-content:flex-start}
  .db-table td:first-child{padding-bottom:6px}
  .db-table td:has(>.db-cell:empty){display:none}
  .db-site-tools .db-chips{flex-basis:100%}
}
a.db-brand{display:block;text-decoration:none;border-radius:9px}
a.db-brand:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
/* Owner: autopay clients (their recurring check/cash payments record themselves) */
.db-autopay{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;font-size:11px;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:99px;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line))}
.db-autopay-row{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:4px}
.db-autopay-row .switch{margin:0}
/* Owner: Back, above the heading on a client, an invoice or a request */
.db-back{justify-self:start;display:inline-flex;align-items:center;gap:4px;margin:-8px 0 -10px -6px;padding:6px 10px 6px 6px;border-radius:8px;color:var(--muted);font-size:13.5px;font-weight:600;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-back:hover{color:var(--text);background:var(--panel-2)}
.db-back:focus-visible{outline:2px solid var(--ice);outline-offset:1px}
.db-back svg{flex:none}
.db-tabs em.bad{background:color-mix(in srgb,var(--danger) 22%,transparent);color:var(--danger)}

/* Ideas and the roadmap (js/dash/roadmap.js) */
.ideas-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.ideas-bar .db-chips{flex:1 1 auto}
.ideas-q{flex:0 1 260px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--chrome);color:var(--text);font:inherit}
.ideas-picked{position:sticky;top:8px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--ice) 50%,var(--line));border-radius:12px;background:var(--panel);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.ideas-list{display:grid;gap:10px}
.idea{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--chrome)}
.idea.s-new{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.idea.s-declined{opacity:.7}
.idea-pick{flex:none;padding-top:2px}
.idea-pick input{width:18px;height:18px}
.idea-b{flex:1;min-width:0;display:grid;gap:6px}
.idea-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.idea-when{margin-left:auto;color:var(--muted);font-size:12px}
.idea-item{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ice);text-decoration:none}
.idea-b>p{margin:0;overflow-wrap:anywhere;line-height:1.5}
.idea-b>small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.idea-note{font-size:12.5px;color:var(--muted);padding:6px 8px;border-radius:8px;background:var(--panel-2)}
.idea .db-acts{flex-wrap:wrap;gap:6px}
.ideas-pick-items{display:grid;margin-top:8px}
.road-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:1100px){.road-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.road-board{grid-template-columns:minmax(0,1fr)}}
.road-col{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);display:grid;gap:8px;min-width:0}
.road-col h3{margin:0;font-size:14px;display:flex;align-items:center;gap:6px}
.road-col h3 em{font-style:normal;font-size:12px;color:var(--muted)}
.road-col>small{color:var(--muted);font-size:12px;margin-top:-4px}
.road-items{display:grid;gap:8px}
.road-item{display:grid;gap:4px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--chrome);color:var(--text);font:inherit;cursor:pointer;min-width:0}
.road-item:hover{border-color:color-mix(in srgb,var(--ice) 55%,var(--line))}
.road-item.private{border-style:dashed}
.road-item span{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.road-item small{color:var(--muted);font-size:12px}
.road-check{display:flex;align-items:center;gap:8px;font-size:13.5px;grid-column:1/-1}
.road-check input{width:16px;height:16px}
.road-check[hidden]{display:none}
.road-asks{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.road-asks>small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.road-asks ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;font-size:13px}
.road-asks li small{color:var(--muted)}

/* Books (Money › Books, js/dash/books.js) */
.bk-pct{display:inline-flex;align-items:center;gap:4px}
.bk-pct input{width:56px;padding:2px 6px;font:inherit}
.bk-tax .bk-next{background:color-mix(in srgb,var(--ice,#00f0ff) 8%,transparent);border-radius:8px}
.bk-months .bk-q td{font-weight:600;border-top:1px solid var(--line);background:color-mix(in srgb,var(--line) 35%,transparent)}
.bk-months .bk-future td{opacity:.5}
.bk-months tfoot td{font-weight:700;border-top:2px solid var(--line)}
.bk-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:700px){.bk-cats{grid-template-columns:minmax(0,1fr)}}
.bk-list .bk-row .db-when b{white-space:nowrap}
/* four short columns fit a phone: the month table stays a table there */
@media (max-width:600px){
  .db-table.bk-months{display:table;width:100%;font-size:12.5px}
  .db-table.bk-months thead{display:table-header-group}
  .db-table.bk-months tbody{display:table-row-group}
  .db-table.bk-months tfoot{display:table-footer-group}
  .db-table.bk-months tr{display:table-row;padding:0}
  .db-table.bk-months th,.db-table.bk-months td{display:table-cell;width:auto;padding:6px 6px;white-space:nowrap}
  .db-table.bk-months td.r,.db-table.bk-months th.r{text-align:right!important}
}

/* Builder health (#health, js/dash/health.js) */
.hl-top{display:flex;align-items:center;gap:14px}
.hl-top b{display:block;font-size:17px}
.hl-top small{color:var(--muted)}
.hl-dot{width:14px;height:14px;border-radius:50%;flex:none;background:var(--muted)}
.hl-top.ok .hl-dot{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.hl-top.warn .hl-dot{background:var(--warn);box-shadow:0 0 12px var(--warn)}
.hl-top.fail .hl-dot{background:var(--danger);box-shadow:0 0 12px var(--danger)}
.hl-list .db-li>svg{flex:none}
.hl-ok>svg{color:var(--ok)}.hl-warn>svg{color:var(--warn)}.hl-fail>svg{color:var(--danger)}.hl-skip>svg{color:var(--muted)}
.hl-list .db-when{display:grid;justify-items:end;gap:2px}


/* ============================================================
   Waiting: a thin neon bar under the top while the server works,
   and loading lines with a spinner and a shimmer
   ============================================================ */
.db-busy{position:fixed;left:0;right:0;top:0;height:3px;z-index:300;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .25s}
.db-busy.on{opacity:1}
.db-busy::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:3px;background:linear-gradient(90deg,transparent,var(--ice),color-mix(in srgb,var(--violet,var(--ice)) 80%,var(--ice)),transparent);box-shadow:0 0 12px var(--ice);animation:db-busy 1.1s ease-in-out infinite}
@keyframes db-busy{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
p.db-loading,.db-empty.db-loading,.note.db-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:22px 12px;margin:0;color:var(--muted);text-align:center;position:relative}
p.db-loading::before,.db-empty.db-loading::before,.note.db-loading::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--ice);border-right-color:transparent;animation:hp-spin .7s linear infinite}
.note.db-loading{justify-content:flex-start;padding:4px 0}
.db-skel-lines{display:grid;gap:8px;margin-top:4px}
.db-skel-lines i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--panel-2) 25%,color-mix(in srgb,var(--ice) 14%,var(--panel-2)) 50%,var(--panel-2) 75%);background-size:200% 100%;animation:db-shimmer 1.4s linear infinite}
.db-skel-lines i:nth-child(2){width:80%}.db-skel-lines i:nth-child(3){width:60%}
b.db-wait{display:block;width:min(70%,160px);min-width:60px;height:1.1em;border-radius:6px;color:transparent!important;text-shadow:none!important;background:linear-gradient(90deg,var(--panel-2) 25%,color-mix(in srgb,var(--ice) 14%,var(--panel-2)) 50%,var(--panel-2) 75%)!important;background-size:200% 100%!important;animation:db-shimmer 1.4s linear infinite}
@media (prefers-reduced-motion:reduce){.db-busy::before{animation-duration:3s}p.db-loading::before,.db-empty.db-loading::before,.note.db-loading::before{animation-duration:2s}.db-skel-lines i,b.db-wait,.db-skel{animation:none}}
/* phones: Coming in, Payments and Clients share one row */
@media (max-width:600px){.db-due-sum{grid-template-columns:repeat(auto-fit,minmax(min(100%,84px),1fr))}.db-due-sum>div{padding:7px 9px;min-width:0}.db-due-sum b{font-size:clamp(13px,3.9vw,15px);white-space:nowrap;overflow-wrap:normal}
  /* Books at a glance: two to a row (amounts never break), the tax share's box on its own line under its amount */
  .db-due-sum.bk-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-due-sum.bk-sum b{font-size:17px}
  .db-due-sum.bk-sum span{font-size:12.5px}
  .bk-pct{flex-wrap:nowrap;white-space:nowrap}}

/* ============================================================
   Owners: five places (Today, Clients, Money, Find clients, Settings).
   Phones and tablets get them as a tab bar along the bottom instead of
   the menu button; Quick add sits above it on every page.
   ============================================================ */
.db-tabbar{display:none}
@media (max-width:900px){
  .dash.has-bar .db-side>.db-menu,.dash.has-bar .db-side>.db-nav{display:none!important}
  .dash.has-bar .db-main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  .db-tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:40;padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:var(--chrome);border-top:1px solid var(--line)}
  .db-tabbar a{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-height:54px;padding:6px 2px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;-webkit-tap-highlight-color:transparent}
  .db-tabbar a[aria-current]{color:var(--ice)}
  .db-tabbar a:active{background:var(--panel)}
  .db-tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .db-tabbar i{position:absolute;top:3px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--danger);color:#fff;font-style:normal;font-size:10px;font-weight:700;line-height:17px;text-align:center}
}
.db-fab{position:fixed;right:24px;bottom:24px;z-index:45}
.db-fab-btn{display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;background:var(--ice);color:var(--on-ice);box-shadow:0 12px 28px -10px rgba(0,0,0,.65)}
.db-fab-btn svg{transition:transform .2s ease}
.db-fab.open .db-fab-btn svg{transform:rotate(45deg)}
.db-fab-btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.db-fab-menu{position:absolute;right:0;bottom:66px;display:grid;gap:2px;min-width:210px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.4);animation:db-rise .18s ease both}
.db-fab-menu[hidden]{display:none}
.db-fab-menu button{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:0;border-radius:9px;background:none;color:var(--text);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.db-fab-menu button svg{color:var(--ice)}
.db-fab-menu button:is(:hover,:focus-visible){outline:none;background:var(--panel-2)}
@media (max-width:900px){.db-fab{right:14px;bottom:calc(74px + env(safe-area-inset-bottom))}.db-fab-btn{width:52px;height:52px}}
@media print{.db-fab,.db-tabbar{display:none!important}}
@media (prefers-reduced-motion:reduce){.db-fab-menu{animation:none}.db-fab-btn svg{transition:none}}
/* Log a payment */
.db-pay-pick .db-li{cursor:pointer;border-radius:10px;padding:10px 8px}
.db-pay-pick .db-li:is(:hover,:focus-visible){background:var(--panel-2);outline:none}
.db-pay-amt{margin-left:auto;flex:none;font-variant-numeric:tabular-nums}
.db-pay-amt.late{color:var(--danger)}
/* typed in place: a client's contact details, and a service's price */
.db-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.db-inl{display:grid;gap:4px;min-width:0}
.db-inl:nth-child(5),.db-inl:nth-child(6){grid-column:1/-1}
.db-inl>span{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.db-inl :is(input,textarea){width:100%;min-width:0;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:var(--panel-2);color:var(--text);font:inherit;resize:vertical;transition:border-color .15s}
.db-inl :is(input,textarea):hover{border-color:var(--line)}
.db-inl :is(input,textarea):focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px color-mix(in srgb,var(--ice) 15%,transparent)}
.db-inl-ok{font-style:normal;font-weight:500}
.db-inl-ok.ok{color:var(--ok)}.db-inl-ok.bad{color:var(--danger)}
.db-inl-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.db-inl-links:empty{display:none}
.db-price-edit{display:inline-flex;align-items:center;gap:5px;width:fit-content;margin-top:5px;padding:3px 10px;border:1px dashed color-mix(in srgb,var(--ice) 45%,var(--line));border-radius:99px;background:none;color:var(--ice);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.db-price-edit:is(:hover,:focus-visible){outline:none;border-style:solid;background:color-mix(in srgb,var(--ice) 8%,transparent)}
.db-li input.db-price-in,.db-price-in{width:130px!important;max-width:100%;flex:none;justify-self:start;margin-top:5px;padding:5px 9px;border:1px solid var(--ice);border-radius:9px;background:var(--panel-2);color:var(--text);font:inherit;font-size:13px}
@media (max-width:600px){.db-inline{grid-template-columns:minmax(0,1fr)}.db-inl:nth-child(n){grid-column:auto}.db-price-edit{min-height:36px}}
@media (max-width:600px){.db-pay-pick .db-li{padding:10px 8px 10px 40px}.db-pay-pick .db-li>svg:first-child{left:10px}}
/* a Needs a look line with its own button (a site that is not answering: Stop checking) */
.db-li-act .db-li-go{flex:1;min-width:0;color:inherit;text-decoration:none}
.db-li-act .db-li-go:hover b{text-decoration:underline}
.db-li-act>.btn{flex:none}
@media (max-width:600px){.db-li-act>.btn{margin-left:0}}
.db-due-sum.bk-sum span{display:block;font-size:12px;color:var(--muted);line-height:1.35}