/* Gravita Support mockups. Tokens copied from gravitatech.com (site.css, live source wt23) so the app looks like the site.
   Orange is only the fill of the main action buttons; marks and states are navy, blue and neutral, with small state colours for times. */
@font-face{font-family:"Carlito";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/carlito-400.woff2) format("woff2")}
@font-face{font-family:"Carlito";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/carlito-700.woff2) format("woff2")}
:root{
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F5F7FC;--surface-3:#EEF2FA;--text:#0C1844;--muted:#46506B;--navy:#0C1844;
  --accent:#2A4BB0;--accent-text:#2A4BB0;--accent-soft:rgba(42,75,176,.08);--on-accent:#FFFFFF;--line:rgba(12,24,68,.12);--line-2:rgba(12,24,68,.2);--focus:#2A4BB0;
  --action:#E07B00;--action-hover:#C96E00;--on-action:#0C1844;
  --ok:#1C6B45;--ok-soft:rgba(28,107,69,.09);--warn:#8A5300;--warn-soft:rgba(176,108,0,.1);--bad:#B42318;--bad-soft:rgba(180,35,24,.08);
  --me:#0C1844;--on-me:#FFFFFF;--bot:#F5F7FC;
  --shadow:0 2px 6px rgba(12,24,68,.06),0 10px 28px rgba(12,24,68,.08);
  --font:"Carlito",Calibri,"Segoe UI",Arial,sans-serif;
  --fs-0:.9375rem;--fs-1:1.125rem;--fs-2:1.40625rem;--fs-3:1.75rem;--fs-4:2.1875rem;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;
  --radius:10px;--radius-lg:18px;--max:1240px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --on-accent:#0C1844;--bg:#080D26;--surface:#0E163D;--surface-2:#0B1233;--surface-3:#121C4A;--text:#EEF1FA;--muted:#B4BED8;--navy:#080D26;
  --accent:#8FA6EE;--accent-text:#8FA6EE;--accent-soft:rgba(143,166,238,.12);--line:rgba(238,241,250,.14);--line-2:rgba(238,241,250,.24);--focus:#8FA6EE;--action-hover:#F2A54A;
  --ok:#7DD3A8;--ok-soft:rgba(125,211,168,.1);--warn:#F2C46B;--warn-soft:rgba(242,196,107,.1);--bad:#FF9C8F;--bad-soft:rgba(255,156,143,.1);
  --me:#2A4BB0;--on-me:#FFFFFF;--bot:#16214F;--shadow:0 2px 6px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{
  --on-accent:#0C1844;--bg:#080D26;--surface:#0E163D;--surface-2:#0B1233;--surface-3:#121C4A;--text:#EEF1FA;--muted:#B4BED8;--navy:#080D26;
  --accent:#8FA6EE;--accent-text:#8FA6EE;--accent-soft:rgba(143,166,238,.12);--line:rgba(238,241,250,.14);--line-2:rgba(238,241,250,.24);--focus:#8FA6EE;--action-hover:#F2A54A;
  --ok:#7DD3A8;--ok-soft:rgba(125,211,168,.1);--warn:#F2C46B;--warn-soft:rgba(242,196,107,.1);--bad:#FF9C8F;--bad-soft:rgba(255,156,143,.1);
  --me:#2A4BB0;--on-me:#FFFFFF;--bot:#16214F;--shadow:0 2px 6px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img,svg{max-width:100%;display:block}
a{color:var(--accent-text);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-weight:700;line-height:1.2;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(1.9rem,3vw,2.375rem)}h2{font-size:var(--fs-2)}h3{font-size:var(--fs-1)}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:var(--fs-0)}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--s3);width:100%}
main{flex:1}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* header: the site's header, with the app name beside the logo */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:var(--s3);min-height:84px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);flex:none}
.brand img{height:58px;width:auto;min-width:160px}
.brand .logo-dark{display:none}
:root[data-theme="dark"] .brand .logo-light{display:none}:root[data-theme="dark"] .brand .logo-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo-light{display:none}:root:not([data-theme="light"]) .brand .logo-dark{display:block}}
.app-name{font-size:19px;font-weight:700;line-height:1.1;padding-left:14px;border-left:1px solid var(--line-2);white-space:nowrap}
.nav{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px}
.nav ul a{color:var(--text);text-decoration:none;font-weight:700;padding:8px 2px;border-bottom:3px solid transparent;white-space:nowrap}
.nav ul a:hover{color:var(--accent-text)}
.nav ul a[aria-current="page"]{border-bottom-color:var(--accent)}
.nav-tools{display:flex;align-items:center;gap:12px}
.who{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap}
.who .ini{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--text);font-size:14px;letter-spacing:.02em}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:48px;height:48px;color:var(--text);cursor:pointer;flex:none}
.menu-toggle svg{width:24px;height:24px;margin:auto}
.menu-toggle .i-close{display:none}.menu-toggle[aria-expanded="true"] .i-open{display:none}.menu-toggle[aria-expanded="true"] .i-close{display:block}
.theme-narrow{display:none}
.hdr-new{margin-left:4px}
@media (max-width:1180px){.app-name{display:none}}
@media (max-width:960px){
  .site-header .wrap{gap:10px}
  .theme-narrow{display:inline-flex;margin-left:auto;width:44px;padding:0;justify-content:center;gap:0}
  .theme-narrow .gtheme-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .app-name{display:block;font-size:16px;padding-left:10px}
  .menu-toggle{display:grid}
  .nav{position:fixed;inset:84px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:var(--s2);padding:var(--s2) var(--s3) var(--s3);display:none;box-shadow:0 18px 30px rgba(12,24,68,.12)}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;gap:0}
  .nav ul a{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav ul a[aria-current="page"]{border-bottom-color:var(--line);color:var(--accent-text)}
  .nav-tools{flex-wrap:wrap}
  .nav-tools .theme-wide{display:none}
  .hdr-new{margin-left:0;flex:1 1 100%}
}
@media (max-width:760px){.wrap{padding-inline:var(--s2)}.brand img{height:50px;min-width:152px}.site-header .wrap{min-height:76px}.nav{inset:76px 0 auto 0}}
@media (max-width:400px){.app-name{display:none}}

