/* NewFrontDesk app (/app, /f, /admin/businesses). Builds on site.css tokens. */
body.app{padding-inline:16px}
.app-main{padding-block:20px 64px}
.app-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:14px;border-bottom:1px solid var(--line)}
.app-brand{font-family:var(--f-display);font-weight:800;font-size:1.25rem;text-decoration:none}
.app-links{display:flex;gap:18px;flex:1}
.app-links a{text-decoration:none;color:var(--muted);padding-block:6px}
.app-links a[aria-current="page"]{color:var(--ink);font-weight:700;box-shadow:inset 0 -3px 0 var(--sign)}
.linkish{background:none;border:0;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer;padding:6px 0}
.app-nav form,.inline-form{background:none;border:0;padding:0;display:flex;gap:8px;align-items:center;grid-template-columns:none;flex-wrap:wrap}
.testbar{background:var(--sign);color:var(--sign-ink);border-radius:10px;padding:8px 14px;font-size:.9rem;margin-top:12px}
.testnote{background:var(--green-soft);border-radius:10px;padding:10px 14px;font-size:.95rem}
.app h1{font-size:clamp(1.7rem,4vw,2.2rem);font-weight:800;margin-bottom:6px}
.app h2{font-size:1.35rem;font-weight:800;margin-bottom:8px}
.app h3{font-size:1.05rem;margin:18px 0 6px}
.app p+p{margin-top:8px}
.muted{color:var(--muted)}.small{font-size:.85rem}
.app-section{margin-top:26px}
.app-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:16px;display:block}
.app-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.app-error{color:#B4442B;font-weight:700;margin-block:10px}
.app-ok{background:var(--green-soft);color:var(--green);border-radius:10px;padding:10px 14px;font-weight:700;margin-block:10px}
.app-form{display:grid;grid-template-columns:1fr;gap:8px;background:none;border:0;padding:0;margin-top:14px;max-width:34rem}
.app-form label{margin-top:6px}
.app-form .btn{justify-self:start;margin-top:8px}
.small-btn{padding:9px 16px;font-size:.92rem}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;font-weight:400;font-size:.9rem;align-items:start}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green)}
.app-login{max-width:26rem;margin:8vh auto 0}
.app-bare .app-main{padding-top:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0}
.stat-label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat-value{font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:1.1;margin-top:6px}
.stat-sub{color:var(--muted);font-size:.82rem;margin-top:6px}
.filters{display:flex;gap:8px;flex-wrap:wrap;background:none;border:0;padding:0;grid-template-columns:none}
.filters select{width:auto;padding:8px 10px;background:var(--card)}
.lead-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.lead-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-decoration:none}
a.lead-row:hover{border-color:var(--green)}
.lead-main{display:grid;gap:2px;min-width:0}
.lead-need{color:var(--muted);font-size:.95rem;overflow-wrap:anywhere;min-width:0}
.lead-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.st,.src{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 10px;white-space:nowrap}
.src{box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.st-new{background:var(--sign);color:var(--sign-ink)}
.st-contacted,.st-booked{background:var(--green-soft);color:var(--green)}
.st-won{background:var(--green);color:var(--on-green)}
.st-lost{box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.lead-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.kv{margin:14px 0 0;display:grid;gap:10px}
.kv div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px}
.kv dt{color:var(--muted);font-size:.9rem}
.kv dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.status-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:none;border:0;padding:0;margin-top:18px;grid-template-columns:none}
.status-form select{width:auto;background:var(--card)}
.timeline{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.tl-who{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tl-body{white-space:pre-wrap;overflow-wrap:anywhere}
.tl-status,.tl-system{color:var(--muted);font-size:.93rem}
.tl-customer_text{background:var(--green-soft);border-radius:10px;padding:8px 12px}
.code{background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:12px;font-family:var(--f-mono);font-size:.82rem;white-space:pre-wrap;overflow-wrap:anywhere;margin-block:10px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.plainlist{margin:8px 0 0;padding-left:18px}
.app-admin{padding-top:24px}
.inline-form input{width:11rem;padding:8px 10px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.lead-detail{grid-template-columns:1fr}.lead-row{grid-template-columns:1fr}.lead-meta{justify-content:flex-start}}
@media (max-width:520px){.stats{grid-template-columns:1fr}.kv div{grid-template-columns:1fr;gap:0}.app-links{order:3;width:100%;flex:none;flex-wrap:wrap;column-gap:16px;row-gap:0}}
.admin-nav{font-size:.92rem;color:var(--muted);margin-bottom:14px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.admin-nav .inline-form{display:inline-flex}
.days{border:0;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px}
.days legend{font-size:.9rem;font-weight:700;padding:0;margin-bottom:4px}
.days .check{grid-template-columns:22px auto;margin:0}
.tpl-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:16px}
.tpl-list li{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px}
.preview-out{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}

/* ---------- owner: client list and client page ---------- */
.biz-table{width:100%;border-collapse:separate;border-spacing:0 8px;margin-bottom:18px}
.biz-table th,.biz-table td{text-align:left;padding:12px 14px;background:var(--card);border-block:1px solid var(--line);vertical-align:middle;font-weight:400}
.biz-table thead th{background:none;border:0;padding-block:0 2px;font-size:.78rem;color:var(--muted);font-weight:700}
.biz-table tbody th{border-left:1px solid var(--line);border-radius:var(--radius) 0 0 var(--radius)}
.biz-table tbody th a{font-weight:700}
.biz-table tbody th .small{display:block}
.biz-table td:last-child{border-right:1px solid var(--line);border-radius:0 var(--radius) var(--radius) 0}
.biz-table td a{text-decoration:none}
.biz-tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.biz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.biz-grid .app-card{margin:0}
.kv{display:grid;gap:8px;margin:10px 0 14px}
.kv div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:10px}
.kv dt{color:var(--muted);font-size:.88rem}
.kv dd{margin:0;overflow-wrap:anywhere}
.checklist{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.checklist .done{font-weight:700}
.checklist .todo{color:var(--muted)}
.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.req-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:12px}
.req-list li{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.req-list select{width:auto;padding:8px 10px}
.link-once{border-color:var(--green)}
.link-once pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:900px){
  .biz-grid{grid-template-columns:1fr}
  .kv div{grid-template-columns:1fr;gap:0}
  .biz-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .biz-table,.biz-table tbody,.biz-table tr,.biz-table th,.biz-table td{display:block}
  .biz-table tr{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px}
  .biz-table th,.biz-table td,.biz-table tbody th,.biz-table td:last-child{border:0;border-radius:0;padding:5px 0;background:none}
  .biz-table td::before{content:attr(data-label) ": ";color:var(--muted);font-size:.85rem}
}

/* ---------- owner shell (2026-10-08): sidebar + top bar for every /admin page. Existing tokens only. ---------- */
.app-owner{background:var(--ground)}
.owner-shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.owner-side{background:var(--card);border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;align-self:start;min-height:100vh}
.owner-brand{display:block;font-family:var(--f-display);font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none;padding:4px 10px 16px}
.owner-brand span{display:block;font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.owner-menu{display:flex;flex-direction:column;gap:2px}
.owner-menu a{padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:700}
.owner-menu a:hover{background:var(--green-soft)}
.owner-menu a[aria-current="page"]{background:var(--green);color:var(--on-green)}
.owner-body{min-width:0}
.owner-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 28px;border-bottom:1px solid var(--line);background:var(--card)}
.owner-where{margin:0;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.owner-who{display:flex;gap:14px;align-items:center;font-size:.92rem;color:var(--muted)}
.owner-main{padding:8px 28px 48px;max-width:1120px}
.owner-main .app-admin{padding-top:16px}
.owner-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:18px 0}
.owner-num{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;color:var(--ink);text-decoration:none}
.owner-num:hover{border-color:var(--green)}
.owner-num strong{font-family:var(--f-display);font-size:1.9rem;line-height:1.1}
.owner-num-l{font-size:.8rem;font-weight:700;color:var(--muted)}
.owner-filter{display:grid;grid-template-columns:minmax(180px,2fr) repeat(3,minmax(120px,1fr)) auto;gap:10px;align-items:end;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:14px 0}
.owner-filter label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.owner-filter input,.owner-filter select{width:100%;padding:9px 10px}
.owner-filter-go{display:flex;gap:12px;align-items:center}
.owner-pager{display:flex;gap:18px;align-items:center;justify-content:center;margin:6px 0 18px;font-size:.95rem}
@media (max-width:900px){
  .owner-shell{grid-template-columns:minmax(0,1fr)}
  .owner-side{min-width:0;position:static;min-height:0;border-right:0;border-bottom:1px solid var(--line);padding:12px 14px 8px}
  .owner-brand{padding:0 4px 8px}
  .owner-menu{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .owner-menu a{white-space:nowrap;padding:8px 12px}
  .owner-top{padding:10px 16px}
  .owner-main{padding:4px 16px 40px}
  .owner-filter{grid-template-columns:1fr 1fr}
  .owner-filter>div:first-child,.owner-filter-go{grid-column:1/-1}
}
.app-owner{margin:0}
.app-owner>.sr{position:absolute;left:-9999px;top:8px;background:var(--card);color:var(--ink);padding:8px 12px;border-radius:10px;z-index:5}
.app-owner>.sr:focus{left:8px}

/* Analytics (owner Reports page) */
.an-range{grid-template-columns:repeat(3,minmax(140px,1fr)) auto}
.an-chg{font-size:.82rem;font-weight:700}.an-chg.up{color:var(--green)}.an-chg.down{color:var(--ink)}
.an-scroll{overflow-x:auto}
.an-table{width:100%;border-collapse:collapse;font-size:.95rem}
.an-table th,.an-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.an-table thead th{font-size:.76rem;color:var(--muted);font-weight:700;white-space:nowrap}
.an-table tr:last-child td{border-bottom:0}
.an-bar{width:120px;height:10px}
.an-csv{float:right;font-family:var(--f-body);font-size:.85rem;font-weight:400}
.app-card h3{font-size:1rem;margin:18px 0 6px}
@media (max-width:900px){.an-range{grid-template-columns:1fr 1fr}.an-bar{width:70px}}

/* ---------- welcome wizard (locked tokens only) ---------- */
.wz{max-width:38rem;margin-inline:auto}
.wz h1{font-size:clamp(1.6rem,4vw,2.1rem);margin:14px 0 8px}
.wz h2{margin-top:22px}
.wz-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:10px}
.wz-bar span{display:block;height:100%;background:var(--green);border-radius:999px}
.wz-1of5 span{width:20%}.wz-2of5 span{width:40%}.wz-3of5 span{width:60%}.wz-4of5 span{width:80%}.wz-5of5 span{width:100%}
.wz-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.wz .btn{min-height:48px}

/* quality standard (2026-10-09): 48px tap targets in the app on touch screens */
@media (pointer:coarse),(max-width:900px){
  .app-nav a,.app-nav .linkish,.owner-side a{min-height:48px;display:inline-flex;align-items:center}
  .btn,.small-btn{min-height:48px}
}
@media print{.app-nav,.testbar,.owner-side,.owner-top{display:none!important}}

/* Show/hide password button (src/js/pw.js). Locked tokens only. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:54px}
.pw-eye{position:absolute;top:50%;right:2px;transform:translateY(-50%);width:48px;height:48px;min-height:48px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer;border-radius:8px}
.pw-eye:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
/* Browser phone panel on owner pages (2026-10-10). Locked tokens only. */
.nfd-phone{position:fixed;right:12px;bottom:12px;z-index:20;width:min(320px,calc(100vw - 24px));display:grid;gap:8px}
.nfd-phone [hidden]{display:none}
.np-bar,.np-ring,.np-call,.np-why{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0}
.np-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.875rem}
.np-ring{border:2px solid var(--green)}
.np-kicker{margin:0 0 4px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.np-who{margin:0 0 8px}
.np-btns{margin:0 0 6px;display:flex;gap:8px;flex-wrap:wrap}
.np-dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);flex:none}
.np-dot.np-on{background:var(--green);box-shadow:none}
.np-dot.np-busy{background:var(--sign);box-shadow:none}
.np-dot.np-bad{background:var(--muted);box-shadow:none}
.nfd-phone audio{display:none}
@media print{.nfd-phone{display:none}}
/* Inline recording player (inbox, phone, conversation). */
.rec{display:block;width:min(320px,100%);height:40px;margin-top:6px}
/* Inbox badge in the owner menu + one-click phone numbers (2026-10-10). Locked tokens only. */
.menu-badge{display:inline-block;min-width:22px;margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--sign);color:var(--sign-ink);font-size:.75rem;font-weight:700;text-align:center;vertical-align:middle}
.menu-badge[hidden]{display:none}
.menu-badge.is-missed{background:var(--ink);color:var(--card)}
.callnum{white-space:nowrap;font-weight:600}
.owner-help{margin-right:14px;font-size:.875rem}
/* Inbox and conversation tables become one card per item on a phone (2026-10-10). */
@media (max-width:640px){
  .stack-table thead{position:absolute;left:-9999px}
  .stack-table,.stack-table tbody,.stack-table tr,.stack-table td{display:block;width:auto}
  .stack-table tr{padding:12px 0;border-top:1px solid var(--line)}
  .stack-table td{padding:2px 0;border:0}
  .owner-top{flex-wrap:wrap;gap:8px}
  .owner-who{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:.875rem}
}
/* The shared phone panel's small idle box must not float over buttons (owner, 2026-10-10): when no call is ringing or live it sits
   at the end of the page, in the page flow. The ring banner and the live-call panel keep their own fixed place. */
