/* kaLLM participant portal: sign-in, choose a password, My account.
   The Field design of kallmlabs.com (Inter Tight, rules, bracket labels, the particle field),
   applied only while one of those three screens is open (body.portal). The recording
   journey keeps the Sessions look it shares with the desktop app. */
@font-face{font-family:"Inter Tight";src:url("portal/inter-tight-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("portal/inter-tight-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("portal/inter-tight-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("portal/inter-tight-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url("portal/plex-arabic-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url("portal/plex-arabic-500.woff2") format("woff2");font-weight:500;font-display:swap}

body.portal{
  --f-bg:#F6F4EF;--f-paper:#FBFAF7;--f-ink:#13233F;--f-navy:#17305A;--f-text:#4E586A;--f-mut:#6A7385;
  --f-rule:rgba(19,35,63,.14);--f-rule2:rgba(19,35,63,.08);--f-amber:#E2A22C;--f-gold:#C6881A;--f-red:#A33D3D;--f-gut:clamp(16px,3vw,40px);
  background:var(--f-bg);color:var(--f-ink);font-family:"Inter Tight",system-ui,"Segoe UI",sans-serif;font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip
}
body.portal.portal-ar,body.portal .fp[dir=rtl]{font-family:"Plex Arabic","Inter Tight","Segoe UI",Tahoma,sans-serif}
body.portal :focus-visible{outline:1px solid var(--f-amber);outline-offset:3px}

/* the bar: light, the horizontal lockup, a rule */
body.portal #topbar{background:var(--f-bg);color:var(--f-ink);height:auto;min-height:64px;padding:12px var(--f-gut);border-bottom:1px solid var(--f-rule);gap:16px}
body.portal #topbar .logo{height:32px;width:auto;margin-left:-5px}
body.portal #topbar .vsep,body.portal #topcrumb,body.portal #topmid{display:none}
body.portal #topright{margin-left:auto}
body.portal #topright .fbtn{padding:8px 14px;font-size:13px}
body.portal #toplang .p-langtoggle{background:transparent;border:1px solid var(--f-rule);border-radius:0;padding:0;box-shadow:none}
body.portal #toplang .p-langbtn{border-radius:0;color:var(--f-mut);background:transparent;font-family:inherit;font-weight:500;font-size:12.5px;padding:7px 10px}
body.portal #toplang .p-langbtn.on{background:var(--f-ink);color:var(--f-bg)}
body.portal #view{background:var(--f-bg)}

/* type */
body.portal .fp h1,body.portal .fp h2,body.portal .fp h3{font-family:inherit;color:var(--f-ink);font-weight:300;letter-spacing:-.04em;line-height:1.06;margin:0}
body.portal .fp p{margin:0}
body.portal .fp a{color:inherit}
.fp .br{display:block;font-size:13px;color:var(--f-mut);margin-bottom:16px;letter-spacing:0}
.fp .lede{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--f-ink);font-weight:300;letter-spacing:-.01em;max-width:34em}
.fp .muted{color:var(--f-mut);font-size:13.5px}

/* buttons: square, ink */
body.portal .fbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;padding:12px 20px;border:1px solid var(--f-ink);background:transparent;color:var(--f-ink);cursor:pointer;border-radius:0;box-shadow:none;min-height:0}
body.portal .fbtn:hover:not(:disabled){background:rgba(19,35,63,.05)}
body.portal .fbtn.solid{background:var(--f-ink);color:var(--f-bg)}
body.portal .fbtn.solid:hover:not(:disabled){background:var(--f-navy)}
body.portal .fbtn.small{padding:8px 13px;font-size:13px}
body.portal .fbtn.light{border-color:var(--f-bg);color:var(--f-bg)}
body.portal .fbtn.light:hover:not(:disabled){background:rgba(246,244,239,.1)}
body.portal .fbtn.amber{background:var(--f-amber);border-color:var(--f-amber);color:var(--f-ink)}
body.portal .fbtn.amber:hover:not(:disabled){background:#EDB443}
body.portal .fbtn.danger{border-color:var(--f-red);color:var(--f-red)}
body.portal .fbtn:disabled{opacity:.45;cursor:not-allowed}
.fp .btns{display:flex;flex-wrap:wrap;gap:10px}

/* forms */
body.portal .fp label{display:block;font-size:13px;color:var(--f-mut);font-weight:400;margin:16px 0 6px}
body.portal .fp input[type=text],body.portal .fp input[type=password],body.portal .fp input[type=email],body.portal .fp input[type=tel],body.portal .fp input:not([type]){
  width:100%;max-width:none;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--f-rule);background:var(--f-paper);color:var(--f-ink);border-radius:0;box-shadow:none;height:auto}
body.portal .fp input:focus{outline:1px solid var(--f-amber);outline-offset:0;border-color:transparent;box-shadow:none}
.fp .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;max-width:44em}
.fp .fgrid .full{grid-column:1/-1}
.fp .fielderr{color:var(--f-red);font-size:13px;min-height:18px;margin-top:6px}
.fp .fieldhint{color:var(--f-mut);font-size:13px;margin-top:6px}
.fp .formfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.fp .formfoot .fielderr,.fp .formfoot .fieldhint{margin:0;min-height:0}

/* sign-in and password: the field beside the form */
.fp.split{display:grid;grid-template-columns:1.1fr 1fr;min-height:calc(100vh - 65px);min-height:calc(100dvh - 65px)}
.fp.split .fieldwrap{position:relative;min-height:420px;border-right:1px solid var(--f-rule)}
.fp[dir=rtl].split .fieldwrap{border-right:0;border-left:1px solid var(--f-rule)}
.fp .fieldwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fp .flabel{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:13px;color:var(--f-mut);white-space:nowrap}
.fp.split .form{padding:clamp(28px,5vw,72px) var(--f-gut);display:flex;flex-direction:column;justify-content:center;max-width:580px;width:100%}
.fp.split h1{font-size:clamp(34px,3.6vw,54px)}
.fp.split .note{margin-top:14px;color:var(--f-text);font-size:15.5px;max-width:30em}
.fp.split .hint{font-size:13px;color:var(--f-mut);margin-top:22px;max-width:32em}
.fp.split .hint a{text-decoration:none;border-bottom:1px solid var(--f-amber)}
.fp .only{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:12px 0 0;border-top:1px solid var(--f-rule2);font-size:13.5px;color:var(--f-text);max-width:32em}
.fp .only::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--f-amber);margin-top:8px}

