/* ==========================================================================
   TeamOnHand — app.css
   Application shell + component system for the customer / admin / team app.
   Light theme is the default; [data-theme="dark"] overrides the tokens only.
   Matches the console/paper brand system used by the inline-styled pages.
   ========================================================================== */

/* ------------------------------ Tokens ---------------------------------- */
:root{
  --paper:#F4F6F9; --surface:#FFFFFF; --surface-2:#F8FAFC;
  --border:#E4E7EB; --border-2:#EDF0F4;
  --heading:#122339; --navy:#1E3A5F;
  --text:#334155; --slate-500:#475569; --slate-400:#5F6E82; --muted:#EDF1F5;
  --brand-1:#FF3D14; --brand-2:#FF8A1E; --brand-3:#FFC21E; --brand-link:#C2410C;
  --brand-ink:#1b1206;
  --brand-grad:linear-gradient(135deg,#FF3D14,#FF8A1E 55%,#FFC21E);
  --brand-grad-hover:linear-gradient(135deg,#EE350F,#F07D14 55%,#F0AC12);

  --sidebar-bg:#122339; --sidebar-link:#A9B8CB; --sidebar-active:rgba(255,255,255,.08);
  --sidebar-head:#8A9AAF; --sidebar-hair:rgba(255,255,255,.10);

  --green-600:#047857; --green-bg:#ECFDF5; --green-bd:#A7F3D0;
  --blue-600:#1D4ED8; --blue-bg:#EFF6FF; --blue-bd:#BFDBFE;
  --purple-600:#6D28D9; --purple-bg:#F5F3FF; --purple-bd:#DDD6FE;
  --amber-600:#B45309; --amber-bg:#FFFBEB; --amber-bd:#FDE68A;
  --red-600:#B91C1C; --red-bg:#FEF2F2; --red-bd:#FECACA;

  --shadow-sm:0 1px 2px rgba(16,32,52,.05);
  --shadow-md:0 12px 30px rgba(30,58,95,.07);
  --radius:8px; --radius-lg:14px;
  --mono:"Fira Code",ui-monospace,Menlo,monospace;
  --sans:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme="dark"]{
  --paper:#0F1C2E; --surface:#16293F; --surface-2:#12253A;
  --border:rgba(255,255,255,.12); --border-2:rgba(255,255,255,.07);
  --heading:#F4F6F9; --navy:#E6EDF5;
  --text:#D5DEE9; --slate-500:#A9B8CB; --slate-400:#8E9CB0; --muted:#1B3350;
  --brand-link:#FF9A3D;
  --sidebar-bg:#0C1725; --sidebar-active:rgba(255,255,255,.10); --sidebar-hair:rgba(255,255,255,.08);
  --green-bg:rgba(16,185,129,.14); --green-bd:rgba(16,185,129,.34);
  --blue-bg:rgba(59,130,246,.15); --blue-bd:rgba(59,130,246,.34);
  --purple-bg:rgba(124,58,237,.18); --purple-bd:rgba(124,58,237,.4);
  --amber-bg:rgba(245,158,11,.15); --amber-bd:rgba(245,158,11,.36);
  --red-bg:rgba(248,113,113,.14); --red-bd:rgba(248,113,113,.36);
  --green-600:#34D399; --blue-600:#60A5FA; --purple-600:#A78BFA; --amber-600:#FBBF24; --red-600:#F87171;
  --shadow-md:0 14px 34px rgba(0,0,0,.35);
}

/* ------------------------------ Base ------------------------------------ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--heading); letter-spacing:-.02em; margin:0}
a{color:var(--brand-link); text-decoration:none}
a:hover{color:var(--brand-2)}
button{font-family:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px; border-radius:4px}
.mono{font-family:var(--mono)}
.grow{flex:1 1 auto}
.b{color:var(--text)}
.sub{color:var(--slate-500)}
.full{grid-column:1 / -1}
.w40{width:40%}.w60{width:60%}.w80{width:80%}

.skip-link{
  position:absolute; left:12px; top:-48px; z-index:100;
  background:var(--heading); color:#fff; padding:9px 14px; border-radius:8px;
  font:600 13px/1 var(--sans); transition:top .15s;
}
.skip-link:focus{top:12px; color:#fff}

/* ------------------------- Application shell ---------------------------- */
.app{display:grid; grid-template-columns:236px 1fr; min-height:100vh}

.sidebar{
  background:var(--sidebar-bg); display:flex; flex-direction:column;
  padding:0 0 18px; min-height:100vh; position:sticky; top:0;
}
.sb-brand{
  display:flex; align-items:center; gap:10px; padding:20px;
  border-bottom:1px solid var(--sidebar-hair);
  color:#fff; font-weight:700; font-size:16px; letter-spacing:-.01em;
}
.sb-nav{display:flex; flex-direction:column; padding:14px 10px; gap:2px}
.sb-link{
  display:flex; align-items:center; gap:11px; padding:11px 12px;
  border-radius:8px; color:var(--sidebar-link); font-size:14.5px; font-weight:500;
  border-left:2px solid transparent;
}
.sb-link svg{flex:none; opacity:.9}
.sb-link:hover{background:rgba(255,255,255,.05); color:#fff}
.sb-link.active{
  background:var(--sidebar-active); color:#fff; font-weight:600;
  border-left-color:var(--brand-3);
}
.sb-section{
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--sidebar-head); padding:18px 12px 8px;
}
.sb-sub{font-size:12.5px; color:var(--sidebar-link); padding:2px 12px 6px}
.sb-badge{
  margin-left:auto; font:600 11px/1 var(--mono);
  background:var(--brand-link); color:#fff; padding:4px 7px; border-radius:20px;
}
.sb-aud,.sb-cont,.sb-seo{margin-left:auto; font:600 10px/1 var(--mono); color:var(--brand-3)}
.sb-foot{
  margin-top:auto; display:flex; align-items:center; gap:11px;
  padding:16px 18px 0; border-top:1px solid var(--sidebar-hair);
}
.avatar{
  width:34px; height:34px; flex:none; border-radius:50%;
  background:#1B3350; color:var(--brand-3);
  display:flex; align-items:center; justify-content:center;
  font:600 12.5px/1 var(--mono);
}
.who{min-width:0}
.nm{font-size:13.5px; font-weight:600; color:#F4F6F9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.co{font-size:12px; color:#7B8A9E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.out{margin-left:auto; color:#7B8A9E; display:flex}
.out:hover{color:#fff}

.overlay{display:none; position:fixed; inset:0; background:rgba(9,17,29,.5); z-index:40}

.main{display:flex; flex-direction:column; min-width:0; background:var(--paper)}
.topbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  padding:11px 28px; min-height:60px;
  background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:19px}
.icon-btn{
  width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  color:var(--slate-500); cursor:pointer; position:relative;
}
.icon-btn:hover{border-color:var(--slate-400); color:var(--heading)}
.menu-btn{display:none}
.nd{position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%;
  background:var(--brand-link); border:1.5px solid var(--surface)}

/* theme toggle icon swap */
.theme-btn .ic-sun{display:none}
:root[data-theme="dark"] .theme-btn .ic-moon{display:none}
:root[data-theme="dark"] .theme-btn .ic-sun{display:inline}

.content{padding:26px 28px 40px; display:flex; flex-direction:column; gap:22px; max-width:1200px; width:100%}
.page-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px}
.ph-text h2{font-size:30px; line-height:1.08}
.ph-text p{margin:8px 0 0; color:var(--slate-500); font-size:15px; max-width:70ch}
.ph-actions{display:flex; gap:10px; flex-wrap:wrap}
.backlink{display:inline-flex; align-items:center; gap:7px; font:500 12px/1 var(--mono);
  letter-spacing:.04em; color:var(--slate-500)}

/* ------------------------------- Auth ----------------------------------- */
.auth-wrap{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:40px 20px; gap:8px; position:relative;
}
.auth-theme{position:absolute; top:20px; right:20px}
.auth-brand{
  display:flex; align-items:center; gap:10px; color:var(--heading);
  font-weight:700; font-size:19px; letter-spacing:-.01em; margin-bottom:6px;
}
.auth-brand:hover{color:var(--heading)}
.auth-card{
  width:100%; max-width:420px; background:var(--surface);
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-md);
  padding:32px; text-align:left;
}
.auth-card h1{font-size:25px; margin-bottom:6px}
.auth-card .sub{margin:0 0 20px; font-size:14.5px}
.auth-form{display:flex; flex-direction:column; gap:16px}
.auth-foot{margin-top:18px; font-size:14px; color:var(--slate-500); text-align:center}
.auth-note{max-width:420px; text-align:center; color:var(--slate-400); font-size:12.5px; line-height:1.6; margin:10px 0 0}
.checkline{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--slate-500)}
.checkline input{margin-top:3px}
.auth-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.auth-row a{font-size:13px; font-weight:500}

