/* ============================================================
   Global app shell: top bar, portal switcher, dir/lang toggles
   ============================================================ */

.appbar {
  position: sticky; top: 0; z-index: 60;
  height: 56px;
  display: flex; align-items: center; gap: var(--s4);
  padding-inline: var(--s5);
  background: rgba(11,15,25,0.86);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: var(--s3); }
.brand-mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, var(--emerald), var(--emerald-dim));
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; color: #04130D; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.brand-name { font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand-name small { display: block; font-size: 10px; letter-spacing: 0.18em; color: var(--text-muted); font-weight: 600; }

/* Segmented portal switcher */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-md);
}
.seg button {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 7px 13px; border-radius: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm);
  color: var(--text-muted); transition: all var(--dur) var(--ease); white-space: nowrap;
}
.seg button .ico { width: 15px; height: 15px; }
.seg button[aria-selected="true"] { background: var(--bg-card-hover); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.seg button:hover:not([aria-selected="true"]) { color: var(--text-body); }

.appbar-spacer { flex: 1; }

.toolset { display: flex; align-items: center; gap: var(--s2); }

/* Toggle pill (LTR/RTL, EN/AR) */
.toggle {
  display: inline-flex; background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px;
}
.toggle button {
  padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700;
  font-family: var(--font-head); color: var(--text-muted); letter-spacing: 0.04em; transition: all var(--dur) var(--ease);
}
.toggle button[aria-pressed="true"] { background: var(--emerald); color: #04130D; }

.op-user {
  display: flex; align-items: center; gap: var(--s2); padding-inline-start: var(--s3);
  border-inline-start: 1px solid var(--border); margin-inline-start: var(--s1);
  cursor: pointer; text-align: start; transition: opacity var(--dur) var(--ease);
}
.op-user:hover { opacity: 0.85; }
.op-user .av svg { width: 14px; height: 14px; }
.op-user .av {
  width: 30px; height: 30px; border-radius: 7px; background: var(--bg-card-hover);
  border: 1px solid var(--border-strong); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--text-body);
}
.op-user .who { line-height: 1.25; }
.op-user .who b { font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600; display: block; }
.op-user .who span { font-size: var(--fs-micro); color: var(--text-muted); letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .brand-name, .op-user .who { display: none; }
  .seg button span { display: none; }
}