/* My account: the site's rows */
.fp.acct .phead{padding:clamp(28px,5vw,64px) var(--f-gut) clamp(32px,5vw,56px)}
.fp.acct .phead h1{font-size:clamp(34px,4.4vw,66px);max-width:15em}
.fp.acct .phead p{margin-top:20px;max-width:40em;font-size:17.5px;color:var(--f-text)}
.fp .rows{border-top:1px solid var(--f-rule)}
.fp .row{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:24px;padding:clamp(26px,3.6vw,44px) var(--f-gut);border-bottom:1px solid var(--f-rule)}
.fp .row > .l{font-size:13px;color:var(--f-mut);padding-top:5px}
.fp .row h2{font-size:clamp(26px,2.6vw,40px);max-width:18em}
.fp .row h3{font-size:clamp(21px,1.9vw,28px);letter-spacing:-.03em}
.fp .row p{max-width:44em;color:var(--f-text)}
.fp .row .body{min-width:0}
.fp .row .body > * + *{margin-top:16px}
.fp .row.tint{background:var(--f-paper)}
.fp .row.dark{background:var(--f-ink);color:var(--f-bg);border-bottom-color:transparent}
.fp .row.dark > .l,.fp .row.dark p{color:rgba(246,244,239,.74)}
body.portal .fp .row.dark h2,body.portal .fp .row.dark h3{color:var(--f-bg)}
.fp .code{font-size:clamp(30px,3.2vw,46px);font-weight:300;letter-spacing:.03em;font-feature-settings:"tnum" 1;direction:ltr;unicode-bidi:isolate}
.fp .kv{display:grid;grid-template-columns:minmax(150px,auto) 1fr;border-top:1px solid var(--f-rule2);max-width:46em;margin-top:0}
.fp .kv > *{padding:11px 0;border-bottom:1px solid var(--f-rule2);font-size:15px;margin:0}
.fp .kv dt{color:var(--f-mut);padding-inline-end:18px}
.fp .kv dd{color:var(--f-ink)}
.fp .fnum{font-family:inherit;font-weight:500;font-feature-settings:"tnum" 1;letter-spacing:.04em;direction:ltr;unicode-bidi:isolate}
.fp .chip{display:inline-block;font-size:12.5px;line-height:1.4;padding:3px 9px;border:1px solid var(--f-rule);color:var(--f-ink);white-space:nowrap}
.fp .chip.ok{border-color:var(--f-amber);background:rgba(226,162,44,.13)}
.fp .chip.no{color:var(--f-mut)}
.fp .chip.warn{border-color:var(--f-red);color:var(--f-red)}
.fp .agreed{list-style:none;margin:0;padding:0;border-top:1px solid var(--f-rule2);max-width:46em}
.fp .agreed li{display:grid;grid-template-columns:1fr auto;gap:8px 18px;padding:12px 0;border-bottom:1px solid var(--f-rule2);align-items:baseline;font-size:15px;color:var(--f-text)}
.fp .agreed li .req{font-size:12px;color:var(--f-mut);margin-inline-start:6px}
.fp .agreed li .ag-title{font-weight:600;color:var(--f-ink)}
/* My account: the side navigation (Dr. K, 12 October 2026) */
.fp .acctgrid{display:grid;grid-template-columns:220px minmax(0,1fr);border-top:1px solid var(--f-rule)}
.fp .acctgrid > .rows{border-top:0;border-inline-start:1px solid var(--f-rule);min-width:0}
.fp .acctnav{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:2px;padding:26px 14px 26px var(--f-gut)}
.fp[dir=rtl] .acctnav{padding:26px var(--f-gut) 26px 14px}
.fp .acctnav-h{font-size:12px;color:var(--f-mut);margin-bottom:8px}
.fp .acctnav-a{display:block;text-decoration:none;font-size:14.5px;color:var(--f-text);padding:7px 10px;border-inline-start:2px solid transparent}
.fp .acctnav-a:hover{color:var(--f-ink);background:rgba(226,162,44,.08)}
.fp .acctnav-a.on{color:var(--f-ink);font-weight:500;border-inline-start-color:var(--f-amber);background:rgba(226,162,44,.13)}
.fp .acctgrid .row{scroll-margin-top:84px}
.fp .older{font-size:13.5px;color:var(--f-mut)}
.fp .older a{text-decoration:none;border-bottom:1px solid var(--f-amber);color:var(--f-ink)}
.fp .acctrow{display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:center;padding:14px 0;border-top:0;border-bottom:1px solid var(--f-rule2)}
.fp #acct-sessions{border-top:1px solid var(--f-rule2);max-width:52em}
.fp .acctrow b{font-weight:500;font-feature-settings:"tnum" 1}
.fp .acctrow .rowbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.fp .scope{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--f-text);padding:10px 0;border-top:1px solid var(--f-rule2);margin:0;font-weight:400}
.fp .history{font-size:13.5px;color:var(--f-mut)}
.fp .history div{padding:6px 0;border-top:1px solid var(--f-rule2)}
.fp .warnline{border-left:3px solid var(--f-red);padding:8px 14px;color:var(--f-ink);background:rgba(163,61,61,.06);max-width:44em}
.fp[dir=rtl] .warnline{border-left:0;border-right:3px solid var(--f-red)}
.fp .foot{padding:26px var(--f-gut) 44px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--f-mut)}
.fp .foot a{text-decoration:none}
.fp .foot a:hover{color:var(--f-ink)}