/* ---------------------------- Error pages -------------------------------- */
.err-wrap{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:40px 24px; gap:6px;
}
.err-wrap img{margin-bottom:10px}
.err-code{font:600 58px/1 var(--mono); letter-spacing:-.04em; color:var(--brand-link); margin-bottom:4px}
.err-wrap h1{font-size:30px; margin-top:2px}
.err-wrap h2{font-size:22px; margin-top:4px}
.err-wrap p{color:var(--slate-500); max-width:52ch; margin:12px 0 20px}
.err-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.err-id{margin-top:16px; font:500 12px/1 var(--mono); color:var(--slate-400)}

/* ------------------------------ Panels ---------------------------------- */
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; margin-bottom:22px;
}
.panel-head{
  display:flex; align-items:center; gap:12px; padding:15px 22px;
  border-bottom:1px solid var(--border);
}
.panel-head h3{font-size:14px; letter-spacing:.04em; text-transform:uppercase; font-family:var(--mono); color:var(--heading)}
.count{margin-left:auto; font:500 11px/1 var(--mono); color:var(--slate-500)}
.count-alt{color:var(--slate-400); text-transform:none; letter-spacing:0}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px}
.cols2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px}

.panel-fail,.empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:36px 24px; gap:4px;
}
.empty h3,.panel-fail h3{font-size:17px; text-transform:none; letter-spacing:-.01em; font-family:var(--sans)}
.empty p,.panel-fail p{color:var(--slate-500); font-size:14px; margin:6px 0 0; max-width:44ch}
.ei{
  width:48px; height:48px; border-radius:12px; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--muted); color:var(--slate-400);
}

.form-banner{
  display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:10px;
  background:var(--red-bg); border:1px solid var(--red-bd); color:var(--red-600); font-size:13.5px;
}

/* ---------------------------- Tables ------------------------------------ */
.table-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{
  text-align:left; padding:12px 16px; border-bottom:1px solid var(--border);
  font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--slate-500);
  white-space:nowrap;
}
.tbl td{padding:14px 16px; border-bottom:1px solid var(--border-2); color:var(--text); vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.tname{font-weight:600; color:var(--heading)}

/* ------------------------------ Buttons --------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600; padding:11px 17px; border-radius:8px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap; line-height:1;
}
.btn-sm{padding:9px 14px; font-size:13px}
.btn-primary{background:var(--brand-grad); color:var(--brand-ink); border:0}
.btn-primary:hover{background:var(--brand-grad-hover); color:var(--brand-ink)}
.btn-navy{background:var(--heading); color:#fff}
.btn-navy:hover{background:#1E3A5F; color:#fff}
.btn-ghost{background:var(--surface); color:var(--navy); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--slate-400); color:var(--heading)}

/* ------------------------------- Pills ---------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font:600 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:6px; border:1px solid transparent; white-space:nowrap;
}
.pill-paid,.pill-done,.pill-recur{color:var(--green-600); background:var(--green-bg); border-color:var(--green-bd)}
.pill-prog{color:var(--blue-600); background:var(--blue-bg); border-color:var(--blue-bd)}
.pill-quoted{color:var(--purple-600); background:var(--purple-bg); border-color:var(--purple-bd)}
.pill-failed{color:var(--red-600); background:var(--red-bg); border-color:var(--red-bd)}
.hdot{width:8px; height:8px; border-radius:50%; background:var(--slate-400); flex:none}
.card-chip{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:14px; font-weight:600; color:var(--heading);
}
/* filter chips (button group over .filterable rows) */
.filters{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--slate-500);
  background:var(--surface); border:1px solid var(--border);
  padding:8px 13px; border-radius:20px;
}
.chip:hover{border-color:var(--slate-400); color:var(--heading)}
.chip.on{background:var(--heading); border-color:var(--heading); color:var(--surface)}
.chip .cnt{font-family:var(--mono); font-size:11px; opacity:.75}
.chip.on .cnt{opacity:.9}

/* segment bars (project stage strips) */
.seg{display:inline-flex; align-items:flex-end; padding:0 0 4px 5px; height:28px; border-radius:4px;
  font:500 9.5px/1 var(--mono); color:var(--slate-500); background:var(--muted); overflow:hidden}
.seg-done{background:var(--green-600); color:#fff}
.seg-sched{background:var(--muted); color:var(--slate-500)}

/* ------------------------------ Forms ----------------------------------- */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; font-weight:600; color:var(--heading)}
.input,.select{
  width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:9px;
  background:var(--surface); color:var(--heading); font-family:inherit; font-size:14.5px;
}
.input::placeholder{color:var(--slate-400)}
.input:focus,.select:focus{outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(255,138,30,.16)}
.input.mono{font-family:var(--mono)}
.hint{font-size:12.5px; color:var(--slate-400)}
.ferr{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--red-600)}
.ferr[hidden]{display:none}
.field.err .input,.field.err .select{border-color:var(--red-600); box-shadow:0 0 0 3px var(--red-bg)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-grid .full{grid-column:1 / -1}

/* toggle switch */
.switch{position:relative; display:inline-block; width:42px; height:24px; flex:none}
.switch input{opacity:0; width:0; height:0}
.track2{position:absolute; inset:0; background:var(--muted); border:1px solid var(--border);
  border-radius:20px; transition:.18s; cursor:pointer}
.knob{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm); transition:.18s}
.switch input:checked + .track2{background:var(--green-600); border-color:var(--green-600)}
.switch input:checked + .track2 .knob{transform:translateX(18px)}
.switchrow{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border-2)}

