/* Platform pages (login / admin / agent / no-access) on the groupeak design system (DESIGN-system.md, variant A "נקי").
   Load order in every page: vendor/fonts/heebo.css -> design/tokens.css -> app.css.
   vendor/ + design/ are COPIES synced by scripts/build.mjs from intake/confirm (single source of truth); do not edit them here.
   Platform chrome uses the default brand (#1a6aa6); the orange --accent is gone. Class names are the ones web/src/*.js emits. */

body{background:var(--n-50)}
.ltr{direction:ltr; text-align:right; unicode-bidi:plaintext}
td.ltr{direction:ltr; text-align:right; unicode-bidi:plaintext}

/* ---------------------------------------------------------------- top bar */
header.top{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); background:#fff; border-bottom:var(--line); border-top:4px solid var(--brand-line); padding:var(--s3) var(--s5)}
header.top .brand{font:700 18px/26px var(--font); color:var(--n-900)}
header.top .brand span{color:var(--brand-text)}
header.top .who{display:flex; align-items:center; gap:var(--s3); font:var(--small); color:var(--muted)}

/* ---------------------------------------------------------------- layout + cards */
main{max-width:1000px; margin:0 auto; padding:var(--s5) var(--s4)}
@media (min-width:640px){ main{padding:var(--s6)} }
.card{margin-bottom:var(--s5); padding:var(--s5)}
.card.accent{background:#fff}
.card > h2,section.card > h2{border-bottom:var(--line); padding-bottom:var(--s2); margin-bottom:var(--s3)}
form h2{margin-top:var(--s6); border-bottom:var(--line); padding-bottom:var(--s2); margin-bottom:var(--s3)}
h1{margin-bottom:var(--s2)}
p.hint{font:var(--small); color:var(--muted); margin-top:var(--s1)}
.center{text-align:center}

/* ---------------------------------------------------------------- form controls (plain elements, as emitted by the pages) */
label{display:block; font:600 13px/20px var(--font); color:var(--n-700); margin:var(--s3) 0 6px}
input,select,textarea{width:100%; min-height:48px; padding:10px 12px; border:var(--line-strong); border-radius:var(--r-md); font:400 16px/24px var(--font); color:var(--n-900); background:#fff}
input[type=file]{min-height:0; padding:var(--s2); font:var(--small)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none; box-shadow:var(--focus)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s4)}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 var(--s4)}
@media (max-width:640px){ .row,.row3{grid-template-columns:1fr} }
form .row > div > button{margin-top:var(--s4)}

/* ---------------------------------------------------------------- buttons (button.primary / .secondary / .ghost / .danger / .small) */
button{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:48px; padding:0 var(--s5); border:2px solid transparent; border-radius:var(--r-md); font:600 16px/20px var(--font); cursor:pointer; background:transparent; color:var(--n-700)}
button::after{content:""; position:absolute; inset:-2px; border-radius:inherit; background:transparent; pointer-events:none}
button:hover::after{background:rgba(0,0,0,.08)}
button.primary{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
button.secondary{background:#fff; color:var(--brand-text); border-color:var(--brand-text)}
button.ghost{background:transparent; color:var(--n-700); border-color:var(--n-300)}
button.danger{background:#fff; color:var(--bad); border-color:var(--bad)}
button.small{min-height:44px; padding:0 var(--s4); font-size:15px}
button:disabled{background:var(--n-200); color:var(--n-500); border-color:var(--n-200); cursor:not-allowed}
button:disabled::after{background:transparent}
.stack{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s3)}
.stack > * + *{margin-top:0}

/* ---------------------------------------------------------------- tabs (agent area): first tab selected by default */
.tabs{display:flex; flex-wrap:wrap; gap:var(--s1); margin-bottom:var(--s4); border-bottom:var(--line)}
.tab{min-height:44px; padding:0 var(--s4); border:0; border-bottom:3px solid transparent; border-radius:0; background:none; color:var(--n-600); font:600 15px/20px var(--font)}
.tab[aria-selected=true]{color:var(--brand-text); border-bottom-color:var(--brand-line)}
.tab:hover::after{background:transparent}

/* ---------------------------------------------------------------- tables + agent status badges */
table{width:100%; border-collapse:collapse; font:var(--small)}
th{background:var(--n-100); color:var(--n-700); text-align:right; padding:var(--s2) var(--s3); font:600 13px/20px var(--font)}
td{padding:var(--s2) var(--s3); border-bottom:var(--line); vertical-align:middle; color:var(--n-900)}
.audit td{font:var(--cap); font-weight:400}
.badge.active{background:var(--ok-bg); color:var(--ok)}
.badge.suspended{background:var(--bad-bg); color:var(--bad)}

/* ---------------------------------------------------------------- inline messages (text always carries the meaning, colour only supports it) */
.msg{display:none; margin-top:var(--s3); padding:var(--s2) var(--s3); border-radius:var(--r-md); font:var(--small)}
.msg.show{display:block}
.msg.ok{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line)}
.msg.err{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-line)}
.msg.info{background:var(--brand-50); color:var(--brand-text); border:1px solid var(--brand-100)}

