/* additions for the server-rendered version (the mock-up drew these with script) */
a.btn,a.nav,a.chip-btn{text-decoration:none;color:inherit}
a.btn.primary{color:var(--brand-on)}
a.nav{display:flex}
form.inline{display:inline;margin:0}
.btn-link{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font:inherit;text-align:left}
.btn-link:hover{text-decoration:underline}
.flash-wrap{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:300;display:grid;gap:8px;max-width:calc(100% - 32px)}
.toast.err{background:#5a1d19}
.toast.err svg{color:#ffb4ab}
.panel.folded>:not(.panel-h){display:none}
.fold-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:14.5px;color:inherit;padding:0}
.fold-ch{display:inline-grid;transition:transform .15s}
.panel.folded .fold-ch{transform:rotate(-90deg)}
.fold-ch svg{width:14px;height:14px}
.fold-sum{font-size:12.5px;color:var(--text-3);margin-right:auto;margin-left:6px}
.fold-all{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin:0 0 -4px}
.idv-person .idv-grid{display:block}
.idv-body{padding:12px 14px}
.ck-list{display:grid;gap:0}
.ck-row{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2)}
.ck-row:last-child{border-bottom:0}
.ck-row form{display:contents}
.bo-seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.bo-seg button{border:0;background:var(--surface);padding:4px 12px;cursor:pointer;font-size:12.5px;border-right:1px solid var(--line)}
.bo-seg button:last-child{border-right:0}
.bo-seg button[aria-pressed="true"]{background:var(--brand-tint);font-weight:600}
.bo-nc{font-size:12px;color:var(--amber);margin-left:6px}
.t2{padding:8px 12px 12px 28px;background:var(--surface-2)}
.t2h{font-size:12px;color:var(--text-3);margin-bottom:6px}
.corp-row td{background:var(--surface-2)}
.devotp{font-family:var(--mono);font-size:20px;letter-spacing:.3em;text-align:center;background:var(--amber-bg);border-radius:8px;padding:10px;margin:0 0 14px}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line-2)}
.perm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.scope-opts{display:grid;gap:6px;margin-bottom:10px}
.pw-box{font-family:var(--mono);font-size:22px;letter-spacing:.06em;background:var(--amber-bg);border-radius:8px;padding:14px;text-align:center;user-select:all}
.otp-one{font-family:var(--mono);font-size:22px;letter-spacing:.5em;text-align:center;max-width:240px}
html,body{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
[hidden]{display:none !important}

/* customer portal: on a phone each table row becomes a card, so the buttons are never pushed off-screen */
@media (max-width: 640px) {
  .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; width: 100%; }
  .tbl-stack thead { display: none; }
  .tbl-stack tr { padding: 10px 14px; border-top: 1px solid var(--line-2); }
  .tbl-stack td { padding: 2px 0; border: 0; white-space: normal; text-align: left !important; }
  .tbl-stack td:last-child { margin-top: 6px; }
  .tbl-stack td:last-child .btn-row { justify-content: flex-start !important; }
}

/* a logo set by the Super Admin replaces the icon in the brand mark */
.brand-mark.has-logo { width: auto; height: 32px; background: transparent; border-radius: 0; box-shadow: none; }
.brand-logo { display: block; max-height: 32px; max-width: 110px; width: auto; height: auto; object-fit: contain; }

.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; }

