/**
 * Channel Matrix - Custom CSS
 * Matte, typography-driven design system with subtle delight
 */

/* Motion values are supplied by pf-tokens.css. */


/* Number roll — tabular figures so digits don't reflow mid-animation. */
.num-roll {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ==================== Interactive Polish ==================== */

.select-shell {
  position: relative;
  display: block;
}

.select-shell select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding-right: 2rem;
  background-image: none;
}

.select-shell select::-ms-expand {
  display: none;
}

.select-shell::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--pf-text-secondary);
  border-bottom: 1.5px solid var(--pf-text-secondary);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

/* Card hover lift */
.card-lift {
  transition: transform var(--duration-quick) var(--ease-out), border-color var(--duration-quick) ease;
}
.card-lift:hover {
  transform: translateY(-1px);
  border-color: var(--pf-border-strong);
}

/* General button press */
button:active:not(:disabled) {
  transform: scale(0.98);
}

/* Focus States — universal sage ring */
:focus-visible {
  outline: 2px solid var(--pf-focus-ring);
  outline-offset: 2px;
  border-radius: var(--pf-radius-xs);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--pf-focus-ring);
  outline-offset: 1px;
  box-shadow: none;
}

/* Hide focus ring for mouse clicks, show for keyboard */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ==================== Status Dropdown ==================== */
/* Menu dropdown (transitions.dev) — grows from its cell: top center, or bottom
   center when it flips up. The inline translateX(-50%) centring stays on
   `transform`, so the recipe's scale rides on the individual `scale` property.
   Entrance = @starting-style (the node is cloned in); on close
   app/status-cell.js adds .is-closing and removes the node afterwards. */
.status-dropdown {
  transform-origin: top center;
  transition:
    opacity var(--duration-fast) var(--ease-smooth-out),
    scale var(--duration-fast) var(--ease-smooth-out);
}

@starting-style {
  .status-dropdown { opacity: 0; scale: var(--scale-medium); }
}

.status-dropdown.is-closing {
  opacity: 0;
  scale: var(--scale-tiny);
  pointer-events: none;
  transition-duration: var(--duration-quick);
}

.status-dropdown.dropup {
  bottom: 100%;
  top: auto;
  margin-top: 0;
  margin-bottom: 0.25rem;
  transform-origin: bottom center;
}

/* Status cell hover */
.status-cell span {
  transition: transform var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out);
}
.status-cell:hover span {
  box-shadow: 0 0 0 2px var(--pf-primary-soft);
}

/* Drag Selection */
.status-cell.drag-highlight {
  background-color: var(--pf-primary-soft);
  outline: 1px solid var(--pf-focus-ring);
  outline-offset: -1px;
}

/* ==================== Scrollbar Utilities ==================== */

.scrollbar-none {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.scrollbar-none::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* ==================== Scrollable Table ==================== */

.table-container {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pf-border) transparent;
}

/* ==================== Checkbox Satisfaction ==================== */

input[type="checkbox"]:checked {
  animation: checkPop var(--duration-quick) var(--ease-out);
}

@keyframes checkPop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ==================== Nav link transition ==================== */

.nav-item {
  transition: color var(--duration-quick) ease, background-color var(--duration-quick) ease;
}
.nav-item svg {
  transition: opacity var(--duration-quick) ease;
}
.nav-item:hover svg {
  opacity: 1;
}

/* ==================== Scroll Reveal ==================== */

.scroll-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== Segmented control (role filter) ==================== */
.role-chip {
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap the container's 1px border-b for a seamless underline (build-free; -mb-px not in prebuilt tailwind) */
  color: var(--pf-text-muted); /* zinc-500 */
  transition: color var(--duration-quick) ease, border-color var(--duration-quick) var(--ease-out);
}
.role-chip:hover { color: var(--pf-text-secondary); }
.role-chip.is-active {
  color: var(--pf-text); /* ink-0 */
  border-bottom-color: var(--pf-primary); /* sage */
}