.app-owner .pp:not(.pp-ringing):not(.pp-live){position:static;margin:0 28px 20px auto;max-width:420px;box-shadow:none}
@media (max-width:640px){.app-owner .pp:not(.pp-ringing):not(.pp-live){margin:0 16px 16px;max-width:none}}

/* Requests board (2026-10-10; from server/app/views-work.js BOARD_CSS). */

/* Requests board (/admin/board) */
.board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:12px}
.board-col{flex:0 0 16rem;min-width:0;margin:0;background:var(--ground);border:1px solid var(--line)}
.board-col.is-over{outline:2px solid var(--green);outline-offset:-2px}
.board-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0 0;cursor:grab}
.board-card.is-dragging{opacity:.5}
.board-card p{margin:0 0 6px}
.board-card .muted{color:var(--muted)}
.board-card .inline-form{margin-top:8px}
.board-card select{flex:1 1 8rem;min-width:0}
.board-card ~ .board-empty{display:none}
.board-empty{margin:10px 0 0}
#board-note[hidden]{display:none}
@media (max-width:640px){
  .board{display:block;overflow-x:visible;padding-bottom:0}
  .board-col{margin:0 0 12px}
  .board-card{cursor:auto}
}

/* HQ's shared contact side panel, in our colours (variables only; the component's own files are unchanged). */
.hqcp{--hqcp-bg:var(--card);--hqcp-fg:var(--ink);--hqcp-accent:var(--green);--hqcp-border:var(--line);--hqcp-muted:var(--muted);--hqcp-radius:12px;--hqcp-font:inherit}
/* Mount for HQ's shared two-pane inbox. */
.hq-inbox-mount{height:min(72vh,760px);min-height:420px;margin:0 0 20px}
@media (max-width:640px){.hq-inbox-mount{height:78vh}}
/* Mount for HQ's shared Trash page. */
.hq-trash-mount{min-height:320px}
/* Mount for HQ's shared bell in the owner top bar. */
.hq-bell-mount{display:inline-block;vertical-align:middle;margin-right:12px}
/* HQ's shared notes list, in our colours (variables only; the component's files are unchanged). */
.hqnt{--hqnt-bg:var(--card);--hqnt-fg:var(--ink);--hqnt-accent:var(--green);--hqnt-border:var(--line);--hqnt-muted:var(--muted)}
/* Bulk tick box next to a request's name. */
.pick{display:inline-flex;align-items:center;margin-right:6px}
.pick input{width:20px;height:20px}

/* HQ's shared Customize > Density (2026-10-11). Comfortable = our normal look, so only the other two choices change anything. */
html.hqcz-density-compact .app-owner .app-card{padding:12px}
html.hqcz-density-compact .app-owner .biz-table th,html.hqcz-density-compact .app-owner .biz-table td{padding-block:6px}
html.hqcz-density-compact .app-owner .owner-nums,html.hqcz-density-compact .app-owner .biz-grid{gap:8px}
html.hqcz-density-large .app-owner .app-card{padding:28px}
html.hqcz-density-large .app-owner .biz-table th,html.hqcz-density-large .app-owner .biz-table td{padding-block:18px}