/* Company identity in the menu and overview header */
.company-menu-identity{display:flex;align-items:center;gap:14px;padding:12px 0 20px;margin-bottom:12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}.company-menu-identity img{width:104px;height:44px;object-fit:contain;padding:5px}.company-menu-identity strong{display:block;font-size:calc(15px * var(--dt,1))}.company-menu-identity small{display:block;color:var(--muted);font-size:calc(12px * var(--dt,1));margin-top:4px}
@media(max-width:900px){.appbar .big{display:flex;align-items:center;justify-content:space-between;gap:16px}}
/* ---------- the company mark (owner round 5): the logo at its own proportions (contain, never stretched), with no white box behind it ----------
   .cmark frames the picture (company-overview.js: companyLogoFrame); its tone (logoTone) says whether the artwork needs a backing to be seen:
   opaque = the picture brings its own background (rounded corners and a hairline only); mid = reads on both pages (nothing behind it);
   light = white artwork (the company colour behind it on the light page, nothing on the dark one); dark = black artwork (a soft light backing on the dark page only).
   --cm-h and --cm-w are the most the frame may take; a plate's padding comes out of that room, so a backed logo is no bigger than a bare one. */
.cmark{ --cm-pad:0px; display:inline-flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box; padding:var(--cm-pad); background:transparent; border-radius:var(--cm-r,9px); vertical-align:middle; line-height:1 }
.cmark-img{ display:block; width:auto; height:auto; max-width:min(100%, calc(var(--cm-w,112px) - 2 * var(--cm-pad))); max-height:calc(var(--cm-h,40px) - 2 * var(--cm-pad)); object-fit:contain; background:transparent; border:0; padding:0; border-radius:calc(var(--cm-r,9px) - var(--cm-pad) / 2) }
.cmark.tone-opaque .cmark-img{ box-shadow:0 0 0 .5px var(--line) }
.cmark.tone-light{ --cm-pad:var(--cm-plate,4px); background:var(--company-primary,#14233c) }
.cmark.tone-dark{ background:transparent }
html[data-company-dark="true"] .cmark.tone-light{ --cm-pad:0px; background:transparent }
html[data-company-dark="true"] .cmark.tone-dark{ --cm-pad:var(--cm-plate,4px); background:#e5e5ea }
@media(prefers-color-scheme:dark){
 html.native-ios .cmark.tone-light{ --cm-pad:0px; background:transparent }
 html.native-ios .cmark.tone-dark{ --cm-pad:var(--cm-plate,4px); background:#e5e5ea }
}
/* no logo: the company's first letter on its colour (the selected-chip pair, readable in light and dark) */
.cmark-initial{ width:var(--cm-h,40px); height:var(--cm-h,40px); background:var(--chip-selected-bg,#0a2540); color:var(--chip-selected-fg,#fff); font-size:calc(var(--cm-h,40px) * .52); font-weight:700; letter-spacing:0 }
/* in the large title on a phone: before the title, on the screens with no back button (fixes.css hides it when the back button takes the corner); it shrinks with the title when the bar is compact */
.appbar .cmark{ --cm-h:28px; --cm-w:104px; --cm-r:7px; --cm-plate:3px; flex:0 1 auto; min-width:0; height:auto; margin-inline-end:-4px; transform:scale(var(--cmk,1)); transform-origin:100% 50%; transition:transform .18s cubic-bezier(.2,.8,.2,1) }
.appbar .cmark-initial{ width:var(--cm-h); height:var(--cm-h); flex:none }
html[dir=rtl] .appbar .cmark{ transform-origin:0 50% }   /* it shrinks toward the title, so the two stay together when the bar is compact */
.appbar.compact{ --cmk:.78 }
@media(max-width:900px){ .appbar .cmark{ display:inline-flex } }
html.native-ios .appbar .cmark{ --cm-h:32px; --cm-w:128px; --cm-r:8px }
.appbar .big .cmark + .ttl{ flex:1 0 auto }   /* the title keeps its whole width; a wide logo gives way to it (it shrinks, contained, never squeezed) */
html.native-ios .appbar.compact{ --cmk:.66 }
@media(prefers-reduced-motion:reduce){ .appbar .cmark{ transition:none } }
/* the header of More: the logo large and centred, the company's name under it, the role, Switch company */
.morebrand{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:8px 12px 18px; margin-bottom:4px; border-bottom:1px solid var(--line) }
.morebrand .cmark{ --cm-h:112px; --cm-w:min(260px, 72vw); --cm-r:16px; --cm-plate:12px; margin-bottom:8px }
.morebrand-aqari{ display:flex; align-items:center; justify-content:center; width:96px; height:96px; margin-bottom:8px; border-radius:24px; background:var(--card); color:var(--ink); box-shadow:var(--sh-1, 0 1px 2px rgba(0,0,0,.06)) }
.morebrand-aqari .aqari-mark{ width:64px; height:64px }
.aqari-mark-accent{ fill:#00a990 }
html[data-company-dark="true"] .aqari-mark-accent{ fill:#00d1c1 }
@media(prefers-color-scheme:dark){ html.native-ios .aqari-mark-accent{ fill:#00d1c1 } }
.morebrand-name{ font-size:calc(22px * var(--dt-cap,1)); font-weight:700; line-height:1.25; color:var(--ink); overflow-wrap:anywhere; max-width:100% }
.morebrand-role{ font-size:calc(14px * var(--dt,1)); font-weight:500; color:var(--muted) }
.morebrand-switch{ display:inline-flex; align-items:center; gap:6px; min-height:calc(44px * var(--dt,1)); margin-top:6px; padding:0 18px; border-radius:100px; background:var(--nile-tint); color:var(--nile-ink); font-size:calc(15px * var(--dt,1)); font-weight:600; text-decoration:none; -webkit-tap-highlight-color:transparent }
.morebrand-switch:active{ opacity:.7 }
.morebrand-go{ font-size:calc(20px * var(--dt-cap,1)); line-height:1; direction:ltr; unicode-bidi:bidi-override }   /* as .morerow-go: no mirroring by the text, one flip in Arabic */
html[dir="rtl"] .morebrand-go{ transform:scaleX(-1) }
html.native-ios .morebrand{ border-bottom:0; padding-top:4px }
html.native-ios .morebrand-name{ font-size:calc(24px * var(--dt-cap,1)); letter-spacing:-.01em }
/* Country labels and counts share contrast-safe foregrounds, including the native layer. */
html .chip,html.native-ios .chip,html .cchip:not(.cchip-unpaid),html.native-ios .cchip:not(.cchip-unpaid){background:var(--chip-idle-bg,#fff);color:var(--chip-idle-fg,#000)}
html .chip.on,html.native-ios .chip.on,html .cchip:not(.cchip-unpaid)[aria-pressed="true"],html.native-ios .cchip:not(.cchip-unpaid)[aria-pressed="true"]{background:var(--chip-selected-bg,#0a2540);border-color:var(--chip-selected-bg,#0a2540);color:var(--chip-selected-fg,#fff)}
html .chip .muted,html .chip.on .muted,html.native-ios .chip .muted,html.native-ios .chip.on .muted,html .cchip:not(.cchip-unpaid) .num,html.native-ios .cchip:not(.cchip-unpaid) .num{color:inherit;opacity:1}
/* Navigation labels sit on the tab bar; selected icons have their own contrasting pill. */
html .tabbar,html.native-ios .tabbar{background:var(--chip-idle-bg,#fff);border-top:1px solid var(--line)}
html .tabbar button,html .tabbar button[aria-current="true"],html.native-ios .tabbar button,html.native-ios .tabbar button[aria-current="true"]{color:var(--chip-idle-fg,#000)}
html .tabbar button[aria-current="true"]{font-weight:700}
html .tabbar button[aria-current="true"] svg,html.native-ios .tabbar button[aria-current="true"] svg{background:var(--chip-selected-bg,#0a2540);color:var(--chip-selected-fg,#fff)}
/* Phone branding lives in the Overview masthead, leaving page titles uncluttered. */
@media(max-width:900px){
 .company-overview{flex-direction:row;align-items:center;text-align:start;gap:12px;padding:4px 0 14px;margin-bottom:14px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
 .company-overview-logo{width:112px;height:44px;border:0;border-radius:0;background:transparent}
 .company-overview-logo img{padding:4px;background:white;border-radius:4px}
 .company-overview h2{font-size:calc(14px * var(--dt,1));overflow-wrap:anywhere}
 .company-overview p{display:none}
}
/* Organization colors override inherited fixed brand surfaces. Status colors retain meaning. */
.rail,.ledger{background:var(--company-primary,#0a2540)}
.btn.primary,.btn.primary:hover{background:var(--company-primary,#0a2540);border-color:var(--company-primary,#0a2540)}
.btn.go,.btn.go:hover{background:var(--nile);border-color:var(--nile)}
.company-overview{background:var(--card);border-color:var(--line)}
@media(max-width:900px){.content .company-overview{display:none}}
html[data-company-dark="true"] .panel,html[data-company-dark="true"] .appbar,html[data-company-dark="true"] .modal{background:var(--card);color:var(--ink)}
html[data-company-dark="true"] input,html[data-company-dark="true"] select{background:var(--card);color:var(--ink)}
html[data-company-dark="true"] .check:has(input:checked){color:var(--ink)}
html[data-company-dark="true"] .t-paid,html[data-company-dark="true"] .t-part{color:var(--ink)}   /* their tinted backgrounds turn dark with the theme, so the dark-green and brown text must turn light */
html[data-company-dark="true"] .t-neutral{color:#3b3c3c}   /* this one keeps a light background, so its text must stay dark */   /* the light-theme tick colour is dark green: unreadable on the dark card */