/* ------------------------- Money / list rows ---------------------------- */
.svc{font-size:15px; font-weight:600; color:var(--heading)}
.amt{font-family:var(--mono); font-weight:700; color:var(--heading); letter-spacing:-.02em}
.per{font-size:12.5px; color:var(--slate-500)}
.li{flex:none; display:flex; align-items:center; justify-content:center}
.lt{min-width:0}
.lrow{display:flex; align-items:center; gap:14px; padding:14px 22px; border-bottom:1px solid var(--border-2)}
.lrow:last-child{border-bottom:0}
.hrow{display:flex; align-items:center; gap:12px; padding:15px 22px; border-bottom:1px solid var(--border)}
.pay-card{display:flex; align-items:center; gap:14px; padding:18px 22px}
.link-a{color:var(--brand-link); font-weight:500; text-decoration:none; border-bottom:1px solid transparent}
.link-a:hover{border-bottom-color:currentColor}
.stat{display:flex; flex-direction:column; gap:3px}
.stat .num{font-size:26px; font-weight:700; color:var(--heading)}

/* --------------------------- Skeletons ---------------------------------- */
@keyframes sk-shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.sk{
  background:linear-gradient(90deg,var(--muted) 0px, color-mix(in srgb,var(--muted) 60%, #fff) 40px, var(--muted) 80px);
  background-size:200px 100%; animation:sk-shimmer 1.2s ease-in-out infinite; border-radius:6px;
}
.sk-line{height:12px; border-radius:6px}
.sk-pill{height:22px; width:70px; border-radius:20px}
.sk-num{height:34px; width:90px; border-radius:8px}
.sk-block{height:110px; border-radius:10px}
.sk-circle{width:40px; height:40px; border-radius:50%; flex:none}

/* --------------------------- Tooltips ----------------------------------- */
.htip-rich{position:relative; display:inline-flex; cursor:help; border-bottom:1px dotted var(--slate-400)}
.tip-content{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:260px; background:var(--heading); color:#fff;
  padding:10px 12px; border-radius:8px; font-size:12.5px; line-height:1.5;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transition:.14s; z-index:30;
}
.htip-rich:hover .tip-content,.htip-rich:focus-within .tip-content{opacity:1; visibility:visible}
.htm{font-weight:600; display:block}
.hsub{display:block; margin-top:3px; color:#C7D2DE}
.q-hint{font-size:12.5px; color:var(--slate-400)}
.q-line{color:var(--slate-500); font-size:13.5px}

/* --------------------------- Comments ----------------------------------- */
.comment{display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--border-2)}
.cbody{min-width:0; flex:1}
.cwho{font-weight:600; color:var(--heading); font-size:14px}
.cts{font:500 11px/1 var(--mono); color:var(--slate-400); margin-left:6px}
.ctext{margin:6px 0 0; font-size:14px; color:var(--text)}

/* ------------------------ Interactive extras ---------------------------- */
/* stage segments — waiting/gate state */
.seg-wait{background:var(--brand-link); color:#fff}

/* action-queue rows */
.action-row{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:18px 22px; border-bottom:1px solid var(--border-2)}
.action-row:last-child{border-bottom:0}
.filterable[hidden]{display:none}

/* toasts (window.dlToast + [data-toast]) */
.toast-wrap{position:fixed; right:20px; bottom:20px; z-index:80; display:flex; flex-direction:column; gap:10px}
.toast{
  background:#0F1C2E; color:#F4F6F9; border:1px solid rgba(255,255,255,.14);
  padding:12px 16px; border-radius:10px; box-shadow:var(--shadow-md); font-size:14px;
  max-width:340px; opacity:0; transform:translateY(10px); transition:.22s;
}
.toast.show{opacity:1; transform:none}

/* floating tooltip ([data-tip]) */
.tip-float{
  position:absolute; z-index:90; pointer-events:none; display:none;
  background:#0F1C2E; color:#fff; font-size:12.5px; line-height:1.4;
  padding:7px 10px; border-radius:7px; max-width:240px; box-shadow:var(--shadow-md);
  opacity:0; transition:opacity .12s;
}
.tip-float.show{opacity:1}

/* modal system (order.html service modal + generic [data-modal]) */
body.modal-open{overflow:hidden}
.modal-backdrop{
  position:fixed; inset:0; z-index:70; display:none; padding:24px;
  align-items:center; justify-content:center;
  background:rgba(9,17,29,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.modal-backdrop.open{display:flex}
.modal{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-md); width:100%; max-width:540px; max-height:88vh; overflow:auto;
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px 14px}
.mtitle{display:flex; flex-direction:column; gap:9px}
.mtitle h3{font-size:20px}
.mbadge{
  display:inline-block; align-self:flex-start; font:600 10px/1 var(--mono);
  letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; border-radius:6px;
  background:var(--muted); color:var(--slate-500);
}
.modal-close{
  width:34px; height:34px; flex:none; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--slate-500); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{border-color:var(--slate-400); color:var(--heading)}
.modal-body{padding:0 22px 8px}
.mdesc{color:var(--slate-500); font-size:14.5px; margin:0}
.m-label{font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate-500); margin:18px 0 9px}
.feat{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.feat li{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--text)}
.feat li svg{color:var(--green-600); flex:none; margin-top:2px}
.addon-card{
  display:flex; gap:12px; align-items:flex-start; padding:12px 14px; margin-top:8px;
  border:1px solid var(--border); border-radius:10px; cursor:pointer;
}
.addon-card:hover{border-color:var(--slate-400)}
.addon-card.sel{border-color:var(--brand-2); background:var(--amber-bg)}
.acheck{
  width:20px; height:20px; flex:none; margin-top:1px; border:1px solid var(--border);
  border-radius:6px; display:flex; align-items:center; justify-content:center; color:transparent;
}
.addon-card.sel .acheck{background:var(--green-600); border-color:var(--green-600); color:#fff}
.an{font-weight:600; color:var(--heading); font-size:14px}
.ap{color:var(--green-600); font-family:var(--mono); font-size:13px; margin-left:6px}
.ad{font-size:13px; color:var(--slate-500); margin-top:2px}
.modal-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 22px; border-top:1px solid var(--border); position:sticky; bottom:0;
  background:var(--surface);
}
.price-sum{display:flex; flex-direction:column; gap:2px}
.brk{font:500 12px/1.4 var(--mono); color:var(--slate-500)}
.total{font:700 22px/1 var(--mono); color:var(--heading); letter-spacing:-.02em}
.btn-lg{padding:13px 22px; font-size:15px}

/* --------------------------- Responsive --------------------------------- */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; width:236px; z-index:50;
    transform:translateX(-100%); transition:transform .2s ease;
  }
  .sidebar.open{transform:none}
  .app.nav-open .overlay{display:block}
  .menu-btn{display:flex}
  .topbar{padding:11px 18px}
  .content{padding:22px 18px 34px}
}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .ph-text h2{font-size:25px}
  .auth-card{padding:24px}
}