/* ---------------------------------------------------------------- logo upload */
.logo-box{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s2)}
.logo-prev{width:140px; height:90px; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px dashed var(--n-300); border-radius:var(--r-md); background:var(--n-50); font:var(--cap); color:var(--muted)}
.logo-prev img{display:block; max-width:100%; max-height:100%; width:auto; height:auto}

/* ---------------------------------------------------------------- login / no-access */
.login-wrap{max-width:440px; margin:7vh auto; padding:0 var(--s4)}
.google{width:100%; background:#fff; color:var(--n-900); border:var(--line-strong); gap:var(--s3); font-size:16px}
.google .g{font:700 20px/20px var(--font); background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0); -webkit-background-clip:text; background-clip:text; color:transparent}   /* Google mark; not inside any PDF capture */
.sep{display:flex; align-items:center; gap:var(--s3); margin:var(--s5) 0; font:var(--small); color:var(--muted)}
.sep::before,.sep::after{content:""; flex:1; height:1px; background:var(--n-200)}

/* dev-only notes in the markup stay out of the UI */
.todo{display:none}

/* ---------------------------------------------------------------- P1a-2: orders list + bank accounts (agent area) */
a.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 var(--s5); border:2px solid transparent; border-radius:var(--r-md); font:600 16px/20px var(--font); text-decoration:none}
a.btn.primary{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
a.btn:focus-visible{outline:none; box-shadow:var(--focus)}
.head-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; border-bottom:var(--line); padding-bottom:var(--s2); margin-bottom:var(--s3)}
.head-row h2{border:0; margin:0; padding:0}
.filters{display:grid; grid-template-columns:200px 1fr; gap:0 var(--s4); margin-bottom:var(--s3)}
@media (max-width:640px){ .filters{grid-template-columns:1fr} }
.badge.revoked{background:var(--bad-bg); color:var(--bad)}
table.orders td.acts,table.banks td.acts{white-space:nowrap}
table.orders td.acts button,table.banks td.acts button{min-height:36px; padding:0 var(--s3); font-size:14px; margin-inline-end:var(--s1)}
td.empty{padding:var(--s5) var(--s3); color:var(--muted); text-align:center}
/* QA §29: on a phone the orders table becomes one card per summary (status + actions visible without sideways scrolling) */
@media (max-width:640px){
  table.orders thead{display:none}
  table.orders,table.orders tbody,table.orders tr,table.orders td{display:block; width:100%; box-sizing:border-box}
  table.orders tr{border:var(--line); border-radius:var(--r-md); padding:var(--s2) var(--s3); margin-bottom:var(--s2); background:#fff}
  table.orders td{border:0; padding:2px 0}
  table.orders td[data-l]::before{content:attr(data-l) ": "; color:var(--muted)}
  table.orders td.ltr[data-l]{direction:rtl; text-align:right}
  table.orders td.st{padding-bottom:var(--s1)}
  table.orders td.acts{white-space:normal; display:flex; flex-wrap:wrap; gap:var(--s2); padding-top:var(--s2)}
  table.orders td.acts button{margin:0}
  table.orders td.empty{border:0}
}
tr.archived td{color:var(--n-500)}
.add-bank{margin-top:var(--s4)}
.add-bank summary{cursor:pointer; font:600 15px/24px var(--font); color:var(--brand-text); min-height:44px; display:flex; align-items:center}
label.check{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s6)}
label.check input{width:20px; min-height:20px; height:20px}