/* footer: no logo (brand rule) */
.site-footer{border-top:1px solid var(--line);background:var(--surface-2);margin-top:var(--s6)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;align-items:center;padding-block:var(--s3);font-size:var(--fs-0);color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--s3)}
.site-footer a{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 22px;border-radius:999px;font:inherit;font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;border:2px solid transparent;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--action);color:var(--on-action)}
.btn-primary:hover{background:var(--action-hover);color:var(--on-action)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--text)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent-text)}
.btn-quiet{background:transparent;color:var(--accent-text);border-color:var(--line-2)}
.btn-quiet:hover{border-color:var(--accent)}
.btn-sm{min-height:40px;padding:6px 16px;font-size:16px}
.btn-block{width:100%}
.link{font-weight:700;color:var(--accent-text);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline}
.link .i{width:18px;height:18px}

/* page head */
.page-head{padding-block:var(--s5) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:flex-end;justify-content:space-between}
.page-head .eyebrow{font-size:16px;font-weight:700;color:var(--accent-text);margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-head .eyebrow a{text-decoration:none}
.page-head .sub{color:var(--muted);margin-top:8px;font-size:var(--fs-1)}
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:16px;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--accent-text)}
.crumb .i{width:14px;height:14px}

/* layout */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s4);align-items:start}
.cols-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.stack{display:flex;flex-direction:column;gap:var(--s2)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s4)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:1000px){.cols{grid-template-columns:1fr}}
@media (max-width:760px){.cols-even{grid-template-columns:1fr}.page-head{padding-block:var(--s4) var(--s3)}}

/* panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s3)}
.panel.raised{box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.panel-head h2{font-size:21px}
.section{margin-top:var(--s5)}
.section > h2{margin-bottom:var(--s2)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.section-head h2{font-size:24px}
@media (max-width:760px){.panel{padding:var(--s2) 18px}.section{margin-top:var(--s4)}}

/* key and value */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:10px var(--s3);margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:700;overflow-wrap:anywhere}
@media (max-width:420px){.kv{grid-template-columns:minmax(92px,max-content) 1fr;gap:10px 14px}}

/* state marks: a small shape and a word, never colour alone */
.st{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:16px;white-space:nowrap;color:var(--text)}
.st::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.st-open::before{background:transparent;border:2px solid var(--accent)}
.st-progress::before{background:var(--accent)}
.st-waiting{color:var(--accent-text)}
.st-waiting::before{background:transparent;border:2px solid var(--accent);border-radius:2px;transform:rotate(45deg);width:8px;height:8px}
.st-resolved::before{background:var(--ok)}
.st-closed{color:var(--muted)}.st-closed::before{background:var(--muted);opacity:.6}
.type{font-size:16px;color:var(--muted);white-space:nowrap}
.sev{display:inline-flex;align-items:center;gap:8px;font-size:16px;white-space:nowrap}
.sev .bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.sev .bars i{width:4px;border-radius:1px;background:var(--line-2)}
.sev .bars i:nth-child(1){height:5px}.sev .bars i:nth-child(2){height:8px}.sev .bars i:nth-child(3){height:11px}.sev .bars i:nth-child(4){height:14px}
.sev[data-s="1"] .bars i{background:var(--text)}
.sev[data-s="2"] .bars i:nth-child(-n+3){background:var(--text)}
.sev[data-s="3"] .bars i:nth-child(-n+2){background:var(--text)}
.sev[data-s="4"] .bars i:nth-child(1){background:var(--text)}
.sla{display:inline-flex;align-items:center;gap:6px;font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sla .i{width:17px;height:17px}
.sla-ok{color:var(--text)}
.sla-warn{color:var(--warn);font-weight:700}
.sla-met{color:var(--ok)}
.sla-missed{color:var(--bad);font-weight:700}
.sla-paused{color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:6px;background:var(--surface-3);font-size:15px;font-weight:700;white-space:nowrap;color:var(--text)}

/* tables: rows stack into cards on phones */
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th{text-align:left;font-weight:700;color:var(--muted);font-size:15px;padding:10px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--accent-soft)}
.tbl .t-title a{font-weight:700;color:var(--text);text-decoration:none;font-size:17px}
.tbl .t-title a:hover{color:var(--accent-text);text-decoration:underline}
.tbl .t-num{font-variant-numeric:tabular-nums;color:var(--muted);font-size:15px;display:block;margin-bottom:2px}
.tbl-wrap{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
@media (max-width:760px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{padding:0;border:0}
  .tbl td + td{margin-top:8px}
  .tbl td[data-l]{display:flex;justify-content:space-between;gap:12px;align-items:center}
  .tbl td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:15px}
  .tbl tbody tr:hover td{background:none}
}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lbl{font-weight:700;font-size:16px}
.field .hint{font-size:15px;color:var(--muted)}
.input,.select,.textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface);color:var(--text);font:inherit;font-size:17px}
.textarea{min-height:120px;resize:vertical;line-height:1.5}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.input:focus,.select:focus,.textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent}
.input[readonly]{background:var(--surface-2);color:var(--muted)}
.input-wrap{position:relative}
.input-wrap .eye{position:absolute;right:4px;top:4px;width:40px;height:40px;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:8px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s3)}
.form-grid .full{grid-column:1/-1}
@media (max-width:760px){.form-grid{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:16px;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.radio-cards{display:grid;gap:10px}
.rc{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--radius);cursor:pointer;background:var(--surface)}
.rc input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--accent);flex:none}
.rc:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}
.field label.rc,.rc{font-weight:400;font-size:17px}
.rc b{display:block;font-weight:700}
.rc span{font-size:15px;color:var(--muted)}
.drop{border:2px dashed var(--line-2);border-radius:var(--radius-lg);padding:var(--s3);display:flex;gap:var(--s2);align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;color:var(--muted)}
.drop .i{width:28px;height:28px;color:var(--accent)}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:16px}
.rules li{display:flex;gap:8px;align-items:center}
.rules .i{width:18px;height:18px}
.rules .ok{color:var(--ok)}
.rules .no{color:var(--muted)}
.alert[hidden]{display:none}
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius);background:var(--surface-3);font-size:16px}
.alert .i{margin-top:2px;color:var(--accent)}
.alert.bad{background:var(--bad-soft)}.alert.bad .i{color:var(--bad)}