/* ==================== Tooltip (portal) ==================== */
.tip-bubble {
  position: fixed;
  z-index: 9998;
  max-width: 260px;
  padding: 4px 8px;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-surface-raised);
  border: 1px solid var(--pf-border-strong);
  color: var(--pf-text-secondary);
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  /* Tooltip open/close (transitions.dev): delayed fade+scale in, near-instant out.
     The delay lives only on .tip-show, so leaving drops it straight away. */
  transform: scale(var(--scale-small));
  transform-origin: 50% 100%;
  transition: opacity 50ms ease-out, transform 50ms ease-out;
}
.tip-bubble.tip-measure { opacity: 0; transition: none; }
.tip-bubble.tip-show {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity var(--duration-quick) ease-out var(--duration-micro),
    transform var(--duration-quick) ease-out var(--duration-micro);
}

/* ==================== Reduced motion ==================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .stagger-in > * {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   transitions.dev motion layer (2026-10-11)
   Shared motion scale + the library recipes this dashboard uses.
   Source: https://transitions.dev (free recipes). JS-driven phases live in
   static/js/app/motion.js (window.ChannelMotion).
   Motion tokens are loaded from the PF canonical copy.
   ═══════════════════════════════════════════════════════════════ */

/* Modal open / close — the surface scales up from --scale-large; the close is
   a quicker, softer dip. State comes from the toggles the modals already use:
   Tailwind `.hidden` on a `.t-modal-root` (vanilla modals, account panel) or
   `.is-closing` on the backdrop (Alpine x-if modals). `display` stays rendered
   through the close via allow-discrete; @starting-style is the pre-open state. */
.t-modal-root { transition: display var(--duration-quick) allow-discrete; }
.t-modal-root.hidden { pointer-events: none; }
.t-modal-backdrop { transition: opacity var(--duration-fast) var(--ease-smooth-out); }
.t-modal {
  transform-origin: center;
  transition:
    opacity var(--duration-fast) var(--ease-smooth-out),
    transform var(--duration-fast) var(--ease-smooth-out);
}
.t-modal-root.hidden .t-modal-backdrop,
.t-modal-backdrop.is-closing {
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--duration-quick);
}
.t-modal-root.hidden .t-modal,
.is-closing .t-modal {
  opacity: 0;
  transform: scale(var(--scale-large));
  transition-duration: var(--duration-quick);
}
@starting-style {
  .t-modal-backdrop { opacity: 0; }
  .t-modal { opacity: 0; transform: scale(var(--scale-large)); }
  /* Account panel: the loading shell already played the entrance… */
  .t-modal-swap .t-modal-backdrop { opacity: 1; }
  .t-modal-swap .t-modal { opacity: 1; transform: none; }
}
/* …so the loaded content just cross-blurs in (skeleton reveal). */
.t-modal-swap .t-modal > * {
  animation: t-reveal-in var(--duration-slow) var(--ease-in-out) backwards;
}

/* Menu dropdown — grows from its trigger corner (data-origin), the close dips
   to --scale-tiny. Open state = the parent's existing `.open` toggle; the
   template's own display:none/block rules stay authoritative. */
.t-dropdown {
  transform-origin: top left;
  opacity: 0;
  transform: scale(var(--scale-tiny));
  pointer-events: none;
  transition:
    opacity var(--duration-quick) var(--ease-smooth-out),
    transform var(--duration-quick) var(--ease-smooth-out),
    display var(--duration-quick) allow-discrete;
}
.t-dropdown[data-origin="top-right"] { transform-origin: top right; }
.open > .t-dropdown {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition:
    opacity var(--duration-fast) var(--ease-smooth-out),
    transform var(--duration-fast) var(--ease-smooth-out),
    display var(--duration-fast) allow-discrete;
}
@starting-style {
  .open > .t-dropdown { opacity: 0; transform: scale(var(--scale-medium)); }
}

/* Tooltip open/close — CSS hover bubble (matrix cafe row). Tailwind's
   invisible / group-hover:visible keeps owning visibility, so leaving still
   hides it instantly; this adds the recipe's delayed fade+scale in. */
.t-tt-pop {
  opacity: 0;
  transform: scale(var(--scale-small));
  transform-origin: bottom left;
  transition: opacity 50ms ease-out, transform 50ms ease-out;
}
.t-tt-wrap:hover > .t-tt-pop {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity var(--duration-quick) ease-out var(--duration-micro),
    transform var(--duration-quick) ease-out var(--duration-micro);
}

