/* Shared header: reserved context slot, right-aligned search and evenly spaced actions. */
#top{--header-context-width:clamp(180px,20vw,260px);--header-search-width:clamp(260px,calc(32vw + 40px),540px);--header-action:clamp(40px,calc(44 * var(--u)),44px);--header-field-height:clamp(44px,calc(52 * var(--u)),52px);--header-gap:calc(14 * var(--u));height:calc(var(--header-field-height) + 12px);min-height:calc(var(--header-field-height) + 12px);padding:6px 0;gap:var(--header-gap)}
/* Stable field geometry: changing a route or organisation must not grow the header. */
#country,#searchform{align-self:center;height:var(--header-field-height);min-height:var(--header-field-height);max-height:var(--header-field-height);margin-top:0;margin-bottom:0}
#country{flex:0 0 var(--header-context-width);width:var(--header-context-width);min-width:0;padding:4px 10px;gap:8px;white-space:normal}
#searchform{flex:0 1 var(--header-search-width);width:var(--header-search-width);max-width:var(--header-search-width);min-width:0;margin-left:auto}
#search{flex:1 1 auto;min-width:0}
#searchform>#voice{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;min-width:40px;height:40px;min-height:40px;padding:8px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--blue)}
#searchform>#voice:hover{background:#edf5ff}
#searchform>#voice:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
#top>#notifications,#top>#refresh,#top>#fullscreen{display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--header-action);width:var(--header-action);height:var(--header-action);min-width:var(--header-action);min-height:var(--header-action);padding:8px}
#top>#fullscreen[hidden]{display:none}
/* Match the specificity of review-ui.css's span rule so the flag cannot grow. */
#country>span.country-flag{display:flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;min-width:24px}
#country>.country-flag>.icon{width:24px;height:24px}
#country>span.context-label,#country>span.country-name{flex:1 1 0;min-width:0;width:auto;white-space:normal;overflow-wrap:break-word;text-align:left;line-height:1.2}
/* The accessible name and picker title already identify the organisation. */
.accounting-mode #country .context-label{overflow:hidden;gap:0}
.accounting-mode #country .context-label small{display:none}
.accounting-mode #country .context-value,#country>span.country-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.4em;overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow-wrap:break-word;font-weight:400;line-height:1.2}
#country>.caret{margin-left:0;flex:0 0 auto}
.filter-trigger .filter-value{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
.fieldbox,.acc-choice-button{height:auto}
.fieldbox>span{min-width:0}
#notifications{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--header-action);width:var(--header-action);height:var(--header-action);min-width:var(--header-action);min-height:40px;padding:8px;border:1px solid #cfe1f7;border-radius:8px;background:#edf5ff;color:#1677d7;overflow:visible}
#notifications:hover,#notifications[aria-expanded="true"]{background:#e3efff;border-color:#92bcea}
#notifications>.icon{width:24px;height:24px}
.notification-badge{position:absolute;top:-6px;right:-5px;min-width:20px;height:20px;padding:0 4px;display:flex;align-items:center;justify-content:center;border-radius:50px;background:#d44353;color:#fff;border:2px solid #f5f8fc;font:600 11px/1 Arial,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none}
.notifications-popover{display:flex;flex-direction:column;padding:0;overflow:hidden;border-color:#c8ddf1}
.notification-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 12px;flex:none}
.notification-heading h2{margin:0 0 4px;font-size:1.15rem;font-weight:600;color:#253d5b}
.notification-heading small{font-size:.78rem;color:#657a94;overflow-wrap:anywhere}
.notification-heading .icon-button{width:40px;height:40px;min-height:40px}
.notification-tabs{display:flex;flex-wrap:wrap;gap:5px;padding:0 12px 12px;border-bottom:1px solid #e1eaf4;flex:none}
.notification-tabs button{display:flex;align-items:center;gap:5px;min-height:40px;padding:8px;border:1px solid transparent;border-radius:8px;font-size:.77rem;background:#f3f6fa;color:#4f6682}
.notification-tabs button[aria-pressed="true"]{background:#e7f1ff;border-color:#a5c6ec;color:#165fa7}
.notification-tabs button>span{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 3px;background:#dce9f8;border-radius:6px;font-size:11px;color:#24588e}
.notification-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.notification-item{display:flex;align-items:flex-start;gap:12px;width:100%;padding:15px 16px;min-height:80px;text-align:left;border:0;border-bottom:1px solid #e8eef6;border-radius:0;background:#fff;color:#2d405b}
.notification-item.is-unread{background:#f3f8ff}
.notification-item:hover{background:#eaf3ff}
.notification-symbol{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none;background:#e0edff;color:#196bb8;border-radius:8px}
.notification-symbol.bank{background:#e1f3e9;color:#258357}.notification-symbol.system{background:#e9e9f8;color:#6861a0}
.notification-symbol .icon{width:20px;height:20px}
.notification-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;overflow-wrap:anywhere}
.notification-copy strong{font-size:.86rem;font-weight:600;line-height:1.4}.notification-copy>span{font-size:.78rem;line-height:1.45;color:#506780}.notification-copy small{font-size:.71rem;color:#667c97}
.notification-unread-dot{width:7px;height:7px;border-radius:50%;background:#2481e6;flex:none;margin-top:8px}
.notification-empty{padding:30px 18px;text-align:center;color:#647b95;font-size:.85rem}
.notification-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid #dfe9f4;flex:none;background:white}
.notification-footer small{font-size:.67rem;color:#70849d}.notification-footer button{font-size:.76rem;color:#2365a6;min-height:40px;padding:8px;border-color:#d7e6f8}
.biz-thread.is-unread .biz-thread-top strong::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#1683ec;margin-right:7px;vertical-align:middle}
/* Removing a page's picker never moves or enlarges the search into its slot. */
.no-header-context #top::before{content:"";flex:0 0 var(--header-context-width);width:var(--header-context-width)}
@media(max-width:700px){
  #top{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,40px);gap:8px;min-height:0;height:auto;padding:8px 0}
  #country{grid-column:1;grid-row:1;min-width:0;width:100%;max-width:none}
  #notifications{grid-column:2;grid-row:1;width:40px;height:40px;min-width:40px}
  #refresh{grid-column:3;grid-row:1}
  #profile{grid-column:4;grid-row:1;width:40px;height:40px}
  #searchform{grid-column:1/-1;grid-row:2;width:100%;max-width:none;min-width:0;margin:0}
  .no-header-context #top::before{grid-column:1;grid-row:1;width:100%;height:var(--header-field-height)}
}
@media(max-width:850px),(hover:none),(pointer:coarse){#top>#fullscreen{display:none}}
.push-mode #top{display:flex;height:auto;min-height:64px}.push-mode #push-breadcrumb{margin-right:auto}.push-mode #refresh{margin-left:0}
@media print{#notifications,.notifications-popover{display:none!important}}