/* Success variant of the form banner (account messages: "Email confirmed", "Password changed"). */
.form-banner.ok{background:var(--green-bg); border-color:var(--green-bd); color:var(--green-600)}
.auth-card.account-card{max-width:640px}

/* ------------------------------ Ordering -------------------------------- */
.auth-card.order-card{max-width:680px}
.order-group{font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--slate-500); margin:22px 0 8px}
.order-list{border:1px solid var(--border); border-radius:12px; overflow:hidden}
.order-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 16px; border-bottom:1px solid var(--border-2); color:var(--text)}
.order-row:last-child{border-bottom:0}
.order-row:hover{background:var(--surface-2); color:var(--text)}
.order-row strong{display:block; color:var(--heading); font-size:15px}
.order-row-sub{display:block; font-size:13px; color:var(--slate-500); margin-top:3px}
.order-row-price{font:600 16px/1 var(--mono); color:var(--heading); white-space:nowrap}
.order-row-price small{font:400 11.5px var(--sans); color:var(--slate-500)}
.order-set{border:1px solid var(--border); border-radius:12px; padding:14px 16px 16px; margin:0; display:flex; flex-direction:column; gap:10px; min-width:0}
.order-set.err{border-color:var(--red-600)}
.order-set legend{font-size:13px; font-weight:600; color:var(--heading); padding:0 6px}
.order-set legend small{font-weight:400; color:var(--slate-500)}
.order-pick{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--text); cursor:pointer}
.order-pick input{margin-top:4px; flex:none}
.order-pick > span:first-of-type{flex:1; min-width:0}
.order-pick small{display:block; font-size:12.5px; color:var(--slate-500); margin-top:2px; line-height:1.5}
.order-pick-price{font:600 14px/1.5 var(--mono); color:var(--heading); white-space:nowrap}
.order-suggest{font-size:13.5px; color:var(--slate-500); margin:0; line-height:1.55}
.order-total{display:flex; justify-content:space-between; align-items:baseline; padding:14px 2px 2px; border-top:1px solid var(--border); font-size:15px}
.order-total strong{font:600 24px/1 var(--mono); color:var(--heading)}
.order-summary{border:1px solid var(--border); border-radius:12px; margin-bottom:16px}
.order-summary .num{text-align:right; font-family:var(--mono); white-space:nowrap}
.order-summary tfoot th{text-align:left; padding:14px 16px; font-size:15px; color:var(--heading); border-top:1px solid var(--border)}
.order-summary tfoot td{border-top:1px solid var(--border)}
.order-note{font-size:12.5px; font-weight:400; color:var(--slate-500)}
.order-intake{margin:0 0 18px; font-size:14px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px}
.order-intake dt{color:var(--slate-500)} .order-intake dd{margin:0; color:var(--text); word-break:break-word}
.order-done{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:6px; font-size:14.5px}
/* Short tables on a phone: the first cell takes the row, the rest sit under it,
   so the last column (Pay now) can't be pushed off-screen. */
@media (max-width:560px){
  .tbl-stack thead{display:none}
  .tbl-stack tr{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px 14px; border-bottom:1px solid var(--border-2)}
  .tbl-stack tr:last-child{border-bottom:0}
  .tbl-stack td{padding:0; border:0}
  .tbl-stack td:first-child{flex:1 0 100%}
}

/* ----------------- Signed-in app: customers and team (apps/portal) ------- */
.content > .panel{margin-bottom:0}
.sb-brand:hover{color:#fff}
.pt-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.pt-kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px}
.pt-kpi b{display:block; font:700 30px/1 var(--mono); color:var(--heading); letter-spacing:-.03em}
.pt-kpi span{display:block; margin-top:9px; font:600 10.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--slate-500)}
.pt-kpi.hot b{color:var(--brand-link)}
.pt-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px;
  display:flex; flex-direction:column; gap:14px; min-width:0}
.pt-card[hidden]{display:none}
.pt-card-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 12px; align-items:flex-start}
.pt-card-top > div:first-child{flex:1 1 190px; min-width:0}
.pt-card h4{font-size:16.5px; line-height:1.3}
.pt-card h4 a{color:var(--heading)}
.pt-id{font:500 12px/1.4 var(--mono); color:var(--slate-500); margin-top:4px}
.pt-pills{display:flex; gap:6px; flex-wrap:wrap; align-items:center; flex:none}
.pt-strip{display:flex; gap:4px}
.pt-strip .seg{flex:1; height:8px; padding:0; border-radius:4px}
.seg-prog{background:var(--blue-600)}
.seg-hold{background:var(--slate-400)}
.pt-card-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:auto}
.pt-meta{font-size:13.5px; color:var(--slate-500)}
.pill-wait{color:var(--amber-600); background:var(--amber-bg); border-color:var(--amber-bd)}
.pill-hold,.pill-sched{color:var(--slate-500); background:var(--muted); border-color:var(--border)}
.pt-wait{display:flex; align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid var(--border-2)}
.pt-wait:last-child{border-bottom:0}
.pt-wait-main{flex:1; min-width:0}
.pt-kind{font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--brand-link)}
.pt-wait h4{font-size:15.5px; margin:6px 0 3px}
.pt-wait p{margin:0; font-size:13.5px; color:var(--slate-500)}
.pt-wait .amt{font-size:17px}
.pt-gate{border:1px solid var(--amber-bd); background:var(--amber-bg); border-radius:var(--radius-lg); padding:20px 22px;
  display:flex; flex-direction:column; gap:12px; scroll-margin-top:80px}