/* Toast open / close — rises from below with fade + slight scale + cross-blur,
   slower in (350ms) than out (250ms). Entrance = @starting-style (toasts are
   cloned from <template>); utils.js adds .is-closing on dismiss. No filter is
   declared at rest, so none lingers after the entrance. */
.t-toast {
  transition:
    opacity var(--duration-medium) var(--ease-smooth-out),
    transform var(--duration-medium) var(--ease-smooth-out),
    filter var(--duration-medium) var(--ease-smooth-out);
}
@starting-style {
  .t-toast {
    opacity: 0;
    transform: translateY(16px) scale(var(--scale-medium));
    filter: blur(var(--blur-small));
  }
}
.t-toast.is-closing {
  opacity: 0;
  transform: translateY(16px) scale(var(--scale-medium));
  filter: blur(var(--blur-small));
  pointer-events: none;
  transition-duration: var(--duration-fast);
}

/* Tabs sliding — the role filter's sage underline travels between chips.
   app/role-filter.js writes translateX/width; the static per-chip underline
   steps aside once the bar is wired (data-t-ready). */
.t-tabs { position: relative; }
.t-tabs-pill {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--pf-primary);
  pointer-events: none;
  transition:
    transform var(--duration-fast) var(--ease-smooth-out),
    width var(--duration-fast) var(--ease-smooth-out);
}
.t-tabs:not([data-t-ready]) .t-tabs-pill { visibility: hidden; }
.t-tabs[data-t-ready] .role-chip.is-active { border-bottom-color: transparent; }

/* Accordion expand — native <details>. Height animates 0 ↔ auto through
   interpolate-size (same no-JS-measuring goal as the recipe's grid rows), the
   body cross-blurs in, and content-visibility rides allow-discrete so the
   collapse plays before the content hides. Without ::details-content support
   the native instant toggle stays. (Kept as its own rules so an unsupported
   pseudo-element can't void the other selectors.) */
details.t-acc { interpolate-size: allow-keywords; }
details.t-acc::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  filter: blur(var(--blur-small));
  transition:
    height var(--duration-fast) var(--ease-smooth-out),
    opacity var(--duration-fast) var(--ease-smooth-out),
    filter var(--duration-fast) var(--ease-smooth-out),
    content-visibility var(--duration-fast) allow-discrete;
}
details.t-acc[open]::details-content {
  height: auto;
  opacity: 1;
  filter: none;
}

/* Accordion expand — collapsible panels that toggle Tailwind `.hidden`
   (matrix inactive accounts, sidebar Archive/Teams). The track animates
   grid-template-rows 0fr ↔ 1fr; `display` rides allow-discrete so the collapse
   finishes before `hidden` applies. Padding lives inside .t-acc-panel-inner. */
.t-acc-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--duration-fast) var(--ease-smooth-out),
    display var(--duration-fast) allow-discrete;
}
.t-acc-panel.hidden { display: none; grid-template-rows: 0fr; }
.t-acc-panel-inner {
  min-height: 0;
  /* clip only the collapsing axis so focus rings stay visible sideways */
  overflow-x: visible;
  overflow-y: clip;
  transition:
    opacity var(--duration-fast) var(--ease-smooth-out),
    filter var(--duration-fast) var(--ease-smooth-out);
}
.t-acc-panel.hidden > .t-acc-panel-inner {
  opacity: 0;
  filter: blur(var(--blur-small));
}
@starting-style {
  .t-acc-panel:not(.hidden) { grid-template-rows: 0fr; }
  .t-acc-panel:not(.hidden) > .t-acc-panel-inner {
    opacity: 0;
    filter: blur(var(--blur-small));
  }
}
/* The sidebar groups only animate once the sidebar is ready, so a force-open
   group doesn't replay its expand on every full page load. */
