/* ==========================================================================
   MBC — domain layer on top of FlowDash
   Loads AFTER app.css. Nothing here restyles FlowDash; it adds the components
   the SMS domain needs and that no admin template ships with.
   ========================================================================== */

:root {
  /* Carrier lanes — the categorical axis of the entire product. Muted so four
     can sit next to each other in a dense table without shouting. */
  --lane-tmo: #b0247a;
  --lane-att: #1b6fa8;
  --lane-vzw: #a3282c;
  --lane-oth: #8a9099;

  /* Semantics. Colour means one thing: hue = carrier, these = state. */
  --ok:      #1f7a5a;
  --warn:    #c2571a;
  --danger:  #a3282c;
  --idle:    #8b9099;

  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* --- Brand ---------------------------------------------------------------- */

/* Brand sits in the navbar, filling the slot directly above the drawer so the
   bar and the sidebar read as one unit. On the dark bar it needs light type —
   the sidebar version was dark and would have vanished here. */
[dir] .mbc-brand,
.mbc-brand {
  display: flex;
  align-items: center;
  flex: none;
  width: 256px;
  color: #fff;
  text-decoration: none;
}
[dir] .mbc-brand:hover,
.mbc-brand:hover { color: #fff; text-decoration: none; opacity: .85; }

.mbc-mark { flex: none; margin-right: 10px; }

.mbc-brand__name {
  font-weight: 700; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}

@media (max-width: 991.98px) {
  .mbc-brand { width: auto; margin-right: 16px; }
}

/* --- Top bar -------------------------------------------------------------- */

/* FontAwesome needs explicit sizing in the sidebar; the theme's icon rules
   target .material-icons only. */
.sidebar-menu-icon.fas {
  font-size: 15px;
  width: 20px;
  text-align: center;
  line-height: inherit;
}

.mbc-nav-badge {
  margin-left: auto;
  background: #a3282c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 9px;
  font-family: var(--mono);
}

/* The brand now fills the 256px slot at the left of the bar, so the search
   follows it naturally — no indent needed. */
.mbc-search { position: relative; width: 300px; max-width: 34vw; }
.mbc-search .fa-search {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: rgba(255,255,255,.5); pointer-events: none;
}
.mbc-search .form-control {
  height: 34px; padding-left: 34px; font-size: .82rem;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}
.mbc-search .form-control::placeholder { color: rgba(255,255,255,.45); }
.mbc-search .form-control:focus {
  background: rgba(255,255,255,.14); color: #fff; box-shadow: none;
  border-color: rgba(255,255,255,.3);
}

.mbc-env {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
  background: rgba(194,87,26,.2); color: #f0a468;
  border: 1px solid rgba(194,87,26,.45);
}

.mbc-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: #23282c;
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; font-family: var(--mono);
}

.mbc-dot {
  position: absolute; top: 6px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 2px solid #23282c;
}

/* --- Alert headline ------------------------------------------------------- */
/* Sits under the navbar: unmissable, but never covers the working area. */

.mbc-headline {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 24px; font-size: .84rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.mbc-headline--warning  { background: #fdf3e7; color: #7a3a10; }
.mbc-headline--critical { background: #fbeaea; color: #7d1f22; }
.mbc-headline .fas { font-size: 15px; flex: none; }
.mbc-headline__text { flex: 1; }
.mbc-headline__action {
  font-weight: 600; color: inherit; text-decoration: underline;
  white-space: nowrap;
}
.mbc-headline__close {
  background: none; border: 0; font-size: 20px; line-height: 1;
  color: inherit; opacity: .5; cursor: pointer;
}
.mbc-headline__close:hover { opacity: 1; }

/* --- Page heading --------------------------------------------------------- */

.mbc-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #868e96; margin-bottom: 3px;
}
.mbc-subtitle { color: #868e96; font-size: .84rem; margin-top: 3px; }
.mbc-page-actions { display: flex; gap: 8px; align-items: center; }

/* --- Metric tiles --------------------------------------------------------- */
/* eCPM and opt-out rate are the two numbers the operator actually steers by,
   so the tile gives every metric a trend against its own baseline rather than
   a bare figure. */

/* Fixed column counts, not auto-fit. auto-fit picks however many happen to fit
   and orphans the remainder onto a row of its own — with eight tiles that gave
   seven across and one stretched full width underneath. */
.mbc-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .375rem;
  background: #fff;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px)  { .mbc-metrics { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .mbc-metrics { grid-template-columns: repeat(8, 1fr); } }

.mbc-metric {
  padding: 13px 16px;
  border-right: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  min-width: 0;
}
/* Interior rules only — no dangling border on the outer edges. */
.mbc-metrics > .mbc-metric:nth-child(2n)  { border-right: 0; }
@media (min-width: 768px) {
  .mbc-metrics > .mbc-metric:nth-child(2n)  { border-right: 1px solid rgba(0,0,0,.06); }
  .mbc-metrics > .mbc-metric:nth-child(4n)  { border-right: 0; }
}
@media (min-width: 1600px) {
  .mbc-metrics > .mbc-metric:nth-child(4n)  { border-right: 1px solid rgba(0,0,0,.06); }
  .mbc-metrics > .mbc-metric:nth-child(8n)  { border-right: 0; }
  .mbc-metrics > .mbc-metric                { border-bottom: 0; }
}
.mbc-metric--primary { background: #fbfbfd; }

.mbc-metric__k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #868e96; margin-bottom: 4px;
  display: flex; align-items: center; gap: 4px;
}
.mbc-metric__v {
  font-family: var(--mono); font-size: 1.2rem; font-weight: 500;
  letter-spacing: -.03em; line-height: 1.15; color: #23282c;
  /* Values like 11,616,968 must not push the tile wider than its column. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mbc-metric__d {
  font-size: .72rem; margin-top: 3px; color: #868e96;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mbc-metric__d--up   { color: var(--ok); }
.mbc-metric__d--down { color: var(--danger); }

/* --- Carrier lane bar ----------------------------------------------------- */

.mbc-lane {
  display: flex; width: 100%; border-radius: 2px;
  overflow: hidden; background: #eceef0;
}
.mbc-lane__seg { display: block; height: 100%; }
.mbc-lane__seg--tmo { background: var(--lane-tmo); }
.mbc-lane__seg--att { background: var(--lane-att); }
.mbc-lane__seg--vzw { background: var(--lane-vzw); }
.mbc-lane__seg--oth { background: var(--lane-oth); }

.mbc-lane-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .74rem; color: #6c757d; }
.mbc-lane-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }
.mbc-lane-legend i.tmo { background: var(--lane-tmo); }
.mbc-lane-legend i.att { background: var(--lane-att); }
.mbc-lane-legend i.vzw { background: var(--lane-vzw); }
.mbc-lane-legend i.oth { background: var(--lane-oth); }

/* --- Status pills --------------------------------------------------------- */

.mbc-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
  white-space: nowrap;
}
.mbc-status::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.mbc-status--pending    { color: #6c757d; background: #f0f1f3; }
.mbc-status--approved   { color: #1b6fa8; background: #e9f2f8; }
.mbc-status--processing,
.mbc-status--deploying  { color: var(--warn); background: #fdf3e7; }
.mbc-status--deployed,
.mbc-status--ok         { color: var(--ok); background: #e9f3ef; }
.mbc-status--failed,
.mbc-status--critical   { color: var(--danger); background: #f8eced; }
.mbc-status--paused     { color: #6c757d; background: #f0f1f3; }

.mbc-status--processing::before,
.mbc-status--deploying::before { animation: mbc-pulse 1.8s ease-in-out infinite; }

@keyframes mbc-pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

/* --- Drop pipeline -------------------------------------------------------- */
/* PENDING -> APPROVED -> PROCESSING -> DEPLOYING -> DEPLOYED is a real
   sequence with a human gate in it, so it is drawn as one. */

.mbc-pipeline { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.mbc-pipeline__step {
  display: flex; align-items: center; gap: 6px;
  font-size: .74rem; color: #adb5bd; white-space: nowrap;
}
.mbc-pipeline__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #dee2e6; flex: none;
}
.mbc-pipeline__step.is-done .mbc-pipeline__dot { background: var(--ok); }
.mbc-pipeline__step.is-done { color: #6c757d; }
.mbc-pipeline__step.is-current .mbc-pipeline__dot { background: var(--warn); }
.mbc-pipeline__step.is-current { color: var(--warn); font-weight: 600; }
.mbc-pipeline__step.is-gate .mbc-pipeline__dot { background: #1b6fa8; }
.mbc-pipeline__bar { width: 26px; height: 2px; background: #e9ecef; margin: 0 8px; }

/* --- Tables --------------------------------------------------------------- */

.mbc-table { font-size: .82rem; }
.mbc-table thead th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #868e96; font-weight: 500;
  border-top: 0; white-space: nowrap;
}
.mbc-table td { vertical-align: middle; }
.mbc-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mbc-table .mono { font-family: var(--mono); }
.mbc-table .muted { color: #868e96; }
.mbc-table .name { font-weight: 600; }

/* Nested breakdown rows: template -> carrier, list -> template, and so on. */
.mbc-sub > td { background: #fafbfc; }
.mbc-sub .mbc-indent { padding-left: 26px; position: relative; }
.mbc-sub .mbc-indent::before {
  content: ''; position: absolute; left: 12px; top: 50%;
  width: 8px; height: 1px; background: #ced4da;
}
.mbc-expand {
  background: none; border: 0; padding: 0 6px 0 0; color: #868e96; cursor: pointer;
  line-height: 1;
}
.mbc-expand .material-icons { font-size: 18px; vertical-align: middle; transition: transform .15s; }
.mbc-expand[aria-expanded="true"] .material-icons { transform: rotate(90deg); }

/* --- Carrier routing matrix ----------------------------------------------- */
/* One row per lane: brand, number type, resulting pool. Replaces the legacy
   arrangement where the same lane's settings were spread across three blocks. */

.mbc-routing { width: 100%; }
.mbc-routing th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #868e96; font-weight: 500;
  padding-bottom: 8px;
}
.mbc-routing td { padding: 7px 8px 7px 0; vertical-align: middle; }
.mbc-routing .lane-chip { width: 4px; height: 24px; border-radius: 2px; display: block; }
.mbc-routing .lane-chip--tmo { background: var(--lane-tmo); }
.mbc-routing .lane-chip--att { background: var(--lane-att); }
.mbc-routing .lane-chip--vzw { background: var(--lane-vzw); }
.mbc-routing .lane-chip--oth { background: var(--lane-oth); }
.mbc-routing .lane-name { font-weight: 600; font-size: .84rem; }
.mbc-routing .capacity-warn { color: var(--warn); font-size: .74rem; }

/* --- Segment builder ------------------------------------------------------ */
/* One master list per data source means the drop form stops picking files and
   starts describing an audience. */

.mbc-segment {
  border: 1px solid rgba(0,0,0,.09);
  border-radius: .375rem;
  overflow: hidden;
}
.mbc-segment__row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.06);
  flex-wrap: wrap;
}
.mbc-segment__row:last-child { border-bottom: 0; }
.mbc-segment__op {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: #868e96; min-width: 40px;
}
.mbc-segment__result {
  background: #f6f8fa; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mbc-segment__count {
  font-family: var(--mono); font-size: 1.15rem; font-weight: 500;
}

/* --- AI Insight ----------------------------------------------------------- */

.mbc-incident { border-left: 3px solid transparent; }
.mbc-incident--critical { border-left-color: var(--danger); }
.mbc-incident--warning  { border-left-color: var(--warn); }
.mbc-incident--info     { border-left-color: #1b6fa8; }

.mbc-evidence {
  font-family: var(--mono); font-size: .76rem;
  background: #f6f8fa; border: 1px solid rgba(0,0,0,.07);
  border-radius: .25rem; padding: 10px 12px;
  white-space: pre-wrap; word-break: break-word; color: #3d444b;
}

/* Observed value against its own baseline — the comparison that makes an
   anomaly legible rather than just alarming. */
.mbc-baseline { display: flex; align-items: center; gap: 10px; }
.mbc-baseline__track {
  flex: 1; height: 22px; background: #f0f1f3;
  border-radius: 3px; position: relative; overflow: hidden;
}
.mbc-baseline__band {
  position: absolute; top: 0; bottom: 0;
  background: rgba(31,122,90,.16);
  border-left: 1px dashed rgba(31,122,90,.5);
  border-right: 1px dashed rgba(31,122,90,.5);
}
.mbc-baseline__now {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--danger);
}
.mbc-baseline__label { font-family: var(--mono); font-size: .72rem; color: #6c757d; white-space: nowrap; }

/* SPECIFICITY WARNING — read before adding any component here.
   FlowDash is an RTL-aware build: 1,299 of its rules are prefixed with [dir],
   e.g. `[dir] .btn { background-color: transparent }`. That is specificity
   (0,2,0) and it silently outranks any plain single-class rule below, no
   matter that this file loads later. Anything of ours that shares a class name
   with FlowDash — or sits next to one — must match that specificity.
   This button was invisible for exactly that reason: transparent background
   from [dir] .btn, white text from here. */
[dir] .mbc-ask-claude,
.mbc-ask-claude {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #23282c; color: #fff; border: 0;
  padding: 10px 18px; border-radius: .25rem;
  font-weight: 600; font-size: .84rem; text-decoration: none;
  cursor: pointer;
}
[dir] .mbc-ask-claude:hover,
.mbc-ask-claude:hover { background: #3a4248; color: #fff; text-decoration: none; }
.mbc-ask-claude .fas { font-size: 15px; }
.mbc-ask-claude--block { width: 100%; }

/* --- Macro reference ------------------------------------------------------ */

.mbc-macro {
  display: inline-block; font-family: var(--mono); font-size: .74rem;
  background: #eef1f4; border-radius: 3px; padding: 1px 5px; cursor: pointer;
  border: 1px solid rgba(0,0,0,.06); margin: 0 3px 5px 0;
}
.mbc-macro:hover { background: #e2e6ea; }
.mbc-macro--deprecated { text-decoration: line-through; opacity: .5; cursor: not-allowed; }

.mbc-preview {
  border: 1px solid rgba(0,0,0,.09); border-radius: .375rem;
  background: #f6f8fa; overflow: hidden;
}
.mbc-preview__head {
  padding: 7px 12px; background: #fff; font-size: .74rem; color: #868e96;
  border-bottom: 1px solid rgba(0,0,0,.06); font-family: var(--mono);
}
.mbc-preview__body { padding: 14px 12px; min-height: 120px; }
.mbc-bubble {
  background: #fff; border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px 12px 12px 3px; padding: 9px 12px;
  font-size: .82rem; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word;
}
.mbc-bubble .unresolved { background: #fdf0e4; color: #a2570f; border-radius: 2px; padding: 0 3px; }

/* Character budget: 160 is a hard cliff in the send path, not a guideline. */
.mbc-budget { display: flex; align-items: center; gap: 9px; min-width: 130px; }
.mbc-budget__bar { flex: 1; height: 4px; border-radius: 2px; background: #e9ecef; overflow: hidden; }
.mbc-budget__bar span { display: block; height: 100%; background: var(--ok); }
.mbc-budget[data-state="tight"] .mbc-budget__bar span { background: var(--warn); }
.mbc-budget[data-state="over"]  .mbc-budget__bar span { background: var(--danger); }
.mbc-budget__n { font-family: var(--mono); font-size: .74rem; color: #6c757d; }
.mbc-budget[data-state="over"] .mbc-budget__n { color: var(--danger); font-weight: 600; }

/* --- Small utilities ------------------------------------------------------ */

.mbc-note {
  border-left: 3px solid var(--warn); background: #fdf6ee;
  padding: 10px 14px; font-size: .82rem; border-radius: 0 .25rem .25rem 0;
  margin-bottom: 1.25rem;
}
.mbc-note b {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--warn);
  margin-bottom: 2px;
}

.mbc-chip {
  display: inline-block; font-family: var(--mono); font-size: .7rem;
  background: #eef1f4; border-radius: 3px; padding: 1px 6px; color: #495057;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Layout hardening
   FlowDash's shell is a fixed header plus a pushed drawer. Bootstrap's modal
   assumes a plain scrolling document, and the two disagree in three ways.
   ========================================================================== */

/* 1. Modals are relocated to <body> by mbc-shell.js. They cannot stay inside
      .mdk-drawer-layout__content, which is `position: relative; z-index: 0`
      and therefore a stacking context — a modal nested in it has its z-index
      resolved within that context and can never paint above the header.
      Bootstrap's own 1050/1040 are correct once the node is at body level, so
      there is deliberately no z-index override here. */

/* 2. The dialog's default 1.75rem top margin puts its header underneath the
      fixed navbar. Start it below the bar instead. */
.modal-dialog { margin-top: 5rem; margin-bottom: 2rem; }

/* 3. A long context package made the dialog taller than the viewport, pushing
      the footer — and its primary action — off screen. Scroll the body, keep
      header and footer pinned. */
.modal-content { max-height: calc(100vh - 7rem); }
.modal-body    { overflow-y: auto; }

/* 4. Bootstrap adds padding-right to <body> to compensate for the scrollbar it
      hides. With a fixed drawer that shifts the whole layout sideways, which is
      what clipped the sidebar labels. The drawer is fixed, so no compensation
      is needed. */
body.modal-open { padding-right: 0 !important; }

/* 5. Nothing in the shell should ever scroll horizontally. Wide content lives
      inside .table-responsive, which scrolls on its own. */
.sidebar { overflow-x: hidden; }
.mdk-drawer-layout__content { min-width: 0; max-width: 100%; }
.page__container { min-width: 0; }

/* The routing matrix has fixed column widths that exceed a narrow card. */
.mbc-routing { display: block; overflow-x: auto; white-space: nowrap; }
.mbc-routing tbody, .mbc-routing thead { display: table; width: 100%; min-width: 720px; }

/* Modal footer: keep the primary action visibly separated from Cancel, and
   give it Bootstrap's button metrics so it cannot collapse. */
.modal-footer { justify-content: space-between; }
.mbc-ask-claude.btn { color: #fff; }
.mbc-ask-claude.btn:hover { color: #fff; }

/* ==========================================================================
   API states
   --------------------------------------------------------------------------
   A table has FOUR states, not two: loading, loaded, empty and failed.
   Wireframes only ever draw the loaded one, which is why real UIs end up with
   a blank table nobody can explain.

   ⚠ Every selector here is prefixed with [dir] where it competes with a
   FlowDash rule. FlowDash is an RTL build with 1,299 [dir]-prefixed rules at
   specificity (0,2,0), which outrank a bare class (0,1,0) REGARDLESS of load
   order. See the warning block near the top of this file.
   ========================================================================== */

.mbc-tstate {
  padding: 2.25rem 1rem;
  text-align: center;
  color: #8a94a6;
  font-size: .8125rem;
}
.mbc-tstate i { margin-right: .35rem; }
.mbc-tstate--empty { color: #98a2b3; }
.mbc-tstate--error { color: #c62828; }

/* --- Banner ------------------------------------------------------------- */

[dir] .mbc-banner {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .625rem .875rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  font-size: .8125rem;
  line-height: 1.45;
}
[dir] .mbc-banner--error   { background: #fdecea; border-left: 3px solid #d32f2f; color: #611a15; }
[dir] .mbc-banner--success { background: #edf7ed; border-left: 3px solid #2e7d32; color: #1e4620; }
[dir] .mbc-banner--info    { background: #e8f4fd; border-left: 3px solid #0288d1; color: #014361; }

[dir] .mbc-banner span { flex: 1; }

[dir] .mbc-banner__close {
  background: none;
  border: 0;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: .55;
  padding: 0;
}
[dir] .mbc-banner__close:hover { opacity: 1; }

/* --- Inline field validation -------------------------------------------- */

[dir] .mbc-field-error {
  color: #d32f2f;
  font-size: .75rem;
  margin-top: .25rem;
}
[dir] .form-control.is-invalid {
  border-color: #d32f2f;
}

/* --- Lane chips (offer routing summary) --------------------------------- */

[dir] .mbc-lane {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  text-transform: uppercase;
}
[dir] .mbc-lane--tmo { background: #e91e63; }
[dir] .mbc-lane--att { background: #2196f3; }
[dir] .mbc-lane--vzw { background: #f44336; }
[dir] .mbc-lane--oth { background: #9e9e9e; }

/* A lane the offer does not route. Greyed rather than hidden, so the matrix
   stays a fixed four columns and "off" is visibly different from "missing". */
[dir] .mbc-lane--off { background: #e4e7ec; color: #98a2b3; }

/* --- Signed-in user ----------------------------------------------------- */

[dir] .mbc-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: #52606d;
}
[dir] .mbc-user__name { font-weight: 600; }
[dir] .mbc-user__out {
  background: none;
  border: 0;
  padding: 0;
  color: #2196f3;
  cursor: pointer;
  font-size: .75rem;
}
[dir] .mbc-user__out:hover { text-decoration: underline; }