/* BQA product interface — Operations Ledger design system.
   Human-designed, high-density SaaS information architecture.
   Sources: Anthropic frontend-design, Vercel Web Interface Guidelines,
   UI UX Pro Max. Shared verbatim by admin.html and customer.html.
   Self-hosted OFL fonts; no third-party runtime requests. */
@font-face {
  font-family:"BQA Source Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/source-sans-3-latin.woff2") format("woff2");
}
@font-face {
  font-family:"BQA Source Serif";font-style:normal;font-weight:500 600;font-display:swap;
  src:url("fonts/source-serif-4-latin.woff2") format("woff2");
}

:root {
  --bg:#f4f3ee; --surface:#fffefa; --surface-soft:#f4f6f3; --ink:#21322e;
  --muted:#63736d; --line:#dce2db; --nav:#142a2b; --nav-soft:#234041;
  --brand:#126a55; --brand-soft:#e5f1e9; --success:#19644e;
  --success-soft:#e6f2eb; --warning:#91611e; --warning-soft:#fbf3df;
  --danger:#a24439; --shadow:0 1px 2px rgba(14,35,30,.025);
  --radius:12px; --panel:#ffffff;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:100px}
body {
  background:var(--bg); color:var(--ink);
  font-family:"BQA Source Sans","Source Sans 3","Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; letter-spacing:-.007em;
  -webkit-font-smoothing:antialiased;
}
a {color:var(--brand);text-underline-offset:3px}
button,input,select,textarea {font:inherit}
button,a,select,summary {touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #b58b47!important;outline-offset:3px!important;
}
input,select,textarea {color-scheme:light}
input[type=checkbox] {accent-color:var(--brand)}
input,select,textarea {min-height:42px;border-radius:8px;border-color:#bdcac2;background:#fff}
input:focus,select:focus,textarea:focus {
  outline:2px solid #a5bfac;outline-offset:1px;
  border-color:#2a7961;box-shadow:none;
}
::placeholder {color:#8b9a92;opacity:1}
label {color:#344b41;font-size:12px;font-weight:700;letter-spacing:.025em}
p,.muted,.lede,.meta {color:var(--muted)}
h1,h2,h3 {color:var(--ink);letter-spacing:-.028em}
h2 {font-size:19px;line-height:1.28;font-weight:720}
h3 {font-size:15px;line-height:1.35}
code {font:12px/1.4 ui-monospace,"SFMono-Regular",Consolas,monospace;color:#315447}
.skip-link{position:absolute;top:-80px;left:12px;padding:10px 14px;background:#fff;color:var(--ink);z-index:1000;border:2px solid var(--brand)}
.skip-link:focus{top:12px}
.app {grid-template-columns:254px minmax(0,1fr);min-height:100vh}
.side,.sidebar {
  background:var(--nav);color:#f0f2eb;
  border-right:1px solid #294345;
  padding:25px 15px;position:sticky;top:0;align-self:start;
  height:100vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#4b6867 transparent;
}
.brand {
  display:flex;align-items:center;gap:13px;
  padding:3px 10px 23px;margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:15px;line-height:1.23;font-weight:750;letter-spacing:-.025em;
}
.brand strong {font-weight:750}
.brand small {font-size:10px;color:#b7c9bf;letter-spacing:.05em;font-weight:500;margin-top:5px}
.brandmark,.brand-symbol {
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  border-radius:9px;background:#e4e9d7;color:#183630;
  font:800 17px/1 "BQA Source Serif",Georgia,serif;letter-spacing:-.06em;
}
.brand .brand-copy{min-width:0}
.navgroup {margin:8px 0 18px}
.navlabel,.side-label {
  font-size:10px;color:#96b1a6;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;
  padding:8px 12px 7px;
}
.nav,.navbtn {
  position:relative;width:100%;display:flex;gap:12px;align-items:center;
  min-height:43px;margin:1px 0;padding:9px 13px;border-radius:7px;
  background:transparent;color:#bdcbc4;text-align:left;font-weight:570;
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;
}
.nav:hover,.navbtn:hover {background:#243e3e;color:#fff}
.nav.active,.navbtn.active {
  background:#2b4543;color:#fff;border-color:#47605a;
  box-shadow:inset 3px 0 0 #adc9ad;
}
.navbtn .dot {height:6px;width:6px;border-radius:2px;background:#617c75;flex:0 0 6px}
.navbtn.active .dot{background:#cedfca}
.nav-id {font:700 11px/1 ui-monospace,Consolas,monospace;opacity:.55;min-width:23px}
.nav.active .nav-id{opacity:1;color:#c5dfb9}
.side-footer,.sidebar-footer {
  margin-top:26px;padding:15px 12px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#a7c0b5;font-size:11px;line-height:1.6;
}
.side-footer strong,.sidebar-footer strong{display:block;color:#edf2e8;letter-spacing:.04em}
.content {min-width:0}
.top,.topbar {
  position:sticky;top:0;z-index:5;height:76px;display:flex;gap:20px;align-items:center;
  background:#fffefa;backdrop-filter:none;border-bottom:1px solid var(--line);
  padding:0 clamp(22px,3vw,45px);
}
.top strong,.topbar h1 {
  font-size:13px;font-weight:700;letter-spacing:.03em;color:#264338;
}
.top .spacer,.topbar .spacer {flex:1}
.top-context,.workspace-context {display:flex;align-items:center;gap:9px;color:#66776e;font-size:12px}
.top-context .separator {color:#b2beb6}
.top-context strong {font-size:13px;color:#214135}
.top #adminIdentity {font-size:11px;color:#4a6859;background:#f0f4ee;padding:6px 10px;border-radius:6px}
.topbar .statusline{font-weight:650;color:#3d6554}
.topbar .badge {border-radius:6px}
.page {
  width:100%;max-width:1480px;margin:0 auto;
  padding:clamp(25px,3.3vw,51px) clamp(22px,3vw,47px) 100px;
}
.view{display:none;animation:none}.view.active{display:block}
h1,.headline {font-family:"BQA Source Serif","Source Serif 4",Georgia,serif;font-size:clamp(30px,3.2vw,42px);font-weight:600;line-height:1.13;letter-spacing:-.045em;margin:0 0 10px}
.eyebrow,.kicker {
  text-transform:uppercase;letter-spacing:.16em;
  font:700 10px/1.5 "BQA Source Sans","Segoe UI",sans-serif;
  color:var(--brand);margin-bottom:10px;
}
.lede,.view>p {max-width:760px;margin:0 0 27px;color:#62766c;font-size:14px;line-height:1.65}
.view>h1 + p {margin:0 0 31px}
.page-intro{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.page-intro p{margin:5px 0 0;color:var(--muted);max-width:640px;line-height:1.65}
.page-intro .btn{flex:0 0 auto}
.section-rule {height:1px;background:var(--line);margin:10px 0 24px}
.grid {gap:16px}
.card {
  background:#fffefa;border:1px solid #dce3dc;
  border-radius:12px;box-shadow:none;padding:24px;
}
.card h2,.card h3 {margin-top:0}
.card p {color:#64766c;line-height:1.6}
.card .card {background:#f8f9f5;box-shadow:none;border-color:#e4e9e3;border-radius:8px}
.metric {padding:23px 23px 19px;position:relative;min-height:118px}
.metric::before {content:"";position:absolute;top:20px;left:0;height:26px;width:3px;background:#b6cdb5;border-radius:0 4px 4px 0}
.metric .v,.metric .value {
  color:#1d3f33;font-size:clamp(25px,2.5vw,37px);font-weight:680;letter-spacing:-.052em;
  line-height:1.18;font-variant-numeric:tabular-nums;
}
.metric .l,.metric .label {color:#5b7266;font-size:12px;margin:10px 0 0;letter-spacing:.006em;line-height:1.45}
.data-note {font-size:11px;color:#67786e;margin-top:12px;max-width:90%}
.metric-warning::before{background:#b9894f}
.metric-muted::before{background:#8ca19a}
.metric-quiet::before{background:#637f73}
.btn {
  border-radius:8px;min-height:39px;
  padding:9px 15px;font-size:12px;line-height:1.4;
  font-weight:700;letter-spacing:.01em;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;transition:background .15s,border-color .15s;
}
.btn.primary,.primary.btn {background:#1b6f56;color:#fff;border:1px solid #1b6f56}
.btn.primary:hover,.primary.btn:hover {background:#12523f}
.btn.secondary,.secondary.btn {background:#edf3eb;color:#285b46;border:1px solid #d4e3d6}
.btn.secondary:hover,.secondary.btn:hover{background:#dcebe0}
.btn.ghost,.ghost.btn {background:#fffefa;color:#3d5447;border:1px solid #bdc9bd}
.btn.ghost:hover,.ghost.btn:hover {background:#edf2eb}
.btn.danger{background:#fbefec;color:#9d4437;border:1px solid #efd0c8}
.btn[disabled],button[disabled]{opacity:.5;cursor:not-allowed}
.badge {font-size:11px;font-weight:710;line-height:1.1;border-radius:5px;padding:5px 8px;letter-spacing:.025em}
.badge.ok,.ok.badge{background:#e8f2e9;color:#27674a}
.badge.warn,.warn.badge{background:#fbf0db;color:#875923}
.badge.bad,.bad.badge{background:#f8eae7;color:#963d35}
.status-strip {
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 19px;border:1px solid #d7e3d8;border-radius:9px;
  background:#eaf2e9;margin-bottom:24px;
  color:#25483c;font-size:12px;
}
.status-strip strong{font-size:12px;color:#194936}
.status-strip .grow{min-width:140px}
.status-strip .btn {margin-left:auto}
.status-pin {height:8px;width:8px;border-radius:50%;background:#438366;flex:0 0 8px}
.status-strip.neutral{background:#f2f2e9;border-color:#e0dfd1;color:#555d4c}
.status-strip.neutral .status-pin {background:#9a9779}
.table-wrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain}
/* Retention evidence keeps readable columns in a keyboard-scrollable region. */
[hidden]{display:none!important}
.pilot-retention-table{min-width:1040px}
.pilot-retention-table caption{text-align:left;padding-bottom:10px}
.pilot-retention-table .badge{white-space:nowrap}
table {width:100%;border-collapse:collapse;border-spacing:0;font-variant-numeric:tabular-nums}
thead{background:#f4f6f1}
th {white-space:nowrap;font-size:10px;color:#53695d;font-weight:750;letter-spacing:.075em;text-transform:uppercase}
td{color:#34453d;font-size:12px;vertical-align:middle;overflow-wrap:anywhere}
td strong{color:#263e34;font-weight:750}
th,td {border-bottom:1px solid #e5eae2;padding:13px 13px;text-align:left}
tbody tr:last-child td {border-bottom:0}
tr.click:hover {background:#f2f6ed}
tr.click:focus-visible {outline:2px solid #a5bfac}
.table-wrap code{font-size:11px}
.fields,.fieldgrid {gap:16px}
.fieldgrid>div,.fields>div{min-width:0}
.sectionhead {margin-bottom:22px}
.sectionhead h2 {margin:0 0 4px}
.sectionhead p {margin:0;font-size:12px}
.item,.listitem {border:1px solid #e1e7df;border-radius:8px;background:#f8f9f5;padding:16px}
.item strong,.listitem strong{color:#284536}
.meta {font-size:11px;color:#718278}
.callout {border:1px solid #d6e3d7;background:#eaf3ea;color:#325744;border-radius:9px}
.integration {border:1px solid #e0e7df;background:#f8f9f6;border-radius:10px}
.integration .icon {border-radius:8px;color:var(--brand)}
.empty {border:1px dashed #bfcfc1;border-radius:8px;background:#f8f9f5;color:#64786a}
.schedule-row{border-color:#e4e9e3}
details {border-top:1px solid #e2e9e1;margin-top:20px;padding-top:17px}
summary {color:#345844}
details[open]>summary{margin-bottom:12px}
.toast {background:#1d3c33;color:#fff;border:1px solid #345d4d;border-radius:8px;box-shadow:0 14px 34px rgba(15,42,34,.12)}
.bqa-admin .nav,.bqa-customer .navbtn {font-size:14px}
.bqa-admin .top {gap:14px}
.bqa-admin .page-intro h1{margin:0}
.bqa-admin .invoice-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.bqa-admin .admin-overview-top {margin-bottom:26px}
.bqa-admin .admin-summary {margin-top:24px}
.bqa-admin #view-billing>.card+.card{margin-top:16px}
.bqa-admin .alert-note {
  font-size:12px;background:#faf4e8;border:1px solid #ecdcc2;
  border-left:3px solid #ba8d58;padding:13px 16px;color:#72522e;
  border-radius:7px;margin-bottom:21px;
}
.bqa-admin .readonly-note{font-size:11px;color:#6d7e73}
.bqa-customer .headline {font-size:clamp(31px,3.4vw,45px);margin:5px 0 12px}
.bqa-customer .sectionhead {align-items:flex-start}
.bqa-customer .eyebrow{color:#47725b}
.bqa-customer .topbar h1 {font-family:inherit;font-size:13px;letter-spacing:.01em}
.bqa-customer .topbar .btn.ghost{padding:8px 12px}
.bqa-customer .metric {min-height:129px}
.bqa-customer .metric .value {font-size:clamp(25px,2.5vw,35px)}
.bqa-customer .setup-layout .span-8{min-width:0}
.bqa-customer .quick-action {
  width:100%;text-align:left;padding:14px;border:1px solid #d9e6d9;
  border-radius:8px;background:#f2f6ef;color:#2c5947;
  font-weight:700;display:flex;gap:10px;align-items:center;
}
.bqa-customer .quick-action:hover{background:#e8f1e6}
.bqa-customer .simple-billing {margin-bottom:24px}
.bqa-customer .billing-details {border:1px solid #e2e7dc;background:#fffefa;
  border-radius:12px;padding:22px 24px;margin-top:16px}
.bqa-customer .billing-details>summary {font-size:16px;font-weight:700;margin-bottom:0;cursor:pointer}
.bqa-customer .billing-details[open]>summary{padding-bottom:14px;margin-bottom:15px;border-bottom:1px solid #e0e7dd}
.bqa-customer .billing-details .card {padding:0;border:0;box-shadow:none;background:transparent}
.bqa-customer .billing-details .card h2{display:none}
.bqa-customer .billing-details .card p{margin-top:0}
.bqa-customer #view-billing .card>.grid {margin-top:18px}
.bqa-customer #view-billing .metric{background:#f7f9f4;border-radius:8px}
.bqa-customer .sidebar-footer{margin-top:36px}
.bqa-customer .view>.card{margin-bottom:17px}
#invoiceList a, #invoiceAdminList a{color:var(--brand)}
@media(max-width:1150px) {
  .s3{grid-column:span 6}
  .bqa-admin .page,.bqa-customer .page{padding:30px 24px 75px}
}
@media(max-width:940px) {
  .app{display:block}
  .side,.sidebar{position:relative;top:auto;width:100%;height:auto;max-height:none;padding:13px 19px;overflow:visible}
  .brand{margin-bottom:8px;padding:3px 0 14px}
  .navgroup{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}
  .navlabel,.side-label{width:100%;padding:5px 1px}
  .nav,.navbtn {width:auto;flex:0 0 auto;min-height:42px;padding:7px 12px}
  .side-footer,.sidebar-footer{display:none}
  .top,.topbar{position:sticky;height:63px;padding:0 22px}
  .s3,.s4,.s6{grid-column:span 6}
  .bqa-customer .span-8,.bqa-customer .span-7,.bqa-customer .span-5{grid-column:span 12}
}
@media(max-width:620px) {
  .bqa-admin .page,.bqa-customer .page{padding:23px 15px 70px}
  .top,.topbar{gap:8px;padding:0 15px}
  .top-context{display:none}
  .topbar .row{gap:5px}
  .topbar .statusline{display:none}
  .topbar .btn.ghost{font-size:11px;padding:7px 9px}
  .tenantpick{width:115px;min-width:0}
  .page-intro{display:block}
  .page-intro .btn{margin-top:12px}
  .s3,.s4,.s6,.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:span 12}
  .fields,.fieldgrid{grid-template-columns:minmax(0,1fr)}
  .grid{gap:12px}
  .card{padding:18px}
  .metric{min-height:100px}
  .metric .v,.metric .value{font-size:29px}
  .status-strip .btn{margin-left:0}
  .nav,.navbtn{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media(max-width:620px){input,textarea,select{font-size:16px}}

/* Final compositional refinements after visual review */
@media(min-width:1260px){
  .bqa-admin #view-overview>.grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bqa-admin #view-overview>.grid>.metric.s3{grid-column:span 1}
  .bqa-admin #view-overview>.grid>.s12{grid-column:1/-1}
}
@media(max-width:620px){
  .bqa-customer .sidebar{padding:12px 12px 9px}
  .bqa-customer .sidebar .brand{padding:2px 5px 12px;margin-bottom:6px}
  .bqa-customer .sidebar .navstack{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;align-items:center;scrollbar-width:thin;scrollbar-color:#6b8b7c #142a2b;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .bqa-customer .sidebar .navgroup{display:contents}
  .bqa-customer .sidebar .navlabel{display:none}
  .bqa-customer .sidebar .navbtn{flex:0 0 auto;width:auto;white-space:nowrap;min-height:41px;padding:8px 11px;margin:0 1px}
  .bqa-admin .side{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
  .bqa-admin .side .brand{flex:0 0 100%;padding-bottom:13px}
  .bqa-admin .side .side-label{display:none}
  .bqa-admin .side .nav{flex:0 0 auto;min-height:39px;margin:1px 0}
  .bqa-admin .side .nav-id{min-width:18px}
}