#sidebar:not(.sidebar-ready) .t-acc-panel,
#sidebar:not(.sidebar-ready) .t-acc-panel-inner { transition: none; }
/* Chevron flips v ↔ ^ (scaleY works in every browser) */
.t-acc-chevron {
  display: inline-block;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
details[open] .t-acc-chevron { transform: scaleY(-1); }
/* A right-pointing disclosure arrow keeps its 90° turn, on the recipe clock */
.t-acc-arrow { transition: transform var(--duration-fast) var(--ease-smooth-out); }

/* Skeleton loader and reveal — calm pulse on lazy-load placeholders, then the
   swapped-in content cross-blurs in (motion.js adds .t-reveal after a
   [data-t-skel] load). backwards fill: no filter is left once it ends. */
@keyframes t-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.t-skel-pulse { animation: t-skel-pulse var(--duration-very-slow) var(--ease-in-out) infinite; }
@keyframes t-reveal-in {
  from { opacity: 0; filter: blur(var(--blur-small)); }
  to { opacity: 1; filter: blur(0); }
}
.t-reveal { animation: t-reveal-in var(--duration-slow) var(--ease-in-out) backwards; }

/* Text states swap — an in-place status label: the old text exits up through a
   blur, the new one rises in (motion.js swapText runs the three phases). */
.t-text-swap {
  display: inline-block;
  transition:
    transform var(--duration-quick) var(--ease-in-out),
    filter var(--duration-quick) var(--ease-in-out),
    opacity var(--duration-quick) var(--ease-in-out);
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--distance-micro) * -1));
  filter: blur(var(--blur-small));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--distance-micro));
  filter: blur(var(--blur-small));
  opacity: 0;
  transition: none;
}

/* Number pop-in — digits of a changed count re-enter with a blurred upward
   slide; the last two ride in behind (data-stagger). backwards fill keeps no
   filter on the digits afterwards. */
@keyframes t-digit-pop-in {
  from { transform: translateY(var(--distance-base)); opacity: 0; filter: blur(var(--blur-small)); }
  to { transform: translateY(0); opacity: 1; filter: blur(0); }
}
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; }
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--duration-very-slow) cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: 70ms; }
.t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: 140ms; }

/* Checkbox check — the box fills, then the check stroke draws (paths use
   pathLength="1", so the dash length is exactly 1). Unchecking reverses fast. */
.t-check {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: var(--pf-radius-xs);
  background-color: var(--pf-surface);
  box-shadow: inset 0 0 0 1.5px var(--pf-border-strong);
  transition:
    background-color var(--duration-quick) var(--ease-smooth-out),
    box-shadow var(--duration-quick) var(--ease-smooth-out);
}
.t-check svg { width: 62%; height: 62%; overflow: visible; }
.t-check svg path {
  fill: none;
  stroke: var(--pf-primary-fg);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t-check svg path,
.t-check-fill svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--duration-quick) var(--ease-smooth-out);
}
.t-check-input:checked + .t-check {
  background-color: var(--pf-primary);
  box-shadow: inset 0 0 0 1.5px var(--pf-primary);
}
.t-check-input:checked + .t-check svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--duration-medium) var(--ease-smooth-out);
}
.t-check-input:focus-visible + .t-check {
  outline: 2px solid var(--pf-focus-ring);
  outline-offset: 2px;
}
/* Image pick tiles: the sage tint fills first, then the check draws. */
.t-check-fill {
  opacity: 0;
  transition: opacity var(--duration-quick) var(--ease-smooth-out);
}
.t-check-tile:has(:checked) .t-check-fill { opacity: 1; }
.t-check-tile:has(:checked) .t-check-fill svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--duration-medium) var(--ease-smooth-out);
}

/* Panel reveal scrim — the mobile sidebar's overlay fades with the drawer
   (drawer motion itself lives in base.html's mobile sidebar block). */