.pt-gate h3{font-size:19px}
.pt-gate p{margin:0}
.pt-gate .input{background:var(--surface)}
.pt-said{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:14px}
.pt-said b{display:block; font-size:12.5px; color:var(--slate-500); font-weight:600; margin-bottom:4px}
.pt-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.pt-gantt{padding:14px 22px 20px; overflow-x:auto}
.pt-gantt-row{display:grid; grid-template-columns:minmax(130px,230px) 1fr; gap:14px; align-items:center; padding:6px 0; min-width:540px}
.pt-gantt-name{font-size:13.5px; color:var(--heading); font-weight:500; min-width:0}
.pt-gantt-name small{display:block; font-size:12px; color:var(--slate-500); font-weight:400}
.pt-gantt-track{position:relative; height:24px; background:var(--surface-2); border-radius:6px}
.pt-bar{position:absolute; top:4px; bottom:4px; border-radius:5px; background:var(--muted); border:1px solid var(--border)}
.pt-bar.done{background:var(--green-600); border-color:var(--green-600)}
.pt-bar.prog{background:var(--blue-600); border-color:var(--blue-600)}
.pt-bar.wait{background:var(--brand-2); border-color:var(--brand-2)}
.pt-bar.hold{background:var(--slate-400); border-color:var(--slate-400)}
.pt-today{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--red-600); border-radius:2px}
.pt-legend{display:flex; gap:14px; flex-wrap:wrap; font:500 11px/1 var(--mono); color:var(--slate-500); margin-left:auto}
.pt-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; background:var(--muted); border:1px solid var(--border)}
.pt-legend i.done{background:var(--green-600); border-color:var(--green-600)}
.pt-legend i.prog{background:var(--blue-600); border-color:var(--blue-600)}
.pt-legend i.wait{background:var(--brand-2); border-color:var(--brand-2)}
.pt-file{display:flex; align-items:center; gap:12px; padding:12px 22px; border-bottom:1px solid var(--border-2)}
.pt-file:last-child{border-bottom:0}
.pt-file-main{flex:1; min-width:0}
.pt-file-name{font-weight:600; color:var(--heading); font-size:14px; word-break:break-word}
.pt-file small{display:block; color:var(--slate-500); font-size:12.5px}
.pt-body{padding:16px 22px 20px}
.pt-body > :first-child{margin-top:0}
.pt-form{display:flex; flex-direction:column; gap:10px}
.pt-dl{display:grid; grid-template-columns:auto 1fr; gap:7px 18px; font-size:14px; margin:0}
.pt-dl dt{color:var(--slate-500)}
.pt-dl dd{margin:0; color:var(--text); word-break:break-word}
.pt-dl dd.num{text-align:right}
.pt-act{display:flex; gap:12px; padding:10px 22px; font-size:13.5px; border-bottom:1px solid var(--border-2)}
.pt-act:last-child{border-bottom:0}
.pt-act time{font:500 11px/1.7 var(--mono); color:var(--slate-400); white-space:nowrap; flex:none; width:96px}
.pt-thread{font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500); margin:18px 0 0}
.pt-thread:first-child{margin-top:0}
.pt-two{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:22px; align-items:start}
.pt-stack{display:flex; flex-direction:column; gap:22px; min-width:0}
.pt-task{display:flex; align-items:center; gap:12px; padding:13px 22px; border-bottom:1px solid var(--border-2); color:var(--text)}
.pt-task:last-child{border-bottom:0}
a.pt-task:hover{background:var(--surface-2); color:var(--text)}
.pt-task-main{flex:1; min-width:0}
.pt-task-main b{display:block; color:var(--heading); font-weight:600; font-size:14.5px}
.pt-task-main small{display:block; color:var(--slate-500); font-size:12.5px; margin-top:2px}
.pt-task .num{font-size:12px; color:var(--slate-400); width:22px; flex:none}
/* A task that opens to show its comments (customer project page). */
.pt-taskd{border-bottom:1px solid var(--border-2)}
.pt-taskd:last-child{border-bottom:0}
.pt-taskd > summary{list-style:none; cursor:pointer; border-bottom:0}
.pt-taskd > summary::-webkit-details-marker{display:none}
.pt-taskd > summary:hover{background:var(--surface-2)}
.pt-taskd > summary:focus-visible{outline:2px solid var(--brand-2); outline-offset:-2px}
.pt-taskd .chev{flex:none; color:var(--slate-400); transition:transform .15s}
.pt-taskd[open] > summary .chev{transform:rotate(90deg)}
.pt-taskd-body{padding:4px 22px 18px 56px}
.pt-taskd-files{margin:12px -22px 0 -56px; border-top:1px solid var(--border-2)}
@media (max-width:640px){.pt-taskd-files{margin:12px -16px 0}}
@media (max-width:640px){.pt-taskd-body{padding:4px 16px 16px}}
.pt-late{color:var(--red-600); font-weight:600}
.pt-note{display:flex; gap:12px; align-items:flex-start; padding:14px 22px; border-bottom:1px solid var(--border-2); color:var(--text)}
.pt-note:last-child{border-bottom:0}
.pt-note:hover{background:var(--surface-2); color:var(--text)}
.pt-note.unread b{color:var(--heading)}
.pt-note .hdot{margin-top:7px}
.pt-note.unread .hdot{background:var(--brand-link)}
.pt-note-main{flex:1; min-width:0}
.pt-note-main b{display:block; font-weight:600; font-size:14.5px; color:var(--slate-500)}
.pt-note-main span{display:block; font-size:13.5px; color:var(--slate-500); white-space:pre-line; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical}
.pt-checks{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:14px}
.pt-checks label{display:flex; align-items:center; gap:7px}
@media (max-width:1000px){ .pt-two{grid-template-columns:1fr} }
@media (max-width:560px){
  .pt-wait{flex-direction:column; align-items:stretch; padding:16px 18px}
  .pt-wait .btn{width:100%}
  .pt-act time{width:74px}
  .pt-file,.pt-task,.pt-note,.pt-act{padding-left:16px; padding-right:16px}
  .pt-body,.pt-gantt{padding-left:16px; padding-right:16px}
  .panel-head{padding:14px 16px; flex-wrap:wrap}
  .pt-legend{margin-left:0}
  .pt-gantt-row{grid-template-columns:1fr; gap:5px; min-width:0; padding:8px 0}
}

/* Invoices (portal/invoice.html): readable on screen, clean on paper. */
.invoice-head{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--border)}
.invoice-from{display:flex; flex-direction:column; text-align:right; font-size:14px; color:var(--text)}
.invoice-from strong{color:var(--heading); font-size:16px}
.invoice-meta{display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin-top:16px}
.order-credit strong{color:var(--green-600)}
.bank-details{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px}
@media (max-width:560px){ .invoice-meta{grid-template-columns:1fr} .invoice-from{text-align:left} }
@media print{
  .sidebar,.topbar,.overlay,.skip-link,.no-print,.form-banner{display:none !important}
  .app{display:block} .content{padding:0; max-width:none}
  body,.main{background:#fff}
  .panel.invoice{border:0; box-shadow:none}
  a{color:inherit}
}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Settings > Notifications: a topic per row, a checkbox per channel. */
.pt-prefs{width:100%; border-collapse:collapse}
.pt-prefs th, .pt-prefs td{padding:13px 22px; border-bottom:1px solid var(--border-2); text-align:left; vertical-align:middle}
.pt-prefs thead th{font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500)}
.pt-prefs td, .pt-prefs thead th + th{text-align:center; width:110px}
.pt-prefs tbody th b{display:block; color:var(--heading); font-weight:600; font-size:14.5px}
.pt-prefs tbody th small{display:block; color:var(--slate-500); font-size:12.5px; margin-top:2px; font-weight:400}
.pt-prefs input[type=checkbox]{width:18px; height:18px; accent-color:var(--brand-1)}
@media (max-width:640px){.pt-prefs th, .pt-prefs td{padding:12px 14px} .pt-prefs td, .pt-prefs thead th + th{width:64px}}