/* file chips */
.files{display:flex;flex-wrap:wrap;gap:10px}
.file{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--text);font-size:15px;max-width:100%}
.file .ft{width:34px;height:40px;border-radius:5px;display:grid;place-items:end center;padding-bottom:4px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--accent-text);background:var(--surface-3);flex:none;position:relative}
.file .ft::before{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 9px 9px 0;border-color:transparent var(--bg) var(--line-2) transparent}
.file b{display:block;font-size:15px;overflow-wrap:anywhere}
.file span{color:var(--muted);font-size:14px}
.thumb{width:132px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);font-size:14px;color:var(--muted);text-decoration:none}
.thumb svg{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.thumb span{display:block;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* conversation */
.thread{display:flex;flex-direction:column;gap:var(--s3)}
.msg{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px}
.msg .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--surface-3);color:var(--text)}
.msg .av.team{background:var(--navy);color:#fff;border:1px solid var(--line-2)}
.msg-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
.msg-head b{font-size:17px}
.msg-head span{font-size:15px;color:var(--muted)}
.msg-body{background:var(--surface);border:1px solid var(--line);border-radius:4px var(--radius-lg) var(--radius-lg) var(--radius-lg);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.msg.team .msg-body{background:var(--surface-2)}
.sys{position:relative;color:var(--muted);font-size:15px;padding-left:76px}
.sys::before{content:"";position:absolute;left:58px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.sys b{color:var(--text)}
.reply{border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.reply textarea{border:0;border-radius:0;min-height:110px}
.reply textarea:focus{outline:none}
.reply-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--line);flex-wrap:wrap}
@media (max-width:760px){.msg{grid-template-columns:36px minmax(0,1fr);gap:10px}.msg .av{width:36px;height:36px;font-size:13px}.sys{padding-left:62px}.sys::before{left:46px}.msg-body{padding:14px}}

/* timeline */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl li{position:relative;padding:0 0 18px 26px;font-size:16px}
.tl li::before{content:"";position:absolute;left:4px;top:7px;width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);background:var(--surface)}
.tl li::after{content:"";position:absolute;left:9px;top:20px;bottom:0;width:2px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li.now::before{background:var(--accent)}
.tl b{display:block}
.tl span{color:var(--muted);font-size:15px}

/* service level clock */
.clock{display:grid;gap:14px}
.clock-row{display:grid;gap:6px}
.clock-row .top{display:flex;justify-content:space-between;gap:10px;font-size:16px}
.bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.bar.met i{background:var(--ok)}
.bar.warn i{background:var(--warn)}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:var(--s3);overflow-x:auto;scrollbar-width:none}
.tabs a{padding:12px 14px;font-weight:700;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap;margin-bottom:-1px}
.tabs a[aria-current="true"]{color:var(--text);border-bottom-color:var(--accent)}
.tabs a .n{font-weight:400;color:var(--muted);margin-left:4px}

/* Clara */
.clara-av{display:block;border-radius:50%;line-height:0;flex:none;box-shadow:0 0 0 2px var(--accent)}
.clara-av svg{display:block}
.chat{display:flex;flex-direction:column;gap:18px}
.bubble-row{display:flex;gap:12px;align-items:flex-end;max-width:88%}
.bubble-row.me{align-self:flex-end;flex-direction:row-reverse}
.bubble{padding:14px 18px;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;background:var(--bot);font-size:17px;line-height:1.5;display:flex;flex-direction:column;gap:10px}
.bubble-row.me .bubble{background:var(--me);color:var(--on-me);border-radius:var(--radius-lg) var(--radius-lg) 4px var(--radius-lg)}
.bubble .src{display:flex;gap:8px;align-items:flex-start;font-size:15px;padding:10px 12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.bubble .src .i{width:18px;height:18px;color:var(--accent);margin-top:2px}
.bubble ol{margin:0;padding-left:22px}
.bubble-row.me .file{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.bubble-row.me .file span{color:rgba(255,255,255,.75)}
.bubble-row.me .file .ft{background:rgba(255,255,255,.18);color:#fff}
.bubble-row.me .file .ft::before{border-color:transparent var(--me) rgba(255,255,255,.35) transparent}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.qbtn{min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--accent);background:var(--surface);color:var(--accent-text);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.qbtn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.step-mark{align-self:center;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:10px;width:100%}
.step-mark::before,.step-mark::after{content:"";height:1px;background:var(--line);flex:1}
@media (max-width:760px){.bubble-row{max-width:100%}.bubble{padding:12px 14px}}

/* Carlito bold under 17 px merges the dot of the i into the stem (standing rule; Carlito has no semibold). Measured on every screen
   with tools/bold-check.mjs (4 Nov 2026, 229 cases): words in bold are raised to 17 px; initials, file types and small marks
   without words, and bold names inside smaller running lines, become regular. Last in the sheet so it wins over page styles. */
.tag,.cu b,.file b,.fs-brand span,.bar-phone span,.fs-top button,.fs-top a,.btn-sm,.alert b,.mail .box dl,.mail .box dd,.ready,
.link,.facts b,.field label,.field .lbl,.lbl,.in b,.it-h b,.who,.copy,.otp a,.otp h2,.eyebrow,.page-head .eyebrow,.qbtn,.ch,.st,
.tb,.mail .top span,.views a,.kv dd,.check b,.chk b,.tl b,.folders a,.folders h2,.seg a,.toc a,.toc h2,.pipe b,.tagx,.box h2,
.sev b,.sla b,.sla-missed,.sla-warn,.matrix b,.tbl th,.sl th,.matrix th,.lbl-note,.gtheme-btn .gtheme-t,.num .lbl{font-size:17px!important}
.ini,.av,.ft,.mhead .g,.cu .new,.badge,.pipe em,.fs .n,.folders a span,.sys b,.steps2 b,.mhead .from b,.mail p.muted b,.msg-head span b{font-weight:400!important}
.sys b,.steps2 b,.mhead .from b,.mail p.muted b{color:var(--text)}
@media (max-width:960px){.app-name{font-size:17px!important}}

label.search{display:block}
@media (max-width:760px){.tbl td[data-l]::before{white-space:nowrap;flex:none}.tbl td[data-l] > *{text-align:right;white-space:normal}}
/* Portal additions (live app): account button signs out, flash line, empty states, pagination, field errors. */
.who-form{margin:0}
.who .who-out{width:16px;height:16px;color:var(--muted);margin-left:2px}
.flash{margin-top:var(--s3)}
.empty{padding:var(--s4);text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--radius-lg)}
.field-error{color:var(--bad);font-size:15px}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--bad)}
.pager-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.drop{position:relative;cursor:pointer}
.drop:focus-within{outline:3px solid var(--focus);outline-offset:2px}