.t-scrim {
  transition:
    opacity var(--duration-slow) var(--ease-smooth-out),
    display var(--duration-medium) allow-discrete;
}
.t-scrim.hidden { opacity: 0; transition-duration: var(--duration-medium); }
@starting-style {
  .t-scrim { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-modal-root,
  .t-modal-backdrop,
  .t-modal,
  .t-dropdown,
  .status-dropdown,
  .tip-bubble,
  .t-tt-pop,
  .t-toast,
  .t-tabs-pill,
  .t-acc-panel,
  .t-acc-panel-inner,
  .t-acc-chevron,
  .t-acc-arrow,
  .t-text-swap,
  .t-check,
  .t-check svg path,
  .t-check-fill,
  .t-check-fill svg path,
  .t-scrim { transition: none !important; }
  .t-skel-pulse,
  .t-reveal,
  .t-modal-swap .t-modal > *,
  .t-digit-group .t-digit { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  details.t-acc::details-content { transition: none !important; }
}

/* Poten Factory shell. Semantic tokens come only from css/pf/pf-tokens.css. */
[x-cloak] { display: none !important; }
.pf-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.pf-card { border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow-sm); }
.pf-panel { background: var(--pf-surface); border: 1px solid var(--pf-border); }
.pf-hover:hover { background: var(--pf-surface-muted); }
.pf-console-header { height: var(--pf-topbar-h); border-bottom: 1px solid var(--pf-border); padding: 6px 8px; flex-shrink: 0; }
.pf-console-switcher { position: relative; }
.pf-console-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: var(--pf-radius-md); color: var(--pf-text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.pf-console-trigger:hover { background: var(--pf-surface-muted); }
.pf-console-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--pf-radius-md); background: var(--pf-surface-inverse); }
.pf-console-menu { position: absolute; left: 0; top: calc(100% + 8px); width: 280px; max-width: calc(100vw - 16px); padding: 4px; border: 1px solid var(--pf-border); border-radius: var(--pf-radius-lg); background: var(--pf-surface-raised); box-shadow: var(--pf-shadow-lg); z-index: 60; }
.pf-console-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; width: 100%; border-radius: var(--pf-radius-md); color: var(--pf-text-secondary); text-align: left; }
.pf-console-item:hover, .pf-console-item:focus-visible { background: var(--pf-surface-muted); }
.pf-console-item[aria-current] { background: var(--pf-primary-soft); color: var(--pf-primary-soft-fg); }
.pf-console-item[aria-disabled="true"] { cursor: not-allowed; }
.pf-console-copy { flex: 1; min-width: 0; }
.pf-console-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.pf-console-description { display: block; font-size: 12px; color: var(--pf-text-muted); line-height: 1.5; }
.pf-console-personal { margin-top: 4px; border-top: 1px solid var(--pf-border); border-radius: 0 0 var(--pf-radius-md) var(--pf-radius-md); }
.pf-console-badge { width: 6px; height: 6px; border-radius: var(--pf-radius-full); background: var(--pf-danger); }
.pf-sidebar-tools { display: flex; flex-direction: column; padding: 8px; gap: 4px; border-top: 1px solid var(--pf-border); }
.pf-theme-control, .pf-sidebar-toggle { display: flex; align-items: center; gap: 10px; position: relative; min-height: 36px; padding: 8px 14px; color: var(--pf-text-secondary); border-radius: var(--pf-radius-md); }
.pf-theme-control select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.sidebar-expanded .pf-theme-control select, .mobile-open .pf-theme-control select { position: static; opacity: 1; padding: 0; min-height: auto; border: 0; background: transparent; }
.pf-sidebar-toggle:hover { background: var(--pf-surface-muted); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { background-color: var(--pf-surface); border-color: var(--pf-border-strong); border-radius: var(--pf-radius-md); color: var(--pf-text); min-height: var(--pf-control-h-md); }
textarea { min-height: 80px; }
::placeholder { color: var(--pf-text-muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--pf-primary); }
:focus-visible { outline: 2px solid var(--pf-focus-ring) !important; outline-offset: 0; }
.pf-theme-control:focus-within { outline: 2px solid var(--pf-focus-ring); }
thead { background: var(--pf-surface-muted); color: var(--pf-text-secondary); }
th { font-size: 12px; font-weight: 500; }
tr { min-height: var(--pf-row-h); }
@media (max-width: 767px) {
  button, select, .nav-item, .btn, .pf-sidebar-toggle, .pf-theme-control { min-height: var(--pf-touch-target); }
  #sidebar .nav-label { opacity: 1; max-width: 180px; }
  .pf-console-trigger { min-height: 44px; }
  .page-shell { padding-top: 24px; padding-left: 16px; padding-right: 16px; }
}

.pf-console-trigger .nav-label { display: none; }
.sidebar-expanded .pf-console-trigger .nav-label, .mobile-open .pf-console-trigger .nav-label { display: inline-block; }
.pf-console-trigger { padding: 8px; }