/* The customer's "Anything we should know?" answer on the team's pages. */
.pt-note-box{border-left:3px solid var(--amber-600)}
.pt-note-box .pt-body p{color:var(--heading); font-size:15px; line-height:1.55}

/* Checkout: which of the customer's businesses the order is for. */
.order-biz-q{display:block; font-size:13px; font-weight:600; color:var(--heading)}
.order-biz{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.order-biz-pick{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; cursor:pointer; font-size:14.5px}
.order-biz-pick input{margin-top:3px; flex:none}
.order-biz-pick small{display:block; color:var(--slate-500); font-size:12.5px; margin-top:2px; word-break:break-all}
.order-biz-pick:has(input:checked){border-color:var(--brand-2); background:var(--surface-2)}

/* Settings > Businesses */
.biz-row{border-bottom:1px solid var(--border-2)}
.biz-row:last-child{border-bottom:0}
.biz-row > summary{display:flex; align-items:center; gap:12px; padding:14px 22px; cursor:pointer; list-style:none}
.biz-row > summary::-webkit-details-marker{display:none}
.biz-row > summary:hover{background:var(--surface-2)}
.biz-main{flex:1; min-width:0}
.biz-main b{display:block; color:var(--heading); font-size:14.5px}
.biz-main small{display:block; color:var(--slate-500); font-size:12.5px; margin-top:2px; overflow-wrap:anywhere}
.biz-form{padding:4px 22px 20px; gap:14px}
.pt-biz{font:600 11px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--brand-link, #C2410C); margin:4px 0 2px}
.biz-invoice{border:1px solid var(--border-2); border-radius:10px; padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px; margin:0}
.biz-invoice legend{font-size:13px; font-weight:600; color:var(--heading); padding:0 4px}
.biz-invoice small{display:block; color:var(--slate-500); font-size:12.5px; margin-top:2px}
.biz-invoice [hidden]{display:none}

/* Gantt: days off shaded; time past a task's first due date shown as a striped stretch. */
.pt-off{position:absolute; top:0; bottom:0; background:repeating-linear-gradient(135deg, transparent 0 3px, rgba(100,116,139,.09) 3px 5px); pointer-events:none}
.pt-bar:not(.done):not(.prog):not(.wait):not(.hold):not(.pt-late):not(.pt-waitlate){border-color:var(--slate-400)}
.pt-bar.pt-late{background:repeating-linear-gradient(135deg, var(--red-600) 0 5px, rgba(220,38,38,.55) 5px 9px); border-color:var(--red-600); border-radius:0 5px 5px 0}
.pt-bar.pt-waitlate{background:repeating-linear-gradient(135deg, var(--brand-2) 0 5px, rgba(255,138,30,.5) 5px 9px); border-color:var(--brand-2); border-radius:0 5px 5px 0}
.pt-legend i.late{background:repeating-linear-gradient(135deg, var(--red-600) 0 3px, rgba(220,38,38,.55) 3px 5px); border-color:var(--red-600)}
.pt-legend i.off{background:repeating-linear-gradient(135deg, transparent 0 2px, rgba(100,116,139,.35) 2px 4px)}

/* Superuser: set a task's status from the team project page. */
.pt-quick{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:0 22px 12px 56px; border-bottom:1px solid var(--border-2)}
.pt-quick .select{width:auto; min-width:150px; padding:6px 10px}
.pt-quick .input{flex:1; min-width:200px; padding:6px 10px}
.pt-quick [hidden]{display:none}
@media (max-width:640px){.pt-quick{padding:0 16px 12px}}

/* Where a notification lands: clear of the top bar, briefly highlighted. */
.panel[id], .pt-gate[id], .pt-taskd[id]{scroll-margin-top:84px}
.pt-flash{animation:pt-flash 2.4s ease-out}
@keyframes pt-flash{0%,35%{box-shadow:0 0 0 3px var(--brand-2); background-color:rgba(255,138,30,.08)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.pt-flash{animation:none; outline:2px solid var(--brand-2)}}

/* Notifications: clear one with the × at the end of its row. */
.pt-note-row{display:flex; align-items:stretch; border-bottom:1px solid var(--border-2)}
.pt-note-row:last-child{border-bottom:0}
.pt-note-row .pt-note{flex:1; min-width:0; border-bottom:0}
.pt-note-clear{display:flex; margin:0}
.pt-note-clear button{width:44px; border:0; background:transparent; color:var(--slate-400); font-size:20px; cursor:pointer}
.pt-note-clear button:hover{color:var(--heading); background:var(--surface-2)}
.pt-note-clear button:focus-visible{outline:2px solid var(--brand-2); outline-offset:-2px}

/* Interview: one question at a time (apps/projects/interview.py) */
.pt-ask{position:relative; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-lg);
  padding:22px 24px 20px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:10px;
  scroll-margin-top:84px; overflow:hidden}
.pt-ask::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--brand-grad)}
.pt-ask-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.pt-ask-step{display:flex; align-items:center; gap:10px; font:600 12px/1 var(--mono); color:var(--slate-500)}
.pt-ask-dots{display:flex; gap:5px}
.pt-ask-dots i{width:8px; height:8px; border-radius:50%; background:var(--border)}
.pt-ask-dots i.done{background:var(--green-600)}
.pt-ask-dots i.now{background:var(--brand-2); box-shadow:0 0 0 3px rgba(255,138,30,.22)}
.pt-ask-q{margin:6px 0 0; font-size:20px; line-height:1.45; font-weight:600; color:var(--heading); letter-spacing:-.01em}
.pt-ask-who{margin:0; font-size:13px; color:var(--slate-500)}
.pt-ask .pt-form{margin-top:6px}
.pt-ask-box{font-size:16px; line-height:1.55; min-height:132px; resize:vertical}
.pt-ask-foot .hint{flex:1; min-width:200px}
.pt-ask-more{font-size:13.5px; align-self:flex-start}
@media (max-width:640px){.pt-ask{padding:20px 16px 18px} .pt-ask-q{font-size:18px}}

.iv{list-style:none; margin:0; padding:0}
.iv-item{padding:14px 0; border-bottom:1px solid var(--border-2)}
.iv-item:first-child{padding-top:4px}
.iv-item:last-child{border-bottom:0}
.iv-q{display:flex; gap:12px; align-items:flex-start}
.iv-num{flex:none; min-width:30px; padding:5px 0; text-align:center; border-radius:7px; background:var(--muted);
  font:600 11.5px/1 var(--mono); color:var(--navy)}