/* engagement letter e-signing (portal) */
.esg-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
#esg-pad { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; border: 1px dashed var(--line); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.esg-viewer { display: grid; gap: 14px; justify-items: center; background: var(--surface-2, #eef1f5); padding: 12px; border-radius: 8px; overflow-x: auto; }
.esg-page { position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); max-width: 100%; }
.esg-page canvas { display: block; width: 100%; height: auto; }
.esg-layer { position: absolute; inset: 0; }
.esg-mark { position: absolute; cursor: move; outline: 2px dashed var(--accent, #2563eb); outline-offset: 2px; touch-action: none; user-select: none; }
.esg-mark img { display: block; width: 100%; height: auto; pointer-events: none; }
.esg-mark:focus-visible { outline-style: solid; }
.esg-grip { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: var(--accent, #2563eb); border-radius: 4px; cursor: nwse-resize; touch-action: none; }
.esg-x { position: absolute; top: -14px; right: -14px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #b91c1c; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
#esign > .panel { width: 100%; }

/* ---- customer portal: guided steps */
.wiz{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
@media (max-width:900px){.wiz{grid-template-columns:minmax(0,1fr)}}
.wiz-steps ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wiz-step a{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2);text-decoration:none;font-size:13.5px;background:var(--surface)}
.wiz-step .wiz-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface-2,#eef1f6);color:var(--text-2)}
.wiz-step.now a{border-color:var(--brand,#2f5bff);color:var(--text);font-weight:600}
.wiz-step.now .wiz-n{background:var(--brand,#2f5bff);color:#fff}
.wiz-step.done .wiz-n{background:var(--green,#1f9d63);color:#fff}
.wiz-intro{padding:12px 14px;border-radius:10px;background:var(--surface-2,#f4f6fb);border:1px solid var(--line-2);max-width:78ch}
.wiz-help{padding:14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);display:grid;gap:6px;font-size:13.5px;position:sticky;top:76px}
@media (max-width:900px){.wiz-help{position:static}}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.wiz-hero .wiz-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.wiz-tile{padding:12px;border:1px solid var(--line-2);border-radius:10px;display:grid;gap:4px;font-size:13px}
.wiz-tile span{color:var(--text-2)}
.wiz-list{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.wiz-sum{display:flex;gap:10px;align-items:flex-start;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.wiz-sum:last-child{border-bottom:0;padding-bottom:0}
.wiz-miss{color:var(--amber,#b26a00);font-size:13px;margin-top:2px}
.wiz-block{padding:10px 12px;border-radius:10px;display:grid;gap:2px}
.wiz-block.bad{background:var(--red-bg,#fdecec);color:var(--red,#b42318)}
.wiz-block.good{background:var(--green-bg,#e8f6ee);color:var(--text)}
.input[aria-invalid="true"] { border-color: var(--red, #d92d20); box-shadow: 0 0 0 2px rgba(217, 45, 32, .15); }
.miss-msg { color: var(--red, #d92d20); font-size: 12px; margin-top: 3px; }
.ret-list { display: grid; gap: 6px; }
.ret-row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }

/* licence rows on the company forms */
.lic-rows{display:grid;gap:8px;margin-bottom:8px}
.lic-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:10px;align-items:end}
@media (max-width:640px){.lic-row{grid-template-columns:1fr}}

/* document store: one file browser in one panel */
.fb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.fb-path{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
.fb-path a{color:var(--text-2);text-decoration:none}.fb-path a:hover{text-decoration:underline}.fb-path .sep{color:var(--text-3)}
.fb-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fb-tools .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.fb-tools .seg button{background:none;border:0;padding:5px 10px;cursor:pointer;color:var(--text-2)}
.fb-tools .seg button[aria-pressed=true]{background:var(--brand-tint);color:var(--brand)}
.fb-search{padding:12px 16px;border-bottom:1px solid var(--line-2)}
.fb-list{display:flex;flex-direction:column}
.fb-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line-2)}
.fb-row:last-child{border-bottom:0}.fb-row:hover{background:var(--brand-tint)}
.fb-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none}
.fb-text{display:flex;flex-direction:column;min-width:0}
.fb-ico{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--brand-tint);color:var(--brand);font-size:10px;font-weight:700}
.fb-ico.pdf{background:#fee2e2;color:#b91c1c}.fb-ico.img{background:#dbeafe;color:#1d4ed8}
.fb-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-sub{font-size:12.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-meta{display:flex;gap:18px;color:var(--text-2);font-size:12.5px;align-items:center;white-space:nowrap}
.fb-act{display:flex;gap:4px;flex:none}
.fb .empty{padding:32px 16px;text-align:center}
html[data-fbview=grid] .fb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:16px}
html[data-fbview=grid] .fb-row{flex-direction:column;align-items:flex-start;border:1px solid var(--line-2);border-radius:10px;padding:14px;gap:8px}
html[data-fbview=grid] .fb-row:last-child{border-bottom:1px solid var(--line-2)}
html[data-fbview=grid] .fb-main{flex-direction:column;align-items:flex-start;width:100%}
html[data-fbview=grid] .fb-ico{width:52px;height:52px;font-size:12px}
html[data-fbview=grid] .fb-meta{flex-direction:column;align-items:flex-start;gap:2px}
html[data-fbview=grid] .fb-name,html[data-fbview=grid] .fb-sub{white-space:normal;word-break:break-word}
@media (max-width:700px){.fb-meta{display:none}}

.pg-hide{display:none !important}
.pg-js{flex-wrap:wrap}

/* a button that is working shows a spinner (sign-in, and every button that sends its form in the background) */
.btn[aria-busy="true"]{pointer-events:none;opacity:.85}
.btn[aria-busy="true"]::after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:amax-spin .7s linear infinite}
@keyframes amax-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn[aria-busy="true"]::after{animation-duration:2s}}