/* ---------------------------------------------------------------- P1a-6: admin cases + case view, agent "report a problem" */
.filters3{display:grid; grid-template-columns:200px 180px 1fr; gap:0 var(--s4); margin-bottom:var(--s3)}
@media (max-width:640px){ .filters3{grid-template-columns:1fr} }
.inline{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.inline input{width:auto}
.badge.case{background:var(--warn-bg); color:var(--warn)}
.case-head{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-bottom:var(--s3)}
.case-head h2{margin:0; border:0; padding:0}
.case-meta{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--s2) var(--s4); font:var(--small); margin:0}
.case-meta dt{font:var(--cap); color:var(--muted)}
.case-meta dd{margin:0; color:var(--n-900); overflow-wrap:anywhere}
.case-actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}
.kv{width:100%}
.kv th{width:200px; background:none; color:var(--muted); font:var(--cap)}
.kv td{overflow-wrap:anywhere}
.hash{font:12px/18px ui-monospace,Consolas,monospace; direction:ltr; unicode-bidi:isolate; overflow-wrap:anywhere}
pre.raw{max-height:420px; overflow:auto; padding:var(--s3); background:var(--n-50); border:var(--line); border-radius:var(--r-md); font:12px/18px ui-monospace,Consolas,monospace; direction:ltr; text-align:left; white-space:pre-wrap}
.findings li{margin:2px 0}
.findings .sev{font:var(--cap); padding:0 6px; border-radius:var(--r-sm); background:var(--n-100)}
.findings .sev.blocker{background:var(--bad-bg); color:var(--bad)}
.findings .sev.warning{background:var(--warn-bg); color:var(--warn)}
.reveal-box{margin-top:var(--s3); padding:var(--s3); border:2px solid var(--warn-line); background:var(--warn-bg); border-radius:var(--r-md)}
.case-text{white-space:pre-wrap; padding:var(--s2) var(--s3); background:var(--n-50); border-radius:var(--r-md); margin:var(--s1) 0}
/* frozen document (summary.js renderSummaryHTML, read-only) */
.doc-view .sum{font:var(--small)}
.doc-view .sum-head{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3)}
.doc-view .sum-logo{width:48px; height:48px; border-radius:var(--r-md); background:var(--n-100); display:flex; align-items:center; justify-content:center; font-weight:700}
.doc-view .sum-biz{font-weight:700}
.doc-view .sum-sub{font:var(--cap); color:var(--muted)}
.doc-view .sum-title{margin:var(--s3) 0}
.doc-view h3{margin:var(--s4) 0 var(--s2); font:600 15px/22px var(--font)}
.doc-view h4{margin:var(--s3) 0 var(--s1); font:600 14px/20px var(--font)}
.doc-view .sum-table{margin-bottom:var(--s2)}
.doc-view .sum-total{font-weight:700; margin-top:var(--s2)}
.doc-view .sum-ph{display:none}
.doc-view .sum-gap td{padding:2px; border:0}

/* P1a-trouble: "אבחון" link (agents list + case view) */
.diag-link{font:var(--small); margin-inline-start:6px; white-space:nowrap}