.iv-text{min-width:0; flex:1}
.iv-q p,.iv-a p{margin:0; overflow-wrap:anywhere}
.iv-q p{color:var(--heading); font-weight:500}
.iv small{display:block; margin-top:4px; font-size:12.5px; color:var(--slate-400)}
.iv-a{margin:10px 0 0 42px; padding:10px 14px; border-radius:10px; background:var(--green-bg); border:1px solid var(--green-bd)}
.iv-wait{margin:8px 0 0 42px; font-size:13px; color:var(--amber-600); font-weight:500}
.iv-wait a{color:inherit; text-decoration:underline}
.iv-queued .iv-num{background:transparent; border:1px dashed var(--slate-400); color:var(--slate-500)}
.iv-queued .iv-q p{color:var(--slate-500); font-weight:400}
.iv-edit{margin:8px 0 0 42px}
.iv-edit > summary{display:inline-block; cursor:pointer; font-size:13px; color:var(--brand-link); list-style:none}
.iv-edit > summary::-webkit-details-marker{display:none}
.iv-edit[open] > summary{margin-bottom:8px}
.iv-remove{color:var(--red-600)}
.iv-tools{margin-top:12px}
.iv-tools .hint{flex:1; min-width:200px}
.iv-block{margin:0 0 14px; padding-bottom:4px; border-bottom:1px solid var(--border-2)}
.iv-label{margin:0 0 4px; font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--slate-500)}
.iv-panel > summary{cursor:pointer; list-style:none}
.iv-panel > summary::-webkit-details-marker{display:none}
.iv-panel > summary::after{content:"+"; margin-left:10px; font:500 18px/1 var(--mono); color:var(--slate-400)}
.iv-panel[open] > summary::after{content:"\2212"}
.iv-panel:not([open]) > summary{border-bottom:0}
.iv-panel > summary:focus-visible{outline:2px solid var(--brand-2); outline-offset:-2px}
@media (max-width:640px){.iv-a,.iv-wait,.iv-edit{margin-left:0}}

/* What happens next (customer project page) */
.pt-next{display:flex; gap:14px; align-items:center; padding:16px 20px; border:1px solid var(--border);
  background:var(--surface); border-radius:var(--radius-lg)}
.pt-next-ico{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--amber-bg); color:var(--brand-link)}
.pt-next-text{flex:1; min-width:0}
.pt-next-now{margin:6px 0 0; color:var(--heading); font-weight:500}
.pt-next-then{margin:2px 0 0; font-size:13.5px; color:var(--slate-500)}
@media (max-width:640px){.pt-next{flex-wrap:wrap} .pt-next .btn{width:100%; justify-content:center}}

/* Files: preview page, share links, the public shared page */
.pt-file-name:hover{color:var(--brand-link)}
.pt-file-acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:640px){.pt-file{flex-wrap:wrap} .pt-file-acts{width:100%; justify-content:flex-start}}
.fv-stage{display:grid; place-items:center; padding:18px; background:var(--surface-2);
  background-image:linear-gradient(45deg,var(--border-2) 25%,transparent 25%,transparent 75%,var(--border-2) 75%),
    linear-gradient(45deg,var(--border-2) 25%,transparent 25%,transparent 75%,var(--border-2) 75%);
  background-size:16px 16px; background-position:0 0,8px 8px}
.fv-img{display:block; max-width:100%; max-height:70vh; height:auto; border-radius:6px; box-shadow:var(--shadow-sm)}
.fv-frame{display:block; width:100%; height:72vh; min-height:420px; border:0; background:#fff}
.fv-text{height:50vh; min-height:280px}
.fv-link{padding:12px; border:1px solid var(--border); border-radius:10px; margin-bottom:10px}
.fv-link.fv-new{border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(255,138,30,.16)}
.fv-url{font:500 12.5px/1.4 var(--mono); width:100%}
.fv-link-foot{margin-top:8px}
.fv-link-foot .hint{flex:1 1 100%}
.fv-off{color:var(--red-600)}
.auth-card.fv-shared{max-width:760px; width:100%}
.fv-shared .fv-stage,.fv-shared .fv-frame{margin-top:14px; border-radius:10px; border:1px solid var(--border)}
.form-banner.form-banner-info{background:var(--blue-bg); border-color:var(--blue-bd); color:var(--blue-600)}

/* Finished projects fold away in lists */
.pt-fold{margin-top:4px}
.pt-fold > summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; padding:8px 0;
  font:600 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500)}
.pt-fold > summary::-webkit-details-marker{display:none}
.pt-fold > summary::before{content:"+"; font-size:15px; color:var(--slate-400)}
.pt-fold[open] > summary::before{content:"\2212"}
.pt-fold > summary .cnt{font-weight:500; color:var(--slate-400)}
.pt-fold[open] > .cols2{margin-top:10px}

/* Timeline on a phone: a list of steps instead of bars */
.pt-mline{display:none; list-style:none; margin:0; padding:6px 16px 14px}
.pt-mstep{position:relative; display:flex; gap:12px; align-items:flex-start; padding:10px 0 10px 4px}
.pt-mstep:not(:last-child)::after{content:""; position:absolute; left:9px; top:28px; bottom:-8px; width:2px; background:var(--border)}
.pt-mdot{flex:none; width:12px; height:12px; margin-top:5px; border-radius:50%; border:2px solid var(--slate-400); background:var(--surface); position:relative; z-index:1}
.pt-mstep.is-done .pt-mdot{background:var(--green-600); border-color:var(--green-600)}
.pt-mstep.is-prog .pt-mdot{background:var(--blue-600); border-color:var(--blue-600)}
.pt-mstep.is-wait .pt-mdot{background:var(--brand-2); border-color:var(--brand-2)}
.pt-mstep.is-late .pt-mdot{box-shadow:0 0 0 3px var(--red-bg); border-color:var(--red-600)}
.pt-mtext{flex:1; min-width:0}
.pt-mtext b{display:block; color:var(--heading); font-size:14px; font-weight:600}
.pt-mtext small{display:block; font-size:12.5px; color:var(--slate-500)}
.pt-mtext .pt-mlate{color:var(--red-600); font-weight:500}
.pt-mstep .pill{flex:none; font-size:10.5px}
@media (max-width:640px){.pt-gantt{display:none} .pt-mline{display:block} .pt-legend{display:none}}

/* Welcome tour (new customers, first visit to the dashboard) */
.tour{position:fixed; z-index:80; width:300px; max-width:calc(100vw - 32px); padding:16px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md)}
.tour::before{content:""; position:absolute; left:-7px; top:32px; width:12px; height:12px; background:var(--surface);
  border-left:1px solid var(--border); border-bottom:1px solid var(--border); transform:rotate(45deg)}