/* the dialogs (withdraw, request, delete) and the toasts, while the portal is open */
body.portal .modalback{background:rgba(19,35,63,.42)}
body.portal .modal{border-radius:0;background:var(--f-bg);box-shadow:none;padding:28px 30px;font-family:inherit}
body.portal .modal h3{font-family:inherit;font-weight:400;letter-spacing:-.03em;font-size:26px;color:var(--f-ink)}
body.portal .modal p{color:var(--f-text);font-size:15px}
body.portal .modal .btn{border-radius:0;box-shadow:none;font-family:inherit;font-weight:500;font-size:14px;padding:11px 18px;border:1px solid var(--f-ink);background:transparent;color:var(--f-ink)}
body.portal .modal .btn.btn-gold,body.portal .modal .btn.btn-danger{background:var(--f-ink);color:var(--f-bg)}
body.portal .modal .radio-row{padding:10px 0;border-top:1px solid var(--f-rule2);margin:0;font-weight:400;color:var(--f-text);font-size:15px}
body.portal .toast{border-radius:0;background:var(--f-ink);font-family:inherit;font-size:13.5px}
body.portal .toast.err{background:var(--f-red)}

@media (max-width:1000px){
  .fp .acctgrid{grid-template-columns:1fr}
  .fp .acctgrid > .rows{border-inline-start:0;border-top:1px solid var(--f-rule)}
  .fp .acctnav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;padding:16px var(--f-gut)}
  .fp[dir=rtl] .acctnav{padding:16px var(--f-gut)}
  .fp .acctnav-h{width:100%;margin-bottom:2px}
  .fp .acctnav-a{border:1px solid var(--f-rule);padding:6px 10px;font-size:13.5px}
  .fp .acctnav-a.on{border-color:var(--f-amber)}
}
@media (max-width:900px){
  .fp.split{grid-template-columns:1fr;min-height:0}
  .fp.split .fieldwrap{min-height:clamp(220px,34vh,300px);border-right:0;border-bottom:1px solid var(--f-rule)}
  .fp[dir=rtl].split .fieldwrap{border-left:0}
  .fp.split .form{max-width:none;padding-top:32px;padding-bottom:56px}
}
@media (max-width:760px){
  .fp .row{grid-template-columns:1fr;gap:10px}
  .fp .row > .l{padding-top:0}
  .fp .fgrid{grid-template-columns:1fr}
  .fp .kv{grid-template-columns:1fr}
  .fp .kv dt{border-bottom:0;padding-bottom:0}
  .fp .kv dd{padding-top:2px}
  .fp .acctrow{grid-template-columns:1fr}
  .fp .acctrow .rowbtns{justify-content:flex-start}
  body.portal #topbar .logo{height:26px}
  body.portal .modal{padding:22px 20px}
}
@media (max-width:420px){
  .fp .btns .fbtn{flex:1 1 auto}
  body.portal #topright .fbtn{padding:7px 10px}
}
.fp[dir=rtl] .code{text-align:right}

/* the password standard: a Show / Hide button beside every password field */
.fp .pwrow{display:flex;gap:8px;align-items:stretch}
.fp .pwrow input{flex:1;min-width:0}
.fp .pwrow .pwshow{flex:none;white-space:nowrap}