.tour.tour-centre{left:50% !important; top:auto !important; bottom:24px; transform:translateX(-50%)}
.tour.tour-centre::before{display:none}
.tour-step{margin:0 0 6px; font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--brand-link)}
.tour h3{font-size:16px; margin:0 0 4px}
.tour p{margin:0; font-size:14px}
.tour-foot{display:flex; justify-content:space-between; align-items:center; margin-top:14px}
.tour-skip{background:none; border:0; padding:4px 0; color:var(--slate-500); font:inherit; font-size:13px; cursor:pointer}
.tour-skip:hover{color:var(--heading)}
.sb-link.tour-lit{box-shadow:0 0 0 2px var(--brand-2); border-radius:8px}
.pt-soon{color:var(--amber-600); font-weight:600}
.pt-replies{width:auto; max-width:100%; align-self:flex-start; padding:6px 10px; font-size:13px}
.pt-act-link{color:inherit; text-decoration:none} .pt-act-link:hover{background:var(--surface-2)}

/* Bulk actions on My tasks */
.pt-trow{display:flex; align-items:stretch; border-bottom:1px solid var(--border-2)}
.pt-trow .pt-task{flex:1; min-width:0; border-bottom:0; padding-left:6px}
.pt-tcheck{display:flex; align-items:center; padding:0 4px 0 18px; cursor:pointer}
.pt-tcheck input{width:17px; height:17px; accent-color:var(--brand-1)}
.pt-bulk{position:sticky; top:64px; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 14px; background:var(--surface); border:1px solid var(--brand-2); border-radius:var(--radius-lg); box-shadow:var(--shadow-md)}
.pt-bulk-count{font-weight:600; color:var(--heading); margin-right:auto; font-size:14px}
.pt-bulk-assign{display:flex; gap:6px; align-items:center}
.pt-bulk-assign .select{width:auto; padding:6px 10px; font-size:13px}
@media (max-width:640px){.pt-tcheck{padding-left:12px} .pt-bulk{top:58px}}

/* Keyboard shortcuts list (team, press ?) */
.kbd-help{position:fixed; z-index:90; right:20px; bottom:20px; width:340px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:14px 18px 16px}
.kbd-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.kbd-head h3{font-size:15px}
.kbd-help dl{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:0; font-size:13.5px}
.kbd-help dt{white-space:nowrap}
.kbd-help dd{margin:0; color:var(--slate-500)}
kbd{display:inline-block; min-width:22px; padding:2px 6px; border:1px solid var(--border); border-bottom-width:2px; border-radius:5px;
  background:var(--surface-2); font:600 12px/1.3 var(--mono); color:var(--heading); text-align:center}
.sb-kbd{width:100%; background:none; border:0; font:inherit; cursor:pointer; text-align:left}
.sb-kbd-key{margin-left:auto; background:transparent; color:var(--sidebar-link); border-color:var(--sidebar-hair); min-width:18px; padding:0 5px}

/* Task checklists */
.ck-list{list-style:none; margin:0; padding:0}
.ck-item{display:flex; align-items:baseline; gap:10px; padding:6px 0; cursor:pointer}
.ck-item input{width:17px; height:17px; accent-color:var(--green-600); transform:translateY(3px)}
.ck-item span{flex:1}
.ck-item.is-done span{color:var(--slate-500); text-decoration:line-through}
.ck-item small{font-size:12px; color:var(--slate-400)}
.count-done{color:var(--green-600)}

/* Time on task */
.tbar-timer{display:flex; align-items:center; gap:6px; margin:0 6px; padding:4px 4px 4px 10px; border:1px solid var(--blue-bd);
  background:var(--blue-bg); border-radius:20px; font:600 12.5px/1 var(--mono)}
.tbar-timer a{display:flex; align-items:center; gap:6px; color:var(--blue-600)}
.tbar-dot{width:8px; height:8px; border-radius:50%; background:var(--red-600); animation:tbar-pulse 1.4s infinite}
@keyframes tbar-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.tbar-dot{animation:none}}
.tbar-timer button{border:0; background:var(--surface); color:var(--heading); border-radius:14px; padding:5px 10px; font:inherit; cursor:pointer}
@media (max-width:640px){.tbar-task{display:none}}
.tm-list{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--border-2)}
.tm-list li{display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--border-2); font-size:13.5px}
.tm-list li > span:first-child{font:600 12.5px var(--mono); min-width:56px; color:var(--heading)}
.tm-who{flex:1; color:var(--slate-500); min-width:0}
.tm-x{border:0; background:none; color:var(--slate-400); font-size:18px; cursor:pointer; padding:0 6px}
.tm-x:hover{color:var(--red-600)}

/* Team search in the top bar */
.tbar-search{display:flex; align-items:center; gap:8px; width:min(340px,38vw); padding:0 10px; height:36px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--slate-400); margin-right:6px}
.tbar-search:focus-within{border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(255,138,30,.16)}
.tbar-search input{flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:13.5px; color:var(--text); outline:none}
.tbar-search kbd{font-size:11px}
@media (max-width:900px){.tbar-search kbd{display:none}}
@media (max-width:640px){.tbar-search{display:none}}
.sb-phone{display:none} @media (max-width:640px){.sb-link.sb-phone{display:flex}}

/* Workload */
.wl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.wl-card{margin-bottom:0}
.wl-bar{height:8px; border-radius:6px; background:var(--muted); overflow:hidden}
.wl-bar span{display:block; height:100%; background:var(--brand-grad); border-radius:6px}
.wl-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 0}
.wl-stats dt{font:500 10.5px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--slate-500)}
.wl-stats dd{margin:4px 0 0; font-size:20px; font-weight:600; color:var(--heading)}
.wl-hot dd{color:var(--red-600)}

/* Undo a status change */
.pt-undo{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 16px; border-radius:var(--radius-lg);
  background:var(--blue-bg); border:1px solid var(--blue-bd); color:var(--heading)}
.pt-undo .hint{flex:1 1 auto}
.err-help{margin:18px 0 0; font-size:13.5px; color:var(--slate-500)}

/* Ask for changes (finished projects): a small box in the side column */
.pt-reopen-d > summary{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px;
  cursor:pointer; list-style:none}
.pt-reopen-d > summary::-webkit-details-marker{display:none}
.pt-reopen-d > summary b{display:block; font-size:14px; color:var(--heading)}
.pt-reopen-d > summary small{display:block; font-size:12.5px; color:var(--slate-500)}
.pt-reopen-cta{flex:none; font-size:13px; font-weight:600; color:var(--brand-link)}
.pt-reopen-d[open] .pt-reopen-cta{display:none}
.pt-reopen-d[open] > summary{border-bottom:1px solid var(--border-2)}
.pt-reopen-d > summary:focus-visible{outline:2px solid var(--brand-2); outline-offset:-2px}
/* In the narrow side column, a file's buttons sit under its name */
.pt-two > .pt-stack:last-child .pt-file{flex-wrap:wrap}
.pt-two > .pt-stack:last-child .pt-file-acts{width:100%; justify-content:flex-start}
.pt-reopen-d{scroll-margin-top:84px}